@base-ui/react 1.0.0 → 1.2.0

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,
@@ -176,11 +188,12 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     disabled,
     // parent checkboxes unset `name` to be excluded from form submission
     name: parent ? undefined : name,
-    // Set `id` to stop Chrome warning about an unassociated input
-    id: inputId ?? undefined,
+    // Set `id` to stop Chrome warning about an unassociated input.
+    // When using a native button, the `id` is applied to the button instead.
+    id: nativeButton ? undefined : inputId ?? undefined,
     required,
     ref: mergedInputRef,
-    style: _visuallyHidden.visuallyHidden,
+    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
@@ -214,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,
@@ -231,7 +249,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     state,
     ref: [buttonRef, controlRef, forwardedRef, groupContext?.registerControlRef],
     props: [{
-      id,
+      id: nativeButton ? inputId ?? undefined : id,
       role: 'checkbox',
       'aria-checked': groupIndeterminate ? 'mixed' : checked,
       'aria-readonly': readOnly || undefined,
@@ -257,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/root/CheckboxRootDataAttributes.d.ts

@@ -7,6 +7,10 @@ export declare enum CheckboxRootDataAttributes {
    * Present when the checkbox is not checked.
    */
   unchecked = "data-unchecked",
+  /**
+   * Present when the checkbox is in an indeterminate state.
+   */
+  indeterminate = "data-indeterminate",
   /**
    * Present when the checkbox is disabled.
    */

package/checkbox/root/CheckboxRootDataAttributes.js

@@ -13,6 +13,10 @@ let CheckboxRootDataAttributes = exports.CheckboxRootDataAttributes = /*#__PURE_
    * Present when the checkbox is not checked.
    */
   CheckboxRootDataAttributes["unchecked"] = "data-unchecked";
+  /**
+   * Present when the checkbox is in an indeterminate state.
+   */
+  CheckboxRootDataAttributes["indeterminate"] = "data-indeterminate";
   /**
    * Present when the checkbox is disabled.
    */

package/checkbox-group/CheckboxGroup.d.ts

@@ -8,7 +8,7 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Checkbox Group](https://base-ui.com/react/components/checkbox-group)
  */
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface CheckboxGroupState extends FieldRoot.State {
   /**
    * Whether the component should ignore user interaction.
@@ -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

@@ -8,7 +8,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
-export declare const CollapsiblePanel: React.ForwardRefExoticComponent<CollapsiblePanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface CollapsiblePanelState extends CollapsibleRoot.State {
   transitionStatus: TransitionStatus;
 }
@@ -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

@@ -9,7 +9,7 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
-export declare const CollapsibleRoot: React.ForwardRefExoticComponent<CollapsibleRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface CollapsibleRootState extends Pick<useCollapsibleRoot.ReturnValue, 'open' | 'disabled'> {}
 export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRoot.State> {
   /**
@@ -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/collapsible/trigger/CollapsibleTrigger.d.ts

@@ -7,7 +7,7 @@ import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
  *
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
-export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleRoot.State> {}
 export declare namespace CollapsibleTrigger {
   type Props = CollapsibleTriggerProps;

package/collapsible/trigger/CollapsibleTrigger.js

@@ -50,9 +50,8 @@ const CollapsibleTrigger = exports.CollapsibleTrigger = /*#__PURE__*/React.forwa
   const props = React.useMemo(() => ({
     'aria-controls': open ? panelId : undefined,
     'aria-expanded': open,
-    disabled,
     onClick: handleTrigger
-  }), [panelId, disabled, open, handleTrigger]);
+  }), [panelId, open, handleTrigger]);
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/combobox/arrow/ComboboxArrow.d.ts

@@ -5,7 +5,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Displays an element positioned against the anchor.
  * Renders a `<div>` element.
  */
-export declare const ComboboxArrow: React.ForwardRefExoticComponent<ComboboxArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxArrow: React.ForwardRefExoticComponent<Omit<ComboboxArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxArrowState {
   /**
    * Whether the popup is currently open.

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.d.ts

@@ -5,7 +5,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.
  */
-export declare const ComboboxBackdrop: React.ForwardRefExoticComponent<ComboboxBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxBackdrop: React.ForwardRefExoticComponent<Omit<ComboboxBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxBackdropProps extends BaseUIComponentProps<'div', ComboboxBackdrop.State> {}
 export interface ComboboxBackdropState {
   /**

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.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * An individual chip that represents a value in a multiselectable input.
  * Renders a `<div>` element.
  */
-export declare const ComboboxChip: React.ForwardRefExoticComponent<ComboboxChipProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipState {
   /**
    * Whether the component should ignore user interaction.

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.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
  * A button to remove a chip.
  * Renders a `<button>` element.
  */
-export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<ComboboxChipRemoveProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<Omit<ComboboxChipRemoveProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxChipRemoveState {
   /**
    * Whether the component should ignore user interaction.

package/combobox/chip-remove/ComboboxChipRemove.js

@@ -25,6 +25,7 @@ const ComboboxChipRemove = exports.ComboboxChipRemove = /*#__PURE__*/React.forwa
   const {
     render,
     className,
+    disabled: disabledProp = false,
     nativeButton = true,
     ...elementProps
   } = componentProps;
@@ -32,10 +33,11 @@ const ComboboxChipRemove = exports.ComboboxChipRemove = /*#__PURE__*/React.forwa
   const {
     index
   } = (0, _ComboboxChipContext.useComboboxChipContext)();
-  const disabled = (0, _store.useStore)(store, _store2.selectors.disabled);
+  const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
+  const disabled = comboboxDisabled || disabledProp;
   const {
     buttonRef,
     getButtonProps
@@ -44,62 +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,
-      disabled,
-      '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/ComboboxChips.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * A container for the chips in a multiselectable input.
  * Renders a `<div>` element.
  */
-export declare const ComboboxChips: React.ForwardRefExoticComponent<ComboboxChipsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipsState {}
 export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChips.State> {}
 export declare namespace ComboboxChips {

package/combobox/chips/ComboboxChips.js

@@ -13,6 +13,7 @@ var _ComboboxChipsContext = require("./ComboboxChipsContext");
 var _CompositeList = require("../../composite/list/CompositeList");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
+var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A container for the chips in a multiselectable input.
@@ -26,6 +27,7 @@ const ComboboxChips = exports.ComboboxChips = /*#__PURE__*/React.forwardRef(func
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
+  const hasSelectionChips = (0, _store.useStore)(store, _store2.selectors.hasSelectionChips);
   const [highlightedChipIndex, setHighlightedChipIndex] = React.useState(undefined);
   if (open && highlightedChipIndex !== undefined) {
     setHighlightedChipIndex(undefined);
@@ -33,7 +35,11 @@ const ComboboxChips = exports.ComboboxChips = /*#__PURE__*/React.forwardRef(func
   const chipsRef = React.useRef([]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, store.state.chipsContainerRef],
-    props: elementProps
+    // NVDA enters browse mode instead of staying in focus mode when navigating with
+    // arrow keys inside a container unless it has a toolbar role.
+    props: [hasSelectionChips ? {
+      role: 'toolbar'
+    } : _constants.EMPTY_OBJECT, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,

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

@@ -5,7 +5,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Clears the value when clicked.
  * Renders a `<button>` element.
  */
-export declare const ComboboxClear: React.ForwardRefExoticComponent<ComboboxClearProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<ComboboxClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxClearState {
   /**
    * Whether the popup is open.
@@ -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;