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

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) => {

package/cjs/List/helper/useSortHelper.js

@@ -35,7 +35,7 @@ const useSortHelper = config => {
   /**
    * start dragging
    * */
-  const handlePress = (0, _react.useCallback)((mouseDownEvent, _targetNode, curManagedItem) => {
+  const handlePress = (0, _react.useCallback)((event, _targetNode, curManagedItem) => {
     var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;
     if (!isMounted()) return;
     // data
@@ -49,6 +49,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 = (0, _utils.getScrollingParent)(containerElement) || containerElement;
     const initScroll = {
@@ -84,17 +91,31 @@ const useSortHelper = config => {
       x: 0,
       y: 0
     });
-    const sortMouseMoveListener = (0, _on.default)(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) {
         (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate);
@@ -194,14 +215,22 @@ const useSortHelper = config => {
         node: activeNode,
         oldIndex: activeNodeOldIndex,
         newIndex: activeNodeNextIndex
-      }, mouseOverEvent);
-    }, {
-      passive: false
-    });
-    const sortMouseEndListener = (0, _on.default)(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) {
@@ -247,12 +276,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 = (0, _on.default)(window, 'mousemove', handleSortMove, {
       passive: false
     });
+    const sortMouseEndListener = (0, _on.default)(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 = (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({
@@ -260,7 +310,7 @@ const useSortHelper = config => {
       node: activeNode,
       oldIndex: activeNodeOldIndex,
       newIndex: activeNodeNextIndex
-    }, mouseDownEvent.nativeEvent);
+    }, event);
   }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
 
   /**
@@ -286,13 +336,56 @@ const useSortHelper = config => {
     }
   }, [getManagedItem, handlePress, pressDelay, sorting]);
 
+  /**
+   * Handle touch start for mobile devices
+   */
+  const handleTouchStart = (0, _react.useCallback)(touchStartEvent => {
+    const triggeredNode = touchStartEvent.target;
+    const targetNode = (0, _utils.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((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
    * */
-  const handleEnd = (0, _react.useCallback)(() => clearTimeout(pressTimer.current), []);
+  const handleEnd = (0, _react.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 = (0, _react.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/cjs/List/helper/utils.js

@@ -69,10 +69,18 @@ function getEdgeOffset(node, parent, offset) {
   return getEdgeOffset(node.parentNode, parent, nodeOffset);
 }
 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;
+  }
 }