@base-ui/react 1.4.1 → 1.5.0

package/combobox/root/AriaCombobox.js

@@ -34,9 +34,12 @@ var _useTransitionStatus = require("../../internals/useTransitionStatus");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
 var _useValueChanged = require("../../internals/useValueChanged");
 var _noop = require("../../internals/noop");
+var _popups = require("../../utils/popups");
+var _mergeProps = require("../../merge-props");
 var _resolveValueLabel = require("../../internals/resolveValueLabel");
 var _itemEquality = require("../../internals/itemEquality");
 var _constants = require("./utils/constants");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
@@ -98,6 +101,7 @@ function AriaCombobox(props) {
     validationMode,
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
+  const direction = (0, _DirectionContext.useDirection)();
   const id = (0, _useLabelableId.useLabelableId)({
     id: idProp
   });
@@ -308,6 +312,7 @@ function AriaCombobox(props) {
     popupProps: {},
     inputProps: {},
     triggerProps: {},
+    itemProps: _empty.EMPTY_OBJECT,
     positionerElement: null,
     listElement: null,
     triggerElement: null,
@@ -316,6 +321,9 @@ 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.NOOP,
     // Placeholder callbacks replaced on first render
     setOpen: _noop.NOOP,
@@ -324,7 +332,6 @@ function AriaCombobox(props) {
     setIndices: _noop.NOOP,
     onItemHighlighted: _noop.NOOP,
     handleSelection: _noop.NOOP,
-    getItemProps: () => _empty.EMPTY_OBJECT,
     forceMount: _noop.NOOP,
     requestSubmit: _noop.NOOP
   })).current;
