@douyinfe/semi-foundation 2.56.2 → 2.56.3

package/lib/cjs/treeSelect/foundation.d.ts

@@ -107,6 +107,8 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     updateInputFocus: (bool: boolean) => void;
     updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
     updateIsFocus: (bool: boolean) => void;
+    setClearInputFlag: (flag: boolean) => void;
+    getClearInputFlag: () => boolean;
 }
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
     constructor(adapter: TreeSelectAdapter<P, S>);
@@ -183,4 +185,6 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
      */
     handleInputTriggerFocus(): void;
     setLoadKeys(data: BasicTreeNodeData, resolve: (value?: any) => void): void;
+    handlePopoverVisibleChange(isVisible: boolean): void;
+    handleAfterClose(): void;
 }

package/lib/cjs/treeSelect/foundation.js

@@ -443,7 +443,7 @@ class TreeSelectFoundation extends _foundation.default {
     } = this.getProps();
     const newExpandedKeys = new Set(expandedKeys);
     const isExpandControlled = this._isExpandControlled();
-    const expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(selectedKeys, keyEntities);
+    const expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(selectedKeys, keyEntities, false);
     expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
     const newFlattenNodes = (0, _treeUtil.flattenTreeData)(treeData, newExpandedKeys, keyMaps);
     this._adapter.updateState({
@@ -455,6 +455,7 @@ class TreeSelectFoundation extends _foundation.default {
       filteredExpandedKeys: new Set(expandedOptsKeys),
       filteredShownKeys: new Set([])
     });
+    this._adapter.rePositionDropdown();
   }
   handleInputChange(sugInput) {
     // Input is used as controlled component
@@ -479,7 +480,7 @@ class TreeSelectFoundation extends _foundation.default {
     let newFlattenNodes = [];
     let filteredShownKeys = new Set([]);
     if (!sugInput) {
-      expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(selectedKeys, keyEntities);
+      expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(selectedKeys, keyEntities, false);
       expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
       newFlattenNodes = (0, _treeUtil.flattenTreeData)(treeData, newExpandedKeys, keyMaps);
     } else {
@@ -504,6 +505,7 @@ class TreeSelectFoundation extends _foundation.default {
       filteredExpandedKeys: newFilteredExpandedKeys,
       filteredShownKeys
     });
+    this._adapter.rePositionDropdown();
   }
   handleNodeSelect(e, treeNode) {
     const isDisabled = this._isDisabled(treeNode);
@@ -772,7 +774,8 @@ class TreeSelectFoundation extends _foundation.default {
    * When the search box is on the trigger, the focus event processing method
    */
   handleInputTriggerFocus() {
-    this.clearInput();
+    const inputValue = this.getState('inputValue');
+    inputValue && this.clearInput();
     this._adapter.updateState({
       inputTriggerFocus: true
     });
@@ -780,5 +783,35 @@ class TreeSelectFoundation extends _foundation.default {
   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 === _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();
+  }
 }
 exports.default = TreeSelectFoundation;

package/lib/cjs/upload/foundation.js

@@ -66,7 +66,7 @@ class UploadFoundation extends _foundation.default {
       addOnPasting
     } = this.getProps();
     this.releaseMemory();
-    if (addOnPasting && !disabled) {
+    if (!disabled) {
       this.unbindPastingHandler();
     }
   }
@@ -949,27 +949,31 @@ class UploadFoundation extends _foundation.default {
   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() {

package/lib/es/treeSelect/foundation.d.ts

@@ -107,6 +107,8 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     updateInputFocus: (bool: boolean) => void;
     updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
     updateIsFocus: (bool: boolean) => void;
+    setClearInputFlag: (flag: boolean) => void;
+    getClearInputFlag: () => boolean;
 }
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
     constructor(adapter: TreeSelectAdapter<P, S>);
@@ -183,4 +185,6 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
      */
     handleInputTriggerFocus(): void;
     setLoadKeys(data: BasicTreeNodeData, resolve: (value?: any) => void): void;
+    handlePopoverVisibleChange(isVisible: boolean): void;
+    handleAfterClose(): void;
 }

package/lib/es/treeSelect/foundation.js

@@ -436,7 +436,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
     } = 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({
@@ -448,6 +448,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
       filteredExpandedKeys: new Set(expandedOptsKeys),
       filteredShownKeys: new Set([])
     });
+    this._adapter.rePositionDropdown();
   }
   handleInputChange(sugInput) {
     // Input is used as controlled component
@@ -472,7 +473,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
     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 {
@@ -497,6 +498,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
       filteredExpandedKeys: newFilteredExpandedKeys,
       filteredShownKeys
     });
+    this._adapter.rePositionDropdown();
   }
   handleNodeSelect(e, treeNode) {
     const isDisabled = this._isDisabled(treeNode);
@@ -765,7 +767,8 @@ export default class TreeSelectFoundation extends BaseFoundation {
    * When the search box is on the trigger, the focus event processing method
    */
   handleInputTriggerFocus() {
-    this.clearInput();
+    const inputValue = this.getState('inputValue');
+    inputValue && this.clearInput();
     this._adapter.updateState({
       inputTriggerFocus: true
     });
@@ -773,4 +776,34 @@ export default class TreeSelectFoundation extends BaseFoundation {
   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 === 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();
+  }
 }

package/lib/es/upload/foundation.js

@@ -59,7 +59,7 @@ class UploadFoundation extends BaseFoundation {
       addOnPasting
     } = this.getProps();
     this.releaseMemory();
-    if (addOnPasting && !disabled) {
+    if (!disabled) {
       this.unbindPastingHandler();
     }
   }
@@ -942,27 +942,31 @@ class UploadFoundation extends BaseFoundation {
   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() {

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.56.2",
+    "version": "2.56.3",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.56.2",
+        "@douyinfe/semi-animation": "2.56.3",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "c2d893b432056eac3b7b9aa14828867fa74467fc",
+    "gitHead": "933e2bf0c8d66a690b83d0410656ba4cdf265537",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/treeSelect/foundation.ts

@@ -199,7 +199,9 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
     updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
-    updateIsFocus: (bool: boolean) => void
+    updateIsFocus: (bool: boolean) => void;
+    setClearInputFlag: (flag: boolean) => void;
+    getClearInputFlag: () => boolean
 }
 
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
@@ -588,7 +590,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const { keyMaps } = this.getProps();
         const newExpandedKeys: Set<string> = 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);
 
@@ -601,6 +603,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             filteredExpandedKeys: new Set(expandedOptsKeys),
             filteredShownKeys: new Set([])
         });
