@base-ui/react 1.3.0 → 1.4.0

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

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A container for the chips in a multiselectable input.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipsState {}

package/esm/combobox/chips/ComboboxChips.js

@@ -8,16 +8,20 @@ import { CompositeList } from "../../composite/list/CompositeList.js";
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { selectors } from "../store.js";
 import { EMPTY_OBJECT } from "../../utils/constants.js";
+import { handleInputPress } from "../utils/handleInputPress.js";
 
 /**
  * A container for the chips in a multiselectable input.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChips(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -34,7 +38,11 @@ export const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChip
     // arrow keys inside a container unless it has a toolbar role.
     props: [hasSelectionChips ? {
       role: 'toolbar'
-    } : EMPTY_OBJECT, elementProps]
+    } : EMPTY_OBJECT, {
+      onMouseDown(event) {
+        handleInputPress(event, store, store.state.disabled, store.state.readOnly);
+      }
+    }, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,

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

@@ -4,6 +4,8 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Clears the value when clicked.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<ComboboxClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxClearState {

package/esm/combobox/clear/ComboboxClear.js

@@ -21,6 +21,8 @@ const stateAttributesMapping = {
 /**
  * Clears the value when clicked.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClear(componentProps, forwardedRef) {
   const {
@@ -29,6 +31,7 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
     disabled: disabledProp = false,
     nativeButton = true,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -4,6 +4,8 @@ import * as React from 'react';
  * Doesn't render its own HTML element.
  *
  * If rendering a flat list, pass a function child to the `List` component instead, which implicitly wraps it.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare function ComboboxCollection(props: ComboboxCollection.Props): React.JSX.Element | null;
 export interface ComboboxCollectionState {}

package/esm/combobox/collection/ComboboxCollection.js

@@ -9,6 +9,8 @@ import { useGroupCollectionContext } from "./GroupCollectionContext.js";
  * Doesn't render its own HTML element.
  *
  * If rendering a flat list, pass a function child to the `List` component instead, which implicitly wraps it.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ComboboxCollection(props) {

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

@@ -4,7 +4,13 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Renders its children only when the list is empty.
  * Requires the `items` prop on the root component.
  * Announces changes politely to screen readers.
+ * 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 ComboboxEmpty: React.ForwardRefExoticComponent<Omit<ComboboxEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxEmptyState {}

package/esm/combobox/empty/ComboboxEmpty.js

@@ -3,17 +3,25 @@
 import * as React from 'react';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useComboboxDerivedItemsContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { useInitialLiveRegionTextMutation } from "../utils/useInitialLiveRegionTextMutation.js";
 
 /**
  * Renders its children only when the list is empty.
  * Requires the `items` prop on the root component.
  * Announces changes politely to screen readers.
+ * 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 const ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     children: childrenProp,
     ...elementProps
   } = componentProps;
@@ -21,9 +29,10 @@ export const ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpt
     filteredItems
   } = useComboboxDerivedItemsContext();
   const store = useComboboxRootContext();
+  const emptyRef = useInitialLiveRegionTextMutation();
   const children = filteredItems.length === 0 ? childrenProp : null;
   return useRenderElement('div', componentProps, {
-    ref: [forwardedRef, store.state.emptyRef],
+    ref: [forwardedRef, store.state.emptyRef, emptyRef],
     props: [{
       children,
       role: 'status',

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

@@ -3,6 +3,8 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Groups related items with the corresponding label.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupState {}

package/esm/combobox/group/ComboboxGroup.js

@@ -8,12 +8,15 @@ import { GroupCollectionProvider } from "../collection/GroupCollectionContext.js
 /**
  * Groups related items with the corresponding label.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxGroup = /*#__PURE__*/React.forwardRef(function ComboboxGroup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     items,
     ...elementProps
   } = componentProps;

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

@@ -3,6 +3,8 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupLabelState {}

package/esm/combobox/group-label/ComboboxGroupLabel.js

@@ -9,11 +9,14 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxGroupLabel = /*#__PURE__*/React.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

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

