rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

package/cjs/Grid/utils/styles.js

@@ -0,0 +1,43 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.getResponsiveGutterStyles = void 0;
+var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
+var _constants = require("../../internals/constants");
+var _utils = require("../../internals/utils");
+/**
+ * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
+ */
+const getResponsiveGutterStyles = gutter => {
+  if (typeof gutter === 'undefined') {
+    return {};
+  }
+
+  // Helper function to process gutter values and generate CSS variables
+  const processGutterValue = function (value, prefix) {
+    if (prefix === void 0) {
+      prefix = '';
+    }
+    const [h, v] = Array.isArray(value) ? value : [value, value];
+    return {
+      [`--rs-grid-gutter${prefix}`]: (0, _utils.getCssValue)(h),
+      [`--rs-grid-row-gutter${prefix}`]: (0, _utils.getCssValue)(v)
+    };
+  };
+
+  // Handle responsive object
+  if ((0, _isPlainObject.default)(gutter)) {
+    return _constants.BREAKPOINTS.reduce((styles, breakpoint) => {
+      const value = gutter[breakpoint];
+      if (!value) return styles;
+      const prefix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
+      return (0, _utils.mergeStyles)(styles, processGutterValue(value, prefix));
+    }, {});
+  }
+
+  // Handle non-responsive value
+  return processGutterValue(gutter);
+};
+exports.getResponsiveGutterStyles = getResponsiveGutterStyles;

package/cjs/Image/Image.js

@@ -50,19 +50,14 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     shaded,
     zoomed
   }));
-  const imgProps = {
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
-  };
   const {
     imgSrc,
-    isLoading
+    isLoading,
+    onLoad,
+    onError
   } = (0, _useImage.useImage)({
     src,
-    fallbackSrc,
-    ...imgProps
+    fallbackSrc
   });
   const styles = {
     ...style,
@@ -76,8 +71,14 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     className: classes,
     style: styles,
     width: width,
-    height: height
-  }, imgProps, rest));
+    height: height,
+    loading: loading,
+    onLoad: onLoad,
+    onError: onError,
+    crossOrigin: crossOrigin,
+    srcSet: srcSet,
+    sizes: sizes
+  }, rest));
   if (zoomed) {
     return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
       w: width,

package/cjs/Image/hooks/useImage.d.ts

@@ -10,5 +10,7 @@ export declare const useImage: (props: UseImageProps) => {
     imgSrc: string | null;
     isLoading: boolean;
     error: boolean;
+    onLoad: () => void;
+    onError: () => void;
 };
 export {};

package/cjs/Image/hooks/useImage.js

@@ -1,65 +1,41 @@
 'use client';
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.useImage = void 0;
 var _react = require("react");
-var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../../internals/hooks/useIsomorphicLayoutEffect"));
 const useImage = props => {
   const {
     src,
-    fallbackSrc,
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
+    fallbackSrc
   } = props;
   const [imgSrc, setImgSrc] = (0, _react.useState)(src || fallbackSrc || null);
   const [isLoading, setIsLoading] = (0, _react.useState)(!!src);
   const [error, setError] = (0, _react.useState)(false);
-  const imageRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    setIsLoading(!!src); // true if src exists, false otherwise
-  }, [src]);
-  const flush = () => {
-    if (imageRef.current) {
-      imageRef.current.onload = null;
-      imageRef.current.onerror = null;
+    if (!src) {
+      setIsLoading(false);
+      return;
     }
+    setImgSrc(src);
+    setIsLoading(true);
+    setError(false);
+  }, [src]);
+  const handleLoad = () => {
+    setIsLoading(false);
+    setError(false);
+  };
+  const handleError = () => {
+    setIsLoading(false);
+    setError(true);
+    setImgSrc(fallbackSrc || null);
   };
