@base-ui/react 1.3.0 → 1.4.0

package/combobox/positioner/ComboboxPositioner.js

@@ -11,21 +11,21 @@ var _store = require("@base-ui/utils/store");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _inertValue = require("@base-ui/utils/inertValue");
-var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _ComboboxPositionerContext = require("./ComboboxPositionerContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _ComboboxPortalContext = require("../portal/ComboboxPortalContext");
 var _constants = require("../../utils/constants");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
-var _useRenderElement = require("../../utils/useRenderElement");
 var _store2 = require("../store");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
+var _usePositioner = require("../../utils/usePositioner");
+var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositioner(componentProps, forwardedRef) {
   const {
@@ -43,6 +43,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = _constants.DROPDOWN_COLLISION_AVOIDANCE,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
@@ -55,6 +56,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
+  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
   const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
@@ -80,20 +82,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
     collisionAvoidance,
     lazyFlip: true
   });
-  (0, _useScrollLock.useScrollLock)(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React.useMemo(() => {
-    const style = {
-      ...positioning.positionerStyles
-    };
-    if (!open) {
-      style.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style
-    };
-  }, [open, mounted, positioning.positionerStyles]);
+  (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(open && modal, openMethod === 'touch', positionerElement, triggerElement);
   const state = {
     open,
     side: positioning.side,
@@ -104,26 +93,19 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const contextValue = React.useMemo(() => ({
-    side: positioning.side,
-    align: positioning.align,
-    arrowRef: positioning.arrowRef,
-    arrowUncentered: positioning.arrowUncentered,
-    arrowStyles: positioning.arrowStyles,
-    anchorHidden: positioning.anchorHidden,
-    isPositioned: positioning.isPositioned
-  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles, positioning.anchorHidden, positioning.isPositioned]);
   const setPositionerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('positionerElement', element);
   });
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ComboboxPositionerContext.ComboboxPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: [mounted && modal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
       inert: (0, _inertValue.inertValue)(!open),
       cutout: inputGroupElement ?? inputElement ?? triggerElement

package/combobox/positioner/ComboboxPositionerContext.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface ComboboxPositionerContext {
-  side: Side;
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-  anchorHidden: boolean;
-  isPositioned: boolean;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export type ComboboxPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'anchorHidden' | 'isPositioned'>;
 export declare const ComboboxPositionerContext: React.Context<ComboboxPositionerContext | undefined>;
 export declare function useComboboxPositionerContext(optional?: false): ComboboxPositionerContext;
 export declare function useComboboxPositionerContext(optional: true): ComboboxPositionerContext | undefined;

package/combobox/root/AriaCombobox.d.ts

@@ -19,6 +19,11 @@ interface ComboboxRootProps<ItemValue> {
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the internal input.
+   * Useful when the combobox is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The id of the component.
    */

package/combobox/root/AriaCombobox.js

@@ -12,10 +12,10 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _store = require("@base-ui/utils/store");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -24,7 +24,7 @@ var _ComboboxRootContext = require("./ComboboxRootContext");
 var _store2 = require("../store");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useField = require("../../field/useField");
+var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
 var _FormContext = require("../../form/FormContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _utils2 = require("./utils");
@@ -51,9 +51,12 @@ function AriaCombobox(props) {
     onSelectedValueChange,
     defaultInputValue: defaultInputValueProp,
     inputValue: inputValueProp,
+    open: openProp,
+    defaultOpen = false,
     selectionMode = 'none',
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
+    form,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -179,8 +182,8 @@ function AriaCombobox(props) {
     state: 'inputValue'
   });
   const [open, setOpenUnwrapped] = (0, _useControlled.useControlled)({
-    controlled: props.open,
-    default: props.defaultOpen,
+    controlled: openProp,
+    default: defaultOpen,
     name: 'Combobox',
     state: 'open'
   });
@@ -282,6 +285,7 @@ function AriaCombobox(props) {
     allValuesRef,
     selectionEventRef,
     name,
+    form,
     disabled,
     readOnly,
     required,
@@ -355,13 +359,11 @@ function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputInsidePopup ? triggerRef : inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const forceMount = (0, _useStableCallback.useStableCallback)(() => {
     if (items) {
@@ -542,9 +544,9 @@ function AriaCombobox(props) {
     if (!store.state.submitOnItemClick) {
       return;
     }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
+    const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
+    if (formElement && typeof formElement.requestSubmit === 'function') {
+      formElement.requestSubmit();
     }
   });
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
@@ -799,9 +801,9 @@ function AriaCombobox(props) {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
     toggle: false,
-    // Apply a small delay for touch to let iOS viewport centering settle.
+    // Apply a small delay for touch to let mobile viewport/keyboard positioning settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    touchOpenDelay: inputInsidePopup ? 0 : 100,
     reason: _reasons.REASONS.inputPress
   });
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
@@ -894,6 +896,7 @@ function AriaCombobox(props) {
       getItemProps,
       selectionMode,
       name,
+      form,
       disabled,
       readOnly,
       required,
@@ -910,7 +913,7 @@ function AriaCombobox(props) {
       hasInputValue,
       requestSubmit
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
   const hiddenInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -934,11 +937,12 @@ function AriaCombobox(props) {
       const currentSerializedValue = (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, selectedValue, name, itemToStringValue]);
+  }, [multiple, selectedValue, form, name, itemToStringValue]);
   const children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       ...validation.getInputValidationProps({
@@ -956,7 +960,7 @@ function AriaCombobox(props) {
           if (event.nativeEvent.defaultPrevented) {
             return;
           }
-          const nextValue = event.target.value;
+          const nextValue = event.currentTarget.value;
           const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
@@ -972,8 +976,15 @@ function AriaCombobox(props) {
               return;
             }
             const matchingValue = valuesRef.current.find(v => {
-              const candidate = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
-              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+              // Try matching by value first (e.g., "US" for country code)
+              const candidateValue = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
+              if (candidateValue.toLowerCase() === nextValue.toLowerCase()) {
+                return true;
+              }
+              // Also try matching by label for browser autofill compatibility
+              // (browsers autofill with displayed text like "United States", not the underlying value)
+              const candidateLabel = (0, _resolveValueLabel.stringifyAsLabel)(v, itemToStringLabel);
+              if (candidateLabel.toLowerCase() === nextValue.toLowerCase()) {
                 return true;
               }
               return false;
@@ -995,6 +1006,7 @@ function AriaCombobox(props) {
         }
       }),
       id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      form: form,
       name: hiddenInputName,
       autoComplete: formAutoComplete,
       disabled: disabled,
@@ -1004,7 +1016,8 @@ function AriaCombobox(props) {
       ref: hiddenInputRef,
       style: hiddenInputName ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
       tabIndex: -1,
-      "aria-hidden": true
+      "aria-hidden": true,
+      suppressHydrationWarning: true
     }), hiddenInputs]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxRootContext.ComboboxRootContext.Provider, {

package/combobox/root/utils/useFilter.d.ts

@@ -6,8 +6,17 @@ export interface UseFilterOptions extends Intl.CollatorOptions {
   locale?: Intl.LocalesArgument | undefined;
 }
 export interface Filter {
+  /**
+   * Returns whether the item matches the query anywhere.
+   */
   contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /**
+   * Returns whether the item starts with the query.
+   */
   startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /**
+   * Returns whether the item ends with the query.
+   */
   endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
 }
 declare function getFilter(options?: UseFilterOptions): Filter;

package/combobox/row/ComboboxRow.d.ts

@@ -4,6 +4,8 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxRow: React.ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxRowState {}

package/combobox/row/ComboboxRow.js

@@ -14,11 +14,14 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxRow = exports.ComboboxRow = /*#__PURE__*/React.forwardRef(function ComboboxRow(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/combobox/status/ComboboxStatus.d.ts

@@ -3,7 +3,13 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxStatusState {}

package/combobox/status/ComboboxStatus.js

@@ -8,20 +8,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.ComboboxStatus = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useRenderElement = require("../../utils/useRenderElement");
+var _useInitialLiveRegionTextMutation = require("../utils/useInitialLiveRegionTextMutation");
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxStatus = exports.ComboboxStatus = /*#__PURE__*/React.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
+    children: childrenProp,
     ...elementProps
   } = componentProps;
+  const statusRef = (0, _useInitialLiveRegionTextMutation.useInitialLiveRegionTextMutation)();
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, statusRef],
     props: [{
+      children: childrenProp,
       role: 'status',
       'aria-live': 'polite',
       'aria-atomic': true

package/combobox/store.d.ts

@@ -60,6 +60,7 @@ export type State = {
   }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
+  form: string | undefined;
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
@@ -79,7 +80,6 @@ export type ComboboxStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
   labelId: (state: State) => string | undefined;
-  query: (state: State) => string;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
   hasSelectionChips: (state: State) => boolean;
@@ -110,25 +110,13 @@ export declare const selectors: {
   openMethod: (state: State) => InteractionType | null;
   inputInsidePopup: (state: State) => boolean;
   selectionMode: (state: State) => "none" | "multiple" | "single";
-  listRef: (state: State) => import("react").RefObject<(HTMLElement | null)[]>;
-  labelsRef: (state: State) => import("react").RefObject<(string | null)[]>;
-  popupRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  emptyRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  inputRef: (state: State) => import("react").RefObject<HTMLInputElement | null>;
-  keyboardActiveRef: (state: State) => import("react").RefObject<boolean>;
-  chipsContainerRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  clearRef: (state: State) => import("react").RefObject<HTMLButtonElement | null>;
-  valuesRef: (state: State) => import("react").RefObject<any[]>;
-  allValuesRef: (state: State) => import("react").RefObject<any[]>;
   name: (state: State) => string | undefined;
+  form: (state: State) => string | undefined;
   disabled: (state: State) => boolean;
   readOnly: (state: State) => boolean;
   required: (state: State) => boolean;
   grid: (state: State) => boolean;
-  isGrouped: (state: State) => boolean;
   virtualized: (state: State) => boolean;
-  onOpenChangeComplete: (state: State) => (open: boolean) => void;
-  openOnInputClick: (state: State) => boolean;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   modal: (state: State) => boolean;

package/combobox/store.js

@@ -10,7 +10,6 @@ var _resolveValueLabel = require("../utils/resolveValueLabel");
 const selectors = exports.selectors = {
   id: (0, _store.createSelector)(state => state.id),
   labelId: (0, _store.createSelector)(state => state.labelId),
-  query: (0, _store.createSelector)(state => state.query),
   items: (0, _store.createSelector)(state => state.items),
   selectedValue: (0, _store.createSelector)(state => state.selectedValue),
   hasSelectionChips: (0, _store.createSelector)(state => {
@@ -62,25 +61,13 @@ const selectors = exports.selectors = {
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   inputInsidePopup: (0, _store.createSelector)(state => state.inputInsidePopup),
   selectionMode: (0, _store.createSelector)(state => state.selectionMode),
-  listRef: (0, _store.createSelector)(state => state.listRef),
-  labelsRef: (0, _store.createSelector)(state => state.labelsRef),
-  popupRef: (0, _store.createSelector)(state => state.popupRef),
-  emptyRef: (0, _store.createSelector)(state => state.emptyRef),
-  inputRef: (0, _store.createSelector)(state => state.inputRef),
-  keyboardActiveRef: (0, _store.createSelector)(state => state.keyboardActiveRef),
-  chipsContainerRef: (0, _store.createSelector)(state => state.chipsContainerRef),
-  clearRef: (0, _store.createSelector)(state => state.clearRef),
-  valuesRef: (0, _store.createSelector)(state => state.valuesRef),
-  allValuesRef: (0, _store.createSelector)(state => state.allValuesRef),
   name: (0, _store.createSelector)(state => state.name),
+  form: (0, _store.createSelector)(state => state.form),
   disabled: (0, _store.createSelector)(state => state.disabled),
   readOnly: (0, _store.createSelector)(state => state.readOnly),
   required: (0, _store.createSelector)(state => state.required),
   grid: (0, _store.createSelector)(state => state.grid),
-  isGrouped: (0, _store.createSelector)(state => state.isGrouped),
   virtualized: (0, _store.createSelector)(state => state.virtualized),
-  onOpenChangeComplete: (0, _store.createSelector)(state => state.onOpenChangeComplete),
-  openOnInputClick: (0, _store.createSelector)(state => state.openOnInputClick),
   itemToStringLabel: (0, _store.createSelector)(state => state.itemToStringLabel),
   isItemEqualToValue: (0, _store.createSelector)(state => state.isItemEqualToValue),
   modal: (0, _store.createSelector)(state => state.modal),

package/combobox/trigger/ComboboxTrigger.d.ts

@@ -5,6 +5,8 @@ import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxTriggerState extends FieldRootState {

package/combobox/trigger/ComboboxTrigger.js

@@ -30,6 +30,8 @@ const BOUNDARY_OFFSET = 2;
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -38,6 +40,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -133,7 +136,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('triggerElement', element);

package/combobox/utils/handleInputPress.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+import type { ComboboxStore } from "../store.js";
+export declare function handleInputPress(event: React.MouseEvent<HTMLElement> & {
+  baseUIHandlerPrevented?: boolean | undefined;
+}, store: ComboboxStore, disabled: boolean, readOnly: boolean, shouldIgnoreTarget?: ((target: Element | null) => boolean) | undefined): void;

package/combobox/utils/handleInputPress.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleInputPress = handleInputPress;
+var _dom = require("@floating-ui/utils/dom");
+var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _element = require("../../floating-ui-react/utils/element");
+function handleInputPress(event, store, disabled, readOnly, shouldIgnoreTarget) {
+  if (event.baseUIHandlerPrevented || readOnly) {
+    return;
+  }
+  const target = (0, _element.getTarget)(event.nativeEvent);
+  const targetElement = (0, _dom.isElement)(target) ? target : null;
+  if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || (0, _element.isInteractiveElement)(targetElement))) {
+    return;
+  }
+  event.preventDefault();
+  if (disabled) {
+    return;
+  }
+  store.state.inputRef.current?.focus();
+  if (store.state.openOnInputClick) {
+    store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputPress, event.nativeEvent));
+  }
+}

package/combobox/utils/useInitialLiveRegionTextMutation.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+export declare function useInitialLiveRegionTextMutation<T extends HTMLElement>(): React.RefObject<T | null>;

package/combobox/utils/useInitialLiveRegionTextMutation.js

@@ -0,0 +1,61 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = void 0;
+exports.useInitialLiveRegionTextMutation = useInitialLiveRegionTextMutation;
+var React = _interopRequireWildcard(require("react"));
+var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+// Word Joiner is invisible and zero-width, so it forces a text mutation without shifting layout.
+const LIVE_REGION_MARKER = '\u2060';
+// Safari VoiceOver needed roughly 200ms to reliably notice the initial polite live-region change.
+const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = exports.INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+function findLastTextNode(root) {
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let lastTextNode = null;
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode;
+    if (textNode.nodeValue !== '') {
+      lastTextNode = textNode;
+    }
+  }
+  return lastTextNode;
+}
+function useInitialLiveRegionTextMutation() {
+  const timeout = (0, _useTimeout.useTimeout)();
+  const rootRef = React.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React.useEffect(() => {
+    if (_detectBrowser.isIOS) {
+      return undefined;
+    }
+    const root = rootRef.current;
+    if (root == null) {
+      return undefined;
+    }
+    const textNode = findLastTextNode(root);
+    if (textNode == null) {
+      return undefined;
+    }
+    const originalValue = textNode.nodeValue ?? '';
+    const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
+    textNode.nodeValue = markedValue;
+    timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    });
+    return () => {
+      timeout.clear();
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    };
+  }, [rootRef, timeout]);
+  return rootRef;
+}

package/composite/composite.d.ts

@@ -10,6 +10,8 @@ export declare const ARROW_LEFT = "ArrowLeft";
 export declare const ARROW_RIGHT = "ArrowRight";
 export declare const HOME = "Home";
 export declare const END = "End";
+export declare const PAGE_UP = "PageUp";
+export declare const PAGE_DOWN = "PageDown";
 export declare const HORIZONTAL_KEYS: Set<string>;
 export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const VERTICAL_KEYS: Set<string>;

package/composite/composite.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS = exports.SHIFT = exports.MODIFIER_KEYS = exports.META = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS = exports.HOME = exports.END = exports.CONTROL = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_KEYS = exports.ARROW_DOWN = exports.ALT = exports.ALL_KEYS = void 0;
+exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS = exports.SHIFT = exports.PAGE_UP = exports.PAGE_DOWN = exports.MODIFIER_KEYS = exports.META = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS = exports.HOME = exports.END = exports.CONTROL = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_KEYS = exports.ARROW_DOWN = exports.ALT = exports.ALL_KEYS = void 0;
 Object.defineProperty(exports, "createGridCellMap", {
   enumerable: true,
   get: function () {
@@ -74,6 +74,8 @@ const ARROW_LEFT = exports.ARROW_LEFT = 'ArrowLeft';
 const ARROW_RIGHT = exports.ARROW_RIGHT = 'ArrowRight';
 const HOME = exports.HOME = 'Home';
 const END = exports.END = 'End';
+const PAGE_UP = exports.PAGE_UP = 'PageUp';
+const PAGE_DOWN = exports.PAGE_DOWN = 'PageDown';
 const HORIZONTAL_KEYS = exports.HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
 const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT, HOME, END]);
 const VERTICAL_KEYS = exports.VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);

package/composite/item/CompositeItem.d.ts

@@ -6,7 +6,7 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  */
 export declare function CompositeItem<Metadata, State extends Record<string, any>>(componentProps: CompositeItem.Props<Metadata, State>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export interface CompositeItemState {}
-export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className'> {
+export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className' | 'style'> {
   children?: React.ReactNode;
   metadata?: Metadata | undefined;
   refs?: React.Ref<HTMLElement | null>[] | undefined;