@douyinfe/semi-foundation 2.97.0 → 2.99.0

package/transfer/foundation.ts

@@ -40,7 +40,9 @@ export interface TransferAdapter<P = Record<string, any>, S = Record<string, any
     notifyDeselect: (items: BasicDataItem) => void;
     updateInput: (input: string) => void;
     updateSearchResult: (searchResult: Set<number | string>) => void;
-    searchTree: (keyword: string) => void
+    searchTree: (keyword: string) => void;
+    updateCurrentPage: (currentPage: number) => void;
+    notifyPageChange: (currentPage: number) => void;
 }
 
 export default class TransferFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TransferAdapter<P, S>> {
@@ -253,4 +255,9 @@ export default class TransferFoundation<P = Record<string, any>, S = Record<stri
         this._notifyChange(newSelectedItems);
     }
 
+    handlePageChange(currentPage: number) {
+        this._adapter.updateCurrentPage(currentPage);
+        this._adapter.notifyPageChange(currentPage);
+    }
+
 }

package/transfer/transfer.scss

@@ -118,6 +118,16 @@ $module: #{$prefix}-transfer;
             flex-grow: 1;
         }
 
+        &-pagination {
+            padding-top: $spacing-base-tight;
+            padding-bottom: $spacing-base-tight;
+            padding-left: $spacing-base-tight;
+            padding-right: $spacing-base-tight;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+        }
+
         &-empty {
             height: $height-transfer_left_empty;
         }

package/tree/foundation.ts

@@ -3,7 +3,7 @@
  * https://github.com/react-component/tree
  */
 
-import { isUndefined, difference, pick, get } from 'lodash';
+import { isUndefined, difference, pick, get, throttle } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
     flattenTreeData,
@@ -322,11 +322,35 @@ export interface TreeAdapter extends DefaultAdapter<BasicTreeProps, BasicTreeInn
 
 export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTreeProps, BasicTreeInnerData> {
     delayedDragEnterLogic: any;
+    throttledDragOverUpdate: ReturnType<typeof throttle>;
 
     constructor(adapter: TreeAdapter) {
         super({
             ...adapter,
         });
+        // Throttle drag over state updates to improve performance during fast dragging
+        // 16ms ≈ 60fps, ensuring smooth updates without excessive re-renders
+        this.throttledDragOverUpdate = throttle((dropPosition: number) => {
+            this._adapter.updateState({
+                dropPosition,
+            });
+        }, 16);
+    }
+
+    destroy() {
+        super.destroy();
+        // Cancel any pending throttled updates
+        if (this.throttledDragOverUpdate) {
+            this.throttledDragOverUpdate.cancel();
+        }
+
+        // Clear pending delayed drag enter timers to avoid updates after unmount
+        if (this.delayedDragEnterLogic) {
+            Object.keys(this.delayedDragEnterLogic).forEach(key => {
+                clearTimeout(this.delayedDragEnterLogic[key]);
+            });
+            this.delayedDragEnterLogic = null;
+        }
     }
 
     _isMultiple() {
@@ -863,21 +887,22 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
             return;
         }
 
-        // Update the drag position
+        // Update the drag position with throttle to improve performance
         if (dragNode && eventKey === dragOverNodeKey) {
             const newPos = calcDropRelativePosition(e, treeNode);
             if (dropPosition === newPos) {
                 return;
             }
-            this._adapter.updateState({
-                dropPosition: newPos,
-            });
+            // Use throttled update to reduce re-renders during fast dragging
+            this.throttledDragOverUpdate(newPos);
         }
 
         this.triggerDragEvent('onDragOver', e, treeNode);
     }
 
     handleNodeDragLeave(e: any, treeNode: BasicTreeNodeData) {
+        // Cancel pending throttled updates when leaving a node
+        this.throttledDragOverUpdate.cancel();
         this._adapter.updateState({
             dragOverNodeKey: '',
         });
@@ -885,12 +910,16 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     }
 
     handleNodeDragEnd(e: any, treeNode: BasicTreeNodeData) {
+        // Flush any pending throttled updates before clearing drag state
+        this.throttledDragOverUpdate.flush();
         this.clearDragState();
         this.triggerDragEvent('onDragEnd', e, treeNode);
         this._adapter.setDragNode(null);
     }
 
     handleNodeDrop(e: any, treeNode: BasicTreeNodeData, dragNode: any) {
+        // Flush any pending throttled updates to ensure accurate drop position
+        this.throttledDragOverUpdate.flush();
         const { dropPosition, dragNodesKeys } = this.getStates();
         const { eventKey, pos } = treeNode;
         this.clearDragState();

package/treeSelect/foundation.ts

@@ -119,6 +119,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
     outerTopSlot?: any;
     placeholder?: string;
     prefix?: any;
+    remote?: boolean;
     searchAutoFocus?: boolean;
     searchPlaceholder?: string;
     showSearchClear?: boolean;
@@ -626,7 +627,15 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         // Input is used as controlled component
         this._adapter.updateInputValue(sugInput);
         const { flattenNodes, expandedKeys, selectedKeys, keyEntities, treeData } = this.getStates();
-        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp, keyMaps } = this.getProps();
+        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp, keyMaps, remote } = this.getProps();
+
+        // When remote is true, skip local filtering, only update inputValue and trigger onSearch callback
+        if (remote) {
+            this._adapter.notifySearch(sugInput, [], []);
+            this._adapter.rePositionDropdown();
+            return;
+        }
+
         const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : get(keyMaps, 'label', 'label');
         const newExpandedKeys: Set<string> = new Set(expandedKeys);
         let filteredNodes: BasicTreeNodeData[] = [];

