@base-ui/react 1.2.0 → 1.3.0

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

@@ -0,0 +1,56 @@
+export let 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/esm/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/esm/combobox/item/ComboboxItem.js

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

package/esm/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/esm/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/esm/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -0,0 +1,12 @@
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
+  /**
+   * Present when the indicator is animating in.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the indicator is animating out.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return ComboboxItemIndicatorDataAttributes;
+}({});

package/esm/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/esm/combobox/label/ComboboxLabel.js

@@ -0,0 +1,63 @@
+'use client';
+
+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 { getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
+import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { selectors } from "../store.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 const 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 = useFieldRootContext();
+  const store = useComboboxRootContext();
+  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
+  const triggerElement = useStore(store, selectors.triggerElement);
+  const inputElement = useStore(store, selectors.inputElement);
+  const rootId = useStore(store, selectors.id);
+  const defaultLabelId = 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.captureOwnerStack?.() || '';
+      const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
+      error(`${message}${ownerStackMessage}`);
+    }, [inputElement, inputInsidePopup]);
+  }
+  const labelProps = useLabel({
+    id: defaultLabelId,
+    fallbackControlId: localControlId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxLabel.displayName = "ComboboxLabel";

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

@@ -12,7 +12,8 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
 import { contains, getTarget } from "../../floating-ui-react/utils.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ComboboxInternalDismissButton } from "../utils/ComboboxInternalDismissButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
@@ -42,6 +43,7 @@ export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopu
   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 empty = filteredItems.length === 0;
   useOpenChangeComplete({
     open,
@@ -87,14 +89,20 @@ export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopu
   } else {
     resolvedFinalFocus = inputInsidePopup ? undefined : false;
   }
+  const focusManagerModal = !inputInsidePopup || modal;
   return /*#__PURE__*/_jsx(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__*/_jsxs(React.Fragment, {
+      children: [element, focusManagerModal && /*#__PURE__*/_jsx(ComboboxInternalDismissButton, {
+        ref: store.state.endDismissRef
+      })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxPopup.displayName = "ComboboxPopup";

package/esm/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/esm/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/esm/combobox/positioner/ComboboxPositioner.js

@@ -52,10 +52,11 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
   const openMethod = useStore(store, selectors.openMethod);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
+  const inputGroupElement = useStore(store, selectors.inputGroupElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const transitionStatus = useStore(store, selectors.transitionStatus);
   const empty = filteredItems.length === 0;
-  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputElement);
+  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = useAnchorPositioning({
     anchor: resolvedAnchor,
     floatingRootContext,
@@ -120,7 +121,7 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
     value: contextValue,
     children: [mounted && modal && /*#__PURE__*/_jsx(InternalBackdrop, {
       inert: inertValue(!open),
-      cutout: inputElement ?? triggerElement
+      cutout: inputGroupElement ?? inputElement ?? triggerElement
     }), element]
   });
 });

package/esm/combobox/root/AriaCombobox.d.ts

@@ -69,7 +69,7 @@ interface ComboboxRootProps<ItemValue> {
    * - `'always'`: highlight the first item as soon as the list opens.
    * @default false
    */
-  autoHighlight?: (boolean | 'always') | undefined;
+  autoHighlight?: boolean | 'always' | undefined;
   /**
    * Whether the highlighted item should be preserved when the pointer leaves the list.
    * @default false
@@ -132,17 +132,17 @@ interface ComboboxRootProps<ItemValue> {
    * The items to be displayed in the list.
    * Can be either a flat array of items or an array of groups with items.
    */
-  items?: (readonly any[] | readonly Group<any>[]) | undefined;
+  items?: readonly any[] | readonly Group<any>[] | undefined;
   /**
    * Filtered items to display in the list.
    * When provided, the list will use these items instead of filtering the `items` prop internally.
    * Use when you want to control filtering logic externally with the `useFilter()` hook.
    */
-  filteredItems?: (readonly any[] | readonly Group<any>[]) | undefined;
+  filteredItems?: readonly any[] | readonly Group<any>[] | undefined;
   /**
    * Filter function used to match items vs input query.
    */
-  filter?: (null | ((itemValue: ItemValue, query: string, itemToString?: (itemValue: ItemValue) => string) => boolean)) | undefined;
+  filter?: null | ((itemValue: ItemValue, query: string, itemToString?: (itemValue: ItemValue) => string) => boolean) | undefined;
   /**
    * When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
@@ -188,7 +188,7 @@ interface ComboboxRootProps<ItemValue> {
    * - `none`: items are static (not filtered), and the input value will not change based on the active item.
    * @default 'list'
    */
-  autoComplete?: ('list' | 'both' | 'inline' | 'none') | undefined;
+  autoComplete?: 'list' | 'both' | 'inline' | 'none' | undefined;
   /**
    * Provides a hint to the browser for autofill on the hidden input element.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
@@ -209,6 +209,7 @@ interface ComboboxRootProps<ItemValue> {
    */
   fillInputOnItemPress?: boolean | undefined;
 }
+export interface AriaComboboxState {}
 export type AriaComboboxProps<Value, Mode extends SelectionMode = 'none'> = ComboboxRootProps<Value> & {
   /**
    * How the combobox should remember the selected value.
@@ -227,7 +228,7 @@ export type AriaComboboxProps<Value, Mode extends SelectionMode = 'none'> = Comb
    *
    * To render a controlled combobox, use the `selectedValue` prop instead.
    */
-  defaultSelectedValue?: (ComboboxItemValueType<Value, Mode> | null) | undefined;
+  defaultSelectedValue?: ComboboxItemValueType<Value, Mode> | null | undefined;
   /**
    * Callback fired when the selected value of the combobox changes.
    */
@@ -235,7 +236,7 @@ export type AriaComboboxProps<Value, Mode extends SelectionMode = 'none'> = Comb
 };
 export declare namespace AriaCombobox {
   type Props<Value, Mode extends SelectionMode = 'none'> = AriaComboboxProps<Value, Mode>;
-  interface State {}
+  type State = AriaComboboxState;
   interface Actions {
     unmount: () => void;
   }
@@ -243,7 +244,7 @@ export declare namespace AriaCombobox {
   type HighlightEventDetails = BaseUIGenericEventDetails<HighlightEventReason, {
     index: number;
   }>;
-  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.none;
+  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.none;
   type ChangeEventDetails = BaseUIChangeEventDetails<ChangeEventReason>;
 }
 export {};

package/esm/combobox/root/AriaCombobox.js

@@ -101,6 +101,8 @@ export function AriaCombobox(props) {
   const labelsRef = React.useRef([]);
   const popupRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const startDismissRef = React.useRef(null);
+  const endDismissRef = React.useRef(null);
   const emptyRef = React.useRef(null);
   const keyboardActiveRef = React.useRef(true);
   const hadInputClearRef = React.useRef(false);
@@ -253,6 +255,7 @@ export function AriaCombobox(props) {
   }, [filteredItems, isGrouped]);
   const store = useRefWithInit(() => new Store({
     id,
+    labelId: undefined,
     selectedValue,
     open,
     filter,
@@ -264,6 +267,8 @@ export function AriaCombobox(props) {
     popupRef,
     emptyRef,
     inputRef,
+    startDismissRef,
+    endDismissRef,
     keyboardActiveRef,
     chipsContainerRef,
     clearRef,
@@ -297,6 +302,7 @@ export function AriaCombobox(props) {
     listElement: null,
     triggerElement: null,
     inputElement: null,
+    inputGroupElement: null,
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
@@ -330,6 +336,7 @@ export function AriaCombobox(props) {
   const listElement = useStore(store, selectors.listElement);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
+  const inputGroupElement = useStore(store, selectors.inputGroupElement);
   const inline = useStore(store, selectors.inline);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const triggerRef = useValueAsRef(triggerElement);
@@ -340,8 +347,7 @@ export function AriaCombobox(props) {
   } = useTransitionStatus(open);
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = useOpenInteractionType(open);
   useField({
     id,
@@ -539,7 +545,6 @@ export function AriaCombobox(props) {
     setMounted(false);
     onOpenChangeComplete?.(false);
     setQueryChangedAfterOpen(false);
-    resetOpenInteractionType();
     setCloseQuery(null);
     if (selectionMode === 'none') {
       setIndices({
@@ -760,8 +765,11 @@ export function AriaCombobox(props) {
   }
   const role = React.useMemo(() => {
     const isPlainInput = inputElement?.tagName === 'INPUT';
-    const shouldApplyAria = isPlainInput || open;
-    const reference = isPlainInput ? {
+    // During SSR and initial hydration, the input ref is not available yet.
+    // Assume an input-like control so combobox ARIA attributes are present.
+    const shouldTreatAsInput = inputElement == null || isPlainInput;
+    const shouldApplyAria = shouldTreatAsInput || open;
+    const reference = shouldTreatAsInput ? {
       autoComplete: 'off',
       spellCheck: 'false',
       autoCorrect: 'off',
@@ -803,7 +811,7 @@ export function AriaCombobox(props) {
     bubbles: inline ? true : undefined,
     outsidePress(event) {
       const target = getTarget(event);
-      return !contains(triggerElement, target) && !contains(clearRef.current, target) && !contains(chipsContainerRef.current, target);
+      return !contains(triggerElement, target) && !contains(clearRef.current, target) && !contains(chipsContainerRef.current, target) && !contains(inputGroupElement, target);
     }
   });
   const listNavigation = useListNavigation(floatingRootContext, {

package/esm/combobox/root/ComboboxRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AriaCombobox } from "./AriaCombobox.js";
+import { AriaCombobox, type AriaComboboxState } from "./AriaCombobox.js";
 /**
  * Groups all parts of the combobox.
  * Doesn't render its own HTML element.
@@ -51,7 +51,7 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined = fals
    *
    * To render a controlled combobox, use the `value` prop instead.
    */
-  defaultValue?: (ComboboxValueType<Value, Multiple> | null) | undefined;
+  defaultValue?: ComboboxValueType<Value, Multiple> | null | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the combobox will not be unmounted when closed.
@@ -79,13 +79,13 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined = fals
   /**
    * The selected value of the combobox. Use when controlled.
    */
-  value?: (ComboboxValueType<Value, Multiple> | null) | undefined;
+  value?: ComboboxValueType<Value, Multiple> | null | undefined;
   /**
    * Event handler called when the selected value of the combobox changes.
    */
   onValueChange?: ((value: ComboboxValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: ComboboxRoot.ChangeEventDetails) => void) | undefined;
 };
-export type ComboboxRootState = AriaCombobox.State;
+export interface ComboboxRootState extends AriaComboboxState {}
 export type ComboboxRootActions = AriaCombobox.Actions;
 export type ComboboxRootChangeEventReason = AriaCombobox.ChangeEventReason;
 export type ComboboxRootChangeEventDetails = AriaCombobox.ChangeEventDetails;

package/esm/combobox/row/ComboboxRow.d.ts

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxRow: React.ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxRowState {}
-export interface ComboboxRowProps extends BaseUIComponentProps<'div', ComboboxRow.State> {}
+export interface ComboboxRowProps extends BaseUIComponentProps<'div', ComboboxRowState> {}
 export declare namespace ComboboxRow {
   type State = ComboboxRowState;
   type Props = ComboboxRowProps;

package/esm/combobox/status/ComboboxStatus.d.ts

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxStatusState {}
-export interface ComboboxStatusProps extends BaseUIComponentProps<'div', ComboboxStatus.State> {}
+export interface ComboboxStatusProps extends BaseUIComponentProps<'div', ComboboxStatusState> {}
 export declare namespace ComboboxStatus {
   type State = ComboboxStatusState;
   type Props = ComboboxStatusProps;

package/esm/combobox/store.d.ts

@@ -6,6 +6,7 @@ import type { Side } from "../utils/useAnchorPositioning.js";
 import type { AriaCombobox } from "./root/AriaCombobox.js";
 export type State = {
   id: string | undefined;
+  labelId: string | undefined;
   query: string;
   filter: (item: any, query: string) => boolean;
   items: readonly any[] | undefined;
@@ -24,6 +25,7 @@ export type State = {
   listElement: HTMLElement | null;
   triggerElement: HTMLElement | null;
   inputElement: HTMLInputElement | null;
+  inputGroupElement: HTMLDivElement | null;
   popupSide: Side | null;
   openMethod: InteractionType | null;
   inputInsidePopup: boolean;
@@ -33,6 +35,8 @@ export type State = {
   popupRef: React.RefObject<HTMLDivElement | null>;
   emptyRef: React.RefObject<HTMLDivElement | null>;
   inputRef: React.RefObject<HTMLInputElement | null>;
+  startDismissRef: React.RefObject<HTMLSpanElement | null>;
+  endDismissRef: React.RefObject<HTMLSpanElement | null>;
   keyboardActiveRef: React.RefObject<boolean>;
   chipsContainerRef: React.RefObject<HTMLDivElement | null>;
   clearRef: React.RefObject<HTMLButtonElement | null>;
@@ -43,9 +47,9 @@ export type State = {
   setInputValue: (value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setSelectedValue: (value: any, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setIndices: (indices: {
-    activeIndex?: (number | null) | undefined;
-    selectedIndex?: (number | null) | undefined;
-    type?: ('keyboard' | 'pointer' | 'none') | undefined;
+    activeIndex?: number | null | undefined;
+    selectedIndex?: number | null | undefined;
+    type?: 'keyboard' | 'pointer' | 'none' | undefined;
   }) => void;
   onItemHighlighted: (item: any, eventDetails: AriaCombobox.HighlightEventDetails) => void;
   forceMount: () => void;
@@ -74,6 +78,7 @@ export type State = {
 export type ComboboxStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
+  labelId: (state: State) => string | undefined;
   query: (state: State) => string;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
@@ -100,6 +105,7 @@ export declare const selectors: {
   listElement: (state: State) => HTMLElement | null;
   triggerElement: (state: State) => HTMLElement | null;
   inputElement: (state: State) => HTMLInputElement | null;
+  inputGroupElement: (state: State) => HTMLDivElement | null;
   popupSide: (state: State) => Side | null;
   openMethod: (state: State) => InteractionType | null;
   inputInsidePopup: (state: State) => boolean;
@@ -126,6 +132,6 @@ export declare const selectors: {
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   modal: (state: State) => boolean;
-  autoHighlight: (state: State) => false | "always" | "input-change";
+  autoHighlight: (state: State) => false | "input-change" | "always";
   submitOnItemClick: (state: State) => boolean;
 };