@base-ui/react 1.2.0 → 1.3.0

package/combobox/input/ComboboxInput.js

@@ -16,6 +16,7 @@ var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _store2 = require("../store");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _constants = require("../../field/utils/constants");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _ComboboxChipsContext = require("../chips/ComboboxChipsContext");
 var _utils = require("../../floating-ui-react/utils");
@@ -23,6 +24,9 @@ var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContex
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
+var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
@@ -44,7 +48,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const comboboxChipsContext = (0, _ComboboxChipsContext.useComboboxChipsContext)();
   const positioning = (0, _ComboboxPositionerContext.useComboboxPositionerContext)(true);
@@ -72,12 +76,16 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const inline = (0, _store.useStore)(store, _store2.selectors.inline);
+  const modal = (0, _store.useStore)(store, _store2.selectors.modal);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const listEmpty = filteredItems.length === 0;
   const isInsidePopup = hasPositionerParent || inline;
+  const focusManagerModal = !isInsidePopup || modal;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, undefined);
+  const fieldStateForInput = hasPositionerParent ? _constants.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
   const lastActiveIndexRef = React.useRef(null);
@@ -92,8 +100,9 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       inputInsidePopup: nextIsInsidePopup
     });
   });
+  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
   const state = {
-    ...fieldState,
+    ...fieldStateForInput,
     open,
     disabled,
     readOnly,
@@ -161,7 +170,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       value: componentProps.value ?? composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
@@ -359,6 +368,10 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           const activeIndex = store.state.activeIndex;
           const nativeEvent = event.nativeEvent;
           if (activeIndex === null) {
+            if (inline) {
+              return;
+            }
+
             // Allow form submission when no item is highlighted.
             store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, nativeEvent));
             return;
@@ -378,9 +391,13 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       onPointerDown() {
         store.state.keyboardActiveRef.current = false;
       }