package/treeSelect/treeSelect.scss

@@ -258,7 +258,6 @@ $module: #{$prefix}-tree-select;
 
     &-multiple {
         display: inline-flex;
-
         .#{$module}-selection {
             padding-left: $spacing-treeSelect_selection_multiple-paddingLeft;
             padding-right: 0;
@@ -269,6 +268,55 @@ $module: #{$prefix}-tree-select;
         }
     }
 
+    /**
+     * Enable wrapping selected tags in trigger.
+     * Only takes effect in multiple + searchPosition="trigger" mode (class added by component).
+     */
+    &-triggerTagWrap {
+        // Prevent trigger from expanding beyond its container
+        max-width: 100%;
+
+        .#{$module}-selection {
+            // Allow selection area to shrink so inner TagInput can wrap
+            min-width: 0;
+        }
+
+        &.#{$module}-multiple {
+            // multiple tags may wrap to multiple lines
+            height: auto;
+
+            .#{$module}-selection {
+                // allow height to grow when wrapping
+                height: auto;
+                min-height: $height-treeSelect_default - 2 * $width-treeSelect-border;
+                overflow: visible;
+            }
+
+            &.#{$module}-small {
+                .#{$module}-selection {
+                    min-height: $height-treeSelect_small - 2 * $width-treeSelect-border;
+                }
+            }
+
+            &.#{$module}-large {
+                .#{$module}-selection {
+                    min-height: $height-treeSelect_large - 2 * $width-treeSelect-border;
+                }
+            }
+        }
+
+        // Make TagInput shrinkable as a flex item, and constrain measured input width
+        .#{$prefix}-tagInput {
+            min-width: 0;
+            max-width: 100%;
+            flex: 1 1 auto;
+
+            .#{$prefix}-tagInput-wrapper-input {
+                max-width: 100%;
+            }
+        }
+    }
+
     &-small {
         min-height: $height-treeSelect_small;
         line-height: $font-treeSelect_small-lineHeight;

package/utils/Store.ts

@@ -7,7 +7,8 @@ class Store<T = Record<string, any>> {
         this._listeners = [];
     }
 
-    subscribe(listener: (state: T) => () => void) {
+    // Listener return value is ignored, but keep type compatible with older signature
+    subscribe(listener: (state: T) => void | (() => void)) {
         this._listeners.push(listener);
         const unsubscribe = () => {
             const index = this._listeners.indexOf(listener);