@base-ui/react 1.4.1 → 1.5.0

package/esm/combobox/root/AriaCombobox.js

@@ -11,7 +11,7 @@ import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidd
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { Store, useStore } from '@base-ui/utils/store';
 import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useClick } from "../../floating-ui-react/index.js";
+import { useDismiss, useFloatingRootContext, useListNavigation, useClick } from "../../floating-ui-react/index.js";
 import { contains, getTarget } from "../../floating-ui-react/utils.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
@@ -28,9 +28,12 @@ import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
 import { useValueChanged } from "../../internals/useValueChanged.js";
 import { NOOP } from "../../internals/noop.js";
+import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.js";
+import { mergeProps } from "../../merge-props/index.js";
 import { stringifyAsLabel, stringifyAsValue, isGroupedItems } from "../../internals/resolveValueLabel.js";
 import { compareItemEquality, defaultItemEquality, findItemIndex, removeItem, selectedValueIncludes } from "../../internals/itemEquality.js";
 import { INITIAL_LAST_HIGHLIGHT, NO_ACTIVE_VALUE } from "./utils/constants.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 
 /**
  * @internal
@@ -92,6 +95,7 @@ export function AriaCombobox(props) {
     validationMode,
     validation
   } = useFieldRootContext();
+  const direction = useDirection();
   const id = useLabelableId({
     id: idProp
   });
@@ -302,6 +306,7 @@ export function AriaCombobox(props) {
     popupProps: {},
     inputProps: {},
     triggerProps: {},
+    itemProps: EMPTY_OBJECT,
     positionerElement: null,
     listElement: null,
     triggerElement: null,
@@ -310,6 +315,9 @@ export function AriaCombobox(props) {
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
+    // Avoid duplicate names in the server HTML. Popup inputs aren't rendered
+    // until after hydration, so the hidden input takes over then if needed.
+    inputOwnsFormValue: selectionMode === 'none',
     onOpenChangeComplete: onOpenChangeCompleteProp || NOOP,
     // Placeholder callbacks replaced on first render
     setOpen: NOOP,
@@ -318,7 +326,6 @@ export function AriaCombobox(props) {
     setIndices: NOOP,
     onItemHighlighted: NOOP,
     handleSelection: NOOP,
-    getItemProps: () => EMPTY_OBJECT,
     forceMount: NOOP,
     requestSubmit: NOOP
   })).current;
@@ -343,6 +350,7 @@ export function AriaCombobox(props) {
   const inputGroupElement = useStore(store, selectors.inputGroupElement);
   const inline = useStore(store, selectors.inline);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
+  const inputOwnsFormValue = useStore(store, selectors.inputOwnsFormValue);
   const triggerRef = useValueAsRef(triggerElement);
   const {
     mounted,
@@ -353,12 +361,8 @@ export function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = useOpenInteractionType(open);
-  const getFieldValue = useStableCallback(() => fieldStringValue);
-  useRegisterFieldControl(inputInsidePopup ? triggerRef : inputRef, {
-    id,
-    value: fieldRawValue,
-    getValue: getFieldValue
-  });
+  const getStringifiedValueForForm = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(inputInsidePopup ? triggerRef : inputRef, id, fieldRawValue, getStringifiedValueForForm);
   const forceMount = useStableCallback(() => {
     if (items) {
       // Ensure typeahead works on a closed list.
@@ -445,6 +449,16 @@ export function AriaCombobox(props) {
     if (eventDetails.isCanceled) {
       return;
     }
+
+    // If reopening interrupts the close animation, handleUnmount won't run to clear the
+    // frozen closeQuery and pending popup input.
+    if (nextOpen && multiple && inputInsidePopup && !inline && closeQuery !== null) {
+      setQueryChangedAfterOpen(false);
+      setCloseQuery(null);
+      if (inputValue !== '') {
+        setInputValue('', createChangeEventDetails(REASONS.inputClear, eventDetails.event));
+      }
+    }
     if (!nextOpen && queryChangedAfterOpen) {
       if (single) {
         if (!inline) {
@@ -455,17 +469,22 @@ export function AriaCombobox(props) {
           setQueryChangedAfterOpen(false);
         }
       } else if (multiple) {
-        if (inline || inputInsidePopup) {
+        if (!inline) {
+          // Freeze the current query so filtering remains stable while exiting.
+          setCloseQuery(query);
+        }
+        if (inputInsidePopup) {
           setIndices({
             activeIndex: null
           });
-        } else {
-          // Freeze the current query so filtering remains stable while exiting.
-          setCloseQuery(query);
         }
+
         // Clear the input immediately on close while retaining filtering via closeQuery for exit animations
-        // if the input is outside the popup.
-        setInputValue('', createChangeEventDetails(REASONS.inputClear, eventDetails.event));
+        // if the input is outside the popup. When the input is inside the popup, defer the clear until
+        // unmount so the filtered list doesn't flash to unfiltered during the exit animation.
+        if (!inputInsidePopup || inline) {
+          setInputValue('', createChangeEventDetails(REASONS.inputClear, eventDetails.event));
+        }
       }
     }
     setOpenUnwrapped(nextOpen);
@@ -834,6 +853,7 @@ export function AriaCombobox(props) {
     // Floating UI tests don't require `role="row"` wrappers, so retains the number API.
     cols: grid ? 2 : 1,
     orientation: grid ? 'horizontal' : undefined,
+    rtl: direction === 'rtl',
     disabledIndices: EMPTY_ARRAY,
     onNavigate(nextActiveIndex, event) {
       // Retain the highlight only while actually transitioning out or closed.
@@ -852,18 +872,28 @@ export function AriaCombobox(props) {
       }
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = useInteractions([role, click, dismiss, listNavigation]);
+  const inputProps = React.useMemo(() => mergeProps(listNavigation.reference, dismiss.reference, click.reference, role.reference), [listNavigation.reference, dismiss.reference, click.reference, role.reference]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, listNavigation.floating, dismiss.floating, role.floating), [listNavigation.floating, dismiss.floating, role.floating]);
+  const itemProps = React.useMemo(() => {
+    const listNavigationItemProps = listNavigation.item;
+    if (!listNavigationItemProps) {
+      return EMPTY_OBJECT;
+    }
+
+    // Combobox keeps focus on the input; item focus would incorrectly sync
+    // list navigation state from DOM focus.
+    return {
+      ...listNavigationItemProps,
+      onFocus: undefined
+    };
+  }, [listNavigation.item]);
   useOnFirstRender(() => {
     store.update({
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
-      getItemProps,
+      itemProps,
       setOpen,
       setInputValue,
       setSelectedValue,
@@ -883,11 +913,11 @@ export function AriaCombobox(props) {
       transitionStatus,
       items,
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
       openMethod,
-      getItemProps,
+      itemProps,
       selectionMode,
       name,
       form,
@@ -905,9 +935,10 @@ export function AriaCombobox(props) {
       isItemEqualToValue,
       submitOnItemClick,
       hasInputValue,
-      requestSubmit
+      requestSubmit,
+      inputOwnsFormValue: selectionMode === 'none' && (inlineProp || !store.state.inputInsidePopup)
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, popupProps, inputProps, itemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
   const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -922,7 +953,7 @@ export function AriaCombobox(props) {
     return stringifyAsValue(fieldRawValue, itemToStringValue);
   }, [fieldRawValue, itemToStringValue]);
   const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
-  const hiddenInputName = multiple || selectionMode === 'none' ? undefined : name;
+  const hiddenInputName = multiple || selectionMode === 'none' && inputOwnsFormValue ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(selectedValue) || !name) {
       return null;
@@ -951,7 +982,9 @@ export function AriaCombobox(props) {
         // Handle browser autofill.
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
-          if (event.nativeEvent.defaultPrevented) {
+          if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+            // Outside Field.Root, the event is not wrapped by mergeProps.
+            event.preventBaseUIHandler?.();
             return;
           }
           const nextValue = event.currentTarget.value;

package/esm/combobox/store.d.ts

@@ -21,6 +21,7 @@ export type State = {
   popupProps: HTMLProps;
   inputProps: HTMLProps;
   triggerProps: HTMLProps;
+  itemProps: HTMLProps;
   positionerElement: HTMLElement | null;
   listElement: HTMLElement | null;
   triggerElement: HTMLElement | null;
@@ -29,6 +30,7 @@ export type State = {
   popupSide: Side | null;
   openMethod: InteractionType | null;
   inputInsidePopup: boolean;
+  inputOwnsFormValue: boolean;
   selectionMode: 'single' | 'multiple' | 'none';
   listRef: React.RefObject<Array<HTMLElement | null>>;
   labelsRef: React.RefObject<Array<string | null>>;
@@ -54,10 +56,6 @@ export type State = {
   onItemHighlighted: (item: any, eventDetails: AriaCombobox.HighlightEventDetails) => void;
   forceMount: () => void;
   handleSelection: (event: MouseEvent | PointerEvent | KeyboardEvent, passedValue?: any) => void;
-  getItemProps: (props?: HTMLProps & {
-    active?: boolean | undefined;
-    selected?: boolean | undefined;
-  }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
   form: string | undefined;
@@ -97,10 +95,7 @@ export declare const selectors: {
   popupProps: (state: State) => HTMLProps;
   inputProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;
-  getItemProps: (state: State) => (props?: HTMLProps & {
-    active?: boolean | undefined;
-    selected?: boolean | undefined;
-  }) => Record<string, unknown>;
+  itemProps: (state: State) => HTMLProps;
   positionerElement: (state: State) => HTMLElement | null;
   listElement: (state: State) => HTMLElement | null;
   triggerElement: (state: State) => HTMLElement | null;
@@ -109,6 +104,7 @@ export declare const selectors: {
   popupSide: (state: State) => Side | null;
   openMethod: (state: State) => InteractionType | null;
   inputInsidePopup: (state: State) => boolean;
+  inputOwnsFormValue: (state: State) => boolean;
   selectionMode: (state: State) => "none" | "multiple" | "single";
   name: (state: State) => string | undefined;
   form: (state: State) => string | undefined;

package/esm/combobox/store.js

@@ -45,7 +45,7 @@ export const selectors = {
   popupProps: createSelector(state => state.popupProps),
   inputProps: createSelector(state => state.inputProps),
   triggerProps: createSelector(state => state.triggerProps),
-  getItemProps: createSelector(state => state.getItemProps),
+  itemProps: createSelector(state => state.itemProps),
   positionerElement: createSelector(state => state.positionerElement),
   listElement: createSelector(state => state.listElement),
   triggerElement: createSelector(state => state.triggerElement),
@@ -54,6 +54,7 @@ export const selectors = {
   popupSide: createSelector(state => state.popupSide),
   openMethod: createSelector(state => state.openMethod),
   inputInsidePopup: createSelector(state => state.inputInsidePopup),
+  inputOwnsFormValue: createSelector(state => state.inputOwnsFormValue),
   selectionMode: createSelector(state => state.selectionMode),
   name: createSelector(state => state.name),
   form: createSelector(state => state.form),

package/esm/combobox/utils/ComboboxInternalDismissButton.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { useButton } from "../../internals/use-button/index.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
@@ -21,9 +20,9 @@ export const ComboboxInternalDismissButton = /*#__PURE__*/React.forwardRef(funct
     native: false
   });
   const mergedRef = useMergedRefs(forwardedRef, buttonRef);
