@base-ui/react 1.1.0 → 1.2.0

package/avatar/image/useImageLoadingStatus.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 interface UseImageLoadingStatusOptions {
-  referrerPolicy?: React.HTMLAttributeReferrerPolicy;
-  crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
+  referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
+  crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'] | undefined;
 }
 export declare function useImageLoadingStatus(src: string | undefined, {
   referrerPolicy,

package/avatar/root/AvatarRoot.js

@@ -24,9 +24,9 @@ const AvatarRoot = exports.AvatarRoot = /*#__PURE__*/React.forwardRef(function A
     ...elementProps
   } = componentProps;
   const [imageLoadingStatus, setImageLoadingStatus] = React.useState('idle');
-  const state = React.useMemo(() => ({
+  const state = {
     imageLoadingStatus
-  }), [imageLoadingStatus]);
+  };
   const contextValue = React.useMemo(() => ({
     imageLoadingStatus,
     setImageLoadingStatus

package/button/Button.d.ts

@@ -18,7 +18,7 @@ export interface ButtonProps extends NativeButtonProps, BaseUIComponentProps<'bu
    * Whether the button should be focusable when disabled.
    * @default false
    */
-  focusableWhenDisabled?: boolean;
+  focusableWhenDisabled?: boolean | undefined;
 }
 export declare namespace Button {
   type State = ButtonState;

package/button/Button.js

@@ -32,9 +32,9 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef(function Button(co
     focusableWhenDisabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/checkbox/indicator/CheckboxIndicator.d.ts

@@ -17,7 +17,7 @@ export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', Che
    * Whether to keep the element in the DOM when the checkbox is not checked.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace CheckboxIndicator {
   type State = CheckboxIndicatorState;

package/checkbox/indicator/CheckboxIndicator.js

@@ -30,14 +30,15 @@ const CheckboxIndicator = exports.CheckboxIndicator = /*#__PURE__*/React.forward
   const rootState = (0, _CheckboxRootContext.useCheckboxRootContext)();
   const rendered = rootState.checked || rootState.indeterminate;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(rendered);
   const indicatorRef = React.useRef(null);
-  const state = React.useMemo(() => ({
+  const state = {
     ...rootState,
     transitionStatus
-  }), [rootState, transitionStatus]);
+  };
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: rendered,
     ref: indicatorRef,
@@ -53,9 +54,8 @@ const CheckboxIndicator = exports.CheckboxIndicator = /*#__PURE__*/React.forward
     ..._stateAttributesMapping.transitionStatusMapping,
     ..._constants.fieldValidityMapping
   }), [baseStateAttributesMapping]);
-  const shouldRender = keepMounted || rendered;
+  const shouldRender = keepMounted || mounted;
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
-    enabled: shouldRender,
     ref: [forwardedRef, indicatorRef],
     state,
     stateAttributesMapping,

package/checkbox/root/CheckboxRoot.d.ts

@@ -37,70 +37,70 @@ export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComp
   /**
    * The id of the input element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Identifies the field when a form is submitted.
    * @default undefined
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Whether the checkbox is currently ticked.
    *
    * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
    * @default undefined
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * Whether the checkbox is initially ticked.
    *
    * To render a controlled checkbox, use the `checked` prop instead.
    * @default false
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Event handler called when the checkbox is ticked or unticked.
    */
-  onCheckedChange?: (checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void;
+  onCheckedChange?: ((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void) | undefined;
   /**
    * Whether the user should be unable to tick or untick the checkbox.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the user must tick the checkbox before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
    * @default false
    */
-  indeterminate?: boolean;
+  indeterminate?: boolean | undefined;
   /**
    * A ref to access the hidden `<input>` element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Whether the checkbox controls a group of child checkboxes.
    *
    * Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
    * @default false
    */
-  parent?: boolean;
+  parent?: boolean | undefined;
   /**
    * The value submitted with the form when the checkbox is unchecked.
    * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
    */
-  uncheckedValue?: string;
+  uncheckedValue?: string | undefined;
   /**
    * The value of the selected checkbox.
    */
-  value?: string;
+  value?: string | undefined;
 }
 export type CheckboxRootChangeEventReason = typeof REASONS.none;
 export type CheckboxRootChangeEventDetails = BaseUIChangeEventDetails<CheckboxRoot.ChangeEventReason>;

package/checkbox/root/CheckboxRoot.js

@@ -12,6 +12,7 @@ var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _noop = require("../../utils/noop");
 var _useStateAttributesMapping = require("../utils/useStateAttributesMapping");
@@ -78,7 +79,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
   const {
     labelId,
     controlId,
-    setControlId,
+    registerControlId,
     getDescriptionProps
   } = (0, _LabelableContext.useLabelableContext)();
   const groupContext = (0, _CheckboxGroupContext.useCheckboxGroupContext)();
@@ -114,6 +115,8 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
   const setGroupValue = groupContext?.setValue;
   const defaultGroupValue = groupContext?.defaultValue;
   const controlRef = React.useRef(null);
+  const controlSourceRef = (0, _useRefWithInit.useRefWithInit)(() => Symbol('checkbox-control'));
+  const hasRegisteredRef = React.useRef(false);
   const {
     getButtonProps,
     buttonRef
@@ -131,14 +134,23 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
 
   // can't use useLabelableId because of optional groupContext and/or parent
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (setControlId === _noop.NOOP) {
+    if (registerControlId === _noop.NOOP) {
       return undefined;
     }
-    setControlId(inputId);
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, inputId);
+    return undefined;
+  }, [inputId, groupContext, registerControlId, parent, controlSourceRef]);
+  React.useEffect(() => {
+    const controlSource = controlSourceRef.current;
     return () => {
-      setControlId(undefined);
+      if (!hasRegisteredRef.current || registerControlId === _noop.NOOP) {
+        return;
+      }
+      hasRegisteredRef.current = false;
+      registerControlId(controlSource, undefined);
     };
-  }, [inputId, groupContext, setControlId, parent]);
+  }, [registerControlId, controlSourceRef]);
   (0, _useField.useField)({
     enabled: !groupContext,
     id,
@@ -215,9 +227,14 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
   const computedChecked = isGroupedWithParent ? Boolean(groupChecked) : checked;
   const computedIndeterminate = isGroupedWithParent ? groupIndeterminate || indeterminate : indeterminate;
   React.useEffect(() => {
-    if (parentContext && value) {
-      parentContext.disabledStatesRef.current.set(value, disabled);
+    if (!parentContext || !value) {
+      return undefined;
     }
+    const disabledStates = parentContext.disabledStatesRef.current;
+    disabledStates.set(value, disabled);
+    return () => {
+      disabledStates.delete(value);
+    };
   }, [parentContext, disabled, value]);
   const state = React.useMemo(() => ({
     ...fieldState,
@@ -258,7 +275,13 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
           return;
         }
         event.preventDefault();
-        inputRef.current?.click();
+        inputRef.current?.dispatchEvent(new PointerEvent('click', {
+          bubbles: true,
+          shiftKey: event.shiftKey,
+          ctrlKey: event.ctrlKey,
+          altKey: event.altKey,
+          metaKey: event.metaKey
+        }));
       }
     }, getDescriptionProps, validation.getValidationProps, elementProps, otherGroupProps, getButtonProps],
     stateAttributesMapping

package/checkbox-group/CheckboxGroup.d.ts

@@ -21,27 +21,27 @@ export interface CheckboxGroupProps extends BaseUIComponentProps<'div', Checkbox
    *
    * To render an uncontrolled checkbox group, use the `defaultValue` prop instead.
    */
-  value?: string[];
+  value?: string[] | undefined;
   /**
    * Names of the checkboxes in the group that should be initially ticked.
    *
    * To render a controlled checkbox group, use the `value` prop instead.
    */
-  defaultValue?: string[];
+  defaultValue?: string[] | undefined;
   /**
    * Event handler called when a checkbox in the group is ticked or unticked.
    * Provides the new value as an argument.
    */
-  onValueChange?: (value: string[], eventDetails: CheckboxGroupChangeEventDetails) => void;
+  onValueChange?: ((value: string[], eventDetails: CheckboxGroupChangeEventDetails) => void) | undefined;
   /**
    * Names of all checkboxes in the group. Use this when creating a parent checkbox.
    */
-  allValues?: string[];
+  allValues?: string[] | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export type CheckboxGroupChangeEventReason = typeof REASONS.none;
 export type CheckboxGroupChangeEventDetails = BaseUIChangeEventDetails<CheckboxGroup.ChangeEventReason>;

package/checkbox-group/CheckboxGroup.js

@@ -106,10 +106,10 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
       validation.commit(resolvedValue, true);
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     disabled
-  }), [fieldState, disabled]);
+  };
   const contextValue = React.useMemo(() => ({
     allValues,
     value,

package/checkbox-group/useCheckboxGroupParent.d.ts

@@ -3,9 +3,9 @@ import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails
 import type { BaseUIEventReasons } from "../utils/reasons.js";
 export declare function useCheckboxGroupParent(params: useCheckboxGroupParent.Parameters): useCheckboxGroupParent.ReturnValue;
 export interface UseCheckboxGroupParentParameters {
-  allValues?: string[];
-  value?: string[];
-  onValueChange?: (value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
+  allValues?: string[] | undefined;
+  value?: string[] | undefined;
+  onValueChange?: ((value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void) | undefined;
 }
 export interface UseCheckboxGroupParentReturnValue {
   id: string | undefined;

package/collapsible/panel/CollapsiblePanel.d.ts

@@ -21,13 +21,13 @@ export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', Colla
    *
    * @default false
    */
-  hiddenUntilFound?: boolean;
+  hiddenUntilFound?: boolean | undefined;
   /**
    * Whether to keep the element in the DOM while the panel is hidden.
    * This prop is ignored when `hiddenUntilFound` is used.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace CollapsiblePanel {
   type State = CollapsiblePanelState;

package/collapsible/root/CollapsibleRoot.d.ts

@@ -17,23 +17,23 @@ export interface CollapsibleRootProps extends BaseUIComponentProps<'div', Collap
    *
    * To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Whether the collapsible panel is initially open.
    *
    * To render a controlled collapsible, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Event handler called when the panel is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void) | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export type CollapsibleRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
 export type CollapsibleRootChangeEventDetails = BaseUIChangeEventDetails<CollapsibleRootChangeEventReason>;

package/collapsible/root/useCollapsibleRoot.d.ts

@@ -13,14 +13,14 @@ export interface UseCollapsibleRootParameters {
    *
    * To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Whether the collapsible panel is initially open.
    *
    * To render a controlled collapsible, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Event handler called when the panel is opened or closed.
    */

package/combobox/arrow/ComboboxArrow.js

@@ -32,12 +32,12 @@ const ComboboxArrow = exports.ComboboxArrow = /*#__PURE__*/React.forwardRef(func
     arrowStyles
   } = (0, _ComboboxPositionerContext.useComboboxPositionerContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [arrowRef, forwardedRef],
     stateAttributesMapping: _popupStateMapping.popupStateMapping,

package/combobox/arrow/ComboboxArrowDataAttributes.js

@@ -18,12 +18,12 @@ let ComboboxArrowDataAttributes = exports.ComboboxArrowDataAttributes = function
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxArrowDataAttributes["side"] = "data-side";
+  ComboboxArrowDataAttributes[ComboboxArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxArrowDataAttributes["align"] = "data-align";
+  ComboboxArrowDataAttributes[ComboboxArrowDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the arrow is uncentered.
    */

package/combobox/backdrop/ComboboxBackdrop.js

@@ -32,10 +32,10 @@ const ComboboxBackdrop = exports.ComboboxBackdrop = /*#__PURE__*/React.forwardRe
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/combobox/chip/ComboboxChip.js

@@ -81,9 +81,9 @@ const ComboboxChip = exports.ComboboxChip = /*#__PURE__*/React.forwardRef(functi
     }
     return nextIndex;
   }
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, ref],
     state,
@@ -106,10 +106,13 @@ const ComboboxChip = exports.ComboboxChip = /*#__PURE__*/React.forwardRef(functi
         }
       },
       onMouseDown(event) {
-        if (disabled || readOnly) {
+        if (readOnly) {
           return;
         }
         event.preventDefault();
+        if (disabled) {
+          return;
+        }
         store.state.inputRef.current?.focus();
       }
     }, elementProps]

package/combobox/chip/ComboboxChipContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/combobox/chip-remove/ComboboxChipRemove.js

@@ -46,61 +46,56 @@ const ComboboxChipRemove = exports.ComboboxChipRemove = /*#__PURE__*/React.forwa
     disabled: disabled || readOnly,
     focusableWhenDisabled: true
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
+  function clearActiveIndexForRemovedItem(removedItem) {
+    const activeIndex = store.state.activeIndex;
+    if (activeIndex == null) {
+      return;
+    }
+
+    // Try current visible list first; if not found, it's filtered out.
+    // No need to clear highlight in that case since it can't equal activeIndex.
+    const removedIndex = (0, _itemEquality.findItemIndex)(store.state.valuesRef.current, removedItem, isItemEqualToValue);
+    if (removedIndex !== -1 && activeIndex === removedIndex) {
+      store.state.setIndices({
+        activeIndex: null,
+        type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+      });
+    }
+  }
+  function removeChip(event) {
+    const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.chipRemovePress, event.nativeEvent);
+    const removedItem = selectedValue[index];
+    clearActiveIndexForRemovedItem(removedItem);
+    store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+    store.state.inputRef.current?.focus();
+    return eventDetails;
+  }
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
       tabIndex: -1,
-      'aria-readonly': readOnly || undefined,
       onClick(event) {
         if (disabled || readOnly) {
           return;
         }
-        const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.chipRemovePress, event.nativeEvent);
-
-        // If the removed chip was the active item, clear highlight
-        const activeIndex = store.state.activeIndex;
-        const removedItem = selectedValue[index];
-
-        // Try current visible list first; if not found, it's filtered out. No need
-        // to clear highlight in that case since it can't equal activeIndex.
-        const removedIndex = (0, _itemEquality.findItemIndex)(store.state.valuesRef.current, removedItem, isItemEqualToValue);
-        if (removedIndex !== -1 && activeIndex === removedIndex) {
-          store.state.setIndices({
-            activeIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'pointer' : 'keyboard'
-          });
-        }
-        store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+        const eventDetails = removeChip(event);
         if (!eventDetails.isPropagationAllowed) {
           event.stopPropagation();
         }
-        store.state.inputRef.current?.focus();
       },
       onKeyDown(event) {
         if (disabled || readOnly) {
           return;
         }
-        const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.chipRemovePress, event.nativeEvent);
         if (event.key === 'Enter' || event.key === ' ') {
-          // If the removed chip was the active item, clear highlight
-          const activeIndex = store.state.activeIndex;
-          const removedItem = selectedValue[index];
-          const removedIndex = (0, _itemEquality.findItemIndex)(store.state.valuesRef.current, removedItem, isItemEqualToValue);
-          if (removedIndex !== -1 && activeIndex === removedIndex) {
-            store.state.setIndices({
-              activeIndex: null,
-              type: store.state.keyboardActiveRef.current ? 'pointer' : 'keyboard'
-            });
-          }
-          store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+          const eventDetails = removeChip(event);
           if (!eventDetails.isPropagationAllowed) {
             (0, _utils.stopEvent)(event);
           }
-          store.state.inputRef.current?.focus();
         }
       }
     }, elementProps, getButtonProps]

package/combobox/chips/ComboboxChipsContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/combobox/clear/ComboboxClear.d.ts

@@ -22,12 +22,12 @@ export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentPr
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the component should remain mounted in the DOM when not visible.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxClear {
   type State = ComboboxClearState;

package/combobox/clear/ComboboxClear.js

@@ -69,11 +69,11 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(visible);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open,
     transitionStatus
-  }), [disabled, open, transitionStatus]);
+  };
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: visible,
     ref: store.state.clearRef,