+        this._adapter.rePositionDropdown();
     }
 
     handleInputChange(sugInput: string) {
@@ -615,7 +618,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         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 {
@@ -640,6 +643,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             filteredExpandedKeys: newFilteredExpandedKeys,
             filteredShownKeys,
         });
+        this._adapter.rePositionDropdown();
     }
 
     handleNodeSelect(e: any, treeNode: BasicTreeNodeProps) {
@@ -871,7 +875,8 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
      * When the search box is on the trigger, the focus event processing method
      */
     handleInputTriggerFocus() {
-        this.clearInput();
+        const inputValue = this.getState('inputValue');
+        inputValue && this.clearInput();
         this._adapter.updateState({
             inputTriggerFocus: true
         });
@@ -880,4 +885,30 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     setLoadKeys(data: BasicTreeNodeData, resolve: (value?: any) => void) {
         this._adapter.updateLoadKeys(data, resolve);
     }
+
+    handlePopoverVisibleChange(isVisible: boolean) {
+        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 === 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();
+    }
 }

package/upload/foundation.ts

@@ -107,7 +107,7 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     destroy() {
         const { disabled, addOnPasting } = this.getProps();
         this.releaseMemory();
-        if (addOnPasting && !disabled) {
+        if (!disabled) {
             this.unbindPastingHandler();
         }
     }
@@ -884,31 +884,31 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     handlePasting(e: any) {
         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" as PermissionName;
-            // 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 => {
+        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' as PermissionName;
+                // 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);
-                });
+                        } else {
+                            this._adapter.notifyPastingError(result);
+                        }
+                    })
+                    .catch(error => {
+                        this._adapter.notifyPastingError(error);
+                    });
+            }
         }
     }