@douyinfe/semi-foundation 2.96.1 → 2.98.0

package/overflowList/foundation.ts

@@ -28,22 +28,66 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
 
     getOverflowItem(): Array<Array<Record<string, any>>> {
         const { items } = this.getProps();
-        const { visibleState, overflow } = this.getStates();
+        const { visibleState, 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(({ key }: { key: string }) => Boolean(visibleState.get(key)));
         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;
     }
 
+    private _syncScrollOverflowCache(nextVisibleState: Map<string, boolean>): void {
+        if (!this.isScrollMode()) {
+            return;
+        }
+        const { items } = this.getProps();
+        const visibleStateArr = items.map(({ key }: { key: string }) => 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: Array<Array<Record<string, any>>> = [];
+        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: Array<IntersectionObserverEntry>): void {
         const visibleState = copy(this.getState('visibleState'));
 
@@ -73,6 +117,8 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         }
         this.previousY = currentY;
         this._adapter.updateVisibleState(visibleState);
+        // Keep scroll overflow cache in sync for stable UI
+        this._syncScrollOverflowCache(visibleState);
         this._adapter.notifyIntersect(res);
     }
 
@@ -126,4 +172,4 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
 
 }
 
-export default OverflowListFoundation;
+export default OverflowListFoundation;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.96.1",
+    "version": "2.98.0",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -10053,6 +10053,21 @@
             "import": "./lib/es/slider/foundation.js",
             "require": "./lib/cjs/slider/foundation.js"
         },
+        "./lib/es/slider/rtl.scss": {
+            "import": "./lib/es/slider/rtl.scss",
+            "require": "./lib/cjs/slider/rtl.scss",
+            "default": "./lib/es/slider/rtl.scss"
+        },
+        "./lib/cjs/slider/rtl.scss": {
+            "import": "./lib/es/slider/rtl.scss",
+            "require": "./lib/cjs/slider/rtl.scss",
+            "default": "./lib/es/slider/rtl.scss"
+        },
+        "./slider/rtl.scss": {
+            "import": "./lib/es/slider/rtl.scss",
+            "require": "./lib/cjs/slider/rtl.scss",
+            "default": "./lib/es/slider/rtl.scss"
+        },
         "./lib/es/slider/slider.css": {
             "import": "./lib/es/slider/slider.css",
             "require": "./lib/cjs/slider/slider.css",
@@ -14210,8 +14225,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.96.1",
-        "@douyinfe/semi-json-viewer-core": "2.96.1",
+        "@douyinfe/semi-animation": "2.98.0",
+        "@douyinfe/semi-json-viewer-core": "2.98.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14232,7 +14247,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "c2077bb9f3ac194ef162fa6b8332a3997c83d041",
+    "gitHead": "e33a947a4e0745a7ad15d3e773355cc19d23b174",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/scrollList/itemFoundation.ts

@@ -91,6 +91,12 @@ export default class ItemFoundation<P = Record<string, any>, S = Record<string,
                 const lastRect = lastNode.getBoundingClientRect();
 
                 const listHeight = lastRect.height * list.length;
+                // Guard against environments where layout is not computed
+                // (e.g. jsdom returns all-zero rects), which would otherwise
+                // make `baseTop += listHeight` a no-op and loop forever.
+                if (listHeight <= 0) {
+                    return 0;
+                }
                 let baseTop = lastRect.top;
                 let count = 0;
 
@@ -127,6 +133,12 @@ export default class ItemFoundation<P = Record<string, any>, S = Record<string,
                 const firstRect = firstNode.getBoundingClientRect();
 
                 const listHeight = firstRect.height * list.length;
+                // Guard against environments where layout is not computed
+                // (e.g. jsdom returns all-zero rects), which would otherwise
+                // make `baseTop -= listHeight` a no-op and loop forever.
+                if (listHeight <= 0) {
+                    return 0;
+                }
 
                 let baseTop = firstRect.top;
                 let count = 0;

package/select/foundation.ts

@@ -85,15 +85,39 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         }
     }
 
