@douyinfe/semi-foundation 2.97.0 → 2.98.0

package/lib/es/tree/foundation.js

@@ -1,3 +1,4 @@
+import _throttle from "lodash/throttle";
 import _get from "lodash/get";
 import _pick from "lodash/pick";
 import _difference from "lodash/difference";
@@ -18,6 +19,27 @@ export default class TreeFoundation extends BaseFoundation {
         dragging: false
       });
     };
+    // Throttle drag over state updates to improve performance during fast dragging
+    // 16ms ≈ 60fps, ensuring smooth updates without excessive re-renders
+    this.throttledDragOverUpdate = _throttle(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');
@@ -587,30 +609,35 @@ export default class TreeFoundation extends BaseFoundation {
     if (dragNodesKeys.has(eventKey)) {
       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, 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/es/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/es/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;

package/lib/es/treeSelect/foundation.js

@@ -481,8 +481,15 @@ export default class TreeSelectFoundation extends BaseFoundation {
       showFilteredOnly,
       filterTreeNode,
       treeNodeFilterProp,
-      keyMaps
+      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 = new Set(expandedKeys);
     let filteredNodes = [];

package/lib/es/treeSelect/treeSelect.css

@@ -14,6 +14,10 @@
   align-items: center;
   position: relative;
   cursor: pointer;
+  /**
+   * Enable wrapping selected tags in trigger.
+   * Only takes effect in multiple + searchPosition="trigger" mode (class added by component).
+   */
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
@@ -92,7 +96,7 @@
 .semi-tree-select-selection {
   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;
   height: 100%;
   display: inline-flex;
   align-items: center;
@@ -200,6 +204,34 @@
 .semi-tree-select-multiple .semi-tree-select-selection-placeholder {
   padding-left: 8px;
 }
+.semi-tree-select-triggerTagWrap {
+  max-width: 100%;
+}
+.semi-tree-select-triggerTagWrap .semi-tree-select-selection {
+  min-width: 0;
+}
+.semi-tree-select-triggerTagWrap.semi-tree-select-multiple {
+  height: auto;
+}
+.semi-tree-select-triggerTagWrap.semi-tree-select-multiple .semi-tree-select-selection {
+  height: auto;
+  min-height: 30px;
+  overflow: visible;
+}
+.semi-tree-select-triggerTagWrap.semi-tree-select-multiple.semi-tree-select-small .semi-tree-select-selection {
+  min-height: 22px;
+}
+.semi-tree-select-triggerTagWrap.semi-tree-select-multiple.semi-tree-select-large .semi-tree-select-selection {
+  min-height: 38px;
+}
+.semi-tree-select-triggerTagWrap .semi-tagInput {
+  min-width: 0;
+  max-width: 100%;
+  flex: 1 1 auto;
+}
+.semi-tree-select-triggerTagWrap .semi-tagInput .semi-tagInput-wrapper-input {
+  max-width: 100%;
+}
 .semi-tree-select-small {
   min-height: 24px;
   line-height: 24px;
@@ -211,7 +243,7 @@
 .semi-tree-select-large .semi-tree-select-selection {
   font-size: 16px;
   line-height: 22px;
-  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-tree-select-arrow {
   display: inline-flex;
@@ -228,7 +260,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;
@@ -263,7 +295,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;
   margin: 0px 12px;
 }
 .semi-tree-select-prefix-icon, .semi-tree-select-suffix-icon {

package/lib/es/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/lib/es/typography/typography.css

@@ -5,7 +5,7 @@
   color: var(--semi-color-text-0);
   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-typography.semi-typography-secondary {
   color: var(--semi-color-text-1);
@@ -45,7 +45,7 @@
 .semi-typography-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;
   font-weight: 400;
 }
 .semi-typography-small.semi-typography-paragraph {
@@ -146,7 +146,7 @@ h1.semi-typography,
 .semi-typography-h1.semi-typography {
   font-size: 32px;
   line-height: 44px;
-  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;
   font-weight: 600;
   margin: 0;
 }
@@ -175,7 +175,7 @@ h2.semi-typography,
 .semi-typography-h2.semi-typography {
   font-size: 28px;
   line-height: 40px;
-  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;
   font-weight: 600;
   margin: 0;
 }
@@ -204,7 +204,7 @@ h3.semi-typography,
 .semi-typography-h3.semi-typography {
   font-size: 24px;
   line-height: 32px;
-  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;
   font-weight: 600;
   margin: 0;
 }
@@ -233,7 +233,7 @@ h4.semi-typography,
 .semi-typography-h4.semi-typography {
   font-size: 20px;
   line-height: 28px;
-  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;
   font-weight: 600;
   margin: 0;
 }
@@ -262,7 +262,7 @@ h5.semi-typography,
 .semi-typography-h5.semi-typography {
   font-size: 18px;
   line-height: 24px;
-  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;
   font-weight: 600;
   margin: 0;
 }
@@ -291,7 +291,7 @@ h6.semi-typography,
 .semi-typography-h6.semi-typography {
   font-size: 16px;
   line-height: 22px;
-  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;
   font-weight: 600;
   margin: 0;
 }

package/lib/es/upload/upload.css

@@ -88,7 +88,7 @@
 .semi-upload-file-list-title {
   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-bottom: 4px;
 }
@@ -164,14 +164,14 @@
   display: inline-block;
   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;
   font-weight: 600;
   color: var(--semi-color-text-0);
 }
 .semi-upload-file-card-info-size {
   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;
   font-weight: 400;
   margin-left: 8px;
   color: var(--semi-color-text-2);
@@ -185,7 +185,7 @@
 .semi-upload-file-card-info-validate-message {
   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;
   color: var(--semi-color-text-0);
@@ -193,7 +193,7 @@
 .semi-upload-file-card-info-retry {
   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-primary);
   cursor: pointer;
   margin-left: 8px;
@@ -468,7 +468,7 @@
   cursor: pointer;
   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;
   margin-bottom: 4px;
   color: var(--semi-color-text-0);
 }
@@ -482,7 +482,7 @@
   cursor: pointer;
   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-0);
 }
 .semi-upload-drag-area-sub-text:hover {
@@ -494,7 +494,7 @@
 .semi-upload-drag-area-tips {
   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;
   font-weight: 600;
 }
 .semi-upload-drag-area-tips-legal {

package/lib/es/utils/Store.d.ts

@@ -2,7 +2,7 @@ declare class Store<T = Record<string, any>> {
     _state: T;
     _listeners: any[];
     constructor(initialState: T);
-    subscribe(listener: (state: T) => () => void): () => void;
+    subscribe(listener: (state: T) => void | (() => void)): () => void;
     setState(state: T): void;
     getState(): T;
 }

package/lib/es/utils/Store.js

@@ -4,6 +4,7 @@ class Store {
     this._state = Object.assign({}, initialState);
     this._listeners = [];
   }
+  // Listener return value is ignored, but keep type compatible with older signature
   subscribe(listener) {
     this._listeners.push(listener);
     const unsubscribe = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.97.0",
+    "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.97.0",
-        "@douyinfe/semi-json-viewer-core": "2.97.0",
+        "@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": "fefc4b3e8ea823bc99f68bfee02f3f8cc314726c",
+    "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/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;