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

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

@@ -1,6 +1,43 @@
+import type { Placement } from '../types';
 export type CursorPosition = {
     top: number;
     left: number;
     clientTop: number;
     clientLeft: number;
 };
+export interface PositionType {
+    placement: Placement;
+    positionLeft?: number;
+    positionTop?: number;
+    arrowOffsetLeft?: number;
+    arrowOffsetTop?: number;
+}
+export interface UtilProps {
+    placement: Placement;
+    preventOverflow: boolean;
+    padding: number;
+}
+export interface Dimensions {
+    width: number;
+    height: number;
+    scrollX: number;
+    scrollY: number;
+}
+export interface OverlayTriggerHandle {
+    root?: HTMLElement | null;
+    updatePosition: () => void;
+    open: (delay?: number) => void;
+    close: (delay?: number) => void;
+    getState: () => {
+        open?: boolean;
+    };
+}
+export interface PositionChildProps {
+    className?: string;
+    dataAttributes?: Record<string, string>;
+    placement: Placement;
+    left?: number;
+    top?: number;
+    arrowOffsetLeft?: number;
+    arrowOffsetTop?: number;
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckboxProps } from '../../Checkbox';
-import type { WithAsProps } from '../types';
-export interface ListCheckItemProps extends WithAsProps, Omit<CheckboxProps, 'onSelect'> {
+import type { WithAsProps, PropsWithoutSelect } from '../types';
+export interface ListCheckItemProps extends WithAsProps, PropsWithoutSelect<CheckboxProps> {
     active?: boolean;
     checkboxAs?: React.ElementType | string;
     focus?: boolean;

package/esm/internals/Picker/ListCheckItem.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import useCombobox from "./hooks/useCombobox.js";
 import Checkbox from "../../Checkbox/index.js";
-import { useClassNames, useEventCallback } from "../hooks/index.js";
+import { useStyles, useEventCallback } from "../hooks/index.js";
 import { forwardRef } from "../utils/index.js";
 const ListCheckItem = forwardRef((props, ref) => {
   const {
@@ -43,11 +43,11 @@ const ListCheckItem = forwardRef((props, ref) => {
     id
   } = useCombobox();
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     rootPrefix
-  } = useClassNames(classPrefix);
-  const checkboxItemClasses = withClassPrefix({
+  } = useStyles(classPrefix);
+  const checkboxItemClasses = withPrefix({
     focus
   });
   const checkboxProps = {

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
-export interface ListItemProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../types';
+export interface ListItemProps extends WithAsProps, HTMLPropsWithoutSelect {
     active?: boolean;
     disabled?: boolean;
     value?: string | number;

package/esm/internals/Picker/ListItem.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import useCombobox from "./hooks/useCombobox.js";
 import { forwardRef } from "../utils/index.js";
-import { useClassNames, useEventCallback } from "../hooks/index.js";
+import { useStyles, useEventCallback } from "../hooks/index.js";
 const ListItem = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
@@ -30,11 +30,11 @@ const ListItem = forwardRef((props, ref) => {
     }
   });
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     rootPrefix
-  } = useClassNames(classPrefix);
-  const classes = withClassPrefix({
+  } = useStyles(classPrefix);
+  const classes = withPrefix({
     active,
     focus,
     disabled

package/esm/internals/Picker/ListItemGroup.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import ArrowDownIcon from '@rsuite/icons/ArrowDown';
 const ListItemGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -12,11 +12,11 @@ const ListItemGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "group"
   }, rest, {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ListProps, ListHandle } from '../Windowing';
 import { RSUITE_PICKER_GROUP_KEY } from '../symbols';
-import { StandardProps, ItemDataType, DataProps } from '../types';
-interface InnerItemDataType extends ItemDataType {
+import type { StandardProps, Option, DataProps, HTMLPropsWithoutSelect } from '../types';
+interface InnerOption extends Option {
     [RSUITE_PICKER_GROUP_KEY]?: boolean;
 }
 /**
@@ -12,7 +12,7 @@ interface InnerItemDataType extends ItemDataType {
  * Props for the Listbox component.
  * @template Multiple - Whether multiple selection is enabled.
  */
-export interface ListboxProps<Multiple = false> extends StandardProps, Partial<DataProps<InnerItemDataType>>, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface ListboxProps<Multiple = false> extends StandardProps, Partial<DataProps<InnerOption>>, HTMLPropsWithoutSelect {
     groupBy?: string;
     disabledItemValues?: any[];
     activeItemValues?: any[];
@@ -40,14 +40,14 @@ export interface ListboxProps<Multiple = false> extends StandardProps, Partial<D
      * @param item - The selected item.
      * @returns The rendered React node.
      */
-    renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
+    renderOption?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
     /**
      * Custom function to render a menu group.
      * @param title - The title of the group.
      * @param item - The group item.
      * @returns The rendered React node.
      */
-    renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
+    renderOptionGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
     /**
      * Event handler for selecting an option.
      * @param value - The selected value.

package/esm/internals/Picker/Listbox.js

@@ -11,14 +11,14 @@ import scrollTop from 'dom-lib/scrollTop';
 import getHeight from 'dom-lib/getHeight';
 import get from 'lodash/get';
 import classNames from 'classnames';
+import ListItemGroup from "./ListItemGroup.js";
+import useCombobox from "./hooks/useCombobox.js";
+import Highlight from "../../Highlight/index.js";
 import { List, AutoSizer, VariableSizeList } from "../Windowing/index.js";
 import { RSUITE_PICKER_GROUP_KEY } from "../symbols.js";
-import { useClassNames, useMount, useEventCallback } from "../hooks/index.js";
+import { useStyles, useMount, useEventCallback } from "../hooks/index.js";
 import { shallowEqual, mergeRefs } from "../utils/index.js";
 import { KEY_GROUP_TITLE } from "../utils/getDataGroupBy.js";
-import ListItemGroup from "./ListItemGroup.js";
-import useCombobox from "./hooks/useCombobox.js";
-import Highlight from "../../Highlight/index.js";
 
 /**
  * Props for the Listbox component.
@@ -50,20 +50,20 @@ const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     rowHeight = 36,
     rowGroupHeight = 48,
     query,
-    renderMenuGroup,
-    renderMenuItem,
+    renderOptionGroup,
+    renderOption,
     onGroupTitleClick,
     onSelect,
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     prefix,
     merge,
     rootPrefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const groupable = typeof groupBy !== 'undefined';
-  const classes = merge(className, withClassPrefix('items', {
+  const classes = merge(className, withPrefix('items', {
     grouped: groupable
   }));
   const {
@@ -160,7 +160,7 @@ const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }),
         key: `group-${groupValue}`,
         onClick: handleGroupTitleClick.bind(null, groupValue)
-      }, renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue);
+      }, renderOptionGroup ? renderOptionGroup(groupValue, item) : groupValue);
     } else if (isUndefined(value) && !isUndefined(item[RSUITE_PICKER_GROUP_KEY])) {
       throw Error(`valueKey "${valueKey}" is not defined in "data" : ${index} `);
     }
@@ -178,7 +178,7 @@ const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
       value: value,
       classPrefix: listItemClassPrefix,
       onSelect: handleSelect.bind(null, item)
-    }, pickBy(listItemProps, v => v !== undefined)), renderMenuItem ? renderMenuItem(label, item) : label);
+    }, pickBy(listItemProps, v => v !== undefined)), renderOption ? renderOption(label, item) : label);
   };
   useMount(() => {
     var _listRef$current, _listRef$current$scro;

package/esm/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/esm/internals/Picker/PickerIndicator.js

@@ -4,7 +4,7 @@ import Icon from '@rsuite/icons/Icon';
 import InputGroup from "../../InputGroup/index.js";
 import CloseButton from "../CloseButton/index.js";
 import Loader from "../../Loader/index.js";
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 const PickerIndicator = _ref => {
   let {
@@ -13,7 +13,8 @@ const PickerIndicator = _ref => {
     onClose,
     showCleanButton,
     as: Component = InputGroup.Addon,
-    disabled
+    disabled,
+    size
   } = _ref;
   const {
     getLocale
@@ -23,12 +24,13 @@ const PickerIndicator = _ref => {
   } = getLocale('common');
   const {
     prefix
-  } = useClassNames('picker');
+  } = useStyles('picker');
   const addon = () => {
     if (loading) {
       return /*#__PURE__*/React.createElement(Loader, {
         className: prefix('loader'),
-        "data-testid": "spinner"
+        "data-testid": "spinner",
+        size: size === 'xs' ? 'xs' : 'sm'
       });
     }
     if (showCleanButton && !disabled) {

package/esm/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/esm/internals/Picker/PickerPopup.js

@@ -1,37 +1,41 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useRef, useCallback, useEffect } from 'react';
-import omit from 'lodash/omit';
 import addStyle from 'dom-lib/addStyle';
 import getWidth from 'dom-lib/getWidth';
-import { useElementResize, useClassNames, useEventCallback } from "../hooks/index.js";
+import { useElementResize, useStyles, useEventCallback } from "../hooks/index.js";
 import { forwardRef, mergeRefs } from "../utils/index.js";
 import { getDOMNode } from "../utils/index.js";
-const omitProps = ['placement', 'arrowOffsetLeft', 'arrowOffsetTop', 'positionLeft', 'positionTop', 'getPositionInstance', 'getToggleInstance', 'autoWidth'];
+import { useCombobox } from "./index.js";
+// Define an array of placements that require resizing
 const resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];
 const PickerPopup = forwardRef((props, ref) => {
+  const {
+    placement
+  } = useCombobox();
   const {
     as: Component = 'div',
-    classPrefix = 'picker-popup',
     autoWidth,
     className,
-    placement = 'bottomStart',
+    classPrefix = 'picker-popup',
     target,
     ...rest
   } = props;
   const overlayRef = useRef(null);
   const handleResize = 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
   useElementResize(useCallback(() => overlayRef.current, []), handleResize);
   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 = getWidth(getDOMNode(toggle.root));
       if (overlayRef.current) {
         addStyle(overlayRef.current, 'min-width', `${width}px`);
@@ -39,16 +43,15 @@ const PickerPopup = forwardRef((props, ref) => {
     }
   }, [autoWidth, target, overlayRef]);
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({
-    "data-testid": "picker-popup"
-  }, omit(rest, omitProps), {
+    "data-testid": "picker-popup",
     ref: mergeRefs(overlayRef, ref),
     className: classes
-  }));
+  }, rest));
 });
 PickerPopup.displayName = 'PickerPopup';
 export default PickerPopup;

package/esm/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/esm/internals/Picker/PickerToggle.js

@@ -7,7 +7,7 @@ import PickerLabel from "./PickerLabel.js";
 import Plaintext from "../Plaintext/index.js";
 import Stack from "../../Stack/index.js";
 import useCombobox from "./hooks/useCombobox.js";
-import { useClassNames, useEventCallback, useToggleCaret } from "../hooks/index.js";
+import { useStyles, useEventCallback, useToggleCaret } from "../hooks/index.js";
 import { forwardRef, mergeRefs } from "../utils/index.js";
 const PickerToggle = forwardRef((props, ref) => {
   const {
@@ -26,20 +26,21 @@ const PickerToggle = forwardRef((props, ref) => {
     tabIndex = 0,
     inputValue: inputValueProp,
     focusItemValue,
-    onClean,
     placement = 'bottomStart',
     caretComponent,
     caretAs = caretComponent,
     label,
     name,
+    size,
+    onClean,
     ...rest
   } = props;
   const combobox = useRef(null);
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     id,
     labelId,
@@ -53,7 +54,7 @@ const PickerToggle = forwardRef((props, ref) => {
     }
     return '';
   }, [inputValueProp]);
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     active
   }));
   const handleClean = useEventCallback(event => {
@@ -74,6 +75,7 @@ const PickerToggle = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "combobox",
     id: id,
+    size: size,
     "aria-haspopup": popupType,
     "aria-expanded": active,
     "aria-disabled": disabled,
@@ -86,7 +88,9 @@ const PickerToggle = forwardRef((props, ref) => {
     disabled: disabled,
     tabIndex: disabled ? undefined : tabIndex,
     className: classes
-  }), /*#__PURE__*/React.createElement(Stack, null, label && /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(PickerLabel, {
+  }), /*#__PURE__*/React.createElement(Stack, {
+    className: prefix('stack')
+  }, label && /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(PickerLabel, {
     as: "span",
     className: prefix('label'),
     id: labelId
@@ -113,6 +117,7 @@ const PickerToggle = forwardRef((props, ref) => {
   }, children) : null), /*#__PURE__*/React.createElement(Stack.Item, {
     className: prefix`indicator`
   }, /*#__PURE__*/React.createElement(PickerIndicator, {
+    size: size,
     as: React.Fragment,
     loading: loading,
     caretAs: caret ? Caret : null,

package/esm/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/esm/internals/Picker/PickerToggleTrigger.js

@@ -1,14 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
 import OverlayTrigger from "../Overlay/OverlayTrigger.js";
 import { useUniqueId } from "../hooks/index.js";
-import { placementPolyfill } from "../utils/index.js";
-import { useCustom } from "../../CustomProvider/index.js";
 export const omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
 export const pickTriggerPropKeys = [...omitTriggerPropKeys, 'disabled', 'plaintext', 'readOnly', 'loading', 'label'];
-export const ComboboxContextContext = /*#__PURE__*/React.createContext({
+export const ComboboxContext = /*#__PURE__*/React.createContext({
   popupType: 'listbox'
 });
 const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -24,21 +22,20 @@ const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const pickerTriggerProps = pick(pickerProps, pickTriggerPropKeys);
   const pickerId = useUniqueId('rs-', id);
-  const {
-    rtl
-  } = useCustom();
-  return /*#__PURE__*/React.createElement(ComboboxContextContext.Provider, {
-    value: {
-      id: pickerId,
-      hasLabel: typeof pickerTriggerProps.label !== 'undefined',
-      multiple,
-      popupType
-    }
+  const comboboxContext = useMemo(() => ({
+    id: pickerId,
+    hasLabel: typeof pickerTriggerProps.label !== 'undefined',
+    multiple,
+    placement,
+    popupType
+  }), [pickerId, multiple, placement, popupType]);
+  return /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
+    value: comboboxContext
   }, /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, rest, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
-    placement: placementPolyfill(placement, rtl),
+    placement: placement,
     speaker: speaker
   })));
 });

package/esm/internals/Picker/SelectedElement.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Badge from "../../Badge/index.js";
 import { reactToString } from "../utils/index.js";
 const SelectedElement = props => {
   const {
@@ -37,9 +38,10 @@ const SelectedElement = props => {
     }, item[labelKey], checkAll && locale !== null && locale !== void 0 && locale.checkAll ? ` (${locale.checkAll})` : ''), index === count - 1 ? null : /*#__PURE__*/React.createElement("span", {
       className: prefix('value-separator')
     }, ","));
-  })), countable ? /*#__PURE__*/React.createElement("span", {
+  })), countable ? /*#__PURE__*/React.createElement(Badge, {
     className: prefix('value-count'),
-    title: `${count}`
-  }, count > 99 ? '99+' : count) : null);
+    title: `${count}`,
+    content: count > 99 ? '99+' : count
+  }) : null);
 };
 export default SelectedElement;

