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

package/cjs/Toggle/Toggle.js

@@ -39,6 +39,8 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     defaultChecked,
     size = 'md',
     locale,
+    label = children,
+    labelPlacement = 'end',
     onChange,
     ...rest
   } = propsWithDefaults;
@@ -55,10 +57,10 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     loading
   }));
   const inner = checked ? checkedChildren : unCheckedChildren;
-  const label = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
+  const innerLabel = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
   const labelId = (0, _hooks.useUniqueId)('rs-label');
   const innerId = inner ? labelId + '-inner' : undefined;
-  const labelledby = children ? labelId : innerId;
+  const labelledby = label ? labelId : innerId;
   const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)(rest);
   const handleInputChange = (0, _hooks.useEventCallback)(e => {
     if (disabled || readOnly || loading) {
@@ -71,12 +73,13 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     onChange === null || onChange === void 0 || onChange(checked, e);
   });
   if (plaintext) {
-    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, null, inner || label);
+    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, null, inner || innerLabel);
   }
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-placement": labelPlacement
   }, restProps), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, {
     ref: inputRef,
     type: "checkbox",
@@ -90,19 +93,19 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-labelledby": labelledby,
-    "aria-label": labelledby ? undefined : label,
+    "aria-label": labelledby ? undefined : innerLabel,
     "aria-busy": loading || undefined
   })), /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('presentation')
-  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('track')
+  }, inner && /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('inner'),
     id: innerId
   }, inner), loading && /*#__PURE__*/_react.default.createElement(_Loader.default, {
     className: prefix('loader')
-  })), children && /*#__PURE__*/_react.default.createElement("span", {
+  })), label && /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('label'),
     id: labelId
-  }, children));
+  }, label));
 });
 Toggle.displayName = 'Toggle';
 var _default = exports.default = Toggle;

package/cjs/TreePicker/TreePicker.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _useTreeWithChildren = _interopRequireDefault(require("../Tree/hooks/useTreeWithChildren"));
@@ -15,7 +14,6 @@ var _useFlattenTree = _interopRequireDefault(require("../Tree/hooks/useFlattenTr
 var _useFocusState = _interopRequireDefault(require("./hooks/useFocusState"));
 var _useExpandTree = _interopRequireDefault(require("../Tree/hooks/useExpandTree"));
 var _TreeView = _interopRequireDefault(require("../Tree/TreeView"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _utils2 = require("../Tree/utils");
@@ -47,6 +45,8 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
     defaultExpandItemValues = [],
     expandItemValues: controlledExpandItemValues,
     id,
+    block,
+    className,
     locale,
     labelKey = 'label',
     placeholder,
@@ -253,27 +253,26 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
       }
     }
   }
-  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
-    ...props,
-    classPrefix,
-    appearance,
-    hasValue: hasValidValue,
-    name: 'tree',
-    cleanable
-  });
-  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    as: as,
     id: id,
+    name: "tree",
+    block: block,
+    disabled: disabled,
+    appearance: appearance,
     popupType: "tree",
-    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
+    triggerProps: {
+      ...(0, _pick.default)(props, _Picker.triggerPropKeys),
+      ...triggerProps
+    },
     ref: trigger,
     placement: placement,
-    speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/_react.default.createElement(_Box.default, {
-    as: as,
-    className: classes,
+    speaker: renderTreeView,
+    rootRef: root,
     style: style,
-    ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys, 'cascade']), {
+    classPrefix: classPrefix,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -286,7 +285,7 @@ const TreePicker = (0, _utils.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';
 var _default = exports.default = TreePicker;

package/cjs/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';
@@ -41,9 +41,12 @@ export * from './FormHelpText';
 export * from './FormControl';
 export * from './Toggle';
 export * from './Input';
+export * from './Textarea';
 export * from './MaskedInput';
 export * from './InputNumber';
 export * from './InputGroup';
+export * from './PasswordInput';
+export * from './PasswordStrengthMeter';
 export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './Radio';

package/cjs/index.js

@@ -26,12 +26,6 @@ Object.keys(_Highlight).forEach(function (key) {
   if (key in exports && exports[key] === _Highlight[key]) return;
   exports[key] = _Highlight[key];
 });
-var _SafeAnchor = require("./SafeAnchor");
-Object.keys(_SafeAnchor).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _SafeAnchor[key]) return;
-  exports[key] = _SafeAnchor[key];
-});
 var _Kbd = require("./Kbd");
 Object.keys(_Kbd).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -206,6 +200,12 @@ Object.keys(_Steps).forEach(function (key) {
   if (key in exports && exports[key] === _Steps[key]) return;
   exports[key] = _Steps[key];
 });
