@douyinfe/semi-ui 2.57.0-beta.0 → 2.58.0-beta.0

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

@@ -117,6 +117,7 @@ function withField(Component, opts) {
     const [touched, setTouched] = (0, _react.useState)();
     const [cursor, setCursor, getCursor] = (0, _index.useStateWithGetter)(0);
     const [status, setStatus] = (0, _react.useState)(validateStatus); // use props.validateStatus to init
+    const isUnmounted = (0, _react.useRef)(false);
     const rulesRef = (0, _react.useRef)(rules);
     const validateRef = (0, _react.useRef)(validate);
     const validatePromise = (0, _react.useRef)(null);
@@ -127,6 +128,9 @@ function withField(Component, opts) {
       updater.updateStateTouched(field, isTouched, callOpts);
     };
     const updateError = (errors, callOpts) => {
+      if (isUnmounted.current) {
+        return;
+      }
       if (errors === getError()) {
         // When the inspection result is unchanged, no need to update, saving a forceUpdate overhead
         // When errors is an array, deepEqual is not used, and it is always treated as a need to update
@@ -171,7 +175,7 @@ function withField(Component, opts) {
         validator.validate(model, {
           first: mergeStopValidateWithError
         }, (errors, fields) => {}).then(res => {
-          if (validatePromise.current !== rootPromise) {
+          if (isUnmounted.current || validatePromise.current !== rootPromise) {
             return;
           }
           // validation passed
@@ -179,7 +183,7 @@ function withField(Component, opts) {
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
-          if (validatePromise.current !== rootPromise) {
+          if (isUnmounted.current || validatePromise.current !== rootPromise) {
             return;
           }
           let {
@@ -225,7 +229,7 @@ function withField(Component, opts) {
         } 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) {
+            if (isUnmounted.current || validatePromise.current !== rootPromise) {
               return;
             }
             if ((0, _utils.isValid)(result)) {
@@ -353,11 +357,14 @@ function withField(Component, opts) {
       rulesRef.current = rules;
       validateRef.current = validate;
     }, [rules, validate]);
-    // exec validate once when trigger inlcude 'mount'
     useIsomorphicEffect(() => {
+      // exec validate once when trigger include 'mount'
       if (validateOnMount) {
         fieldValidate(value);
       }
+      return () => {
+        isUnmounted.current = true;
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // register when mounted，unregister when unmounted

package/lib/cjs/image/image.js

@@ -169,9 +169,11 @@ class Image extends _baseComponent.default {
         fallback,
         placeholder,
         imageID,
-        setDownloadName
+        setDownloadName,
+        imgCls,
+        imgStyle
       } = _b,
-      restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID", "setDownloadName"]);
+      restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID", "setDownloadName", "imgCls", "imgStyle"]);
     const outerStyle = Object.assign({
       width,
       height
@@ -194,9 +196,11 @@ class Image extends _baseComponent.default {
       src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
       "data-src": src,
       alt: alt,
+      style: imgStyle,
       className: (0, _classnames.default)(`${prefixCls}-img`, {
         [`${prefixCls}-img-preview`]: showPreviewCursor,
-        [`${prefixCls}-img-error`]: loadStatus === "error"
+        [`${prefixCls}-img-error`]: loadStatus === "error",
+        [imgCls]: Boolean(imgCls)
       }),
       width: width,
       height: height,

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

@@ -23,6 +23,8 @@ export interface ImageProps extends BaseProps {
     children?: ReactNode;
     imageID?: number;
     setDownloadName?: (src: string) => string;
+    imgStyle?: React.CSSProperties;
+    imgCls?: string;
 }
 export interface PreviewProps extends BaseProps {
     visible?: boolean;

package/lib/cjs/input/index.js

@@ -70,9 +70,10 @@ class Input extends _baseComponent.default {
     this.handlePreventMouseDown = e => {
       this.foundation.handlePreventMouseDown(e);
     };
+    const initValue = 'value' in props ? props.value : props.defaultValue;
     this.state = {
-      value: '',
-      cachedValue: null,
+      value: initValue,
+      cachedValue: props.value,
       disabled: false,
       props: {},
       isFocus: false,
@@ -145,7 +146,6 @@ class Input extends _baseComponent.default {
   componentDidMount() {
     // autofocus is changed from the original support of input to the support of manually calling the focus method,
     // so that preventScroll can still take effect under the setting of autofocus
-    this.foundation.init();
     const {
       disabled,
       autoFocus,

package/lib/cjs/input/textarea.js

@@ -46,12 +46,14 @@ class TextArea extends _baseComponent.default {
         forwardRef.current = node;
       }
     };
+    const initValue = 'value' in props ? props.value : props.defaultValue;
     this.state = {
-      value: '',
+      value: initValue,
       isFocus: false,
       isHover: false,
       height: 0,
-      minLength: props.minLength
+      minLength: props.minLength,
+      cachedValue: props.value
     };
     this.focusing = false;
     this.foundation = new _textareaFoundation.default(this.adapter);

package/lib/cjs/navigation/Item.js

@@ -217,7 +217,7 @@ class NavItem extends _baseComponent.default {
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onKeyPress: this.handleKeyPress
-      }), itemChildren);
+      }, this.getDataAttr(this.props)), itemChildren);
     }
     // Display Tooltip when disabled and SubNav
     if (isCollapsed && !isInSubNav && !isSubNav || isCollapsed && isSubNav && disabled) {

package/lib/cjs/table/Body/BaseRow.d.ts

@@ -158,11 +158,9 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         disabled: boolean;
     };
     get adapter(): TableRowAdapter<BaseRowProps>;
-    ref: React.MutableRefObject<any>;
     constructor(props: BaseRowProps);
     componentDidMount(): void;
     shouldComponentUpdate(nextProps: BaseRowProps): boolean;
-    _cacheNode: (node: any) => void;
     renderExpandIcon: (record: Record<string, any>) => React.ReactNode;
     renderCells(): React.ReactNode[];
     handleMouseEnter: (e: React.MouseEvent) => void;

package/lib/cjs/table/Body/BaseRow.js

@@ -11,7 +11,7 @@ var _stubTrue2 = _interopRequireDefault(require("lodash/stubTrue"));
 var _get2 = _interopRequireDefault(require("lodash/get"));
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 var _each2 = _interopRequireDefault(require("lodash/each"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
@@ -20,8 +20,6 @@ var _tableRowFoundation = _interopRequireDefault(require("@douyinfe/semi-foundat
 var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
 var _baseComponent = _interopRequireDefault(require("../../_base/baseComponent"));
 var _TableCell = _interopRequireDefault(require("../TableCell"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -98,9 +96,6 @@ class TableRow extends _baseComponent.default {
   }
   constructor(props) {
     super(props);
-    this._cacheNode = node => {
-      this.ref.current = node;
-    };
     // Pass true to render the tree-shaped expand button
     this.renderExpandIcon = record => {
       const {
@@ -129,7 +124,6 @@ class TableRow extends _baseComponent.default {
         customRowProps.onClick(e);
       }
     };
-    this.ref = /*#__PURE__*/(0, _react.createRef)();
     this.foundation = new _tableRowFoundation.default(this.adapter);
   }
   componentDidMount() {
@@ -270,7 +264,8 @@ class TableRow extends _baseComponent.default {
       expandableRow,
       level,
       expandedRow,
-      isSection
+      isSection,
+      rowKey
     } = this.props;
     const BodyRow = components.body.row;
     const _a = onRow(record, index) || {},
@@ -281,7 +276,7 @@ class TableRow extends _baseComponent.default {
       rowProps = __rest(_a, ["className", "style"]);
     this.adapter.setCache('customRowProps', Object.assign({}, rowProps));
     const baseRowStyle = Object.assign(Object.assign({}, style), customStyle);
-    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? replaceClassName : (0, _classnames.default)(className, `${prefixCls}-row`, {
+    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? (0, _classnames.default)(replaceClassName, customClassName) : (0, _classnames.default)(className, `${prefixCls}-row`, {
       [`${prefixCls}-row-selected`]: selected,
       [`${prefixCls}-row-expanded`]: expanded,
       [`${prefixCls}-row-hovered`]: hovered,
@@ -309,7 +304,7 @@ class TableRow extends _baseComponent.default {
     }, ariaProps, rowProps, {
       style: baseRowStyle,
       className: rowCls,
-      ref: this._cacheNode,
+      "data-row-key": rowKey,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       onClick: this.handleClick

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ColumnProps } from './interface';
+import { ColumnProps, TableComponents } from './interface';
 export interface ColGroupProps {
     columns?: ColumnProps[];
     prefixCls?: string;
     className?: string;
     style?: React.CSSProperties;
-    components?: Record<string, any>;
+    components?: TableComponents['body'];
 }
 export default class ColGroup extends React.PureComponent<ColGroupProps> {
     static propTypes: {

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

@@ -173,7 +173,7 @@ export interface OnRowReturnObject extends Omit<React.DetailedHTMLProps<React.HT
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void;
 }
-export interface OnGroupedRowReturnObject extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'className'> {
+export interface OnGroupedRowReturnObject extends React.HTMLAttributes<HTMLTableRowElement> {
     [x: string]: any;
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void;
@@ -188,29 +188,30 @@ export interface Data {
     [x: string]: any;
     key?: string | number;
 }
+export type TableComponent<P> = React.ComponentType<P> | React.ForwardRefExoticComponent<P> | keyof React.ReactHTML;
 export interface TableComponents {
-    table?: ReactNode;
+    table?: TableComponent<any>;
     header?: {
-        outer?: ReactNode;
-        wrapper?: ReactNode;
-        row?: ReactNode;
-        cell?: ReactNode;
+        outer?: TableComponent<any>;
+        wrapper?: TableComponent<any>;
+        row?: TableComponent<any>;
+        cell?: TableComponent<any>;
     };
     body?: {
-        outer?: ReactNode;
-        wrapper?: ReactNode;
-        row?: ReactNode;
-        cell?: ReactNode;
+        outer?: TableComponent<any>;
+        wrapper?: TableComponent<any>;
+        row?: TableComponent<any>;
+        cell?: TableComponent<any>;
         colgroup?: {
-            wrapper?: ReactNode;
-            col?: ReactNode;
+            wrapper?: TableComponent<any>;
+            col?: TableComponent<any>;
         };
     };
     footer?: {
-        wrapper?: ReactNode;
-        row?: ReactNode;
-        cell?: ReactNode;
-        outer?: ReactNode;
+        wrapper?: TableComponent<any>;
+        row?: TableComponent<any>;
+        cell?: TableComponent<any>;
+        outer?: TableComponent<any>;
     };
 }
 export interface RowSelectionProps<RecordType> {

package/lib/cjs/tagInput/index.js

@@ -448,9 +448,12 @@ class TagInput extends _baseComponent.default {
         className,
         disabled,
         placeholder,
-        validateStatus
+        validateStatus,
+        prefix,
+        insetLabel,
+        suffix
       } = _a,
-      rest = __rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus"]);
+      rest = __rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus", "prefix", "insetLabel", "suffix"]);
     const {
       focusing,
       hovering,
@@ -465,7 +468,9 @@ class TagInput extends _baseComponent.default {
       [`${prefixCls}-error`]: validateStatus === 'error',
       [`${prefixCls}-warning`]: validateStatus === 'warning',
       [`${prefixCls}-small`]: size === 'small',
-      [`${prefixCls}-large`]: size === 'large'
+      [`${prefixCls}-large`]: size === 'large',
+      [`${prefixCls}-with-prefix`]: !!prefix || !!insetLabel,
+      [`${prefixCls}-with-suffix`]: !!suffix
     });
     const inputCls = (0, _classnames.default)(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
     const wrapperCls = (0, _classnames.default)(`${prefixCls}-wrapper`);

package/lib/cjs/tooltip/index.js

@@ -13,7 +13,7 @@ var _get2 = _interopRequireDefault(require("lodash/get"));
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactDom = _interopRequireWildcard(require("react-dom"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/base/constants");
@@ -545,6 +545,15 @@ class Tooltip extends _baseComponent.default {
     this.mounted = true;
     this.getPopupContainer = this.props.getPopupContainer || this.context.getPopupContainer || defaultGetContainer;
     this.foundation.init();
+    (0, _utils.runAfterTicks)(() => {
+      let triggerEle = this.triggerEl.current;
+      if (triggerEle) {
+        if (!(triggerEle instanceof HTMLElement)) {
+          triggerEle = (0, _reactDom.findDOMNode)(triggerEle);
+        }
+      }
+      this.foundation.updateStateIfCursorOnTrigger(triggerEle);
+    }, 1);
   }
   componentWillUnmount() {
     this.mounted = false;

package/lib/cjs/treeSelect/index.js

@@ -367,15 +367,17 @@ class TreeSelect extends _baseComponent.default {
           leafOnly,
           searchPosition,
           triggerRender,
-          borderless
+          borderless,
+          checkRelation
         } = _a,
-        rest = __rest(_a, ["disabled", "multiple", "filterTreeNode", "validateStatus", "prefix", "suffix", "style", "size", "insetLabel", "className", "placeholder", "showClear", "leafOnly", "searchPosition", "triggerRender", "borderless"]);
+        rest = __rest(_a, ["disabled", "multiple", "filterTreeNode", "validateStatus", "prefix", "suffix", "style", "size", "insetLabel", "className", "placeholder", "showClear", "leafOnly", "searchPosition", "triggerRender", "borderless", "checkRelation"]);
       const {
         inputValue,
         selectedKeys,
         checkedKeys,
         keyEntities,
-        isFocus
+        isFocus,
+        realCheckedKeys
       } = this.state;
       const filterable = Boolean(filterTreeNode);
       const useCustomTrigger = typeof triggerRender === 'function';
@@ -403,31 +405,45 @@ class TreeSelect extends _baseComponent.default {
         [`${prefixcls}-with-suffix`]: suffix,
         [`${prefixcls}-with-suffix`]: suffix
       }, className);
-      const triggerRenderKeys = multiple ? (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly, true) : selectedKeys;
-      const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
-        inputValue: inputValue,
-        value: triggerRenderKeys.map(key => (0, _get2.default)(keyEntities, [key, 'data'])),
-        disabled: disabled,
-        placeholder: placeholder,
-        onClear: this.handleClear,
-        componentName: 'TreeSelect',
-        triggerRender: triggerRender,
-        componentProps: Object.assign({}, this.props),
-        onSearch: this.search,
-        onRemove: this.removeTag
-      }) : [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: 'prefix'
-      }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: 'selection'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-selection`
-      }, this.renderSelectContent())), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: 'suffix'
-      }, suffix ? this.renderSuffix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: 'clearBtn'
-      }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: 'arrow'
-      }, this.renderArrow())];
+      let inner;
+      if (useCustomTrigger) {
+        let triggerRenderKeys = [];
+        if (multiple) {
+          if (checkRelation === 'related') {
+            triggerRenderKeys = (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly, true);
+          } else if (checkRelation === 'unRelated') {
+            triggerRenderKeys = [...realCheckedKeys];
+          }
+        } else {
+          triggerRenderKeys = selectedKeys;
+        }
+        inner = /*#__PURE__*/_react.default.createElement(_trigger.default, {
+          inputValue: inputValue,
+          value: triggerRenderKeys.map(key => (0, _get2.default)(keyEntities, [key, 'data'])),
+          disabled: disabled,
+          placeholder: placeholder,
+          onClear: this.handleClear,
+          componentName: 'TreeSelect',
+          triggerRender: triggerRender,
+          componentProps: Object.assign({}, this.props),
+          onSearch: this.search,
+          onRemove: this.removeTag
+        });
+      } else {
+        inner = [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: 'prefix'
+        }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: 'selection'
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: `${prefixcls}-selection`
+        }, this.renderSelectContent())), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: 'suffix'
+        }, suffix ? this.renderSuffix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: 'clearBtn'
+        }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: 'arrow'
+        }, this.renderArrow())];
+      }
       const tabIndex = disabled ? null : 0;
       /**
        * Reasons for disabling the a11y eslint rule:
@@ -891,7 +907,6 @@ class TreeSelect extends _baseComponent.default {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
-    var _a;
     const {
       prevProps,
       rePosKey
@@ -954,16 +969,6 @@ class TreeSelect extends _baseComponent.default {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
       } else if (!prevProps && props.value) {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-      } else if (!isExpandControlled && needUpdateTreeData && props.value) {
-        // 当 treeData 已经设置具体的值，并且设置了 props.loadData ，则认为 treeData 的更新是因为 loadData 导致的
-        // 如果是因为 loadData 导致 treeData改变， 此时在这里重新计算 key 会导致为未选中的展开项目被收起
-        // 所以此时不需要重新计算 expandedKeys，因为在点击展开按钮时候已经把被展开的项添加到 expandedKeys 中
-        // When treeData has a specific value and props.loadData is set, it is considered that the update of treeData is caused by loadData
-        // If the treeData is changed because of loadData, recalculating the key here will cause the unselected expanded items to be collapsed
-        // So there is no need to recalculate expandedKeys at this time, because the expanded item has been added to expandedKeys when the expand button is clicked
-        if (!(prevState.treeData && ((_a = prevState.treeData) === null || _a === void 0 ? void 0 : _a.length) > 0 && props.loadData)) {
-          newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
-        }
       }
       if (!newState.expandedKeys) {
         delete newState.expandedKeys;

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

@@ -107,6 +107,7 @@ function withField(Component, opts) {
     const [touched, setTouched] = useState();
     const [cursor, setCursor, getCursor] = useStateWithGetter(0);
     const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
+    const isUnmounted = useRef(false);
     const rulesRef = useRef(rules);
     const validateRef = useRef(validate);
     const validatePromise = useRef(null);
@@ -117,6 +118,9 @@ function withField(Component, opts) {
       updater.updateStateTouched(field, isTouched, callOpts);
     };
     const updateError = (errors, callOpts) => {
+      if (isUnmounted.current) {
+        return;
+      }
       if (errors === getError()) {
         // When the inspection result is unchanged, no need to update, saving a forceUpdate overhead
         // When errors is an array, deepEqual is not used, and it is always treated as a need to update
@@ -161,7 +165,7 @@ function withField(Component, opts) {
         validator.validate(model, {
           first: mergeStopValidateWithError
         }, (errors, fields) => {}).then(res => {
-          if (validatePromise.current !== rootPromise) {
+          if (isUnmounted.current || validatePromise.current !== rootPromise) {
             return;
           }
           // validation passed
@@ -169,7 +173,7 @@ function withField(Component, opts) {
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
-          if (validatePromise.current !== rootPromise) {
+          if (isUnmounted.current || validatePromise.current !== rootPromise) {
             return;
           }
           let {
@@ -215,7 +219,7 @@ function withField(Component, opts) {
         } 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) {
+            if (isUnmounted.current || validatePromise.current !== rootPromise) {
               return;
             }
             if (isValid(result)) {
@@ -343,11 +347,14 @@ function withField(Component, opts) {
       rulesRef.current = rules;
       validateRef.current = validate;
     }, [rules, validate]);
-    // exec validate once when trigger inlcude 'mount'
     useIsomorphicEffect(() => {
+      // exec validate once when trigger include 'mount'
       if (validateOnMount) {
         fieldValidate(value);
       }
+      return () => {
+        isUnmounted.current = true;
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // register when mounted，unregister when unmounted

package/lib/es/image/image.js

@@ -162,9 +162,11 @@ export default class Image extends BaseComponent {
         fallback,
         placeholder,
         imageID,
-        setDownloadName
+        setDownloadName,
+        imgCls,
+        imgStyle
       } = _b,
-      restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID", "setDownloadName"]);
+      restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID", "setDownloadName", "imgCls", "imgStyle"]);
     const outerStyle = Object.assign({
       width,
       height
@@ -187,9 +189,11 @@ export default class Image extends BaseComponent {
       src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
       "data-src": src,
       alt: alt,
+      style: imgStyle,
       className: cls(`${prefixCls}-img`, {
         [`${prefixCls}-img-preview`]: showPreviewCursor,
-        [`${prefixCls}-img-error`]: loadStatus === "error"
+        [`${prefixCls}-img-error`]: loadStatus === "error",
+        [imgCls]: Boolean(imgCls)
       }),
       width: width,
       height: height,

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

@@ -23,6 +23,8 @@ export interface ImageProps extends BaseProps {
     children?: ReactNode;
     imageID?: number;
     setDownloadName?: (src: string) => string;
+    imgStyle?: React.CSSProperties;
+    imgCls?: string;
 }
 export interface PreviewProps extends BaseProps {
     visible?: boolean;

package/lib/es/input/index.js

@@ -63,9 +63,10 @@ class Input extends BaseComponent {
     this.handlePreventMouseDown = e => {
       this.foundation.handlePreventMouseDown(e);
     };
+    const initValue = 'value' in props ? props.value : props.defaultValue;
     this.state = {
-      value: '',
-      cachedValue: null,
+      value: initValue,
+      cachedValue: props.value,
       disabled: false,
       props: {},
       isFocus: false,
@@ -138,7 +139,6 @@ class Input extends BaseComponent {
   componentDidMount() {
     // autofocus is changed from the original support of input to the support of manually calling the focus method,
     // so that preventScroll can still take effect under the setting of autofocus
-    this.foundation.init();
     const {
       disabled,
       autoFocus,

package/lib/es/input/textarea.js

@@ -39,12 +39,14 @@ class TextArea extends BaseComponent {
         forwardRef.current = node;
       }
     };
+    const initValue = 'value' in props ? props.value : props.defaultValue;
     this.state = {
-      value: '',
+      value: initValue,
       isFocus: false,
       isHover: false,
       height: 0,
-      minLength: props.minLength
+      minLength: props.minLength,
+      cachedValue: props.value
     };
     this.focusing = false;
     this.foundation = new TextAreaFoundation(this.adapter);

package/lib/es/navigation/Item.js

@@ -210,7 +210,7 @@ export default class NavItem extends BaseComponent {
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onKeyPress: this.handleKeyPress
-      }), itemChildren);
+      }, this.getDataAttr(this.props)), itemChildren);
     }
     // Display Tooltip when disabled and SubNav
     if (isCollapsed && !isInSubNav && !isSubNav || isCollapsed && isSubNav && disabled) {

package/lib/es/table/Body/BaseRow.d.ts

@@ -158,11 +158,9 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         disabled: boolean;
     };
     get adapter(): TableRowAdapter<BaseRowProps>;
-    ref: React.MutableRefObject<any>;
     constructor(props: BaseRowProps);
     componentDidMount(): void;
     shouldComponentUpdate(nextProps: BaseRowProps): boolean;
-    _cacheNode: (node: any) => void;
     renderExpandIcon: (record: Record<string, any>) => React.ReactNode;
     renderCells(): React.ReactNode[];
     handleMouseEnter: (e: React.MouseEvent) => void;