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

package/esm/TreePicker/TreePicker.js

@@ -2,7 +2,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
-import omit from 'lodash/omit';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import useTreeWithChildren from "../Tree/hooks/useTreeWithChildren.js";
@@ -10,11 +9,10 @@ import useFlattenTree from "../Tree/hooks/useFlattenTree.js";
 import useFocusState from "./hooks/useFocusState.js";
 import useExpandTree from "../Tree/hooks/useExpandTree.js";
 import TreeView from "../Tree/TreeView.js";
-import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { getActiveItem, getTreeActiveNode } from "../Tree/utils/index.js";
-import { PickerToggle, PickerPopup, PickerToggleTrigger, usePickerClassName, usePickerRef, onMenuKeyDown, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from "../internals/Picker/index.js";
+import { PickerToggle, PickerPopup, PickerToggleTrigger, usePickerRef, onMenuKeyDown, triggerPropKeys, useToggleKeyDownEvent } from "../internals/Picker/index.js";
 import { TreeProvider, useTreeImperativeHandle } from "../internals/Tree/TreeProvider.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -40,6 +38,8 @@ const TreePicker = forwardRef((props, ref) => {
     defaultExpandItemValues = [],
     expandItemValues: controlledExpandItemValues,
     id,
+    block,
+    className,
     locale,
     labelKey = 'label',
     placeholder,
@@ -246,27 +246,26 @@ const TreePicker = forwardRef((props, ref) => {
       }
     }
   }
-  const [classes, usedClassNamePropKeys] = usePickerClassName({
-    ...props,
-    classPrefix,
-    appearance,
-    hasValue: hasValidValue,
-    name: 'tree',
-    cleanable
-  });
-  return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
+  return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    as: as,
     id: id,
+    name: "tree",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
     popupType: "tree",
-    pickerProps: pick(props, pickTriggerPropKeys),
+    triggerProps: {
+      ...pick(props, triggerPropKeys),
+      ...triggerProps
+    },
     ref: trigger,
     placement: placement,