+var _Link = require("./Link");
+Object.keys(_Link).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Link[key]) return;
+  exports[key] = _Link[key];
+});
 var _Form = require("./Form");
 Object.keys(_Form).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -260,6 +260,12 @@ Object.keys(_Input).forEach(function (key) {
   if (key in exports && exports[key] === _Input[key]) return;
   exports[key] = _Input[key];
 });
+var _Textarea = require("./Textarea");
+Object.keys(_Textarea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Textarea[key]) return;
+  exports[key] = _Textarea[key];
+});
 var _MaskedInput = require("./MaskedInput");
 Object.keys(_MaskedInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -278,6 +284,18 @@ Object.keys(_InputGroup).forEach(function (key) {
   if (key in exports && exports[key] === _InputGroup[key]) return;
   exports[key] = _InputGroup[key];
 });
+var _PasswordInput = require("./PasswordInput");
+Object.keys(_PasswordInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PasswordInput[key]) return;
+  exports[key] = _PasswordInput[key];
+});
+var _PasswordStrengthMeter = require("./PasswordStrengthMeter");
+Object.keys(_PasswordStrengthMeter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PasswordStrengthMeter[key]) return;
+  exports[key] = _PasswordStrengthMeter[key];
+});
 var _Checkbox = require("./Checkbox");
 Object.keys(_Checkbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/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/cjs/internals/Box/Box.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _utils = require("../utils");
-var _forwardRef = require("../utils/forwardRef");
+var _forwardRef = require("../utils/react/forwardRef");
 var _utils2 = require("./utils");
 /**
  * Box component is the base component for all components,

package/cjs/internals/Box/utils.js

@@ -29,7 +29,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/cjs/internals/InputBase/InputBase.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+import { PrependParameters } from '../types/utils';
+import type { PropsWithoutChange, FormControlBaseProps, Size } from '../types';
+export interface InputBaseLocaleType {
+    unfilled: string;
+}
+export interface InputBaseCommonProps extends BoxProps, PropsWithoutChange<FormControlBaseProps> {
+    /** A component can have different sizes */
+    size?: Size;
+    /** The HTML input id */
+    id?: string;
+    /** Ref of input element */
+    inputRef?: React.Ref<any>;
+    /** Is plaintext display mode */
+    plaintext?: boolean;
+    /** Input placeholder text */
+    placeholder?: string;
+}
+export interface InputBaseProps extends InputBaseCommonProps {
+    /** Component element type */
+    as?: React.ElementType;
+    /** Class prefix for component */
+    classPrefix?: string;
+    /** HTML input props */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Event handler for focus event */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Event handler for blur event */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Event handler for keydown event */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Input specific props like handling enter key for Input */
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** The callback function in which value is changed. */
+    onChange?: PrependParameters<React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>, [
+        value: string
+    ]>;
+}
+/**
+ * The `InputBase` component serves as the base for both Input and Textarea components.
+ * It provides common functionality for both components.
+ */
+declare const InputBase: import("../types").InternalRefForwardingComponent<"input" | "textarea", InputBaseProps, never> & Record<string, never>;
+export default InputBase;

package/cjs/internals/InputBase/InputBase.js

@@ -0,0 +1,96 @@
+'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 = _interopRequireWildcard(require("react"));
+var _Plaintext = _interopRequireDefault(require("../Plaintext"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _utils = require("../utils");
+var _FormGroup = require("../../FormGroup");
+var _InputGroup = require("../../InputGroup/InputGroup");
+var _constants = require("../constants");
+var _hooks = require("../hooks");
+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; }
+/**
+ * The `InputBase` component serves as the base for both Input and Textarea components.
+ * It provides common functionality for both components.
+ */
+const InputBase = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    as,
+    className,
+    classPrefix,
+    disabled,
+    value,
+    defaultValue,
+    inputRef,
+    id,
+    size,
+    plaintext,
+    placeholder,
+    readOnly,
+    inputProps,
+    onPressEnter,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
+  const inputGroup = (0, _react.useContext)(_InputGroup.InputGroupContext);
+  const {
+    controlId
+  } = (0, _FormGroup.useFormGroup)();
+  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 || 'input');
+  const classes = merge(className, withPrefix(size, {
+    plaintext
+  }));
+
+  // Make the 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,
+    ref: (0, _utils.mergeRefs)(ref, inputRef),
+    className: classes,
+    id: id || controlId,
+    value: value,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    readOnly: readOnly,
+    placeholder: placeholder
+  }, inputProps, eventProps, rest));
+});
+InputBase.displayName = 'InputBase';
+var _default = exports.default = InputBase;

package/cjs/internals/InputBase/index.d.ts

@@ -0,0 +1,3 @@
+import InputBase from './InputBase';
+export type { InputBaseProps, InputBaseCommonProps, InputBaseLocaleType } from './InputBase';
+export default InputBase;

package/cjs/internals/InputBase/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _InputBase = _interopRequireDefault(require("./InputBase"));
+var _default = exports.default = _InputBase.default;

