@douyinfe/semi-ui 2.9.1 → 2.10.0-alpha.0

package/form/hoc/withField.tsx

@@ -15,7 +15,6 @@ import { Col } from '../../grid';
 import { CallOpts, WithFieldOption } from '@douyinfe/semi-foundation/form/interface';
 import { CommonFieldProps, CommonexcludeType } from '../interface';
 import { Subtract } from 'utility-types';
-import { noop } from "lodash";
 
 const prefix = cssClasses.PREFIX;
 
@@ -122,7 +121,6 @@ function withField<
         const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
         const rulesRef = useRef(rules);
-        const validateRef = useRef(validate);
 
         // notNotify is true means that the onChange of the Form does not need to be triggered
         // notUpdate is true means that this operation does not need to trigger the forceUpdate
@@ -223,7 +221,7 @@ function withField<
                 let maybePromisedErrors;
                 // let errorThrowSync;
                 try {
-                    maybePromisedErrors = validateRef.current(val, values);
+                    maybePromisedErrors = validate(val, values);
                 } catch (err) {
                     // error throw by syncValidate
                     maybePromisedErrors = err;
@@ -260,7 +258,7 @@ function withField<
             if (transform) {
                 finalVal = transform(val);
             }
-            if (validateRef.current) {
+            if (validate) {
                 return _validate(finalVal, updater.getValue(), callOpts);
             } else if (latestRules) {
                 return _validateInternal(finalVal, callOpts);
@@ -359,8 +357,7 @@ function withField<
         // avoid hooks capture value, fixed issue 346
         useLayoutEffect(() => {
             rulesRef.current = rules;
-            validateRef.current = validate;
-        }, [rules, validate]);
+        }, [rules]);
 
         // exec validate once when trigger inlcude 'mount'
         useLayoutEffect(() => {
@@ -445,11 +442,11 @@ function withField<
             if (helpText) {
                 newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
             }
-
+            
             if (extraText) {
                 newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
             }
-
+            
             if (status === 'error') {
                 newProps['aria-errormessage'] = errorMessageId;
                 newProps['aria-invalid'] = true;

package/lib/cjs/_portal/index.d.ts

@@ -33,6 +33,6 @@ declare class Portal extends PureComponent<PortalProps, PortalState> {
     componentWillUnmount(): void;
     addStyle: (style?: {}) => void;
     addClass: (prefixCls: string, ...classNames: string[]) => void;
-    render(): React.ReactPortal;
+    render(): import("react").ReactPortal;
 }
 export default Portal;

package/lib/cjs/checkbox/checkbox.d.ts

@@ -22,9 +22,13 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     role?: React.HTMLAttributes<HTMLSpanElement>['role'];
     tabIndex?: number;
+    addonId?: string;
+    extraId?: string;
 }
 interface CheckboxState {
     checked: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType: React.Context<CheckboxContextType>;

package/lib/cjs/checkbox/checkbox.js

@@ -51,15 +51,11 @@ class Checkbox extends _baseComponent.default {
 
     const checked = false;
     this.state = {
-      checked: props.checked || props.defaultChecked || checked
+      checked: props.checked || props.defaultChecked || checked,
+      addonId: props.addonId,
+      extraId: props.extraId
     };
     this.checkboxEntity = null;
-    this.addonId = (0, _uuid.getUuidShort)({
-      prefix: 'addon'
-    });
-    this.extraId = (0, _uuid.getUuidShort)({
-      prefix: 'extra'
-    });
     this.foundation = new _checkboxFoundation.default(this.adapter);
   }
 
@@ -81,7 +77,21 @@ class Checkbox extends _baseComponent.default {
       notifyGroupChange: cbContent => {
         this.context.checkboxGroup.onChange(cbContent);
       },
-      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled
+      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled,
+      setAddonId: () => {
+        this.setState({
+          addonId: (0, _uuid.getUuidShort)({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: (0, _uuid.getUuidShort)({
+            prefix: 'extra'
+          })
+        });
+      }
     });
   }
 
@@ -124,7 +134,9 @@ class Checkbox extends _baseComponent.default {
       id
     } = this.props;
     const {
-      checked
+      checked,
+      addonId,
+      extraId
     } = this.state;
     const props = {
       checked,
@@ -171,10 +183,10 @@ class Checkbox extends _baseComponent.default {
     const name = inGroup && this.context.checkboxGroup.name;
 
     const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
-      id: this.addonId,
+      id: addonId,
       className: "".concat(prefix, "-addon")
     }, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
-      id: this.extraId,
+      id: extraId,
       className: extraCls
     }, extra) : null);
 
@@ -194,8 +206,8 @@ class Checkbox extends _baseComponent.default {
         onKeyPress: this.handleEnterPress,
         "aria-labelledby": this.props['aria-labelledby']
       }, /*#__PURE__*/_react.default.createElement(_checkboxInner.default, (0, _assign.default)({}, this.props, props, {
-        addonId: children && this.addonId,
-        extraId: extra && this.extraId,
+        addonId: children && addonId,
+        extraId: extra && extraId,
         name: name,
         isPureCardType: props.isPureCardType,
         ref: ref => {

package/lib/cjs/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

package/lib/cjs/datePicker/datePicker.d.ts

@@ -41,7 +41,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<string | number | object>;

package/lib/cjs/datePicker/insetInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InsetInputValue, Type, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 import { InputProps } from '../input';
 export interface InsetDateInputProps {

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -17,7 +17,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<string | number | object>;
         defaultPickerValue: PropTypes.Requireable<string | number | object>;
         multiple: PropTypes.Requireable<boolean>;

package/lib/cjs/dropdown/dropdownMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export declare type DropdownMenuProps = BaseProps;

package/lib/cjs/form/baseForm.d.ts

@@ -125,7 +125,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onBlur?: (e: React.FocusEvent<Element, Element>) => void;
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/cjs/form/field.d.ts

@@ -73,7 +73,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onBlur?: (e: import("react").FocusEvent<Element, Element>) => void;
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;

package/lib/cjs/form/hoc/withField.js

@@ -147,8 +147,7 @@ function withField(Component, opts) {
     const [cursor, setCursor, getCursor] = (0, _index.useStateWithGetter)(0);
     const [status, setStatus] = (0, _react.useState)(validateStatus); // use props.validateStatus to init
 
-    const rulesRef = (0, _react.useRef)(rules);
-    const validateRef = (0, _react.useRef)(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const rulesRef = (0, _react.useRef)(rules); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -247,7 +246,7 @@ function withField(Component, opts) {
       let maybePromisedErrors; // let errorThrowSync;
 
       try {
-        maybePromisedErrors = validateRef.current(val, values);
+        maybePromisedErrors = validate(val, values);
       } catch (err) {
         // error throw by syncValidate
         maybePromisedErrors = err;
@@ -287,7 +286,7 @@ function withField(Component, opts) {
         finalVal = transform(val);
       }
 
-      if (validateRef.current) {
+      if (validate) {
         return _validate(finalVal, updater.getValue(), callOpts);
       } else if (latestRules) {
         return _validateInternal(finalVal, callOpts);
@@ -396,8 +395,7 @@ function withField(Component, opts) {
 
     (0, _react.useLayoutEffect)(() => {
       rulesRef.current = rules;
-      validateRef.current = validate;
-    }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
+    }, [rules]); // exec validate once when trigger inlcude 'mount'
 
     (0, _react.useLayoutEffect)(() => {
       if (validateOnMount) {

package/lib/cjs/modal/useModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ConfirmProps } from '../confirm';
 import { ModalReactProps } from '../Modal';
 export default function useModal(): (JSX.Element | {

package/lib/cjs/notification/useNotification/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '@douyinfe/semi-foundation/lib/cjs/notification/notification.css';
 import { NoticeProps } from '@douyinfe/semi-foundation/lib/cjs/notification/notificationFoundation';
 export default function useNotification(): (JSX.Element | {

package/lib/cjs/radio/radio.d.ts

@@ -29,9 +29,13 @@ export declare type RadioProps = {
     addonClassName?: string;
     type?: RadioType;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    addonId?: string;
+    extraId?: string;
 };
 export interface RadioState {
     hover?: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {
@@ -71,7 +75,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "middle" | "large";
+        buttonSize?: "small" | "large" | "middle";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/cjs/radio/radio.js

@@ -67,16 +67,12 @@ class Radio extends _baseComponent.default {
     };
 
     this.state = {
-      hover: false
+      hover: false,
+      addonId: props.addonId,
+      extraId: props.extraId
     };
     this.foundation = new _radioFoundation.default(this.adapter);
     this.radioEntity = null;
-    this.addonId = (0, _uuid.getUuidShort)({
-      prefix: 'addon'
-    });
-    this.extraId = (0, _uuid.getUuidShort)({
-      prefix: 'extra'
-    });
   }
 
   get adapter() {
@@ -85,6 +81,20 @@ class Radio extends _baseComponent.default {
         this.setState({
           hover
         });
+      },
+      setAddonId: () => {
+        this.setState({
+          addonId: (0, _uuid.getUuidShort)({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: (0, _uuid.getUuidShort)({
+            prefix: 'extra'
+          })
+        });
       }
     });
   }
@@ -121,7 +131,11 @@ class Radio extends _baseComponent.default {
       value: propValue
     } = this.props;
     let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
-    const isHover = this.state.hover;
+    const {
+      hover: isHover,
+      addonId,
+      extraId
+    } = this.state;
     let props = {};
 
     if (this.isInGroup()) {
@@ -174,10 +188,10 @@ class Radio extends _baseComponent.default {
     const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: this.addonId
+      id: addonId
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: this.extraId
+      id: extraId
     }, extra) : null);
 
     return /*#__PURE__*/_react.default.createElement("label", {
@@ -194,8 +208,8 @@ class Radio extends _baseComponent.default {
       ref: ref => {
         this.radioEntity = ref;
       },
-      addonId: children && this.addonId,
-      extraId: extra && this.extraId
+      addonId: children && addonId,
+      extraId: extra && extraId
     })), isCardRadioGroup ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());

package/lib/cjs/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/scrollList/scrollItem.js

@@ -201,7 +201,7 @@ class ScrollItem extends _baseComponent.default {
       } = this;
       const wrapperHeight = wrapper.offsetHeight;
       const itemHeight = this.getItmHeight(node);
-      const targetTop = (node.offsetTop || this.list.children.length * itemHeight / 2) - (wrapperHeight - itemHeight) / 2;
+      const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
       this.scrollToPos(targetTop, duration);
     };
 

package/lib/cjs/timePicker/Combobox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import ScrollItem from '../scrollList/scrollItem';

package/lib/cjs/timePicker/TimePicker.d.ts

@@ -97,11 +97,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
 export { TimeShape };

package/lib/cjs/timePicker/index.d.ts

@@ -18,11 +18,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/cjs/toast/useToast/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ToastProps } from '@douyinfe/semi-foundation/lib/cjs/toast/toastFoundation';
 export default function useToast(): (JSX.Element | {
     success: (config: ToastProps) => string;

package/lib/cjs/tooltip/index.d.ts

@@ -53,6 +53,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;

package/lib/cjs/tooltip/index.js

@@ -258,7 +258,7 @@ class Tooltip extends _baseComponent.default {
       }, portalEventSet, {
         "x-placement": placement,
         style: (0, _assign.default)({
-          visibility: motion ? 'hidden' : 'visible'
+          visibility: motion ? undefined : 'visible'
         }, style)
       }), contentNode, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {
@@ -327,7 +327,7 @@ class Tooltip extends _baseComponent.default {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: (0, _uuid.getUuidShort)() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+      id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
 
     };
     this.foundation = new _foundation.default(this.adapter);
@@ -600,6 +600,11 @@ class Tooltip extends _baseComponent.default {
       },
       notifyEscKeydown: event => {
         this.props.onEscKeyDown(event);
+      },
+      setId: () => {
+        this.setState({
+          id: (0, _uuid.getUuidShort)()
+        });
       }
     });
   }

package/lib/cjs/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/cjs/upload/index.d.ts

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/lib/es/_portal/index.d.ts

@@ -33,6 +33,6 @@ declare class Portal extends PureComponent<PortalProps, PortalState> {
     componentWillUnmount(): void;
     addStyle: (style?: {}) => void;
     addClass: (prefixCls: string, ...classNames: string[]) => void;
-    render(): React.ReactPortal;
+    render(): import("react").ReactPortal;
 }
 export default Portal;

package/lib/es/checkbox/checkbox.d.ts

@@ -22,9 +22,13 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     role?: React.HTMLAttributes<HTMLSpanElement>['role'];
     tabIndex?: number;
+    addonId?: string;
+    extraId?: string;
 }
 interface CheckboxState {
     checked: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType: React.Context<CheckboxContextType>;

package/lib/es/checkbox/checkbox.js

@@ -26,15 +26,11 @@ class Checkbox extends BaseComponent {
 
     const checked = false;
     this.state = {
-      checked: props.checked || props.defaultChecked || checked
+      checked: props.checked || props.defaultChecked || checked,
+      addonId: props.addonId,
+      extraId: props.extraId
     };
     this.checkboxEntity = null;
-    this.addonId = getUuidShort({
-      prefix: 'addon'
-    });
-    this.extraId = getUuidShort({
-      prefix: 'extra'
-    });
     this.foundation = new CheckboxFoundation(this.adapter);
   }
 
@@ -56,7 +52,21 @@ class Checkbox extends BaseComponent {
       notifyGroupChange: cbContent => {
         this.context.checkboxGroup.onChange(cbContent);
       },
-      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled
+      getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled,
+      setAddonId: () => {
+        this.setState({
+          addonId: getUuidShort({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: getUuidShort({
+            prefix: 'extra'
+          })
+        });
+      }
     });
   }
 
@@ -99,7 +109,9 @@ class Checkbox extends BaseComponent {
       id
     } = this.props;
     const {
-      checked
+      checked,
+      addonId,
+      extraId
     } = this.state;
     const props = {
       checked,
@@ -147,10 +159,10 @@ class Checkbox extends BaseComponent {
     const name = inGroup && this.context.checkboxGroup.name;
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
-      id: this.addonId,
+      id: addonId,
       className: "".concat(prefix, "-addon")
     }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
-      id: this.extraId,
+      id: extraId,
       className: extraCls
     }, extra) : null);
 
@@ -170,8 +182,8 @@ class Checkbox extends BaseComponent {
         onKeyPress: this.handleEnterPress,
         "aria-labelledby": this.props['aria-labelledby']
       }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
-        addonId: children && this.addonId,
-        extraId: extra && this.extraId,
+        addonId: children && addonId,
+        extraId: extra && extraId,
         name: name,
         isPureCardType: props.isPureCardType,
         ref: ref => {

package/lib/es/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

package/lib/es/datePicker/datePicker.d.ts

@@ -41,7 +41,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<string | number | object>;

package/lib/es/datePicker/insetInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InsetInputValue, Type, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 import { InputProps } from '../input';
 export interface InsetDateInputProps {