@base-ui/react 1.3.0 → 1.4.0

package/combobox/chip-remove/ComboboxChipRemove.js

@@ -20,6 +20,8 @@ var _itemEquality = require("../../utils/itemEquality");
 /**
  * A button to remove a chip.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxChipRemove = exports.ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
   const {
@@ -27,6 +29,7 @@ const ComboboxChipRemove = exports.ComboboxChipRemove = /*#__PURE__*/React.forwa
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
@@ -78,6 +81,9 @@ const ComboboxChipRemove = exports.ComboboxChipRemove = /*#__PURE__*/React.forwa
     state,
     props: [{
       tabIndex: -1,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
       onClick(event) {
         if (disabled || readOnly) {
           return;

package/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/combobox/chips/ComboboxChips.js

@@ -14,15 +14,19 @@ var _CompositeList = require("../../composite/list/CompositeList");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
 var _constants = require("../../utils/constants");
+var _handleInputPress = require("../utils/handleInputPress");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A container for the chips in a multiselectable input.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxChips = exports.ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChips(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
@@ -39,7 +43,11 @@ const ComboboxChips = exports.ComboboxChips = /*#__PURE__*/React.forwardRef(func
     // arrow keys inside a container unless it has a toolbar role.
     props: [hasSelectionChips ? {
       role: 'toolbar'
-    } : _constants.EMPTY_OBJECT, elementProps]
+    } : _constants.EMPTY_OBJECT, {
+      onMouseDown(event) {
+        (0, _handleInputPress.handleInputPress)(event, store, store.state.disabled, store.state.readOnly);
+      }
+    }, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,

package/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/combobox/clear/ComboboxClear.js

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

package/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/combobox/collection/ComboboxCollection.js

@@ -15,6 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 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)
  */
 function ComboboxCollection(props) {
   const {

package/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/combobox/empty/ComboboxEmpty.js

@@ -9,16 +9,24 @@ exports.ComboboxEmpty = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _useInitialLiveRegionTextMutation = require("../utils/useInitialLiveRegionTextMutation");
 /**
  * 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)
  */
 const ComboboxEmpty = exports.ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     children: childrenProp,
     ...elementProps
   } = componentProps;
@@ -26,9 +34,10 @@ const ComboboxEmpty = exports.ComboboxEmpty = /*#__PURE__*/React.forwardRef(func
     filteredItems
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const emptyRef = (0, _useInitialLiveRegionTextMutation.useInitialLiveRegionTextMutation)();
   const children = filteredItems.length === 0 ? childrenProp : null;
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [forwardedRef, store.state.emptyRef],
+    ref: [forwardedRef, store.state.emptyRef, emptyRef],
     props: [{
       children,
       role: 'status',

package/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/combobox/group/ComboboxGroup.js

@@ -14,11 +14,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups related items with the corresponding label.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxGroup = exports.ComboboxGroup = /*#__PURE__*/React.forwardRef(function ComboboxGroup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     items,
     ...elementProps
   } = componentProps;

package/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/combobox/group-label/ComboboxGroupLabel.js

@@ -14,11 +14,14 @@ var _useRenderElement = require("../../utils/useRenderElement");
 /**
  * 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)
  */
 const ComboboxGroupLabel = exports.ComboboxGroupLabel = /*#__PURE__*/React.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/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/combobox/icon/ComboboxIcon.js

@@ -11,11 +11,14 @@ var _useRenderElement = require("../../utils/useRenderElement");
 /**
  * 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)
  */
 const ComboboxIcon = exports.ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {

package/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/combobox/input/ComboboxInput.js

@@ -30,6 +30,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 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)
  */
 const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(componentProps, forwardedRef) {
   const {
@@ -37,6 +39,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     className,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -65,6 +68,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const name = (0, _store.useStore)(store, _store2.selectors.name);
+  const form = (0, _store.useStore)(store, _store2.selectors.form);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
   const autoHighlightMode = (0, _store.useStore)(store, _store2.selectors.autoHighlight);
   const inputProps = (0, _store.useStore)(store, _store2.selectors.inputProps);
@@ -117,6 +121,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     const {
       highlightedChipIndex
     } = comboboxChipsContext;
+    const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
     if (highlightedChipIndex !== undefined) {
       if (event.key === 'ArrowLeft') {
         event.preventDefault();
@@ -127,7 +132,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         }
       } else if (event.key === 'ArrowRight') {
         event.preventDefault();
-        if (highlightedChipIndex < selectedValue.length - 1) {
+        if (highlightedChipIndex < renderedChipsCount - 1) {
           nextIndex = highlightedChipIndex + 1;
         } else {
           nextIndex = undefined;
@@ -150,8 +155,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     // 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,
@@ -174,6 +178,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
+      form,
       ...(selectionMode === 'none' && name && {
         name
       }),
@@ -341,7 +346,9 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
 
         // 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/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/combobox/input-group/ComboboxInputGroup.js

@@ -14,19 +14,23 @@ var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
+var _handleInputPress = require("../utils/handleInputPress");
+var _element = require("../../floating-ui-react/utils/element");
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
-    state: fieldState,
-    disabled: fieldDisabled
+    state: fieldState
   } = (0, _FieldRootContext.useFieldRootContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const {
@@ -41,7 +45,7 @@ const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwa
   const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const selectionMode = (0, _store.useStore)(store, _store2.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 = {
@@ -59,7 +63,12 @@ const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwa
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, setInputGroupElement],
     props: [{
-      role: 'group'
+      role: 'group',
+      onMouseDown(event) {
+        (0, _handleInputPress.handleInputPress)(event, store, disabled, readOnly, target => {
+          return (0, _element.contains)(store.state.chipsContainerRef.current, target);
+        });
+      }
     }, elementProps],
     state,
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping

package/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/combobox/item/ComboboxItem.js

@@ -22,6 +22,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual item in the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
   const {
@@ -31,6 +33,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
     index: indexProp,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const didPointerDownRef = React.useRef(false);
@@ -146,6 +149,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
       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/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/combobox/item-indicator/ComboboxItemIndicator.js

@@ -16,6 +16,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxItemIndicator = exports.ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
   const keepMounted = componentProps.keepMounted ?? false;
@@ -41,6 +43,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/combobox/label/ComboboxLabel.js

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

package/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/combobox/list/ComboboxList.js

@@ -20,12 +20,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A list container for the items.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(componentProps, forwardedRef) {
   var _ComboboxCollection;
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -33,16 +36,12 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
   const floatingRootContext = (0, _ComboboxRootContext.useComboboxFloatingContext)();
   const hasPositionerContext = Boolean((0, _ComboboxPositionerContext.useComboboxPositionerContext)(true));
   const {
-    filteredItems
+    filteredItems,
+    hasItems
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
-  const items = (0, _store.useStore)(store, _store2.selectors.items);
-  const labelsRef = (0, _store.useStore)(store, _store2.selectors.labelsRef);
-  const listRef = (0, _store.useStore)(store, _store2.selectors.listRef);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
   const grid = (0, _store.useStore)(store, _store2.selectors.grid);
   const popupProps = (0, _store.useStore)(store, _store2.selectors.popupProps);
-  const disabled = (0, _store.useStore)(store, _store2.selectors.disabled);
-  const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const virtualized = (0, _store.useStore)(store, _store2.selectors.virtualized);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
@@ -79,7 +78,7 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
       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') {
@@ -110,8 +109,8 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
     return element;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-    elementsRef: listRef,
-    labelsRef: items ? undefined : labelsRef,
+    elementsRef: store.state.listRef,
+    labelsRef: hasItems ? undefined : store.state.labelsRef,
     children: element
   });
 });

package/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/combobox/popup/ComboboxPopup.js

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

package/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/combobox/portal/ComboboxPortal.js

@@ -17,6 +17,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 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)
  */
 const ComboboxPortal = exports.ComboboxPortal = /*#__PURE__*/React.forwardRef(function ComboboxPortal(props, forwardedRef) {
   const {

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