@douyinfe/semi-foundation 2.96.1 → 2.98.0

package/lib/cjs/tag/tag.css

@@ -18,7 +18,7 @@
 .semi-tag-default, .semi-tag-small {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   height: 20px;
   padding: 2px 8px;
 }
@@ -34,7 +34,7 @@
 .semi-tag-large {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   padding: 4px 8px;
   height: 24px;
 }
@@ -505,6 +505,32 @@
   color: var(--semi-color-text-0);
 }
 
+.semi-tag-split {
+  display: inline-flex;
+  align-items: center;
+}
+.semi-tag-split .semi-tag {
+  border-radius: 0;
+  margin-right: 1px;
+}
+.semi-tag-split .semi-tag-first {
+  border-top-left-radius: var(--semi-border-radius-small);
+  border-bottom-left-radius: var(--semi-border-radius-small);
+}
+.semi-tag-split .semi-tag-last {
+  border-top-right-radius: var(--semi-border-radius-small);
+  border-bottom-right-radius: var(--semi-border-radius-small);
+  margin-right: unset;
+}
+.semi-tag-split .semi-tag-circle.semi-tag-first {
+  border-top-left-radius: var(--semi-border-radius-full);
+  border-bottom-left-radius: var(--semi-border-radius-full);
+}
+.semi-tag-split .semi-tag-circle.semi-tag-last {
+  border-top-right-radius: var(--semi-border-radius-full);
+  border-bottom-right-radius: var(--semi-border-radius-full);
+}
+
 .semi-rtl .semi-tag,
 .semi-portal-rtl .semi-tag {
   direction: rtl;

package/lib/cjs/tag/tag.scss

@@ -329,4 +329,37 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
+.#{$module}-split {
+    display: inline-flex;
+    align-items: center;
+
+    .#{$module} {
+        border-radius: 0;
+        margin-right: 1px;
+
+        &-first {
+            border-top-left-radius: $radius-tag;
+            border-bottom-left-radius: $radius-tag;
+        }
+
+        &-last {
+            border-top-right-radius: $radius-tag;
+            border-bottom-right-radius: $radius-tag;
+            margin-right: unset;
+        }
+
+        &-circle {
+            &.#{$module}-first {
+                border-top-left-radius: $radius-tag_circle;
+                border-bottom-left-radius: $radius-tag_circle;
+            }
+
+            &.#{$module}-last {
+                border-top-right-radius: $radius-tag_circle;
+                border-bottom-right-radius: $radius-tag_circle;
+            }
+        }
+    }
+}
+
 @import './rtl.scss';

package/lib/cjs/tagInput/tagInput.css

@@ -112,6 +112,8 @@
   padding-left: 4px;
   padding-right: 4px;
   overflow: hidden;
+  position: relative;
+  /* hidden mirror used to measure input text width */
 }
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
@@ -154,6 +156,8 @@
 .semi-tagInput-wrapper .semi-tagInput-wrapper-input {
   flex-grow: 1;
   width: min-content;
+  min-width: 2px;
+  max-width: 100%;
   border: none;
   outline: none;
   background-color: transparent;
@@ -195,6 +199,19 @@
   height: 24px;
   line-height: 24px;
 }
