feat: provide overriding default props to some components via gloal config (#2029)

* feat: add global config overrideDefaultProps
* feat: add overrideDefaultProps to some components

---------

Co-authored-by: pointhalo <[email protected]>
Co-authored-by: pointhalo <[email protected]>

packages/semi-ui/_base/_story/index.stories.jsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import { Button, Typography, Card, Tooltip, Tag, Avatar, Rating, Nav, Layout } from '../../index';
+import {Button, Typography, Card, Tooltip, Tag, Avatar, Rating, Nav, Layout, ConfigProvider, Select} from '../../index';
 import { IconHelpCircle, IconUser, IconStar, IconSetting } from '@douyinfe/semi-icons';
 import './index.scss';
+import semiGlobal from "../../_utils/semi-global";
 
 export default {
   title: 'Base',
@@ -113,4 +114,40 @@ export const TestAlwaysDarkLight = () => {
   }
 
   return <Demo />;
-};
+};
+
+
+
+semiGlobal.config.overrideDefaultProps = {
+    Button: {
+        type: 'warning',
+    },
+    Select: {
+        zIndex: 2000,
+        getPopupContainer: () => document.querySelector('#popupContainer')
+    },
+    Tooltip: {
+        zIndex: 2001,
+        getPopupContainer: () => document.querySelector('#popupContainer'),
+        trigger:"click"
+    },
+};
+
+export const DefaultPropsDemo = () => {
+    return (
+        <div>
+            <ConfigProvider>
+                <div style={{ position: 'relative'}} id='popupContainer'></div>
+                <Tooltip content="zindex 2001">
+                    <Button>test</Button>
+                </Tooltip>
+                <Select
+                    optionList={[
+                        { value: 1, label: 1 },
+                        { value: 2, label: 2 },
+                    ]}
+                ></Select>
+            </ConfigProvider>
+        </div>
+    );
+};

packages/semi-ui/_utils/index.tsx

@@ -3,6 +3,7 @@ import { cloneDeepWith, set, get } from 'lodash';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import { findAll } from '@douyinfe/semi-foundation/utils/getHighlight';
 import { isHTMLElement } from '@douyinfe/semi-foundation/utils/dom';