-    speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/React.createElement(Box, {
-    as: as,
-    className: classes,
+    speaker: renderTreeView,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys, 'cascade']), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -279,7 +278,7 @@ const TreePicker = forwardRef((props, ref) => {
     placement: placement,
     inputValue: value,
     focusItemValue: focusItemValue
-  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
+  }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 TreePicker.displayName = 'TreePicker';
 export default TreePicker;

package/esm/index.d.ts

@@ -2,7 +2,6 @@ export * from './Text';
 export * from './Heading';
 export * from './HeadingGroup';
 export * from './Highlight';
-export * from './SafeAnchor';
 export * from './Kbd';
 export * from './Button';
 export * from './IconButton';
@@ -32,6 +31,7 @@ export * from './Sidenav';
 export * from './Breadcrumb';
 export * from './Pagination';
 export * from './Steps';
+export * from './Link';
 export * from './Form';
 export * from './FormStack';
 export * from './FormGroup';

package/esm/index.js

@@ -5,7 +5,6 @@ export * from "./Text/index.js";
 export * from "./Heading/index.js";
 export * from "./HeadingGroup/index.js";
 export * from "./Highlight/index.js";
-export * from "./SafeAnchor/index.js";
 export * from "./Kbd/index.js";
 
 // Buttons
@@ -50,6 +49,7 @@ export * from "./Sidenav/index.js";
 export * from "./Breadcrumb/index.js";
 export * from "./Pagination/index.js";
 export * from "./Steps/index.js";
+export * from "./Link/index.js";
 
 // Form
 // --------------------------------------------------------

package/esm/internals/Box/Box.d.ts

@@ -26,6 +26,10 @@ export interface BoxProps extends WithAsProps {
     /** Box size */
     w?: CSS['width'];
     h?: CSS['height'];
+    minw?: CSS['minWidth'];
+    maxw?: CSS['maxWidth'];
+    minh?: CSS['minHeight'];
+    maxh?: CSS['maxHeight'];
     /** Box Color */
     c?: ColorScheme | CSS['color'];
     /** Box Border */

package/esm/internals/Box/Box.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { mergeStyles } from "../utils/index.js";
-import { forwardRef } from "../utils/forwardRef.js";
+import { forwardRef } from "../utils/react/forwardRef.js";
 import { getBoxCSSVariables, extractBoxProps, omitBoxProps } from "./utils.js";
 /**
  * Box component is the base component for all components,

package/esm/internals/Box/utils.js

@@ -26,7 +26,11 @@ const marginStyleMap = {
 // Mapping for size properties to their CSS style equivalents
 const sizeStyleMap = {
   w: 'width',
-  h: 'height'
+  h: 'height',
+  minw: 'minWidth',
+  maxw: 'maxWidth',
+  minh: 'minHeight',
+  maxh: 'maxHeight'
 };
 
 // Derive box property keys from style mappings

package/esm/internals/Overlay/Modal.d.ts

@@ -36,7 +36,7 @@ export interface BaseModalProps extends Omit<BoxProps, 'children'>, AnimationEve
     /** Called when Modal is displayed */
     onOpen?: () => void;
     /** Called when Modal is closed */
-    onClose?: (event: React.SyntheticEvent) => void;
+    onClose?: (event?: React.SyntheticEvent) => void;
     container?: HTMLElement | (() => HTMLElement);
     containerClassName?: string;
     backdropTransitionTimeout?: number;

package/esm/internals/Overlay/OverlayTrigger.d.ts

@@ -20,7 +20,7 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     containerPadding?: number;
     /** display element */
     speaker: React.ReactElement | ((props: PositionChildProps & Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'onMouseEnter' | 'onMouseLeave'> & {
-        onClose: (delay?: number) => NodeJS.Timeout | void;
+        onClose?: (delay?: number) => NodeJS.Timeout | void;
     }, ref: React.RefCallback<HTMLElement>) => React.ReactElement);
     /** Prevent floating element overflow */
     preventOverflow?: boolean;
@@ -42,6 +42,9 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     readOnly?: boolean;
     /**  Set the `id` on `<Overlay>` and `aria-describedby` on `<OverlayTrigger>` */
     controlId?: string;
+    /** Whether speaker to follow the cursor */
+    followCursor?: boolean;
+    overlayAs?: React.ElementType;
     /** Lose Focus callback function */
     onBlur?: React.FocusEventHandler;
     /** Click on the callback function */
@@ -60,8 +63,6 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     onOpen?: () => void;
     /** Callback fired when close component */
     onClose?: (cause?: OverlayCloseCause) => void;
-    /** Whether speaker to follow the cursor */
-    followCursor?: boolean;
 }
 /**
  * The reason that triggers closing of an overlay

package/esm/internals/Overlay/OverlayTrigger.js

@@ -9,7 +9,7 @@ import Overlay from "./Overlay.js";
 import { useOverlay } from "./OverlayProvider.js";
 import { usePortal, useControlled } from "../hooks/index.js";
 import { createChainedFunction, isOneOf } from "../utils/index.js";
-import { isFragment } from "../utils/ReactChildren.js";
+import { isFragment } from "../utils/index.js";
 function mergeEvents(events, props) {
   if (events === void 0) {
     events = {};
@@ -79,6 +79,7 @@ const OverlayTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     placement = 'bottomStart',
     speaker,
     rootClose = true,
+    overlayAs: OverlayComponent,
     onClick,
     onMouseOver,
     onMouseMove,
@@ -364,7 +365,12 @@ const OverlayTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
       ...mergeEvents(triggerEvents, childElement.props)
     });
   }, [children, controlId, triggerEvents]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement, /*#__PURE__*/React.createElement(Portal, null, renderOverlay()));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement, OverlayComponent ? /*#__PURE__*/React.createElement(OverlayComponent, {
+    open: open,
+    onClose: handleClose,
+    placement: "bottom",
+    speaker: speaker
+  }) : /*#__PURE__*/React.createElement(Portal, null, renderOverlay()));
 });
 OverlayTrigger.displayName = 'OverlayTrigger';
 export default OverlayTrigger;

package/esm/internals/Picker/Listbox.js

@@ -17,7 +17,7 @@ import Highlight from "../../Highlight/index.js";
 import { List, AutoSizer, VariableSizeList } from "../Windowing/index.js";
 import { RSUITE_PICKER_GROUP_KEY } from "../symbols.js";
 import { useStyles, useMount, useEventCallback } from "../hooks/index.js";
