@base-ui/react 1.1.0 → 1.3.0

package/drawer/viewport/DrawerViewportContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface DrawerViewportContextValue {
+  swiping: boolean;
+  getDragStyles: () => React.CSSProperties;
+  swipeStrength: number | null;
+  setSwipeDismissed: (dismissed: boolean) => void;
+}
+export declare const DrawerViewportContext: React.Context<DrawerViewportContextValue | null>;
+export declare function useDrawerViewportContext(optional?: false): DrawerViewportContextValue;
+export declare function useDrawerViewportContext(optional: true): DrawerViewportContextValue | null;
+export {};

package/drawer/viewport/DrawerViewportContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerViewportContext = void 0;
+exports.useDrawerViewportContext = useDrawerViewportContext;
+var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
+var React = _interopRequireWildcard(require("react"));
+const DrawerViewportContext = exports.DrawerViewportContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
+function useDrawerViewportContext(optional) {
+  const context = React.useContext(DrawerViewportContext);
+  if (optional === false && context === null) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerViewportContext is missing. Drawer parts must be placed within <Drawer.Viewport>.' : (0, _formatErrorMessage2.default)(92));
+  }
+  return context;
+}

package/drawer/viewport/DrawerViewportDataAttributes.d.ts

@@ -0,0 +1,22 @@
+export declare enum DrawerViewportDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  nested = "data-nested",
+}

package/drawer/viewport/DrawerViewportDataAttributes.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerViewportDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerViewportDataAttributes = exports.DrawerViewportDataAttributes = function (DrawerViewportDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  DrawerViewportDataAttributes["nested"] = "data-nested";
+  return DrawerViewportDataAttributes;
+}({});

package/esm/accordion/header/AccordionHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AccordionItem } from "../item/AccordionItem.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 /**
  * A heading that labels the corresponding panel.
  * Renders an `<h3>` element.
@@ -8,7 +8,9 @@ import type { AccordionItem } from "../item/AccordionItem.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionItem.State> {}
+export interface AccordionHeaderState extends AccordionItemState {}
+export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionHeaderState> {}
 export declare namespace AccordionHeader {
+  type State = AccordionHeaderState;
   type Props = AccordionHeaderProps;
 }

package/esm/accordion/item/AccordionItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import { useCollapsibleRoot } from "../../collapsible/root/useCollapsibleRoot.js";
-import type { AccordionRoot } from "../root/AccordionRoot.js";
+import { type UseCollapsibleRootParameters } from "../../collapsible/root/useCollapsibleRoot.js";
+import type { AccordionRootState } from "../root/AccordionRoot.js";
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
@@ -11,11 +11,17 @@ import { REASONS } from "../../utils/reasons.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface AccordionItemState extends AccordionRoot.State {
+export interface AccordionItemState extends AccordionRootState {
+  /**
+   * The item index.
+   */
   index: number;
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
 }
