@base-ui/react 1.0.0 → 1.2.0

package/esm/button/Button.d.ts

@@ -1,39 +1,26 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps, NonNativeButtonProps } from "../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../utils/types.js";
 /**
  * A button component that can be used to trigger actions.
  * Renders a `<button>` element.
  *
  * Documentation: [Base UI Button](https://base-ui.com/react/components/button)
  */
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface ButtonState {
   /**
    * Whether the button should ignore user interaction.
    */
   disabled: boolean;
 }
-interface ButtonCommonProps {
-  /**
-   * Whether the button should ignore user interaction.
-   */
-  disabled?: boolean;
+export interface ButtonProps extends NativeButtonProps, BaseUIComponentProps<'button', ButtonState> {
   /**
    * Whether the button should be focusable when disabled.
    * @default false
    */
-  focusableWhenDisabled?: boolean;
+  focusableWhenDisabled?: boolean | undefined;
 }
-type NonNativeAttributeKeys = 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'name' | 'type' | 'value';
-interface ButtonNativeProps extends NativeButtonProps, ButtonCommonProps, Omit<BaseUIComponentProps<'button', ButtonState>, 'disabled'> {
-  nativeButton?: true;
-}
-interface ButtonNonNativeProps extends NonNativeButtonProps, ButtonCommonProps, Omit<BaseUIComponentProps<'button', ButtonState>, NonNativeAttributeKeys | 'disabled'> {
-  nativeButton: false;
-}
-export type ButtonProps = ButtonNativeProps | ButtonNonNativeProps;
 export declare namespace Button {
   type State = ButtonState;
   type Props = ButtonProps;
-}
-export {};
+}

package/esm/button/Button.js

