rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/cjs/internals/Picker/Listbox.js

@@ -16,14 +16,14 @@ var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _ListItemGroup = _interopRequireDefault(require("./ListItemGroup"));
+var _useCombobox = _interopRequireDefault(require("./hooks/useCombobox"));
+var _Highlight = _interopRequireDefault(require("../../Highlight"));
 var _Windowing = require("../Windowing");
 var _symbols = require("../symbols");
 var _hooks = require("../hooks");
 var _utils = require("../utils");
 var _getDataGroupBy = require("../utils/getDataGroupBy");
-var _ListItemGroup = _interopRequireDefault(require("./ListItemGroup"));
-var _useCombobox = _interopRequireDefault(require("./hooks/useCombobox"));
-var _Highlight = _interopRequireDefault(require("../../Highlight"));
 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; }
 /**
@@ -56,20 +56,20 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     rowHeight = 36,
     rowGroupHeight = 48,
     query,
-    renderMenuGroup,
-    renderMenuItem,
+    renderOptionGroup,
+    renderOption,
     onGroupTitleClick,
     onSelect,
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge,
     rootPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const groupable = typeof groupBy !== 'undefined';
-  const classes = merge(className, withClassPrefix('items', {
+  const classes = merge(className, withPrefix('items', {
     grouped: groupable
   }));
   const {
@@ -166,7 +166,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         }),
         key: `group-${groupValue}`,
         onClick: handleGroupTitleClick.bind(null, groupValue)
-      }, renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue);
+      }, renderOptionGroup ? renderOptionGroup(groupValue, item) : groupValue);
     } else if ((0, _isUndefined.default)(value) && !(0, _isUndefined.default)(item[_symbols.RSUITE_PICKER_GROUP_KEY])) {
       throw Error(`valueKey "${valueKey}" is not defined in "data" : ${index} `);
     }
@@ -184,7 +184,7 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       value: value,
       classPrefix: listItemClassPrefix,
       onSelect: handleSelect.bind(null, item)
-    }, (0, _pickBy.default)(listItemProps, v => v !== undefined)), renderMenuItem ? renderMenuItem(label, item) : label);
+    }, (0, _pickBy.default)(listItemProps, v => v !== undefined)), renderOption ? renderOption(label, item) : label);
   };
   (0, _hooks.useMount)(() => {
     var _listRef$current, _listRef$current$scro;

package/cjs/internals/Picker/PickerIndicator.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
+import type { Size } from '../types';
 interface PickerIndicatorProps {
     loading?: boolean;
     caretAs?: React.ElementType | null;
     onClose?: (event: React.MouseEvent<HTMLElement>) => void;
     showCleanButton?: boolean;
     disabled?: boolean;
+    size?: Size;
     as?: React.ElementType;
 }
-declare const PickerIndicator: ({ loading, caretAs, onClose, showCleanButton, as: Component, disabled }: PickerIndicatorProps) => React.JSX.Element;
+declare const PickerIndicator: ({ loading, caretAs, onClose, showCleanButton, as: Component, disabled, size }: PickerIndicatorProps) => React.JSX.Element;
 export default PickerIndicator;

package/cjs/internals/Picker/PickerIndicator.js

@@ -18,7 +18,8 @@ const PickerIndicator = _ref => {
     onClose,
     showCleanButton,
     as: Component = _InputGroup.default.Addon,
-    disabled
+    disabled,
+    size
   } = _ref;
   const {
     getLocale
@@ -28,12 +29,13 @@ const PickerIndicator = _ref => {
   } = getLocale('common');
   const {
     prefix
-  } = (0, _hooks.useClassNames)('picker');
+  } = (0, _hooks.useStyles)('picker');
   const addon = () => {
     if (loading) {
       return /*#__PURE__*/_react.default.createElement(_Loader.default, {
         className: prefix('loader'),
-        "data-testid": "spinner"
+        "data-testid": "spinner",
+        size: size === 'xs' ? 'xs' : 'sm'
       });
     }
     if (showCleanButton && !disabled) {

package/cjs/internals/Picker/PickerPopup.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { WithAsProps } from '../types';
-import type { OverlayTriggerHandle } from './PickerToggleTrigger';
+import type { OverlayTriggerHandle } from '../Overlay';
 export interface PickerPopupProps extends WithAsProps {
     placement?: string;
     autoWidth?: boolean;
     children?: React.ReactNode;
-    target?: React.RefObject<OverlayTriggerHandle>;
+    target?: React.RefObject<OverlayTriggerHandle | null>;
     onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 declare const PickerPopup: import("../types").InternalRefForwardingComponent<"div", PickerPopupProps, never> & Record<string, never>;

package/cjs/internals/Picker/PickerPopup.js

@@ -6,38 +6,42 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
 var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
 var _hooks = require("../hooks");
 var _utils = require("../utils");
+var _ = require("./");
 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 omitProps = ['placement', 'arrowOffsetLeft', 'arrowOffsetTop', 'positionLeft', 'positionTop', 'getPositionInstance', 'getToggleInstance', 'autoWidth'];
+// Define an array of placements that require resizing
 const resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];
 const PickerPopup = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    placement
+  } = (0, _.useCombobox)();
   const {
     as: Component = 'div',
-    classPrefix = 'picker-popup',
     autoWidth,
     className,
-    placement = 'bottomStart',
+    classPrefix = 'picker-popup',
     target,
     ...rest
   } = props;
   const overlayRef = (0, _react.useRef)(null);
   const handleResize = (0, _hooks.useEventCallback)(() => {
     const instance = target === null || target === void 0 ? void 0 : target.current;
-    if (instance && resizePlacement.includes(placement)) {
-      instance.updatePosition();
+    if (instance && placement && resizePlacement.includes(placement)) {
+      var _instance$updatePosit;
+      (_instance$updatePosit = instance.updatePosition) === null || _instance$updatePosit === void 0 || _instance$updatePosit.call(instance);
     }
   });
+
+  // Use useElementResize hook to listen for element size changes
   (0, _hooks.useElementResize)((0, _react.useCallback)(() => overlayRef.current, []), handleResize);
   (0, _react.useEffect)(() => {
     const toggle = target === null || target === void 0 ? void 0 : target.current;
     if (autoWidth && toggle !== null && toggle !== void 0 && toggle.root) {
-      // Get the width value of the button,
-      // and then set it to the menu to make their width consistent.
+      // 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`);
@@ -45,16 +49,15 @@ const PickerPopup = (0, _utils.forwardRef)((props, ref) => {
     }
   }, [autoWidth, target, overlayRef]);
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    "data-testid": "picker-popup"
-  }, (0, _omit.default)(rest, omitProps), {
+    "data-testid": "picker-popup",
     ref: (0, _utils.mergeRefs)(overlayRef, ref),
     className: classes
-  }));
+  }, rest));
 });
 PickerPopup.displayName = 'PickerPopup';
 var _default = exports.default = PickerPopup;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ToggleButtonProps } from './ToggleButton';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { Placement, DataItemValue } from '../types';