-export interface AccordionItemProps extends BaseUIComponentProps<'div', AccordionItem.State>, Partial<Pick<useCollapsibleRoot.Parameters, 'disabled'>> {
+export interface AccordionItemProps extends BaseUIComponentProps<'div', AccordionItemState>, Partial<Pick<UseCollapsibleRootParameters, 'disabled'>> {
   /**
    * A unique value that identifies this accordion item.
    * If no value is provided, a unique ID will be generated automatically.
@@ -33,7 +39,7 @@ export interface AccordionItemProps extends BaseUIComponentProps<'div', Accordio
   /**
    * Event handler called when the panel is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void) | undefined;
 }
 export type AccordionItemChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
 export type AccordionItemChangeEventDetails = BaseUIChangeEventDetails<AccordionItem.ChangeEventReason>;

package/esm/accordion/item/AccordionItemContext.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { AccordionItem } from "./AccordionItem.js";
+import type { AccordionItemState } from "./AccordionItem.js";
 export interface AccordionItemContext {
   open: boolean;
-  state: AccordionItem.State;
+  state: AccordionItemState;
   setTriggerId: (id: string | undefined) => void;
-  triggerId?: string;
+  triggerId?: string | undefined;
 }
 export declare const AccordionItemContext: React.Context<AccordionItemContext | undefined>;
 export declare function useAccordionItemContext(): AccordionItemContext;

package/esm/accordion/item/stateAttributesMapping.d.ts

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

package/esm/accordion/panel/AccordionPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 import type { AccordionRoot } from "../root/AccordionRoot.js";
-import type { AccordionItem } from "../item/AccordionItem.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * A collapsible panel with the accordion item contents.
@@ -10,10 +10,13 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionPanel: React.ForwardRefExoticComponent<Omit<AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface AccordionPanelState extends AccordionItem.State {
+export interface AccordionPanelState extends AccordionItemState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface AccordionPanelProps extends BaseUIComponentProps<'div', AccordionPanel.State>, Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}
+export interface AccordionPanelProps extends BaseUIComponentProps<'div', AccordionPanelState>, Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}
 export declare namespace AccordionPanel {
   type State = AccordionPanelState;
   type Props = AccordionPanelProps;

package/esm/accordion/root/AccordionRoot.d.ts

@@ -8,34 +8,42 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
-export declare const AccordionRoot: React.ForwardRefExoticComponent<Omit<AccordionRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type AccordionValue = (any | null)[];
-export interface AccordionRootState {
-  value: AccordionValue;
+export declare const AccordionRoot: {
+  <Value = any>(props: AccordionRoot.Props<Value>): React.JSX.Element;
+};
+export type AccordionValue<Value = any> = Value[];
+export interface AccordionRootState<Value = any> {
+  /**
+   * The current value.
+   */
+  value: AccordionValue<Value>;
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * The component orientation.
+   */
   orientation: Orientation;
 }
-export interface AccordionRootProps extends BaseUIComponentProps<'div', AccordionRoot.State> {
+export interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'div', AccordionRoot.State<Value>> {
   /**
    * The controlled value of the item(s) that should be expanded.
    *
    * To render an uncontrolled accordion, use the `defaultValue` prop instead.
    */
-  value?: AccordionValue;
+  value?: AccordionValue<Value> | undefined;
   /**
    * The uncontrolled value of the item(s) that should be initially expanded.
    *
    * To render a controlled accordion, use the `value` prop instead.
    */
-  defaultValue?: AccordionValue;
+  defaultValue?: AccordionValue<Value> | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Allows the browser’s built-in page search to find and expand the panel contents.
    *
@@ -43,41 +51,42 @@ export interface AccordionRootProps extends BaseUIComponentProps<'div', Accordio
    * to hide the element without removing it from the DOM.
    * @default false
    */
-  hiddenUntilFound?: boolean;
+  hiddenUntilFound?: boolean | undefined;
   /**
    * Whether to keep the element in the DOM while the panel is closed.
    * This prop is ignored when `hiddenUntilFound` is used.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
   /**
    * Event handler called when an accordion item is expanded or collapsed.
    * Provides the new value as an argument.
    */
-  onValueChange?: (value: AccordionValue, eventDetails: AccordionRootChangeEventDetails) => void;
+  onValueChange?: ((value: AccordionValue<Value>, eventDetails: AccordionRootChangeEventDetails) => void) | undefined;
   /**
    * Whether multiple items can be open at the same time.
    * @default false
    */
-  multiple?: boolean;
+  multiple?: boolean | undefined;
   /**
    * The visual orientation of the accordion.
    * Controls whether roving focus uses left/right or up/down arrow keys.
    * @default 'vertical'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
 }
 export type AccordionRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
 export type AccordionRootChangeEventDetails = BaseUIChangeEventDetails<AccordionRoot.ChangeEventReason>;
 export declare namespace AccordionRoot {
-  type State = AccordionRootState;
-  type Props = AccordionRootProps;
+  type Value<TValue = any> = AccordionValue<TValue>;
+  type State<TValue = any> = AccordionRootState<TValue>;
+  type Props<TValue = any> = AccordionRootProps<TValue>;
   type ChangeEventReason = AccordionRootChangeEventReason;
   type ChangeEventDetails = AccordionRootChangeEventDetails;
 }

package/esm/accordion/root/AccordionRootContext.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import type { Orientation } from "../../utils/types.js";
 import type { TextDirection } from "../../direction-provider/index.js";
-import type { AccordionRoot, AccordionValue } from "./AccordionRoot.js";
-export interface AccordionRootContext {
+import type { AccordionRoot } from "./AccordionRoot.js";
+export interface AccordionRootContext<Value = any> {
   accordionItemRefs: React.RefObject<(HTMLElement | null)[]>;
   direction: TextDirection;
   disabled: boolean;
-  handleValueChange: (newValue: number | string, nextOpen: boolean) => void;
+  handleValueChange: (newValue: AccordionRoot.Value<Value>[number], nextOpen: boolean) => void;
   hiddenUntilFound: boolean;
   keepMounted: boolean;
   loopFocus: boolean;
   orientation: Orientation;
-  state: AccordionRoot.State;
-  value: AccordionValue;
+  state: AccordionRoot.State<Value>;
+  value: AccordionRoot.Value<Value>;
 }
-export declare const AccordionRootContext: React.Context<AccordionRootContext | undefined>;
-export declare function useAccordionRootContext(): AccordionRootContext;
+export declare const AccordionRootContext: React.Context<AccordionRootContext<any> | undefined>;
+export declare function useAccordionRootContext<Value = any>(): AccordionRootContext<Value>;

package/esm/accordion/trigger/AccordionTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { AccordionItem } from "../item/AccordionItem.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 /**
  * A button that opens and closes the corresponding panel.
  * Renders a `<button>` element.
@@ -8,7 +8,9 @@ import type { AccordionItem } from "../item/AccordionItem.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface AccordionTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', AccordionItem.State> {}
+export interface AccordionTriggerState extends AccordionItemState {}
+export interface AccordionTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', AccordionTriggerState> {}
 export declare namespace AccordionTrigger {
+  type State = AccordionTriggerState;
   type Props = AccordionTriggerProps;
 }

package/esm/accordion/trigger/AccordionTrigger.js

@@ -57,7 +57,8 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
   } = useButton({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   const {
     accordionItemRefs,
@@ -84,6 +85,7 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
     'aria-controls': open ? panelId : undefined,
     'aria-expanded': open,
     id,
+    tabIndex: 0,
     onClick: handleTrigger,
     onKeyDown(event) {
       if (!SUPPORTED_KEYS.has(event.key)) {

package/esm/alert-dialog/root/AlertDialogRoot.d.ts

@@ -9,11 +9,12 @@ import type { DialogRoot } from "../../dialog/root/DialogRoot.js";
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
 export declare function AlertDialogRoot<Payload>(props: AlertDialogRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface AlertDialogRootState {}
 export interface AlertDialogRootProps<Payload = unknown> extends Omit<DialogRoot.Props<Payload>, 'modal' | 'disablePointerDismissal' | 'onOpenChange' | 'actionsRef' | 'handle'> {
   /**
    * Event handler called when the dialog is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void) | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the dialog will not be unmounted when closed.
@@ -21,13 +22,13 @@ export interface AlertDialogRootProps<Payload = unknown> extends Omit<DialogRoot
    * Useful when the dialog's animation is controlled by an external library.
    * - `close`: Closes the dialog imperatively when called.
    */
-  actionsRef?: React.RefObject<AlertDialogRoot.Actions | null>;
+  actionsRef?: React.RefObject<AlertDialogRoot.Actions | null> | undefined;
   /**
    * A handle to associate the alert dialog with a trigger.
    * If specified, allows external triggers to control the alert dialog's open state.
    * Can be created with the AlertDialog.createHandle() method.
    */
-  handle?: DialogHandle<Payload>;
+  handle?: DialogHandle<Payload> | undefined;
 }
 export type AlertDialogRootActions = DialogRoot.Actions;
 export type AlertDialogRootChangeEventReason = DialogRoot.ChangeEventReason;
@@ -35,6 +36,7 @@ export type AlertDialogRootChangeEventDetails = BaseUIChangeEventDetails<AlertDi
   preventUnmountOnClose(): void;
 };
 export declare namespace AlertDialogRoot {
+  type State = AlertDialogRootState;
   type Props<Payload = unknown> = AlertDialogRootProps<Payload>;
   type Actions = AlertDialogRootActions;
   type ChangeEventReason = AlertDialogRootChangeEventReason;

package/esm/alert-dialog/root/AlertDialogRoot.js

@@ -28,16 +28,18 @@ export function AlertDialogRoot(props) {
   const nested = Boolean(parentDialogRootContext);
   const store = useRefWithInit(() => {
     return handle?.store ?? new DialogStore({
-      open: openProp ?? defaultOpen,
-      activeTriggerId: triggerIdProp !== undefined ? triggerIdProp : defaultTriggerIdProp,
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
       modal: true,
       disablePointerDismissal: true,
       nested,
       role: 'alertdialog'
     });
   }).current;
-  store.useControlledProp('open', openProp, defaultOpen);
-  store.useControlledProp('activeTriggerId', triggerIdProp, defaultTriggerIdProp);
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useSyncedValue('nested', nested);
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);

package/esm/autocomplete/index.d.ts

@@ -3,6 +3,7 @@ export type * from "./root/AutocompleteRoot.js";
 export type * from "./value/AutocompleteValue.js";
 export type { ComboboxTriggerProps as AutocompleteTriggerProps, ComboboxTriggerState as AutocompleteTriggerState } from "../combobox/trigger/ComboboxTrigger.js";
 export type { ComboboxInputProps as AutocompleteInputProps, ComboboxInputState as AutocompleteInputState } from "../combobox/input/ComboboxInput.js";
+export type { ComboboxInputGroupProps as AutocompleteInputGroupProps, ComboboxInputGroupState as AutocompleteInputGroupState } from "../combobox/input-group/ComboboxInputGroup.js";
 export type { ComboboxPopupProps as AutocompletePopupProps, ComboboxPopupState as AutocompletePopupState } from "../combobox/popup/ComboboxPopup.js";
 export type { ComboboxPositionerProps as AutocompletePositionerProps, ComboboxPositionerState as AutocompletePositionerState } from "../combobox/positioner/ComboboxPositioner.js";
 export type { ComboboxListProps as AutocompleteListProps, ComboboxListState as AutocompleteListState } from "../combobox/list/ComboboxList.js";

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

@@ -2,6 +2,7 @@ export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
 export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";
@@ -18,4 +19,5 @@ export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.js";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.js";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.js";
 export { Separator } from "../separator/Separator.js";
-export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.js";
+export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.js";
+export { useFilteredItems } from "../combobox/root/utils/useFilteredItems.js";

package/esm/autocomplete/index.parts.js

@@ -2,6 +2,7 @@ export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
 export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";
@@ -18,4 +19,5 @@ export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.js";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.js";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.js";
 export { Separator } from "../separator/Separator.js";
-export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.js";
+export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.js";
+export { useFilteredItems } from "../combobox/root/utils/useFilteredItems.js";

package/esm/autocomplete/root/AutocompleteRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AriaCombobox } from "../../combobox/root/AriaCombobox.js";
+import { AriaCombobox, type AriaComboboxState } from "../../combobox/root/AriaCombobox.js";
 /**
  * Groups all parts of the autocomplete.
  * Doesn't render its own HTML element.
@@ -20,9 +20,9 @@ export declare function AutocompleteRoot<ItemValue>(props: Omit<AutocompleteRoot
    * The items to be displayed in the list.
    * Can be either a flat array of items or an array of groups with items.
    */
-  items?: readonly ItemValue[];
+  items?: readonly ItemValue[] | undefined;
 }): React.JSX.Element;
