@base-ui/react 1.3.0 → 1.4.1

package/esm/combobox/icon/ComboboxIcon.js

@@ -1,16 +1,19 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/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

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
+ *
+ * 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

@@ -4,26 +4,28 @@ import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { isAndroid, isFirefox } from '@base-ui/utils/detectBrowser';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { DEFAULT_FIELD_STATE_ATTRIBUTES } from "../../field/utils/constants.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { DEFAULT_FIELD_STATE_ATTRIBUTES } from "../../internals/field-constants/constants.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { useComboboxChipsContext } from "../chips/ComboboxChipsContext.js";
 import { stopEvent } from "../../floating-ui-react/utils.js";
 import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerContext.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 import { ComboboxInternalDismissButton } from "../utils/ComboboxInternalDismissButton.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)
  */
 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/ComboboxInputDataAttributes.d.ts

@@ -25,11 +25,11 @@ export declare enum ComboboxInputDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/combobox/input/ComboboxInputDataAttributes.js

@@ -26,11 +26,11 @@ export let ComboboxInputDataAttributes = function (ComboboxInputDataAttributes)
    */
   ComboboxInputDataAttributes["required"] = "data-required";
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   ComboboxInputDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   ComboboxInputDataAttributes["invalid"] = "data-invalid";
   /**

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 "../../internals/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

@@ -3,25 +3,29 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStore } from '@base-ui/utils/store';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/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/input-group/ComboboxInputGroupDataAttributes.d.ts

@@ -21,11 +21,11 @@ export declare enum ComboboxInputGroupDataAttributes {
    */
   popupSide = "data-popup-side",
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

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

@@ -21,11 +21,11 @@ export let ComboboxInputGroupDataAttributes = /*#__PURE__*/function (ComboboxInp
    */
   ComboboxInputGroupDataAttributes["popupSide"] = "data-popup-side";
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   ComboboxInputGroupDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   ComboboxInputGroupDataAttributes["invalid"] = "data-invalid";
   /**

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

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 /**
  * 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

@@ -5,17 +5,19 @@ import * as ReactDOM from 'react-dom';
 import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useComboboxRootContext, useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.js";
-import { useCompositeListItem, IndexGuessBehavior } from "../../composite/list/useCompositeListItem.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useCompositeListItem, IndexGuessBehavior } from "../../internals/composite/list/useCompositeListItem.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { ComboboxItemContext } from "./ComboboxItemContext.js";
 import { selectors } from "../store.js";
-import { useButton } from "../../use-button/index.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { useComboboxRowContext } from "../row/ComboboxRowContext.js";
-import { compareItemEquality, findItemIndex } from "../../utils/itemEquality.js";
+import { compareItemEquality, findItemIndex } from "../../internals/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

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/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

@@ -2,14 +2,16 @@
 
 import * as React from 'react';
 import { useComboboxItemContext } from "../item/ComboboxItemContext.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/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/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -1,4 +1,4 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
   /**
    * Present when the indicator is animating in.

package/esm/combobox/label/ComboboxLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { FieldRoot } from "../../field/root/FieldRoot.js";
 /**
  * An accessible label that is automatically associated with the combobox trigger.

package/esm/combobox/label/ComboboxLabel.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import { error } from '@base-ui/utils/error';
 import { SafeReact } from '@base-ui/utils/safeReact';
 import { useStore } from '@base-ui/utils/store';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
-import { useLabel } from "../../labelable-provider/useLabel.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useLabel } from "../../internals/labelable-provider/useLabel.js";
 import { getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { selectors } from "../store.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

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/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

@@ -3,17 +3,19 @@
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useComboboxDerivedItemsContext, useComboboxFloatingContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerContext.js";
 import { selectors } from "../store.js";
 import { ComboboxCollection } from "../collection/ComboboxCollection.js";
-import { CompositeList } from "../../composite/list/CompositeList.js";
+import { CompositeList } from "../../internals/composite/list/CompositeList.js";
 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

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/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

@@ -3,13 +3,13 @@
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { FloatingFocusManager } from "../../floating-ui-react/index.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useComboboxFloatingContext, useComboboxRootContext, useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.js";
 import { selectors } from "../store.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerContext.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { contains, getTarget } from "../../floating-ui-react/utils.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { ComboboxInternalDismissButton } from "../utils/ComboboxInternalDismissButton.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

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/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 {