@base-ui/react 1.3.0 → 1.4.1

package/combobox/trigger/ComboboxTriggerDataAttributes.d.ts

@@ -25,11 +25,11 @@ export declare enum ComboboxTriggerDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/combobox/trigger/ComboboxTriggerDataAttributes.js

@@ -32,11 +32,11 @@ let ComboboxTriggerDataAttributes = exports.ComboboxTriggerDataAttributes = func
    */
   ComboboxTriggerDataAttributes["required"] = "data-required";
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   ComboboxTriggerDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   ComboboxTriggerDataAttributes["invalid"] = "data-invalid";
   /**

package/combobox/utils/ComboboxInternalDismissButton.js

@@ -10,9 +10,9 @@ var React = _interopRequireWildcard(require("react"));
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
-var _useButton = require("../../use-button");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _useButton = require("../../internals/use-button");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**

package/combobox/utils/handleInputPress.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+import type { ComboboxStore } from "../store.js";
+export declare function handleInputPress(event: React.MouseEvent<HTMLElement> & {
+  baseUIHandlerPrevented?: boolean | undefined;
+}, store: ComboboxStore, disabled: boolean, readOnly: boolean, shouldIgnoreTarget?: ((target: Element | null) => boolean) | undefined): void;

package/combobox/utils/handleInputPress.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleInputPress = handleInputPress;
+var _dom = require("@floating-ui/utils/dom");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _element = require("../../floating-ui-react/utils/element");
+function handleInputPress(event, store, disabled, readOnly, shouldIgnoreTarget) {
+  if (event.baseUIHandlerPrevented || readOnly) {
+    return;
+  }
+  const target = (0, _element.getTarget)(event.nativeEvent);
+  const targetElement = (0, _dom.isElement)(target) ? target : null;
+  if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || (0, _element.isInteractiveElement)(targetElement))) {
+    return;
+  }
+  event.preventDefault();
+  if (disabled) {
+    return;
+  }
+  store.state.inputRef.current?.focus();
+  if (store.state.openOnInputClick) {
+    store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputPress, event.nativeEvent));
+  }
+}

package/combobox/utils/stateAttributesMapping.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.triggerStateAttributesMapping = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _constants = require("../../field/utils/constants");
+var _constants = require("../../internals/field-constants/constants");
 const triggerStateAttributesMapping = exports.triggerStateAttributesMapping = {
   ..._popupStateMapping.pressableTriggerOpenStateMapping,
   ..._constants.fieldValidityMapping,

package/combobox/utils/useInitialLiveRegionTextMutation.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+export declare function useInitialLiveRegionTextMutation<T extends HTMLElement>(): React.RefObject<T | null>;

package/combobox/utils/useInitialLiveRegionTextMutation.js

@@ -0,0 +1,61 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = void 0;
+exports.useInitialLiveRegionTextMutation = useInitialLiveRegionTextMutation;
+var React = _interopRequireWildcard(require("react"));
+var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+// Word Joiner is invisible and zero-width, so it forces a text mutation without shifting layout.
+const LIVE_REGION_MARKER = '\u2060';
+// Safari VoiceOver needed roughly 200ms to reliably notice the initial polite live-region change.
+const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = exports.INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+function findLastTextNode(root) {
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let lastTextNode = null;
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode;
+    if (textNode.nodeValue !== '') {
+      lastTextNode = textNode;
+    }
+  }
+  return lastTextNode;
+}
+function useInitialLiveRegionTextMutation() {
+  const timeout = (0, _useTimeout.useTimeout)();
+  const rootRef = React.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React.useEffect(() => {
+    if (_detectBrowser.isIOS) {
+      return undefined;
+    }
+    const root = rootRef.current;
+    if (root == null) {
+      return undefined;
+    }
+    const textNode = findLastTextNode(root);
+    if (textNode == null) {
+      return undefined;
+    }
+    const originalValue = textNode.nodeValue ?? '';
+    const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
+    textNode.nodeValue = markedValue;
+    timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    });
+    return () => {
+      timeout.clear();
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    };
+  }, [rootRef, timeout]);
+  return rootRef;
+}

package/combobox/value/ComboboxValue.js

@@ -9,7 +9,7 @@ exports.ComboboxValue = ComboboxValue;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
-var _resolveValueLabel = require("../../utils/resolveValueLabel");
+var _resolveValueLabel = require("../../internals/resolveValueLabel");
 var _store2 = require("../store");
 var _jsxRuntime = require("react/jsx-runtime");
 /**

package/context-menu/index.d.ts

@@ -2,7 +2,7 @@ export * as ContextMenu from "./index.parts.js";
 export type * from "./root/ContextMenuRoot.js";
 export type * from "./trigger/ContextMenuTrigger.js";
 export type { MenuBackdropProps as ContextMenuBackdropProps, MenuBackdropState as ContextMenuBackdropState } from "../menu/backdrop/MenuBackdrop.js";
-export type { MenuPortalProps as ContextMenuPortalProps } from "../menu/portal/MenuPortal.js";
+export type { MenuPortalProps as ContextMenuPortalProps, MenuPortalState as ContextMenuPortalState } from "../menu/portal/MenuPortal.js";
 export type { MenuPositionerProps as ContextMenuPositionerProps, MenuPositionerState as ContextMenuPositionerState } from "../menu/positioner/MenuPositioner.js";
 export type { MenuPopupProps as ContextMenuPopupProps, MenuPopupState as ContextMenuPopupState } from "../menu/popup/MenuPopup.js";
 export type { MenuArrowProps as ContextMenuArrowProps, MenuArrowState as ContextMenuArrowState } from "../menu/arrow/MenuArrow.js";

package/context-menu/root/ContextMenuRoot.d.ts

@@ -3,7 +3,7 @@ import type { BaseUIChangeEventDetails } from "../../types/index.js";
 import type { MenuRoot } from "../../menu/root/MenuRoot.js";
 /**
  * A component that creates a context menu activated by right clicking or long pressing.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
  */
