@base-ui/react 1.3.0 → 1.4.0

package/composite/item/CompositeItem.js

@@ -15,6 +15,7 @@ function CompositeItem(componentProps) {
   const {
     render,
     className,
+    style,
     state = _constants.EMPTY_OBJECT,
     props = _constants.EMPTY_ARRAY,
     refs = _constants.EMPTY_ARRAY,

package/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/composite/root/CompositeRoot.js

@@ -21,6 +21,7 @@ function CompositeRoot(componentProps) {
   const {
     render,
     className,
+    style,
     refs = _constants.EMPTY_ARRAY,
     props = _constants.EMPTY_ARRAY,
     state = _constants.EMPTY_OBJECT,
@@ -31,6 +32,7 @@ function CompositeRoot(componentProps) {
     dense,
     itemSizes,
     loopFocus,
+    onLoop,
     cols,
     enableHomeAndEndKeys,
     onMapChange: onMapChangeProp,
@@ -54,6 +56,7 @@ function CompositeRoot(componentProps) {
     itemSizes,
     cols,
     loopFocus,
+    onLoop,
     dense,
     orientation,
     highlightedIndex: highlightedIndexProp,

package/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/composite/root/useCompositeRoot.js

@@ -12,12 +12,14 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _composite = require("../composite");
 var _constants = require("../constants");
+var _utils = require("../../floating-ui-react/utils");
 const EMPTY_ARRAY = [];
 function useCompositeRoot(params) {
   const {
     itemSizes,
     cols = 1,
     loopFocus = true,
+    onLoop,
     dense = false,
     orientation = 'both',
     direction,
@@ -57,15 +59,22 @@ function useCompositeRoot(params) {
     }
     (0, _composite.scrollIntoViewIfNeeded)(rootRef.current, activeItem, direction, orientation);
   });
+  const wrappedOnLoop = (0, _useStableCallback.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 || !(0, _composite.isNativeInput)(event.target)) {
+      const target = (0, _utils.getTarget)(event.nativeEvent);
+      if (!element || target == null || !(0, _composite.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 ? _composite.ALL_KEYS : _composite.ARROW_KEYS;
@@ -92,10 +101,11 @@ function useCompositeRoot(params) {
         vertical: _composite.ARROW_UP,
         both: horizontalBackwardKey
       }[orientation];
-      if ((0, _composite.isNativeInput)(event.target) && !(0, _isElementDisabled.isElementDisabled)(event.target)) {
-        const selectionStart = event.target.selectionStart;
-        const selectionEnd = event.target.selectionEnd;
-        const textContent = event.target.value ?? '';
+      const target = (0, _utils.getTarget)(event.nativeEvent);
+      if (target != null && (0, _composite.isNativeInput)(target) && !(0, _isElementDisabled.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) {
@@ -123,19 +133,18 @@ 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 = (0, _composite.createGridCellMap)(sizes, cols, dense);
-        const minGridIndex = cellMap.findIndex(index => index != null && !(0, _composite.isListIndexDisabled)(elementsRef, index, disabledIndices));
+        const minGridIndex = cellMap.findIndex(index => index != null && !(0, _composite.isListIndexDisabled)(elementsRef.current, index, disabledIndices));
         // last enabled index
-        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _composite.isListIndexDisabled)(elementsRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-        nextIndex = cellMap[(0, _composite.getGridNavigatedIndex)({
-          current: cellMap.map(itemIndex => itemIndex ? elementsRef.current[itemIndex] : null)
-        }, {
+        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _composite.isListIndexDisabled)(elementsRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+        nextIndex = cellMap[(0, _composite.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: (0, _composite.getGridCellIndices)([...(disabledIndices || elementsRef.current.map((_, index) => (0, _composite.isListIndexDisabled)(elementsRef, index) ? index : undefined)), undefined], cellMap),
+          disabledIndices: (0, _composite.getGridCellIndices)([...(disabledIndices || elementsRef.current.map((_, index) => (0, _composite.isListIndexDisabled)(elementsRef.current, index) ? index : undefined)), undefined], cellMap),
           minIndex: minGridIndex,
           maxIndex: maxGridIndex,
           prevIndex: (0, _composite.getGridCellIndexOfCorner)(highlightedIndex > maxIndex ? minIndex : highlightedIndex, sizes, cellMap, cols,
@@ -172,17 +181,23 @@ 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 = (0, _composite.findNonDisabledListIndex)(elementsRef, {
+          nextIndex = (0, _composite.findNonDisabledListIndex)(elementsRef.current, {
             startingIndex: nextIndex,
             decrement: backwardKeys.includes(event.key),
             disabledIndices
           });
         }
       }
-      if (nextIndex !== highlightedIndex && !(0, _composite.isIndexOutOfListBounds)(elementsRef, nextIndex)) {
+      if (nextIndex !== highlightedIndex && !(0, _composite.isIndexOutOfListBounds)(elementsRef.current, nextIndex)) {
         if (stopEventPropagation) {
           event.stopPropagation();
         }
@@ -197,7 +212,7 @@ 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/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.js

@@ -7,6 +7,7 @@ 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");
@@ -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.js

@@ -26,6 +26,7 @@ const DialogBackdrop = exports.DialogBackdrop = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

package/dialog/close/DialogClose.js

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

@@ -20,6 +20,7 @@ const DialogDescription = exports.DialogDescription = /*#__PURE__*/React.forward
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/dialog/popup/DialogPopup.js

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

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

@@ -19,7 +19,8 @@ function useDialogRoot(params) {
   const {
     store,
     parentContext,
-    actionsRef
+    actionsRef,
+    isDrawer
   } = params;
   const open = store.useState('open');
   const disablePointerDismissal = store.useState('disablePointerDismissal');
@@ -50,10 +51,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 +104,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 +127,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 +137,7 @@ function useDialogRoot(params) {
     inactiveTriggerProps,
     popupProps,
     floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
   });
 }

package/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/dialog/store/DialogStore.js

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogStore = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _popups = require("../../utils/popups");
 const selectors = {
   ..._popups.popupStoreSelectors,
   modal: (0, _store.createSelector)(state => state.modal),
   nested: (0, _store.createSelector)(state => state.nested),
   nestedOpenDialogCount: (0, _store.createSelector)(state => state.nestedOpenDialogCount),
+  nestedOpenDrawerCount: (0, _store.createSelector)(state => state.nestedOpenDrawerCount),
   disablePointerDismissal: (0, _store.createSelector)(state => state.disablePointerDismissal),
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   descriptionElementId: (0, _store.createSelector)(state => state.descriptionElementId),
@@ -47,13 +49,7 @@ class DialogStore extends _store.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
     };
@@ -67,6 +63,13 @@ class DialogStore extends _store.ReactStore {
     }
     this.update(updatedState);
   };
+  static useStore(externalStore, initialState) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
+      return new DialogStore(initialState);
+    }).current;
+    return externalStore ?? internalStore;
+  }
 }
 exports.DialogStore = DialogStore;
 function createInitialState(initialState = {}) {
@@ -81,6 +84,7 @@ function createInitialState(initialState = {}) {
     openMethod: null,
     nested: false,
     nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
     role: 'dialog',
     ...initialState
   };

package/dialog/title/DialogTitle.js

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

package/dialog/trigger/DialogTrigger.js

@@ -32,6 +32,7 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
     id: idProp,
     payload,
     handle,
+    style,
     ...elementProps
   } = componentProps;
   const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);

package/dialog/viewport/DialogViewport.js

@@ -39,6 +39,7 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = (0, _DialogPortalContext.useDialogPortalContext)();

package/drawer/backdrop/DrawerBackdrop.js

@@ -28,6 +28,7 @@ const DrawerBackdrop = exports.DrawerBackdrop = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

package/drawer/content/DrawerContent.js

@@ -20,6 +20,7 @@ const DrawerContent = exports.DrawerContent = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   (0, _DialogRootContext.useDialogRootContext)();

package/drawer/indent/DrawerIndent.js

@@ -36,6 +36,7 @@ const DrawerIndent = exports.DrawerIndent = /*#__PURE__*/React.forwardRef(functi
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);

package/drawer/indent-background/DrawerIndentBackground.js

@@ -32,6 +32,7 @@ const DrawerIndentBackground = exports.DrawerIndentBackground = /*#__PURE__*/Rea
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);