@base-ui/react 1.3.0 → 1.4.1

package/esm/combobox/trigger/ComboboxTrigger.js

@@ -5,25 +5,27 @@ import { useStore } from '@base-ui/utils/store';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { useComboboxFloatingContext, useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { stopEvent, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useClick, useTypeahead } from "../../floating-ui-react/index.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
 import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 const BOUNDARY_OFFSET = 2;
 
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -32,6 +34,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -127,7 +130,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);

package/esm/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/esm/combobox/trigger/ComboboxTriggerDataAttributes.js

@@ -26,11 +26,11 @@ export let ComboboxTriggerDataAttributes = function (ComboboxTriggerDataAttribut
    */
   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/esm/combobox/utils/ComboboxInternalDismissButton.js

@@ -4,9 +4,9 @@ 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 "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/esm/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/esm/combobox/utils/handleInputPress.js

@@ -0,0 +1,22 @@
+import { isElement } from '@floating-ui/utils/dom';
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { getTarget, isInteractiveElement } from "../../floating-ui-react/utils/element.js";
+export function handleInputPress(event, store, disabled, readOnly, shouldIgnoreTarget) {
+  if (event.baseUIHandlerPrevented || readOnly) {
+    return;
+  }
+  const target = getTarget(event.nativeEvent);
+  const targetElement = isElement(target) ? target : null;
+  if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || isInteractiveElement(targetElement))) {
+    return;
+  }
+  event.preventDefault();
+  if (disabled) {
+    return;
+  }
+  store.state.inputRef.current?.focus();
+  if (store.state.openOnInputClick) {
+    store.state.setOpen(true, createChangeEventDetails(REASONS.inputPress, event.nativeEvent));
+  }
+}

package/esm/combobox/utils/stateAttributesMapping.js

@@ -1,5 +1,5 @@
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
 export const triggerStateAttributesMapping = {
   ...pressableTriggerOpenStateMapping,
   ...fieldValidityMapping,

package/esm/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/esm/combobox/utils/useInitialLiveRegionTextMutation.js

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import { isIOS } from '@base-ui/utils/detectBrowser';
+import { useTimeout } from '@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.
+export const 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;
+}
+export function useInitialLiveRegionTextMutation() {
+  const timeout = useTimeout();
+  const rootRef = React.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React.useEffect(() => {
+    if (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/esm/combobox/value/ComboboxValue.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
-import { resolveMultipleLabels, resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
+import { resolveMultipleLabels, resolveSelectedLabel } from "../../internals/resolveValueLabel.js";
 import { selectors } from "../store.js";
 
 /**

package/esm/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/esm/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/esm/context-menu/root/ContextMenuRoot.js

@@ -8,7 +8,7 @@ import { MenuRootContext } from "../../menu/root/MenuRootContext.js";
 import { jsx as _jsx } from "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/esm/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/esm/context-menu/trigger/ContextMenuTrigger.js

@@ -1,15 +1,16 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { contains, getTarget, stopEvent } from "../../floating-ui-react/utils.js";
 import { useContextMenuRootContext } from "../root/ContextMenuRootContext.js";
 import { useMenuRootContext } from "../../menu/root/MenuRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import { findRootOwnerId } from "../../menu/utils/findRootOwnerId.js";
 const LONG_PRESS_DELAY = 500;
 
@@ -23,6 +24,7 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -75,7 +77,7 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     stopEvent(event);
     handleLongPress(event.clientX, event.clientY, event.nativeEvent);
     const doc = ownerDocument(triggerRef.current);
-    doc.addEventListener('mouseup', mouseEvent => {
+    addEventListener(doc, 'mouseup', mouseEvent => {
       allowMouseUpTriggerRef.current = false;
       if (!allowMouseUpRef.current) {
         return;
@@ -140,10 +142,7 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
       }
     }
     const doc = ownerDocument(triggerRef.current);
-    doc.addEventListener('contextmenu', handleDocumentContextMenu);
-    return () => {
-      doc.removeEventListener('contextmenu', handleDocumentContextMenu);
-    };
+    return addEventListener(doc, 'contextmenu', handleDocumentContextMenu);
   }, [backdropRef, disabled, internalBackdropRef]);
   const state = {
     open

package/esm/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/esm/dialog/backdrop/DialogBackdrop.js

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 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";
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -20,6 +20,7 @@ export const DialogBackdrop = /*#__PURE__*/React.forwardRef(function DialogBackd
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

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.
@@ -19,6 +19,7 @@ export const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(co
     className,
     disabled = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

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.
@@ -14,6 +14,7 @@ export const DialogDescription = /*#__PURE__*/React.forwardRef(function DialogDe
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

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,14 @@
 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 { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...baseMapping,
@@ -34,6 +34,7 @@ export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(co
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -1,18 +1,20 @@
 'use client';
 
 import * as React from 'react';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 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);
+
 /**
  * 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";
 export function DialogRoot(props) {
   const {
     children,
@@ -28,18 +30,17 @@ export function DialogRoot(props) {
     defaultTriggerId: defaultTriggerIdProp = null
   } = props;
   const parentDialogRootContext = useDialogRootContext(true);
+  const isDrawer = React.useContext(IsDrawerContext);
   const nested = Boolean(parentDialogRootContext);
-  const store = useRefWithInit(() => {
-    return handle?.store ?? new DialogStore({
-      open: defaultOpen,
-      openProp,
-      activeTriggerId: defaultTriggerIdProp,
-      triggerIdProp,
-      modal,
-      disablePointerDismissal,
-      nested
-    });
-  }).current;
+  const store = DialogStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    modal,
+    disablePointerDismissal,
+    nested
+  });
 
   // Support initially open state when uncontrolled
   useOnFirstRender(() => {
@@ -64,16 +65,20 @@ export function DialogRoot(props) {
     store,
     actionsRef,
     parentContext: parentDialogRootContext?.store.context,
+    isDrawer,
     onOpenChange,
     triggerIdProp
   });
   const contextValue = React.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/_jsx(DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
+  return /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/_jsx(DialogRootContext.Provider, {
+      value: contextValue,
+      children: typeof children === 'function' ? children({
+        payload
+      }) : children
+    })
   });
 }

package/esm/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;