@base-ui/react 1.2.0 → 1.3.0

package/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/combobox/root/AriaCombobox.js

@@ -107,6 +107,8 @@ 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);
@@ -259,6 +261,7 @@ function AriaCombobox(props) {
   }, [filteredItems, isGrouped]);
   const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.Store({
     id,
+    labelId: undefined,
     selectedValue,
     open,
     filter,
@@ -270,6 +273,8 @@ function AriaCombobox(props) {
     popupRef,
     emptyRef,
     inputRef,
+    startDismissRef,
+    endDismissRef,
     keyboardActiveRef,
     chipsContainerRef,
     clearRef,
@@ -303,6 +308,7 @@ function AriaCombobox(props) {
     listElement: null,
     triggerElement: null,
     inputElement: null,
+    inputGroupElement: null,
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
@@ -336,6 +342,7 @@ function AriaCombobox(props) {
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
   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 inline = (0, _store.useStore)(store, _store2.selectors.inline);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const triggerRef = (0, _useValueAsRef.useValueAsRef)(triggerElement);
@@ -346,8 +353,7 @@ function AriaCombobox(props) {
   } = (0, _useTransitionStatus.useTransitionStatus)(open);
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _useField.useField)({
     id,
@@ -545,7 +551,6 @@ function AriaCombobox(props) {
     setMounted(false);
     onOpenChangeComplete?.(false);
     setQueryChangedAfterOpen(false);
-    resetOpenInteractionType();
     setCloseQuery(null);
     if (selectionMode === 'none') {
       setIndices({
@@ -766,8 +771,11 @@ 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',
@@ -809,7 +817,7 @@ function AriaCombobox(props) {
     bubbles: inline ? true : undefined,
     outsidePress(event) {
       const target = (0, _utils.getTarget)(event);
-      return !(0, _utils.contains)(triggerElement, target) && !(0, _utils.contains)(clearRef.current, target) && !(0, _utils.contains)(chipsContainerRef.current, target);
+      return !(0, _utils.contains)(triggerElement, target) && !(0, _utils.contains)(clearRef.current, target) && !(0, _utils.contains)(chipsContainerRef.current, target) && !(0, _utils.contains)(inputGroupElement, target);
     }
   });
   const listNavigation = (0, _floatingUiReact.useListNavigation)(floatingRootContext, {

package/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/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/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/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;
 };

package/combobox/store.js

@@ -9,6 +9,7 @@ var _itemEquality = require("../utils/itemEquality");
 var _resolveValueLabel = require("../utils/resolveValueLabel");
 const selectors = exports.selectors = {
   id: (0, _store.createSelector)(state => state.id),
+  labelId: (0, _store.createSelector)(state => state.labelId),
   query: (0, _store.createSelector)(state => state.query),
   items: (0, _store.createSelector)(state => state.items),
   selectedValue: (0, _store.createSelector)(state => state.selectedValue),
@@ -56,6 +57,7 @@ const selectors = exports.selectors = {
   listElement: (0, _store.createSelector)(state => state.listElement),
   triggerElement: (0, _store.createSelector)(state => state.triggerElement),
   inputElement: (0, _store.createSelector)(state => state.inputElement),
+  inputGroupElement: (0, _store.createSelector)(state => state.inputGroupElement),
   popupSide: (0, _store.createSelector)(state => state.popupSide),
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   inputInsidePopup: (0, _store.createSelector)(state => state.inputInsidePopup),

package/combobox/trigger/ComboboxTrigger.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } 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 button that opens the popup.
  * Renders a `<button>` element.
  */
 export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface ComboboxTriggerState extends FieldRoot.State {
+export interface ComboboxTriggerState extends FieldRootState {
   /**
    * Whether the popup is open.
    */
@@ -29,7 +29,7 @@ export interface ComboboxTriggerState extends FieldRoot.State {
    */
   placeholder: boolean;
 }
-export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTrigger.State> {
+export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTriggerState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/combobox/trigger/ComboboxTrigger.js

@@ -24,6 +24,7 @@ var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _floatingUiReact = require("../../floating-ui-react");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 const BOUNDARY_OFFSET = 2;
 
 /**
@@ -48,7 +49,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const {
@@ -66,6 +67,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const comboboxLabelId = (0, _store.useStore)(store, _store2.selectors.labelId);
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
   const activeIndex = (0, _store.useStore)(store, _store2.selectors.activeIndex);
@@ -81,6 +83,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     id: inputInsidePopup ? idProp : undefined
   });
   const id = inputInsidePopup ? idProp ?? rootId : idProp;
+  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, comboboxLabelId);
   const currentPointerTypeRef = React.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
@@ -146,7 +149,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': open ? listElement?.id : undefined,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       onPointerDown: trackPointerType,
       onPointerEnter: trackPointerType,
       onFocus() {

package/combobox/utils/ComboboxInternalDismissButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * @internal
+ */
+export declare const ComboboxInternalDismissButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>;

package/combobox/utils/ComboboxInternalDismissButton.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInternalDismissButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
+var _useButton = require("../../use-button");
+var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @internal
+ */
+const ComboboxInternalDismissButton = exports.ComboboxInternalDismissButton = /*#__PURE__*/React.forwardRef(function ComboboxInternalDismissButton(_, forwardedRef) {
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const {
+    buttonRef,
+    getButtonProps
+  } = (0, _useButton.useButton)({
+    native: false
+  });
+  const mergedRef = (0, _useMergedRefs.useMergedRefs)(forwardedRef, buttonRef);
+  const handleDismiss = (0, _useStableCallback.useStableCallback)(event => {
+    store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closePress, event.nativeEvent, event.currentTarget));
+  });
+  const dismissProps = getButtonProps({
+    onClick: handleDismiss
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ref: mergedRef,
+    ...dismissProps,
+    "aria-label": "Dismiss",
+    tabIndex: undefined,
+    style: _visuallyHidden.visuallyHiddenInput
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInternalDismissButton.displayName = "ComboboxInternalDismissButton";

package/composite/item/CompositeItem.d.ts

@@ -5,6 +5,7 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  * @internal
  */
 export declare function CompositeItem<Metadata, State extends Record<string, any>>(componentProps: CompositeItem.Props<Metadata, State>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export interface CompositeItemState {}
 export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className'> {
   children?: React.ReactNode;
   metadata?: Metadata | undefined;
@@ -15,5 +16,6 @@ export interface CompositeItemProps<Metadata, State extends Record<string, any>>
   tag?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export declare namespace CompositeItem {
-  type Props<Metadata, State extends Record<string, any>> = CompositeItemProps<Metadata, State>;
+  type State = CompositeItemState;
+  type Props<Metadata, TState extends Record<string, any>> = CompositeItemProps<Metadata, TState>;
 }

package/composite/list/CompositeList.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 export type CompositeMetadata<CustomMetadata> = {
-  index?: (number | null) | undefined;
+  index?: number | null | undefined;
 } & CustomMetadata;
 /**
  * Provides context for a list of items in a composite component.
  * @internal
  */
 export declare function CompositeList<Metadata>(props: CompositeList.Props<Metadata>): import("react/jsx-runtime").JSX.Element;
+export interface CompositeListState {}
 export interface CompositeListProps<Metadata> {
   children: React.ReactNode;
   /**
@@ -22,5 +23,6 @@ export interface CompositeListProps<Metadata> {
   onMapChange?: ((newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void) | undefined;
 }
 export declare namespace CompositeList {
+  type State = CompositeListState;
   type Props<Metadata> = CompositeListProps<Metadata>;
 }

package/composite/list/useCompositeListItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface UseCompositeListItemParameters<Metadata> {
   index?: number | undefined;
-  label?: (string | null) | undefined;
+  label?: string | null | undefined;
   metadata?: Metadata | undefined;
   textRef?: React.RefObject<HTMLElement | null> | undefined;
   /** Enables guessing the indexes. This avoids a re-render after mount, which is useful for

package/composite/root/CompositeRoot.d.ts

@@ -7,13 +7,14 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  * @internal
  */
 export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
+export interface CompositeRootState {}
 export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children'> {
   props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;
   state?: State | undefined;
   stateAttributesMapping?: StateAttributesMapping<State> | undefined;
   refs?: React.Ref<HTMLElement | null>[] | undefined;
   tag?: keyof React.JSX.IntrinsicElements | undefined;
-  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
   highlightedIndex?: number | undefined;
@@ -29,5 +30,6 @@ export interface CompositeRootProps<Metadata, State extends Record<string, any>>
   highlightItemOnHover?: boolean | undefined;
 }
 export declare namespace CompositeRoot {
-  type Props<Metadata, State extends Record<string, any>> = CompositeRootProps<Metadata, State>;
+  type State = CompositeRootState;
+  type Props<Metadata, TState extends Record<string, any>> = CompositeRootProps<Metadata, TState>;
 }

package/composite/root/useCompositeRoot.d.ts

@@ -4,7 +4,7 @@ import { type Dimensions, type ModifierKey } from "../composite.js";
 import { CompositeMetadata } from "../list/CompositeList.js";
 import { HTMLProps } from "../../utils/types.js";
 export interface UseCompositeRootParameters {
-  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
   highlightedIndex?: number | undefined;

package/context-menu/trigger/ContextMenuTrigger.d.ts

@@ -7,13 +7,13 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
  */
 export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type ContextMenuTriggerState = {
+export interface ContextMenuTriggerState {
   /**
    * Whether the context menu is currently open.
    */
   open: boolean;
-};
-export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTrigger.State> {}
+}
+export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTriggerState> {}
 export declare namespace ContextMenuTrigger {
   type State = ContextMenuTriggerState;
   type Props = ContextMenuTriggerProps;

package/dialog/backdrop/DialogBackdrop.d.ts

@@ -8,7 +8,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdrop.State> {
+export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdropState> {
   /**
    * Whether the backdrop is forced to render even when nested.
    * @default false
@@ -20,6 +20,9 @@ export interface DialogBackdropState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace DialogBackdrop {

package/dialog/close/DialogClose.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogClose.State> {}
+export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogCloseState> {}
 export interface DialogCloseState {
   /**
    * Whether the button is currently disabled.

package/dialog/description/DialogDescription.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescription.State> {}
+export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescriptionState> {}
 export interface DialogDescriptionState {}
 export declare namespace DialogDescription {
   type Props = DialogDescriptionProps;

package/dialog/popup/DialogPopup.d.ts

@@ -9,7 +9,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPopup: React.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopup.State> {
+export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopupState> {
   /**
    * Determines the element to focus when the dialog is opened.
    *
@@ -19,7 +19,7 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `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) => boolean | HTMLElement | null | void)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines the element to focus when the dialog is closed.
    *
@@ -29,13 +29,16 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `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) => boolean | HTMLElement | null | void)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
 }
 export interface DialogPopupState {
   /**
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the dialog is nested within a parent dialog.

package/dialog/portal/DialogPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPortal: React.ForwardRefExoticComponent<Omit<DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace DialogPortal {
-  interface State {}
-}
-export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.State> {
+export interface DialogPortalState {}
+export interface DialogPortalProps extends FloatingPortal.Props<DialogPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -20,8 +18,9 @@ export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.Sta
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DialogPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<DialogPortalState>['container'] | undefined;
 }
 export declare namespace DialogPortal {
+  type State = DialogPortalState;
   type Props = DialogPortalProps;
 }