@base-ui/react 1.1.0 → 1.3.0

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/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

@@ -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/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

@@ -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/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]

package/esm/combobox/chip/ComboboxChipContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ComboboxChipContext = /*#__PURE__*/React.createContext(undefined);

package/esm/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;

package/esm/combobox/chip-remove/ComboboxChipRemove.js

@@ -41,61 +41,56 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
     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 = 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 = createChangeEventDetails(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 = useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
       tabIndex: -1,
-      'aria-readonly': readOnly || undefined,
       onClick(event) {
         if (disabled || readOnly) {
           return;
         }
-        const eventDetails = createChangeEventDetails(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 = 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 = createChangeEventDetails(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 = 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) {
             stopEvent(event);
           }
-          store.state.inputRef.current?.focus();
         }
       }
     }, elementProps, getButtonProps]

package/esm/combobox/chips/ComboboxChips.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipsState {}
-export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChips.State> {}
+export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChipsState> {}
 export declare namespace ComboboxChips {
   type State = ComboboxChipsState;
   type Props = ComboboxChipsProps;

package/esm/combobox/chips/ComboboxChipsContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const ComboboxChipsContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ComboboxChipsContext.displayName = "ComboboxChipsContext";

package/esm/combobox/clear/ComboboxClear.d.ts

@@ -15,19 +15,22 @@ export interface ComboboxClearState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxClear.State> {
+export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxClearState> {
   /**
    * 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/esm/combobox/clear/ComboboxClear.js

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

package/esm/combobox/collection/ComboboxCollection.d.ts

@@ -6,9 +6,11 @@ import * as React from 'react';
  * If rendering a flat list, pass a function child to the `List` component instead, which implicitly wraps it.
  */
 export declare function ComboboxCollection(props: ComboboxCollection.Props): React.JSX.Element | null;
+export interface ComboboxCollectionState {}
 export interface ComboboxCollectionProps {
   children: (item: any, index: number) => React.ReactNode;
 }
 export declare namespace ComboboxCollection {
+  type State = ComboboxCollectionState;
   type Props = ComboboxCollectionProps;
 }

package/esm/combobox/empty/ComboboxEmpty.d.ts

@@ -8,7 +8,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<ComboboxEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxEmptyState {}
-export interface ComboboxEmptyProps extends BaseUIComponentProps<'div', ComboboxEmpty.State> {}
+export interface ComboboxEmptyProps extends BaseUIComponentProps<'div', ComboboxEmptyState> {}
 export declare namespace ComboboxEmpty {
   type State = ComboboxEmptyState;
   type Props = ComboboxEmptyProps;

package/esm/combobox/group/ComboboxGroup.d.ts

@@ -6,12 +6,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupState {}
-export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroup.State> {
+export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroupState> {
   /**
    * 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/esm/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/esm/combobox/group/ComboboxGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ComboboxGroupContext = /*#__PURE__*/React.createContext(undefined);

package/esm/combobox/group-label/ComboboxGroupLabel.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupLabelState {}
-export interface ComboboxGroupLabelProps extends BaseUIComponentProps<'div', ComboboxGroupLabel.State> {}
+export interface ComboboxGroupLabelProps extends BaseUIComponentProps<'div', ComboboxGroupLabelState> {}
 export declare namespace ComboboxGroupLabel {
   type State = ComboboxGroupLabelState;
   type Props = ComboboxGroupLabelProps;

package/esm/combobox/icon/ComboboxIcon.d.ts

@@ -4,9 +4,9 @@ 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 interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIconState> {}
 export declare namespace ComboboxIcon {
   type State = ComboboxIconState;
   type Props = ComboboxIconProps;

package/esm/combobox/index.d.ts

@@ -1,7 +1,9 @@
 export * as Combobox from "./index.parts.js";
 export type * from "./root/ComboboxRoot.js";
+export type * from "./label/ComboboxLabel.js";
 export type * from "./trigger/ComboboxTrigger.js";
 export type * from "./input/ComboboxInput.js";
+export type * from "./input-group/ComboboxInputGroup.js";
 export type * from "./popup/ComboboxPopup.js";
 export type * from "./positioner/ComboboxPositioner.js";
 export type * from "./list/ComboboxList.js";

package/esm/combobox/index.parts.d.ts

@@ -1,6 +1,8 @@
 export { ComboboxRoot as Root } from "./root/ComboboxRoot.js";
+export { ComboboxLabel as Label } from "./label/ComboboxLabel.js";
 export { ComboboxValue as Value } from "./value/ComboboxValue.js";
 export { ComboboxInput as Input } from "./input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "./input-group/ComboboxInputGroup.js";
 export { ComboboxTrigger as Trigger } from "./trigger/ComboboxTrigger.js";
 export { ComboboxList as List } from "./list/ComboboxList.js";
 export { ComboboxStatus as Status } from "./status/ComboboxStatus.js";
@@ -22,4 +24,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";

package/esm/combobox/index.parts.js

@@ -1,6 +1,8 @@
 export { ComboboxRoot as Root } from "./root/ComboboxRoot.js";
+export { ComboboxLabel as Label } from "./label/ComboboxLabel.js";
 export { ComboboxValue as Value } from "./value/ComboboxValue.js";
 export { ComboboxInput as Input } from "./input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "./input-group/ComboboxInputGroup.js";
 export { ComboboxTrigger as Trigger } from "./trigger/ComboboxTrigger.js";
 export { ComboboxList as List } from "./list/ComboboxList.js";
 export { ComboboxStatus as Status } from "./status/ComboboxStatus.js";
@@ -22,4 +24,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";

package/esm/combobox/input/ComboboxInput.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
  */
 export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export interface ComboboxInputState extends FieldRoot.State {
+export interface ComboboxInputState extends FieldRootState {
   /**
    * Whether the corresponding popup is open.
    */
@@ -25,12 +25,12 @@ export interface ComboboxInputState extends FieldRoot.State {
    */
   readOnly: boolean;
 }
-export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInput.State> {
+export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInputState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxInput {
   type State = ComboboxInputState;