@douyinfe/semi-ui 2.27.0 → 2.27.1

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

@@ -16,6 +16,9 @@ export interface DropdownItemProps extends BaseProps {
     active?: boolean;
     icon?: React.ReactNode;
     onKeyDown?: (e: React.KeyboardEvent) => void;
+    showTick?: boolean;
+    /** internal prop, please do not use  */
+    hover?: boolean;
 }
 declare class DropdownItem extends BaseComponent<DropdownItemProps> {
     static propTypes: {
@@ -35,6 +38,7 @@ declare class DropdownItem extends BaseComponent<DropdownItemProps> {
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static contextType: React.Context<DropdownContextType>;
+    static elementType: string;
     context: DropdownContextType;
     static defaultProps: {
         disabled: boolean;

package/lib/cjs/dropdown/dropdownItem.js

@@ -36,15 +36,18 @@ class DropdownItem extends _baseComponent.default {
       type,
       active,
       icon,
-      onKeyDown
+      onKeyDown,
+      showTick,
+      hover
     } = this.props;
     const {
-      showTick
+      showTick: contextShowTick
     } = this.context;
     const itemclass = (0, _classnames.default)(className, {
       ["".concat(prefixCls, "-item")]: true,
       ["".concat(prefixCls, "-item-disabled")]: disabled,
-      ["".concat(prefixCls, "-item-withTick")]: showTick,
+      ["".concat(prefixCls, "-item-hover")]: hover,
+      ["".concat(prefixCls, "-item-withTick")]: contextShowTick !== null && contextShowTick !== void 0 ? contextShowTick : showTick,
       ["".concat(prefixCls, "-item-").concat(type)]: type,
       ["".concat(prefixCls, "-item-active")]: active
     });
@@ -123,5 +126,6 @@ DropdownItem.defaultProps = {
   onMouseLeave: _noop2.default,
   forwardRef: _noop2.default
 };
+DropdownItem.elementType = 'Dropdown.Item';
 var _default = DropdownItem;
 exports.default = _default;

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/es/dropdown/dropdownItem.d.ts

@@ -16,6 +16,9 @@ export interface DropdownItemProps extends BaseProps {
     active?: boolean;
     icon?: React.ReactNode;
     onKeyDown?: (e: React.KeyboardEvent) => void;
+    showTick?: boolean;
+    /** internal prop, please do not use  */
+    hover?: boolean;
 }
 declare class DropdownItem extends BaseComponent<DropdownItemProps> {
     static propTypes: {
@@ -35,6 +38,7 @@ declare class DropdownItem extends BaseComponent<DropdownItemProps> {
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static contextType: React.Context<DropdownContextType>;
+    static elementType: string;
     context: DropdownContextType;
     static defaultProps: {
         disabled: boolean;

package/lib/es/dropdown/dropdownItem.js

@@ -19,15 +19,18 @@ class DropdownItem extends BaseComponent {
       type,
       active,
       icon,
-      onKeyDown
+      onKeyDown,
+      showTick,
+      hover
     } = this.props;
     const {
-      showTick
+      showTick: contextShowTick
     } = this.context;
     const itemclass = cls(className, {
       ["".concat(prefixCls, "-item")]: true,
       ["".concat(prefixCls, "-item-disabled")]: disabled,
-      ["".concat(prefixCls, "-item-withTick")]: showTick,
+      ["".concat(prefixCls, "-item-hover")]: hover,
+      ["".concat(prefixCls, "-item-withTick")]: contextShowTick !== null && contextShowTick !== void 0 ? contextShowTick : showTick,
       ["".concat(prefixCls, "-item-").concat(type)]: type,
       ["".concat(prefixCls, "-item-active")]: active
     });
@@ -106,4 +109,5 @@ DropdownItem.defaultProps = {
   onMouseLeave: _noop,
   forwardRef: _noop
 };
+DropdownItem.elementType = 'Dropdown.Item';
 export default DropdownItem;

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/package.json

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