@base-ui/react 1.4.1 → 1.5.0

package/dialog/root/useRenderDialogRoot.js

@@ -0,0 +1,96 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRenderDialogRoot = useRenderDialogRoot;
+var React = _interopRequireWildcard(require("react"));
+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");
+function useRenderDialogRoot(props, mode = 'dialog') {
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal: disablePointerDismissalProp = false,
+    modal: modalProp = true,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null
+  } = props;
+  const isDrawer = mode === 'drawer';
+  const isAlertDialog = mode === 'alert-dialog';
+  const modal = isAlertDialog ? true : modalProp;
+  const disablePointerDismissal = isAlertDialog || disablePointerDismissalProp;
+  const role = isAlertDialog ? 'alertdialog' : 'dialog';
+  const parentDialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
+  const nested = Boolean(parentDialogRootContext);
+  const rootState = {
+    modal,
+    disablePointerDismissal,
+    nested,
+    role
+  };
+  const store = _DialogStore.DialogStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    ...rootState
+  });
+
+  // Support initially open state when uncontrolled
+  (0, _useOnFirstRender.useOnFirstRender)(() => {
+    const nextState = openProp === undefined && store.state.open === false && defaultOpen === true ? {
+      open: true,
+      activeTriggerId: defaultTriggerIdProp
+    } : null;
+    if (isAlertDialog) {
+      // Handles can reuse plain Dialog stores; alert dialog invariants must exist immediately.
+      store.update(nextState ? {
+        ...rootState,
+        ...nextState
+      } : rootState);
+    } else if (nextState) {
+      store.update(nextState);
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
+  store.useSyncedValues(rootState);
+  store.useContextCallback('onOpenChange', onOpenChange);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const payload = store.useState('payload');
+  const dialogRoot = (0, _useDialogRoot.useDialogRoot)({
+    store,
+    actionsRef,
+    parentContext: parentDialogRootContext?.store.context,
+    isDrawer
+  });
+  const shouldRenderInteractions = open || mounted;
+  const contextValue = React.useMemo(() => ({
+    store
+  }), [store]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogRootContext.DialogRootContext.Provider, {
+      value: contextValue,
+      children: [shouldRenderInteractions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_useDialogRoot.DialogInteractions, {
+        store: store,
+        dialogRoot: dialogRoot
+      }), typeof children === 'function' ? children({
+        payload
+      }) : children]
+    })
+  });
+}

package/dialog/store/DialogHandle.d.ts

@@ -11,7 +11,7 @@ export declare class DialogHandle<Payload> {
   constructor(store?: DialogStore<Payload>);
   /**
    * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
+   * The trigger, if provided, must be a matching Trigger component with this handle passed as a prop.
    *
    * This method should only be called in an event handler or an effect (not during rendering).
    *

package/dialog/store/DialogHandle.js

@@ -23,7 +23,7 @@ class DialogHandle {
 
   /**
    * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
+   * The trigger, if provided, must be a matching Trigger component with this handle passed as a prop.
    *
    * This method should only be called in an event handler or an effect (not during rendering).
    *
@@ -61,7 +61,7 @@ class DialogHandle {
    * Indicates whether the dialog is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 

package/dialog/store/DialogStore.d.ts

@@ -40,6 +40,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -57,6 +59,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -74,6 +78,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -91,6 +97,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -102,12 +110,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  triggerCount: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => number;
   preventUnmountingOnClose: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -125,6 +154,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -142,6 +173,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -159,6 +192,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -170,12 +205,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => Element | null;
+  popupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => string | undefined;
   isTriggerActive: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -193,6 +249,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -210,6 +268,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -227,6 +287,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -238,12 +300,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }, isActive: boolean) => import("../../index.js").HTMLProps;
+  triggerPopupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => string | undefined;
   popupProps: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -261,6 +344,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -278,6 +363,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -291,7 +378,7 @@ declare const selectors: {
   }) => HTMLElement | null;
 };
 export declare class DialogStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<DialogRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
   static useStore<Payload>(externalStore: DialogStore<Payload> | undefined, initialState?: Partial<State<Payload>>): DialogStore<Payload>;
 }

package/dialog/store/DialogStore.js

@@ -7,7 +7,6 @@ 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,
@@ -23,15 +22,18 @@ const selectors = {
   role: (0, _store.createSelector)(state => state.role)
 };
 class DialogStore extends _store.ReactStore {
-  constructor(initialState) {
-    super(createInitialState(initialState), {
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new _popups.PopupTriggerMap();
+    const state = createInitialState(initialState);
+    state.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
+    super(state, {
       popupRef: /*#__PURE__*/React.createRef(),
       backdropRef: /*#__PURE__*/React.createRef(),
       internalBackdropRef: /*#__PURE__*/React.createRef(),
       outsidePressEnabledRef: {
         current: true
       },
-      triggerElements: new _popups.PopupTriggerMap(),
+      triggerElements,
       onOpenChange: undefined,
       onOpenChangeComplete: undefined
     }, selectors);