-export type AutocompleteRootState = AriaCombobox.State;
+export interface AutocompleteRootState extends AriaComboboxState {}
 export interface AutocompleteRootActions {
   unmount: () => void;
 }
@@ -30,7 +30,7 @@ export type AutocompleteRootChangeEventReason = AriaCombobox.ChangeEventReason;
 export type AutocompleteRootChangeEventDetails = AriaCombobox.ChangeEventDetails;
 export type AutocompleteRootHighlightEventReason = AriaCombobox.HighlightEventReason;
 export type AutocompleteRootHighlightEventDetails = AriaCombobox.HighlightEventDetails;
-export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'itemToStringLabel' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange'> {
+export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'formAutoComplete' | 'itemToStringLabel' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange' | 'openOnInputClick'> {
   /**
    * Controls how the autocomplete behaves with respect to list filtering and inline autocompletion.
    * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.
@@ -39,62 +39,62 @@ export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Prop
    * - `none`: items are static (not filtered), and the input value will not change based on the active item.
    * @default 'list'
    */
-  mode?: 'list' | 'both' | 'inline' | 'none';
+  mode?: 'list' | 'both' | 'inline' | 'none' | undefined;
   /**
    * Whether the first matching item is highlighted automatically.
    * - `true`: highlight after the user types and keep the highlight while the query changes.
    * - `'always'`: always highlight the first item.
    * @default false
    */