@@ -89,7 +89,6 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
     props: [{
       tabIndex: -1,
       children: 'x',
-      'aria-readonly': readOnly || undefined,
       // Avoid stealing focus from the input.
       onMouseDown(event) {
         event.preventDefault();

package/combobox/group/ComboboxGroup.d.ts

@@ -11,7 +11,7 @@ export interface ComboboxGroupProps extends BaseUIComponentProps<'div', Combobox
    * Items to be rendered within this group.
    * When provided, child `Collection` components will use these items.
    */
-  items?: readonly any[];
+  items?: readonly any[] | undefined;
 }
 export declare namespace ComboboxGroup {
   type State = ComboboxGroupState;

package/combobox/group/ComboboxGroupContext.d.ts

@@ -6,7 +6,7 @@ export interface ComboboxGroupContext {
    * Optional list of items that belong to this group. Used by nested
    * collections to render group-specific items.
    */
-  items?: readonly any[];
+  items?: readonly any[] | undefined;
 }
 export declare const ComboboxGroupContext: React.Context<ComboboxGroupContext | undefined>;
 export declare function useComboboxGroupContext(): ComboboxGroupContext;

package/combobox/group/ComboboxGroupContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/combobox/icon/ComboboxIcon.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * An icon that indicates that the trigger button opens the popup.
  * Renders a `<span>` element.
  */
-export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxIconState {}
 export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIcon.State> {}
 export declare namespace ComboboxIcon {

package/combobox/index.parts.d.ts

@@ -22,4 +22,5 @@ export { ComboboxCollection as Collection } from "./collection/ComboboxCollectio
 export { ComboboxEmpty as Empty } from "./empty/ComboboxEmpty.js";
 export { ComboboxClear as Clear } from "./clear/ComboboxClear.js";
 export { Separator } from "../separator/index.js";
-export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useFilteredItems } from "./root/utils/useFilteredItems.js";