@base-ui/react 1.6.0 → 1.7.0

package/combobox/item/ComboboxItem.js

@@ -32,27 +32,27 @@ function ComboboxItemInner(props) {
     style,
     value: itemValue = null,
     index: indexProp,
-    disabled = false,
+    disabled: disabledProp = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
-  const didPointerDownRef = React.useRef(false);
   const textRef = React.useRef(null);
   const listItem = (0, _useCompositeListItem.useCompositeListItem)({
+    guess: true,
     index: indexProp,
-    textRef,
-    indexGuessBehavior: _useCompositeListItem.IndexGuessBehavior.GuessFromOrder
+    textRef
   });
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const isRow = (0, _ComboboxRowContext.useComboboxRowContext)();
   const hasItems = (0, _ComboboxRootContext.useComboboxHasItemsContext)();
-  const open = (0, _store.useStore)(store, _store2.selectors.open);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
+  const rootDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
+  const disabled = rootDisabled || disabledProp;
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? indexFromFilter ?? -1 : listItem.index);
-  const hasRegistered = listItem.index !== -1;
+  const index = indexProp ?? indexFromFilter ?? listItem.index;
+  const hasRegistered = index !== -1;
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, index);
   const matchesSelectedValue = (0, _store.useStore)(store, _store2.selectors.isSelected, itemValue);
@@ -77,31 +77,24 @@ function ComboboxItemInner(props) {
     }
     const visibleMap = store.state.valuesRef.current;
     visibleMap[index] = itemValue;
-
-    // Stable registry that doesn't depend on filtering. Assume that no
-    // filtering had occurred at this point; otherwise, an `items` prop is
-    // required.
-    if (selectionMode !== 'none') {
-      store.state.allValuesRef.current.push(itemValue);
-    }
     return () => {
       delete visibleMap[index];
     };
-  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
+  }, [hasRegistered, hasItems, index, itemValue, store]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!open) {
-      didPointerDownRef.current = false;
-      return;
-    }
     if (!hasRegistered || hasItems) {
       return;
     }
