@base-ui/react 1.1.0 → 1.3.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");
@@ -24,6 +25,7 @@ var _FieldItemContext = require("../../field/item/FieldItemContext");
 var _useField = require("../../field/useField");
 var _FormContext = require("../../form/FormContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
 var _CheckboxGroupContext = require("../../checkbox-group/CheckboxGroupContext");
 var _CheckboxRootContext = require("./CheckboxRootContext");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -43,6 +45,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     checked: checkedProp,
     className,
     defaultChecked = false,
+    'aria-labelledby': ariaLabelledByProp,
     disabled: disabledProp = false,
     id: idProp,
     indeterminate = false,
@@ -78,7 +81,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 +117,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 +136,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,
@@ -150,6 +164,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
   });
   const inputRef = React.useRef(null);
   const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef, validation.inputRef);
+  const ariaLabelledBy = (0, _useAriaLabelledBy.useAriaLabelledBy)(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? undefined);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = groupIndeterminate;
@@ -215,9 +230,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,
@@ -237,7 +257,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       'aria-checked': groupIndeterminate ? 'mixed' : checked,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       [PARENT_CHECKBOX]: parent ? '' : undefined,
       onFocus() {
         setFocused(true);
@@ -258,7 +278,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/CheckboxRootContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CheckboxRoot } from "./CheckboxRoot.js";
-export type CheckboxRootContext = CheckboxRoot.State;
-export declare const CheckboxRootContext: React.Context<import("./CheckboxRoot.js").CheckboxRootState | undefined>;
-export declare function useCheckboxRootContext(): import("./CheckboxRoot.js").CheckboxRootState;
+import type { CheckboxRootState } from "./CheckboxRoot.js";
+export type CheckboxRootContext = CheckboxRootState;
+export declare const CheckboxRootContext: React.Context<CheckboxRootState | undefined>;
+export declare function useCheckboxRootContext(): CheckboxRootState;

package/checkbox/utils/useStateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { CheckboxRoot } from "../root/CheckboxRoot.js";
-export declare function useStateAttributesMapping(state: CheckboxRoot.State): StateAttributesMapping<import("../index.js").CheckboxRootState>;
+import type { CheckboxRootState } from "../root/CheckboxRoot.js";
+export declare function useStateAttributesMapping(state: CheckboxRootState): StateAttributesMapping<CheckboxRootState>;

