rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

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));

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

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

package/esm/List/helper/useSortHelper.js

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

package/esm/List/helper/utils.js

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