@@ -15,11 +15,13 @@ export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'modal' | 'o
    */
   onOpenChange?: ((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void) | undefined;
 }
+export type ContextMenuRootActions = MenuRoot.Actions;
 export type ContextMenuRootChangeEventReason = MenuRoot.ChangeEventReason;
 export type ContextMenuRootChangeEventDetails = BaseUIChangeEventDetails<ContextMenuRoot.ChangeEventReason>;
 export declare namespace ContextMenuRoot {
   type State = ContextMenuRootState;
   type Props = ContextMenuRootProps;
+  type Actions = ContextMenuRootActions;
   type ChangeEventReason = ContextMenuRootChangeEventReason;
   type ChangeEventDetails = ContextMenuRootChangeEventDetails;
 }

package/context-menu/root/ContextMenuRoot.js

@@ -14,7 +14,7 @@ var _MenuRootContext = require("../../menu/root/MenuRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A component that creates a context menu activated by right clicking or long pressing.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
  */

package/context-menu/trigger/ContextMenuTrigger.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";
 /**
  * An area that opens the menu on right click or long press.
  * Renders a `<div>` element.

package/context-menu/trigger/ContextMenuTrigger.js

@@ -7,15 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ContextMenuTrigger = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _utils = require("../../floating-ui-react/utils");
 var _ContextMenuRootContext = require("../root/ContextMenuRootContext");
 var _MenuRootContext = require("../../menu/root/MenuRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _reasons = require("../../utils/reasons");
+var _reasons = require("../../internals/reasons");
 var _findRootOwnerId = require("../../menu/utils/findRootOwnerId");
 const LONG_PRESS_DELAY = 500;
 
@@ -29,6 +30,7 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -81,7 +83,7 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
     (0, _utils.stopEvent)(event);
     handleLongPress(event.clientX, event.clientY, event.nativeEvent);
     const doc = (0, _owner.ownerDocument)(triggerRef.current);
-    doc.addEventListener('mouseup', mouseEvent => {
+    (0, _addEventListener.addEventListener)(doc, 'mouseup', mouseEvent => {
       allowMouseUpTriggerRef.current = false;
       if (!allowMouseUpRef.current) {
         return;
@@ -146,10 +148,7 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
       }
     }
     const doc = (0, _owner.ownerDocument)(triggerRef.current);
-    doc.addEventListener('contextmenu', handleDocumentContextMenu);
-    return () => {
-      doc.removeEventListener('contextmenu', handleDocumentContextMenu);
-    };
+    return (0, _addEventListener.addEventListener)(doc, 'contextmenu', handleDocumentContextMenu);
   }, [backdropRef, disabled, internalBackdropRef]);
   const state = {
     open

package/dialog/backdrop/DialogBackdrop.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
-import { type BaseUIComponentProps } from "../../utils/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.

package/dialog/backdrop/DialogBackdrop.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogBackdrop = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping
@@ -26,6 +26,7 @@ const DialogBackdrop = exports.DialogBackdrop = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

package/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/dialog/close/DialogClose.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogClose = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useButton = require("../../use-button");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useButton = require("../../internals/use-button");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 /**
  * A button that closes the dialog.
  * Renders a `<button>` element.
@@ -24,6 +24,7 @@ const DialogClose = exports.DialogClose = /*#__PURE__*/React.forwardRef(function
     className,
     disabled = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/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/dialog/description/DialogDescription.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogDescription = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 /**
  * A paragraph with additional information about the dialog.
  * Renders a `<p>` element.
@@ -20,6 +20,7 @@ const DialogDescription = exports.DialogDescription = /*#__PURE__*/React.forward
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/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/dialog/popup/DialogPopup.js

@@ -9,14 +9,14 @@ exports.DialogPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _floatingUiReact = require("../../floating-ui-react");
 var _DialogRootContext = require("../root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _DialogPopupCssVars = require("./DialogPopupCssVars");
 var _DialogPopupDataAttributes = require("./DialogPopupDataAttributes");
 var _DialogPortalContext = require("../portal/DialogPortalContext");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _composite = require("../../composite/composite");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _composite = require("../../internals/composite/composite");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -40,6 +40,7 @@ const DialogPopup = exports.DialogPopup = /*#__PURE__*/React.forwardRef(function
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/dialog/root/DialogRoot.d.ts

@@ -1,11 +1,12 @@
 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.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
@@ -69,7 +70,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 (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/dialog/root/DialogRoot.js

@@ -6,19 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogRoot = DialogRoot;
+exports.IsDrawerContext = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 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);
+
 /**
  * Groups all parts of the dialog.
- * Doesn’t render its own HTML element.
+ * 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,
@@ -34,18 +37,17 @@ function DialogRoot(props) {
     defaultTriggerId: defaultTriggerIdProp = null
   } = props;
   const parentDialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
+  const isDrawer = React.useContext(IsDrawerContext);
   const nested = Boolean(parentDialogRootContext);
-  const store = (0, _useRefWithInit.useRefWithInit)(() => {
-    return handle?.store ?? new _DialogStore.DialogStore({
-      open: defaultOpen,
-      openProp,
-      activeTriggerId: defaultTriggerIdProp,
-      triggerIdProp,
-      modal,
-      disablePointerDismissal,
-      nested
-    });
-  }).current;
+  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)(() => {
@@ -70,16 +72,20 @@ function DialogRoot(props) {
     store,
     actionsRef,
     parentContext: parentDialogRootContext?.store.context,
+    isDrawer,
     onOpenChange,
     triggerIdProp
   });
   const contextValue = React.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
+  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
+    })
   });
 }

package/dialog/root/useDialogRoot.d.ts

@@ -7,6 +7,7 @@ export interface UseDialogRootParameters {
   actionsRef?: DialogRoot.Props['actionsRef'] | undefined;
   parentContext?: DialogStore<unknown>['context'] | undefined;
   onOpenChange: DialogRoot.Props['onOpenChange'];
+  isDrawer: boolean;
   triggerIdProp?: string | null | undefined;
 }
 export type UseDialogRootReturnValue = void;

package/dialog/root/useDialogRoot.js

@@ -7,19 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDialogRoot = useDialogRoot;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _popups = require("../../utils/popups");
 function useDialogRoot(params) {
   const {
     store,
     parentContext,
-    actionsRef
+    actionsRef,
+    isDrawer
   } = params;
   const open = store.useState('open');
   const disablePointerDismissal = store.useState('disablePointerDismissal');
@@ -33,16 +33,9 @@ function useDialogRoot(params) {
   const {
     forceUnmount
   } = (0, _popups.useOpenStateTransitions)(open, store);
-  const createDialogEventDetails = (0, _useStableCallback.useStableCallback)(reason => {
-    const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  });
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createDialogEventDetails(_reasons.REASONS.imperativeAction));
-  }, [store, createDialogEventDetails]);
+    store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.imperativeAction));
+  }, [store]);
   React.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
@@ -50,10 +43,10 @@ function useDialogRoot(params) {
   const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
     popupStore: store,
     onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true,
-    noEmit: true
+    treatPopupAsFloatingElement: true
   });
   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, {
@@ -103,18 +96,20 @@ function useDialogRoot(params) {
     getTriggerProps
   } = (0, _floatingUiReact.useInteractions)([role, dismiss]);
 
-  // Listen for nested open/close events on this store to maintain the count
-  store.useContextCallback('onNestedDialogOpen', ownChildrenCount => {
-    setOwnNestedOpenDialogs(ownChildrenCount + 1);
+  // Listen for nested open/close events on this store to maintain the counts.
+  store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
+    setOwnNestedOpenDialogs(dialogCount);
+    setOwnNestedOpenDrawers(drawerCount);
   });
   store.useContextCallback('onNestedDialogClose', () => {
     setOwnNestedOpenDialogs(0);
+    setOwnNestedOpenDrawers(0);
   });
 
   // Notify parent of our open/close state using parent callbacks, if any
   React.useEffect(() => {
     if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+      parentContext.onNestedDialogOpen(ownNestedOpenDialogs + 1, ownNestedOpenDrawers + (isDrawer ? 1 : 0));
     }
     if (parentContext?.onNestedDialogClose && !open) {
       parentContext.onNestedDialogClose();
@@ -124,7 +119,7 @@ function useDialogRoot(params) {
         parentContext.onNestedDialogClose();
       }
     };
-  }, [open, parentContext, ownNestedOpenDialogs]);
+  }, [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]);
@@ -134,6 +129,7 @@ function useDialogRoot(params) {
     inactiveTriggerProps,
     popupProps,
     floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
   });
 }

package/dialog/store/DialogHandle.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogHandle = void 0;
 exports.createDialogHandle = createDialogHandle;
 var _DialogStore = require("./DialogStore");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 /**
  * A handle to control a Dialog imperatively and to associate detached triggers with it.
  */