+.semi-tagInput-wrapper-inputMirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
+  white-space: pre;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: inherit;
+}
 .semi-tagInput-clearBtn {
   display: flex;
   justify-content: center;
@@ -215,7 +232,7 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
   flex-shrink: 0;
   white-space: nowrap;
@@ -231,7 +248,7 @@
   white-space: nowrap;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-tagInput-prefix-icon, .semi-tagInput-suffix-icon {
   color: var(--semi-color-text-2);

package/lib/cjs/tagInput/tagInput.scss

@@ -137,6 +137,7 @@ $module: #{$prefix}-tagInput;
         padding-left: $spacing-extra-tight;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
+        position: relative;
 
         &-tag {
             margin-right: $spacing-extra-tight;
@@ -190,6 +191,8 @@ $module: #{$prefix}-tagInput;
         & &-input {
             flex-grow: 1;
             width: min-content;
+            min-width: 2px;
+            max-width: 100%;
             // min-width: 38px;
             border: none;
             outline: none;
@@ -240,6 +243,21 @@ $module: #{$prefix}-tagInput;
                 }
             }
         }
+
+        /* hidden mirror used to measure input text width */
+        &-inputMirror {
+            position: absolute;
+            top: 0;
+            left: 0;
+            visibility: hidden;
+            pointer-events: none;
+            height: 0;
+            overflow: hidden;
+            white-space: pre;
+            font-size: $font-size-regular;
+            font-weight: $font-weight-regular;
+            font-family: inherit;
+        }
     }
 
     &-clearBtn {

package/lib/cjs/timePicker/constants.d.ts

@@ -1,3 +1,4 @@
+export type PanelType = 'left' | 'right';
 declare const cssClasses: {
     PREFIX: string;
     RANGE_PICKER: string;

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

@@ -1,3 +1,4 @@
+import type { PanelType } from './constants';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export type Position = 'top' | 'topLeft' | 'topRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'leftTopOver' | 'rightTopOver';
 export interface TimePickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -16,11 +17,16 @@ declare class TimePickerFoundation<P = Record<string, any>, S = Record<string, a
     constructor(adapter: TimePickerAdapter<P, S>);
     init(): void;
     getPosition(): Position;
+    getDisabledTimeFns(panelType: PanelType, dates: Date[]): {
+        disabledHours: any;
+        disabledMinutes: any;
+        disabledSeconds: any;
+    };
     isDisabledHMS({ hours, minutes, seconds }: {
         hours: number;
         minutes: number;
         seconds: number;
-    }): boolean;
+    }, panelType?: PanelType, dates?: Date[]): boolean;
     isValidTimeZone(timeZone: string | number): boolean;
     getDefaultFormatIfNeed(): string;
     /**

package/lib/cjs/timePicker/foundation.js

@@ -33,17 +33,44 @@ class TimePickerFoundation extends _foundation.default {
     const rtlDirection = direction === 'rtl' ? 'bottomRight' : '';
     return position || rtlDirection || _constants.strings.DEFAULT_POSITION[type];
   }
+  getDisabledTimeFns(panelType, dates) {
+    const {
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds,
+      disabledTime
+    } = this.getProps();
+    // disabledTime is range-only: only invoke it when the picker is
+    // actually a range picker. In single mode panelType has no meaning, so
+    // we fall back to the top-level disabledHours / disabledMinutes /
+    // disabledSeconds without invoking disabledTime.
+    if (typeof disabledTime === 'function' && this._adapter.isRangePicker()) {
+      const disabledObj = disabledTime(dates, panelType) || {};
+      return {
+        disabledHours: disabledObj.disabledHours || disabledHours,
+        disabledMinutes: disabledObj.disabledMinutes || disabledMinutes,
+        disabledSeconds: disabledObj.disabledSeconds || disabledSeconds
+      };
+    }
+    return {
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds
+    };
+  }
   isDisabledHMS(_ref) {
     let {
       hours,
       minutes,
       seconds
     } = _ref;
+    let panelType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left';
+    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     const {
       disabledHours,
       disabledMinutes,
       disabledSeconds
-    } = this.getProps();
+    } = this.getDisabledTimeFns(panelType, dates);
     const hDis = !(0, _isNullOrUndefined.default)(hours) && (0, _utils.hourIsDisabled)(disabledHours, hours);
     const mDis = !(0, _isNullOrUndefined.default)(hours) && !(0, _isNullOrUndefined.default)(minutes) && (0, _utils.minuteIsDisabled)(disabledMinutes, hours, minutes);
     const sDis = !(0, _isNullOrUndefined.default)(hours) && !(0, _isNullOrUndefined.default)(minutes) && !(0, _isNullOrUndefined.default)(seconds) && (0, _utils.secondIsDisabled)(disabledSeconds, hours, minutes, seconds);
@@ -165,11 +192,23 @@ class TimePickerFoundation extends _foundation.default {
       if (this.isValidTimeZone(timeZone)) {
         dates = dates.map(date => (0, _dateFnsExtra.utcToZonedTime)(this.isValidTimeZone(__prevTimeZone) ? (0, _dateFnsExtra.zonedTimeToUtc)(date, __prevTimeZone) : date, timeZone));
       }
-      invalid = dates.some(d => this.isDisabledHMS({
-        hours: d.getHours(),
-        minutes: d.getMinutes(),
-        seconds: d.getSeconds()
-      }));
+      if (this._adapter.isRangePicker()) {
+        invalid = dates.some((d, idx) => {
+          const panelType = idx === 1 ? 'right' : 'left';
+          return this.isDisabledHMS({
+            hours: d.getHours(),
+            minutes: d.getMinutes(),
+            seconds: d.getSeconds()
+          }, panelType, dates);
+        });
+      } else {
+        const d = dates[0];
+        invalid = d ? this.isDisabledHMS({
+          hours: d.getHours(),
+          minutes: d.getMinutes(),
+          seconds: d.getSeconds()
+        }, 'left', dates) : false;
+      }
     }
     const inputValue = this.formatValue(dates);
     this.setState({
@@ -265,11 +304,23 @@ class TimePickerFoundation extends _foundation.default {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let invalid = dates.some(d => isNaN(Number(d)));
     if (!invalid) {
-      invalid = dates.some(d => this.isDisabledHMS({
-        hours: d.getHours(),
-        minutes: d.getMinutes(),
-        seconds: d.getSeconds()
-      }));
+      if (this._adapter.isRangePicker()) {
+        invalid = dates.some((d, idx) => {
+          const panelType = idx === 1 ? 'right' : 'left';
+          return this.isDisabledHMS({
+            hours: d.getHours(),
+            minutes: d.getMinutes(),
+            seconds: d.getSeconds()
+          }, panelType, dates);
+        });
+      } else {
+        const d = dates[0];
+        invalid = d ? this.isDisabledHMS({
+          hours: d.getHours(),
+          minutes: d.getMinutes(),
+          seconds: d.getSeconds()
+        }, 'left', dates) : false;
+      }
     }
     return invalid;
   }

package/lib/cjs/timePicker/timePicker.css

@@ -79,7 +79,7 @@
 .semi-timepicker .semi-timepicker-input {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-radius: var(--semi-border-radius-small);
   align-items: center;
 }

package/lib/cjs/timeline/timeline.css

@@ -77,7 +77,7 @@
 .semi-timeline-item-content {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
   margin: 0 0 0 25px;
   word-break: break-word;
@@ -86,7 +86,7 @@
 .semi-timeline-item-content-extra, .semi-timeline-item-content-time {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
   margin-top: 4px;
 }

package/lib/cjs/toast/toast.css

@@ -34,7 +34,7 @@
   box-shadow: var(--semi-shadow-elevated);
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: var(--semi-color-bg-3);
   border-radius: var(--semi-border-radius-medium);
   padding: 12px 8px 12px 8px;

package/lib/cjs/tooltip/foundation.js

@@ -333,7 +333,7 @@ class Tooltip extends _foundation.default {
     switch (types) {
       case 'focus':
         triggerEventSet[eventNames.focus] = () => {
-          this.delayShow();
+          this.getProp('condition') !== false && this.delayShow();
         };
         triggerEventSet[eventNames.blur] = () => {
           this.delayHide();
@@ -343,7 +343,7 @@ class Tooltip extends _foundation.default {
       case 'click':
         triggerEventSet[eventNames.click] = () => {
           // this.delayShow();
-          this.show();
+          this.getProp('condition') !== false && this.show();
         };
         portalEventSet = {};
         // Click outside needs special treatment, can not be directly tied to the trigger Element, need to be bound to the document
@@ -352,7 +352,7 @@ class Tooltip extends _foundation.default {
         triggerEventSet[eventNames.mouseEnter] = () => {
           // console.log(e);
           this.setCache('isClickToHide', false);
-          this.delayShow();
+          this.getProp('condition') !== false && this.delayShow();
           // this.show('trigger');
         };
         triggerEventSet[eventNames.mouseLeave] = () => {
@@ -365,7 +365,7 @@ class Tooltip extends _foundation.default {
           const {
             disableFocusListener
           } = this.getProps();
-          !disableFocusListener && this.delayShow();
+          this.getProp('condition') !== false && !disableFocusListener && this.delayShow();
         };
         triggerEventSet[eventNames.blur] = () => {
           const {
@@ -383,7 +383,7 @@ class Tooltip extends _foundation.default {
             if (this.getCache('isClickToHide')) {
               return;
             }
-            this.delayShow();
+            this.getProp('condition') !== false && this.delayShow();
           };
         }
         break;
@@ -393,6 +393,9 @@ class Tooltip extends _foundation.default {
         break;
       case 'contextMenu':
         triggerEventSet[eventNames.contextMenu] = e => {
+          if (this.getProp('condition') === false) {
+            return;
+          }
           e.preventDefault();
           this.show();
         };

package/lib/cjs/tooltip/tooltip.css

@@ -54,7 +54,7 @@
   overflow-wrap: break-word;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   opacity: 0;
   max-width: 240px;
 }

package/lib/cjs/transfer/constants.d.ts

@@ -6,5 +6,7 @@ declare const strings: {
     TYPE_LIST: string;
     TYPE_TREE_TO_LIST: string;
 };
-declare const numbers: {};
+declare const numbers: {
+    DEFAULT_PAGE_SIZE: number;
+};
 export { cssClasses, strings, numbers };

package/lib/cjs/transfer/constants.js

@@ -13,4 +13,6 @@ const strings = exports.strings = {
   TYPE_LIST: 'list',
   TYPE_TREE_TO_LIST: 'treeList'
 };
-const numbers = exports.numbers = {};
+const numbers = exports.numbers = {
+  DEFAULT_PAGE_SIZE: 10
+};

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

@@ -31,6 +31,8 @@ export interface TransferAdapter<P = Record<string, any>, S = Record<string, any
     updateInput: (input: string) => void;
     updateSearchResult: (searchResult: Set<number | 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>> {
     constructor(adapter: TransferAdapter<P, S>);
@@ -59,4 +61,5 @@ export default class TransferFoundation<P = Record<string, any>, S = Record<stri
     };
     _notifyChange(selectedItems: DataItemMap): void;
     handleSortEnd(callbackProps: OnSortEndProps): void;
+    handlePageChange(currentPage: number): void;
 }

package/lib/cjs/transfer/foundation.js

@@ -234,5 +234,9 @@ class TransferFoundation extends _foundation.default {
     this._adapter.updateSelected(newSelectedItems);
     this._notifyChange(newSelectedItems);
   }
+  handlePageChange(currentPage) {
+    this._adapter.updateCurrentPage(currentPage);
+    this._adapter.notifyPageChange(currentPage);
+  }
 }
 exports.default = TransferFoundation;

package/lib/cjs/transfer/transfer.css

@@ -35,7 +35,7 @@
 .semi-transfer-header {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: flex;
   align-items: center;
   height: 24px;
@@ -53,7 +53,7 @@
 .semi-transfer-header .semi-button {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-transfer-item {
   min-height: 36px;
@@ -65,7 +65,7 @@
   user-select: none;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -102,6 +102,15 @@
   overflow: auto;
   flex-grow: 1;
 }
+.semi-transfer-left-pagination {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+}
 .semi-transfer-left-empty {
   height: 36px;
 }
@@ -163,7 +172,7 @@
   align-items: center;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
 }
 .semi-transfer-filter {
@@ -177,7 +186,7 @@
   padding-left: 12px;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   height: 28px;
   display: flex;
   align-items: center;

package/lib/cjs/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/lib/cjs/tree/foundation.d.ts

@@ -2,6 +2,7 @@
  * The drag and drop handler implementation is referenced from rc-tree
  * https://github.com/react-component/tree
  */
