@base-ui/react 1.2.0 → 1.3.0

package/esm/checkbox-group/CheckboxGroupContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { UseFieldValidationReturnValue } from "../field/root/useFieldValidation.js";
-import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
+import type { UseCheckboxGroupParentReturnValue } from "./useCheckboxGroupParent.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
 export interface CheckboxGroupContext {
@@ -8,7 +8,7 @@ export interface CheckboxGroupContext {
   defaultValue: string[] | undefined;
   setValue: (value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   allValues: string[] | undefined;
-  parent: useCheckboxGroupParent.ReturnValue;
+  parent: UseCheckboxGroupParentReturnValue;
   disabled: boolean;
   validation: UseFieldValidationReturnValue;
   registerControlRef: (element: HTMLButtonElement | null) => void;

package/esm/checkbox-group/useCheckboxGroupParent.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
-export declare function useCheckboxGroupParent(params: useCheckboxGroupParent.Parameters): useCheckboxGroupParent.ReturnValue;
+export declare function useCheckboxGroupParent(params: UseCheckboxGroupParentParameters): UseCheckboxGroupParentReturnValue;
 export interface UseCheckboxGroupParentParameters {
   allValues?: string[] | undefined;
   value?: string[] | undefined;
@@ -23,7 +23,4 @@ export interface UseCheckboxGroupParentReturnValue {
     onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   };
 }
-export declare namespace useCheckboxGroupParent {
-  type Parameters = UseCheckboxGroupParentParameters;
-  type ReturnValue = UseCheckboxGroupParentReturnValue;
-}
+export interface UseCheckboxGroupParentState {}

package/esm/collapsible/panel/CollapsiblePanel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+import type { CollapsibleRootState } from "../root/CollapsibleRoot.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * A panel with the collapsible contents.
@@ -9,10 +9,13 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CollapsiblePanelState extends CollapsibleRoot.State {
+export interface CollapsiblePanelState extends CollapsibleRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanel.State> {
+export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanelState> {
   /**
    * Allows the browser’s built-in page search to find and expand the panel contents.
    *

package/esm/collapsible/panel/useCollapsiblePanel.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HTMLProps } from "../../utils/types.js";
 import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
 import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
-export declare function useCollapsiblePanel(parameters: useCollapsiblePanel.Parameters): useCollapsiblePanel.ReturnValue;
+export declare function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters): UseCollapsiblePanelReturnValue;
 export interface UseCollapsiblePanelParameters {
   abortControllerRef: React.RefObject<AbortController | null>;
   animationTypeRef: React.RefObject<AnimationType>;
@@ -56,7 +56,4 @@ export interface UseCollapsiblePanelParameters {
 export interface UseCollapsiblePanelReturnValue {
   props: HTMLProps;
 }
-export declare namespace useCollapsiblePanel {
-  type Parameters = UseCollapsiblePanelParameters;
-  type ReturnValue = UseCollapsiblePanelReturnValue;
-}
+export interface UseCollapsiblePanelState {}

package/esm/collapsible/root/CollapsibleRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import { useCollapsibleRoot } from "./useCollapsibleRoot.js";
+import { type UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
 import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
@@ -10,8 +10,8 @@ import { REASONS } from "../../utils/reasons.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CollapsibleRootState extends Pick<useCollapsibleRoot.ReturnValue, 'open' | 'disabled'> {}
-export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRoot.State> {
+export interface CollapsibleRootState extends Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled'> {}
+export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRootState> {
   /**
    * Whether the collapsible panel is currently open.
    *

package/esm/collapsible/root/CollapsibleRootContext.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { useCollapsibleRoot } from "./useCollapsibleRoot.js";
-import type { CollapsibleRoot } from "./CollapsibleRoot.js";
+import type { UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
+import type { CollapsibleRoot, CollapsibleRootState } from "./CollapsibleRoot.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
-export interface CollapsibleRootContext extends useCollapsibleRoot.ReturnValue {
+export interface CollapsibleRootContext extends UseCollapsibleRootReturnValue {
   onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;
-  state: CollapsibleRoot.State;
+  state: CollapsibleRootState;
   transitionStatus: TransitionStatus;
 }
 export declare const CollapsibleRootContext: React.Context<CollapsibleRootContext | undefined>;

package/esm/collapsible/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { CollapsibleRoot } from "./CollapsibleRoot.js";
-export declare const collapsibleStateAttributesMapping: StateAttributesMapping<CollapsibleRoot.State>;
+import type { CollapsibleRootState } from "./CollapsibleRoot.js";
+export declare const collapsibleStateAttributesMapping: StateAttributesMapping<CollapsibleRootState>;

package/esm/collapsible/root/useCollapsibleRoot.d.ts

@@ -6,7 +6,7 @@ export interface Dimensions {
   height: number | undefined;
   width: number | undefined;
 }
-export declare function useCollapsibleRoot(parameters: useCollapsibleRoot.Parameters): useCollapsibleRoot.ReturnValue;
+export declare function useCollapsibleRoot(parameters: UseCollapsibleRootParameters): UseCollapsibleRootReturnValue;
 export interface UseCollapsibleRootParameters {
   /**
    * Whether the collapsible panel is currently open.
@@ -73,7 +73,4 @@ export interface UseCollapsibleRootReturnValue {
    */
   width: number | undefined;
 }
-export declare namespace useCollapsibleRoot {
-  type Parameters = UseCollapsibleRootParameters;
-  type ReturnValue = UseCollapsibleRootReturnValue;
-}
+export interface UseCollapsibleRootState {}

package/esm/collapsible/trigger/CollapsibleTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+import { type CollapsibleRootState } from "../root/CollapsibleRoot.js";
 /**
  * A button that opens and closes the collapsible panel.
  * Renders a `<button>` element.
@@ -8,7 +8,9 @@ import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleRoot.State> {}
+export interface CollapsibleTriggerState extends CollapsibleRootState {}
+export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleTriggerState> {}
 export declare namespace CollapsibleTrigger {
+  type State = CollapsibleTriggerState;
   type Props = CollapsibleTriggerProps;
 }

package/esm/combobox/arrow/ComboboxArrow.d.ts

@@ -11,11 +11,20 @@ export interface ComboboxArrowState {
    * 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 arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface ComboboxArrowProps extends BaseUIComponentProps<'div', ComboboxArrow.State> {}
+export interface ComboboxArrowProps extends BaseUIComponentProps<'div', ComboboxArrowState> {}
 export declare namespace ComboboxArrow {
   type State = ComboboxArrowState;
   type Props = ComboboxArrowProps;

package/esm/combobox/backdrop/ComboboxBackdrop.d.ts

@@ -6,12 +6,15 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Renders a `<div>` element.
  */
 export declare const ComboboxBackdrop: React.ForwardRefExoticComponent<Omit<ComboboxBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ComboboxBackdropProps extends BaseUIComponentProps<'div', ComboboxBackdrop.State> {}
+export interface ComboboxBackdropProps extends BaseUIComponentProps<'div', ComboboxBackdropState> {}
 export interface ComboboxBackdropState {
   /**
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace ComboboxBackdrop {

package/esm/combobox/chip/ComboboxChip.d.ts

@@ -11,7 +11,7 @@ export interface ComboboxChipState {
    */
   disabled: boolean;
 }
-export interface ComboboxChipProps extends BaseUIComponentProps<'div', ComboboxChip.State> {}
+export interface ComboboxChipProps extends BaseUIComponentProps<'div', ComboboxChipState> {}
 export declare namespace ComboboxChip {
   type State = ComboboxChipState;
   type Props = ComboboxChipProps;

package/esm/combobox/chip-remove/ComboboxChipRemove.d.ts

@@ -11,7 +11,7 @@ export interface ComboboxChipRemoveState {
    */
   disabled: boolean;
 }
-export interface ComboboxChipRemoveProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxChipRemove.State> {}
+export interface ComboboxChipRemoveProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxChipRemoveState> {}
 export declare namespace ComboboxChipRemove {
   type State = ComboboxChipRemoveState;
   type Props = ComboboxChipRemoveProps;

package/esm/combobox/chips/ComboboxChips.d.ts

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

package/esm/combobox/clear/ComboboxClear.d.ts

@@ -15,9 +15,12 @@ export interface ComboboxClearState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxClear.State> {
+export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxClearState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/esm/combobox/collection/ComboboxCollection.d.ts

@@ -6,9 +6,11 @@ import * as React from 'react';
  * If rendering a flat list, pass a function child to the `List` component instead, which implicitly wraps it.
  */
 export declare function ComboboxCollection(props: ComboboxCollection.Props): React.JSX.Element | null;
+export interface ComboboxCollectionState {}
 export interface ComboboxCollectionProps {
   children: (item: any, index: number) => React.ReactNode;
 }
 export declare namespace ComboboxCollection {
+  type State = ComboboxCollectionState;
   type Props = ComboboxCollectionProps;
 }

package/esm/combobox/empty/ComboboxEmpty.d.ts

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

package/esm/combobox/group/ComboboxGroup.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupState {}
-export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroup.State> {
+export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroupState> {
   /**
    * Items to be rendered within this group.
    * When provided, child `Collection` components will use these items.

package/esm/combobox/group-label/ComboboxGroupLabel.d.ts

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

package/esm/combobox/icon/ComboboxIcon.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxIconState {}
-export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIcon.State> {}
+export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIconState> {}
 export declare namespace ComboboxIcon {
   type State = ComboboxIconState;
   type Props = ComboboxIconProps;

package/esm/combobox/index.d.ts

@@ -1,7 +1,9 @@
 export * as Combobox from "./index.parts.js";
 export type * from "./root/ComboboxRoot.js";
+export type * from "./label/ComboboxLabel.js";
 export type * from "./trigger/ComboboxTrigger.js";
 export type * from "./input/ComboboxInput.js";
+export type * from "./input-group/ComboboxInputGroup.js";
 export type * from "./popup/ComboboxPopup.js";
 export type * from "./positioner/ComboboxPositioner.js";
 export type * from "./list/ComboboxList.js";

package/esm/combobox/index.parts.d.ts

@@ -1,6 +1,8 @@
 export { ComboboxRoot as Root } from "./root/ComboboxRoot.js";
+export { ComboboxLabel as Label } from "./label/ComboboxLabel.js";
 export { ComboboxValue as Value } from "./value/ComboboxValue.js";
 export { ComboboxInput as Input } from "./input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "./input-group/ComboboxInputGroup.js";
 export { ComboboxTrigger as Trigger } from "./trigger/ComboboxTrigger.js";
 export { ComboboxList as List } from "./list/ComboboxList.js";
 export { ComboboxStatus as Status } from "./status/ComboboxStatus.js";

package/esm/combobox/index.parts.js

@@ -1,6 +1,8 @@
 export { ComboboxRoot as Root } from "./root/ComboboxRoot.js";
+export { ComboboxLabel as Label } from "./label/ComboboxLabel.js";
 export { ComboboxValue as Value } from "./value/ComboboxValue.js";
 export { ComboboxInput as Input } from "./input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "./input-group/ComboboxInputGroup.js";
 export { ComboboxTrigger as Trigger } from "./trigger/ComboboxTrigger.js";
 export { ComboboxList as List } from "./list/ComboboxList.js";
 export { ComboboxStatus as Status } from "./status/ComboboxStatus.js";

package/esm/combobox/input/ComboboxInput.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
  */
 export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export interface ComboboxInputState extends FieldRoot.State {
+export interface ComboboxInputState extends FieldRootState {
   /**
    * Whether the corresponding popup is open.
    */
@@ -25,7 +25,7 @@ export interface ComboboxInputState extends FieldRoot.State {
    */
   readOnly: boolean;
 }
-export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInput.State> {
+export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInputState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/esm/combobox/input/ComboboxInput.js

@@ -10,6 +10,7 @@ import { useComboboxDerivedItemsContext, useComboboxInputValueContext, useCombob
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { DEFAULT_FIELD_STATE_ATTRIBUTES } from "../../field/utils/constants.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { useComboboxChipsContext } from "../chips/ComboboxChipsContext.js";
 import { stopEvent } from "../../floating-ui-react/utils.js";
@@ -17,11 +18,14 @@ import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerCo
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
+import { ComboboxInternalDismissButton } from "../utils/ComboboxInternalDismissButton.js";
 
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(componentProps, forwardedRef) {
   const {
     render,
@@ -39,7 +43,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     validation
   } = useFieldRootContext();
   const {
-    labelId
+    labelId: fieldLabelId
   } = useLabelableContext();
   const comboboxChipsContext = useComboboxChipsContext();
   const positioning = useComboboxPositionerContext(true);
@@ -67,12 +71,16 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const positionerElement = useStore(store, selectors.positionerElement);
   const rootId = useStore(store, selectors.id);
   const inline = useStore(store, selectors.inline);
+  const modal = useStore(store, 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 = useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
+  const fieldStateForInput = hasPositionerParent ? DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
   const lastActiveIndexRef = React.useRef(null);
@@ -87,8 +95,9 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       inputInsidePopup: nextIsInsidePopup
     });
   });
+  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
   const state = {
-    ...fieldState,
+    ...fieldStateForInput,
     open,
     disabled,
     readOnly,
@@ -156,7 +165,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       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,
@@ -354,6 +363,10 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           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, createChangeEventDetails(REASONS.none, nativeEvent));
             return;
@@ -373,9 +386,13 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       onPointerDown() {
         store.state.keyboardActiveRef.current = false;
       }
-    }, validation ? validation.getValidationProps(elementProps) : elementProps],
+    }, validationProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
-  return element;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [open && focusManagerModal && /*#__PURE__*/_jsx(ComboboxInternalDismissButton, {
+      ref: store.state.startDismissRef
+    }), element]
+  });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";

package/esm/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/esm/combobox/input-group/ComboboxInputGroup.js

@@ -0,0 +1,63 @@
+'use client';
+
+import * as React from 'react';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useStore } from '@base-ui/utils/store';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useComboboxDerivedItemsContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { selectors } from "../store.js";
+import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
+
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ */
+export const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState,
+    disabled: fieldDisabled
+  } = useFieldRootContext();
+  const store = useComboboxRootContext();
+  const {
+    filteredItems
+  } = useComboboxDerivedItemsContext();
+  const open = useStore(store, selectors.open);
+  const mounted = useStore(store, selectors.mounted);
+  const popupSideValue = useStore(store, selectors.popupSide);
+  const positionerElement = useStore(store, selectors.positionerElement);
+  const comboboxDisabled = useStore(store, selectors.disabled);
+  const readOnly = useStore(store, selectors.readOnly);
+  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
+  const selectionMode = useStore(store, 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 = useStableCallback(element => {
+    store.set('inputGroupElement', element);
+  });
+  return useRenderElement('div', componentProps, {
+    ref: [forwardedRef, setInputGroupElement],
+    props: [{
+      role: 'group'
+    }, elementProps],
+    state,
+    stateAttributesMapping: triggerStateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInputGroup.displayName = "ComboboxInputGroup";

package/esm/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",
+}