-  autoHighlight?: boolean | 'always';
+  autoHighlight?: boolean | 'always' | undefined;
   /**
    * Whether the highlighted item should be preserved when the pointer leaves the list.
    * @default false
    */
-  keepHighlight?: boolean;
+  keepHighlight?: boolean | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * The uncontrolled input value of the autocomplete when it's initially rendered.
    *
    * To render a controlled autocomplete, use the `value` prop instead.
    */
-  defaultValue?: AriaCombobox.Props<React.ComponentProps<'input'>['defaultValue'], 'none'>['defaultInputValue'];
+  defaultValue?: AriaCombobox.Props<React.ComponentProps<'input'>['defaultValue'], 'none'>['defaultInputValue'] | undefined;
   /**
    * The input value of the autocomplete. Use when controlled.
    */
-  value?: AriaCombobox.Props<React.ComponentProps<'input'>['value'], 'none'>['inputValue'];
+  value?: AriaCombobox.Props<React.ComponentProps<'input'>['value'], 'none'>['inputValue'] | undefined;
   /**
    * Event handler called when the input value of the autocomplete changes.
    */
-  onValueChange?: (value: string, eventDetails: AutocompleteRootChangeEventDetails) => void;
+  onValueChange?: ((value: string, eventDetails: AutocompleteRootChangeEventDetails) => void) | undefined;
   /**
    * Whether clicking an item should submit the autocomplete's owning form.
    * By default, clicking an item via a pointer or <kbd>Enter</kbd> key does not submit the owning form.
    * Useful when the autocomplete is used as a single-field form search input.
    * @default false
    */