+import { throttle } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import type { KeyMapProps } from './treeUtil';
 export type { KeyMapProps };
@@ -241,7 +242,9 @@ 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);
+    destroy(): void;
     _isMultiple(): any;
     _isAnimated(): any;
     _isDisabled(treeNode?: BasicTreeNodeProps): any;

package/lib/cjs/tree/foundation.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
 var _get2 = _interopRequireDefault(require("lodash/get"));
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _difference2 = _interopRequireDefault(require("lodash/difference"));
@@ -26,6 +27,27 @@ class TreeFoundation extends _foundation.default {
         dragging: false
       });
     };
+    // Throttle drag over state updates to improve performance during fast dragging
+    // 16ms ≈ 60fps, ensuring smooth updates without excessive re-renders
+    this.throttledDragOverUpdate = (0, _throttle2.default)(dropPosition => {
+      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() {
     return this.getProp('multiple');
@@ -595,30 +617,35 @@ class TreeFoundation extends _foundation.default {
     if (dragNodesKeys.has(eventKey)) {
       return;
     }
-    // Update the drag position
+    // Update the drag position with throttle to improve performance
     if (dragNode && eventKey === dragOverNodeKey) {
       const newPos = (0, _treeUtil.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, treeNode) {
+    // Cancel pending throttled updates when leaving a node
+    this.throttledDragOverUpdate.cancel();
     this._adapter.updateState({
       dragOverNodeKey: ''
     });
     this.triggerDragEvent('onDragLeave', e, treeNode);
   }
   handleNodeDragEnd(e, treeNode) {
+    // 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, treeNode, dragNode) {
+    // Flush any pending throttled updates to ensure accurate drop position
+    this.throttledDragOverUpdate.flush();
     const {
       dropPosition,
       dragNodesKeys

package/lib/cjs/tree/tree.css

@@ -50,7 +50,7 @@
   transform: scale(var(--semi-transform_scale-none));
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-word;
   color: var(--semi-color-text-0);
   position: relative;

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

@@ -49,6 +49,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
     outerTopSlot?: any;
     placeholder?: string;
     prefix?: any;
+    remote?: boolean;
     searchAutoFocus?: boolean;
     searchPlaceholder?: string;
     showSearchClear?: boolean;