@@ -53,22 +55,15 @@ class DialogStore extends _store.ReactStore {
     const updatedState = {
       open: nextOpen
     };
-
-    // If a popup is closing, the `trigger` may be null.
-    // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-    const newTriggerId = eventDetails.trigger?.id ?? null;
-    if (newTriggerId || nextOpen) {
-      updatedState.activeTriggerId = newTriggerId;
-      updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-    }
+    (0, _popups.setOpenTriggerState)(updatedState, nextOpen, eventDetails.trigger);
     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;
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = (0, _popups.usePopupStore)(externalStore, (floatingId, nested) => new DialogStore(initialState, floatingId, nested), true).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
+
+    return store;
   }
 }
 exports.DialogStore = DialogStore;

package/dialog/trigger/DialogTrigger.d.ts

@@ -23,7 +23,7 @@ export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps
   payload?: Payload | undefined;
   /**
    * ID of the trigger. In addition to being forwarded to the rendered element,
-   * it is also used to specify the active trigger for the dialogs in controlled mode (with the DialogRoot `triggerId` prop).
+   * it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop).
    */
   id?: string | undefined;
 }

package/dialog/trigger/DialogTrigger.js

@@ -17,6 +17,7 @@ var _constants = require("../../internals/constants");
 var _popups = require("../../utils/popups");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _floatingUiReact = require("../../floating-ui-react");
+var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
 /**
  * A button that opens the dialog.
  * Renders a `<button>` element.
@@ -27,12 +28,12 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
     id: idProp,
     payload,
     handle,
-    style,
     ...elementProps
   } = componentProps;
   const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
@@ -43,6 +44,7 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
   const thisTriggerId = (0, _useBaseUiId.useBaseUiId)(idProp);
   const floatingContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const triggerElementRef = React.useRef(null);
   const {
     registerTrigger,
@@ -60,7 +62,9 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
   const click = (0, _floatingUiReact.useClick)(floatingContext, {
     enabled: floatingContext != null
   });
-  const localInteractionProps = (0, _floatingUiReact.useInteractions)([click]);
+  const interactionTypeProps = (0, _useOpenInteractionType.useOpenMethodTriggerProps)(() => store.select('open'), interactionType => {
+    store.set('openMethod', interactionType);
+  });
   const state = {
     disabled,
     open: isOpenedByThisTrigger
@@ -69,9 +73,12 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
   return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
+    props: [click.reference, rootTriggerProps, interactionTypeProps, {
       [_constants.CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
+      id: thisTriggerId,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': isOpenedByThisTrigger,
+      'aria-controls': popupId
     }, elementProps, getButtonProps],
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping
   });

package/dialog/viewport/DialogViewport.js

@@ -36,10 +36,10 @@ const stateAttributesMapping = {
  */
 const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    children,
+    className,
     style,
+    children,
     ...elementProps
   } = componentProps;
   const keepMounted = (0, _DialogPortalContext.useDialogPortalContext)();