-  submitOnItemClick?: AriaCombobox.Props<ItemValue, 'none'>['submitOnItemClick'];
+  submitOnItemClick?: AriaCombobox.Props<ItemValue, 'none'>['submitOnItemClick'] | undefined;
   /**
    * When the item values are objects (`<Autocomplete.Item value={object}>`), this function converts the object value to a string representation for both display in the input and form submission.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: ItemValue) => string;
+  itemToStringValue?: ((itemValue: ItemValue) => string) | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the autocomplete will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the autocomplete manually.
    * Useful when the autocomplete's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<AutocompleteRootActions | null>;
+  actionsRef?: React.RefObject<AutocompleteRootActions | null> | undefined;
   /**
    * Event handler called when the popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AutocompleteRootChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AutocompleteRootChangeEventDetails) => void) | undefined;
   /**
    * Callback fired when an item is highlighted or unhighlighted.
    * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.
@@ -103,7 +103,12 @@ export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Prop
    * - `'pointer'`: the highlight changed due to pointer hovering.
    * - `'none'`: the highlight changed programmatically.
    */
-  onItemHighlighted?: (highlightedValue: ItemValue | undefined, eventDetails: AutocompleteRootHighlightEventDetails) => void;
+  onItemHighlighted?: ((highlightedValue: ItemValue | undefined, eventDetails: AutocompleteRootHighlightEventDetails) => void) | undefined;
+  /**
+   * Whether the popup opens when clicking the input.
+   * @default false
+   */
+  openOnInputClick?: boolean | undefined;
 }
 export declare namespace AutocompleteRoot {
   type Props<ItemValue> = AutocompleteRootProps<ItemValue>;

package/esm/autocomplete/root/AutocompleteRoot.js

@@ -56,24 +56,25 @@ export function AutocompleteRoot(props) {
   });
   const collator = useCoreFilter();
   const baseFilter = React.useMemo(() => {
-    if (other.filter) {
+    if (other.filter !== undefined) {
       return other.filter;
     }
-    return (item, query, toString) => {
-      return collator.contains(stringifyAsLabel(item, toString), query);
-    };
-  }, [other, collator]);
+    return collator.contains;
+  }, [other.filter, collator]);
   const resolvedQuery = String(isControlled ? value : internalValue).trim();
 
   // In "both", wrap filtering to use only the typed value, ignoring the inline value.
   const resolvedFilter = React.useMemo(() => {
     if (mode !== 'both') {
-      return staticItems ? null : other.filter;
+      return staticItems ? null : baseFilter;
+    }
+    if (baseFilter === null) {
+      return null;
     }
     return (item, _query, toString) => {
       return baseFilter(item, resolvedQuery, toString);
     };
-  }, [baseFilter, mode, other.filter, resolvedQuery, staticItems]);
+  }, [baseFilter, mode, resolvedQuery, staticItems]);
   const handleItemHighlighted = useStableCallback((highlightedValue, eventDetails) => {
     props.onItemHighlighted?.(highlightedValue, eventDetails);
     if (eventDetails.reason === REASONS.pointer) {