@base-ui/react 1.4.0 → 1.5.0

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * A button that closes the dialog.
  * Renders a `<button>` element.

package/esm/dialog/close/DialogClose.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { useDialogRootContext } from "../root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * A button that closes the dialog.
@@ -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/description/DialogDescription.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A paragraph with additional information about the dialog.
  * Renders a `<p>` element.

package/esm/dialog/description/DialogDescription.js

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { useDialogRootContext } from "../root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 /**
  * A paragraph with additional information about the dialog.
  * Renders a `<p>` element.

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import { type BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the dialog contents.
  * Renders a `<div>` element.

package/esm/dialog/popup/DialogPopup.js

@@ -3,14 +3,15 @@
 import * as React from 'react';
 import { FloatingFocusManager } from "../../floating-ui-react/index.js";
 import { useDialogRootContext } from "../root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { DialogPopupCssVars } from "./DialogPopupCssVars.js";
 import { DialogPopupDataAttributes } from "./DialogPopupDataAttributes.js";
 import { useDialogPortalContext } from "../portal/DialogPortalContext.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { COMPOSITE_KEYS } from "../../composite/composite.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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+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

@@ -1,14 +1,14 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 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 "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { FOCUSABLE_POPUP_PROPS, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps, usePopupRootSync } from "../../utils/popups/index.js";
 export function useDialogRoot(params) {
   const {
     store,
@@ -17,40 +17,39 @@ 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
   } = useOpenStateTransitions(open, store);
-  const createDialogEventDetails = useStableCallback(reason => {
-    const details = createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  });
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createDialogEventDetails(REASONS.imperativeAction));
-  }, [store, createDialogEventDetails]);
+    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
+  }, [store]);
   React.useImperativeHandle(actionsRef, () => ({
     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) {
@@ -92,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) => {
@@ -122,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 {};

package/esm/dialog/root/useRenderDialogRoot.js

@@ -0,0 +1,90 @@
+'use client';
+
+import * as React from 'react';
+import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
+import { DialogInteractions, useDialogRoot } from "./useDialogRoot.js";
+import { DialogRootContext, IsDrawerContext, useDialogRootContext } from "./DialogRootContext.js";
+import { DialogStore } from "../store/DialogStore.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function useRenderDialogRoot(props, mode = 'dialog') {
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal: disablePointerDismissalProp = false,
+    modal: modalProp = true,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null
+  } = props;
+  const isDrawer = mode === 'drawer';
+  const isAlertDialog = mode === 'alert-dialog';
+  const modal = isAlertDialog ? true : modalProp;
+  const disablePointerDismissal = isAlertDialog || disablePointerDismissalProp;
+  const role = isAlertDialog ? 'alertdialog' : 'dialog';
+  const parentDialogRootContext = useDialogRootContext(true);
+  const nested = Boolean(parentDialogRootContext);
+  const rootState = {
+    modal,
+    disablePointerDismissal,
+    nested,
+    role
+  };
+  const store = DialogStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    ...rootState
+  });
+
+  // Support initially open state when uncontrolled
+  useOnFirstRender(() => {
+    const nextState = openProp === undefined && store.state.open === false && defaultOpen === true ? {
+      open: true,
+      activeTriggerId: defaultTriggerIdProp
+    } : null;
+    if (isAlertDialog) {
+      // Handles can reuse plain Dialog stores; alert dialog invariants must exist immediately.
+      store.update(nextState ? {
+        ...rootState,
+        ...nextState
+      } : rootState);
+    } else if (nextState) {
+      store.update(nextState);
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
+  store.useSyncedValues(rootState);
+  store.useContextCallback('onOpenChange', onOpenChange);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const payload = store.useState('payload');
+  const dialogRoot = useDialogRoot({
+    store,
+    actionsRef,
+    parentContext: parentDialogRootContext?.store.context,
+    isDrawer
+  });
+  const shouldRenderInteractions = open || mounted;
+  const contextValue = React.useMemo(() => ({
+    store
+  }), [store]);
+  return /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/_jsxs(DialogRootContext.Provider, {
+      value: contextValue,
+      children: [shouldRenderInteractions && /*#__PURE__*/_jsx(DialogInteractions, {
+        store: store,
+        dialogRoot: dialogRoot
+      }), typeof children === 'function' ? children({
+        payload
+      }) : children]
+    })
+  });
+}

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

@@ -11,7 +11,7 @@ export declare class DialogHandle<Payload> {
   constructor(store?: DialogStore<Payload>);
   /**
    * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
+   * The trigger, if provided, must be a matching Trigger component with this handle passed as a prop.
    *
    * This method should only be called in an event handler or an effect (not during rendering).
    *

package/esm/dialog/store/DialogHandle.js

@@ -1,6 +1,6 @@
 import { DialogStore } from "./DialogStore.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * A handle to control a Dialog imperatively and to associate detached triggers with it.
@@ -17,7 +17,7 @@ export class DialogHandle {
 
   /**
    * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
+   * The trigger, if provided, must be a matching Trigger component with this handle passed as a prop.
    *
    * This method should only be called in an event handler or an effect (not during rendering).
    *
@@ -55,7 +55,7 @@ export class DialogHandle {
    * Indicates whether the dialog is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }