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

package/esm/Grid/Row.js

@@ -4,26 +4,8 @@ import React from 'react';
 import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
-import { BREAKPOINTS } from "../internals/constants/index.js";
-const getResponsiveGutterStyles = gutter => {
-  if (!gutter) {
-    return {};
-  }
-  if (typeof gutter !== 'object') {
-    return {
-      '--rs-grid-gutter': getCssValue(gutter)
-    };
-  }
-  return BREAKPOINTS.reduce((styles, breakpoint) => {
-    const breakpointValue = gutter[breakpoint];
-    if (!breakpointValue) return styles;
-    const newStyles = {
-      [`--rs-grid-gutter${breakpoint === 'xs' ? '' : `-${breakpoint}`}`]: getCssValue(breakpointValue)
-    };
-    return mergeStyles(styles, newStyles);
-  }, {});
-};
+import { forwardRef, mergeStyles } from "../internals/utils/index.js";
+import { getResponsiveGutterStyles } from "./utils/styles.js";
 /**
  * The Row component is used to create a row container that can contain Col components.
  * @see https://rsuitejs.com/components/grid

package/esm/Grid/types.d.ts

@@ -1,5 +1,6 @@
 export type RowAlignment = 'top' | 'middle' | 'bottom';
 export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+export type GutterType = number | string | [number | string, number | string];
 /** @deprecated Use new responsive props format instead */
 export interface DeprecatedColProps {
     /** @deprecated Use span={{ xs: number }} instead */

package/esm/Grid/utils/styles.d.ts

@@ -0,0 +1,6 @@
+import type { ResponsiveValue } from '../../internals/types';
+import type { GutterType } from '../types';
+/**
+ * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
+ */
+export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string>;

package/esm/Grid/utils/styles.js

@@ -0,0 +1,37 @@
+'use client';
+import isPlainObject from 'lodash/isPlainObject';
+import { BREAKPOINTS } from "../../internals/constants/index.js";
+import { mergeStyles, getCssValue } from "../../internals/utils/index.js";
+/**
+ * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
+ */
+export 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}`]: getCssValue(h),
+      [`--rs-grid-row-gutter${prefix}`]: getCssValue(v)
+    };
+  };
+
+  // Handle responsive object
+  if (isPlainObject(gutter)) {
+    return BREAKPOINTS.reduce((styles, breakpoint) => {
+      const value = gutter[breakpoint];
+      if (!value) return styles;
+      const prefix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
+      return mergeStyles(styles, processGutterValue(value, prefix));
+    }, {});
+  }
+
+  // Handle non-responsive value
+  return processGutterValue(gutter);
+};

package/esm/Image/Image.js

@@ -45,19 +45,14 @@ const Image = forwardRef((props, ref) => {
     shaded,
     zoomed
   }));
-  const imgProps = {
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
-  };
   const {
     imgSrc,
-    isLoading
+    isLoading,
+    onLoad,
+    onError
   } = useImage({
     src,
-    fallbackSrc,
-    ...imgProps
+    fallbackSrc
   });
   const styles = {
     ...style,
@@ -71,8 +66,14 @@ const Image = 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.createElement(ImageWrapper, {
       w: width,

package/esm/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/esm/Image/hooks/useImage.js

@@ -1,59 +1,36 @@
 'use client';
-import { useState, useEffect, useRef, useCallback } from 'react';
-import useIsomorphicLayoutEffect from "../../internals/hooks/useIsomorphicLayoutEffect.js";
+import { useState, useEffect } from 'react';
 export const useImage = props => {
   const {
     src,
-    fallbackSrc,
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
+    fallbackSrc
   } = props;
   const [imgSrc, setImgSrc] = useState(src || fallbackSrc || null);
   const [isLoading, setIsLoading] = useState(!!src);
   const [error, setError] = useState(false);
-  const imageRef = useRef(null);
   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 = 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]);
-  useIsomorphicLayoutEffect(() => {
-    loadImage();
-    return () => {
-      flush();
-    };
-  }, [loadImage]);
   return {
     imgSrc,
     isLoading,
-    error
+    error,
+    onLoad: handleLoad,
+    onError: handleError
   };
 };

package/esm/InlineEdit/InlineEdit.js

@@ -38,6 +38,7 @@ const InlineEdit = forwardRef((props, ref) => {
     onChange,
     onKeyDown,
     onClick,
+    onFocus,
     htmlProps
   } = useEditState({
     ...rest,
@@ -70,7 +71,8 @@ const InlineEdit = forwardRef((props, ref) => {
       disabled
     })),
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onFocus: onFocus
   }, htmlProps), renderChildren(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/React.createElement(EditableControls, {
     className: prefix('controls'),
     onSave: onSave,

package/esm/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/esm/InlineEdit/useEditState.js

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

package/esm/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/esm/Input/Input.js

@@ -1,14 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import Plaintext from "../internals/Plaintext/index.js";
-import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useFormGroup } from "../FormGroup/index.js";
+import InputBase from "../internals/InputBase/index.js";
 import { InputGroupContext } from "../InputGroup/InputGroup.js";
-import { KEY_VALUES } from "../internals/constants/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `<Input>` component is used to get user input in a text field.
@@ -21,79 +16,22 @@ const Input = forwardRef((props, ref) => {
   } = useCustom('Input', props);
   const inputGroup = useContext(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 === 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
-  } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    plaintext
-  }));
-  const {
-    controlId
-  } = useFormGroup();
-
-  // Make the Input component display in plain text,
-  // and display default characters when there is no value.
-  if (plaintext) {
-    return /*#__PURE__*/React.createElement(Plaintext, {
-      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 = createChainedFunction(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
-    eventProps.onBlur = createChainedFunction(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
-  }
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: as
-  }, rest, eventProps, {
-    ref: mergeRefs(ref, inputRef),
-    className: classes,
+  return /*#__PURE__*/React.createElement(InputBase, _extends({
+    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';
 export default Input;

package/esm/InputPicker/InputPicker.js

@@ -6,7 +6,6 @@ import isFunction from 'lodash/isFunction';
 import remove from 'lodash/remove';
 import clone from 'lodash/clone';
 import isArray from 'lodash/isArray';
-import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import Tag from "../Tag/index.js";
 import TextBox from "./TextBox.js";
@@ -14,7 +13,6 @@ import Stack from "../Stack/index.js";
 import useInput from "./hooks/useInput.js";
 import useData from "./hooks/useData.js";
 import Plaintext from "../internals/Plaintext/index.js";
-import Box from "../internals/Box/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
@@ -22,7 +20,7 @@ import { useTagContext } from "./InputPickerContext.js";
 import { convertSize } from "./utils.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, shallowEqual, getDataGroupBy, createChainedFunction, tplTransform, mergeRefs, isOneOf, mergeStyles } from "../internals/utils/index.js";
-import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
+import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, useSearch, usePickerRef, useToggleKeyDownEvent, triggerPropKeys } from "../internals/Picker/index.js";
 import { getPositionStyle } from "../internals/Overlay/Position.js";
 /**
  * Single item selector with text box input.
@@ -36,8 +34,10 @@ const InputPicker = forwardRef((props, ref) => {
   const {
     as,
     appearance = 'default',
+    block,
     cleanable = true,
     cacheData = [],
+    className,
     classPrefix = 'picker',
     caretAs,
     data: controlledData = [],
@@ -564,19 +564,8 @@ const InputPicker = forwardRef((props, ref) => {
   const hasSingleValue = !isNil(value) && isFunction(renderValue) && !isNil(itemNode);
   const hasMultiValue = isArray(value) && value.length > 0 && isFunction(renderValue) && !isNil(tagElements);
   const hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
-  const [pickerClasses, usedClassNamePropKeys] = 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;
@@ -595,26 +584,36 @@ const InputPicker = 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.createElement(PickerToggleTrigger, {
+  const triggerProps = {
+    ...pick(props, triggerPropKeys),
+    onEnter: createChainedFunction(handleEnter, onEnter),
+    onEntered: onEntered,
+    onExit: createChainedFunction(handleExit, onExit),
+    onExited: createChainedFunction(handleExited, onExited)
+  };
+  return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
     id: id,
     multiple: multi,
-    pickerProps: pick(props, pickTriggerPropKeys),
+    name: multi ? 'tag' : 'input',
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
+    as: as,
+    triggerProps: triggerProps,
     ref: triggerRef,
     trigger: "active",
-    onEnter: createChainedFunction(handleEnter, onEnter),
-    onEntered: onEntered,
-    onExit: createChainedFunction(handleExit, onExit),
-    onExited: createChainedFunction(handleExited, onExited),
     speaker: renderPopup,
-    placement: placement
-  }, /*#__PURE__*/React.createElement(Box, _extends({
-    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
-  }, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys])), /*#__PURE__*/React.createElement(PickerToggle, {
+    "data-disabled-options": disabledOptions
+  }, rest), /*#__PURE__*/React.createElement(PickerToggle, {
     loading: loading,
     label: label,
     appearance: appearance,
@@ -647,7 +646,7 @@ const InputPicker = forwardRef((props, ref) => {
     onBlur: onBlur,
     onFocus: handleFocus,
     onChange: handleSearch
-  })));
+  }));
 });
 InputPicker.displayName = 'InputPicker';
 export default InputPicker;

package/esm/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/esm/Link/ExternalLinkIcon.js

@@ -0,0 +1,18 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+const ExternalLinkIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  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.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0V0z"
+}), /*#__PURE__*/React.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"
+}));
+export default ExternalLinkIcon;

package/esm/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/esm/Link/Link.js

@@ -0,0 +1,47 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { forwardRef } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+import SafeAnchor from "../internals/SafeAnchor/index.js";
+import ExternalLinkIcon from "./ExternalLinkIcon.js";
+const Link = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Link', props);
+  const {
+    as,
+    anchorIcon,
+    classPrefix = 'link',
+    className,
+    children,
+    disabled,
+    underline,
+    showAnchorIcon,
+    external,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    prefix,
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const icon = anchorIcon || /*#__PURE__*/React.createElement(ExternalLinkIcon, {
+    className: prefix('icon')
+  });
+  return /*#__PURE__*/React.createElement(SafeAnchor, _extends({
+    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';
+export default Link;

package/esm/Link/index.d.ts

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

package/esm/Link/index.js

@@ -0,0 +1,8 @@
+'use client';
+import Link from "./Link.js";
+
+// export types
+
+// export components
+export { Link };
+export default Link;

package/esm/List/List.js

@@ -48,7 +48,9 @@ const List = forwardRef((props, ref) => {
     register,
     sorting,
     handleEnd,
-    handleStart
+    handleStart,
+    handleTouchStart,
+    handleTouchEnd
   } = useSortHelper({
     autoScroll,
     onSort,
@@ -76,7 +78,9 @@ const List = forwardRef((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
   }, rest), /*#__PURE__*/React.createElement(ListContext.Provider, {
     value: contextValue
   }, children));