@douyinfe/semi-ui 2.27.1-alpha.0 → 2.28.0-alpha.0

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

@@ -14,7 +14,7 @@ export interface CarouselState {
 declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     static propTypes: {
         activeIndex: PropTypes.Requireable<number>;
-        animation: PropTypes.Requireable<"fade" | "slide">;
+        animation: PropTypes.Requireable<"slide" | "fade">;
         arrowProps: PropTypes.Requireable<object>;
         autoPlay: PropTypes.Requireable<NonNullable<boolean | object>>;
         className: PropTypes.Requireable<string>;

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

@@ -17,7 +17,7 @@ export interface DropdownItemProps extends BaseProps {
     icon?: React.ReactNode;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     showTick?: boolean;
-    /** 内部属性不建议使用  */
+    /** internal prop, please do not use  */
     hover?: boolean;
 }
 declare class DropdownItem extends BaseComponent<DropdownItemProps> {

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

@@ -17,7 +17,7 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         getProps(): BaseProps;
         getState(key: string): any;
         getStates(): {};
-        setState(s: Pick<{}, never>, callback?: any): void;
+        setState<K extends never>(s: Pick<{}, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

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

@@ -101,7 +101,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         getProps(): DropdownProps;
         getState(key: string): any;
         getStates(): DropdownState;
-        setState(s: Pick<DropdownState, "popVisible">, callback?: any): void;
+        setState<K extends "popVisible">(s: Pick<DropdownState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

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

@@ -133,7 +133,8 @@ function withField(Component, opts) {
     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 validateRef = (0, _react.useRef)(validate);
+    const validatePromise = (0, _react.useRef)(null); // 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) => {
@@ -187,16 +188,24 @@ function withField(Component, opts) {
       const model = {
         [field]: val
       };
-      return new Promise((resolve, reject) => {
+      const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
           first: stopValidateWithError
         }, // eslint-disable-next-line @typescript-eslint/no-empty-function
         (errors, fields) => {}).then(res => {
-          // validation passed
+          if (validatePromise.current !== rootPromise) {
+            return;
+          } // validation passed
+
+
           setStatus('success');
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
+          if (validatePromise.current !== rootPromise) {
+            return;
+          }
+
           let {
             errors,
             fields
@@ -225,44 +234,55 @@ function withField(Component, opts) {
           }
         });
       });
+      validatePromise.current = rootPromise;
+      return rootPromise;
     }; // execute custom validate function
 
 
-    const _validate = (val, values, callOpts) => new Promise(resolve => {
-      let maybePromisedErrors; // let errorThrowSync;
+    const _validate = (val, values, callOpts) => {
+      const rootPromise = new Promise(resolve => {
+        let maybePromisedErrors; // let errorThrowSync;
 
-      try {
-        maybePromisedErrors = validateRef.current(val, values);
-      } catch (err) {
-        // error throw by syncValidate
-        maybePromisedErrors = err;
-      }
+        try {
+          maybePromisedErrors = validateRef.current(val, values);
+        } catch (err) {
+          // error throw by syncValidate
+          maybePromisedErrors = err;
+        }
+
+        if (maybePromisedErrors === undefined) {
+          resolve({});
+          updateError(undefined, callOpts);
+        } else if ((0, _isPromise.default)(maybePromisedErrors)) {
+          maybePromisedErrors.then(result => {
+            // If the async validate is outdated (a newer validate occurs), the result should be discarded
+            if (validatePromise.current !== rootPromise) {
+              return;
+            }
 
-      if (maybePromisedErrors === undefined) {
-        resolve({});
-        updateError(undefined, callOpts);
-      } else if ((0, _isPromise.default)(maybePromisedErrors)) {
-        maybePromisedErrors.then(result => {
-          if ((0, _utils.isValid)(result)) {
-            // validate success，no need to do anything with result
+            if ((0, _utils.isValid)(result)) {
+              // validate success，no need to do anything with result
+              updateError(undefined, callOpts);
+              resolve(null);
+            } else {
+              // validate failed
+              updateError(result, callOpts);
+              resolve(result);
+            }
+          });
+        } else {
+          if ((0, _utils.isValid)(maybePromisedErrors)) {
             updateError(undefined, callOpts);
             resolve(null);
           } else {
-            // validate failed
-            updateError(result, callOpts);
-            resolve(result);
+            updateError(maybePromisedErrors, callOpts);
+            resolve(maybePromisedErrors);
           }
-        });
-      } else {
-        if ((0, _utils.isValid)(maybePromisedErrors)) {
-          updateError(undefined, callOpts);
-          resolve(null);
-        } else {
-          updateError(maybePromisedErrors, callOpts);
-          resolve(maybePromisedErrors);
         }
-      }
-    });
+      });
+      validatePromise.current = rootPromise;
+      return rootPromise;
+    };
 
     const fieldValidate = (val, callOpts) => {
       let finalVal = val;

package/lib/cjs/image/preview.d.ts

@@ -59,7 +59,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         getProps(): PreviewProps;
         getState(key: string): any;
         getStates(): PreviewState;
-        setState(s: Pick<PreviewState, keyof PreviewState>, callback?: any): void;
+        setState<K extends keyof PreviewState>(s: Pick<PreviewState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

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

@@ -154,7 +154,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         getProps(): InputProps;
         getState(key: string): any;
         getStates(): InputState;
-        setState(s: Pick<InputState, keyof InputState>, callback?: any): void;
+        setState<K extends keyof InputState>(s: Pick<InputState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

package/lib/cjs/layout/Sider.d.ts

@@ -33,6 +33,7 @@ declare class Sider extends React.PureComponent<SiderProps> {
         prefixCls: string;
     };
     static contextType: React.Context<ContextType>;
+    static type: string;
     unRegisters: Array<() => void>;
     context: ContextType;
     uniqueId: string;

package/lib/cjs/layout/Sider.js

@@ -134,5 +134,6 @@ Sider.defaultProps = {
   prefixCls: _constants.cssClasses.PREFIX
 };
 Sider.contextType = _layoutContext.default;
+Sider.type = "Sider";
 var _default = Sider;
 exports.default = _default;

package/lib/cjs/layout/index.js

@@ -125,7 +125,9 @@ class Layout extends _react.default.Component {
       siders
     } = this.state;
     const classString = (0, _classnames.default)(className, prefixCls, {
-      ["".concat(prefixCls, "-has-sider")]: typeof hasSider === 'boolean' ? hasSider : siders.length > 0
+      ["".concat(prefixCls, "-has-sider")]: typeof hasSider === 'boolean' && hasSider || siders.length > 0 || _react.default.Children.toArray(children).some(child => {
+        return /*#__PURE__*/_react.default.isValidElement(child) && child.type && child.type.type === "Sider";
+      })
     });
     const Tag = tagName;
     return /*#__PURE__*/_react.default.createElement(_layoutContext.default.Provider, {

package/lib/cjs/modal/Modal.d.ts

@@ -74,8 +74,6 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
         centered: boolean;
         closable: boolean;
         visible: boolean;
-        confirmLoading: boolean;
-        cancelLoading: boolean;
         okType: string;
         maskClosable: boolean;
         hasCancel: boolean;

package/lib/cjs/modal/Modal.js

@@ -93,7 +93,7 @@ class Modal extends _baseComponent.default {
           return /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
             "aria-label": "cancel",
             onClick: this.handleCancel,
-            loading: cancelLoading,
+            loading: cancelLoading === undefined ? this.state.onCancelReturnPromiseStatus === "pending" : cancelLoading,
             type: "tertiary",
             autoFocus: true
           }, this.props.cancelButtonProps, {
@@ -108,7 +108,7 @@ class Modal extends _baseComponent.default {
         "aria-label": "confirm",
         type: okType,
         theme: "solid",
-        loading: confirmLoading,
+        loading: confirmLoading === undefined ? this.state.onOKReturnPromiseStatus === "pending" : confirmLoading,
         onClick: this.handleOk
       }, this.props.okButtonProps, {
         "x-semi-children-alias": "okText"
@@ -244,10 +244,10 @@ class Modal extends _baseComponent.default {
         }
       },
       notifyCancel: e => {
-        this.props.onCancel(e);
+        return this.props.onCancel(e);
       },
       notifyOk: e => {
-        this.props.onOk(e);
+        return this.props.onOk(e);
       },
       notifyClose: () => {
         this.props.afterClose();
@@ -380,8 +380,6 @@ Modal.defaultProps = {
   centered: false,
   closable: true,
   visible: false,
-  confirmLoading: false,
-  cancelLoading: false,
   okType: 'primary',
   maskClosable: true,
   hasCancel: true,

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

@@ -50,7 +50,7 @@ declare class Spin extends BaseComponent<SpinProps, SpinState> {
         getProps(): SpinProps;
         getState(key: string): any;
         getStates(): SpinState;
-        setState(s: Pick<SpinState, keyof SpinState>, callback?: any): void;
+        setState<K extends keyof SpinState>(s: Pick<SpinState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

package/lib/cjs/table/TableHeaderRow.d.ts

@@ -46,7 +46,7 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
         getProps(): TableHeaderRowProps;
         getState(key: string): any;
         getStates(): Record<string, any>;
-        setState(s: Pick<Record<string, any>, string>, callback?: any): void;
+        setState<K extends string>(s: Pick<Record<string, any>, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

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

@@ -14,7 +14,7 @@ export interface CarouselState {
 declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     static propTypes: {
         activeIndex: PropTypes.Requireable<number>;
-        animation: PropTypes.Requireable<"fade" | "slide">;
+        animation: PropTypes.Requireable<"slide" | "fade">;
         arrowProps: PropTypes.Requireable<object>;
         autoPlay: PropTypes.Requireable<NonNullable<boolean | object>>;
         className: PropTypes.Requireable<string>;

package/lib/es/dropdown/dropdownItem.d.ts

@@ -17,7 +17,7 @@ export interface DropdownItemProps extends BaseProps {
     icon?: React.ReactNode;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     showTick?: boolean;
-    /** 内部属性不建议使用  */
+    /** internal prop, please do not use  */
     hover?: boolean;
 }
 declare class DropdownItem extends BaseComponent<DropdownItemProps> {

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

@@ -17,7 +17,7 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         getProps(): BaseProps;
         getState(key: string): any;
         getStates(): {};
-        setState(s: Pick<{}, never>, callback?: any): void;
+        setState<K extends never>(s: Pick<{}, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

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

@@ -101,7 +101,7 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         getProps(): DropdownProps;
         getState(key: string): any;
         getStates(): DropdownState;
-        setState(s: Pick<DropdownState, "popVisible">, callback?: any): void;
+        setState<K extends "popVisible">(s: Pick<DropdownState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

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

@@ -108,7 +108,8 @@ function withField(Component, opts) {
     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
+    const validateRef = useRef(validate);
+    const validatePromise = useRef(null); // 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) => {
@@ -162,16 +163,24 @@ function withField(Component, opts) {
       const model = {
         [field]: val
       };
-      return new Promise((resolve, reject) => {
+      const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
           first: stopValidateWithError
         }, // eslint-disable-next-line @typescript-eslint/no-empty-function
         (errors, fields) => {}).then(res => {
-          // validation passed
+          if (validatePromise.current !== rootPromise) {
+            return;
+          } // validation passed
+
+
           setStatus('success');
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
+          if (validatePromise.current !== rootPromise) {
+            return;
+          }
+
           let {
             errors,
             fields
@@ -200,44 +209,55 @@ function withField(Component, opts) {
           }
         });
       });
+      validatePromise.current = rootPromise;
+      return rootPromise;
     }; // execute custom validate function
 
 
-    const _validate = (val, values, callOpts) => new Promise(resolve => {
-      let maybePromisedErrors; // let errorThrowSync;
+    const _validate = (val, values, callOpts) => {
+      const rootPromise = new Promise(resolve => {
+        let maybePromisedErrors; // let errorThrowSync;
 
-      try {
-        maybePromisedErrors = validateRef.current(val, values);
-      } catch (err) {
-        // error throw by syncValidate
-        maybePromisedErrors = err;
-      }
+        try {
+          maybePromisedErrors = validateRef.current(val, values);
+        } catch (err) {
+          // error throw by syncValidate
+          maybePromisedErrors = err;
+        }
+
+        if (maybePromisedErrors === undefined) {
+          resolve({});
+          updateError(undefined, callOpts);
+        } else if (isPromise(maybePromisedErrors)) {
+          maybePromisedErrors.then(result => {
+            // If the async validate is outdated (a newer validate occurs), the result should be discarded
+            if (validatePromise.current !== rootPromise) {
+              return;
+            }
 
-      if (maybePromisedErrors === undefined) {
-        resolve({});
-        updateError(undefined, callOpts);
-      } else if (isPromise(maybePromisedErrors)) {
-        maybePromisedErrors.then(result => {
-          if (isValid(result)) {
-            // validate success，no need to do anything with result
+            if (isValid(result)) {
+              // validate success，no need to do anything with result
+              updateError(undefined, callOpts);
+              resolve(null);
+            } else {
+              // validate failed
+              updateError(result, callOpts);
+              resolve(result);
+            }
+          });
+        } else {
+          if (isValid(maybePromisedErrors)) {
             updateError(undefined, callOpts);
             resolve(null);
           } else {
-            // validate failed
-            updateError(result, callOpts);
-            resolve(result);
+            updateError(maybePromisedErrors, callOpts);
+            resolve(maybePromisedErrors);
           }
-        });
-      } else {
-        if (isValid(maybePromisedErrors)) {
-          updateError(undefined, callOpts);
-          resolve(null);
-        } else {
-          updateError(maybePromisedErrors, callOpts);
-          resolve(maybePromisedErrors);
         }
-      }
-    });
+      });
+      validatePromise.current = rootPromise;
+      return rootPromise;
+    };
 
     const fieldValidate = (val, callOpts) => {
       let finalVal = val;

package/lib/es/image/preview.d.ts

@@ -59,7 +59,7 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         getProps(): PreviewProps;
         getState(key: string): any;
         getStates(): PreviewState;
-        setState(s: Pick<PreviewState, keyof PreviewState>, callback?: any): void;
+        setState<K extends keyof PreviewState>(s: Pick<PreviewState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

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

@@ -154,7 +154,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         getProps(): InputProps;
         getState(key: string): any;
         getStates(): InputState;
-        setState(s: Pick<InputState, keyof InputState>, callback?: any): void;
+        setState<K extends keyof InputState>(s: Pick<InputState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

package/lib/es/layout/Sider.d.ts

@@ -33,6 +33,7 @@ declare class Sider extends React.PureComponent<SiderProps> {
         prefixCls: string;
     };
     static contextType: React.Context<ContextType>;
+    static type: string;
     unRegisters: Array<() => void>;
     context: ContextType;
     uniqueId: string;

package/lib/es/layout/Sider.js

@@ -118,4 +118,5 @@ Sider.defaultProps = {
   prefixCls: cssClasses.PREFIX
 };
 Sider.contextType = LayoutContext;
+Sider.type = "Sider";
 export default Sider;

package/lib/es/layout/index.js

@@ -109,7 +109,9 @@ class Layout extends React.Component {
       siders
     } = this.state;
     const classString = cls(className, prefixCls, {
-      ["".concat(prefixCls, "-has-sider")]: typeof hasSider === 'boolean' ? hasSider : siders.length > 0
+      ["".concat(prefixCls, "-has-sider")]: typeof hasSider === 'boolean' && hasSider || siders.length > 0 || React.Children.toArray(children).some(child => {
+        return /*#__PURE__*/React.isValidElement(child) && child.type && child.type.type === "Sider";
+      })
     });
     const Tag = tagName;
     return /*#__PURE__*/React.createElement(LayoutContext.Provider, {

package/lib/es/modal/Modal.d.ts

@@ -74,8 +74,6 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
         centered: boolean;
         closable: boolean;
         visible: boolean;
-        confirmLoading: boolean;
-        cancelLoading: boolean;
         okType: string;
         maskClosable: boolean;
         hasCancel: boolean;

package/lib/es/modal/Modal.js

@@ -65,7 +65,7 @@ class Modal extends BaseComponent {
           return /*#__PURE__*/React.createElement(Button, Object.assign({
             "aria-label": "cancel",
             onClick: this.handleCancel,
-            loading: cancelLoading,
+            loading: cancelLoading === undefined ? this.state.onCancelReturnPromiseStatus === "pending" : cancelLoading,
             type: "tertiary",
             autoFocus: true
           }, this.props.cancelButtonProps, {
@@ -80,7 +80,7 @@ class Modal extends BaseComponent {
         "aria-label": "confirm",
         type: okType,
         theme: "solid",
-        loading: confirmLoading,
+        loading: confirmLoading === undefined ? this.state.onOKReturnPromiseStatus === "pending" : confirmLoading,
         onClick: this.handleOk
       }, this.props.okButtonProps, {
         "x-semi-children-alias": "okText"
@@ -216,10 +216,10 @@ class Modal extends BaseComponent {
         }
       },
       notifyCancel: e => {
-        this.props.onCancel(e);
+        return this.props.onCancel(e);
       },
       notifyOk: e => {
-        this.props.onOk(e);
+        return this.props.onOk(e);
       },
       notifyClose: () => {
         this.props.afterClose();
@@ -352,8 +352,6 @@ Modal.defaultProps = {
   centered: false,
   closable: true,
   visible: false,
-  confirmLoading: false,
-  cancelLoading: false,
   okType: 'primary',
   maskClosable: true,
   hasCancel: true,

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

@@ -50,7 +50,7 @@ declare class Spin extends BaseComponent<SpinProps, SpinState> {
         getProps(): SpinProps;
         getState(key: string): any;
         getStates(): SpinState;
-        setState(s: Pick<SpinState, keyof SpinState>, callback?: any): void;
+        setState<K extends keyof SpinState>(s: Pick<SpinState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

package/lib/es/table/TableHeaderRow.d.ts

@@ -46,7 +46,7 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
         getProps(): TableHeaderRowProps;
         getState(key: string): any;
         getStates(): Record<string, any>;
-        setState(s: Pick<Record<string, any>, string>, callback?: any): void;
+        setState<K extends string>(s: Pick<Record<string, any>, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.27.1-alpha.0",
+    "version": "2.28.0-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.27.1-alpha.0",
-        "@douyinfe/semi-animation-react": "2.27.1-alpha.0",
-        "@douyinfe/semi-foundation": "2.27.1-alpha.0",
-        "@douyinfe/semi-icons": "2.27.1-alpha.0",
-        "@douyinfe/semi-illustrations": "2.27.1-alpha.0",
-        "@douyinfe/semi-theme-default": "2.27.1-alpha.0",
+        "@douyinfe/semi-animation": "2.28.0-alpha.0",
+        "@douyinfe/semi-animation-react": "2.28.0-alpha.0",
+        "@douyinfe/semi-foundation": "2.28.0-alpha.0",
+        "@douyinfe/semi-icons": "2.28.0-alpha.0",
+        "@douyinfe/semi-illustrations": "2.28.0-alpha.0",
+        "@douyinfe/semi-theme-default": "2.28.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "1e58386172b9a4a374ffb6b5b82232461d00eea5",
+    "gitHead": "ee3933458b16abacd476c8ea1c28a245c9d85dc0",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",