-  const loadImage = (0, _react.useCallback)(() => {
-    if (!src) return;
-    flush();
-    const image = new Image();
-    image.src = src;
-    if (crossOrigin) image.crossOrigin = crossOrigin;
-    if (srcSet) image.srcset = srcSet;
-    if (sizes) image.sizes = sizes;
-    if (loading) image.loading = loading;
-    image.onload = () => {
-      flush();
-      setImgSrc(src);
-      setIsLoading(false);
-    };
-    image.onerror = () => {
-      flush();
-      setError(true);
-      setImgSrc(fallbackSrc || null);
-      setIsLoading(false);
-    };
-    imageRef.current = image;
-  }, [crossOrigin, fallbackSrc, loading, sizes, src, srcSet]);
-  (0, _useIsomorphicLayoutEffect.default)(() => {
-    loadImage();
-    return () => {
-      flush();
-    };
-  }, [loadImage]);
   return {
     imgSrc,
     isLoading,
-    error
+    error,
+    onLoad: handleLoad,
+    onError: handleError
   };
 };
 exports.useImage = useImage;

package/cjs/InlineEdit/InlineEdit.js

@@ -43,6 +43,7 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
     onChange,
     onKeyDown,
     onClick,
+    onFocus,
     htmlProps
   } = (0, _useEditState.default)({
     ...rest,
@@ -75,7 +76,8 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
       disabled
     })),
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onFocus: onFocus
   }, htmlProps), (0, _renderChildren.renderChildren)(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/_react.default.createElement(_EditableControls.default, {
     className: prefix('controls'),
     onSave: onSave,

package/cjs/InlineEdit/useEditState.d.ts

@@ -8,12 +8,14 @@ interface EditStateProps {
     onCancel?: (event?: React.MouseEvent) => void;
     onSave?: (event?: React.MouseEvent) => void;
     onClick?: (event: React.SyntheticEvent) => void;
+    onFocus?: (event?: React.FocusEvent) => void;
 }
 declare const useEditState: (props: EditStateProps) => {
     isEditing: boolean;
     value: any;
     onClick: (...args: any[]) => any;
     onChange: (...args: any[]) => any;
+    onFocus: (...args: any[]) => any;
     onCancel: (...args: any[]) => any;
     onSave: (...args: any[]) => any;
     onKeyDown: (...args: any[]) => any;

package/cjs/InlineEdit/useEditState.js

@@ -15,6 +15,7 @@ const useEditState = props => {
     onCancel,
     onSave,
     onClick,
+    onFocus,
     ...htmlProps
   } = props;
   const [isEditing, setIsEditing] = (0, _react.useState)(false);
@@ -31,6 +32,12 @@ const useEditState = props => {
     setIsEditing(true);
     setResetValue(value);
   });
+  const handleFocus = (0, _hooks.useEventCallback)(event => {
+    if (disabled) return;
+    onFocus === null || onFocus === void 0 || onFocus(event);
+    setIsEditing(true);
+    setResetValue(value);
+  });
   const handleChange = (0, _hooks.useEventCallback)((value, event) => {
     setValue(value);
     onChange === null || onChange === void 0 || onChange(value, event);
@@ -68,6 +75,7 @@ const useEditState = props => {
     value,
     onClick: handleClick,
     onChange: handleChange,
+    onFocus: handleFocus,
     onCancel: handleCancel,
     onSave: handleSave,
     onKeyDown: handleKeyDown,

package/cjs/Input/Input.d.ts

@@ -1,19 +1,10 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { InputBaseCommonProps } from '../internals/InputBase';
 import { PrependParameters } from '../internals/types/utils';
-import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, Size } from '../internals/types';
-export interface LocaleType {
-    unfilled: string;
-}
-export interface InputProps extends BoxProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
+import type { SanitizedInputProps, PropsWithoutChange, FormControlBaseProps } from '../internals/types';
+export interface InputProps extends InputBaseCommonProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
     /** The HTML input type */
     type?: string;
-    /** The HTML input id */
-    id?: string;
-    /** A component can have different sizes */
-    size?: Size;
-    /** Ref of input element */
-    inputRef?: React.Ref<any>;
     /**
      * The htmlSize attribute defines the width of the <input> element.
      *

package/cjs/Input/Input.js

@@ -6,13 +6,9 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
-var _FormGroup = require("../FormGroup");
+var _InputBase = _interopRequireDefault(require("../internals/InputBase"));
 var _InputGroup = require("../InputGroup/InputGroup");
-var _constants = require("../internals/constants");
-var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _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; }
@@ -27,79 +23,22 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Input', props);
   const inputGroup = (0, _react.useContext)(_InputGroup.InputGroupContext);
   const {
-    as = 'input',
-    className,
-    classPrefix = 'input',
     type = 'text',
-    disabled,
-    value,
-    defaultValue,
-    inputRef,
-    id,
-    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
     htmlSize,
-    plaintext,
-    placeholder,
-    readOnly,
-    onPressEnter,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    onChange,
+    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
+    classPrefix = 'input',
     ...rest
   } = propsWithDefaults;
-  const handleKeyDown = event => {
-    if (event.key === _constants.KEY_VALUES.ENTER) {
-      onPressEnter === null || onPressEnter === void 0 || onPressEnter(event);
-    }
-    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  };
-  const handleChange = event => {
-    var _event$target;
-    onChange === null || onChange === void 0 || onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  };
-  const {
-    withPrefix,
-    merge
-  } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    plaintext
-  }));
-  const {
-    controlId
-  } = (0, _FormGroup.useFormGroup)();
-
-  // Make the Input component display in plain text,
-  // and display default characters when there is no value.
-  if (plaintext) {
-    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
-      ref: ref,
-      localeKey: "unfilled",
-      placeholder: placeholder
-    }, typeof value === 'undefined' ? defaultValue : value);
-  }
-  const inputable = !disabled && !readOnly;
-  const eventProps = {};
-  if (inputable) {
-    eventProps.onChange = handleChange;
-    eventProps.onKeyDown = handleKeyDown;
-    eventProps.onFocus = (0, _utils.createChainedFunction)(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
-    eventProps.onBlur = (0, _utils.createChainedFunction)(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
-  }
-  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
-    as: as
-  }, rest, eventProps, {
-    ref: (0, _utils.mergeRefs)(ref, inputRef),
-    className: classes,
+  return /*#__PURE__*/_react.default.createElement(_InputBase.default, (0, _extends2.default)({
+    as: "input",
+    ref: ref,
+    classPrefix: classPrefix,
+    size: size,
     type: type,
-    id: id || controlId,
-    value: value,
-    defaultValue: defaultValue,
-    disabled: disabled,
-    readOnly: readOnly,
-    size: htmlSize,
-    placeholder: placeholder
-  }));
+    inputProps: {
+      size: htmlSize
+    }
+  }, rest));
 });
 Input.displayName = 'Input';
 var _default = exports.default = Input;