package/checkbox-group/CheckboxGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldRoot } from "../field/root/FieldRoot.js";
+import type { FieldRootState } from "../field/root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../utils/types.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../utils/reasons.js";
@@ -9,39 +9,39 @@ 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<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CheckboxGroupState extends FieldRoot.State {
+export interface CheckboxGroupState extends FieldRootState {
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
 }
-export interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroup.State> {
+export interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroupState> {
   /**
    * Names of the checkboxes in the group that should be ticked.
    *
    * 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/CheckboxGroupContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { UseFieldValidationReturnValue } from "../field/root/useFieldValidation.js";
-import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
+import type { UseCheckboxGroupParentReturnValue } from "./useCheckboxGroupParent.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
 export interface CheckboxGroupContext {
@@ -8,7 +8,7 @@ export interface CheckboxGroupContext {
   defaultValue: string[] | undefined;
   setValue: (value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   allValues: string[] | undefined;
-  parent: useCheckboxGroupParent.ReturnValue;
+  parent: UseCheckboxGroupParentReturnValue;
   disabled: boolean;
   validation: UseFieldValidationReturnValue;
   registerControlRef: (element: HTMLButtonElement | null) => void;

package/checkbox-group/useCheckboxGroupParent.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
-export declare function useCheckboxGroupParent(params: useCheckboxGroupParent.Parameters): useCheckboxGroupParent.ReturnValue;
+export declare function useCheckboxGroupParent(params: UseCheckboxGroupParentParameters): UseCheckboxGroupParentReturnValue;
 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;
@@ -23,7 +23,4 @@ export interface UseCheckboxGroupParentReturnValue {
     onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   };
 }
-export declare namespace useCheckboxGroupParent {
-  type Parameters = UseCheckboxGroupParentParameters;
-  type ReturnValue = UseCheckboxGroupParentReturnValue;
-}
+export interface UseCheckboxGroupParentState {}

package/collapsible/panel/CollapsiblePanel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+import type { CollapsibleRootState } from "../root/CollapsibleRoot.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * A panel with the collapsible contents.
@@ -9,10 +9,13 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CollapsiblePanelState extends CollapsibleRoot.State {
+export interface CollapsiblePanelState extends CollapsibleRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanel.State> {
+export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanelState> {
   /**
    * Allows the browser’s built-in page search to find and expand the panel contents.
    *
@@ -21,13 +24,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/panel/useCollapsiblePanel.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HTMLProps } from "../../utils/types.js";
 import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
 import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
-export declare function useCollapsiblePanel(parameters: useCollapsiblePanel.Parameters): useCollapsiblePanel.ReturnValue;
+export declare function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters): UseCollapsiblePanelReturnValue;
 export interface UseCollapsiblePanelParameters {
   abortControllerRef: React.RefObject<AbortController | null>;
   animationTypeRef: React.RefObject<AnimationType>;
@@ -56,7 +56,4 @@ export interface UseCollapsiblePanelParameters {
 export interface UseCollapsiblePanelReturnValue {
   props: HTMLProps;
 }
-export declare namespace useCollapsiblePanel {
-  type Parameters = UseCollapsiblePanelParameters;
-  type ReturnValue = UseCollapsiblePanelReturnValue;
-}
+export interface UseCollapsiblePanelState {}

package/collapsible/root/CollapsibleRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import { useCollapsibleRoot } from "./useCollapsibleRoot.js";
+import { type UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
 import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
@@ -10,30 +10,30 @@ import { REASONS } from "../../utils/reasons.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 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> {
+export interface CollapsibleRootState extends Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled'> {}
+export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRootState> {
   /**
    * Whether the collapsible panel is currently open.
    *
    * 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/CollapsibleRootContext.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { useCollapsibleRoot } from "./useCollapsibleRoot.js";
-import type { CollapsibleRoot } from "./CollapsibleRoot.js";
+import type { UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
+import type { CollapsibleRoot, CollapsibleRootState } from "./CollapsibleRoot.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
-export interface CollapsibleRootContext extends useCollapsibleRoot.ReturnValue {
+export interface CollapsibleRootContext extends UseCollapsibleRootReturnValue {
   onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;
-  state: CollapsibleRoot.State;
+  state: CollapsibleRootState;
   transitionStatus: TransitionStatus;
 }
 export declare const CollapsibleRootContext: React.Context<CollapsibleRootContext | undefined>;

package/collapsible/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { CollapsibleRoot } from "./CollapsibleRoot.js";
-export declare const collapsibleStateAttributesMapping: StateAttributesMapping<CollapsibleRoot.State>;
+import type { CollapsibleRootState } from "./CollapsibleRoot.js";
+export declare const collapsibleStateAttributesMapping: StateAttributesMapping<CollapsibleRootState>;

package/collapsible/root/useCollapsibleRoot.d.ts

@@ -6,21 +6,21 @@ export interface Dimensions {
   height: number | undefined;
   width: number | undefined;
 }
-export declare function useCollapsibleRoot(parameters: useCollapsibleRoot.Parameters): useCollapsibleRoot.ReturnValue;
+export declare function useCollapsibleRoot(parameters: UseCollapsibleRootParameters): UseCollapsibleRootReturnValue;
 export interface UseCollapsibleRootParameters {
   /**
    * Whether the collapsible panel is currently open.
    *
    * 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.
    */
@@ -73,7 +73,4 @@ export interface UseCollapsibleRootReturnValue {
    */
   width: number | undefined;
 }
-export declare namespace useCollapsibleRoot {
-  type Parameters = UseCollapsibleRootParameters;
-  type ReturnValue = UseCollapsibleRootReturnValue;
-}
+export interface UseCollapsibleRootState {}

package/collapsible/trigger/CollapsibleTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+import { type CollapsibleRootState } from "../root/CollapsibleRoot.js";
 /**
  * A button that opens and closes the collapsible panel.
  * Renders a `<button>` element.
@@ -8,7 +8,9 @@ import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleRoot.State> {}
+export interface CollapsibleTriggerState extends CollapsibleRootState {}
+export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleTriggerState> {}
 export declare namespace CollapsibleTrigger {
+  type State = CollapsibleTriggerState;
   type Props = CollapsibleTriggerProps;
 }

package/combobox/arrow/ComboboxArrow.d.ts

@@ -11,11 +11,20 @@ export interface ComboboxArrowState {
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface ComboboxArrowProps extends BaseUIComponentProps<'div', ComboboxArrow.State> {}
+export interface ComboboxArrowProps extends BaseUIComponentProps<'div', ComboboxArrowState> {}
 export declare namespace ComboboxArrow {
   type State = ComboboxArrowState;
   type Props = ComboboxArrowProps;

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

@@ -6,12 +6,15 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Renders a `<div>` element.
  */
 export declare const ComboboxBackdrop: React.ForwardRefExoticComponent<Omit<ComboboxBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ComboboxBackdropProps extends BaseUIComponentProps<'div', ComboboxBackdrop.State> {}
+export interface ComboboxBackdropProps extends BaseUIComponentProps<'div', ComboboxBackdropState> {}
 export interface ComboboxBackdropState {
   /**
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace ComboboxBackdrop {

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

@@ -11,7 +11,7 @@ export interface ComboboxChipState {
    */
   disabled: boolean;
 }
-export interface ComboboxChipProps extends BaseUIComponentProps<'div', ComboboxChip.State> {}
+export interface ComboboxChipProps extends BaseUIComponentProps<'div', ComboboxChipState> {}
 export declare namespace ComboboxChip {
   type State = ComboboxChipState;
   type Props = ComboboxChipProps;

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

@@ -11,7 +11,7 @@ export interface ComboboxChipRemoveState {
    */
   disabled: boolean;
 }
-export interface ComboboxChipRemoveProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxChipRemove.State> {}
+export interface ComboboxChipRemoveProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxChipRemoveState> {}
 export declare namespace ComboboxChipRemove {
   type State = ComboboxChipRemoveState;
   type Props = ComboboxChipRemoveProps;