rsuite 5.79.0-canary-2025032417 → 5.79.1

package/esm/List/List.js

@@ -58,7 +58,9 @@ var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
     register = _useSortHelper.register,
     sorting = _useSortHelper.sorting,
     handleEnd = _useSortHelper.handleEnd,
-    handleStart = _useSortHelper.handleStart;
+    handleStart = _useSortHelper.handleStart,
+    handleTouchStart = _useSortHelper.handleTouchStart,
+    handleTouchEnd = _useSortHelper.handleTouchEnd;
   var classes = merge(className, withClassPrefix({
     bordered: bordered,
     sortable: sortable,
@@ -79,7 +81,9 @@ var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: mergeRefs(containerRef, ref),
     className: classes,
     onMouseDown: sortable ? handleStart : undefined,
-    onMouseUp: sortable ? handleEnd : undefined
+    onMouseUp: sortable ? handleEnd : undefined,
+    onTouchStart: sortable ? handleTouchStart : undefined,
+    onTouchEnd: sortable ? handleTouchEnd : undefined
   }), /*#__PURE__*/React.createElement(ListContext.Provider, {
     value: contextValue
   }, children));

package/esm/List/helper/useSortHelper.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, TouchEventHandler } from 'react';
 import { Collection, ManagedItem } from './useManager';
 export interface MovedItemInfo {
     collection: Collection;
@@ -10,14 +10,16 @@ export type SortConfig = {
     autoScroll?: boolean;
     pressDelay?: number;
     transitionDuration?: number;
-    onSortStart?(payload?: MovedItemInfo, event?: MouseEvent): void;
-    onSortMove?(payload?: MovedItemInfo, event?: MouseEvent): void;
-    onSortEnd?(payload?: MovedItemInfo, event?: MouseEvent): void;
-    onSort?(payload?: MovedItemInfo, event?: MouseEvent): void;
+    onSortStart?(payload?: MovedItemInfo, event?: MouseEvent | TouchEvent): void;
+    onSortMove?(payload?: MovedItemInfo, event?: MouseEvent | TouchEvent): void;
+    onSortEnd?(payload?: MovedItemInfo, event?: MouseEvent | TouchEvent): void;
+    onSort?(payload?: MovedItemInfo, event?: MouseEvent | TouchEvent): void;
 };
 declare const useSortHelper: (config: SortConfig) => {
     handleStart: MouseEventHandler<Element>;
     handleEnd: MouseEventHandler<Element>;
+    handleTouchStart: TouchEventHandler<Element>;
+    handleTouchEnd: TouchEventHandler<Element>;
     containerRef: import("react").RefObject<HTMLDivElement>;
     sorting: boolean;
     register: (item: ManagedItem) => {

package/esm/List/helper/useSortHelper.js

@@ -32,7 +32,7 @@ var useSortHelper = function useSortHelper(config) {
   /**
    * start dragging
    * */
-  var handlePress = useCallback(function (mouseDownEvent, _targetNode, curManagedItem) {
+  var handlePress = useCallback(function (event, _targetNode, curManagedItem) {
     var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;
     if (!isMounted()) return;
     // data
@@ -46,6 +46,13 @@ var useSortHelper = function useSortHelper(config) {
     };
     var animatedNodesOffset = []; // all list item offset
 
+    // Get initial position from event
+    var isTouchEvent = 'touches' in event;
+    var initialPosition = {
+      pageX: isTouchEvent ? event.touches[0].pageX : event.pageX,
+      pageY: isTouchEvent ? event.touches[0].pageY : event.pageY
+    };
+
     // init scroller
     var scrollContainer = getScrollingParent(containerElement) || containerElement;
     var initScroll = {
@@ -87,17 +94,31 @@ var useSortHelper = function useSortHelper(config) {
         y: 0
       });
     };
-    var sortMouseMoveListener = on(window, 'mousemove', function (mouseOverEvent) {
+
+    // Common handler for both mouse and touch move events
+    var handleSortMove = function handleSortMove(moveEvent) {
+      // Prevent default to stop page scrolling during touch drag
+      if ('touches' in moveEvent) {
+        moveEvent.preventDefault();
+      }
+
+      // Get current position from event
+      var isTouchMoveEvent = 'touches' in moveEvent;
+      var currentPosition = {
+        pageX: isTouchMoveEvent ? moveEvent.touches[0].pageX : moveEvent.pageX,
+        pageY: isTouchMoveEvent ? moveEvent.touches[0].pageY : moveEvent.pageY
+      };
+
       // Update helper position
       var offset = {
-        x: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageX) || 0,
-        y: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageY) || 0
+        x: currentPosition.pageX,
+        y: currentPosition.pageY
       };
       var containerScrollDelta = getContainerScrollDelta();
       var containerBoundingRect = scrollContainer.getBoundingClientRect();
       activeNodeHolderTranslate = {
-        x: offset.x - mouseDownEvent.pageX,
-        y: offset.y - mouseDownEvent.pageY
+        x: offset.x - initialPosition.pageX,
+        y: offset.y - initialPosition.pageY
       };
       if (activeNodeHelper) {
         setTranslate3d(activeNodeHelper, activeNodeHolderTranslate);
@@ -197,14 +218,22 @@ var useSortHelper = function useSortHelper(config) {
         node: activeNode,
         oldIndex: activeNodeOldIndex,
         newIndex: activeNodeNextIndex
-      }, mouseOverEvent);
-    }, {
-      passive: false
-    });
-    var sortMouseEndListener = on(window, 'mouseup', function (event) {
+      }, moveEvent);
+    };
+
+    // Common handler for both mouse and touch end events
+    var handleSortEnd = function handleSortEnd(endEvent) {
+      var _sortTouchMoveListene, _sortTouchEndListener;
       // Remove the event listeners
       sortMouseMoveListener.off();
       sortMouseEndListener.off();
+      (_sortTouchMoveListene = sortTouchMoveListener) === null || _sortTouchMoveListene === void 0 || _sortTouchMoveListene.off();
+      (_sortTouchEndListener = sortTouchEndListener) === null || _sortTouchEndListener === void 0 || _sortTouchEndListener.off();
+
+      // Enable page scrolling again
+      if (document.body.style.overflow === 'hidden') {
+        document.body.style.overflow = '';
+      }
       var holderTranslate = getHolderTranslate();
       var containerScrollDelta = getContainerScrollDelta();
       if (activeNodeHelper) {
@@ -251,12 +280,33 @@ var useSortHelper = function useSortHelper(config) {
           newIndex: activeNodeNextIndex,
           oldIndex: activeNodeOldIndex
         };
-        onSortEnd === null || onSortEnd === void 0 || onSortEnd(callbackPayload, event);
-        onSort === null || onSort === void 0 || onSort(callbackPayload, event);
+        onSortEnd === null || onSortEnd === void 0 || onSortEnd(callbackPayload, endEvent);
+        onSort === null || onSort === void 0 || onSort(callbackPayload, endEvent);
       }, transitionDuration);
-    }, {
+    };
+
+    // Set up mouse event listeners
+    var sortMouseMoveListener = on(window, 'mousemove', handleSortMove, {
+      passive: false
+    });
+    var sortMouseEndListener = on(window, 'mouseup', handleSortEnd, {
       passive: false
     });
+
+    // Set up touch event listeners
+    var sortTouchMoveListener;
+    var sortTouchEndListener;
+    if (isTouchEvent) {
+      // Disable page scrolling during touch drag
+      document.body.style.overflow = 'hidden';
+      sortTouchMoveListener = on(window, 'touchmove', handleSortMove, {
+        passive: false
+      } // Important: passive: false allows preventDefault() to work
+      );
+      sortTouchEndListener = on(window, 'touchend', handleSortEnd, {
+        passive: false
+      });
+    }
     setSorting(true);
     // start callback
     onSortStart === null || onSortStart === void 0 || onSortStart({
@@ -264,7 +314,7 @@ var useSortHelper = function useSortHelper(config) {
       node: activeNode,
       oldIndex: activeNodeOldIndex,
       newIndex: activeNodeNextIndex
-    }, mouseDownEvent.nativeEvent);
+    }, event);
   }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
 
   /**
@@ -292,15 +342,58 @@ var useSortHelper = function useSortHelper(config) {
     }
   }, [getManagedItem, handlePress, pressDelay, sorting]);
 
+  /**
+   * Handle touch start for mobile devices
+   */
+  var handleTouchStart = useCallback(function (touchStartEvent) {
+    var triggeredNode = touchStartEvent.target;
+    var targetNode = closestNode(triggeredNode, function (el) {
+      return Boolean(getManagedItem(el));
+    });
+    var curManagedItem = getManagedItem(targetNode);
+    if (
+    // is list item
+    Boolean(curManagedItem) && !curManagedItem.info.disabled &&
+    // is not sorting
+    !sorting &&
+    // is valid node
+    targetNode instanceof HTMLElement &&
+    // excludes interactive elements
+    !targetNode.contains(closestNode(triggeredNode, isContainInteractiveElement))) {
+      // Prevent scrolling while sorting
+      touchStartEvent.preventDefault();
+      pressTimer.current = setTimeout(handlePress, pressDelay, touchStartEvent, targetNode, curManagedItem);
+    }
+  }, [getManagedItem, handlePress, pressDelay, sorting]);
+
   /**
    * Clear timer after drag
    * */
   var handleEnd = useCallback(function () {
-    return clearTimeout(pressTimer.current);
+    clearTimeout(pressTimer.current);
+
+    // Ensure page scrolling is re-enabled
+    if (document.body.style.overflow === 'hidden') {
+      document.body.style.overflow = '';
+    }
+  }, []);
+
+  /**
+   * Clear timer after touch end
+   */
+  var handleTouchEnd = useCallback(function () {
+    clearTimeout(pressTimer.current);
+
+    // Ensure page scrolling is re-enabled
+    if (document.body.style.overflow === 'hidden') {
+      document.body.style.overflow = '';
+    }
   }, []);
   return {
     handleStart: handleStart,
     handleEnd: handleEnd,
+    handleTouchStart: handleTouchStart,
+    handleTouchEnd: handleTouchEnd,
     containerRef: containerRef,
     sorting: sorting,
     register: listItemRegister

package/esm/List/helper/utils.js

@@ -62,12 +62,20 @@ export function getEdgeOffset(node, parent, offset) {
   return getEdgeOffset(node.parentNode, parent, nodeOffset);
 }
 export function getScrollingParent(el) {
-  return closestNode(el, function (el) {
-    var computedStyle = window.getComputedStyle(el);
-    var overflowRegex = /(auto|scroll)/;
-    var properties = ['overflow', 'overflowX', 'overflowY'];
-    return properties.some(function (property) {
-      return overflowRegex.test(computedStyle[property]);
+  if (!el || typeof window === 'undefined' || !window.getComputedStyle) {
+    return null;
+  }
+  try {
+    return closestNode(el, function (el) {
+      var computedStyle = window.getComputedStyle(el);
+      var overflowRegex = /(auto|scroll)/;
+      var properties = ['overflow', 'overflowX', 'overflowY'];
+      return properties.some(function (property) {
+        return overflowRegex.test(computedStyle[property]);
+      });
     });
-  });
+  } catch (error) {
+    // In test environments, errors may occur, so return null
+    return null;
+  }
 }

package/esm/RangeSlider/RangeSlider.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "classPrefix", "constraint", "defaultValue", "disabled", "graduated", "progress", "vertical", "readOnly", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"];
+var _excluded = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "classPrefix", "constraint", "defaultValue", "disabled", "graduated", "progress", "keepTooltipOpen", "vertical", "readOnly", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"];
 import React, { useMemo, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import getWidth from 'dom-lib/getWidth';
@@ -40,6 +40,8 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     graduated = propsWithDefaults.graduated,
     _propsWithDefaults$pr = propsWithDefaults.progress,
     progress = _propsWithDefaults$pr === void 0 ? true : _propsWithDefaults$pr,
+    _propsWithDefaults$ke = propsWithDefaults.keepTooltipOpen,
+    keepTooltipOpen = _propsWithDefaults$ke === void 0 ? false : _propsWithDefaults$ke,
     vertical = propsWithDefaults.vertical,
     readOnly = propsWithDefaults.readOnly,
     _propsWithDefaults$mi = propsWithDefaults.min,
@@ -295,7 +297,8 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     'aria-valuemax': max,
     'aria-valuemin': min,
     'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby
+    'aria-labelledby': ariaLabelledby,
+    keepTooltipOpen: keepTooltipOpen
   };
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,

package/esm/Slider/Handle.d.ts

@@ -13,6 +13,7 @@ export interface HandleProps extends WithAsProps, React.HTMLAttributes<HTMLDivEl
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;
     'data-range'?: number[];
     'data-key'?: string;
+    keepTooltipOpen?: boolean;
 }
 declare const Handle: RsRefForwardingComponent<'div', HandleProps>;
 export default Handle;

package/esm/Slider/Handle.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "classPrefix", "className", "disabled", "style", "children", "position", "vertical", "tooltip", "rtl", "value", "role", "tabIndex", "renderTooltip", "onDragStart", "onDragMove", "onDragEnd", "onKeyDown", "data-range", "data-key"];
+var _excluded = ["as", "classPrefix", "className", "disabled", "style", "children", "position", "vertical", "tooltip", "rtl", "value", "role", "tabIndex", "renderTooltip", "onDragStart", "onDragMove", "onDragEnd", "onKeyDown", "data-range", "data-key", "keepTooltipOpen"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from "../Tooltip/index.js";
@@ -33,7 +33,9 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown = props.onKeyDown,
     dataRange = props['data-range'],
     dateKey = props['data-key'],
+    keepTooltipOpen = props.keepTooltipOpen,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var actualTooltip = tooltip || keepTooltipOpen;
   var horizontalKey = rtl ? 'right' : 'left';
   var direction = vertical ? 'bottom' : horizontalKey;
   var styles = _extends({}, style, (_extends2 = {}, _extends2[direction] = position + "%", _extends2));
@@ -41,11 +43,12 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var _useDrag = useDrag({
-      tooltip: tooltip,
+      tooltip: actualTooltip,
       disabled: disabled,
       onDragStart: onDragStart,
       onDragMove: onDragMove,
-      onDragEnd: onDragEnd
+      onDragEnd: onDragEnd,
+      keepTooltipOpen: keepTooltipOpen
     }),
     active = _useDrag.active,
     onMoveStart = _useDrag.onMoveStart,
@@ -53,7 +56,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rootRef = _useDrag.rootRef,
     tooltipRef = _useDrag.tooltipRef;
   var handleClasses = merge(className, prefix('handle'), {
-    active: active
+    active: active || keepTooltipOpen
   });
   return /*#__PURE__*/React.createElement(Component, {
     role: role,
@@ -68,7 +71,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "data-range": dataRange,
     "data-key": dateKey,
     "data-testid": "slider-handle"
-  }, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+  }, actualTooltip && /*#__PURE__*/React.createElement(Tooltip, {
     "aria-hidden": "true",
     ref: tooltipRef,
     className: merge(prefix('tooltip'), 'placement-top')

package/esm/Slider/Slider.d.ts

@@ -52,6 +52,8 @@ export interface SliderProps<T = number> extends WithAsProps, FormControlBasePro
     getAriaValueText?: (value: number, eventKey?: 'start' | 'end') => string;
     /** Callback function that is fired when the mouseup is triggered. */
     onChangeCommitted?: (value: T, event: React.MouseEvent) => void;
+    /** If true, tooltip will always be visible  even without hover */
+    keepTooltipOpen?: boolean;
 }
 export declare const sliderPropTypes: {
     min: PropTypes.Requireable<number>;

package/esm/Slider/Slider.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "placeholder", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"];
+var _excluded = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "placeholder", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted", "keepTooltipOpen"];
 import React, { useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import getWidth from 'dom-lib/getWidth';
@@ -83,6 +83,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMark = propsWithDefaults.renderMark,
     onChange = propsWithDefaults.onChange,
     onChangeCommitted = propsWithDefaults.onChangeCommitted,
+    keepTooltipOpen = propsWithDefaults.keepTooltipOpen,
     rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var barRef = useRef(null);
   var _useClassNames = useClassNames(classPrefix),
@@ -242,6 +243,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     tooltip: tooltip,
     rtl: rtl,
     value: value,
+    keepTooltipOpen: keepTooltipOpen,
     renderTooltip: renderTooltip,
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,

package/esm/Slider/useDrag.d.ts

@@ -5,6 +5,7 @@ interface DragProps {
     onDragStart?: (event: React.MouseEvent) => void;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;
+    keepTooltipOpen?: boolean;
 }
 declare const useDrag: (props: DragProps) => {
     active: boolean;

package/esm/Slider/useDrag.js

@@ -11,7 +11,8 @@ var useDrag = function useDrag(props) {
     disabled = props.disabled,
     onDragMove = props.onDragMove,
     onDragEnd = props.onDragEnd,
-    onDragStart = props.onDragStart;
+    onDragStart = props.onDragStart,
+    keepTooltipOpen = props.keepTooltipOpen;
   var _useState = useState(false),
     active = _useState[0],
     setActive = _useState[1];
@@ -67,10 +68,13 @@ var useDrag = function useDrag(props) {
     setTooltipPosition();
   });
   useEffect(function () {
+    if (keepTooltipOpen) {
+      onMouseEnter();
+    }
     return function () {
       releaseMoves();
     };
-  }, [releaseMoves]);
+  }, [releaseMoves, keepTooltipOpen]);
   return {
     active: active,
     rootRef: rootRef,