@@ -51,6 +51,7 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
   const transitionStatus = store.useState('transitionStatus');
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const mounted = store.useState('mounted');
+  const setViewportElement = store.useStateSetter('viewportElement');
   const nestedDialogOpen = nestedOpenDialogCount > 0;
   const state = {
     open,
@@ -62,7 +63,7 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     enabled: shouldRender,
     state,
-    ref: [forwardedRef, store.useStateSetter('viewportElement')],
+    ref: [forwardedRef, setViewportElement],
     stateAttributesMapping,
     props: [{
       role: 'presentation',

package/drawer/popup/DrawerPopup.js

@@ -26,6 +26,7 @@ var _composite = require("../../internals/composite/composite");
 var _DrawerRootContext = require("../root/DrawerRootContext");
 var _useDrawerSnapPoints = require("../root/useDrawerSnapPoints");
 var _DrawerViewportContext = require("../viewport/DrawerViewportContext");
+var _popups = require("../../utils/popups");
 var _jsxRuntime = require("react/jsx-runtime");
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Drawer components are mounted.
@@ -34,7 +35,6 @@ let drawerSwipeVarsRegistered = false;
 /**
  * Removes inheritance of high-frequency drawer swipe CSS variables, which
  * reduces style recalculation cost in complex drawers with deep subtrees.
- * Child elements that need these values can still opt-in by using `inherit`.
  * See https://motion.dev/blog/web-animation-performance-tier-list
  * under the "Improving CSS variable performance" section.
  */
@@ -122,11 +122,11 @@ const stateAttributesMapping = {
  */
 const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
   const {
+    render,
     className,
+    style,
     finalFocus,
     initialFocus,
-    render,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -155,16 +155,18 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
+  const floatingId = floatingRootContext.useState('floatingId');
+  const popupId = elementProps.id ?? floatingId;
   const swipe = (0, _DrawerViewportContext.useDrawerViewportContext)(true);
-  const swiping = swipe?.swiping ?? false;
-  const swipeStrength = swipe?.swipeStrength ?? null;
+  (0, _DialogPortalContext.useDialogPortalContext)();
   const {
     snapPoints,
     activeSnapPoint,
     activeSnapPointOffset
   } = (0, _useDrawerSnapPoints.useDrawerSnapPoints)();
-  (0, _DialogPortalContext.useDialogPortalContext)();
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
+  const swiping = swipe?.swiping ?? false;
+  const swipeStrength = swipe?.swipeStrength ?? null;
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
   if (process.env.NODE_ENV !== 'production') {
@@ -279,6 +281,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
     }
   });
   const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     nested,
@@ -324,10 +327,11 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId,
       'aria-describedby': descriptionElementId,
       role,
-      tabIndex: -1,
+      ..._popups.FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
         if (_composite.COMPOSITE_KEYS.has(event.key)) {
@@ -344,7 +348,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
         [_DrawerPopupCssVars.DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
       }
     }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {

package/drawer/root/DrawerRoot.js

@@ -15,7 +15,6 @@ var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useId = require("@base-ui/utils/useId");
 var _DrawerRootContext = require("./DrawerRootContext");
 var _dialog = require("../../dialog");
-var _DialogRoot = require("../../dialog/root/DialogRoot");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
@@ -46,9 +45,8 @@ function DrawerRoot(props) {
     snapPoints,
     snapPoint: snapPointProp,
     defaultSnapPoint,
-    onSnapPointChange: onSnapPointChangeProp
+    onSnapPointChange
   } = props;
-  const onSnapPointChange = (0, _useStableCallback.useStableCallback)(onSnapPointChangeProp);
   const parentDrawerRootContext = (0, _DrawerRootContext.useDrawerRootContext)(true);
   const notifyParentSwipeProgressChange = parentDrawerRootContext?.onNestedSwipeProgressChange;
   const notifyParentFrontmostHeight = parentDrawerRootContext?.onNestedFrontmostHeightChange;
@@ -153,7 +151,7 @@ function DrawerRoot(props) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerRootContext.DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRoot.IsDrawerContext.Provider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.IsDrawerContext.Provider, {
       value: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.Dialog.Root, {
         open: openProp,
@@ -197,10 +195,12 @@ function createNestedSwipeProgressStore() {
 function DrawerProviderReporter() {
   const drawerId = (0, _useId.useId)();
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
-  const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(false);
-  const open = dialogRootContext.store.useState('open');
-  const nestedOpenDialogCount = dialogRootContext.store.useState('nestedOpenDialogCount');
-  const popupElement = dialogRootContext.store.useState('popupElement');
+  const {
+    store
+  } = (0, _DialogRootContext.useDialogRootContext)(false);
+  const open = store.useState('open');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const popupElement = store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
   React.useEffect(() => {
     if (!providerContext || drawerId == null) {
@@ -228,10 +228,10 @@ function DrawerProviderReporter() {
       return undefined;
     }
     function handleCloseWatcher(event) {
-      if (!dialogRootContext.store.select('open')) {
+      if (!store.select('open')) {
         return;
       }
-      dialogRootContext.store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closeWatcher, event));
+      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
     const unsubscribe = (0, _addEventListener.addEventListener)(closeWatcher, 'close', handleCloseWatcher);
@@ -239,6 +239,6 @@ function DrawerProviderReporter() {
       unsubscribe();
       closeWatcher.destroy();
     };
-  }, [dialogRootContext.store, isTopmost, open, popupElement]);
+  }, [store, isTopmost, open, popupElement]);
   return null;
 }

package/drawer/root/DrawerRootContext.d.ts

@@ -10,7 +10,7 @@ export interface DrawerNestedSwipeProgressStore {
 export interface DrawerRootContext {
   swipeDirection: DrawerSwipeDirection;
   /**
-   * Whether snap points can be skipped based on swipe velocity.
+   * Whether to disable velocity-based snap skipping.
    */
   snapToSequentialPoints: boolean;
   /**