package/cjs/InputPicker/InputPicker.js

@@ -11,7 +11,6 @@ var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _remove = _interopRequireDefault(require("lodash/remove"));
 var _clone = _interopRequireDefault(require("lodash/clone"));
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _Tag = _interopRequireDefault(require("../Tag"));
 var _TextBox = _interopRequireDefault(require("./TextBox"));
@@ -19,7 +18,6 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _useInput = _interopRequireDefault(require("./hooks/useInput"));
 var _useData = _interopRequireDefault(require("./hooks/useData"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/Tree/utils");
 var _hooks = require("../internals/hooks");
 var _constants = require("../internals/constants");
@@ -43,8 +41,10 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
   const {
     as,
     appearance = 'default',
+    block,
     cleanable = true,
     cacheData = [],
+    className,
     classPrefix = 'picker',
     caretAs,
     data: controlledData = [],
@@ -571,19 +571,8 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
   const hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);
   const hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);
   const hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
-  const [pickerClasses, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
-    ...props,
-    classPrefix,
-    appearance,
-    hasValue,
-    name: 'input',
-    cleanable
-  });
-  const classes = merge(pickerClasses, {
-    [prefix`tag`]: multi,
-    [prefix(`${multi ? 'tag' : 'input'}-${size}`)]: size,
-    [prefix`focused`]: open,
-    [prefix`disabled-options`]: disabledOptions
+  const classes = merge(className, {
+    [prefix`focused`]: open
   });
   const searching = !!searchKeyword && open;
   const editable = searchable && !disabled && !loading;
@@ -602,26 +591,36 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     }, plaintextProps), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);
   }
   const placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);