-import { shallowEqual, mergeRefs } from "../utils/index.js";
+import { shallowEqual, mergeRefs, mergeStyles, getCssValue } from "../utils/index.js";
 import { KEY_GROUP_TITLE } from "../utils/getDataGroupBy.js";
 
 /**
@@ -57,13 +57,12 @@ const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withPrefix,
     prefix,
     merge,
     rootPrefix
   } = useStyles(classPrefix);
   const groupable = typeof groupBy !== 'undefined';
-  const classes = merge(className, withPrefix('items', {
+  const classes = merge(className, rootPrefix('picker-listbox'), prefix('items', {
     grouped: groupable
   }));
   const {
@@ -185,19 +184,18 @@ const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     const itemIndex = findIndex(filteredItems, item => item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]));
     (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 || _listRef$current$scro.call(_listRef$current, itemIndex);
   });
+  const styles = mergeStyles(style, {
+    '--rs-picker-listbox-max-height': getCssValue(maxHeight)
+  });
   return /*#__PURE__*/React.createElement("div", _extends({
     role: "listbox",
     id: `${id}-${popupType}`,
     "aria-labelledby": labelId,
-    "aria-multiselectable": multiple
-  }, rest, {
+    "aria-multiselectable": multiple,
     className: classes,
     ref: mergeRefs(menuBodyContainerRef, ref),
-    style: {
-      ...style,
-      maxHeight
-    }
-  }), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
+    style: styles
+  }, rest), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
     defaultHeight: maxHeight,
     style: {
       width: 'auto',

package/esm/internals/Picker/PickerDrawer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DrawerProps } from '../../Drawer';
+import type { OverlayTriggerProps } from '../Overlay/OverlayTrigger';
+export interface PickerDrawerProps extends DrawerProps {
+    speaker: OverlayTriggerProps['speaker'];
+}
+export declare const PickerDrawer: React.ForwardRefExoticComponent<PickerDrawerProps & React.RefAttributes<any>>;
+export default PickerDrawer;

package/esm/internals/Picker/PickerDrawer.js

@@ -0,0 +1,26 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Drawer from "../../Drawer/index.js";
+const speakerRef = () => {
+  // This is just a no-op callback to satisfy the type requirements
+};
+export const PickerDrawer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    placement = 'bottom',
+    speaker,
+    onClose,
+    open,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Drawer, _extends({
+    placement: placement,
+    onClose: onClose,
+    open: open,
+    ref: ref
+  }, rest), typeof speaker === 'function' ? speaker({
+    placement
+  }, speakerRef) : speaker);
+});
+PickerDrawer.displayName = 'PickerDrawer';
+export default PickerDrawer;

package/esm/internals/Picker/PickerPopup.js

@@ -11,7 +11,8 @@ import { useCombobox } from "./index.js";
 const resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];
 const PickerPopup = forwardRef((props, ref) => {
   const {
-    placement
+    placement,
+    breakpoint
   } = useCombobox();
   const {
     as: Component = 'div',
@@ -38,7 +39,7 @@ const PickerPopup = forwardRef((props, ref) => {
       // Get the width of the button and set it to the menu to make them consistent
       const width = getWidth(getDOMNode(toggle.root));
       if (overlayRef.current) {
-        addStyle(overlayRef.current, 'min-width', `${width}px`);
+        addStyle(overlayRef.current, '--rs-picker-min-width', `${width}px`);
       }
     }
   }, [autoWidth, target, overlayRef]);
@@ -50,7 +51,8 @@ const PickerPopup = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Component, _extends({
     "data-testid": "picker-popup",
     ref: mergeRefs(overlayRef, ref),
-    className: classes
+    className: classes,
+    "data-breakpoint": breakpoint
   }, rest));
 });
 PickerPopup.displayName = 'PickerPopup';

package/esm/internals/Picker/PickerToggle.d.ts