-export interface PickerToggleProps<T = DataItemValue> extends ToggleButtonProps {
+import type { Placement, OptionValue } from '../types';
+export interface PickerToggleProps<T = OptionValue> extends ToggleButtonProps {
     active?: boolean;
     hasValue?: boolean;
     cleanable?: boolean;
@@ -31,5 +31,5 @@ export interface PickerToggleProps<T = DataItemValue> extends ToggleButtonProps
     focusItemValue?: T | null;
     onClean?: (event: React.MouseEvent) => void;
 }
-declare const PickerToggle: import("../types").InternalRefForwardingComponent<React.ForwardRefExoticComponent<import("../..").ButtonProps & React.RefAttributes<HTMLDivElement>>, PickerToggleProps<DataItemValue>, never> & Record<string, never>;
+declare const PickerToggle: import("../types").InternalRefForwardingComponent<React.ForwardRefExoticComponent<import("../..").ButtonProps & React.RefAttributes<HTMLDivElement>>, PickerToggleProps<OptionValue>, never> & Record<string, never>;
 export default PickerToggle;

package/cjs/internals/Picker/PickerToggle.js

@@ -33,20 +33,21 @@ const PickerToggle = (0, _utils.forwardRef)((props, ref) => {
     tabIndex = 0,
     inputValue: inputValueProp,
     focusItemValue,
-    onClean,
     placement = 'bottomStart',
     caretComponent,
     caretAs = caretComponent,
     label,
     name,
+    size,
+    onClean,
     ...rest
   } = props;
   const combobox = (0, _react.useRef)(null);
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     id,
     labelId,
@@ -60,7 +61,7 @@ const PickerToggle = (0, _utils.forwardRef)((props, ref) => {
     }
     return '';
   }, [inputValueProp]);
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     active
   }));
   const handleClean = (0, _hooks.useEventCallback)(event => {
@@ -81,6 +82,7 @@ const PickerToggle = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "combobox",
     id: id,
+    size: size,
     "aria-haspopup": popupType,
     "aria-expanded": active,
     "aria-disabled": disabled,
@@ -93,7 +95,9 @@ const PickerToggle = (0, _utils.forwardRef)((props, ref) => {
     disabled: disabled,
     tabIndex: disabled ? undefined : tabIndex,
     className: classes
-  }), /*#__PURE__*/_react.default.createElement(_Stack.default, null, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {
+  }), /*#__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",
     className: prefix('label'),
     id: labelId
@@ -120,6 +124,7 @@ const PickerToggle = (0, _utils.forwardRef)((props, ref) => {
   }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
     className: prefix`indicator`
   }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {
+    size: size,
     as: _react.default.Fragment,
     loading: loading,
     caretAs: caret ? Caret : null,

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

@@ -1,8 +1,6 @@
 import React from 'react';
-import { OverlayTriggerHandle, OverlayTriggerProps, OverlayTriggerType } from '../Overlay/OverlayTrigger';
-import { PositionChildProps } from '../Overlay/Position';
+import { OverlayTriggerProps, OverlayTriggerType } from '../Overlay/OverlayTrigger';
 import type { Placement, AnimationEventProps } from '../types';
-export type { OverlayTriggerHandle, PositionChildProps };
 export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker' | 'onOpen' | 'onClose'> {
     id?: string;
     /**
@@ -24,8 +22,9 @@ export interface ComboboxContextProps {
     id?: string;
     multiple?: boolean;
     hasLabel?: boolean;
+    placement?: Placement;
     popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
 }
-export declare const ComboboxContextContext: React.Context<ComboboxContextProps>;
+export declare const ComboboxContext: React.Context<ComboboxContextProps>;
 declare const PickerToggleTrigger: React.ForwardRefExoticComponent<PickerToggleTriggerProps & React.RefAttributes<any>>;
 export default PickerToggleTrigger;

package/cjs/internals/Picker/PickerToggleTrigger.js

@@ -3,17 +3,17 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.pickTriggerPropKeys = exports.omitTriggerPropKeys = exports.default = exports.ComboboxContextContext = void 0;
+exports.pickTriggerPropKeys = exports.omitTriggerPropKeys = exports.default = exports.ComboboxContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _OverlayTrigger = _interopRequireDefault(require("../Overlay/OverlayTrigger"));
 var _hooks = require("../hooks");
-var _utils = require("../utils");
-var _CustomProvider = require("../../CustomProvider");
+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 ComboboxContextContext = exports.ComboboxContextContext = /*#__PURE__*/_react.default.createContext({
+const ComboboxContext = exports.ComboboxContext = /*#__PURE__*/_react.default.createContext({
   popupType: 'listbox'
 });
 const PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
@@ -29,21 +29,20 @@ const PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref)
   } = props;
   const pickerTriggerProps = (0, _pick.default)(pickerProps, pickTriggerPropKeys);
   const pickerId = (0, _hooks.useUniqueId)('rs-', id);
-  const {
-    rtl
-  } = (0, _CustomProvider.useCustom)();
-  return /*#__PURE__*/_react.default.createElement(ComboboxContextContext.Provider, {
-    value: {
-      id: pickerId,
-      hasLabel: typeof pickerTriggerProps.label !== 'undefined',
-      multiple,
-      popupType
-    }
+  const comboboxContext = (0, _react.useMemo)(() => ({
+    id: pickerId,
+    hasLabel: typeof pickerTriggerProps.label !== 'undefined',
+    multiple,
+    placement,
+    popupType
+  }), [pickerId, multiple, placement, popupType]);
+  return /*#__PURE__*/_react.default.createElement(ComboboxContext.Provider, {
+    value: comboboxContext
   }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, rest, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
-    placement: (0, _utils.placementPolyfill)(placement, rtl),
+    placement: placement,
     speaker: speaker
   })));
 });

