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

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

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;

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

package/cjs/internals/Picker/PickerToggle.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
 var _react = _interopRequireWildcard(require("react"));
 var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
 var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
@@ -14,6 +15,7 @@ var _Stack = _interopRequireDefault(require("../../Stack"));
 var _useCombobox = _interopRequireDefault(require("./hooks/useCombobox"));
 var _hooks = require("../hooks");
 var _utils = require("../utils");
+var _PickerToggleTrigger = require("./PickerToggleTrigger");
 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; }
 const PickerToggle = (0, _utils.forwardRef)((props, ref) => {
@@ -30,6 +32,7 @@ const PickerToggle = (0, _utils.forwardRef)((props, ref) => {
     hasValue,
     loading = false,
     cleanable,
+    countable,
     tabIndex = 0,
     inputValue: inputValueProp,
     focusItemValue,
@@ -89,13 +92,17 @@ const PickerToggle = (0, _utils.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: (0, _utils.mergeRefs)(combobox, ref),
     disabled: disabled,
     tabIndex: disabled ? undefined : tabIndex,
     className: classes
-  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {
+  }, (0, _omit2.default)(rest, _PickerToggleTrigger.triggerPropKeys)), /*#__PURE__*/_react.default.createElement(_Stack.default, {
     className: prefix('stack')
   }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {
     as: "span",

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

package/cjs/internals/Picker/PickerToggleTrigger.js

@@ -3,48 +3,94 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.pickTriggerPropKeys = exports.omitTriggerPropKeys = exports.default = exports.ComboboxContext = void 0;
+exports.triggerPropKeys = exports.pickerCommonPropKeys = exports.overlayPropKeys = exports.default = exports.PickerToggleTrigger = exports.ComboboxContext = 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 _Box = _interopRequireDefault(require("../Box"));
+var _PickerDrawer = _interopRequireDefault(require("./PickerDrawer"));
 var _OverlayTrigger = _interopRequireDefault(require("../Overlay/OverlayTrigger"));
 var _hooks = require("../hooks");
+var _useBreakpointValue = require("../../useBreakpointValue");
 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; }
-const omitTriggerPropKeys = exports.omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
-const pickTriggerPropKeys = exports.pickTriggerPropKeys = [...omitTriggerPropKeys, 'disabled', 'plaintext', 'readOnly', 'loading', 'label'];
+const overlayPropKeys = exports.overlayPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
+const pickerCommonPropKeys = exports.pickerCommonPropKeys = ['disabled', 'plaintext', 'readOnly', 'loading', 'label'];
+const triggerPropKeys = exports.triggerPropKeys = [...overlayPropKeys, ...pickerCommonPropKeys];
 const ComboboxContext = exports.ComboboxContext = /*#__PURE__*/_react.default.createContext({
   popupType: 'listbox'
 });
-const PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const PickerToggleTrigger = exports.PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
-    pickerProps,
-    speaker,
-    placement,
-    trigger = 'click',
+    appearance,
+    as,
+    block,
+    children,
+    className,
+    classPrefix = 'picker',
+    disabled,
     id,
     multiple,
+    name,
+    triggerProps,
+    placement,
     popupType = 'listbox',
+    rootRef,
+    speaker,
+    style,
+    size,
+    trigger = 'click',
+    responsive = true,
+    onKeyDown,
+    onClick,
     ...rest
   } = props;
-  const pickerTriggerProps = (0, _pick.default)(pickerProps, pickTriggerPropKeys);
+  const pickerTriggerProps = (0, _pick.default)(triggerProps, triggerPropKeys);
   const pickerId = (0, _hooks.useUniqueId)('rs-', id);
+  const breakpoint = (0, _useBreakpointValue.useBreakpointValue)({
+    xsOnly: 'xs'
+  }, {
+    enabled: responsive
+  });
+  // Only use the breakpoint value if not disabled
+  const effectiveBreakpoint = disabled ? undefined : breakpoint;
   const comboboxContext = (0, _react.useMemo)(() => ({
     id: pickerId,
     hasLabel: typeof pickerTriggerProps.label !== 'undefined',
     multiple,
     placement,
+    breakpoint: effectiveBreakpoint,
     popupType
-  }), [pickerId, multiple, placement, popupType]);
+  }), [pickerId, multiple, placement, effectiveBreakpoint, popupType]);
+  const {
+    withPrefix,
+    merge
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(ComboboxContext.Provider, {
     value: comboboxContext
-  }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
     placement: placement,
-    speaker: speaker
-  })));
+    speaker: speaker,
+    overlayAs: effectiveBreakpoint === 'xs' ? _PickerDrawer.default : undefined
+  }), /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    className: classes,
+    style: style,
+    ref: rootRef,
+    "data-picker": name,
+    "data-variant": appearance,
+    "data-size": size,
+    "data-disabled": disabled || undefined,
+    "data-block": block || undefined,
+    "data-testid": "picker",
+    onKeyDown: onKeyDown,
+    onClick: onClick
+  }, (0, _omit.default)(rest, [...triggerPropKeys])), children)));
 });
 PickerToggleTrigger.displayName = 'PickerToggleTrigger';
 var _default = exports.default = PickerToggleTrigger;

package/cjs/internals/Picker/hooks/index.d.ts

@@ -3,4 +3,3 @@ export { default as useCombobox } from './useCombobox';
 export { default as useFocusItemValue } from './useFocusItemValue';
 export { default as useToggleKeyDownEvent } from './useToggleKeyDownEvent';
 export { default as useSearch } from './useSearch';
-export { default as usePickerClassName } from './usePickerClassName';

package/cjs/internals/Picker/hooks/index.js

@@ -3,7 +3,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.useToggleKeyDownEvent = exports.useSearch = exports.usePickerRef = exports.usePickerClassName = exports.useFocusItemValue = exports.useCombobox = void 0;
+exports.useToggleKeyDownEvent = exports.useSearch = exports.usePickerRef = exports.useFocusItemValue = exports.useCombobox = void 0;
 var _usePickerRef = _interopRequireDefault(require("./usePickerRef"));
 exports.usePickerRef = _usePickerRef.default;
 var _useCombobox = _interopRequireDefault(require("./useCombobox"));
@@ -13,6 +13,4 @@ exports.useFocusItemValue = _useFocusItemValue.default;
 var _useToggleKeyDownEvent = _interopRequireDefault(require("./useToggleKeyDownEvent"));
 exports.useToggleKeyDownEvent = _useToggleKeyDownEvent.default;
 var _useSearch = _interopRequireDefault(require("./useSearch"));
-exports.useSearch = _useSearch.default;
-var _usePickerClassName = _interopRequireDefault(require("./usePickerClassName"));
-exports.usePickerClassName = _usePickerClassName.default;
+exports.useSearch = _useSearch.default;

package/cjs/internals/Picker/hooks/useCombobox.d.ts

@@ -3,6 +3,7 @@ declare function useCombobox(): {
     popupType: "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
     multiple: boolean | undefined;
     placement: import("../../types").Placement | undefined;
+    breakpoint: string | undefined;
     labelId: string | undefined;
 };
 export default useCombobox;

package/cjs/internals/Picker/hooks/useCombobox.js

@@ -11,13 +11,15 @@ function useCombobox() {
     hasLabel,
     popupType,
     multiple,
-    placement
+    placement,
+    breakpoint
   } = (0, _react.useContext)(_PickerToggleTrigger.ComboboxContext);
   return {
     id,
     popupType,
     multiple,
     placement,
+    breakpoint,
     labelId: hasLabel ? `${id}-label` : undefined
   };
 }