@base-ui/react 1.0.0 → 1.1.0

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

@@ -5,7 +5,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Useful for conveying the status of an asynchronously loaded list.
  * Renders a `<div>` element.
  */
-export declare const ComboboxStatus: React.ForwardRefExoticComponent<ComboboxStatusProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxStatusState {}
 export interface ComboboxStatusProps extends BaseUIComponentProps<'div', ComboboxStatus.State> {}
 export declare namespace ComboboxStatus {

package/esm/combobox/store.d.ts

@@ -77,6 +77,9 @@ export declare const selectors: {
   query: (state: State) => string;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
+  hasSelectionChips: (state: State) => boolean;
+  hasSelectedValue: (state: State) => boolean;
+  hasNullItemLabel: (state: State, enabled: boolean) => boolean;
   open: (state: State) => boolean;
   mounted: (state: State) => boolean;
   forceMounted: (state: State) => boolean;

package/esm/combobox/store.js

@@ -1,10 +1,31 @@
 import { createSelector } from '@base-ui/utils/store';
 import { compareItemEquality } from "../utils/itemEquality.js";
+import { hasNullItemLabel } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
   query: createSelector(state => state.query),
   items: createSelector(state => state.items),
   selectedValue: createSelector(state => state.selectedValue),
+  hasSelectionChips: createSelector(state => {
+    const selectedValue = state.selectedValue;
+    return Array.isArray(selectedValue) && selectedValue.length > 0;
+  }),
+  hasSelectedValue: createSelector(state => {
+    const {
+      selectedValue,
+      selectionMode
+    } = state;
+    if (selectedValue == null) {
+      return false;
+    }
+    if (selectionMode === 'multiple' && Array.isArray(selectedValue)) {
+      return selectedValue.length > 0;
+    }
+    return true;
+  }),
+  hasNullItemLabel: createSelector((state, enabled) => {
+    return enabled ? hasNullItemLabel(state.items) : false;
+  }),
   open: createSelector(state => state.open),
   mounted: createSelector(state => state.mounted),
   forceMounted: createSelector(state => state.forceMounted),

package/esm/combobox/trigger/ComboboxTrigger.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
 import type { FieldRoot } 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<ComboboxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxTriggerState extends FieldRoot.State {
   /**
    * Whether the popup is open.
@@ -15,6 +16,18 @@ export interface ComboboxTriggerState extends FieldRoot.State {
    * Whether the component should ignore user interaction.
    */
   disabled: 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 ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTrigger.State> {
   /**

package/esm/combobox/trigger/ComboboxTrigger.js

@@ -7,22 +7,18 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useButton } from "../../use-button/index.js";
-import { useComboboxFloatingContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { useComboboxFloatingContext, useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { stopEvent, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
 import { useClick, useTypeahead } from "../../floating-ui-react/index.js";
+import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 const BOUNDARY_OFFSET = 2;
-const stateAttributesMapping = {
-  ...pressableTriggerOpenStateMapping,
-  ...fieldValidityMapping
-};
 
 /**
  * A button that opens the popup.
@@ -34,6 +30,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     className,
     nativeButton = true,
     disabled: disabledProp = false,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {
@@ -48,21 +45,36 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     labelId
   } = useLabelableContext();
   const store = useComboboxRootContext();
+  const {
+    filteredItems
+  } = useComboboxDerivedItemsContext();
   const selectionMode = useStore(store, selectors.selectionMode);
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
+  const required = useStore(store, selectors.required);
+  const mounted = useStore(store, selectors.mounted);
+  const popupSideValue = useStore(store, selectors.popupSide);
+  const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
   const triggerProps = useStore(store, selectors.triggerProps);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
+  const rootId = useStore(store, selectors.id);
   const open = useStore(store, selectors.open);
   const selectedValue = useStore(store, selectors.selectedValue);
   const activeIndex = useStore(store, selectors.activeIndex);
   const selectedIndex = useStore(store, selectors.selectedIndex);
+  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const floatingRootContext = useComboboxFloatingContext();
   const inputValue = useComboboxInputValueContext();
   const focusTimeout = useTimeout();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
+  const listEmpty = filteredItems.length === 0;
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  useLabelableId({
+    id: inputInsidePopup ? idProp : undefined
+  });
+  const id = inputInsidePopup ? idProp ?? rootId : idProp;
   const currentPointerTypeRef = React.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
@@ -109,8 +121,11 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
   const state = React.useMemo(() => ({
     ...fieldState,
     open,
-    disabled
-  }), [fieldState, open, disabled]);
+    disabled,
+    popupSide,
+    listEmpty,
+    placeholder: !hasSelectedValue
+  }), [fieldState, open, disabled, popupSide, listEmpty, hasSelectedValue]);
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);
   });
@@ -118,13 +133,14 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     ref: [forwardedRef, buttonRef, setTriggerElement],
     state,
     props: [triggerProps, triggerClickProps, triggerTypeaheadProps, {
+      id,
       tabIndex: inputInsidePopup ? 0 : -1,
-      disabled,
       role: inputInsidePopup ? 'combobox' : undefined,
       'aria-expanded': open ? 'true' : 'false',
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': open ? listElement?.id : undefined,
       'aria-readonly': readOnly || undefined,
+      'aria-required': inputInsidePopup ? required || undefined : undefined,
       'aria-labelledby': labelId,
       onPointerDown: trackPointerType,
       onPointerEnter: trackPointerType,
@@ -135,7 +151,11 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
         }
         focusTimeout.start(0, store.state.forceMount);
       },
-      onBlur() {
+      onBlur(event) {
+        // If focus is moving into the popup, don't count it as a blur.
+        if (contains(positionerElement, event.relatedTarget)) {
+          return;
+        }
         setTouched(true);
         setFocused(false);
         if (validationMode === 'onBlur') {
@@ -198,7 +218,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
         }
       }
     }, validation ? validation.getValidationProps(elementProps) : elementProps, getButtonProps],
-    stateAttributesMapping
+    stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
 });

package/esm/combobox/trigger/ComboboxTriggerDataAttributes.d.ts

@@ -15,6 +15,11 @@ export declare enum ComboboxTriggerDataAttributes {
    * 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 required.
    */
@@ -43,4 +48,12 @@ export declare enum ComboboxTriggerDataAttributes {
    * Present when the trigger is focused (when wrapped in Field.Root).
    */
   focused = "data-focused",
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty = "data-list-empty",
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  placeholder = "data-placeholder",
 }

package/esm/combobox/trigger/ComboboxTriggerDataAttributes.js

@@ -16,6 +16,11 @@ export let ComboboxTriggerDataAttributes = function (ComboboxTriggerDataAttribut
    * Present when the component is readonly.
    */
   ComboboxTriggerDataAttributes["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}
+   */
+  ComboboxTriggerDataAttributes["popupSide"] = "data-popup-side";
   /**
    * Present when the component is required.
    */
@@ -44,5 +49,13 @@ export let ComboboxTriggerDataAttributes = function (ComboboxTriggerDataAttribut
    * Present when the trigger is focused (when wrapped in Field.Root).
    */
   ComboboxTriggerDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  ComboboxTriggerDataAttributes["listEmpty"] = "data-list-empty";
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  ComboboxTriggerDataAttributes["placeholder"] = "data-placeholder";
   return ComboboxTriggerDataAttributes;
 }({});

package/esm/combobox/utils/stateAttributesMapping.d.ts

@@ -0,0 +1,14 @@
+import type { Side } from "../../utils/useAnchorPositioning.js";
+export declare const triggerStateAttributesMapping: {
+  popupSide: (side: Side | null) => {
+    'data-popup-side': Side;
+  } | null;
+  listEmpty: (empty: boolean) => {
+    'data-list-empty': string;
+  } | null;
+  valid(value: boolean | null): Record<string, string> | null;
+  open(value: boolean): {
+    "data-popup-open": string;
+    "data-pressed": string;
+  } | null;
+};

package/esm/combobox/utils/stateAttributesMapping.js

@@ -0,0 +1,12 @@
+import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
+import { fieldValidityMapping } from "../../field/utils/constants.js";
+export const triggerStateAttributesMapping = {
+  ...pressableTriggerOpenStateMapping,
+  ...fieldValidityMapping,
+  popupSide: side => side ? {
+    'data-popup-side': side
+  } : null,
+  listEmpty: empty => empty ? {
+    'data-list-empty': ''
+  } : null
+};

package/esm/combobox/value/ComboboxValue.d.ts

@@ -9,6 +9,11 @@ export declare function ComboboxValue(props: ComboboxValue.Props): React.ReactEl
 export interface ComboboxValueState {}
 export interface ComboboxValueProps {
   children?: React.ReactNode | ((selectedValue: any) => React.ReactNode);
+  /**
+   * The placeholder value to display when no value is selected.
+   * This is overridden by `children` if specified, or by a null item's label in `items`.
+   */
+  placeholder?: React.ReactNode;
 }
 export declare namespace ComboboxValue {
   type State = ComboboxValueState;

package/esm/combobox/value/ComboboxValue.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
-import { resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
+import { resolveMultipleLabels, resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
 import { selectors } from "../store.js";
 
 /**
@@ -15,21 +15,30 @@ import { selectors } from "../store.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ComboboxValue(props) {
   const {
-    children: childrenProp
+    children: childrenProp,
+    placeholder
   } = props;
   const store = useComboboxRootContext();
   const itemToStringLabel = useStore(store, selectors.itemToStringLabel);
   const selectedValue = useStore(store, selectors.selectedValue);
   const items = useStore(store, selectors.items);
-  let returnValue = null;
+  const multiple = useStore(store, selectors.selectionMode) === 'multiple';
+  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
+  const hasNullLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  let children = null;
   if (typeof childrenProp === 'function') {
-    returnValue = childrenProp(selectedValue);
+    children = childrenProp(selectedValue);
   } else if (childrenProp != null) {
-    returnValue = childrenProp;
+    children = childrenProp;
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+    children = placeholder;
+  } else if (multiple && Array.isArray(selectedValue)) {
+    children = resolveMultipleLabels(selectedValue, items, itemToStringLabel);
   } else {
-    returnValue = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
+    children = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
   }
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: returnValue
+    children: children
   });
 }

package/esm/composite/root/useCompositeRoot.d.ts

@@ -21,7 +21,7 @@ export interface UseCompositeRootParameters {
   enableHomeAndEndKeys?: boolean;
   /**
    * When `true`, keypress events on Composite's navigation keys
-   * be stopped with event.stopPropagation()
+   * be stopped with event.stopPropagation().
    * @default false
    */
   stopEventPropagation?: boolean;

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

@@ -6,7 +6,7 @@ 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<ContextMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ContextMenuTriggerState = {
   /**
    * Whether the context menu is currently open.

package/esm/csp-provider/CSPContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface CSPContextValue {
+  nonce?: string;
+  disableStyleElements?: boolean;
+}
+/**
+ * @internal
+ */
+export declare const CSPContext: React.Context<CSPContextValue | undefined>;
+/**
+ * @internal
+ */
+export declare function useCSPContext(): CSPContextValue;

package/esm/csp-provider/CSPContext.js

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+/**
+ * @internal
+ */
+export const CSPContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CSPContext.displayName = "CSPContext";
+const DEFAULT_CSP_CONTEXT_VALUE = {
+  disableStyleElements: false
+};
+
+/**
+ * @internal
+ */
+export function useCSPContext() {
+  return React.useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
+}

package/esm/csp-provider/CSPProvider.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * Provides a default Content Security Policy (CSP) configuration for Base UI components that
+ * require inline `<style>` or `<script>` tags.
+ *
+ * Documentation: [Base UI CSP Provider](https://base-ui.com/react/utils/csp-provider)
+ */
+export declare function CSPProvider(props: CSPProvider.Props): import("react/jsx-runtime").JSX.Element;
+export interface CSPProviderState {}
+export interface CSPProviderProps {
+  children?: React.ReactNode;
+  /**
+   * The nonce value to apply to inline `<style>` and `<script>` tags.
+   */
+  nonce?: string;
+  /**
+   * Whether inline `<style>` elements created by Base UI components should not be rendered. Instead, components must specify the CSS styles via custom class names or other methods.
+   * @default false
+   */
+  disableStyleElements?: boolean;
+}
+export declare namespace CSPProvider {
+  type State = CSPProviderState;
+  type Props = CSPProviderProps;
+}

package/esm/csp-provider/CSPProvider.js

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { CSPContext } from "./CSPContext.js";
+
+/**
+ * Provides a default Content Security Policy (CSP) configuration for Base UI components that
+ * require inline `<style>` or `<script>` tags.
+ *
+ * Documentation: [Base UI CSP Provider](https://base-ui.com/react/utils/csp-provider)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CSPProvider(props) {
+  const {
+    children,
+    nonce,
+    disableStyleElements
+  } = props;
+  const contextValue = React.useMemo(() => ({
+    nonce,
+    disableStyleElements
+  }), [nonce, disableStyleElements]);
+  return /*#__PURE__*/_jsx(CSPContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/esm/csp-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { CSPProvider } from "./index.parts.js";
+export type * from "./CSPProvider.js";

package/esm/csp-provider/index.js

@@ -0,0 +1 @@
+export { CSPProvider } from "./index.parts.js";

package/esm/csp-provider/index.parts.d.ts

@@ -0,0 +1 @@
+export { CSPProvider } from "./CSPProvider.js";

package/esm/csp-provider/index.parts.js

@@ -0,0 +1 @@
+export { CSPProvider } from "./CSPProvider.js";

package/esm/dialog/backdrop/DialogBackdrop.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 DialogBackdrop: React.ForwardRefExoticComponent<DialogBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdrop.State> {
   /**
    * Whether the backdrop is forced to render even when nested.

package/esm/dialog/close/DialogClose.d.ts

@@ -6,7 +6,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<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogClose.State> {}
 export interface DialogCloseState {
   /**

package/esm/dialog/description/DialogDescription.d.ts

@@ -6,7 +6,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<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescription.State> {}
 export interface DialogDescriptionState {}
 export declare namespace DialogDescription {

package/esm/dialog/popup/DialogPopup.d.ts

@@ -8,7 +8,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<DialogPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogPopup: React.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopup.State> {
   /**
    * Determines the element to focus when the dialog is opened.

package/esm/dialog/portal/DialogPortal.d.ts

@@ -7,7 +7,7 @@ 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<DialogPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogPortal: React.ForwardRefExoticComponent<Omit<DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace DialogPortal {
   interface State {}
 }

package/esm/dialog/portal/DialogPortal.js

@@ -25,6 +25,7 @@ export const DialogPortal = /*#__PURE__*/React.forwardRef(function DialogPortal(
   } = useDialogRootContext();
   const mounted = store.useState('mounted');
   const modal = store.useState('modal');
+  const open = store.useState('open');
   const shouldRender = mounted || keepMounted;
   if (!shouldRender) {
     return null;

package/esm/dialog/root/DialogRoot.d.ts

@@ -50,10 +50,10 @@ export interface DialogRootProps<Payload = unknown> {
    * Useful when the dialog's animation is controlled by an external library.
    * - `close`: Closes the dialog imperatively when called.
    */
-  actionsRef?: React.RefObject<DialogRoot.Actions>;
+  actionsRef?: React.RefObject<DialogRoot.Actions | null>;
   /**
-   * A handle to associate the popover with a trigger.
-   * If specified, allows external triggers to control the popover's open state.
+   * A handle to associate the dialog with a trigger.
+   * If specified, allows external triggers to control the dialog's open state.
    * Can be created with the Dialog.createHandle() method.
    */
   handle?: DialogHandle<Payload>;
@@ -64,7 +64,7 @@ export interface DialogRootProps<Payload = unknown> {
   children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
   /**
    * ID of the trigger that the dialog is associated with.
-   * This is useful in conjuntion with the `open` prop to create a controlled dialog.
+   * This is useful in conjunction with the `open` prop to create a controlled dialog.
    * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
    */
   triggerId?: string | null;

package/esm/dialog/store/DialogStore.d.ts

@@ -42,8 +42,8 @@ declare const selectors: {
   isTriggerActive: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
   isOpenedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
   isMountedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => import("../../utils/types.js").HTMLProps;
-  popupProps: (state: PopupStoreState<unknown>) => import("../../utils/types.js").HTMLProps;
+  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => import("../../index.js").HTMLProps;
+  popupProps: (state: PopupStoreState<unknown>) => import("../../index.js").HTMLProps;
   popupElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
   positionerElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
 };

package/esm/dialog/title/DialogTitle.d.ts

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

package/esm/dialog/viewport/DialogViewport.d.ts

@@ -7,7 +7,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-export declare const DialogViewport: React.ForwardRefExoticComponent<DialogViewportProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogViewport: React.ForwardRefExoticComponent<Omit<DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface DialogViewportState {
   /**
    * Whether the dialog is currently open.

package/esm/field/control/FieldControl.d.ts

@@ -13,7 +13,7 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldControl: React.ForwardRefExoticComponent<FieldControlProps & React.RefAttributes<HTMLInputElement>>;
+export declare const FieldControl: React.ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export type FieldControlState = FieldRoot.State;
 export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControl.State> {
   /**

package/esm/field/description/FieldDescription.d.ts

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

package/esm/field/error/FieldError.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type FieldErrorState = FieldRoot.State;
 export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldError.State> {
   /**

package/esm/field/index.d.ts

@@ -4,4 +4,5 @@ export type * from "./label/FieldLabel.js";
 export type * from "./description/FieldDescription.js";
 export type * from "./error/FieldError.js";
 export type * from "./control/FieldControl.js";
-export type * from "./validity/FieldValidity.js";
+export type * from "./validity/FieldValidity.js";
+export type * from "./item/FieldItem.js";

package/esm/field/item/FieldItem.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldItem: React.ForwardRefExoticComponent<FieldItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldItem: React.ForwardRefExoticComponent<Omit<FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.State> {
   /**
    * Whether the wrapped control should ignore user interaction.