package/cjs/internals/Picker/SelectedElement.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("../../Badge"));
 var _utils = require("../utils");
 const SelectedElement = props => {
   const {
@@ -42,9 +43,10 @@ const SelectedElement = props => {
     }, item[labelKey], checkAll && locale !== null && locale !== void 0 && locale.checkAll ? ` (${locale.checkAll})` : ''), index === count - 1 ? null : /*#__PURE__*/_react.default.createElement("span", {
       className: prefix('value-separator')
     }, ","));
-  })), countable ? /*#__PURE__*/_react.default.createElement("span", {
+  })), countable ? /*#__PURE__*/_react.default.createElement(_Badge.default, {
     className: prefix('value-count'),
-    title: `${count}`
-  }, count > 99 ? '99+' : count) : null);
+    title: `${count}`,
+    content: count > 99 ? '99+' : count
+  }) : null);
 };
 var _default = exports.default = SelectedElement;

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

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

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

@@ -10,12 +10,14 @@ function useCombobox() {
     id,
     hasLabel,
     popupType,
-    multiple
-  } = (0, _react.useContext)(_PickerToggleTrigger.ComboboxContextContext);
+    multiple,
+    placement
+  } = (0, _react.useContext)(_PickerToggleTrigger.ComboboxContext);
   return {
     id,
     popupType,
     multiple,
+    placement,
     labelId: hasLabel ? `${id}-label` : undefined
   };
 }

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