package/esm/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/esm/internals/Picker/hooks/useCombobox.js

@@ -1,17 +1,19 @@
 'use client';
 import { useContext } from 'react';
-import { ComboboxContextContext } from "../PickerToggleTrigger.js";
+import { ComboboxContext } from "../PickerToggleTrigger.js";
 function useCombobox() {
   const {
     id,
     hasLabel,
     popupType,
-    multiple
-  } = useContext(ComboboxContextContext);
+    multiple,
+    placement
+  } = useContext(ComboboxContext);
   return {
     id,
     popupType,
     multiple,
+    placement,
     labelId: hasLabel ? `${id}-label` : undefined
   };
 }

package/esm/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/esm/internals/Picker/hooks/usePickerClassName.js

@@ -1,8 +1,6 @@
 'use client';
-import kebabCase from 'lodash/kebabCase';
 import omit from 'lodash/omit';
-import { useClassNames } from "../../hooks/index.js";
-import { placementPolyfill } from "../../utils/index.js";
+import { useStyles } from "../../hooks/index.js";
 /**
  * The className of the assembled Toggle is on the Picker.
  */
@@ -11,7 +9,6 @@ function usePickerClassName(props) {
     name,
     classPrefix,
     className,
-    placement,
     appearance,
     cleanable,
     block,
@@ -23,11 +20,10 @@ function usePickerClassName(props) {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', {
-    [`placement-${kebabCase(placementPolyfill(placement))}`]: placement,
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(name, appearance, 'toggle-wrapper', {
     'read-only': readOnly,
     'has-value': hasValue,
     cleanable,