-    focus(optionsForOpen?: BasicOptionProps[]) {
+    focus(optionsForOpen?: BasicOptionProps[], openDropdown?: boolean) {
         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 === 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();
@@ -1077,7 +1101,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             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/slider/foundation.ts

@@ -147,6 +147,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     getMinAndMaxPercent = (value: number | number[]) => {
         // debugger
         const { range, min, max } = this._adapter.getProps();
+        // Percent always increases with value, independent of visual direction.
+        // UI layer decides whether to use `left` or `right` to place elements.
         const minPercent = range ? (value[0] - min) / (max - min) : (value as number - min) / (max - min);
         const maxPercent = range ? (value[1] - min) / (max - min) : 1;
         return { min: this._checkValidity(minPercent), max: this._checkValidity(maxPercent) };
@@ -264,6 +266,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
 
         // Returns the length of the distance to the left
         const { vertical, verticalReverse, range } = this._adapter.getProps();
+        const direction = this._adapter.getContext('direction');
+        const isRTL = direction === 'rtl' && !vertical;
         const value = this._adapter.getState('currentValue');
         const currentPos = this.transValueToPos(value);
         const { sliderX, sliderY, sliderWidth, sliderHeight } = this._adapter.getSliderLengths();
@@ -272,6 +276,9 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         let startPos;
         if (vertical && verticalReverse) {
             startPos = sliderY + len;
+        } else if (isRTL) {
+            // In RTL mode, start from right (sliderX + sliderWidth)
+            startPos = sliderX + len;
         } else {
             startPos = vertical ? sliderY : sliderX;
         }
@@ -279,13 +286,16 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         let endPos;
         if (vertical && verticalReverse) {
             endPos = sliderY;
+        } else if (isRTL) {
+            // In RTL mode, end at left (sliderX)
+            endPos = sliderX;
         } else {
             endPos = vertical ? sliderY + sliderHeight : sliderX + sliderWidth;
         }
         //   endPos = chooseMovePos === 'min' && isDrag && range ? currentPos[1] : endPos;
 
 
-        if (vertical && verticalReverse) {
+        if ((vertical && verticalReverse) || isRTL) {
             if (position >= startPos) {
                 position = startPos;
             } else if (position <= endPos) {
@@ -310,6 +320,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         const pos = this.checkMeetMinMax(mousePos);
         const { min, max, currentValue } = this._adapter.getStates();
         const { range, vertical, step, verticalReverse } = this._adapter.getProps();
+        const direction = this._adapter.getContext('direction');
+        const isRTL = direction === 'rtl' && !vertical;
         const { sliderX, sliderY, sliderWidth, sliderHeight } = this._adapter.getSliderLengths();
         const startPos = vertical ? sliderY : sliderX;
         const len = vertical ? sliderHeight : sliderWidth;
@@ -317,6 +329,9 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         if (vertical && verticalReverse) {
             //isMin = !isMin;
             stepValue = ((startPos + len - pos) / len) * (max - min) + min;
+        } else if (isRTL) {
+            // In RTL mode, position is calculated from right to left
+            stepValue = ((startPos + len - pos) / len) * (max - min) + min;
         } else {
             stepValue = ((pos - startPos) / len) * (max - min) + min;
         }
@@ -347,13 +362,29 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     transValueToPos = (value: SliderProps['value']) => {
         const { min, max } = this._adapter.getStates();
         const { vertical, range, verticalReverse } = this._adapter.getProps();
+        const direction = this._adapter.getContext('direction');
+        const isRTL = direction === 'rtl' && !vertical;
         const { sliderX, sliderY, sliderWidth, sliderHeight } = this._adapter.getSliderLengths();
+
         const startPos = vertical ? sliderY : sliderX;
         const len = vertical ? sliderHeight : sliderWidth;
+
+        const transSingle = (val: number) => {
+            const percent = (val - min) / (max - min);
+            if (vertical && verticalReverse) {
+                // Reverse direction in vertical mode
+                return startPos + len - percent * len;
+            }
+            if (isRTL) {
+                // Reverse direction in horizontal RTL
+                return startPos + len - percent * len;
+            }
+            return startPos + percent * len;
+        };
         if (range) {
-            return [((value[0] - min) * len) / (max - min) + startPos, ((value[1] - min) * len) / (max - min) + startPos];
+            return [transSingle(value[0]), transSingle(value[1])];
         } else {
-            return ((value as number - min) * len) / (max - min) + startPos;
+            return transSingle(value as number);
         }
     };
 
@@ -649,22 +680,34 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
 
     handleKeyDown = (event: any, handler: 'min'| 'max') => {
         const { min, max, currentValue } = this.getStates();
-        const { step, range } = this.getProps();
+        const { step, range, vertical } = this.getProps();
+        const direction = this._adapter.getContext('direction');
+        const isRTL = direction === 'rtl' && !vertical;
         let outputValue;
         switch (event.key) {
             case "ArrowLeft":
             case "ArrowDown":
-                outputValue = this._handleValueDecreaseWithKeyBoard(step, handler);
+                // In RTL mode, ArrowLeft and ArrowDown should increase value
+                outputValue = isRTL ?
+                    this._handleValueIncreaseWithKeyBoard(step, handler) :
+                    this._handleValueDecreaseWithKeyBoard(step, handler);
                 break;
             case "ArrowRight":
             case "ArrowUp":
-                outputValue = this._handleValueIncreaseWithKeyBoard(step, handler);
+                // In RTL mode, ArrowRight and ArrowUp should decrease value
+                outputValue = isRTL ?
+                    this._handleValueDecreaseWithKeyBoard(step, handler) :
+                    this._handleValueIncreaseWithKeyBoard(step, handler);
                 break;
             case "PageUp":
-                outputValue = this._handleValueIncreaseWithKeyBoard(10 * step, handler);
+                outputValue = isRTL ?
+                    this._handleValueDecreaseWithKeyBoard(10 * step, handler) :
+                    this._handleValueIncreaseWithKeyBoard(10 * step, handler);
                 break;
             case "PageDown":
-                outputValue = this._handleValueDecreaseWithKeyBoard(10 * step, handler);
+                outputValue = isRTL ?
+                    this._handleValueIncreaseWithKeyBoard(10 * step, handler) :
+                    this._handleValueDecreaseWithKeyBoard(10 * step, handler);
                 break;
             case "Home":
                 outputValue = this._handleHomeKey(handler);
@@ -775,13 +818,10 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         const currentPos = this.transValueToPos(currentValue);
         let isMin = true;
         if (Array.isArray(currentPos)) {
-            // Slide on both sides
-            if (
-                pagePos > currentPos[1] ||
-                Math.abs(pagePos - currentPos[0]) > Math.abs(pagePos - currentPos[1])
-            ) {
-                isMin = false;
-            }
+            // Choose the nearest handle regardless of ordering (LTR/RTL/verticalReverse)
+            const distToFirst = Math.abs(pagePos - currentPos[0]);
+            const distToSecond = Math.abs(pagePos - currentPos[1]);
+            isMin = distToFirst <= distToSecond;
         }
         if (vertical && verticalReverse) {
             isMin = !isMin;

package/slider/rtl.scss

@@ -0,0 +1,62 @@
+$module: #{$prefix}-slider;
+
+// RTL support (horizontal)
+// Slider uses `left` positioning in LTR. In RTL we switch to `right` positioning
+// in the component logic, so centering transforms must be mirrored.
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-handle {
+            transform: $transform_scale-slider_handle translateX(50%) translateY($spacing-slider_handle-translateY);
+        }
+
+        &-mark {
+            transform: translate(50%, 0);
+        }
+
+        &-mark-reverse {
+            transform: translate(50%, 0) rotate(-180deg);
+        }
+
+        // Boundary text should match RTL direction: min on the right, max on the left
+
+        &-boundary-min {
+            left: auto;
+            right: $spacing-slider_boundary_min-left;
+        }
+
+        &-boundary-max {
+            right: auto;
+            left: $spacing-slider_boundary_max-right;
+        }
+    }
+}
+
+// Backward/explicit support: the component may add `semi-slider-rtl` on wrapper.
+// Keep these rules so RTL transforms still apply even without `.semi-rtl` container.
+
+.#{$module}-rtl {
+    .#{$module}-handle {
+        transform: $transform_scale-slider_handle translateX(50%) translateY($spacing-slider_handle-translateY);
+    }
+
+    .#{$module}-mark {
+        transform: translate(50%, 0);
+    }
+
+    .#{$module}-mark-reverse {
+        transform: translate(50%, 0) rotate(-180deg);
+    }
+
+    .#{$module}-boundary-min {
+        left: auto;
+        right: $spacing-slider_boundary_min-left;
+    }
+
+    .#{$module}-boundary-max {
+        right: auto;
+        left: $spacing-slider_boundary_max-right;
+    }
+}

package/slider/slider.scss

@@ -252,3 +252,5 @@ $module: #{$prefix}-slider;
 .#{$module}-reverse {
     transform: rotate(180deg);
 }
+
+@import "./rtl.scss";

package/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/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); // 关闭态开关文案颜色