@@ -349,6 +356,7 @@ function AriaCombobox(props) {
   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 inputOwnsFormValue = (0, _store.useStore)(store, _store2.selectors.inputOwnsFormValue);
   const triggerRef = (0, _useValueAsRef.useValueAsRef)(triggerElement);
   const {
     mounted,
@@ -359,12 +367,8 @@ function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
-  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputInsidePopup ? triggerRef : inputRef, {
-    id,
-    value: fieldRawValue,
-    getValue: getFieldValue
-  });
+  const getStringifiedValueForForm = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(inputInsidePopup ? triggerRef : inputRef, id, fieldRawValue, getStringifiedValueForForm);
   const forceMount = (0, _useStableCallback.useStableCallback)(() => {
     if (items) {
       // Ensure typeahead works on a closed list.
@@ -451,6 +455,16 @@ 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('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, eventDetails.event));
+      }
+    }
     if (!nextOpen && queryChangedAfterOpen) {
       if (single) {
         if (!inline) {
@@ -461,17 +475,22 @@ 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('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, eventDetails.event));
+        }
       }
     }
     setOpenUnwrapped(nextOpen);
@@ -840,6 +859,7 @@ 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.EMPTY_ARRAY,
     onNavigate(nextActiveIndex, event) {
       // Retain the highlight only while actually transitioning out or closed.
@@ -858,18 +878,28 @@ function AriaCombobox(props) {
       }
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = (0, _floatingUiReact.useInteractions)([role, click, dismiss, listNavigation]);
+  const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)(listNavigation.reference, dismiss.reference, click.reference, role.reference), [listNavigation.reference, dismiss.reference, click.reference, role.reference]);
+  const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.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.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]);
   (0, _useOnFirstRender.useOnFirstRender)(() => {
     store.update({
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
-      getItemProps,
+      itemProps,
       setOpen,
       setInputValue,
       setSelectedValue,
@@ -889,11 +919,11 @@ function AriaCombobox(props) {
       transitionStatus,
       items,
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
       openMethod,
-      getItemProps,
+      itemProps,
       selectionMode,
       name,
       form,
@@ -911,9 +941,10 @@ 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 = (0, _useMergedRefs.useMergedRefs)(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -928,7 +959,7 @@ function AriaCombobox(props) {
     return (0, _resolveValueLabel.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;
@@ -957,7 +988,9 @@ 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/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/combobox/store.js

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

package/combobox/utils/ComboboxInternalDismissButton.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 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("../../internals/use-button");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
@@ -27,9 +26,9 @@ const ComboboxInternalDismissButton = exports.ComboboxInternalDismissButton = /*
     native: false
   });
   const mergedRef = (0, _useMergedRefs.useMergedRefs)(forwardedRef, buttonRef);
-  const handleDismiss = (0, _useStableCallback.useStableCallback)(event => {
+  function handleDismiss(event) {
     store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closePress, event.nativeEvent, event.currentTarget));
-  });
+  }
   const dismissProps = getButtonProps({
     onClick: handleDismiss
   });

package/csp-provider/CSPProvider.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CSPProvider = CSPProvider;
 var React = _interopRequireWildcard(require("react"));
-var _CSPContext = require("./CSPContext");
+var _CSPContext = require("../internals/csp-context/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides a default Content Security Policy (CSP) configuration for Base UI components that

package/dialog/close/DialogClose.js

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

package/dialog/popup/DialogPopup.js

@@ -17,6 +17,7 @@ var _DialogPopupDataAttributes = require("./DialogPopupDataAttributes");
 var _DialogPortalContext = require("../portal/DialogPortalContext");
 var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _composite = require("../../internals/composite/composite");
+var _popups = require("../../utils/popups");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -36,11 +37,11 @@ const stateAttributesMapping = {
  */
 const DialogPopup = exports.DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(componentProps, forwardedRef) {
   const {
+    render,
     className,
+    style,
     finalFocus,
     initialFocus,
-    render,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -59,6 +60,8 @@ const DialogPopup = exports.DialogPopup = /*#__PURE__*/React.forwardRef(function
   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;
   (0, _DialogPortalContext.useDialogPortalContext)();
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
@@ -81,6 +84,7 @@ const DialogPopup = exports.DialogPopup = /*#__PURE__*/React.forwardRef(function
   }
   const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
   const nestedDialogOpen = nestedOpenDialogCount > 0;
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     nested,
@@ -90,10 +94,11 @@ const DialogPopup = exports.DialogPopup = /*#__PURE__*/React.forwardRef(function
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId ?? undefined,
       'aria-describedby': descriptionElementId ?? undefined,
       role,
-      tabIndex: -1,
+      ..._popups.FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
         if (_composite.COMPOSITE_KEYS.has(event.key)) {
@@ -104,7 +109,7 @@ const DialogPopup = exports.DialogPopup = /*#__PURE__*/React.forwardRef(function
         [_DialogPopupCssVars.DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
       }
     }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {

package/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/dialog/root/DialogRoot.js

@@ -6,86 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogRoot = DialogRoot;
-exports.IsDrawerContext = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
-var _useDialogRoot = require("./useDialogRoot");
 var _DialogRootContext = require("./DialogRootContext");
-var _DialogStore = require("../store/DialogStore");
-var _jsxRuntime = require("react/jsx-runtime");
-const IsDrawerContext = exports.IsDrawerContext = /*#__PURE__*/React.createContext(false);
-
+var _useRenderDialogRoot = require("./useRenderDialogRoot");
 /**
  * Groups all parts of the dialog.
  * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
 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 = (0, _DialogRootContext.useDialogRootContext)(true);
-  const isDrawer = React.useContext(IsDrawerContext);
-  const nested = Boolean(parentDialogRootContext);
-  const store = _DialogStore.DialogStore.useStore(handle?.store, {
-    open: defaultOpen,
-    openProp,
-    activeTriggerId: defaultTriggerIdProp,
-    triggerIdProp,
-    modal,
-    disablePointerDismissal,
-    nested
-  });
-
-  // Support initially open state when uncontrolled
-  (0, _useOnFirstRender.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');
-  (0, _useDialogRoot.useDialogRoot)({
-    store,
-    actionsRef,
-    parentContext: parentDialogRootContext?.store.context,
-    isDrawer,
-    onOpenChange,
-    triggerIdProp
-  });
-  const contextValue = React.useMemo(() => ({
-    store
-  }), [store]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IsDrawerContext.Provider, {
-    value: false,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
-      value: contextValue,
-      children: typeof children === 'function' ? children({
-        payload
-      }) : children
-    })
-  });
+  const mode = React.useContext(_DialogRootContext.IsDrawerContext) ? 'drawer' : 'dialog';
+  return (0, _useRenderDialogRoot.useRenderDialogRoot)(props, mode);
 }

package/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/dialog/root/DialogRootContext.js

@@ -6,10 +6,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DialogRootContext = void 0;
+exports.IsDrawerContext = exports.DialogRootContext = void 0;
 exports.useDialogRootContext = useDialogRootContext;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
+const IsDrawerContext = exports.IsDrawerContext = /*#__PURE__*/React.createContext(false);
+if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
 const DialogRootContext = exports.DialogRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
 function useDialogRootContext(optional) {

package/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/dialog/root/useDialogRoot.js

@@ -5,12 +5,14 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DialogInteractions = DialogInteractions;
 exports.useDialogRoot = useDialogRoot;
 var React = _interopRequireWildcard(require("react"));
 var _useScrollLock = require("@base-ui/utils/useScrollLock");
+var _empty = require("@base-ui/utils/empty");
+var _mergeProps = require("../../merge-props");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
-var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _popups = require("../../utils/popups");
@@ -22,13 +24,7 @@ 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
-  } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
+  (0, _popups.usePopupRootSync)(store, open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount
@@ -40,15 +36,27 @@ function useDialogRoot(params) {
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
-    popupStore: store,
-    onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true
-  });
+  return {
+    parentContext,
+    isDrawer
+  };
+}
+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 = (0, _floatingUiReact.useRole)(floatingRootContext);
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
     outsidePressEvent() {
       if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
@@ -90,11 +98,6 @@ function useDialogRoot(params) {
     escapeKey: isTopmost
   });
   (0, _useScrollLock.useScrollLock)(open && modal === true, popupElement);
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = (0, _floatingUiReact.useInteractions)([role, dismiss]);
 
   // Listen for nested open/close events on this store to maintain the counts.
   store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
@@ -120,16 +123,15 @@ 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.EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? _empty.EMPTY_OBJECT;
+  const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, dismiss.floating), [dismiss.floating]);
+  (0, _popups.usePopupInteractionProps)(store, {
     activeTriggerProps,
     inactiveTriggerProps,
     popupProps,
-    floatingRootContext,
     nestedOpenDialogCount: ownNestedOpenDialogs,
     nestedOpenDrawerCount: ownNestedOpenDrawers
   });
+  return null;
 }

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