@@ -6,6 +6,7 @@ export interface PickerToggleProps<T = OptionValue> extends ToggleButtonProps {
     active?: boolean;
     hasValue?: boolean;
     cleanable?: boolean;
+    countable?: boolean;
     caret?: boolean;
     /**
      * Custom caret component

package/esm/internals/Picker/PickerToggle.js

@@ -1,5 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _omit from "lodash/omit";
 import React, { useRef, useMemo } from 'react';
 import ToggleButton from "./ToggleButton.js";
 import PickerIndicator from "./PickerIndicator.js";
@@ -9,6 +10,7 @@ import Stack from "../../Stack/index.js";
 import useCombobox from "./hooks/useCombobox.js";
 import { useStyles, useEventCallback, useToggleCaret } from "../hooks/index.js";
 import { forwardRef, mergeRefs } from "../utils/index.js";
+import { triggerPropKeys } from "./PickerToggleTrigger.js";
 const PickerToggle = forwardRef((props, ref) => {
   const {
     active,
@@ -23,6 +25,7 @@ const PickerToggle = forwardRef((props, ref) => {
     hasValue,
     loading = false,
     cleanable,
+    countable,
     tabIndex = 0,
     inputValue: inputValueProp,
     focusItemValue,
@@ -82,13 +85,17 @@ const PickerToggle = forwardRef((props, ref) => {
     "aria-controls": id ? `${id}-${popupType}` : undefined,
     "aria-labelledby": labelId,
     "aria-describedby": id ? `${id}-describe` : undefined,
-    "aria-activedescendant": active && focusItemValue ? `${id}-opt-${focusItemValue}` : undefined
-  }, rest, {
+    "aria-activedescendant": active && focusItemValue ? `${id}-opt-${focusItemValue}` : undefined,
+    "data-has-value": hasValue,
+    "data-cleanable": cleanable,
+    "data-countable": countable,
+    "data-size": size,
+    "data-readonly": readOnly,
     ref: mergeRefs(combobox, ref),
     disabled: disabled,
     tabIndex: disabled ? undefined : tabIndex,
     className: classes
-  }), /*#__PURE__*/React.createElement(Stack, {
+  }, _omit(rest, triggerPropKeys)), /*#__PURE__*/React.createElement(Stack, {
     className: prefix('stack')
   }, label && /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(PickerLabel, {
     as: "span",

package/esm/internals/Picker/PickerToggleTrigger.d.ts

@@ -1,30 +1,70 @@
 import React from 'react';
 import { OverlayTriggerProps, OverlayTriggerType } from '../Overlay/OverlayTrigger';
-import type { Placement, AnimationEventProps } from '../types';
-export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker' | 'onOpen' | 'onClose'> {
+import type { Placement, Size, AnimationEventProps } from '../types';
+export interface PickerToggleTriggerProps
+/**
+ * Interface representing the properties for the PickerToggleTrigger component.
+ * Extends AnimationEventProps and OverlayTriggerProps with specific pick/omit logic.
+ */
+ extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'onClose' | 'onOpen' | 'speaker'> {
+    /** Appearance style for the component, default or subtle */
+    appearance?: 'default' | 'subtle';
+    /** Element type to render as */
+    as?: React.ElementType;
+    /** If true, the component will occupy the full width of its container */
+    block?: boolean;
+    /** The child element to be rendered */
+    children: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom class prefix */
+    classPrefix?: string;
+    /** Disable the component */
+    disabled?: boolean;
+    /** Unique identifier */
     id?: string;
+    /** If true, multiple selection is allowed */
+    multiple?: boolean;
+    /** Name attribute for the component */
+    name?: string;
+    /** Controls the open state of the picker */
+    open?: boolean;
+    /** Additional properties for the picker */
+    triggerProps: any;
+    /** Placement of the component */
+    placement?: Placement;
     /**
-     * Identifies the combobox has having a popout, and indicates the type.
+     * Identifies the combobox as having a popout, and indicates the type.
      *
      * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
      */
     popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
-    multiple?: boolean;
-    placement?: Placement;
-    pickerProps: any;
-    open?: boolean;
+    /** Reference to the root element */
+    rootRef?: React.Ref<any>;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Trigger type for the overlay */
     trigger?: OverlayTriggerType | OverlayTriggerType[];
-    children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
+    /** Size of the component */
+    size?: Size;
+    /** Whether the component should be responsive */
+    responsive?: boolean;
+    /** Handler for keydown events */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    /** Handler for click events */
+    onClick?: (event: React.MouseEvent) => void;
 }
-export declare const omitTriggerPropKeys: string[];
-export declare const pickTriggerPropKeys: string[];
+export declare const overlayPropKeys: string[];
+export declare const pickerCommonPropKeys: string[];
+export declare const triggerPropKeys: string[];
 export interface ComboboxContextProps {
     id?: string;
     multiple?: boolean;
     hasLabel?: boolean;
     placement?: Placement;
+    breakpoint?: string;
     popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
 }
 export declare const ComboboxContext: React.Context<ComboboxContextProps>;
-declare const PickerToggleTrigger: React.ForwardRefExoticComponent<PickerToggleTriggerProps & React.RefAttributes<any>>;
+export declare const PickerToggleTrigger: React.ForwardRefExoticComponent<PickerToggleTriggerProps & React.RefAttributes<any>>;
 export default PickerToggleTrigger;