+
+    // Runs while closed as well (the list can stay mounted via `keepMounted` or a
+    // force-mount) so the index tracks the item's composite position, keeping features
+    // like closed-trigger typeahead in sync when the rendered order changes.
     const selectedValue = store.state.selectedValue;
     const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
     if ((0, _itemEquality.compareItemEquality)(itemValue, lastSelectedValue, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
-  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  }, [hasRegistered, hasItems, store, index, itemValue, isItemEqualToValue]);
   const {
     getButtonProps,
     buttonRef
@@ -136,7 +129,12 @@ function ComboboxItemInner(props) {
     // as it should be a `<div>` instead.
     tabIndex: undefined,
     onPointerDownCapture(event) {
-      didPointerDownRef.current = true;
+      // The compat `mouseup` only fires for the primary pointer, so a non-primary
+      // touch must not overwrite the shared ref — a mismatch would make the primary
+      // pointer's release read as a drag-select and commit a second time after `click`.
+      if (event.isPrimary) {
+        store.state.pointerDownItemRef.current = event.currentTarget;
+      }
       event.preventDefault();
     },
     onMouseDown(event) {
@@ -151,8 +149,8 @@ function ComboboxItemInner(props) {
       commitSelection(event.nativeEvent);
     },
     onMouseUp(event) {
-      const pointerStartedOnItem = didPointerDownRef.current;
-      didPointerDownRef.current = false;
+      const pointerStartedOnItem = store.state.pointerDownItemRef.current === event.currentTarget;
+      store.state.pointerDownItemRef.current = null;
       if (disabled || readOnly || event.button !== 0 || pointerStartedOnItem || !highlighted) {
         return;
       }

package/combobox/item/ComboboxItem.mjs

@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom';
 import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useComboboxRootContext, useComboboxHasItemsContext, useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.mjs";
-import { useCompositeListItem, IndexGuessBehavior } from "../../internals/composite/list/useCompositeListItem.mjs";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { ComboboxItemContext } from "./ComboboxItemContext.mjs";
 import { selectors } from "../store.mjs";
@@ -26,27 +26,27 @@ function ComboboxItemInner(props) {
     style,
     value: itemValue = null,
     index: indexProp,
-    disabled = false,
+    disabled: disabledProp = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
-  const didPointerDownRef = React.useRef(false);
   const textRef = React.useRef(null);
   const listItem = useCompositeListItem({
+    guess: true,
     index: indexProp,
-    textRef,
-    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
+    textRef
   });
   const store = useComboboxRootContext();
   const isRow = useComboboxRowContext();
   const hasItems = useComboboxHasItemsContext();
-  const open = useStore(store, selectors.open);
   const selectionMode = useStore(store, selectors.selectionMode);
+  const rootDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
+  const disabled = rootDisabled || disabledProp;
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? indexFromFilter ?? -1 : listItem.index);
-  const hasRegistered = listItem.index !== -1;
+  const index = indexProp ?? indexFromFilter ?? listItem.index;
+  const hasRegistered = index !== -1;
   const rootId = useStore(store, selectors.id);
   const highlighted = useStore(store, selectors.isActive, index);
   const matchesSelectedValue = useStore(store, selectors.isSelected, itemValue);
@@ -71,31 +71,24 @@ function ComboboxItemInner(props) {
     }
     const visibleMap = store.state.valuesRef.current;
     visibleMap[index] = itemValue;
-
-    // Stable registry that doesn't depend on filtering. Assume that no
-    // filtering had occurred at this point; otherwise, an `items` prop is
-    // required.
-    if (selectionMode !== 'none') {
-      store.state.allValuesRef.current.push(itemValue);
-    }
     return () => {
       delete visibleMap[index];
     };
-  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
+  }, [hasRegistered, hasItems, index, itemValue, store]);
   useIsoLayoutEffect(() => {
-    if (!open) {
-      didPointerDownRef.current = false;
-      return;
-    }
     if (!hasRegistered || hasItems) {
       return;
     }
+
+    // Runs while closed as well (the list can stay mounted via `keepMounted` or a
+    // force-mount) so the index tracks the item's composite position, keeping features
+    // like closed-trigger typeahead in sync when the rendered order changes.
     const selectedValue = store.state.selectedValue;
     const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
     if (compareItemEquality(itemValue, lastSelectedValue, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
-  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  }, [hasRegistered, hasItems, store, index, itemValue, isItemEqualToValue]);
   const {
     getButtonProps,
     buttonRef
@@ -130,7 +123,12 @@ function ComboboxItemInner(props) {
     // as it should be a `<div>` instead.
     tabIndex: undefined,
     onPointerDownCapture(event) {
-      didPointerDownRef.current = true;
+      // The compat `mouseup` only fires for the primary pointer, so a non-primary
+      // touch must not overwrite the shared ref — a mismatch would make the primary
+      // pointer's release read as a drag-select and commit a second time after `click`.
+      if (event.isPrimary) {
+        store.state.pointerDownItemRef.current = event.currentTarget;
+      }
       event.preventDefault();
     },
     onMouseDown(event) {
@@ -145,8 +143,8 @@ function ComboboxItemInner(props) {
       commitSelection(event.nativeEvent);
     },
     onMouseUp(event) {
-      const pointerStartedOnItem = didPointerDownRef.current;
-      didPointerDownRef.current = false;
+      const pointerStartedOnItem = store.state.pointerDownItemRef.current === event.currentTarget;
+      store.state.pointerDownItemRef.current = null;
       if (disabled || readOnly || event.button !== 0 || pointerStartedOnItem || !highlighted) {
         return;
       }

package/combobox/item-indicator/ComboboxItemIndicator.js

@@ -20,11 +20,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 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;
   const {
     selected
   } = (0, _ComboboxItemContext.useComboboxItemContext)();
-  const shouldRender = keepMounted || selected;
+  const shouldRender = componentProps.keepMounted || selected;
   if (!shouldRender) {
     return null;
   }

package/combobox/item-indicator/ComboboxItemIndicator.mjs

@@ -15,11 +15,10 @@ import { transitionStatusMapping } from "../../internals/stateAttributesMapping.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
-  const keepMounted = componentProps.keepMounted ?? false;
   const {
     selected
   } = useComboboxItemContext();
-  const shouldRender = keepMounted || selected;
+  const shouldRender = componentProps.keepMounted || selected;
   if (!shouldRender) {
     return null;
   }

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.d.mts

@@ -1,6 +1,6 @@
 export declare enum ComboboxItemIndicatorDataAttributes {
   /**
-   * Present when the indicator is animating in.
+   * Present when the indicator begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.d.ts

@@ -1,6 +1,6 @@
 export declare enum ComboboxItemIndicatorDataAttributes {
   /**
-   * Present when the indicator is animating in.
+   * Present when the indicator begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -7,7 +7,7 @@ exports.ComboboxItemIndicatorDataAttributes = void 0;
 var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let ComboboxItemIndicatorDataAttributes = exports.ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
   /**
-   * Present when the indicator is animating in.
+   * Present when the indicator begins animating in.
    */
   ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.mjs

@@ -1,7 +1,7 @@
 import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.mjs";
 export let ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
   /**
-   * Present when the indicator is animating in.
+   * Present when the indicator begins animating in.
    */
   ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/combobox/label/ComboboxLabel.js

@@ -56,7 +56,8 @@ const ComboboxLabel = exports.ComboboxLabel = /*#__PURE__*/React.forwardRef(func
     id: defaultLabelId,
     fallbackControlId: localControlId,
     setLabelId(nextLabelId) {
-      store.set('labelId', nextLabelId);
+      const resolvedLabelId = typeof nextLabelId === 'function' ? nextLabelId(store.state.labelId) : nextLabelId;
+      store.set('labelId', resolvedLabelId);
     }
   });
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/combobox/label/ComboboxLabel.mjs

@@ -51,7 +51,8 @@ export const ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabe
     id: defaultLabelId,
     fallbackControlId: localControlId,
     setLabelId(nextLabelId) {
-      store.set('labelId', nextLabelId);
+      const resolvedLabelId = typeof nextLabelId === 'function' ? nextLabelId(store.state.labelId) : nextLabelId;
+      store.set('labelId', resolvedLabelId);
     }
   });
   return useRenderElement('div', componentProps, {

package/combobox/list/ComboboxList.js

@@ -16,6 +16,7 @@ var _store2 = require("../store");
 var _ComboboxCollection2 = require("../collection/ComboboxCollection");
 var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _utils = require("../../floating-ui-react/utils");
+var _parts = require("../utils/parts");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A list container for the items.
@@ -41,7 +42,7 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   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 listProps = (0, _store.useStore)(store, _store2.selectors.listProps);
   const virtualized = (0, _store.useStore)(store, _store2.selectors.virtualized);
   const forceMounted = (0, _store.useStore)(store, _store2.selectors.forceMounted);
   const multiple = selectionMode === 'multiple';
@@ -55,7 +56,7 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
 
   // Support "closed template" API: if children is a function, implicitly wrap it
   // with a Combobox.Collection that reads items from context/root.
-  // Ensures this component's `popupProps` subscription does not cause <Combobox.Item>
+  // Ensures this component's `listProps` subscription does not cause <Combobox.Item>
   // to re-render on every active index change.
   const resolvedChildren = React.useMemo(() => {
     if (typeof children === 'function') {
@@ -72,7 +73,7 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, setListElement, hasPositionerContext ? null : setPositionerElement],
-    props: [popupProps, {
+    props: [listProps, {
       children: resolvedChildren,
       tabIndex: -1,
       id: floatingId,
@@ -89,13 +90,7 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
             return;
           }
           (0, _utils.stopEvent)(event);
-          const nativeEvent = event.nativeEvent;
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
+          (0, _parts.clickHighlightedItem)(store, activeIndex, event.nativeEvent);
         }
       },
       onKeyDownCapture() {

package/combobox/list/ComboboxList.mjs

@@ -10,6 +10,7 @@ import { selectors } from "../store.mjs";
 import { ComboboxCollection } from "../collection/ComboboxCollection.mjs";
 import { CompositeList } from "../../internals/composite/list/CompositeList.mjs";
 import { stopEvent } from "../../floating-ui-react/utils.mjs";
+import { clickHighlightedItem } from "../utils/parts.mjs";
 
 /**
  * A list container for the items.
@@ -36,7 +37,7 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
   } = useComboboxDerivedItemsContext();
   const selectionMode = useStore(store, selectors.selectionMode);
   const grid = useStore(store, selectors.grid);
-  const popupProps = useStore(store, selectors.popupProps);
+  const listProps = useStore(store, selectors.listProps);
   const virtualized = useStore(store, selectors.virtualized);
   const forceMounted = useStore(store, selectors.forceMounted);
   const multiple = selectionMode === 'multiple';
@@ -50,7 +51,7 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
 
   // Support "closed template" API: if children is a function, implicitly wrap it
   // with a Combobox.Collection that reads items from context/root.
-  // Ensures this component's `popupProps` subscription does not cause <Combobox.Item>
+  // Ensures this component's `listProps` subscription does not cause <Combobox.Item>
   // to re-render on every active index change.
   const resolvedChildren = React.useMemo(() => {
     if (typeof children === 'function') {
@@ -67,7 +68,7 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, setListElement, hasPositionerContext ? null : setPositionerElement],
-    props: [popupProps, {
+    props: [listProps, {
       children: resolvedChildren,
       tabIndex: -1,
       id: floatingId,
@@ -84,13 +85,7 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
             return;
           }
           stopEvent(event);
-          const nativeEvent = event.nativeEvent;
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
+          clickHighlightedItem(store, activeIndex, event.nativeEvent);
         }
       },
       onKeyDownCapture() {

package/combobox/popup/ComboboxPopup.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import { BaseUIComponentProps } from "../../internals/types.mjs";
-import type { Side, Align } from "../../utils/useAnchorPositioning.mjs";
+import type { Side, Align } from "../../internals/useAnchorPositioning.mjs";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.mjs";
 /**
  * A container for the list.

package/combobox/popup/ComboboxPopup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import { BaseUIComponentProps } from "../../internals/types.js";
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
+import type { Side, Align } from "../../internals/useAnchorPositioning.js";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the list.

package/combobox/popup/ComboboxPopup.js

@@ -18,9 +18,10 @@ var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContex
 var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _utils = require("../../floating-ui-react/utils");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _getDisabledMountTransitionStyles = require("../../internals/getDisabledMountTransitionStyles");
 var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
 var _utils2 = require("../root/utils");
+var _parts = require("../utils/parts");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -45,18 +46,16 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const positioning = (0, _ComboboxPositionerContext.useComboboxPositionerContext)();
   const floatingRootContext = (0, _ComboboxRootContext.useComboboxFloatingContext)();
-  const {
-    filteredItems
-  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
+  const popupProps = (0, _store.useStore)(store, _store2.selectors.popupProps);
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
   const modal = (0, _store.useStore)(store, _store2.selectors.modal);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
-  const empty = filteredItems.length === 0;
+  const empty = (0, _parts.useListEmpty)();
   const popupId = elementProps.id ?? (inputInsidePopup ? (0, _utils2.getComboboxPopupId)(rootId) : undefined);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Prefer the rendered DOM id, which a `render` prop element or function may override.
@@ -85,10 +84,9 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],
-    props: [{
+    props: [popupProps, {
       id: popupId,
       role: inputInsidePopup ? 'dialog' : 'presentation',
-      tabIndex: -1,
       onFocus(event) {
         const target = (0, _utils.getTarget)(event.nativeEvent);
         if (openMethod !== 'touch' && ((0, _utils.contains)(store.state.listElement, target) || target === event.currentTarget)) {

package/combobox/popup/ComboboxPopup.mjs

@@ -5,16 +5,17 @@ import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { FloatingFocusManager } from "../../floating-ui-react/index.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { useComboboxFloatingContext, useComboboxRootContext, useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.mjs";
+import { useComboboxFloatingContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
 import { selectors } from "../store.mjs";
 import { popupStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerContext.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
 import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
 import { contains, getTarget } from "../../floating-ui-react/utils.mjs";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.mjs";
+import { getDisabledMountTransitionStyles } from "../../internals/getDisabledMountTransitionStyles.mjs";
 import { ComboboxInternalDismissButton } from "../utils/ComboboxInternalDismissButton.mjs";
 import { getComboboxPopupId } from "../root/utils/index.mjs";
+import { useListEmpty } from "../utils/parts.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...popupStateMapping,
@@ -39,18 +40,16 @@ export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopu
   const store = useComboboxRootContext();
   const positioning = useComboboxPositionerContext();
   const floatingRootContext = useComboboxFloatingContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const mounted = useStore(store, selectors.mounted);
   const open = useStore(store, selectors.open);
   const openMethod = useStore(store, selectors.openMethod);
+  const popupProps = useStore(store, selectors.popupProps);
   const transitionStatus = useStore(store, selectors.transitionStatus);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const inputElement = useStore(store, selectors.inputElement);
   const modal = useStore(store, selectors.modal);
   const rootId = useStore(store, selectors.id);
-  const empty = filteredItems.length === 0;
+  const empty = useListEmpty();
   const popupId = elementProps.id ?? (inputInsidePopup ? getComboboxPopupId(rootId) : undefined);
   useIsoLayoutEffect(() => {
     // Prefer the rendered DOM id, which a `render` prop element or function may override.
@@ -79,10 +78,9 @@ export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopu
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],
-    props: [{
+    props: [popupProps, {
       id: popupId,
       role: inputInsidePopup ? 'dialog' : 'presentation',
-      tabIndex: -1,
       onFocus(event) {
         const target = getTarget(event.nativeEvent);
         if (openMethod !== 'touch' && (contains(store.state.listElement, target) || target === event.currentTarget)) {

package/combobox/popup/ComboboxPopupDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum ComboboxPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/combobox/popup/ComboboxPopupDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum ComboboxPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/combobox/popup/ComboboxPopupDataAttributes.js

@@ -15,7 +15,7 @@ let ComboboxPopupDataAttributes = exports.ComboboxPopupDataAttributes = function
    */
   ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/combobox/popup/ComboboxPopupDataAttributes.mjs

@@ -9,7 +9,7 @@ export let ComboboxPopupDataAttributes = function (ComboboxPopupDataAttributes)
    */
   ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/combobox/portal/ComboboxPortal.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.mjs";
+import { type BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,12 +9,16 @@ import { FloatingPortal } from "../../floating-ui-react/index.mjs";
  */
 export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPortalState {}
-export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortalState> {
+export interface ComboboxPortalProps extends BaseUIComponentProps<'div', ComboboxPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
   keepMounted?: boolean | undefined;
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export declare namespace ComboboxPortal {
   type State = ComboboxPortalState;

package/combobox/portal/ComboboxPortal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FloatingPortal } from "../../floating-ui-react/index.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,12 +9,16 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPortalState {}
-export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortalState> {
+export interface ComboboxPortalProps extends BaseUIComponentProps<'div', ComboboxPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
   keepMounted?: boolean | undefined;
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export declare namespace ComboboxPortal {
   type State = ComboboxPortalState;

package/combobox/positioner/ComboboxPositioner.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.mjs";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * Positions the popup against the trigger.

package/combobox/positioner/ComboboxPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the popup against the trigger.