package/cjs/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/cjs/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/cjs/internals/Overlay/OverlayTrigger.js

@@ -14,7 +14,6 @@ var _Overlay = _interopRequireDefault(require("./Overlay"));
 var _OverlayProvider = require("./OverlayProvider");
 var _hooks = require("../hooks");
 var _utils = require("../utils");
-var _ReactChildren = require("../utils/ReactChildren");
 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; }
 function mergeEvents(events, props) {
@@ -85,6 +84,7 @@ const OverlayTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     placement = 'bottomStart',
     speaker,
     rootClose = true,
+    overlayAs: OverlayComponent,
     onClick,
     onMouseOver,
     onMouseMove,
@@ -357,7 +357,7 @@ const OverlayTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const triggerElement = (0, _react.useMemo)(() => {
     if (typeof children === 'function') {
       return children(triggerEvents, triggerRef);
-    } else if ((0, _ReactChildren.isFragment)(children) || ! /*#__PURE__*/(0, _react.isValidElement)(children)) {
+    } else if ((0, _utils.isFragment)(children) || ! /*#__PURE__*/(0, _react.isValidElement)(children)) {
       return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
         ref: triggerRef,
         "aria-describedby": controlId
@@ -370,7 +370,12 @@ const OverlayTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       ...mergeEvents(triggerEvents, childElement.props)
     });
   }, [children, controlId, triggerEvents]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, triggerElement, /*#__PURE__*/_react.default.createElement(Portal, null, renderOverlay()));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, triggerElement, OverlayComponent ? /*#__PURE__*/_react.default.createElement(OverlayComponent, {
+    open: open,
+    onClose: handleClose,
+    placement: "bottom",
+    speaker: speaker
+  }) : /*#__PURE__*/_react.default.createElement(Portal, null, renderOverlay()));
 });
 OverlayTrigger.displayName = 'OverlayTrigger';
 var _default = exports.default = OverlayTrigger;

package/cjs/internals/Picker/Listbox.js

@@ -63,13 +63,12 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withPrefix,
     prefix,
     merge,
     rootPrefix
   } = (0, _hooks.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 {
@@ -191,19 +190,18 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     const itemIndex = (0, _findIndex.default)(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 = (0, _utils.mergeStyles)(style, {
+    '--rs-picker-listbox-max-height': (0, _utils.getCssValue)(maxHeight)
+  });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     role: "listbox",
     id: `${id}-${popupType}`,
     "aria-labelledby": labelId,
-    "aria-multiselectable": multiple
-  }, rest, {
+    "aria-multiselectable": multiple,
     className: classes,
     ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),
-    style: {
-      ...style,
-      maxHeight
-    }
-  }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
+    style: styles
+  }, rest), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
     defaultHeight: maxHeight,
     style: {
       width: 'auto',

package/cjs/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/cjs/internals/Picker/PickerDrawer.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = exports.PickerDrawer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Drawer = _interopRequireDefault(require("../../Drawer"));
+const speakerRef = () => {
+  // This is just a no-op callback to satisfy the type requirements
+};
+const PickerDrawer = exports.PickerDrawer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    placement = 'bottom',
+    speaker,
+    onClose,
+    open,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_Drawer.default, (0, _extends2.default)({
+    placement: placement,
+    onClose: onClose,
+    open: open,
+    ref: ref
+  }, rest), typeof speaker === 'function' ? speaker({
+    placement
+  }, speakerRef) : speaker);
+});
+PickerDrawer.displayName = 'PickerDrawer';
+var _default = exports.default = PickerDrawer;

package/cjs/internals/Picker/PickerPopup.js

@@ -17,7 +17,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];
 const PickerPopup = (0, _utils.forwardRef)((props, ref) => {
   const {
-    placement
+    placement,
+    breakpoint
   } = (0, _.useCombobox)();
   const {
     as: Component = 'div',
@@ -44,7 +45,7 @@ const PickerPopup = (0, _utils.forwardRef)((props, ref) => {
       // Get the width of the button and set it to the menu to make them consistent
       const width = (0, _getWidth.default)((0, _utils.getDOMNode)(toggle.root));
       if (overlayRef.current) {
-        (0, _addStyle.default)(overlayRef.current, 'min-width', `${width}px`);
+        (0, _addStyle.default)(overlayRef.current, '--rs-picker-min-width', `${width}px`);
       }
     }
   }, [autoWidth, target, overlayRef]);
@@ -56,7 +57,8 @@ const PickerPopup = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     "data-testid": "picker-popup",
     ref: (0, _utils.mergeRefs)(overlayRef, ref),
-    className: classes
+    className: classes,
+    "data-breakpoint": breakpoint
   }, rest));
 });
 PickerPopup.displayName = 'PickerPopup';

package/cjs/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