+import semiGlobal from "./semi-global";
 /**
  * stop propagation
  *
@@ -204,4 +205,33 @@ export function getScrollbarWidth() {
     return 0;
 }
 
+export function getDefaultPropsFromGlobalConfig(componentName: string, semiDefaultProps: any = {}) {
+    const getFromGlobalConfig = ()=> semiGlobal?.config?.overrideDefaultProps?.[componentName] || {};
+    return new Proxy({
+        ...semiDefaultProps,
+    }, {
+        get(target, key, receiver) {
+            const defaultPropsFromGlobal = getFromGlobalConfig();
+            if (key in defaultPropsFromGlobal) {
+                return defaultPropsFromGlobal[key];
+            }
+            return Reflect.get(target, key, receiver);
+        },
+        set(target, key, value, receiver) {
+            return Reflect.set(target, key, value, receiver);
+        },
+        ownKeys() {
+            const defaultPropsFromGlobal = getFromGlobalConfig();
+            return Array.from(new Set([...Reflect.ownKeys(semiDefaultProps), ...Object.keys(defaultPropsFromGlobal)]));
+        },
+        getOwnPropertyDescriptor(target, key) {
+            const defaultPropsFromGlobal = getFromGlobalConfig();
+            if (key in defaultPropsFromGlobal) {
+                return Reflect.getOwnPropertyDescriptor(defaultPropsFromGlobal, key);
+            } else {
+                return Reflect.getOwnPropertyDescriptor(target, key);
+            }
+        }
+    });
+}
 

packages/semi-ui/_utils/semi-global.ts

@@ -0,0 +1,92 @@
+import type { AutoCompleteProps } from "../autoComplete";
+import type { AvatarProps } from "../avatar";
+import type { CascaderProps } from "../cascader";
+import type { CollapseReactProps } from "../collapse";
+import type { CollapsibleProps } from "../collapsible";
+import type { DatePickerProps } from "../datePicker";
+import type { DropdownProps } from "../dropdown";
+import type { ModalReactProps } from "../modal";
+import type { NavProps } from "../navigation";
+import type { NoticeReactProps } from "../notification";
+import type { OverflowListProps } from "../overflowList";
+import type { PopconfirmProps } from "../popconfirm";
+import type { PopoverProps } from "../popover";
+import type { SelectProps } from "../select";
+import type { SideSheetReactProps } from "../sideSheet";
+import type { TabsProps } from "../tabs";
+import type { TimePickerProps } from "../timePicker";
+import type { ToastReactProps } from "../toast";
+import type { TooltipProps } from "../tooltip";
+
+class SemiGlobal {
+
+    config: {
+        overrideDefaultProps?: {
+            // "Anchor"?: Partial<AnchorProps>;
+            "AutoComplete"?: Partial<AutoCompleteProps<any>>;
+            "Avatar"?: Partial<AvatarProps>;
+            // BackTop?: Partial<BackTopProps>;
+            // Badge?: Partial<BadgeProps>;
+            // Banner?: Partial<BannerProps>;
+            // Breadcrumb?: Partial<BreadcrumbProps>;
+            // Button?: Partial<ButtonProps>;
+            // Calendar?: Partial<CalendarProps>;
+            // Card?: Partial<CardProps>;
+            // Carousel?: Partial<CarouselProps>;
+            Cascader?: Partial<CascaderProps>;
+            // Checkbox?: Partial<CheckboxProps>;
+            Collapse?: Partial<CollapseReactProps>;
+            Collapsible?: Partial<CollapsibleProps>;
+            DatePicker?: Partial<DatePickerProps>;
+            // Descriptions?: Partial<DescriptionsProps>;
+            // Divider?: Partial<DividerProps>;
+            Dropdown?: Partial<DropdownProps>;
+            // Empty?: Partial<EmptyProps>;
+            // Form?: Partial<BaseFormProps>;
+            // Row?: Partial<RowProps>;
+            // Col?: Partial<ColProps>;
+            // Highlight?: Partial<HighlightProps>;
+            // Icon?: Partial<IconProps>;
+            // Image?: Partial<ImageProps>;
+            // Input?: Partial<InputProps>;
+            // InputNumber?: Partial<InputNumberProps>;
+            // Layout?: Partial<BasicLayoutProps>;
+            // List?: Partial<ListProps<any>>;
+            Modal?: Partial<ModalReactProps>;
+            Navigation?: Partial<NavProps>;
+            Notification?: Partial<NoticeReactProps>;
+            OverflowList?: Partial<OverflowListProps>;
+            // Pagination?: Partial<PaginationProps>;
+            Popconfirm?: Partial<PopconfirmProps>;
+            Popover?: Partial<PopoverProps>;
+            // Progress?: Partial<ProgressProps>;
+            // Radio?: Partial<RadioProps>;
+            // Rating?: Partial<RatingProps>;
+            // ScrollList?: Partial<ScrollListProps>;
+            Select?: Partial<SelectProps>;
+            SideSheet?: Partial<SideSheetReactProps>;
+            // Skeleton?: Partial<SkeletonProps>;
+            // Slider?: Partial<SliderProps>;
+            // Space?: Partial<SpaceProps>;
+            // Spin?: Partial<SpinProps>;
+            // Steps?: Partial<StepsProps>;
+            // Switch?: Partial<SwitchProps>;
+            // Table?: Partial<TableProps>;
+            Tabs?: Partial<TabsProps>;
+            // Tag?: Partial<TagProps>;
+            // TagInput?: Partial<TagInputProps>;
+            // Timeline?: Partial<TimelineProps>;
+            TimePicker?: Partial<TimePickerProps>;
+            Toast?: Partial<ToastReactProps>;
+            Tooltip?: Partial<TooltipProps>
+            // Transfer?: Partial<TransferProps>;
+            // Tree?: Partial<TreeProps>;
+            // TreeSelect?: Partial<TreeSelectProps>;
+            // Typography?: Partial<BaseTypographyProps>;
+            // Upload?: Partial<UploadProps>
+        }
+    }
+    = {}
+}
+
+export default new SemiGlobal();

packages/semi-ui/autoComplete/index.tsx

@@ -18,6 +18,7 @@ import Option from './option';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import '@douyinfe/semi-foundation/autoComplete/autoComplete.scss';
 import ReactDOM from 'react-dom';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 const prefixCls = cssClasses.PREFIX;
 const sizeSet = strings.SIZE;
@@ -166,7 +167,9 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
 
     static Option = Option;
 
-    static defaultProps = {
+    static __SemiComponentName__ = "AutoComplete";
+    
+    static defaultProps = getDefaultPropsFromGlobalConfig(AutoComplete.__SemiComponentName__, {
         stopPropagation: true,
         motion: true,
         zIndex: popoverNumbers.DEFAULT_Z_INDEX,
@@ -192,7 +195,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
         onKeyDown: noop,
         // onPressEnter: () => undefined,
         // defaultOpen: false,
-    };
+    });
 
     triggerRef: React.RefObject<HTMLDivElement> | null;
     optionsRef: React.RefObject<HTMLDivElement> | null;

packages/semi-ui/avatar/index.tsx

@@ -8,6 +8,7 @@ import { noop } from '@douyinfe/semi-foundation/utils/function';
 import BaseComponent from '../_base/baseComponent';
 import { AvatarProps } from './interface';
 import { handlePrevent } from '@douyinfe/semi-foundation/utils/a11y';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 import TopSlotSvg from "./TopSlotSvg";
 
 
@@ -26,7 +27,8 @@ export interface AvatarState {
 }
 
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
-    static defaultProps = {
+    static __SemiComponentName__ = "Avatar";
+    static defaultProps = getDefaultPropsFromGlobalConfig(Avatar.__SemiComponentName__, {
         size: 'medium',
         color: 'grey',
         shape: 'circle',
@@ -34,7 +36,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onClick: noop,
         onMouseEnter: noop,
         onMouseLeave: noop,
-    };
+    })
 
     static elementType: string;
     static propTypes = {

packages/semi-ui/backtop/index.tsx

@@ -8,6 +8,7 @@ import BackTopFoundation, { BackTopAdapter } from '@douyinfe/semi-foundation/bac
 import '@douyinfe/semi-foundation/backtop/backtop.scss';
 import IconButton from '../iconButton';
 import { IconChevronUp } from '@douyinfe/semi-icons';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -29,11 +30,14 @@ export interface BackTopState {
 
 
 export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
-    static defaultProps = {
+
+    static __SemiComponentName__ = "BackTop";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(BackTop.__SemiComponentName__, {
         visibilityHeight: 400,
         target: getDefaultTarget,
         duration: 450,
-    };
+    })
 
     static propTypes = {
         target: PropTypes.func,

packages/semi-ui/button/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import BaseButton, { ButtonProps as BaseButtonProps } from './Button';
 import IconButton, { IconButtonProps } from '../iconButton';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 export type { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
 
@@ -13,6 +14,7 @@ export type { SplitButtonGroupProps } from './splitButtonGroup';
 
 export interface ButtonProps extends IconButtonProps {} // TODO check
 class Button extends React.PureComponent<ButtonProps> {
+    static __SemiComponentName__ = "Button";
     static propTypes = {
         ...BaseButton.propTypes,
         ...IconButton.propTypes,
@@ -21,6 +23,8 @@ class Button extends React.PureComponent<ButtonProps> {
     constructor(props: ButtonProps = {}) {
         super(props);
     }
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(Button.__SemiComponentName__)
     render() {
         const props = { ...this.props };
         const hasIcon = Boolean(props.icon); 

packages/semi-ui/cascader/index.tsx

@@ -27,7 +27,7 @@ import Item, { CascaderData, Entities, Entity, Data, FilterRenderProps } from '.
 import Trigger from '../trigger';
 import Tag from '../tag';
 import TagInput from '../tagInput';
-import { isSemiIcon } from '../_utils';
+import { getDefaultPropsFromGlobalConfig, isSemiIcon } from '../_utils';
 import { Position } from '../tooltip/index';
 
 export type { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/cascader/foundation';
@@ -100,6 +100,10 @@ const prefixcls = cssClasses.PREFIX;
 const resetkey = 0;
 
 class Cascader extends BaseComponent<CascaderProps, CascaderState> {
+
+    static __SemiComponentName__ = "Cascader";
+
+
     static contextType = ConfigContext;
     static propTypes = {
         'aria-labelledby': PropTypes.string,
@@ -181,7 +185,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         position: PropTypes.string
     };
 
-    static defaultProps = {
+    static defaultProps = getDefaultPropsFromGlobalConfig(Cascader.__SemiComponentName__, {
         borderless: false,
         leafOnly: false,
         arrowIcon: <IconChevronDown />,
@@ -211,7 +215,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onListScroll: noop,
         enableLeafClick: false,
         'aria-label': 'Cascader',
-    };
+    })
 
     options: any;
     isEmpty: boolean;

packages/semi-ui/collapse/index.tsx

@@ -14,6 +14,7 @@ import '@douyinfe/semi-foundation/collapse/collapse.scss';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import { isEqual } from 'lodash';
 import CollapseContext from './collapse-context';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 export type { CollapsePanelProps } from './item';
 
@@ -46,12 +47,14 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         expandIconPosition: PropTypes.oneOf(strings.iconPosition)
     };
 
-    static defaultProps = {
+    static __SemiComponentName__ = "Collapse";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(Collapse.__SemiComponentName__, {
         defaultActiveKey: '',
         clickHeaderToExpand: true,
         onChange: noop,
         expandIconPosition: 'right'
-    };
+    })
 
     constructor(props: CollapseReactProps) {
         super(props);

packages/semi-ui/collapsible/index.tsx

@@ -11,8 +11,9 @@ import cls from "classnames";
 import { cssClasses } from "@douyinfe/semi-foundation/collapsible/constants";
 import { isEqual } from "lodash";
 import "@douyinfe/semi-foundation/collapsible/collapsible.scss";
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
-interface CollapsibleProps extends CollapsibleFoundationProps {
+export interface CollapsibleProps extends CollapsibleFoundationProps {
     motion?: boolean;
     children?: React.ReactNode;
     isOpen?: boolean;
@@ -34,14 +35,16 @@ interface CollapsibleState extends CollapsibleFoundationState {
 }
 
 class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
-    static defaultProps = {
+    static __SemiComponentName__ = "Collapsible";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(Collapsible.__SemiComponentName__, {
         isOpen: false,
         duration: 250,
         motion: true,
         keepDOM: false,
         collapseHeight: 0,
         fade: false
-    };
+    }) 
     public foundation: CollapsibleFoundation;
     private domRef = React.createRef<HTMLDivElement>();
     private resizeObserver: ResizeObserver | null;

packages/semi-ui/configProvider/_story/configProvider.stories.jsx

@@ -4,27 +4,27 @@ import GetContainer from './GetPopupContainer';
 import RTLWrapper from './RTLDirection/RTLWrapper';
 import RTLTable from './RTLDirection/RTLTable';
 import RTLForm from './RTLDirection/RTLForm';
+import ConfigContext from '../context';
+import { Button, ConfigProvider, Select, Tooltip, } from '../../index';
+import semiGlobal from "../../_utils/semi-global";
 
 export default {
-  title: 'ConfigProvider',
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-}
+    title: 'ConfigProvider',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
 
-export {
-  ChangeTimeZone,
-  GetContainer,
-}
+export { ChangeTimeZone, GetContainer };
 
 export const RTLTableDemo = () => (
-  <RTLWrapper>
-    <RTLTable />
-  </RTLWrapper>
+    <RTLWrapper>
+        <RTLTable />
+    </RTLWrapper>
 );
 
 export const RTLFormDemo = () => (
-  <RTLWrapper>
-    <RTLForm />
-  </RTLWrapper>
+    <RTLWrapper>
+        <RTLForm />
+    </RTLWrapper>
 );

packages/semi-ui/configProvider/index.tsx

@@ -7,6 +7,12 @@ import Context, { ContextValue } from './context';
 export interface ConfigProviderProps extends ContextValue {}
 
 export default class ConfigProvider extends React.Component<ConfigProviderProps> {
+
+    constructor(props: ConfigProviderProps) {
+        super(props);
+    }
+
+
     static propTypes = {
         locale: PropTypes.object,
         timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -19,7 +25,9 @@ export default class ConfigProvider extends React.Component<ConfigProviderProps>
         direction: 'ltr',
     };
 
-    renderChilren() {
+
+
+    renderChildren() {
         const { direction, children } = this.props;
         if (direction === 'rtl') {
             return (
@@ -40,7 +48,7 @@ export default class ConfigProvider extends React.Component<ConfigProviderProps>
                     ...rest,
                 }}
             >
-                {this.renderChilren()}
+                {this.renderChildren()}
             </Context.Provider>
         );
     }

packages/semi-ui/datePicker/datePicker.tsx

@@ -29,6 +29,7 @@ import { Locale } from '../locale/interface';
 import { TimePickerProps } from '../timePicker/TimePicker';
 import { ScrollItemProps } from '../scrollList/scrollItem';
 import { InsetInputValue, InsetInputChangeProps } from '@douyinfe/semi-foundation/datePicker/inputFoundation';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
@@ -154,8 +155,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         yearAndMonthOpts: PropTypes.object,
         onClickOutSide: PropTypes.func,
     };
-
-    static defaultProps = {
+    static __SemiComponentName__ = "DatePicker";
+    static defaultProps = getDefaultPropsFromGlobalConfig(DatePicker.__SemiComponentName__, {
         onChangeWithDateFirst: true,
         borderless: false,
         autoAdjustOverflow: true,
@@ -193,7 +194,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE,
         insetInput: false,
         onClickOutSide: noop,
-    };
+    });
 
     triggerElRef: React.MutableRefObject<HTMLElement>;
     panelRef: React.RefObject<HTMLDivElement>;

packages/semi-ui/dropdown/index.tsx

@@ -16,6 +16,7 @@ import DropdownTitle, { DropdownTitleProps } from './dropdownTitle';
 import DropdownContext, { DropdownContextType } from './context';
 import '@douyinfe/semi-foundation/dropdown/dropdown.scss';
 import { noop, get } from 'lodash';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
@@ -99,7 +100,9 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         zIndex: PropTypes.number,
     };
 
-    static defaultProps = {
+    static __SemiComponentName__ = "Dropdown";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(Dropdown.__SemiComponentName__, {
         onVisibleChange: noop,
         prefixCls: cssClasses.PREFIX,
         zIndex: tooltipNumbers.DEFAULT_Z_INDEX,
@@ -110,7 +113,7 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         showTick: false,
         closeOnEsc: true,
         onEscKeyDown: noop,
-    };
+    });
 
     tooltipRef: React.RefObject<Tooltip>
 

packages/semi-ui/grid/index.tsx

@@ -4,4 +4,4 @@ import Col from './col';
 export { Row, Col };
 
 export type { ColSize, ColProps } from './col';
-export type { Breakpoint, Gutter, RowProps } from './row';
+export type { Breakpoint, Gutter, RowProps } from './row';

packages/semi-ui/modal/Modal.tsx

@@ -15,7 +15,7 @@ import { Locale } from '../locale/interface';
 import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
 import CSSAnimation from "../_cssAnimation";
-import { getScrollbarWidth } from '../_utils';
+import { getDefaultPropsFromGlobalConfig, getScrollbarWidth } from '../_utils';
 
 export const destroyFns: any[] = [];
 export type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
@@ -85,8 +85,9 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         footerFill: PropTypes.bool,
     };
 
+    static __SemiComponentName__ = "Modal";
 
-    static defaultProps = {
+    static defaultProps = getDefaultPropsFromGlobalConfig(Modal.__SemiComponentName__, {
         zIndex: 1000,
         motion: true,
         mask: true,
@@ -105,7 +106,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         keepDOM: false,
         lazyRender: true,
         fullScreen: false,
-    };
+    });
     static useModal = useModal;
     foundation: ModalFoundation;
 

packages/semi-ui/navigation/index.tsx

@@ -14,6 +14,7 @@ import Header, { NavHeaderProps } from './Header';
 import NavContext from './nav-context';
 import LocaleConsumer from '../locale/localeConsumer';
 import '@douyinfe/semi-foundation/navigation/navigation.scss';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 export type { CollapseButtonProps } from './CollapseButton';
 export type { NavFooterProps } from './Footer';
@@ -154,8 +155,8 @@ class Nav extends BaseComponent<NavProps, NavState> {
         limitIndent: PropTypes.bool,
         getPopupContainer: PropTypes.func,
     };
-
-    static defaultProps = {
+    static __SemiComponentName__ = "Navigation";
+    static defaultProps = getDefaultPropsFromGlobalConfig(Nav.__SemiComponentName__, {
         subNavCloseDelay: numbers.DEFAULT_SUBNAV_CLOSE_DELAY,
         subNavOpenDelay: numbers.DEFAULT_SUBNAV_OPEN_DELAY,
         tooltipHideDelay: numbers.DEFAULT_TOOLTIP_HIDE_DELAY,
@@ -173,7 +174,7 @@ class Nav extends BaseComponent<NavProps, NavState> {
         // defaultOpenKeys: [],
         // defaultSelectedKeys: [],
         // items: [],
-    };
+    });
 
     itemsChanged: boolean;
     constructor(props: NavProps) {

packages/semi-ui/notification/notice.tsx

@@ -10,7 +10,7 @@ import NotificationFoundation, {
 } from '@douyinfe/semi-foundation/notification/notificationFoundation';
 import Button from '../iconButton';
 import BaseComponent from '../_base/baseComponent';
-import { isSemiIcon } from '../_utils';
+import { getDefaultPropsFromGlobalConfig, isSemiIcon } from '../_utils';
 import { noop } from 'lodash';
 import { IconAlertCircle, IconAlertTriangle, IconClose, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
@@ -48,7 +48,9 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
         direction: PropTypes.oneOf(directions),
     };
 
-    static defaultProps = {
+    static __SemiComponentName__ = "Notification";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(Notice.__SemiComponentName__, {
         duration,
         id: '',
         close: noop,
@@ -59,7 +61,7 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
         title: '',
         showClose: true,
         theme: 'normal',
-    };
+    });
 
     get adapter(): NoticeAdapter {
         return {

packages/semi-ui/overflowList/index.tsx

@@ -10,7 +10,7 @@ import IntersectionObserver from './intersectionObserver';
 import OverflowListFoundation, { OverflowListAdapter } from '@douyinfe/semi-foundation/overflowList/foundation';
 
 import '@douyinfe/semi-foundation/overflowList/overflowList.scss';
-import { cloneDeep } from '../_utils';
+import { cloneDeep, getDefaultPropsFromGlobalConfig } from '../_utils';
 
 const prefixCls = cssClasses.PREFIX;
 const Boundary = strings.BOUNDARY_MAP;
@@ -54,7 +54,9 @@ export interface OverflowListState {
 
 // reference to https://github.com/palantir/blueprint/blob/1aa71605/packages/core/src/components/overflow-list/overflowList.tsx#L34
 class OverflowList extends BaseComponent<OverflowListProps, OverflowListState> {
-    static defaultProps = {
+    static __SemiComponentName__ = "OverflowList";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(OverflowList.__SemiComponentName__, {
         collapseFrom: 'end',
         minVisibleItems: 0,
         overflowRenderer: (): ReactElement => null,
@@ -62,7 +64,7 @@ class OverflowList extends BaseComponent<OverflowListProps, OverflowListState> {
         threshold: 0.75,
         visibleItemRenderer: (): ReactElement => null,
         onOverflow: () => null,
-    };
+    })
     static propTypes = {
         // if render in scroll mode, key is required in items
         className: PropTypes.string,

packages/semi-ui/popconfirm/index.tsx

@@ -14,6 +14,7 @@ import ConfigContext, { ContextValue } from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import { Locale as LocaleObject } from '../locale/interface';
 import '@douyinfe/semi-foundation/popconfirm/popconfirm.scss';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 export interface PopconfirmProps extends PopoverProps {
     cancelText?: string;
@@ -80,7 +81,9 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         position: PropTypes.string,
     };
 
-    static defaultProps = {
+    static __SemiComponentName__ = "Popconfirm";
+
+    static defaultProps = getDefaultPropsFromGlobalConfig(Popconfirm.__SemiComponentName__, {
         stopPropagation: true,
         trigger: 'click',
         // position: 'bottomLeft',
@@ -95,7 +98,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         onCancel: noop,
         onConfirm: noop,
         onClickOutSide: noop,
-    };
+    });
 
     footerRef: React.RefObject<HTMLDivElement | null>;
     popoverRef: React.RefObject<Popover | null>;

packages/semi-ui/popover/index.tsx

@@ -11,6 +11,7 @@ import { isFunction, noop } from 'lodash';
 
 import type { ArrowProps } from './Arrow';
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 export type { ArrowProps };
 declare interface ArrowStyle {
     borderColor?: string;
@@ -90,8 +91,9 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         guardFocus: PropTypes.bool,
         disableArrowKeyDown: PropTypes.bool,
     };
+    static __SemiComponentName__ = "Popover";
 
-    static defaultProps = {
+    static defaultProps = getDefaultPropsFromGlobalConfig(Popover.__SemiComponentName__, {
         arrowBounding: numbers.ARROW_BOUNDING,
         showArrow: false,
         autoAdjustOverflow: true,
@@ -108,7 +110,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         returnFocusOnClose: true,
         guardFocus: true,
         disableFocusListener: true
-    };
+    })
 
     context: ContextValue;
     tooltipRef: React.RefObject<Tooltip | null>;

packages/semi-ui/select/index.tsx

@@ -26,8 +26,7 @@ import OptionGroup from './optionGroup';
 import Spin from '../spin';
 import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
-import { isSemiIcon, getFocusableElements, getActiveElement } from '../_utils';
-import warning from '@douyinfe/semi-foundation/utils/warning';
+import { isSemiIcon, getFocusableElements, getActiveElement, getDefaultPropsFromGlobalConfig } from '../_utils';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 import '@douyinfe/semi-foundation/select/select.scss';
@@ -313,7 +312,9 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         // tagClosable: PropTypes.bool,
     };
 
-    static defaultProps: Partial<SelectProps> = {
+    static __SemiComponentName__ = "Select";
+    
+    static defaultProps: Partial<SelectProps> = getDefaultPropsFromGlobalConfig(Select.__SemiComponentName__, {
         stopPropagation: true,
         motion: true,
         borderless: false,
@@ -356,7 +357,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         // renderSelectedItem: (optionNode) => optionNode.label,
         // The default creator rendering is related to i18, so it is not declared here
         // renderCreateItem: (input) => input
-    };
+    })
 
     inputRef: React.RefObject<HTMLInputElement>;
     triggerRef: React.RefObject<HTMLDivElement>;

packages/semi-ui/sideSheet/index.tsx

@@ -14,7 +14,7 @@ import SideSheetFoundation, {
 } from '@douyinfe/semi-foundation/sideSheet/sideSheetFoundation';
 import '@douyinfe/semi-foundation/sideSheet/sideSheet.scss';
 import CSSAnimation from "../_cssAnimation";
-import { getScrollbarWidth } from '../_utils';
+import { getDefaultPropsFromGlobalConfig, getScrollbarWidth } from '../_utils';
 
 const prefixCls = cssClasses.PREFIX;
 const defaultWidthList = strings.WIDTH;
@@ -66,8 +66,8 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         keepDOM: PropTypes.bool,
         'aria-label': PropTypes.string,
     };
-
-    static defaultProps: SideSheetReactProps = {
+    static __SemiComponentName__ = "SideSheet";
+    static defaultProps: SideSheetReactProps = getDefaultPropsFromGlobalConfig(SideSheet.__SemiComponentName__, {
         visible: false,
         motion: true,
         mask: true,
@@ -81,7 +81,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         closeOnEsc: false,
         afterVisibleChange: noop,
         keepDOM: false
-    };
+    });
     private _active: boolean;
 
     constructor(props: SideSheetReactProps) {

packages/semi-ui/tabs/index.tsx

@@ -13,6 +13,7 @@ import TabPane from './TabPane';
 import TabItem from './TabItem';
 import TabsContext from './tabs-context';
 import { PlainTab, TabBarProps, TabsProps } from './interface';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 
@@ -52,8 +53,8 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         onTabClose: PropTypes.func,
         preventScroll: PropTypes.bool,
     };
-
-    static defaultProps: TabsProps = {
+    static __SemiComponentName__ = "Tabs";
+    static defaultProps: TabsProps = getDefaultPropsFromGlobalConfig(Tabs.__SemiComponentName__, {
         children: [],
         collapsible: false,
         keepDOM: true,
@@ -65,7 +66,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabPosition: 'top',
         type: 'line',
         onTabClose: () => undefined
-    };
+    });
 
     contentRef: RefObject<HTMLDivElement>;
     contentHeight: string;

packages/semi-ui/timePicker/index.tsx

@@ -6,6 +6,7 @@ import { get } from 'lodash';
 import { Locale } from '../locale/interface';
 import type { ValidateStatus } from '../_base/baseComponent';
 import type { ScrollItemProps } from '../scrollList/scrollItem';
+import { getDefaultPropsFromGlobalConfig } from "../_utils";
 
 export type { TimeInputProps } from './TimeInput';
 export type { TimePickerProps } from './TimePicker';
@@ -18,7 +19,8 @@ export type LocalePickerProps = BasePickerProps;
 
 export default class LocaleTimePicker extends React.PureComponent<LocalePickerProps> {
     static propTypes = BaseTimePicker.propTypes;
-    static defaultProps = BaseTimePicker.defaultProps;
+    static __SemiComponentName__ = "TimePicker";
+    static defaultProps = getDefaultPropsFromGlobalConfig(LocaleTimePicker.__SemiComponentName__, BaseTimePicker.defaultProps);
 
     render() {
         const { type } = this.props;

packages/semi-ui/toast/toast.tsx

@@ -8,7 +8,7 @@ import BaseComponent from '../_base/baseComponent';
 import Button from '../iconButton/index';
 import { IconClose, IconAlertTriangle, IconInfoCircle, IconTickCircle, IconAlertCircle } from '@douyinfe/semi-icons';
 import { noop } from 'lodash';
-import { isSemiIcon } from '../_utils';
+import { getDefaultPropsFromGlobalConfig, isSemiIcon } from '../_utils';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -46,8 +46,8 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         icon: PropTypes.node,
         direction: PropTypes.oneOf(strings.directions),
     };
-
-    static defaultProps = {
+    static __SemiComponentName__ = "Toast";
+    static defaultProps = getDefaultPropsFromGlobalConfig(Toast.__SemiComponentName__, {
         onClose: noop,
         content: '',
         close: noop,
@@ -57,7 +57,7 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         stack: false,
         stackExpanded: false,
         theme: 'normal'
-    };
+    })
 
     constructor(props: ToastReactProps) {
         super(props);

packages/semi-ui/tooltip/index.tsx

@@ -20,7 +20,7 @@ import '@douyinfe/semi-foundation/tooltip/tooltip.scss';
 
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
-import { getActiveElement, getFocusableElements, stopPropagation } from '../_utils';
+import { getActiveElement, getDefaultPropsFromGlobalConfig, getFocusableElements, stopPropagation } from '../_utils';
 import Portal from '../_portal/index';
 import ConfigContext, { ContextValue } from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
@@ -150,8 +150,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         preventScroll: PropTypes.bool,
         keepDOM: PropTypes.bool,
     };
-
-    static defaultProps = {
+    static __SemiComponentName__ = "Tooltip";
+    static defaultProps = getDefaultPropsFromGlobalConfig(Tooltip.__SemiComponentName__, {
         arrowBounding: numbers.ARROW_BOUNDING,
         autoAdjustOverflow: true,
         arrowPointAtCenter: true,
@@ -177,7 +177,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         disableFocusListener: false,
         disableArrowKeyDown: false,
         keepDOM: false
-    };
+    });
 
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;