@@ -3,6 +3,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An icon that indicates that the trigger button opens the popup.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxIconState {}

package/esm/combobox/icon/ComboboxIcon.js

@@ -6,11 +6,14 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 /**
  * An icon that indicates that the trigger button opens the popup.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const element = useRenderElement('span', componentProps, {

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

@@ -5,6 +5,8 @@ import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface ComboboxInputState extends FieldRootState {

package/esm/combobox/input/ComboboxInput.js

@@ -24,6 +24,8 @@ import { ComboboxInternalDismissButton } from "../utils/ComboboxInternalDismissB
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(componentProps, forwardedRef) {
@@ -32,6 +34,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     className,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -60,6 +63,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const name = useStore(store, selectors.name);
+  const form = useStore(store, selectors.form);
   const selectionMode = useStore(store, selectors.selectionMode);
   const autoHighlightMode = useStore(store, selectors.autoHighlight);
   const inputProps = useStore(store, selectors.inputProps);
@@ -112,6 +116,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     const {
       highlightedChipIndex
     } = comboboxChipsContext;
+    const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
     if (highlightedChipIndex !== undefined) {
       if (event.key === 'ArrowLeft') {
         event.preventDefault();
@@ -122,7 +127,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         }
       } else if (event.key === 'ArrowRight') {
         event.preventDefault();
-        if (highlightedChipIndex < selectedValue.length - 1) {
+        if (highlightedChipIndex < renderedChipsCount - 1) {
           nextIndex = highlightedChipIndex + 1;
         } else {
           nextIndex = undefined;
@@ -145,8 +150,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     // Handle navigation when no chip is highlighted
     if (event.key === 'ArrowLeft' && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
       event.preventDefault();
-      const lastChipIndex = Math.max(selectedValue.length - 1, 0);
-      nextIndex = lastChipIndex;
+      nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
     } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
       store.state.setIndices({
         activeIndex: null,
@@ -169,6 +173,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
+      form,
       ...(selectionMode === 'none' && name && {
         name
       }),
@@ -336,7 +341,9 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
 
         // Handle deletion when no chip is highlighted and the input is empty.
         if (comboboxChipsContext && event.key === 'Backspace' && input.value === '' && comboboxChipsContext.highlightedChipIndex === undefined && Array.isArray(selectedValue) && selectedValue.length > 0) {
-          const newValue = selectedValue.slice(0, -1);
+          const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
+          const removalIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : selectedValue.length - 1;
+          const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
           store.state.setIndices({
             activeIndex: null,

package/esm/combobox/input-group/ComboboxInputGroup.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { FieldRoot } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxInputGroup: React.ForwardRefExoticComponent<Omit<ComboboxInputGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxInputGroupState extends FieldRoot.State {

package/esm/combobox/input-group/ComboboxInputGroup.js

@@ -8,20 +8,24 @@ import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { useComboboxDerivedItemsContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { selectors } from "../store.js";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
+import { handleInputPress } from "../utils/handleInputPress.js";
+import { contains } from "../../floating-ui-react/utils/element.js";
 
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
-    state: fieldState,
-    disabled: fieldDisabled
+    state: fieldState
   } = useFieldRootContext();
   const store = useComboboxRootContext();
   const {
@@ -36,7 +40,7 @@ export const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function Combobo
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const selectionMode = useStore(store, selectors.selectionMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
-  const disabled = fieldDisabled || comboboxDisabled;
+  const disabled = comboboxDisabled;
   const listEmpty = filteredItems.length === 0;
   const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
   const state = {
@@ -54,7 +58,12 @@ export const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function Combobo
   return useRenderElement('div', componentProps, {
     ref: [forwardedRef, setInputGroupElement],
     props: [{
-      role: 'group'
+      role: 'group',
+      onMouseDown(event) {
+        handleInputPress(event, store, disabled, readOnly, target => {
+          return contains(store.state.chipsContainerRef.current, target);
+        });
+      }
     }, elementProps],
     state,
     stateAttributesMapping: triggerStateAttributesMapping

package/esm/combobox/item/ComboboxItem.d.ts

@@ -3,6 +3,8 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
 /**
  * An individual item in the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxItem: React.NamedExoticComponent<Omit<ComboboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxItemState {

package/esm/combobox/item/ComboboxItem.js

@@ -16,6 +16,8 @@ import { compareItemEquality, findItemIndex } from "../../utils/itemEquality.js"
 /**
  * An individual item in the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
@@ -26,6 +28,7 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
     index: indexProp,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const didPointerDownRef = React.useRef(false);
@@ -141,6 +144,11 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
       didPointerDownRef.current = true;
       event.preventDefault();
     },
+    onMouseDown(event) {
+      // iOS Safari can emit a synthetic mousedown for touch taps without a preceding
+      // pointerdown. Prevent default here too so tapping an item does not blur the input.
+      event.preventDefault();
+    },
     onClick(event) {
       if (disabled || readOnly) {
         return;

package/esm/combobox/item-indicator/ComboboxItemIndicator.d.ts

@@ -4,6 +4,8 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicatorState> {

package/esm/combobox/item-indicator/ComboboxItemIndicator.js

@@ -10,6 +10,8 @@ import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
 /**
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
@@ -36,6 +38,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/esm/combobox/label/ComboboxLabel.js

@@ -22,6 +22,7 @@ export const ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.

package/esm/combobox/list/ComboboxList.d.ts

@@ -3,6 +3,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A list container for the items.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxList: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxListState {

package/esm/combobox/list/ComboboxList.js

@@ -14,6 +14,8 @@ import { stopEvent } from "../../floating-ui-react/utils.js";
 /**
  * A list container for the items.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(componentProps, forwardedRef) {
@@ -21,6 +23,7 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -28,16 +31,12 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
   const floatingRootContext = useComboboxFloatingContext();
   const hasPositionerContext = Boolean(useComboboxPositionerContext(true));
   const {
-    filteredItems
+    filteredItems,
+    hasItems
   } = useComboboxDerivedItemsContext();
-  const items = useStore(store, selectors.items);
-  const labelsRef = useStore(store, selectors.labelsRef);
-  const listRef = useStore(store, selectors.listRef);
   const selectionMode = useStore(store, selectors.selectionMode);
   const grid = useStore(store, selectors.grid);
   const popupProps = useStore(store, selectors.popupProps);
-  const disabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
   const virtualized = useStore(store, selectors.virtualized);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
@@ -74,7 +73,7 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
       role: grid ? 'grid' : 'listbox',
       'aria-multiselectable': multiple ? 'true' : undefined,
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (store.state.disabled || store.state.readOnly) {
           return;
         }
         if (event.key === 'Enter') {
@@ -105,8 +104,8 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
     return element;
   }
   return /*#__PURE__*/_jsx(CompositeList, {
-    elementsRef: listRef,
-    labelsRef: items ? undefined : labelsRef,
+    elementsRef: store.state.listRef,
+    labelsRef: hasItems ? undefined : store.state.labelsRef,
     children: element
   });
 });

package/esm/combobox/popup/ComboboxPopup.d.ts

@@ -6,6 +6,8 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * A container for the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPopupState {

package/esm/combobox/popup/ComboboxPopup.js

@@ -22,11 +22,14 @@ const stateAttributesMapping = {
 /**
  * A container for the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     initialFocus,
     finalFocus,
     ...elementProps

package/esm/combobox/portal/ComboboxPortal.d.ts

@@ -4,6 +4,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPortalState {}

package/esm/combobox/portal/ComboboxPortal.js

@@ -11,6 +11,8 @@ import { selectors } from "../store.js";
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxPortal = /*#__PURE__*/React.forwardRef(function ComboboxPortal(props, forwardedRef) {

package/esm/combobox/positioner/ComboboxPositioner.d.ts

@@ -4,6 +4,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxPositioner: React.ForwardRefExoticComponent<Omit<ComboboxPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPositionerState {