@douyinfe/semi-foundation 2.96.1 → 2.97.0

package/lib/cjs/overflowList/foundation.js

@@ -34,11 +34,21 @@ class OverflowListFoundation extends _foundation.default {
     } = this.getProps();
     const {
       visibleState,
-      overflow
+      overflow,
+      scrollOverflow
     } = this.getStates();
     if (!this.isScrollMode()) {
       return overflow;
     }
+    // Scroll mode relies on IntersectionObserver to compute visibility.
+    // During recalculation (e.g. items changed, or before observer fires),
+    // keep last computed overflow to avoid UI flicker (tabs arrows/menu state).
+    if (!visibleState || visibleState.size === 0) {
+      if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+        return scrollOverflow;
+      }
+      return [[], []];
+    }
     const visibleStateArr = items.map(_ref => {
       let {
         key
@@ -47,11 +57,49 @@ class OverflowListFoundation extends _foundation.default {
     });
     const visibleStart = visibleStateArr.indexOf(true);
     const visibleEnd = visibleStateArr.lastIndexOf(true);
+    // If no item is visible (e.g. initial layout not ready or list out of viewport),
+    // treat it as "unknown" and keep last computed overflow to avoid wrong enabling.
+    if (visibleStart < 0 || visibleEnd < 0) {
+      if (Array.isArray(scrollOverflow) && scrollOverflow.length === 2) {
+        return scrollOverflow;
+      }
+      return [[], []];
+    }
     const overflowList = [];
     overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
     overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
     return overflowList;
   }
+  _syncScrollOverflowCache(nextVisibleState) {
+    if (!this.isScrollMode()) {
+      return;
+    }
+    const {
+      items
+    } = this.getProps();
+    const visibleStateArr = items.map(_ref2 => {
+      let {
+        key
+      } = _ref2;
+      return Boolean(nextVisibleState.get(key));
+    });
+    const visibleStart = visibleStateArr.indexOf(true);
+    const visibleEnd = visibleStateArr.lastIndexOf(true);
+    // No visible items means the result is not reliable; keep cache and stay "calculating"
+    if (visibleStart < 0 || visibleEnd < 0) {
+      this._adapter.updateStates({
+        isScrollOverflowCalculating: true
+      });
+      return;
+    }
+    const overflowList = [];
+    overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
+    overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
+    this._adapter.updateStates({
+      scrollOverflow: overflowList,
+      isScrollOverflowCalculating: false
+    });
+  }
   handleIntersect(entries) {
     const visibleState = (0, _fastCopy.default)(this.getState('visibleState'));
     const res = {};
@@ -80,6 +128,8 @@ class OverflowListFoundation extends _foundation.default {
     }
     this.previousY = currentY;
     this._adapter.updateVisibleState(visibleState);
+    // Keep scroll overflow cache in sync for stable UI
+    this._syncScrollOverflowCache(visibleState);
     this._adapter.notifyIntersect(res);
   }
   handleCollapseOverflow() {

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

@@ -54,7 +54,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     constructor(adapter: SelectAdapter);
     _keydownHandler: (...arg: any[]) => void | null;
     init(): void;
-    focus(optionsForOpen?: BasicOptionProps[]): void;
+    focus(optionsForOpen?: BasicOptionProps[], openDropdown?: boolean): void;
     _focusTrigger(): void;
     destroy(): void;
     _setDropdownWidth(): void;

package/lib/cjs/select/foundation.js

@@ -46,15 +46,40 @@ class SelectFoundation extends _foundation.default {
       this.focus(originalOptions);
     }
   }
-  focus(optionsForOpen) {
+  focus(optionsForOpen, openDropdown) {
     const isFilterable = this._isFilterable();
     const isMultiple = this._isMultiple();
     const {
       isOpen
     } = this.getStates();
+    const {
+      searchPosition
+    } = this.getProps();
+    // Default to true if not specified (backward compatibility)
+    const shouldOpenDropdown = openDropdown !== false;
     this._adapter.updateFocusState(true);
     this._adapter.setIsFocusInContainer(false);
     if (isFilterable) {
+      /**
+       * When openDropdown is false, we only want to "refocus" the Select
+       * without changing dropdown visibility.
+       *
+       * NOTE: For searchPosition='dropdown', the search input is rendered in dropdown,
+       * so we should NOT toggle trigger input(showInput) here, otherwise it may affect
+       * tabIndex / focusability unexpectedly.
+       */
+      if (!shouldOpenDropdown) {
+        if (searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER) {
+          if (isMultiple) {
+            this.focusInput();
+          } else {
+            this.toggle2SearchInput(true);
+          }
+        } else {
+          this._focusTrigger();
+        }
+        return;
+      }
       if (isMultiple) {
         // when filter and multiple, focus input and open dropdown
         this.focusInput();
@@ -1092,7 +1117,8 @@ class SelectFoundation extends _foundation.default {
       this.clearInput(e);
     }
     // after click showClear button, the select need to be focused
-    this.focus();
+    // but don't open dropdown to avoid focus state confusion
+    this.focus(undefined, false);
     this.clearSelected();
     // prevent this click open dropdown
     e.stopPropagation();

package/lib/cjs/switch/switch.css

@@ -33,6 +33,7 @@
 }
 .semi-switch-checked .semi-switch-knob {
   transform: translateX(18px);
+  background-color: rgba(var(--semi-white), 1);
 }
 .semi-switch-checked:active .semi-switch-knob {
   transform: translateX(12px);

package/lib/cjs/switch/switch.scss

@@ -43,6 +43,7 @@ $module: #{$prefix}-switch;
 
         .#{$module}-knob {
             transform: translateX($spacing-switch_checked-translateX);
+            background-color: $color-switch_knob-bg-checked;
         }
 
         &:active {

package/lib/cjs/switch/variables.scss

@@ -30,7 +30,8 @@ $color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开
 $color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
 $color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色
 $color-switch_checked_disabled-border-default: transparent; // 禁用开启态开关描边颜色
-$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关滑块背景颜色
+$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关滑块背景颜色 - 关闭态
+$color-switch_knob-bg-checked: rgba(var(--semi-white), 1); // 开关滑块背景颜色 - 开启态
 $color-switch_knob-border-default: var(--semi-color-border); // 开关滑块描边颜色
 $color-switch_checked-text-default: var(--semi-color-white); // 开启态开关文案颜色
 $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开关文案颜色

package/lib/cjs/table/foundation.js

@@ -888,7 +888,8 @@ class TableFoundation extends _foundation.default {
     let e = arguments.length > 1 ? arguments[1] : undefined;
     let check = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var _a, _b, _c, _d;
-    this.stopPropagation(e);
+    /* Do not call stopPropagation here, otherwise the click event registered via onHeaderCell
+       will be blocked when the click hot area is the whole title (#1861). */
     /* if mouse down to the resizable handle, do not trigger the sorting，fix #2802
         The target of the click event may be different from the target of the mousedown,
         e.g: Press the mouse, move to another node and then release it，

package/lib/cjs/tag/tag.css

@@ -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;

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/es/cascader/foundation.d.ts

@@ -114,6 +114,7 @@ export interface BasicCascaderProps {
     preventScroll?: boolean;
     virtualizeInSearch?: Virtualize;
     checkRelation?: string;
+    remote?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -204,6 +205,17 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getItemPropPath(selectedKey: string, prop: string | any[], keyEntities?: BasicEntities): any[];
     _getCacheValue(keyEntities: BasicEntities): any;
     collectOptions(init?: boolean): void;
+    /**
+     * Calculate filtered keys based on current props.
+     * - In remote mode: do not do local match, treat current treeData nodes as results
+     * - In local mode: perform matching by filterTreeNode
+     */
+    _calcFilteredKeys(sugInput: string, keyEntities?: BasicEntities): string[];
+    /**
+     * Sync filteredKeys with latest options/keyEntities WITHOUT triggering onSearch.
+     * Used when treeData changes asynchronously in searching state.
+     */
+    recalculateFilteredKeys(input?: string, nextKeyEntities?: BasicEntities): void;
     handleValueChange(value: BasicValue): void;
     /**
      * When single selection, the clear objects of

package/lib/es/cascader/foundation.js

@@ -211,6 +211,72 @@ export default class CascaderFoundation extends BaseFoundation {
         keyEntities
       });
     }
+    // If options(treeData) updates during searching (e.g. remote search async update),
+    // we need to sync filteredKeys with the latest keyEntities; otherwise the UI may
+    // render empty list ("暂无数据") because filteredKeys are based on stale entities.
+    // NOTE: updateSelectedKey/updateStates are async in React, so we pass keyEntities
+    // explicitly to avoid reading stale state.
+    this.recalculateFilteredKeys(undefined, keyEntities);
+  }
+  /**
+   * Calculate filtered keys based on current props.
+   * - In remote mode: do not do local match, treat current treeData nodes as results
+   * - In local mode: perform matching by filterTreeNode
+   */
+  _calcFilteredKeys(sugInput, keyEntities) {
+    if (!sugInput) {
+      return [];
+    }
+    const {
+      treeNodeFilterProp,
+      filterTreeNode,
+      filterLeafOnly,
+      remote
+    } = this.getProps();
+    const entities = Object.values(keyEntities !== null && keyEntities !== void 0 ? keyEntities : this.getState('keyEntities'));
+    if (remote) {
+      return entities.filter(item => !item._notExist).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item.data)).map(item => item.key);
+    }
+    return entities.filter(item => {
+      const {
+        key,
+        _notExist,
+        data
+      } = item;
+      if (_notExist) {
+        return false;
+      }
+      const filteredPath = this.getItemPropPath(key, treeNodeFilterProp, keyEntities);
+      return filter(sugInput, data, filterTreeNode, filteredPath);
+    }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item.data)).map(item => item.key);
+  }
+  /**
+   * Sync filteredKeys with latest options/keyEntities WITHOUT triggering onSearch.
+   * Used when treeData changes asynchronously in searching state.
+   */
+  recalculateFilteredKeys(input, nextKeyEntities) {
+    const isFilterable = this._isFilterable();
+    if (!isFilterable) {
+      return;
+    }
+    // When input is not explicitly provided, only recalculate in searching state.
+    // Otherwise, treeData updates may incorrectly force component into searching mode
+    // because inputValue can be the selected label text in normal (non-searching) state.
+    const currentIsSearching = this.getState('isSearching');
+    if (_isUndefined(input) && !currentIsSearching) {
+      return;
+    }
+    const sugInput = _isUndefined(input) ? this.getState('inputValue') : input;
+    const filteredKeys = this._calcFilteredKeys(sugInput, nextKeyEntities);
+    const updateStates = {
+      isSearching: Boolean(sugInput),
+      filteredKeys: new Set(filteredKeys)
+    };
+    if (nextKeyEntities) {
+      updateStates.keyEntities = nextKeyEntities;
+    }
+    this._adapter.updateStates(updateStates);
+    this._adapter.rePositionDropdown();
   }
   // call when props.value change
   handleValueChange(value) {
@@ -797,29 +863,7 @@ export default class CascaderFoundation extends BaseFoundation {
   }
   handleInputChange(sugInput) {
     this._adapter.updateInputValue(sugInput);
-    const {
-      keyEntities
-    } = this.getStates();
-    const {
-      treeNodeFilterProp,
-      filterTreeNode,
-      filterLeafOnly
-    } = this.getProps();
-    let filteredKeys = [];
-    if (sugInput) {
-      filteredKeys = Object.values(keyEntities).filter(item => {
-        const {
-          key,
-          _notExist,
-          data
-        } = item;
-        if (_notExist) {
-          return false;
-        }
-        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
-        return filter(sugInput, data, filterTreeNode, filteredPath);
-      }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item)).map(item => item.key);
-    }
+    const filteredKeys = this._calcFilteredKeys(sugInput);
     this._adapter.updateStates({
       isSearching: Boolean(sugInput),
       filteredKeys: new Set(filteredKeys)
@@ -890,6 +934,7 @@ export default class CascaderFoundation extends BaseFoundation {
     } = this.getStates();
     const isFilterable = this._isFilterable();
     if (isSearching && isFilterable) {
+      // Both local & remote search mode should render flattened search list
       return this.getFilteredData();
     }
     return Object.values(keyEntities).filter(item => item.parentKey === null && !item._notExist)