@douyinfe/semi-ui 2.57.0-beta.0 → 2.57.1-alpha.0

package/dist/umd/semi-ui.js

@@ -18204,6 +18204,14 @@ class foundation_Tooltip extends foundation {
     this.setDisplayNone = (displayNone, cb) => {
       this._adapter.setDisplayNone(displayNone, cb);
     };
+    this.updateStateIfCursorOnTrigger = trigger => {
+      var _a, _b;
+      if ((_a = trigger === null || trigger === void 0 ? void 0 : trigger.matches) === null || _a === void 0 ? void 0 : _a.call(trigger, ":hover")) {
+        const eventNames = this._adapter.getEventName();
+        const triggerEventSet = this.getState("triggerEventSet");
+        (_b = triggerEventSet[eventNames.mouseEnter]) === null || _b === void 0 ? void 0 : _b.call(triggerEventSet);
+      }
+    };
     this.onResize = () => {
       // this.log('resize');
       // rePosition when window resize
@@ -20631,6 +20639,15 @@ class Tooltip extends BaseComponent {
     this.mounted = true;
     this.getPopupContainer = this.props.getPopupContainer || this.context.getPopupContainer || tooltip_defaultGetContainer;
     this.foundation.init();
+    runAfterTicks(() => {
+      let triggerEle = this.triggerEl.current;
+      if (triggerEle) {
+        if (!(triggerEle instanceof HTMLElement)) {
+          triggerEle = (0,external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_.findDOMNode)(triggerEle);
+        }
+      }
+      this.foundation.updateStateIfCursorOnTrigger(triggerEle);
+    }, 1);
   }
   componentWillUnmount() {
     this.mounted = false;
@@ -25073,9 +25090,6 @@ class InputFoundation extends foundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
   }
-  init() {
-    this._setInitValue();
-  }
   destroy() {
     if (this._timer) {
       clearTimeout(this._timer);
@@ -25083,19 +25097,6 @@ class InputFoundation extends foundation {
     }
   }
   setDisable() {}
-  _setInitValue() {
-    const {
-      defaultValue,
-      value
-    } = this.getProps();
-    let v = defaultValue;
-    if (this._isControlledComponent()) {
-      v = value;
-    }
-    this._adapter.setValue(v);
-    // this.checkAllowClear(v);
-  }
-
   setValue(value) {
     this._adapter.setValue(value);
   }
@@ -25480,9 +25481,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,
@@ -25555,7 +25557,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,
@@ -46908,9 +46909,12 @@ class TagInput extends BaseComponent {
         className,
         disabled,
         placeholder,
-        validateStatus
+        validateStatus,
+        prefix,
+        insetLabel,
+        suffix
       } = _a,
-      rest = tagInput_rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus"]);
+      rest = tagInput_rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus", "prefix", "insetLabel", "suffix"]);
     const {
       focusing,
       hovering,
@@ -46925,7 +46929,9 @@ class TagInput extends BaseComponent {
       [`${tagInput_prefixCls}-error`]: validateStatus === 'error',
       [`${tagInput_prefixCls}-warning`]: validateStatus === 'warning',
       [`${tagInput_prefixCls}-small`]: size === 'small',
-      [`${tagInput_prefixCls}-large`]: size === 'large'
+      [`${tagInput_prefixCls}-large`]: size === 'large',
+      [`${tagInput_prefixCls}-with-prefix`]: !!prefix || !!insetLabel,
+      [`${tagInput_prefixCls}-with-suffix`]: !!suffix
     });
     const inputCls = classnames_default()(`${tagInput_prefixCls}-wrapper-input`, `${tagInput_prefixCls}-wrapper-input-${size}`);
     const wrapperCls = classnames_default()(`${tagInput_prefixCls}-wrapper`);
@@ -64302,21 +64308,7 @@ class TextAreaFoundation extends foundation {
       }
     };
   }
-  init() {
-    this.setInitValue();
-  }
   destroy() {}
-  setInitValue() {
-    const {
-      defaultValue,
-      value
-    } = this.getProps();
-    let v = defaultValue;
-    if (this._isControlledComponent()) {
-      v = value;
-    }
-    this._adapter.setValue(v);
-  }
   handleValueChange(v) {
     this._adapter.setValue(v);
   }
@@ -64544,12 +64536,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);
@@ -76769,11 +76763,13 @@ class Slider extends BaseComponent {
     var _this = this;
     return Object.assign(Object.assign({}, super.adapter), {
       getSliderLengths: () => {
+        var _a;
         if (this.sliderEl && this.sliderEl.current) {
           const rect = this.sliderEl.current.getBoundingClientRect();
+          const offsetParentRect = (_a = this.sliderEl.current.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
           const offset = {
-            x: this.sliderEl.current.offsetLeft,
-            y: this.sliderEl.current.offsetTop
+            x: offsetParentRect ? rect.left - offsetParentRect.left : this.sliderEl.current.offsetLeft,
+            y: offsetParentRect ? rect.top - offsetParentRect.top : this.sliderEl.current.offsetTop
           };
           return {
             sliderX: offset.x,
@@ -81843,7 +81839,7 @@ class TableRow extends BaseComponent {
       rowProps = BaseRow_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 : classnames_default()(className, `${prefixCls}-row`, {
+    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? classnames_default()(replaceClassName, customClassName) : classnames_default()(className, `${prefixCls}-row`, {
       [`${prefixCls}-row-selected`]: selected,
       [`${prefixCls}-row-expanded`]: expanded,
       [`${prefixCls}-row-hovered`]: hovered,
@@ -91164,15 +91160,17 @@ class TreeSelect extends BaseComponent {
           leafOnly,
           searchPosition,
           triggerRender,
-          borderless
+          borderless,
+          checkRelation
         } = _a,
-        rest = treeSelect_rest(_a, ["disabled", "multiple", "filterTreeNode", "validateStatus", "prefix", "suffix", "style", "size", "insetLabel", "className", "placeholder", "showClear", "leafOnly", "searchPosition", "triggerRender", "borderless"]);
+        rest = treeSelect_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';
@@ -91200,31 +91198,45 @@ class TreeSelect extends BaseComponent {
         [`${treeSelect_prefixcls}-with-suffix`]: suffix,
         [`${treeSelect_prefixcls}-with-suffix`]: suffix
       }, className);
-      const triggerRenderKeys = multiple ? normalizeKeyList([...checkedKeys], keyEntities, leafOnly, true) : selectedKeys;
-      const inner = useCustomTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(trigger, {
-        inputValue: inputValue,
-        value: triggerRenderKeys.map(key => get_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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
-        key: 'prefix'
-      }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
-        key: 'selection'
-      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-        className: `${treeSelect_prefixcls}-selection`
-      }, this.renderSelectContent())), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
-        key: 'suffix'
-      }, suffix ? this.renderSuffix() : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
-        key: 'clearBtn'
-      }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
-        key: 'arrow'
-      }, this.renderArrow())];
+      let inner;
+      if (useCustomTrigger) {
+        let triggerRenderKeys = [];
+        if (multiple) {
+          if (checkRelation === 'related') {
+            triggerRenderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly, true);
+          } else if (checkRelation === 'unRelated') {
+            triggerRenderKeys = [...realCheckedKeys];
+          }
+        } else {
+          triggerRenderKeys = selectedKeys;
+        }
+        inner = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(trigger, {
+          inputValue: inputValue,
+          value: triggerRenderKeys.map(key => get_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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
+          key: 'prefix'
+        }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
+          key: 'selection'
+        }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+          className: `${treeSelect_prefixcls}-selection`
+        }, this.renderSelectContent())), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
+          key: 'suffix'
+        }, suffix ? this.renderSuffix() : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
+          key: 'clearBtn'
+        }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
+          key: 'arrow'
+        }, this.renderArrow())];
+      }
       const tabIndex = disabled ? null : 0;
       /**
        * Reasons for disabling the a11y eslint rule:
@@ -91688,7 +91700,6 @@ class TreeSelect extends BaseComponent {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
-    var _a;
     const {
       prevProps,
       rePosKey
@@ -91751,16 +91762,6 @@ class TreeSelect extends BaseComponent {
         newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
       } else if (!prevProps && props.value) {
         newState.expandedKeys = calcExpandedKeysForValues(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 = calcExpandedKeysForValues(props.value, keyEntities, props.multiple, valueEntities);
-        }
       }
       if (!newState.expandedKeys) {
         delete newState.expandedKeys;
@@ -98371,6 +98372,7 @@ function withField(Component, opts) {
     const [touched, setTouched] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)();
     const [cursor, setCursor, getCursor] = useStateWithGetter(0);
     const [status, setStatus] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(validateStatus); // use props.validateStatus to init
+    const isUnmounted = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
     const rulesRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(rules);
     const validateRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(validate);
     const validatePromise = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -98381,6 +98383,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
@@ -98425,7 +98430,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
@@ -98433,7 +98438,7 @@ function withField(Component, opts) {
           updateError(undefined, callOpts);
           resolve({});
         }).catch(err => {
-          if (validatePromise.current !== rootPromise) {
+          if (isUnmounted.current || validatePromise.current !== rootPromise) {
             return;
           }
           let {
@@ -98479,7 +98484,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 (utils_isValid(result)) {
@@ -98607,11 +98612,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
@@ -101541,9 +101549,11 @@ class image_Image extends BaseComponent {
         fallback,
         placeholder,
         imageID,
-        setDownloadName
+        setDownloadName,
+        imgCls,
+        imgStyle
       } = _b,
-      restProps = image_rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID", "setDownloadName"]);
+      restProps = image_rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID", "setDownloadName", "imgCls", "imgStyle"]);
     const outerStyle = Object.assign({
       width,
       height
@@ -101566,9 +101576,11 @@ class image_Image extends BaseComponent {
       src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
       "data-src": src,
       alt: alt,
+      style: imgStyle,
       className: classnames_default()(`${image_prefixCls}-img`, {
         [`${image_prefixCls}-img-preview`]: showPreviewCursor,
-        [`${image_prefixCls}-img-error`]: loadStatus === "error"
+        [`${image_prefixCls}-img-error`]: loadStatus === "error",
+        [imgCls]: Boolean(imgCls)
       }),
       width: width,
       height: height,