-  const handleDismiss = useStableCallback(event => {
+  function handleDismiss(event) {
     store.state.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent, event.currentTarget));
-  });
+  }
   const dismissProps = getButtonProps({
     onClick: handleDismiss
   });

package/esm/csp-provider/CSPProvider.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { CSPContext } from "./CSPContext.js";
+import { CSPContext } from "../internals/csp-context/CSPContext.js";
 
 /**
  * Provides a default Content Security Policy (CSP) configuration for Base UI components that

package/esm/dialog/close/DialogClose.js

@@ -17,20 +17,15 @@ export const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(co
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
-    style,
     ...elementProps
   } = componentProps;
   const {
     store
   } = useDialogRootContext();
   const open = store.useState('open');
-  function handleClick(event) {
-    if (open) {
-      store.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent));
-    }
-  }
   const {
     getButtonProps,
     buttonRef
@@ -41,6 +36,11 @@ export const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(co
   const state = {
     disabled
   };
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent));
+    }
+  }
   return useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/esm/dialog/popup/DialogPopup.js

@@ -11,6 +11,7 @@ import { DialogPopupDataAttributes } from "./DialogPopupDataAttributes.js";
 import { useDialogPortalContext } from "../portal/DialogPortalContext.js";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
 import { COMPOSITE_KEYS } from "../../internals/composite/composite.js";
+import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...baseMapping,
@@ -30,11 +31,11 @@ const stateAttributesMapping = {
  */
 export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(componentProps, forwardedRef) {
   const {
+    render,
     className,
+    style,
     finalFocus,
     initialFocus,
-    render,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -53,6 +54,8 @@ export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(co
   const titleElementId = store.useState('titleElementId');
   const transitionStatus = store.useState('transitionStatus');
   const role = store.useState('role');
+  const floatingId = floatingRootContext.useState('floatingId');
+  const popupId = elementProps.id ?? floatingId;
   useDialogPortalContext();
   useOpenChangeComplete({
     open,
@@ -75,6 +78,7 @@ export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(co
   }
   const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
   const nestedDialogOpen = nestedOpenDialogCount > 0;
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     nested,
@@ -84,10 +88,11 @@ export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(co
   const element = useRenderElement('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId ?? undefined,
       'aria-describedby': descriptionElementId ?? undefined,
       role,
-      tabIndex: -1,
+      ...FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
         if (COMPOSITE_KEYS.has(event.key)) {
@@ -98,7 +103,7 @@ export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(co
         [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
       }
     }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping
   });
   return /*#__PURE__*/_jsx(FloatingFocusManager, {

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

@@ -3,7 +3,6 @@ import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEvent
 import { REASONS } from "../../internals/reasons.js";
 import { DialogHandle } from "../store/DialogHandle.js";
 import { type PayloadChildRenderFunction } from "../../utils/popups/index.js";
-export declare const IsDrawerContext: React.Context<boolean>;
 /**
  * Groups all parts of the dialog.
  * Doesn't render its own HTML element.
@@ -70,7 +69,7 @@ export interface DialogRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the dialog is associated with.
    * 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 (that is, when the `open` prop is not set).
+   * There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/esm/dialog/root/DialogRoot.js

@@ -1,12 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
-import { useDialogRoot } from "./useDialogRoot.js";
-import { DialogRootContext, useDialogRootContext } from "./DialogRootContext.js";
-import { DialogStore } from "../store/DialogStore.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const IsDrawerContext = /*#__PURE__*/React.createContext(false);
+import { IsDrawerContext } from "./DialogRootContext.js";
+import { useRenderDialogRoot } from "./useRenderDialogRoot.js";
 
 /**
  * Groups all parts of the dialog.
@@ -14,71 +10,7 @@ export const IsDrawerContext = /*#__PURE__*/React.createContext(false);
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
 export function DialogRoot(props) {
-  const {
-    children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    onOpenChangeComplete,
-    disablePointerDismissal = false,
-    modal = true,
-    actionsRef,
-    handle,
-    triggerId: triggerIdProp,
-    defaultTriggerId: defaultTriggerIdProp = null
-  } = props;
-  const parentDialogRootContext = useDialogRootContext(true);
-  const isDrawer = React.useContext(IsDrawerContext);
-  const nested = Boolean(parentDialogRootContext);
-  const store = DialogStore.useStore(handle?.store, {
-    open: defaultOpen,
-    openProp,
-    activeTriggerId: defaultTriggerIdProp,
-    triggerIdProp,
-    modal,
-    disablePointerDismissal,
-    nested
-  });
-
-  // Support initially open state when uncontrolled
-  useOnFirstRender(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
-      store.update({
-        open: true,
-        activeTriggerId: defaultTriggerIdProp
-      });
-    }
-  });
-  store.useControlledProp('openProp', openProp);
-  store.useControlledProp('triggerIdProp', triggerIdProp);
-  store.useSyncedValues({
-    disablePointerDismissal,
-    nested,
-    modal
-  });
-  store.useContextCallback('onOpenChange', onOpenChange);
-  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
-  const payload = store.useState('payload');
-  useDialogRoot({
-    store,
-    actionsRef,
-    parentContext: parentDialogRootContext?.store.context,
-    isDrawer,
-    onOpenChange,
-    triggerIdProp
-  });
-  const contextValue = React.useMemo(() => ({
-    store
-  }), [store]);
-  return /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
-    value: false,
-    children: /*#__PURE__*/_jsx(DialogRootContext.Provider, {
-      value: contextValue,
-      children: typeof children === 'function' ? children({
-        payload
-      }) : children
-    })
-  });
+  const mode = React.useContext(IsDrawerContext) ? 'drawer' : 'dialog';
+  return useRenderDialogRoot(props, mode);
 }

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

@@ -3,6 +3,7 @@ import { DialogStore } from "../store/DialogStore.js";
 export interface DialogRootContext<Payload = unknown> {
   store: DialogStore<Payload>;
 }
+export declare const IsDrawerContext: React.Context<boolean>;
 export declare const DialogRootContext: React.Context<DialogRootContext<unknown> | undefined>;
 export declare function useDialogRootContext(optional?: false): DialogRootContext;
 export declare function useDialogRootContext(optional: true): DialogRootContext | undefined;

package/esm/dialog/root/DialogRootContext.js

@@ -2,6 +2,8 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
+export const IsDrawerContext = /*#__PURE__*/React.createContext(false);
+if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
 export const DialogRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
 export function useDialogRootContext(optional) {

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

@@ -6,9 +6,17 @@ export interface UseDialogRootParameters {
   store: DialogStore<any>;
   actionsRef?: DialogRoot.Props['actionsRef'] | undefined;
   parentContext?: DialogStore<unknown>['context'] | undefined;
-  onOpenChange: DialogRoot.Props['onOpenChange'];
   isDrawer: boolean;
-  triggerIdProp?: string | null | undefined;
 }
-export type UseDialogRootReturnValue = void;
-export interface UseDialogRootState {}
+export interface UseDialogRootReturnValue {
+  parentContext: DialogStore<unknown>['context'] | undefined;
+  isDrawer: boolean;
+}
+export interface UseDialogRootState {}
+export declare function DialogInteractions({
+  store,
+  dialogRoot
+}: {
+  store: DialogStore<any>;
+  dialogRoot: UseDialogRootReturnValue;
+}): null;

package/esm/dialog/root/useDialogRoot.js

@@ -2,12 +2,13 @@
 
 import * as React from 'react';
 import { useScrollLock } from '@base-ui/utils/useScrollLock';
-import { useDismiss, useInteractions, useRole, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { mergeProps } from "../../merge-props/index.js";
+import { useDismiss } from "../../floating-ui-react/index.js";
 import { contains, getTarget } from "../../floating-ui-react/utils.js";
-import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
-import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
+import { FOCUSABLE_POPUP_PROPS, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps, usePopupRootSync } from "../../utils/popups/index.js";
 export function useDialogRoot(params) {
   const {
     store,
@@ -16,13 +17,7 @@ export function useDialogRoot(params) {
     isDrawer
   } = params;
   const open = store.useState('open');
-  const disablePointerDismissal = store.useState('disablePointerDismissal');
-  const modal = store.useState('modal');
-  const popupElement = store.useState('popupElement');
-  const {
-    openMethod,
-    triggerProps
-  } = useOpenInteractionType(open);
+  usePopupRootSync(store, open);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
@@ -34,15 +29,27 @@ export function useDialogRoot(params) {
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = useSyncedFloatingRootContext({
-    popupStore: store,
-    onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true
-  });
+  return {
+    parentContext,
+    isDrawer
+  };
+}
+export function DialogInteractions({
+  store,
+  dialogRoot
+}) {
+  const {
+    parentContext,
+    isDrawer
+  } = dialogRoot;
+  const open = store.useState('open');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const modal = store.useState('modal');
+  const popupElement = store.useState('popupElement');
+  const floatingRootContext = store.useState('floatingRootContext');
   const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React.useState(0);
   const [ownNestedOpenDrawers, setOwnNestedOpenDrawers] = React.useState(0);
   const isTopmost = ownNestedOpenDialogs === 0;
-  const role = useRole(floatingRootContext);
   const dismiss = useDismiss(floatingRootContext, {
     outsidePressEvent() {
       if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
@@ -84,11 +91,6 @@ export function useDialogRoot(params) {
     escapeKey: isTopmost
   });
   useScrollLock(open && modal === true, popupElement);
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = useInteractions([role, dismiss]);
 
   // Listen for nested open/close events on this store to maintain the counts.
   store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
@@ -114,16 +116,15 @@ export function useDialogRoot(params) {
       }
     };
   }, [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext]);
-  const activeTriggerProps = React.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
-  const inactiveTriggerProps = React.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
-  const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
-  store.useSyncedValues({
-    openMethod,
+  const activeTriggerProps = dismiss.reference ?? EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? EMPTY_OBJECT;
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, dismiss.floating), [dismiss.floating]);
+  usePopupInteractionProps(store, {
     activeTriggerProps,
     inactiveTriggerProps,
     popupProps,
-    floatingRootContext,
     nestedOpenDialogCount: ownNestedOpenDialogs,
     nestedOpenDrawerCount: ownNestedOpenDrawers
   });
+  return null;
 }

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

@@ -0,0 +1,4 @@
+import type { DialogRootProps } from "./DialogRoot.js";
+export declare function useRenderDialogRoot<Payload>(props: DialogRootProps<Payload>, mode?: DialogRootMode): import("react/jsx-runtime").JSX.Element;
+type DialogRootMode = 'dialog' | 'drawer' | 'alert-dialog';
+export {};