@@ -13,12 +13,11 @@ export const Button = /*#__PURE__*/React.forwardRef(function Button(componentPro
   const {
     render,
     className,
-    disabled: disabledProp = false,
+    disabled = false,
     focusableWhenDisabled = false,
     nativeButton = true,
     ...elementProps
   } = componentProps;
-  const disabled = Boolean(disabledProp);
   const {
     getButtonProps,
     buttonRef
@@ -27,9 +26,9 @@ export const Button = /*#__PURE__*/React.forwardRef(function Button(componentPro
     focusableWhenDisabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   return useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/esm/checkbox/indicator/CheckboxIndicator.d.ts

@@ -8,7 +8,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
-export declare const CheckboxIndicator: React.ForwardRefExoticComponent<CheckboxIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface CheckboxIndicatorState extends CheckboxRoot.State {
   transitionStatus: TransitionStatus;
 }
@@ -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/esm/checkbox/indicator/CheckboxIndicator.js

@@ -25,14 +25,15 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
   const rootState = useCheckboxRootContext();
   const rendered = rootState.checked || rootState.indeterminate;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = useTransitionStatus(rendered);
   const indicatorRef = React.useRef(null);
-  const state = React.useMemo(() => ({
+  const state = {
     ...rootState,
     transitionStatus
-  }), [rootState, transitionStatus]);
+  };
   useOpenChangeComplete({
     open: rendered,
     ref: indicatorRef,
@@ -48,9 +49,8 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
     ...transitionStatusMapping,
     ...fieldValidityMapping
   }), [baseStateAttributesMapping]);
-  const shouldRender = keepMounted || rendered;
+  const shouldRender = keepMounted || mounted;
   const element = useRenderElement('span', componentProps, {
-    enabled: shouldRender,
     ref: [forwardedRef, indicatorRef],
     state,
     stateAttributesMapping,

package/esm/checkbox/indicator/CheckboxIndicatorDataAttributes.d.ts

@@ -7,6 +7,10 @@ export declare enum CheckboxIndicatorDataAttributes {
    * 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/esm/checkbox/indicator/CheckboxIndicatorDataAttributes.js

@@ -8,6 +8,10 @@ export let CheckboxIndicatorDataAttributes = function (CheckboxIndicatorDataAttr
    * Present when the checkbox is not checked.
    */
   CheckboxIndicatorDataAttributes["unchecked"] = "data-unchecked";
+  /**
+   * Present when the checkbox is in an indeterminate state.
+   */
+  CheckboxIndicatorDataAttributes["indeterminate"] = "data-indeterminate";
   /**
    * Present when the checkbox is disabled.
    */

package/esm/checkbox/root/CheckboxRoot.d.ts

@@ -10,7 +10,7 @@ export declare const PARENT_CHECKBOX = "data-parent";
  *
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
-export declare const CheckboxRoot: React.ForwardRefExoticComponent<CheckboxRootProps & React.RefAttributes<HTMLElement>>;
+export declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface CheckboxRootState extends FieldRoot.State {
   /**
    * Whether the checkbox is currently ticked.
@@ -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/esm/checkbox/root/CheckboxRoot.js

@@ -6,7 +6,8 @@ import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { NOOP } from "../../utils/noop.js";
 import { useStateAttributesMapping } from "../utils/useStateAttributesMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -72,7 +73,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
   const {
     labelId,
     controlId,
-    setControlId,
+    registerControlId,
     getDescriptionProps
   } = useLabelableContext();
   const groupContext = useCheckboxGroupContext();
@@ -108,6 +109,8 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
   const setGroupValue = groupContext?.setValue;
   const defaultGroupValue = groupContext?.defaultValue;
   const controlRef = React.useRef(null);
+  const controlSourceRef = useRefWithInit(() => Symbol('checkbox-control'));
+  const hasRegisteredRef = React.useRef(false);
   const {
     getButtonProps,
     buttonRef
@@ -125,14 +128,23 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
 
   // can't use useLabelableId because of optional groupContext and/or parent
   useIsoLayoutEffect(() => {
-    if (setControlId === NOOP) {
+    if (registerControlId === 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) {
+        return;
+      }
+      hasRegisteredRef.current = false;
+      registerControlId(controlSource, undefined);
     };
-  }, [inputId, groupContext, setControlId, parent]);
+  }, [registerControlId, controlSourceRef]);
   useField({
     enabled: !groupContext,
     id,
@@ -170,11 +182,12 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     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,
+    style: name ? visuallyHiddenInput : visuallyHidden,
     tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
@@ -208,9 +221,14 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
   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,
@@ -225,7 +243,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     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,
@@ -251,7 +269,13 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
           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/esm/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/esm/checkbox/root/CheckboxRootDataAttributes.js

@@ -7,6 +7,10 @@ export let CheckboxRootDataAttributes = /*#__PURE__*/function (CheckboxRootDataA
    * 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/esm/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/esm/checkbox-group/CheckboxGroup.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/collapsible/trigger/CollapsibleTrigger.js

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

package/esm/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/esm/combobox/arrow/ComboboxArrow.js

@@ -27,12 +27,12 @@ export const ComboboxArrow = /*#__PURE__*/React.forwardRef(function ComboboxArro
     arrowStyles
   } = useComboboxPositionerContext();
   const open = useStore(store, selectors.open);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   return useRenderElement('div', componentProps, {
     ref: [arrowRef, forwardedRef],
     stateAttributesMapping: popupStateMapping,

package/esm/combobox/arrow/ComboboxArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let ComboboxArrowDataAttributes = function (ComboboxArrowDataAttributes)
    * 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"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxArrowDataAttributes["align"] = "data-align";
+  ComboboxArrowDataAttributes[ComboboxArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the arrow is uncentered.
    */

package/esm/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/esm/combobox/backdrop/ComboboxBackdrop.js

@@ -26,10 +26,10 @@ export const ComboboxBackdrop = /*#__PURE__*/React.forwardRef(function ComboboxB
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const transitionStatus = useStore(store, selectors.transitionStatus);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   return useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/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/esm/combobox/chip/ComboboxChip.js

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