rsuite 5.79.0 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.79.0",
+  "version": "5.79.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",