@base-ui/react 1.3.0 → 1.4.0

package/esm/composite/root/CompositeRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CompositeMetadata } from "../list/CompositeList.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, BaseUIEvent } from "../../utils/types.js";
 import type { Dimensions, ModifierKey } from "../composite.js";
 import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
 /**
@@ -8,7 +8,7 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  */
 export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
 export interface CompositeRootState {}
-export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children'> {
+export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children' | 'style'> {
   props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;
   state?: State | undefined;
   stateAttributesMapping?: StateAttributesMapping<State> | undefined;
@@ -17,12 +17,14 @@ export interface CompositeRootProps<Metadata, State extends Record<string, any>>
   orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
+  onLoop?: ((event: React.KeyboardEvent, prevIndex: number, nextIndex: number, elementsRef: React.RefObject<(HTMLDivElement | null)[]>) => number) | undefined;
   highlightedIndex?: number | undefined;
   onHighlightedIndexChange?: ((index: number) => void) | undefined;
   itemSizes?: Dimensions[] | undefined;
   dense?: boolean | undefined;
   enableHomeAndEndKeys?: boolean | undefined;
   onMapChange?: ((newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void) | undefined;
+  onKeyDown?: ((event: BaseUIEvent<React.KeyboardEvent>) => void) | undefined;
   stopEventPropagation?: boolean | undefined;
   rootRef?: React.RefObject<HTMLElement | null> | undefined;
   disabledIndices?: number[] | undefined;

package/esm/composite/root/CompositeRoot.js

@@ -15,6 +15,7 @@ export function CompositeRoot(componentProps) {
   const {
     render,
     className,
+    style,
     refs = EMPTY_ARRAY,
     props = EMPTY_ARRAY,
     state = EMPTY_OBJECT,
@@ -25,6 +26,7 @@ export function CompositeRoot(componentProps) {
     dense,
     itemSizes,
     loopFocus,
+    onLoop,
     cols,
     enableHomeAndEndKeys,
     onMapChange: onMapChangeProp,
@@ -48,6 +50,7 @@ export function CompositeRoot(componentProps) {
     itemSizes,
     cols,
     loopFocus,
+    onLoop,
     dense,
     orientation,
     highlightedIndex: highlightedIndexProp,

package/esm/composite/root/useCompositeRoot.d.ts

@@ -7,6 +7,7 @@ export interface UseCompositeRootParameters {
   orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
+  onLoop?: ((event: React.KeyboardEvent, prevIndex: number, nextIndex: number, elementsRef: React.RefObject<(HTMLDivElement | null)[]>) => number) | undefined;
   highlightedIndex?: number | undefined;
   onHighlightedIndexChange?: ((index: number) => void) | undefined;
   dense?: boolean | undefined;

package/esm/composite/root/useCompositeRoot.js

@@ -6,12 +6,14 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { ALL_KEYS, ARROW_DOWN, ARROW_KEYS, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, END, HOME, HORIZONTAL_KEYS, HORIZONTAL_KEYS_WITH_EXTRA_KEYS, MODIFIER_KEYS, VERTICAL_KEYS, VERTICAL_KEYS_WITH_EXTRA_KEYS, createGridCellMap, findNonDisabledListIndex, getGridCellIndexOfCorner, getGridCellIndices, getGridNavigatedIndex, getMaxListIndex, getMinListIndex, isListIndexDisabled, isIndexOutOfListBounds, isNativeInput, scrollIntoViewIfNeeded } from "../composite.js";
 import { ACTIVE_COMPOSITE_ITEM } from "../constants.js";
+import { getTarget } from "../../floating-ui-react/utils.js";
 const EMPTY_ARRAY = [];
 export function useCompositeRoot(params) {
   const {
     itemSizes,
     cols = 1,
     loopFocus = true,
+    onLoop,
     dense = false,
     orientation = 'both',
     direction,
@@ -51,15 +53,22 @@ export function useCompositeRoot(params) {
     }
     scrollIntoViewIfNeeded(rootRef.current, activeItem, direction, orientation);
   });
+  const wrappedOnLoop = useStableCallback((event, prevIndex, nextIndex) => {
+    if (!onLoop) {
+      return nextIndex;
+    }
+    return onLoop?.(event, prevIndex, nextIndex, elementsRef);
+  });
   const props = React.useMemo(() => ({
     'aria-orientation': orientation === 'both' ? undefined : orientation,
     ref: mergedRef,
     onFocus(event) {
       const element = rootRef.current;
-      if (!element || !isNativeInput(event.target)) {
+      const target = getTarget(event.nativeEvent);
+      if (!element || target == null || !isNativeInput(target)) {
         return;
       }
-      event.target.setSelectionRange(0, event.target.value.length ?? 0);
+      target.setSelectionRange(0, target.value.length ?? 0);
     },
     onKeyDown(event) {
       const RELEVANT_KEYS = enableHomeAndEndKeys ? ALL_KEYS : ARROW_KEYS;
@@ -86,10 +95,11 @@ export function useCompositeRoot(params) {
         vertical: ARROW_UP,
         both: horizontalBackwardKey
       }[orientation];
-      if (isNativeInput(event.target) && !isElementDisabled(event.target)) {
-        const selectionStart = event.target.selectionStart;
-        const selectionEnd = event.target.selectionEnd;
-        const textContent = event.target.value ?? '';
+      const target = getTarget(event.nativeEvent);
+      if (target != null && isNativeInput(target) && !isElementDisabled(target)) {
+        const selectionStart = target.selectionStart;
+        const selectionEnd = target.selectionEnd;
+        const textContent = target.value ?? '';
         // return to native textbox behavior when
         // 1 - Shift is held to make a text selection, or if there already is a text selection
         if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd) {
@@ -117,19 +127,18 @@ export function useCompositeRoot(params) {
         // To calculate movements on the grid, we use hypothetical cell indices
         // as if every item was 1x1, then convert back to real indices.
         const cellMap = createGridCellMap(sizes, cols, dense);
-        const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(elementsRef, index, disabledIndices));
+        const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(elementsRef.current, index, disabledIndices));
         // last enabled index
-        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(elementsRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-        nextIndex = cellMap[getGridNavigatedIndex({
-          current: cellMap.map(itemIndex => itemIndex ? elementsRef.current[itemIndex] : null)
-        }, {
+        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(elementsRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+        nextIndex = cellMap[getGridNavigatedIndex(cellMap.map(itemIndex => itemIndex != null ? elementsRef.current[itemIndex] : null), {
           event,
           orientation,
           loopFocus,
+          onLoop: wrappedOnLoop,
           cols,
           // treat undefined (empty grid spaces) as disabled indices so we
           // don't end up in them
-          disabledIndices: getGridCellIndices([...(disabledIndices || elementsRef.current.map((_, index) => isListIndexDisabled(elementsRef, index) ? index : undefined)), undefined], cellMap),
+          disabledIndices: getGridCellIndices([...(disabledIndices || elementsRef.current.map((_, index) => isListIndexDisabled(elementsRef.current, index) ? index : undefined)), undefined], cellMap),
           minIndex: minGridIndex,
           maxIndex: maxGridIndex,
           prevIndex: getGridCellIndexOfCorner(highlightedIndex > maxIndex ? minIndex : highlightedIndex, sizes, cellMap, cols,
@@ -166,17 +175,23 @@ export function useCompositeRoot(params) {
       if (nextIndex === highlightedIndex && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) {
         if (loopFocus && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
           nextIndex = minIndex;
+          if (onLoop) {
+            nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
+          }
         } else if (loopFocus && nextIndex === minIndex && backwardKeys.includes(event.key)) {
           nextIndex = maxIndex;
+          if (onLoop) {
+            nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
+          }
         } else {
-          nextIndex = findNonDisabledListIndex(elementsRef, {
+          nextIndex = findNonDisabledListIndex(elementsRef.current, {
             startingIndex: nextIndex,
             decrement: backwardKeys.includes(event.key),
             disabledIndices
           });
         }
       }
-      if (nextIndex !== highlightedIndex && !isIndexOutOfListBounds(elementsRef, nextIndex)) {
+      if (nextIndex !== highlightedIndex && !isIndexOutOfListBounds(elementsRef.current, nextIndex)) {
         if (stopEventPropagation) {
           event.stopPropagation();
         }
@@ -191,7 +206,7 @@ export function useCompositeRoot(params) {
         });
       }
     }
-  }), [cols, dense, direction, disabledIndices, elementsRef, enableHomeAndEndKeys, highlightedIndex, isGrid, itemSizes, loopFocus, mergedRef, modifierKeys, onHighlightedIndexChange, orientation, stopEventPropagation]);
+  }), [cols, dense, direction, disabledIndices, elementsRef, enableHomeAndEndKeys, highlightedIndex, isGrid, itemSizes, loopFocus, onLoop, wrappedOnLoop, mergedRef, modifierKeys, onHighlightedIndexChange, orientation, stopEventPropagation]);
   return React.useMemo(() => ({
     props,
     highlightedIndex,

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.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.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.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.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.js

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

@@ -3,9 +3,10 @@ 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)
  */
@@ -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;

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');
@@ -44,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, {
@@ -97,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();
@@ -118,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]);
@@ -128,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.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.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.js

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

package/esm/drawer/backdrop/DrawerBackdrop.js

@@ -22,6 +22,7 @@ export const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackd
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

package/esm/drawer/content/DrawerContent.js

@@ -15,6 +15,7 @@ export const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerConten
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   useDialogRootContext();

package/esm/drawer/indent/DrawerIndent.js

@@ -30,6 +30,7 @@ export const DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = useDrawerProviderContext(true);

package/esm/drawer/indent-background/DrawerIndentBackground.js

@@ -26,6 +26,7 @@ export const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function Dra
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = useDrawerProviderContext(true);