-  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+  const triggerProps = {
+    ...(0, _pick.default)(props, _Picker.triggerPropKeys),
+    onEnter: (0, _utils3.createChainedFunction)(handleEnter, onEnter),
+    onEntered: onEntered,
+    onExit: (0, _utils3.createChainedFunction)(handleExit, onExit),
+    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited)
+  };
+  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({
     id: id,
     multiple: multi,
-    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
+    name: multi ? 'tag' : 'input',
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
+    as: as,
+    triggerProps: triggerProps,
     ref: triggerRef,
     trigger: "active",
-    onEnter: (0, _utils3.createChainedFunction)(handleEnter, onEnter),
-    onEntered: onEntered,
-    onExit: (0, _utils3.createChainedFunction)(handleExit, onExit),
-    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
     speaker: renderPopup,
-    placement: placement
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
-    as: as,
-    className: classes,
+    placement: placement,
+    rootRef: root,
     style: style,
+    size: size,
+    classPrefix: classPrefix,
+    className: classes,
+    responsive: searchable === false,
     onClick: focus,
     onKeyDown: onPickerKeyDown,
-    ref: root
-  }, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys])), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {
+    "data-disabled-options": disabledOptions
+  }, rest), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {
     loading: loading,
     label: label,
     appearance: appearance,
@@ -654,7 +653,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     onBlur: onBlur,
     onFocus: handleFocus,
     onChange: handleSearch
-  })));
+  }));
 });
 InputPicker.displayName = 'InputPicker';
 var _default = exports.default = InputPicker;

package/cjs/Link/ExternalLinkIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExternalLinkIcon: (props: React.HTMLAttributes<SVGElement>) => React.JSX.Element;
+export default ExternalLinkIcon;

package/cjs/Link/ExternalLinkIcon.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+const ExternalLinkIcon = props => /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+  stroke: "currentColor",
+  fill: "currentColor",
+  strokeWidth: "0",
+  viewBox: "0 0 24 24",
+  height: "1em",
+  width: "1em",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/_react.default.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+}));
+var _default = exports.default = ExternalLinkIcon;

package/cjs/Link/Link.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SafeAnchorProps } from '../internals/SafeAnchor';
+export interface LinkProps extends SafeAnchorProps {
+    /** The icon to be displayed after the link */
+    anchorIcon?: React.ReactNode;
+    /** Determines in which cases link should have text-decoration: underline styles, hover by default */
+    underline?: 'always' | 'hover' | 'not-hover' | 'never';
+    /** Whether the link is external */
+    external?: boolean;
+    /** Whether to show the anchor icon */
+    showAnchorIcon?: boolean;
+}
+declare const Link: import("../internals/types").InternalRefForwardingComponent<"a", LinkProps, never> & Record<string, never>;
+export default Link;

package/cjs/Link/Link.js

@@ -0,0 +1,52 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _CustomProvider = require("../CustomProvider");
+var _SafeAnchor = _interopRequireDefault(require("../internals/SafeAnchor"));
+var _ExternalLinkIcon = _interopRequireDefault(require("./ExternalLinkIcon"));
+const Link = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Link', props);
+  const {
+    as,
+    anchorIcon,
+    classPrefix = 'link',
+    className,
+    children,
+    disabled,
+    underline,
+    showAnchorIcon,
+    external,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    prefix,
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  const icon = anchorIcon || /*#__PURE__*/_react.default.createElement(_ExternalLinkIcon.default, {
+    className: prefix('icon')
+  });
+  return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({
+    as: as,
+    ref: ref,
+    role: "link",
+    className: classes,
+    disabled: disabled,
+    target: external ? '_blank' : undefined,
+    rel: external ? 'noopener noreferrer' : undefined,
+    "data-underline": underline,
+    "data-disabled": disabled
+  }, rest), children, showAnchorIcon && icon);
+});
+Link.displayName = 'Link';
+var _default = exports.default = Link;

package/cjs/Link/index.d.ts

@@ -0,0 +1,4 @@
+import Link from './Link';
+export type { LinkProps } from './Link';
+export { Link };
+export default Link;

package/cjs/Link/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Link = _interopRequireDefault(require("./Link"));
+exports.Link = _Link.default;
+// export types
+// export components
+var _default = exports.default = _Link.default;

package/cjs/List/List.js

@@ -55,7 +55,9 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     register,
     sorting,
     handleEnd,
-    handleStart
+    handleStart,
+    handleTouchStart,
+    handleTouchEnd
   } = (0, _useSortHelper.default)({
     autoScroll,
     onSort,
@@ -83,7 +85,9 @@ const List = (0, _utils.forwardRef)((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
   }, rest), /*#__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 | null>;
     sorting: boolean;
     register: (item: ManagedItem) => {