@@ -1,9 +1,7 @@
-import { Placement } from '../../types';
 export interface PickerClassNameProps {
     name?: string;
     classPrefix: string;
     className?: string;
-    placement?: Placement;
     appearance?: 'default' | 'subtle';
     cleanable?: boolean;
     block?: boolean;

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

@@ -4,10 +4,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _hooks = require("../../hooks");
-var _utils = require("../../utils");
 /**
  * The className of the assembled Toggle is on the Picker.
  */
@@ -16,7 +14,6 @@ function usePickerClassName(props) {
     name,
     classPrefix,
     className,
-    placement,
     appearance,
     cleanable,
     block,
@@ -28,11 +25,10 @@ function usePickerClassName(props) {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', {
-    [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: placement,
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(name, appearance, 'toggle-wrapper', {
     'read-only': readOnly,
     'has-value': hasValue,
     cleanable,

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

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import type { OverlayTriggerHandle } from '../PickerToggleTrigger';
+import type { OverlayTriggerHandle } from '../../Overlay';
 import type { ListHandle } from '../../Windowing';
 /**
  * A hook of the exposed method of Picker
  */
 declare function usePickerRef(ref: any): {
-    trigger: import("react").RefObject<OverlayTriggerHandle>;
-    root: import("react").MutableRefObject<any>;
-    overlay: import("react").RefObject<HTMLElement>;
-    target: import("react").RefObject<HTMLElement>;
-    list: import("react").RefObject<ListHandle>;
-    searchInput: import("react").RefObject<HTMLInputElement>;
-    treeView: import("react").RefObject<HTMLDivElement>;
+    trigger: import("react").RefObject<OverlayTriggerHandle | null>;
+    root: import("react").RefObject<any>;
+    overlay: import("react").RefObject<HTMLElement | null>;
+    target: import("react").RefObject<HTMLElement | null>;
+    list: import("react").RefObject<ListHandle | null>;
+    searchInput: import("react").RefObject<HTMLInputElement | null>;
+    treeView: import("react").RefObject<HTMLDivElement | null>;
 };
 export default usePickerRef;

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

@@ -11,6 +11,6 @@ export { default as SelectedElement } from './SelectedElement';
 export { pickTriggerPropKeys, omitTriggerPropKeys } from './PickerToggleTrigger';
 export * from './hooks';
 export * from './utils';
-export type { OverlayTriggerHandle, PositionChildProps } from './PickerToggleTrigger';
+export type { OverlayTriggerHandle, PositionChildProps } from '../Overlay/types';
 export type { PickerToggleProps } from './PickerToggle';
 export type { PickerHandle } from './types';

package/cjs/internals/Plaintext/Plaintext.js

@@ -27,10 +27,10 @@ const Plaintext = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     empty: !children
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({

package/cjs/internals/Ripple/Ripple.js

@@ -47,8 +47,8 @@ const Ripple = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, prefix('pond'));
   const triggerRef = (0, _react.useRef)(null);
   const [rippling, setRippling] = (0, _react.useState)(false);
@@ -91,7 +91,7 @@ const Ripple = (0, _utils.forwardRef)((props, ref) => {
     } = props;
     return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, transitionRest, {
       ref: ref,
-      className: merge(withClassPrefix(), className),
+      className: merge(withPrefix(), className),
       style: position
     }));
   }));

package/cjs/internals/ScrollView/ScrollView.js

@@ -26,8 +26,8 @@ const ScrollView = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     scrollState,
     handleScroll,
@@ -38,7 +38,7 @@ const ScrollView = (0, _utils.forwardRef)((props, ref) => {
     width,
     ...style
   };
-  const bodyClasses = merge(className, withClassPrefix({
+  const bodyClasses = merge(className, withPrefix({
     shadow: scrollShadow,
     'thumb-top': scrollState === 'top',
     'thumb-middle': scrollState === 'middle',

package/cjs/internals/ScrollView/hooks/useScrollState.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare function useScrollState(scrollShadow?: boolean): {
-    scrollState: "bottom" | "top" | "middle" | null;
+    scrollState: "top" | "bottom" | "middle" | null;
     handleScroll: ((...args: any[]) => any) | undefined;
-    bodyRef: import("react").RefObject<HTMLDivElement>;
+    bodyRef: import("react").RefObject<HTMLDivElement | null>;
 };

package/cjs/internals/SearchBox/SearchBox.js

@@ -23,11 +23,11 @@ const SearchBox = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes

package/cjs/internals/StyledBox/StyledBox.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+import type { Size, Color } from '../types';
+export interface StyledBoxProps extends BoxProps {
+    /** Name of the Box */
+    name: string;
+    /** Size of the Box */
+    size?: Size | number | string;
+    /** Color of the Box */
+    color?: Color | React.CSSProperties['color'];
+}
+declare const StyledBox: import("../types").InternalRefForwardingComponent<"div", StyledBoxProps, never> & Record<string, never>;
+export default StyledBox;

package/cjs/internals/StyledBox/StyledBox.js

@@ -0,0 +1,28 @@
+'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 _Box = _interopRequireDefault(require("../Box"));
+var _utils = require("../utils");
+const StyledBox = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    as,
+    color,
+    name,
+    style,
+    size,
+    ...rest
+  } = props;
+  const boxStyle = (0, _utils.mergeStyles)(style, (0, _utils.getSizeStyle)(size, name), (0, _utils.getColorStyle)(color, name));
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    ref: ref,
+    style: boxStyle
+  }, rest));
+});
+StyledBox.displayName = 'StyledBox';
+var _default = exports.default = StyledBox;

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

@@ -0,0 +1,4 @@
+import StyledBox from './StyledBox';
+export type { StyledBoxProps } from './StyledBox';
+export { StyledBox };
+export default StyledBox;

package/cjs/internals/StyledBox/index.js

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

package/cjs/internals/Windowing/AutoSizer.js

@@ -80,10 +80,7 @@ const AutoSizer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: className,
     ref: (0, _utils.mergeRefs)(rootRef, ref),
-    style: {
-      ...outerStyle,
-      ...style
-    }
+    style: (0, _utils.mergeStyles)(outerStyle, style)
   }, rest), children(childParams));
 });
 AutoSizer.displayName = 'AutoSizer';