rsuite 5.79.0 → 5.79.1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [5.79.1](https://github.com/rsuite/rsuite/compare/v5.79.0...v5.79.1) (2025-04-03)
+
+
+### Bug Fixes
+
+* **List:** fix sorting issue on mobile devices ([#4215](https://github.com/rsuite/rsuite/issues/4215)) ([5b74d8b](https://github.com/rsuite/rsuite/commit/5b74d8b6e09e3d662e63f0c437a28585f2535a94))
+
+
+
 # [5.79.0](https://github.com/rsuite/rsuite/compare/v5.78.1...v5.79.0) (2025-03-26)
 
 

package/cjs/List/List.js

@@ -65,7 +65,9 @@ var List = /*#__PURE__*/_react.default.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,
@@ -86,7 +88,9 @@ var List = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: (0, _utils.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.default.createElement(_ListContext.default.Provider, {
     value: contextValue
   }, children));

package/cjs/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/cjs/List/helper/useSortHelper.js

@@ -37,7 +37,7 @@ var useSortHelper = function useSortHelper(config) {
   /**
    * start dragging
    * */
-  var handlePress = (0, _react.useCallback)(function (mouseDownEvent, _targetNode, curManagedItem) {
+  var handlePress = (0, _react.useCallback)(function (event, _targetNode, curManagedItem) {
     var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;
     if (!isMounted()) return;
     // data
@@ -51,6 +51,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 = (0, _utils.getScrollingParent)(containerElement) || containerElement;
     var initScroll = {
@@ -92,17 +99,31 @@ var useSortHelper = function useSortHelper(config) {
         y: 0
       });
     };
-    var sortMouseMoveListener = (0, _on.default)(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) {
         (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate);
@@ -202,14 +223,22 @@ var useSortHelper = function useSortHelper(config) {
         node: activeNode,
         oldIndex: activeNodeOldIndex,
         newIndex: activeNodeNextIndex
-      }, mouseOverEvent);
-    }, {
-      passive: false
-    });
-    var sortMouseEndListener = (0, _on.default)(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) {
@@ -256,12 +285,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 = (0, _on.default)(window, 'mousemove', handleSortMove, {
+      passive: false
+    });
+    var sortMouseEndListener = (0, _on.default)(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 = (0, _on.default)(window, 'touchmove', handleSortMove, {
+        passive: false
+      } // Important: passive: false allows preventDefault() to work
+      );
+      sortTouchEndListener = (0, _on.default)(window, 'touchend', handleSortEnd, {
+        passive: false
+      });
+    }
     setSorting(true);
     // start callback
     onSortStart === null || onSortStart === void 0 || onSortStart({
@@ -269,7 +319,7 @@ var useSortHelper = function useSortHelper(config) {
       node: activeNode,
       oldIndex: activeNodeOldIndex,
       newIndex: activeNodeNextIndex
-    }, mouseDownEvent.nativeEvent);
+    }, event);
   }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
 
   /**
@@ -297,15 +347,58 @@ var useSortHelper = function useSortHelper(config) {
     }
   }, [getManagedItem, handlePress, pressDelay, sorting]);
 
+  /**
+   * Handle touch start for mobile devices
+   */
+  var handleTouchStart = (0, _react.useCallback)(function (touchStartEvent) {
+    var triggeredNode = touchStartEvent.target;
+    var targetNode = (0, _utils.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((0, _utils.closestNode)(triggeredNode, _utils.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 = (0, _react.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 = (0, _react.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/cjs/List/helper/utils.js

@@ -72,12 +72,20 @@ function getEdgeOffset(node, parent, offset) {
   return getEdgeOffset(node.parentNode, parent, nodeOffset);
 }
 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/dist/rsuite.js

@@ -3645,7 +3645,7 @@ eval("\n\nexports.__esModule = true;\nexports.convertSize = void 0;\nvar convert
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _useSortHelper2 = _interopRequireDefault(__webpack_require__(/*! ./helper/useSortHelper */ \"./src/List/helper/useSortHelper.ts\"));\nvar _ListContext = _interopRequireDefault(__webpack_require__(/*! ./ListContext */ \"./src/List/ListContext.tsx\"));\nvar _ListItem = _interopRequireDefault(__webpack_require__(/*! ./ListItem */ \"./src/List/ListItem.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _excluded = [\"as\", \"autoScroll\", \"bordered\", \"classPrefix\", \"className\", \"children\", \"divider\", \"hover\", \"size\", \"sortable\", \"pressDelay\", \"transitionDuration\", \"onSort\", \"onSortEnd\", \"onSortMove\", \"onSortStart\"];\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/List/List.tsx\",\n  _this = void 0;\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `List` component is used to specify the layout of the list.\n * @see https://rsuitejs.com/components/list\n */\nvar List = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useCustom = (0, _CustomProvider.useCustom)('List', props),\n    propsWithDefaults = _useCustom.propsWithDefaults;\n  var _propsWithDefaults$as = propsWithDefaults.as,\n    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,\n    _propsWithDefaults$au = propsWithDefaults.autoScroll,\n    autoScroll = _propsWithDefaults$au === void 0 ? true : _propsWithDefaults$au,\n    bordered = propsWithDefaults.bordered,\n    _propsWithDefaults$cl = propsWithDefaults.classPrefix,\n    classPrefix = _propsWithDefaults$cl === void 0 ? 'list' : _propsWithDefaults$cl,\n    className = propsWithDefaults.className,\n    children = propsWithDefaults.children,\n    _propsWithDefaults$di = propsWithDefaults.divider,\n    divider = _propsWithDefaults$di === void 0 ? true : _propsWithDefaults$di,\n    hover = propsWithDefaults.hover,\n    _propsWithDefaults$si = propsWithDefaults.size,\n    size = _propsWithDefaults$si === void 0 ? 'md' : _propsWithDefaults$si,\n    sortable = propsWithDefaults.sortable,\n    _propsWithDefaults$pr = propsWithDefaults.pressDelay,\n    pressDelay = _propsWithDefaults$pr === void 0 ? 0 : _propsWithDefaults$pr,\n    _propsWithDefaults$tr = propsWithDefaults.transitionDuration,\n    transitionDuration = _propsWithDefaults$tr === void 0 ? 300 : _propsWithDefaults$tr,\n    onSort = propsWithDefaults.onSort,\n    onSortEnd = propsWithDefaults.onSortEnd,\n    onSortMove = propsWithDefaults.onSortMove,\n    onSortStart = propsWithDefaults.onSortStart,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);\n  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var _useSortHelper = (0, _useSortHelper2.default)({\n      autoScroll: autoScroll,\n      onSort: onSort,\n      onSortEnd: onSortEnd,\n      onSortMove: onSortMove,\n      onSortStart: onSortStart,\n      pressDelay: pressDelay,\n      transitionDuration: transitionDuration\n    }),\n    containerRef = _useSortHelper.containerRef,\n    register = _useSortHelper.register,\n    sorting = _useSortHelper.sorting,\n    handleEnd = _useSortHelper.handleEnd,\n    handleStart = _useSortHelper.handleStart;\n  var classes = merge(className, withClassPrefix({\n    bordered: bordered,\n    sortable: sortable,\n    sorting: sorting,\n    hover: hover,\n    divider: divider\n  }));\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      bordered: bordered,\n      size: size,\n      register: register\n    };\n  }, [bordered, register, size]);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"list\"\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(containerRef, ref),\n    className: classes,\n    onMouseDown: sortable ? handleStart : undefined,\n    onMouseUp: sortable ? handleEnd : undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 92,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 100,\n      columnNumber: 7\n    }\n  }, children));\n});\nList.Item = _ListItem.default;\nList.displayName = 'List';\nList.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  bordered: _propTypes.default.bool,\n  divider: _propTypes.default.bool,\n  hover: _propTypes.default.bool,\n  sortable: _propTypes.default.bool,\n  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),\n  autoScroll: _propTypes.default.bool,\n  pressDelay: _propTypes.default.number,\n  transitionDuration: _propTypes.default.number,\n  onSortStart: _propTypes.default.func,\n  onSortMove: _propTypes.default.func,\n  onSortEnd: _propTypes.default.func,\n  onSort: _propTypes.default.func\n};\nvar _default = exports[\"default\"] = List;\n\n//# sourceURL=webpack://rsuite/./src/List/List.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _useSortHelper2 = _interopRequireDefault(__webpack_require__(/*! ./helper/useSortHelper */ \"./src/List/helper/useSortHelper.ts\"));\nvar _ListContext = _interopRequireDefault(__webpack_require__(/*! ./ListContext */ \"./src/List/ListContext.tsx\"));\nvar _ListItem = _interopRequireDefault(__webpack_require__(/*! ./ListItem */ \"./src/List/ListItem.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _excluded = [\"as\", \"autoScroll\", \"bordered\", \"classPrefix\", \"className\", \"children\", \"divider\", \"hover\", \"size\", \"sortable\", \"pressDelay\", \"transitionDuration\", \"onSort\", \"onSortEnd\", \"onSortMove\", \"onSortStart\"];\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/List/List.tsx\",\n  _this = void 0;\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `List` component is used to specify the layout of the list.\n * @see https://rsuitejs.com/components/list\n */\nvar List = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _useCustom = (0, _CustomProvider.useCustom)('List', props),\n    propsWithDefaults = _useCustom.propsWithDefaults;\n  var _propsWithDefaults$as = propsWithDefaults.as,\n    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,\n    _propsWithDefaults$au = propsWithDefaults.autoScroll,\n    autoScroll = _propsWithDefaults$au === void 0 ? true : _propsWithDefaults$au,\n    bordered = propsWithDefaults.bordered,\n    _propsWithDefaults$cl = propsWithDefaults.classPrefix,\n    classPrefix = _propsWithDefaults$cl === void 0 ? 'list' : _propsWithDefaults$cl,\n    className = propsWithDefaults.className,\n    children = propsWithDefaults.children,\n    _propsWithDefaults$di = propsWithDefaults.divider,\n    divider = _propsWithDefaults$di === void 0 ? true : _propsWithDefaults$di,\n    hover = propsWithDefaults.hover,\n    _propsWithDefaults$si = propsWithDefaults.size,\n    size = _propsWithDefaults$si === void 0 ? 'md' : _propsWithDefaults$si,\n    sortable = propsWithDefaults.sortable,\n    _propsWithDefaults$pr = propsWithDefaults.pressDelay,\n    pressDelay = _propsWithDefaults$pr === void 0 ? 0 : _propsWithDefaults$pr,\n    _propsWithDefaults$tr = propsWithDefaults.transitionDuration,\n    transitionDuration = _propsWithDefaults$tr === void 0 ? 300 : _propsWithDefaults$tr,\n    onSort = propsWithDefaults.onSort,\n    onSortEnd = propsWithDefaults.onSortEnd,\n    onSortMove = propsWithDefaults.onSortMove,\n    onSortStart = propsWithDefaults.onSortStart,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);\n  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),\n    withClassPrefix = _useClassNames.withClassPrefix,\n    merge = _useClassNames.merge;\n  var _useSortHelper = (0, _useSortHelper2.default)({\n      autoScroll: autoScroll,\n      onSort: onSort,\n      onSortEnd: onSortEnd,\n      onSortMove: onSortMove,\n      onSortStart: onSortStart,\n      pressDelay: pressDelay,\n      transitionDuration: transitionDuration\n    }),\n    containerRef = _useSortHelper.containerRef,\n    register = _useSortHelper.register,\n    sorting = _useSortHelper.sorting,\n    handleEnd = _useSortHelper.handleEnd,\n    handleStart = _useSortHelper.handleStart,\n    handleTouchStart = _useSortHelper.handleTouchStart,\n    handleTouchEnd = _useSortHelper.handleTouchEnd;\n  var classes = merge(className, withClassPrefix({\n    bordered: bordered,\n    sortable: sortable,\n    sorting: sorting,\n    hover: hover,\n    divider: divider\n  }));\n  var contextValue = (0, _react.useMemo)(function () {\n    return {\n      bordered: bordered,\n      size: size,\n      register: register\n    };\n  }, [bordered, register, size]);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"list\"\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(containerRef, ref),\n    className: classes,\n    onMouseDown: sortable ? handleStart : undefined,\n    onMouseUp: sortable ? handleEnd : undefined,\n    onTouchStart: sortable ? handleTouchStart : undefined,\n    onTouchEnd: sortable ? handleTouchEnd : undefined,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 100,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {\n    value: contextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 110,\n      columnNumber: 7\n    }\n  }, children));\n});\nList.Item = _ListItem.default;\nList.displayName = 'List';\nList.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  bordered: _propTypes.default.bool,\n  divider: _propTypes.default.bool,\n  hover: _propTypes.default.bool,\n  sortable: _propTypes.default.bool,\n  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),\n  autoScroll: _propTypes.default.bool,\n  pressDelay: _propTypes.default.number,\n  transitionDuration: _propTypes.default.number,\n  onSortStart: _propTypes.default.func,\n  onSortMove: _propTypes.default.func,\n  onSortEnd: _propTypes.default.func,\n  onSort: _propTypes.default.func\n};\nvar _default = exports[\"default\"] = List;\n\n//# sourceURL=webpack://rsuite/./src/List/List.tsx?");
 
 /***/ }),
 
@@ -3700,7 +3700,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _AutoScroller = _interopRequireDefault(__webpack_require__(/*! ./AutoScroller */ \"./src/List/helper/AutoScroller.ts\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/List/helper/utils.ts\");\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _useManager2 = _interopRequireDefault(__webpack_require__(/*! ./useManager */ \"./src/List/helper/useManager.ts\"));\nfunction _createForOfIteratorHelperLoose(r, e) { var t = \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && \"number\" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nvar helperElementClass = 'rs-list-item-helper';\nvar holderElementClass = 'rs-list-item-holder';\nvar useSortHelper = function useSortHelper(config) {\n  var autoScroll = config.autoScroll,\n    pressDelay = config.pressDelay,\n    transitionDuration = config.transitionDuration,\n    onSort = config.onSort,\n    onSortEnd = config.onSortEnd,\n    onSortMove = config.onSortMove,\n    onSortStart = config.onSortStart;\n  var _useState = (0, _react.useState)(false),\n    sorting = _useState[0],\n    setSorting = _useState[1];\n  var containerRef = (0, _react.useRef)(null);\n  var pressTimer = (0, _react.useRef)();\n  var _useManager = (0, _useManager2.default)(),\n    listItemRegister = _useManager.listItemRegister,\n    getManagedItem = _useManager.getManagedItem,\n    getOrderedItems = _useManager.getOrderedItems;\n  var isMounted = (0, _hooks.useIsMounted)();\n\n  /**\n   * start dragging\n   * */\n  var handlePress = (0, _react.useCallback)(function (mouseDownEvent, _targetNode, curManagedItem) {\n    var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;\n    if (!isMounted()) return;\n    // data\n    var containerElement = containerRef.current;\n    var activeNode = curManagedItem.node;\n    var activeNodeOldIndex = (_curManagedItem$info$ = curManagedItem.info.index) !== null && _curManagedItem$info$ !== void 0 ? _curManagedItem$info$ : 0;\n    var activeNodeNextIndex = (_curManagedItem$info$2 = curManagedItem.info.index) !== null && _curManagedItem$info$2 !== void 0 ? _curManagedItem$info$2 : 0;\n    var activeNodeHolderTranslate = {\n      x: 0,\n      y: 0\n    };\n    var animatedNodesOffset = []; // all list item offset\n\n    // init scroller\n    var scrollContainer = (0, _utils.getScrollingParent)(containerElement) || containerElement;\n    var initScroll = {\n      x: scrollContainer.scrollLeft,\n      y: scrollContainer.scrollTop\n    };\n    var autoScroller = new _AutoScroller.default(scrollContainer, function (offset) {\n      activeNodeHolderTranslate.x += offset.left;\n      activeNodeHolderTranslate.y += offset.top;\n    });\n    var activeNodeBoundingClientRect = activeNode.getBoundingClientRect();\n    var activeNodeOffsetEdge = (0, _utils.getEdgeOffset)(activeNode, containerElement);\n    var activeNodeStyle = getComputedStyle(activeNode);\n    var activeNodeHelper = activeNode.cloneNode(true);\n    (_activeNodeHelper = activeNodeHelper) === null || _activeNodeHelper === void 0 || _activeNodeHelper.classList.add(helperElementClass);\n    (0, _utils.setInlineStyles)(activeNodeHelper, {\n      position: 'fixed',\n      width: activeNodeBoundingClientRect.width + \"px\",\n      height: activeNodeBoundingClientRect.height + \"px\",\n      left: activeNodeBoundingClientRect.left - parseFloat(activeNodeStyle.marginLeft) + \"px\",\n      top: activeNodeBoundingClientRect.top - parseFloat(activeNodeStyle.marginTop) + \"px\"\n    });\n    activeNode.classList.add(holderElementClass);\n    document.body.appendChild(activeNodeHelper);\n    var getContainerScrollDelta = function getContainerScrollDelta() {\n      return {\n        left: scrollContainer.scrollLeft - initScroll.x,\n        top: scrollContainer.scrollTop - initScroll.y\n      };\n    };\n    var getHolderTranslate = function getHolderTranslate() {\n      return animatedNodesOffset.reduce(function (acc, item) {\n        return {\n          x: acc.x + item.x,\n          y: acc.y + item.y\n        };\n      }, {\n        x: 0,\n        y: 0\n      });\n    };\n    var sortMouseMoveListener = (0, _on.default)(window, 'mousemove', function (mouseOverEvent) {\n      // Update helper position\n      var offset = {\n        x: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageX) || 0,\n        y: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageY) || 0\n      };\n      var containerScrollDelta = getContainerScrollDelta();\n      var containerBoundingRect = scrollContainer.getBoundingClientRect();\n      activeNodeHolderTranslate = {\n        x: offset.x - mouseDownEvent.pageX,\n        y: offset.y - mouseDownEvent.pageY\n      };\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate);\n      }\n\n      // animate\n      activeNodeNextIndex = -1;\n      var listItemManagerRefs = getOrderedItems(curManagedItem.info.collection);\n      var aTop = activeNodeOffsetEdge.top || 0;\n      var cTop = containerScrollDelta.top || 0;\n      var sortingOffsetY = aTop + activeNodeHolderTranslate.y + cTop;\n      for (var i = 0, len = listItemManagerRefs.length; i < len; i++) {\n        var _listItemManagerRefs$;\n        var currentNode = listItemManagerRefs[i].node;\n        var currentNodeIndex = (_listItemManagerRefs$ = listItemManagerRefs[i].info.index) !== null && _listItemManagerRefs$ !== void 0 ? _listItemManagerRefs$ : 0;\n        var offsetY = activeNodeBoundingClientRect.height > currentNode.offsetHeight ? currentNode.offsetHeight / 2 : activeNodeBoundingClientRect.height / 2;\n        var translate = {\n          x: 0,\n          y: 0\n        };\n\n        // If we haven't cached the node's offsetTop / offsetLeft value\n        var curEdgeOffset = listItemManagerRefs[i].edgeOffset || (0, _utils.getEdgeOffset)(currentNode, containerElement);\n        listItemManagerRefs[i].edgeOffset = curEdgeOffset;\n\n        // Get a reference to the next node\n        var prvNode = i > 0 && listItemManagerRefs[i - 1];\n        var nextNode = i < len - 1 && listItemManagerRefs[i + 1];\n\n        // Also cache the node's edge offset if needed.\n        if (prvNode && !prvNode.edgeOffset) {\n          prvNode.edgeOffset = (0, _utils.getEdgeOffset)(prvNode.node, containerElement);\n        }\n        if (nextNode && !nextNode.edgeOffset) {\n          nextNode.edgeOffset = (0, _utils.getEdgeOffset)(nextNode.node, containerElement);\n        }\n\n        // If the node is the one we're currently animating, skip it\n        if (currentNodeIndex === activeNodeOldIndex) {\n          continue;\n        }\n        var curEdgeOffsetTop = curEdgeOffset.top || 0;\n        if (prvNode && currentNodeIndex > activeNodeOldIndex && sortingOffsetY + offsetY >= curEdgeOffsetTop) {\n          var _prvNode$edgeOffset;\n          var yOffset = (((_prvNode$edgeOffset = prvNode.edgeOffset) === null || _prvNode$edgeOffset === void 0 ? void 0 : _prvNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -yOffset\n          };\n          activeNodeNextIndex = currentNodeIndex;\n        } else if (nextNode && currentNodeIndex < activeNodeOldIndex && sortingOffsetY <= curEdgeOffsetTop + offsetY) {\n          var _nextNode$edgeOffset;\n          var _yOffset = (((_nextNode$edgeOffset = nextNode.edgeOffset) === null || _nextNode$edgeOffset === void 0 ? void 0 : _nextNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = _yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -_yOffset\n          };\n          if (activeNodeNextIndex === -1) {\n            activeNodeNextIndex = currentNodeIndex;\n          }\n        } else {\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: 0\n          };\n        }\n        (0, _utils.setTransitionDuration)(currentNode, transitionDuration);\n        (0, _utils.setTranslate3d)(currentNode, translate);\n\n        // translate holder\n        (0, _utils.setTranslate3d)(activeNode, getHolderTranslate());\n      }\n      if (activeNodeNextIndex === -1) {\n        activeNodeNextIndex = activeNodeOldIndex;\n      }\n\n      // auto scroll\n      if (autoScroll) {\n        autoScroller.update({\n          width: activeNodeBoundingClientRect.width,\n          height: activeNodeBoundingClientRect.height,\n          translate: activeNodeHolderTranslate,\n          maxTranslate: {\n            x: 0,\n            y: containerBoundingRect.top + containerBoundingRect.height - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          },\n          minTranslate: {\n            x: 0,\n            y: containerBoundingRect.top - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          }\n        });\n      }\n      onSortMove === null || onSortMove === void 0 || onSortMove({\n        collection: curManagedItem.info.collection,\n        node: activeNode,\n        oldIndex: activeNodeOldIndex,\n        newIndex: activeNodeNextIndex\n      }, mouseOverEvent);\n    }, {\n      passive: false\n    });\n    var sortMouseEndListener = (0, _on.default)(window, 'mouseup', function (event) {\n      // Remove the event listeners\n      sortMouseMoveListener.off();\n      sortMouseEndListener.off();\n      var holderTranslate = getHolderTranslate();\n      var containerScrollDelta = getContainerScrollDelta();\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, {\n          x: holderTranslate.x - (containerScrollDelta.left || 0),\n          y: holderTranslate.y - (containerScrollDelta.top || 0)\n        });\n        (0, _utils.setTransitionDuration)(activeNodeHelper, transitionDuration);\n      }\n\n      // wait for animation\n      setTimeout(function () {\n        var _activeNodeHelper2;\n        if (!isMounted()) return;\n        // Remove the helper from the DOM\n        (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 || (_activeNodeHelper2 = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2 === void 0 || _activeNodeHelper2.removeChild(activeNodeHelper);\n        activeNodeHelper = null;\n\n        // Remove redundant styles\n        activeNode.classList.remove(holderElementClass);\n        (0, _utils.setTranslate3d)(activeNode, null);\n        animatedNodesOffset = [];\n        for (var _iterator = _createForOfIteratorHelperLoose(getOrderedItems(curManagedItem.info.collection)), _step; !(_step = _iterator()).done;) {\n          var item = _step.value;\n          // Clear the cached offsetTop / offsetLeft value\n          item.edgeOffset = null;\n\n          // Remove the transforms / transitions\n          var el = item.node;\n          (0, _utils.setTranslate3d)(el, null);\n          (0, _utils.setTransitionDuration)(el, null);\n        }\n\n        // Stop autoScroll\n        autoScroller.clear();\n\n        // Update manager state\n        setSorting(false);\n\n        // callbacks\n        var callbackPayload = {\n          collection: curManagedItem.info.collection,\n          node: curManagedItem.node,\n          newIndex: activeNodeNextIndex,\n          oldIndex: activeNodeOldIndex\n        };\n        onSortEnd === null || onSortEnd === void 0 || onSortEnd(callbackPayload, event);\n        onSort === null || onSort === void 0 || onSort(callbackPayload, event);\n      }, transitionDuration);\n    }, {\n      passive: false\n    });\n    setSorting(true);\n    // start callback\n    onSortStart === null || onSortStart === void 0 || onSortStart({\n      collection: curManagedItem.info.collection,\n      node: activeNode,\n      oldIndex: activeNodeOldIndex,\n      newIndex: activeNodeNextIndex\n    }, mouseDownEvent.nativeEvent);\n  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);\n\n  /**\n   * Determine whether to start dragging\n   * */\n  var handleStart = (0, _react.useCallback)(function (mouseDownEvent) {\n    var triggeredNode = mouseDownEvent.target;\n    var targetNode = (0, _utils.closestNode)(triggeredNode, function (el) {\n      return Boolean(getManagedItem(el));\n    });\n    var curManagedItem = getManagedItem(targetNode);\n    if (\n    // is not secondary button pressed\n    mouseDownEvent.button !== 2 &&\n    // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled &&\n    // is not sorting\n    !sorting &&\n    // is valid node\n    targetNode instanceof HTMLElement &&\n    // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      mouseDownEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, mouseDownEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n\n  /**\n   * Clear timer after drag\n   * */\n  var handleEnd = (0, _react.useCallback)(function () {\n    return clearTimeout(pressTimer.current);\n  }, []);\n  return {\n    handleStart: handleStart,\n    handleEnd: handleEnd,\n    containerRef: containerRef,\n    sorting: sorting,\n    register: listItemRegister\n  };\n};\nvar _default = exports[\"default\"] = useSortHelper;\n\n//# sourceURL=webpack://rsuite/./src/List/helper/useSortHelper.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _AutoScroller = _interopRequireDefault(__webpack_require__(/*! ./AutoScroller */ \"./src/List/helper/AutoScroller.ts\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/List/helper/utils.ts\");\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _useManager2 = _interopRequireDefault(__webpack_require__(/*! ./useManager */ \"./src/List/helper/useManager.ts\"));\nfunction _createForOfIteratorHelperLoose(r, e) { var t = \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && \"number\" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nvar helperElementClass = 'rs-list-item-helper';\nvar holderElementClass = 'rs-list-item-holder';\nvar useSortHelper = function useSortHelper(config) {\n  var autoScroll = config.autoScroll,\n    pressDelay = config.pressDelay,\n    transitionDuration = config.transitionDuration,\n    onSort = config.onSort,\n    onSortEnd = config.onSortEnd,\n    onSortMove = config.onSortMove,\n    onSortStart = config.onSortStart;\n  var _useState = (0, _react.useState)(false),\n    sorting = _useState[0],\n    setSorting = _useState[1];\n  var containerRef = (0, _react.useRef)(null);\n  var pressTimer = (0, _react.useRef)();\n  var _useManager = (0, _useManager2.default)(),\n    listItemRegister = _useManager.listItemRegister,\n    getManagedItem = _useManager.getManagedItem,\n    getOrderedItems = _useManager.getOrderedItems;\n  var isMounted = (0, _hooks.useIsMounted)();\n\n  /**\n   * start dragging\n   * */\n  var handlePress = (0, _react.useCallback)(function (event, _targetNode, curManagedItem) {\n    var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;\n    if (!isMounted()) return;\n    // data\n    var containerElement = containerRef.current;\n    var activeNode = curManagedItem.node;\n    var activeNodeOldIndex = (_curManagedItem$info$ = curManagedItem.info.index) !== null && _curManagedItem$info$ !== void 0 ? _curManagedItem$info$ : 0;\n    var activeNodeNextIndex = (_curManagedItem$info$2 = curManagedItem.info.index) !== null && _curManagedItem$info$2 !== void 0 ? _curManagedItem$info$2 : 0;\n    var activeNodeHolderTranslate = {\n      x: 0,\n      y: 0\n    };\n    var animatedNodesOffset = []; // all list item offset\n\n    // Get initial position from event\n    var isTouchEvent = 'touches' in event;\n    var initialPosition = {\n      pageX: isTouchEvent ? event.touches[0].pageX : event.pageX,\n      pageY: isTouchEvent ? event.touches[0].pageY : event.pageY\n    };\n\n    // init scroller\n    var scrollContainer = (0, _utils.getScrollingParent)(containerElement) || containerElement;\n    var initScroll = {\n      x: scrollContainer.scrollLeft,\n      y: scrollContainer.scrollTop\n    };\n    var autoScroller = new _AutoScroller.default(scrollContainer, function (offset) {\n      activeNodeHolderTranslate.x += offset.left;\n      activeNodeHolderTranslate.y += offset.top;\n    });\n    var activeNodeBoundingClientRect = activeNode.getBoundingClientRect();\n    var activeNodeOffsetEdge = (0, _utils.getEdgeOffset)(activeNode, containerElement);\n    var activeNodeStyle = getComputedStyle(activeNode);\n    var activeNodeHelper = activeNode.cloneNode(true);\n    (_activeNodeHelper = activeNodeHelper) === null || _activeNodeHelper === void 0 || _activeNodeHelper.classList.add(helperElementClass);\n    (0, _utils.setInlineStyles)(activeNodeHelper, {\n      position: 'fixed',\n      width: activeNodeBoundingClientRect.width + \"px\",\n      height: activeNodeBoundingClientRect.height + \"px\",\n      left: activeNodeBoundingClientRect.left - parseFloat(activeNodeStyle.marginLeft) + \"px\",\n      top: activeNodeBoundingClientRect.top - parseFloat(activeNodeStyle.marginTop) + \"px\"\n    });\n    activeNode.classList.add(holderElementClass);\n    document.body.appendChild(activeNodeHelper);\n    var getContainerScrollDelta = function getContainerScrollDelta() {\n      return {\n        left: scrollContainer.scrollLeft - initScroll.x,\n        top: scrollContainer.scrollTop - initScroll.y\n      };\n    };\n    var getHolderTranslate = function getHolderTranslate() {\n      return animatedNodesOffset.reduce(function (acc, item) {\n        return {\n          x: acc.x + item.x,\n          y: acc.y + item.y\n        };\n      }, {\n        x: 0,\n        y: 0\n      });\n    };\n\n    // Common handler for both mouse and touch move events\n    var handleSortMove = function handleSortMove(moveEvent) {\n      // Prevent default to stop page scrolling during touch drag\n      if ('touches' in moveEvent) {\n        moveEvent.preventDefault();\n      }\n\n      // Get current position from event\n      var isTouchMoveEvent = 'touches' in moveEvent;\n      var currentPosition = {\n        pageX: isTouchMoveEvent ? moveEvent.touches[0].pageX : moveEvent.pageX,\n        pageY: isTouchMoveEvent ? moveEvent.touches[0].pageY : moveEvent.pageY\n      };\n\n      // Update helper position\n      var offset = {\n        x: currentPosition.pageX,\n        y: currentPosition.pageY\n      };\n      var containerScrollDelta = getContainerScrollDelta();\n      var containerBoundingRect = scrollContainer.getBoundingClientRect();\n      activeNodeHolderTranslate = {\n        x: offset.x - initialPosition.pageX,\n        y: offset.y - initialPosition.pageY\n      };\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate);\n      }\n\n      // animate\n      activeNodeNextIndex = -1;\n      var listItemManagerRefs = getOrderedItems(curManagedItem.info.collection);\n      var aTop = activeNodeOffsetEdge.top || 0;\n      var cTop = containerScrollDelta.top || 0;\n      var sortingOffsetY = aTop + activeNodeHolderTranslate.y + cTop;\n      for (var i = 0, len = listItemManagerRefs.length; i < len; i++) {\n        var _listItemManagerRefs$;\n        var currentNode = listItemManagerRefs[i].node;\n        var currentNodeIndex = (_listItemManagerRefs$ = listItemManagerRefs[i].info.index) !== null && _listItemManagerRefs$ !== void 0 ? _listItemManagerRefs$ : 0;\n        var offsetY = activeNodeBoundingClientRect.height > currentNode.offsetHeight ? currentNode.offsetHeight / 2 : activeNodeBoundingClientRect.height / 2;\n        var translate = {\n          x: 0,\n          y: 0\n        };\n\n        // If we haven't cached the node's offsetTop / offsetLeft value\n        var curEdgeOffset = listItemManagerRefs[i].edgeOffset || (0, _utils.getEdgeOffset)(currentNode, containerElement);\n        listItemManagerRefs[i].edgeOffset = curEdgeOffset;\n\n        // Get a reference to the next node\n        var prvNode = i > 0 && listItemManagerRefs[i - 1];\n        var nextNode = i < len - 1 && listItemManagerRefs[i + 1];\n\n        // Also cache the node's edge offset if needed.\n        if (prvNode && !prvNode.edgeOffset) {\n          prvNode.edgeOffset = (0, _utils.getEdgeOffset)(prvNode.node, containerElement);\n        }\n        if (nextNode && !nextNode.edgeOffset) {\n          nextNode.edgeOffset = (0, _utils.getEdgeOffset)(nextNode.node, containerElement);\n        }\n\n        // If the node is the one we're currently animating, skip it\n        if (currentNodeIndex === activeNodeOldIndex) {\n          continue;\n        }\n        var curEdgeOffsetTop = curEdgeOffset.top || 0;\n        if (prvNode && currentNodeIndex > activeNodeOldIndex && sortingOffsetY + offsetY >= curEdgeOffsetTop) {\n          var _prvNode$edgeOffset;\n          var yOffset = (((_prvNode$edgeOffset = prvNode.edgeOffset) === null || _prvNode$edgeOffset === void 0 ? void 0 : _prvNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -yOffset\n          };\n          activeNodeNextIndex = currentNodeIndex;\n        } else if (nextNode && currentNodeIndex < activeNodeOldIndex && sortingOffsetY <= curEdgeOffsetTop + offsetY) {\n          var _nextNode$edgeOffset;\n          var _yOffset = (((_nextNode$edgeOffset = nextNode.edgeOffset) === null || _nextNode$edgeOffset === void 0 ? void 0 : _nextNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = _yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -_yOffset\n          };\n          if (activeNodeNextIndex === -1) {\n            activeNodeNextIndex = currentNodeIndex;\n          }\n        } else {\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: 0\n          };\n        }\n        (0, _utils.setTransitionDuration)(currentNode, transitionDuration);\n        (0, _utils.setTranslate3d)(currentNode, translate);\n\n        // translate holder\n        (0, _utils.setTranslate3d)(activeNode, getHolderTranslate());\n      }\n      if (activeNodeNextIndex === -1) {\n        activeNodeNextIndex = activeNodeOldIndex;\n      }\n\n      // auto scroll\n      if (autoScroll) {\n        autoScroller.update({\n          width: activeNodeBoundingClientRect.width,\n          height: activeNodeBoundingClientRect.height,\n          translate: activeNodeHolderTranslate,\n          maxTranslate: {\n            x: 0,\n            y: containerBoundingRect.top + containerBoundingRect.height - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          },\n          minTranslate: {\n            x: 0,\n            y: containerBoundingRect.top - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          }\n        });\n      }\n      onSortMove === null || onSortMove === void 0 || onSortMove({\n        collection: curManagedItem.info.collection,\n        node: activeNode,\n        oldIndex: activeNodeOldIndex,\n        newIndex: activeNodeNextIndex\n      }, moveEvent);\n    };\n\n    // Common handler for both mouse and touch end events\n    var handleSortEnd = function handleSortEnd(endEvent) {\n      var _sortTouchMoveListene, _sortTouchEndListener;\n      // Remove the event listeners\n      sortMouseMoveListener.off();\n      sortMouseEndListener.off();\n      (_sortTouchMoveListene = sortTouchMoveListener) === null || _sortTouchMoveListene === void 0 || _sortTouchMoveListene.off();\n      (_sortTouchEndListener = sortTouchEndListener) === null || _sortTouchEndListener === void 0 || _sortTouchEndListener.off();\n\n      // Enable page scrolling again\n      if (document.body.style.overflow === 'hidden') {\n        document.body.style.overflow = '';\n      }\n      var holderTranslate = getHolderTranslate();\n      var containerScrollDelta = getContainerScrollDelta();\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, {\n          x: holderTranslate.x - (containerScrollDelta.left || 0),\n          y: holderTranslate.y - (containerScrollDelta.top || 0)\n        });\n        (0, _utils.setTransitionDuration)(activeNodeHelper, transitionDuration);\n      }\n\n      // wait for animation\n      setTimeout(function () {\n        var _activeNodeHelper2;\n        if (!isMounted()) return;\n        // Remove the helper from the DOM\n        (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 || (_activeNodeHelper2 = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2 === void 0 || _activeNodeHelper2.removeChild(activeNodeHelper);\n        activeNodeHelper = null;\n\n        // Remove redundant styles\n        activeNode.classList.remove(holderElementClass);\n        (0, _utils.setTranslate3d)(activeNode, null);\n        animatedNodesOffset = [];\n        for (var _iterator = _createForOfIteratorHelperLoose(getOrderedItems(curManagedItem.info.collection)), _step; !(_step = _iterator()).done;) {\n          var item = _step.value;\n          // Clear the cached offsetTop / offsetLeft value\n          item.edgeOffset = null;\n\n          // Remove the transforms / transitions\n          var el = item.node;\n          (0, _utils.setTranslate3d)(el, null);\n          (0, _utils.setTransitionDuration)(el, null);\n        }\n\n        // Stop autoScroll\n        autoScroller.clear();\n\n        // Update manager state\n        setSorting(false);\n\n        // callbacks\n        var callbackPayload = {\n          collection: curManagedItem.info.collection,\n          node: curManagedItem.node,\n          newIndex: activeNodeNextIndex,\n          oldIndex: activeNodeOldIndex\n        };\n        onSortEnd === null || onSortEnd === void 0 || onSortEnd(callbackPayload, endEvent);\n        onSort === null || onSort === void 0 || onSort(callbackPayload, endEvent);\n      }, transitionDuration);\n    };\n\n    // Set up mouse event listeners\n    var sortMouseMoveListener = (0, _on.default)(window, 'mousemove', handleSortMove, {\n      passive: false\n    });\n    var sortMouseEndListener = (0, _on.default)(window, 'mouseup', handleSortEnd, {\n      passive: false\n    });\n\n    // Set up touch event listeners\n    var sortTouchMoveListener;\n    var sortTouchEndListener;\n    if (isTouchEvent) {\n      // Disable page scrolling during touch drag\n      document.body.style.overflow = 'hidden';\n      sortTouchMoveListener = (0, _on.default)(window, 'touchmove', handleSortMove, {\n        passive: false\n      } // Important: passive: false allows preventDefault() to work\n      );\n      sortTouchEndListener = (0, _on.default)(window, 'touchend', handleSortEnd, {\n        passive: false\n      });\n    }\n    setSorting(true);\n    // start callback\n    onSortStart === null || onSortStart === void 0 || onSortStart({\n      collection: curManagedItem.info.collection,\n      node: activeNode,\n      oldIndex: activeNodeOldIndex,\n      newIndex: activeNodeNextIndex\n    }, event);\n  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);\n\n  /**\n   * Determine whether to start dragging\n   * */\n  var handleStart = (0, _react.useCallback)(function (mouseDownEvent) {\n    var triggeredNode = mouseDownEvent.target;\n    var targetNode = (0, _utils.closestNode)(triggeredNode, function (el) {\n      return Boolean(getManagedItem(el));\n    });\n    var curManagedItem = getManagedItem(targetNode);\n    if (\n    // is not secondary button pressed\n    mouseDownEvent.button !== 2 &&\n    // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled &&\n    // is not sorting\n    !sorting &&\n    // is valid node\n    targetNode instanceof HTMLElement &&\n    // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      mouseDownEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, mouseDownEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n\n  /**\n   * Handle touch start for mobile devices\n   */\n  var handleTouchStart = (0, _react.useCallback)(function (touchStartEvent) {\n    var triggeredNode = touchStartEvent.target;\n    var targetNode = (0, _utils.closestNode)(triggeredNode, function (el) {\n      return Boolean(getManagedItem(el));\n    });\n    var curManagedItem = getManagedItem(targetNode);\n    if (\n    // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled &&\n    // is not sorting\n    !sorting &&\n    // is valid node\n    targetNode instanceof HTMLElement &&\n    // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      // Prevent scrolling while sorting\n      touchStartEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, touchStartEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n\n  /**\n   * Clear timer after drag\n   * */\n  var handleEnd = (0, _react.useCallback)(function () {\n    clearTimeout(pressTimer.current);\n\n    // Ensure page scrolling is re-enabled\n    if (document.body.style.overflow === 'hidden') {\n      document.body.style.overflow = '';\n    }\n  }, []);\n\n  /**\n   * Clear timer after touch end\n   */\n  var handleTouchEnd = (0, _react.useCallback)(function () {\n    clearTimeout(pressTimer.current);\n\n    // Ensure page scrolling is re-enabled\n    if (document.body.style.overflow === 'hidden') {\n      document.body.style.overflow = '';\n    }\n  }, []);\n  return {\n    handleStart: handleStart,\n    handleEnd: handleEnd,\n    handleTouchStart: handleTouchStart,\n    handleTouchEnd: handleTouchEnd,\n    containerRef: containerRef,\n    sorting: sorting,\n    register: listItemRegister\n  };\n};\nvar _default = exports[\"default\"] = useSortHelper;\n\n//# sourceURL=webpack://rsuite/./src/List/helper/useSortHelper.ts?");
 
 /***/ }),
 
@@ -3711,7 +3711,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.closestNode = closestNode;\nexports.getEdgeOffset = getEdgeOffset;\nexports.getScrollingParent = getScrollingParent;\nexports.isContainInteractiveElement = isContainInteractiveElement;\nexports.setInlineStyles = setInlineStyles;\nexports.setTransitionDuration = setTransitionDuration;\nexports.setTranslate3d = setTranslate3d;\n/**\n * interactive elements should be skiped\n * */\nvar INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'OPTION', 'TEXTAREA', 'SELECT'];\nfunction isContainInteractiveElement(targetNode) {\n  return INTERACTIVE_ELEMENTS.includes(targetNode.tagName) || targetNode.contentEditable === 'true';\n}\nfunction setInlineStyles(node, styles) {\n  if (node !== null && styles !== null) {\n    for (var _i = 0, _Object$entries = Object.entries(styles); _i < _Object$entries.length; _i++) {\n      var _Object$entries$_i = _Object$entries[_i],\n        key = _Object$entries$_i[0],\n        value = _Object$entries$_i[1];\n      node.style[key] = value;\n    }\n  }\n}\nfunction setTranslate3d(node, translate) {\n  setInlineStyles(node, {\n    transform: translate ? \"translate3d(\" + translate.x + \"px,\" + translate.y + \"px,0)\" : ''\n  });\n}\nfunction setTransitionDuration(node, duration) {\n  setInlineStyles(node, {\n    transitionDuration: duration ? duration + \"ms\" : ''\n  });\n}\n\n/**\n * find closest target node from source node\n * */\nfunction closestNode(sourceNode, judge) {\n  var currentNode = sourceNode;\n  while (currentNode) {\n    if (judge(currentNode)) {\n      return currentNode;\n    }\n    currentNode = currentNode.parentNode;\n  }\n  return null;\n}\nfunction getEdgeOffset(node, parent, offset) {\n  if (offset === void 0) {\n    offset = {\n      left: 0,\n      top: 0\n    };\n  }\n  if (!node || !parent) {\n    return {};\n  }\n\n  // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested\n  var nodeOffset = {\n    left: (offset.left || 0) + node.offsetLeft,\n    top: (offset.top || 0) + node.offsetTop\n  };\n  if (node.parentNode === parent) {\n    return nodeOffset;\n  }\n  return getEdgeOffset(node.parentNode, parent, nodeOffset);\n}\nfunction getScrollingParent(el) {\n  return closestNode(el, function (el) {\n    var computedStyle = window.getComputedStyle(el);\n    var overflowRegex = /(auto|scroll)/;\n    var properties = ['overflow', 'overflowX', 'overflowY'];\n    return properties.some(function (property) {\n      return overflowRegex.test(computedStyle[property]);\n    });\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/List/helper/utils.ts?");
+eval("\n\nexports.__esModule = true;\nexports.closestNode = closestNode;\nexports.getEdgeOffset = getEdgeOffset;\nexports.getScrollingParent = getScrollingParent;\nexports.isContainInteractiveElement = isContainInteractiveElement;\nexports.setInlineStyles = setInlineStyles;\nexports.setTransitionDuration = setTransitionDuration;\nexports.setTranslate3d = setTranslate3d;\n/**\n * interactive elements should be skiped\n * */\nvar INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'OPTION', 'TEXTAREA', 'SELECT'];\nfunction isContainInteractiveElement(targetNode) {\n  return INTERACTIVE_ELEMENTS.includes(targetNode.tagName) || targetNode.contentEditable === 'true';\n}\nfunction setInlineStyles(node, styles) {\n  if (node !== null && styles !== null) {\n    for (var _i = 0, _Object$entries = Object.entries(styles); _i < _Object$entries.length; _i++) {\n      var _Object$entries$_i = _Object$entries[_i],\n        key = _Object$entries$_i[0],\n        value = _Object$entries$_i[1];\n      node.style[key] = value;\n    }\n  }\n}\nfunction setTranslate3d(node, translate) {\n  setInlineStyles(node, {\n    transform: translate ? \"translate3d(\" + translate.x + \"px,\" + translate.y + \"px,0)\" : ''\n  });\n}\nfunction setTransitionDuration(node, duration) {\n  setInlineStyles(node, {\n    transitionDuration: duration ? duration + \"ms\" : ''\n  });\n}\n\n/**\n * find closest target node from source node\n * */\nfunction closestNode(sourceNode, judge) {\n  var currentNode = sourceNode;\n  while (currentNode) {\n    if (judge(currentNode)) {\n      return currentNode;\n    }\n    currentNode = currentNode.parentNode;\n  }\n  return null;\n}\nfunction getEdgeOffset(node, parent, offset) {\n  if (offset === void 0) {\n    offset = {\n      left: 0,\n      top: 0\n    };\n  }\n  if (!node || !parent) {\n    return {};\n  }\n\n  // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested\n  var nodeOffset = {\n    left: (offset.left || 0) + node.offsetLeft,\n    top: (offset.top || 0) + node.offsetTop\n  };\n  if (node.parentNode === parent) {\n    return nodeOffset;\n  }\n  return getEdgeOffset(node.parentNode, parent, nodeOffset);\n}\nfunction getScrollingParent(el) {\n  if (!el || typeof window === 'undefined' || !window.getComputedStyle) {\n    return null;\n  }\n  try {\n    return closestNode(el, function (el) {\n      var computedStyle = window.getComputedStyle(el);\n      var overflowRegex = /(auto|scroll)/;\n      var properties = ['overflow', 'overflowX', 'overflowY'];\n      return properties.some(function (property) {\n        return overflowRegex.test(computedStyle[property]);\n      });\n    });\n  } catch (error) {\n    // In test environments, errors may occur, so return null\n    return null;\n  }\n}\n\n//# sourceURL=webpack://rsuite/./src/List/helper/utils.ts?");
 
 /***/ }),
 
@@ -10774,9 +10774,9 @@ eval("var memoizeCapped = __webpack_require__(/*! ./_memoizeCapped */ \"./node_m
 /*!***************************************!*\
   !*** ./node_modules/lodash/_toKey.js ***!
   \***************************************/
-/***/ (function(module) {
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-eval("/**\n * This method returns the first argument it receives.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Util\n * @param {*} value Any value.\n * @returns {*} Returns `value`.\n * @example\n *\n * var object = { 'a': 1 };\n *\n * console.log(_.identity(object) === object);\n * // => true\n */\nfunction identity(value) {\n  return value;\n}\n\nmodule.exports = identity;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/_toKey.js?");
+eval("var isSymbol = __webpack_require__(/*! ./isSymbol */ \"./node_modules/lodash/isSymbol.js\");\n\n/** Used as references for various `Number` constants. */\nvar INFINITY = 1 / 0;\n\n/**\n * Converts `value` to a string key if it's not a string or symbol.\n *\n * @private\n * @param {*} value The value to inspect.\n * @returns {string|symbol} Returns the key.\n */\nfunction toKey(value) {\n  if (typeof value == 'string' || isSymbol(value)) {\n    return value;\n  }\n  var result = (value + '');\n  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;\n}\n\nmodule.exports = toKey;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/_toKey.js?");
 
 /***/ }),