-    }, validation ? validation.getValidationProps(elementProps) : elementProps],
+    }, validationProps],
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });
-  return element;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [open && focusManagerModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInternalDismissButton.ComboboxInternalDismissButton, {
+      ref: store.state.startDismissRef
+    }), element]
+  });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { 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.
+ */
+export declare const ComboboxInputGroup: React.ForwardRefExoticComponent<Omit<ComboboxInputGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ComboboxInputGroupState extends FieldRoot.State {
+  /**
+   * Whether the corresponding popup is open.
+   */
+  open: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the component should ignore user edits.
+   */
+  readOnly: boolean;
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   */
+  popupSide: Side | null;
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty: boolean;
+  /**
+   * Whether the combobox doesn't have a value.
+   */
+  placeholder: boolean;
+}
+export interface ComboboxInputGroupProps extends BaseUIComponentProps<'div', ComboboxInputGroup.State> {}
+export declare namespace ComboboxInputGroup {
+  type State = ComboboxInputGroupState;
+  type Props = ComboboxInputGroupProps;
+}

package/combobox/input-group/ComboboxInputGroup.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInputGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _store2 = require("../store");
+var _stateAttributesMapping = require("../utils/stateAttributesMapping");
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ */
+const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState,
+    disabled: fieldDisabled
+  } = (0, _FieldRootContext.useFieldRootContext)();
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const {
+    filteredItems
+  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
+  const open = (0, _store.useStore)(store, _store2.selectors.open);
+  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
+  const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
+  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
+  const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
+  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 listEmpty = filteredItems.length === 0;
+  const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
+  const state = {
+    ...fieldState,
+    open,
+    disabled,
+    readOnly,
+    popupSide,
+    listEmpty,
+    placeholder
+  };
+  const setInputGroupElement = (0, _useStableCallback.useStableCallback)(element => {
+    store.set('inputGroupElement', element);
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, setInputGroupElement],
+    props: [{
+      role: 'group'
+    }, elementProps],
+    state,
+    stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInputGroup.displayName = "ComboboxInputGroup";

package/combobox/input-group/ComboboxInputGroupDataAttributes.d.ts

@@ -0,0 +1,55 @@
+export declare enum ComboboxInputGroupDataAttributes {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  popupOpen = "data-popup-open",
+  /**
+   * Present when the input group is pressed.
+   */
+  pressed = "data-pressed",
+  /**
+   * Present when the component is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the component is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  popupSide = "data-popup-side",
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty = "data-list-empty",
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  placeholder = "data-placeholder",
+}

package/combobox/input-group/ComboboxInputGroupDataAttributes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInputGroupDataAttributes = void 0;
+let ComboboxInputGroupDataAttributes = exports.ComboboxInputGroupDataAttributes = /*#__PURE__*/function (ComboboxInputGroupDataAttributes) {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  ComboboxInputGroupDataAttributes["popupOpen"] = "data-popup-open";
+  /**
+   * Present when the input group is pressed.
+   */
+  ComboboxInputGroupDataAttributes["pressed"] = "data-pressed";
+  /**
+   * Present when the component is disabled.
+   */
+  ComboboxInputGroupDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the component is readonly.
+   */
+  ComboboxInputGroupDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  ComboboxInputGroupDataAttributes["popupSide"] = "data-popup-side";
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  ComboboxInputGroupDataAttributes["listEmpty"] = "data-list-empty";
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  ComboboxInputGroupDataAttributes["placeholder"] = "data-placeholder";
+  return ComboboxInputGroupDataAttributes;
+}({});

package/combobox/item/ComboboxItem.d.ts

@@ -19,7 +19,7 @@ export interface ComboboxItemState {
    */
   highlighted: boolean;
 }
-export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', ComboboxItem.State>, 'id'> {
+export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', ComboboxItemState>, 'id'> {
   children?: React.ReactNode;
   /**
    * An optional click handler for the item when selected.

package/combobox/item/ComboboxItem.js

@@ -120,7 +120,8 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   } = (0, _useButton.useButton)({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   function commitSelection(nativeEvent) {
     function selectItem() {

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

@@ -6,7 +6,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Renders a `<span>` element.
  */
 export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicator.State> {
+export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicatorState> {
   children?: React.ReactNode;
   /**
    * Whether to keep the HTML element in the DOM when the item is not selected.
@@ -15,7 +15,13 @@ export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span',
   keepMounted?: boolean | undefined;
 }
 export interface ComboboxItemIndicatorState {
+  /**
+   * Whether the item is selected.
+   */
   selected: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace ComboboxItemIndicator {

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

@@ -0,0 +1,10 @@
+export declare enum ComboboxItemIndicatorDataAttributes {
+  /**
+   * Present when the indicator is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the indicator is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxItemIndicatorDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let ComboboxItemIndicatorDataAttributes = exports.ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
+  /**
+   * Present when the indicator is animating in.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the indicator is animating out.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return ComboboxItemIndicatorDataAttributes;
+}({});

package/combobox/label/ComboboxLabel.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+/**
+ * An accessible label that is automatically associated with the combobox trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+export declare const ComboboxLabel: React.ForwardRefExoticComponent<Omit<ComboboxLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ComboboxLabelState = FieldRoot.State;
+export interface ComboboxLabelProps extends Omit<BaseUIComponentProps<'div', ComboboxLabel.State>, 'id'> {}
+export declare namespace ComboboxLabel {
+  type State = ComboboxLabelState;
+  type Props = ComboboxLabelProps;
+}

package/combobox/label/ComboboxLabel.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _error = require("@base-ui/utils/error");
+var _safeReact = require("@base-ui/utils/safeReact");
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _constants = require("../../field/utils/constants");
+var _useLabel = require("../../labelable-provider/useLabel");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _store2 = require("../store");
+/**
+ * An accessible label that is automatically associated with the combobox trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+const ComboboxLabel = exports.ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = (0, _FieldRootContext.useFieldRootContext)();
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
+  const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
+  const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
+  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const defaultLabelId = (0, _resolveAriaLabelledBy.getDefaultLabelId)(rootId);
+  const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (!inputElement || inputInsidePopup) {
+        return;
+      }
+      const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+      const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
+      (0, _error.error)(`${message}${ownerStackMessage}`);
+    }, [inputElement, inputInsidePopup]);
+  }
+  const labelProps = (0, _useLabel.useLabel)({
+    id: defaultLabelId,
+    fallbackControlId: localControlId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: _constants.fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxLabel.displayName = "ComboboxLabel";

package/combobox/list/ComboboxList.d.ts

@@ -11,7 +11,7 @@ export interface ComboboxListState {
    */
   empty: boolean;
 }
-export interface ComboboxListProps extends Omit<BaseUIComponentProps<'div', ComboboxList.State>, 'children'> {
+export interface ComboboxListProps extends Omit<BaseUIComponentProps<'div', ComboboxListState>, 'children'> {
   children?: React.ReactNode | ((item: any, index: number) => React.ReactNode);
 }
 export declare namespace ComboboxList {

package/combobox/popup/ComboboxPopup.d.ts

@@ -9,14 +9,32 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPopupState {
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
+  /**
+   * Whether there are no items to display.
+   */
   empty: boolean;
 }
-export interface ComboboxPopupProps extends BaseUIComponentProps<'div', ComboboxPopup.State> {
+export interface ComboboxPopupProps extends BaseUIComponentProps<'div', ComboboxPopupState> {
   /**
    * Determines the element to focus when the popup is opened.
    *
@@ -26,7 +44,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
   /**
    * Determines the element to focus when the popup is closed.
    *
@@ -36,7 +54,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
 }
 export declare namespace ComboboxPopup {
   type State = ComboboxPopupState;

package/combobox/popup/ComboboxPopup.js

@@ -18,6 +18,7 @@ var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _utils = require("../../floating-ui-react/utils");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -48,6 +49,7 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   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 empty = filteredItems.length === 0;
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
@@ -93,14 +95,20 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   } else {
     resolvedFinalFocus = inputInsidePopup ? undefined : false;
   }
+  const focusManagerModal = !inputInsidePopup || modal;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
     context: floatingRootContext,
     disabled: !mounted,
-    modal: !inputInsidePopup,
+    modal: focusManagerModal,
     openInteractionType: openMethod,
     initialFocus: resolvedInitialFocus,
     returnFocus: resolvedFinalFocus,
-    children: element
+    getInsideElements: () => [store.state.startDismissRef.current, store.state.endDismissRef.current],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [element, focusManagerModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInternalDismissButton.ComboboxInternalDismissButton, {
+        ref: store.state.endDismissRef
+      })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxPopup.displayName = "ComboboxPopup";

package/combobox/portal/ComboboxPortal.d.ts

@@ -6,10 +6,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Renders a `<div>` element.
  */
 export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace ComboboxPortal {
-  interface State {}
-}
-export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortal.State> {
+export interface ComboboxPortalState {}
+export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -17,5 +15,6 @@ export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortal
   keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxPortal {
+  type State = ComboboxPortalState;
   type Props = ComboboxPortalProps;
 }

package/combobox/positioner/ComboboxPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popup against the trigger.
@@ -11,12 +11,24 @@ export interface ComboboxPositionerState {
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether there are no items to display.
+   */
   empty: boolean;
 }
-export interface ComboboxPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', ComboboxPositioner.State> {}
+export interface ComboboxPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', ComboboxPositionerState> {}
 export declare namespace ComboboxPositioner {
   type State = ComboboxPositionerState;
   type Props = ComboboxPositionerProps;

package/combobox/positioner/ComboboxPositioner.js

@@ -57,10 +57,11 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
+  const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const empty = filteredItems.length === 0;
-  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputElement);
+  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
     anchor: resolvedAnchor,
     floatingRootContext,
@@ -125,7 +126,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
     value: contextValue,
     children: [mounted && modal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
       inert: (0, _inertValue.inertValue)(!open),
-      cutout: inputElement ?? triggerElement
+      cutout: inputGroupElement ?? inputElement ?? triggerElement
     }), element]
   });
 });