@base-ui/react 1.2.0 → 1.4.0

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

@@ -7,13 +7,13 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
  */
 export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type ContextMenuTriggerState = {
+export interface ContextMenuTriggerState {
   /**
    * Whether the context menu is currently open.
    */
   open: boolean;
-};
-export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTrigger.State> {}
+}
+export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTriggerState> {}
 export declare namespace ContextMenuTrigger {
   type State = ContextMenuTriggerState;
   type Props = ContextMenuTriggerProps;

package/esm/context-menu/trigger/ContextMenuTrigger.js

@@ -1,6 +1,7 @@
 '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";
@@ -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

@@ -8,7 +8,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdrop.State> {
+export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdropState> {
   /**
    * Whether the backdrop is forced to render even when nested.
    * @default false
@@ -20,6 +20,9 @@ export interface DialogBackdropState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace DialogBackdrop {

package/esm/dialog/backdrop/DialogBackdrop.js

@@ -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

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogClose.State> {}
+export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogCloseState> {}
 export interface DialogCloseState {
   /**
    * Whether the button is currently disabled.

package/esm/dialog/close/DialogClose.js

@@ -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

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescription.State> {}
+export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescriptionState> {}
 export interface DialogDescriptionState {}
 export declare namespace DialogDescription {
   type Props = DialogDescriptionProps;

package/esm/dialog/description/DialogDescription.js

@@ -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

@@ -9,7 +9,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPopup: React.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopup.State> {
+export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopupState> {
   /**
    * Determines the element to focus when the dialog is opened.
    *
@@ -19,7 +19,7 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines the element to focus when the dialog is closed.
    *
@@ -29,13 +29,16 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
 }
 export interface DialogPopupState {
   /**
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the dialog is nested within a parent dialog.

package/esm/dialog/popup/DialogPopup.js

@@ -34,6 +34,7 @@ export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(co
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/dialog/portal/DialogPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPortal: React.ForwardRefExoticComponent<Omit<DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace DialogPortal {
-  interface State {}
-}
-export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.State> {
+export interface DialogPortalState {}
+export interface DialogPortalProps extends FloatingPortal.Props<DialogPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -20,8 +18,9 @@ export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.Sta
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DialogPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<DialogPortalState>['container'] | undefined;
 }
 export declare namespace DialogPortal {
+  type State = DialogPortalState;
   type Props = DialogPortalProps;
 }

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

@@ -3,13 +3,15 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
 import { REASONS } from "../../utils/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)
  */
 export declare function DialogRoot<Payload>(props: DialogRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DialogRootState {}
 export interface DialogRootProps<Payload = unknown> {
   /**
    * Whether the dialog is currently open.
@@ -27,9 +29,12 @@ export interface DialogRootProps<Payload = unknown> {
    * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+   *
+   * When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so
+   * touch screen readers can escape the popup.
    * @default true
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * Event handler called when the dialog is opened or closed.
    */
@@ -65,14 +70,14 @@ 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;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the dialog is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
 }
 export interface DialogRootActions {
   unmount: () => void;
@@ -83,6 +88,7 @@ export type DialogRootChangeEventDetails = BaseUIChangeEventDetails<DialogRoot.C
   preventUnmountOnClose(): void;
 };
 export declare namespace DialogRoot {
+  type State = DialogRootState;
   type Props<Payload = unknown> = DialogRootProps<Payload>;
   type Actions = DialogRootActions;
   type ChangeEventReason = DialogRootChangeEventReason;

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

@@ -1,17 +1,14 @@
 import { type DialogRoot } from "./DialogRoot.js";
 import { DialogStore } from "../store/DialogStore.js";
-export declare function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.ReturnValue;
+export declare function useDialogRoot(params: UseDialogRootParameters): UseDialogRootReturnValue;
 export interface UseDialogRootSharedParameters {}
 export interface UseDialogRootParameters {
   store: DialogStore<any>;
   actionsRef?: DialogRoot.Props['actionsRef'] | undefined;
   parentContext?: DialogStore<unknown>['context'] | undefined;
   onOpenChange: DialogRoot.Props['onOpenChange'];
-  triggerIdProp?: (string | null) | undefined;
+  isDrawer: boolean;
+  triggerIdProp?: string | null | undefined;
 }
 export type UseDialogRootReturnValue = void;
-export declare namespace useDialogRoot {
-  type SharedParameters = UseDialogRootSharedParameters;
-  type Parameters = UseDialogRootParameters;
-  type ReturnValue = UseDialogRootReturnValue;
-}
+export interface UseDialogRootState {}

package/esm/dialog/root/useDialogRoot.js

@@ -13,7 +13,8 @@ export function useDialogRoot(params) {
   const {
     store,
     parentContext,
-    actionsRef
+    actionsRef,
+    isDrawer
   } = params;
   const open = store.useState('open');
   const disablePointerDismissal = store.useState('disablePointerDismissal');
@@ -21,15 +22,12 @@ export function useDialogRoot(params) {
   const popupElement = store.useState('popupElement');
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = useOpenInteractionType(open);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
-  } = useOpenStateTransitions(open, store, () => {
-    resetOpenInteractionType();
-  });
+  } = useOpenStateTransitions(open, store);
   const createDialogEventDetails = useStableCallback(reason => {
     const details = createChangeEventDetails(reason);
     details.preventUnmountOnClose = () => {
@@ -47,10 +45,10 @@ export function useDialogRoot(params) {
   const floatingRootContext = 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 = useRole(floatingRootContext);
   const dismiss = useDismiss(floatingRootContext, {
@@ -100,18 +98,20 @@ export function useDialogRoot(params) {
     getTriggerProps
   } = 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();
@@ -121,7 +121,7 @@ export 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]);
@@ -131,6 +131,7 @@ export function useDialogRoot(params) {
     inactiveTriggerProps,
     popupProps,
     floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
   });
 }

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

@@ -9,6 +9,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   openMethod: InteractionType | null;
   nested: boolean;
   nestedOpenDialogCount: number;
+  nestedOpenDrawerCount: number;
   titleElementId: string | undefined;
   descriptionElementId: string | undefined;
   viewportElement: HTMLElement | null;
@@ -19,13 +20,14 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
   readonly backdropRef: React.RefObject<HTMLDivElement | null>;
   readonly internalBackdropRef: React.RefObject<HTMLDivElement | null>;
   readonly outsidePressEnabledRef: React.MutableRefObject<boolean>;
-  readonly onNestedDialogOpen?: ((ownChildrenCount: number) => void) | undefined;
+  readonly onNestedDialogOpen?: ((dialogCount: number, drawerCount: number) => void) | undefined;
   readonly onNestedDialogClose?: (() => void) | undefined;
 };
 declare const selectors: {
   modal: (state: State<unknown>) => boolean | "trap-focus";
   nested: (state: State<unknown>) => boolean;
   nestedOpenDialogCount: (state: State<unknown>) => number;
+  nestedOpenDrawerCount: (state: State<unknown>) => number;
   disablePointerDismissal: (state: State<unknown>) => boolean;
   openMethod: (state: State<unknown>) => InteractionType | null;
   descriptionElementId: (state: State<unknown>) => string | undefined;
@@ -291,5 +293,6 @@ declare const selectors: {
 export declare class DialogStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
   constructor(initialState?: Partial<State<Payload>>);
   setOpen: (nextOpen: boolean, eventDetails: Omit<DialogRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
+  static useStore<Payload>(externalStore: DialogStore<Payload> | undefined, initialState?: Partial<State<Payload>>): DialogStore<Payload>;
 }
 export {};

package/esm/dialog/store/DialogStore.js

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { createSelector, ReactStore } from '@base-ui/utils/store';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
 const selectors = {
   ...popupStoreSelectors,
   modal: createSelector(state => state.modal),
   nested: createSelector(state => state.nested),
   nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
+  nestedOpenDrawerCount: createSelector(state => state.nestedOpenDrawerCount),
   disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
   openMethod: createSelector(state => state.openMethod),
   descriptionElementId: createSelector(state => state.descriptionElementId),
@@ -40,13 +42,7 @@ export class DialogStore extends ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested: this.state.nested
-    };
-    this.state.floatingRootContext.context.events?.emit('openchange', details);
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const updatedState = {
       open: nextOpen
     };
@@ -60,6 +56,13 @@ export class DialogStore extends ReactStore {
     }
     this.update(updatedState);
   };
+  static useStore(externalStore, initialState) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const internalStore = useRefWithInit(() => {
+      return new DialogStore(initialState);
+    }).current;
+    return externalStore ?? internalStore;
+  }
 }
 function createInitialState(initialState = {}) {
   return {
@@ -73,6 +76,7 @@ function createInitialState(initialState = {}) {
     openMethod: null,
     nested: false,
     nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
     role: 'dialog',
     ...initialState
   };

package/esm/dialog/title/DialogTitle.d.ts

@@ -7,7 +7,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export interface DialogTitleProps extends BaseUIComponentProps<'h2', DialogTitle.State> {}
+export interface DialogTitleProps extends BaseUIComponentProps<'h2', DialogTitleState> {}
 export interface DialogTitleState {}
 export declare namespace DialogTitle {
   type Props = DialogTitleProps;

package/esm/dialog/title/DialogTitle.js

@@ -14,6 +14,7 @@ export const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(co
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/esm/dialog/trigger/DialogTrigger.d.ts

@@ -11,7 +11,7 @@ export declare const DialogTrigger: DialogTrigger;
 export interface DialogTrigger {
   <Payload>(componentProps: DialogTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DialogTrigger.State> {
+export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DialogTriggerState> {
   /**
    * A handle to associate the trigger with a dialog.
    * Can be created with the Dialog.createHandle() method.

package/esm/dialog/trigger/DialogTrigger.js

@@ -26,6 +26,7 @@ export const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigge
     id: idProp,
     payload,
     handle,
+    style,
     ...elementProps
   } = componentProps;
   const dialogRootContext = useDialogRootContext(true);

package/esm/dialog/viewport/DialogViewport.d.ts

@@ -13,6 +13,9 @@ export interface DialogViewportState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the dialog is nested within another dialog.

package/esm/dialog/viewport/DialogViewport.js

@@ -33,6 +33,7 @@ export const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewp
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = useDialogPortalContext();

package/esm/direction-provider/DirectionProvider.d.ts

@@ -6,6 +6,7 @@ import { type TextDirection } from "./DirectionContext.js";
  * Documentation: [Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider)
  */
 export declare const DirectionProvider: React.FC<DirectionProvider.Props>;
+export interface DirectionProviderState {}
 export interface DirectionProviderProps {
   children?: React.ReactNode;
   /**
@@ -15,5 +16,6 @@ export interface DirectionProviderProps {
   direction?: TextDirection | undefined;
 }
 export declare namespace DirectionProvider {
+  type State = DirectionProviderState;
   type Props = DirectionProviderProps;
 }

package/esm/drawer/backdrop/DrawerBackdrop.d.ts

@@ -8,7 +8,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerBackdrop: React.ForwardRefExoticComponent<Omit<DrawerBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerBackdropProps extends BaseUIComponentProps<'div', DrawerBackdrop.State> {
+export interface DrawerBackdropProps extends BaseUIComponentProps<'div', DrawerBackdropState> {
   /**
    * Whether the backdrop is forced to render even when nested.
    * @default false
@@ -20,6 +20,9 @@ export interface DrawerBackdropState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace DrawerBackdrop {