@douyinfe/semi-ui 2.56.3-alpha.0 → 2.56.4-alpha.0

package/dist/umd/semi-ui.js

@@ -62215,6 +62215,7 @@ class Modal extends BaseComponent {
         footerFill
       } = this.props;
       const getCancelButton = locale => {
+        var _a;
         if (!hasCancel) {
           return null;
         } else {
@@ -62226,6 +62227,9 @@ class Modal extends BaseComponent {
             block: footerFill,
             autoFocus: true
           }, this.props.cancelButtonProps, {
+            style: Object.assign(Object.assign({}, footerFill ? {
+              marginLeft: "unset"
+            } : {}), (_a = this.props.cancelButtonProps) === null || _a === void 0 ? void 0 : _a.style),
             "x-semi-children-alias": "cancelText"
           }), cancelText || locale.cancel);
         }
@@ -90389,7 +90393,7 @@ class TreeSelectFoundation extends foundation {
     } = this.getProps();
     const newExpandedKeys = new Set(expandedKeys);
     const isExpandControlled = this._isExpandControlled();
-    const expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
+    const expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities, false);
     expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
     const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
     this._adapter.updateState({
@@ -90426,7 +90430,7 @@ class TreeSelectFoundation extends foundation {
     let newFlattenNodes = [];
     let filteredShownKeys = new Set([]);
     if (!sugInput) {
-      expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
+      expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities, false);
       expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
       newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
     } else {
@@ -90729,6 +90733,36 @@ class TreeSelectFoundation extends foundation {
   setLoadKeys(data, resolve) {
     this._adapter.updateLoadKeys(data, resolve);
   }
+  handlePopoverVisibleChange(isVisible) {
+    const {
+      filterTreeNode,
+      searchAutoFocus,
+      searchPosition
+    } = this.getProps();
+    const inputValue = this.getState('inputValue');
+    // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
+    // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
+    if (isVisible === false && filterTreeNode) {
+      inputValue && this._adapter.setClearInputFlag(true);
+      this.clearInputValue();
+    }
+    if (filterTreeNode && searchPosition === treeSelect_constants_strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
+      this.focusInput(true);
+    }
+  }
+  handleAfterClose() {
+    // flattenNode 的变化将导致弹出层面板中的选项数目变化
+    // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
+    // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
+    // Changes to flattenNode will cause the number of options in the popup panel to change
+    // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
+    // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
+    const {
+      filterTreeNode
+    } = this.getProps();
+    const shouldClear = this._adapter.getClearInputFlag();
+    filterTreeNode && shouldClear && this.clearInput();
+  }
 }
 // EXTERNAL MODULE: ../semi-foundation/treeSelect/treeSelect.scss
 var treeSelect = __webpack_require__("ZrYm");
@@ -91093,15 +91127,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';
@@ -91129,31 +91165,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:
@@ -91408,33 +91458,12 @@ class TreeSelect extends BaseComponent {
       } = data;
       return key;
     };
-    /* Event handler function after popover is closed */
-    this.handlePopoverClose = isVisible => {
-      const {
-        filterTreeNode,
-        searchAutoFocus,
-        searchPosition
-      } = this.props;
-      // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
-      // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
-      if (isVisible === false && filterTreeNode) {
-        this.foundation.clearInputValue();
-      }
-      if (filterTreeNode && searchPosition === treeSelect_constants_strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
-        this.foundation.focusInput(true);
-      }
+    /* Event handler function after popover visible change */
+    this.handlePopoverVisibleChange = isVisible => {
+      this.foundation.handlePopoverVisibleChange(isVisible);
     };
     this.afterClose = () => {
-      // flattenNode 的变化将导致弹出层面板中的选项数目变化
-      // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
-      // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
-      // Changes to flattenNode will cause the number of options in the popup panel to change
-      // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
-      // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
-      const {
-        filterTreeNode
-      } = this.props;
-      filterTreeNode && this.foundation.clearInput();
+      this.foundation.handleAfterClose();
     };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
@@ -91630,6 +91659,7 @@ class TreeSelect extends BaseComponent {
     this.triggerRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
     this.optionsRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
     this.clickOutsideHandler = null;
+    this.clearInputFlag = false;
     this.foundation = new TreeSelectFoundation(this.adapter);
     this.treeSelectID = Math.random().toString(36).slice(2);
     this.onMotionEnd = () => {
@@ -91980,6 +92010,12 @@ class TreeSelect extends BaseComponent {
         this.setState({
           isFocus: bool
         });
+      },
+      setClearInputFlag: flag => {
+        this.clearInputFlag = flag;
+      },
+      getClearInputFlag: () => {
+        return this.clearInputFlag;
       }
     });
   }
@@ -92023,7 +92059,7 @@ class TreeSelect extends BaseComponent {
       autoAdjustOverflow: autoAdjustOverflow,
       mouseLeaveDelay: mouseLeaveDelay,
       mouseEnterDelay: mouseEnterDelay,
-      onVisibleChange: this.handlePopoverClose,
+      onVisibleChange: this.handlePopoverVisibleChange,
       afterClose: this.afterClose
     }, selection);
   }
@@ -92369,7 +92405,7 @@ class UploadFoundation extends foundation {
       addOnPasting
     } = this.getProps();
     this.releaseMemory();
-    if (addOnPasting && !disabled) {
+    if (!disabled) {
       this.unbindPastingHandler();
     }
   }
@@ -93252,27 +93288,31 @@ class UploadFoundation extends foundation {
   handlePasting(e) {
     const isMac = this._adapter.isMac();
     const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
-    if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
-      // https://github.com/microsoft/TypeScript/issues/33923
-      const permissionName = "clipboard-read";
-      // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
-      navigator.permissions.query({
-        name: permissionName
-      }).then(result => {
-        console.log(result);
-        if (result.state === 'granted' || result.state === 'prompt') {
-          // user has authorized or will authorize
-          navigator.clipboard.read().then(clipboardItems => {
-            // Process the data read from the pasteboard
-            // Check the returned data type to determine if it is image data, and process accordingly
-            this.readFileFromClipboard(clipboardItems);
-          });
-        } else {
-          this._adapter.notifyPastingError(result);
-        }
-      }).catch(error => {
-        this._adapter.notifyPastingError(error);
-      });
+    const {
+      addOnPasting
+    } = this.getProps();
+    if (addOnPasting) {
+      if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
+        // https://github.com/microsoft/TypeScript/issues/33923
+        const permissionName = 'clipboard-read';
+        // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
+        navigator.permissions.query({
+          name: permissionName
+        }).then(result => {
+          if (result.state === 'granted' || result.state === 'prompt') {
+            // user has authorized or will authorize
+            navigator.clipboard.read().then(clipboardItems => {
+              // Process the data read from the pasteboard
+              // Check the returned data type to determine if it is image data, and process accordingly
+              this.readFileFromClipboard(clipboardItems);
+            });
+          } else {
+            this._adapter.notifyPastingError(result);
+          }
+        }).catch(error => {
+          this._adapter.notifyPastingError(error);
+        });
+      }
     }
   }
   bindPastingHandler() {