@base-ui/react 1.2.0 → 1.4.0

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/backdrop/DrawerBackdropDataAttributes.d.ts

@@ -0,0 +1,18 @@
+export declare enum DrawerBackdropDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/esm/drawer/backdrop/DrawerBackdropDataAttributes.js

@@ -0,0 +1,20 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerBackdropDataAttributes = function (DrawerBackdropDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  return DrawerBackdropDataAttributes;
+}({});

package/esm/drawer/close/DrawerClose.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerClose: DrawerClose;
-export interface DrawerCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DrawerClose.State> {}
+export interface DrawerCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DrawerCloseState> {}
 export interface DrawerCloseState {
   /**
    * Whether the button is currently disabled.

package/esm/drawer/content/DrawerContent.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerContentProps extends BaseUIComponentProps<'div', DrawerContent.State> {}
+export interface DrawerContentProps extends BaseUIComponentProps<'div', DrawerContentState> {}
 export interface DrawerContentState {}
 export declare namespace DrawerContent {
   type Props = DrawerContentProps;

package/esm/drawer/content/DrawerContent.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { DRAWER_CONTENT_ATTRIBUTE } from "./DrawerContentDataAttributes.js";
 
 /**
  * A container for the drawer contents.
@@ -14,13 +15,14 @@ export const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerConten
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   useDialogRootContext();
   return useRenderElement('div', componentProps, {
     ref: forwardedRef,
     props: [{
-      ['data-swipe-ignore']: ''
+      [DRAWER_CONTENT_ATTRIBUTE]: ''
     }, elementProps]
   });
 });

package/esm/drawer/content/DrawerContentDataAttributes.d.ts

@@ -0,0 +1 @@
+export declare const DRAWER_CONTENT_ATTRIBUTE = "data-drawer-content";

package/esm/drawer/content/DrawerContentDataAttributes.js

@@ -0,0 +1 @@
+export const DRAWER_CONTENT_ATTRIBUTE = 'data-drawer-content';

package/esm/drawer/description/DrawerDescription.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerDescription: DrawerDescription;
-export interface DrawerDescriptionProps extends BaseUIComponentProps<'p', DrawerDescription.State> {}
+export interface DrawerDescriptionProps extends BaseUIComponentProps<'p', DrawerDescriptionState> {}
 export interface DrawerDescriptionState {}
 export interface DrawerDescription {
   (componentProps: DrawerDescriptionProps): React.JSX.Element;

package/esm/drawer/indent/DrawerIndent.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A wrapper element intended to contain your app's main UI.
- * Applies `data-active` when any drawer within the nearest <Drawer.Provider> is open.
+ * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
@@ -13,7 +14,7 @@ export interface DrawerIndentState {
    */
   active: boolean;
 }
-export interface DrawerIndentProps extends BaseUIComponentProps<'div', DrawerIndent.State> {}
+export interface DrawerIndentProps extends BaseUIComponentProps<'div', DrawerIndentState> {}
 export declare namespace DrawerIndent {
   type State = DrawerIndentState;
   type Props = DrawerIndentProps;

package/esm/drawer/indent/DrawerIndent.js

@@ -21,7 +21,8 @@ const stateAttributesMapping = {
 
 /**
  * A wrapper element intended to contain your app's main UI.
- * Applies `data-active` when any drawer within the nearest <Drawer.Provider> is open.
+ * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
@@ -29,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.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * An element placed before `<Drawer.Indent>` to render a background layer that can be styled based on whether any drawer is open.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerIndentBackground: React.ForwardRefExoticComponent<Omit<DrawerIndentBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface DrawerIndentBackgroundState {
@@ -11,7 +13,7 @@ export interface DrawerIndentBackgroundState {
    */
   active: boolean;
 }
-export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackground.State> {}
+export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackgroundState> {}
 export declare namespace DrawerIndentBackground {
   type State = DrawerIndentBackgroundState;
   type Props = DrawerIndentBackgroundProps;

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

@@ -17,13 +17,16 @@ const stateAttributesMapping = {
 };
 
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * An element placed before `<Drawer.Indent>` to render a background layer that can be styled based on whether any drawer is open.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerIndentBackground(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = useDrawerProviderContext(true);

package/esm/drawer/index.d.ts

@@ -1,4 +1,4 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as Drawer from "./index.parts.js";
 export type * from "./root/DrawerRoot.js";
 export type * from "./provider/DrawerProvider.js";
 export type * from "./indent/DrawerIndent.js";
@@ -6,6 +6,7 @@ export type * from "./indent-background/DrawerIndentBackground.js";
 export type * from "./trigger/DrawerTrigger.js";
 export type * from "./portal/DrawerPortal.js";
 export type * from "./popup/DrawerPopup.js";
+export type * from "./swipe-area/DrawerSwipeArea.js";
 export type * from "./content/DrawerContent.js";
 export type * from "./backdrop/DrawerBackdrop.js";
 export type * from "./viewport/DrawerViewport.js";

package/esm/drawer/index.js

@@ -1 +1 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as Drawer from "./index.parts.js";

package/esm/drawer/index.parts.d.ts

@@ -8,6 +8,7 @@ export { DrawerPopup as Popup } from "./popup/DrawerPopup.js";
 export { DrawerPortal as Portal } from "./portal/DrawerPortal.js";
 export { DrawerProvider as Provider } from "./provider/DrawerProvider.js";
 export { DrawerRoot as Root } from "./root/DrawerRoot.js";
+export { DrawerSwipeArea as SwipeArea } from "./swipe-area/DrawerSwipeArea.js";
 export { DrawerTitle as Title } from "./title/DrawerTitle.js";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.js";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.js";

package/esm/drawer/index.parts.js

@@ -8,6 +8,7 @@ export { DrawerPopup as Popup } from "./popup/DrawerPopup.js";
 export { DrawerPortal as Portal } from "./portal/DrawerPortal.js";
 export { DrawerProvider as Provider } from "./provider/DrawerProvider.js";
 export { DrawerRoot as Root } from "./root/DrawerRoot.js";
+export { DrawerSwipeArea as SwipeArea } from "./swipe-area/DrawerSwipeArea.js";
 export { DrawerTitle as Title } from "./title/DrawerTitle.js";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.js";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.js";

package/esm/drawer/popup/DrawerPopup.d.ts

@@ -10,7 +10,7 @@ import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerPopup: React.ForwardRefExoticComponent<Omit<DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopup.State> {
+export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopupState> {
   /**
    * Determines the element to focus when the drawer is opened.
    *
@@ -20,7 +20,7 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `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 drawer is closed.
    *
@@ -30,13 +30,16 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `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 DrawerPopupState {
   /**
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the active snap point is the full-height expanded state.

package/esm/drawer/popup/DrawerPopup.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { error } from '@base-ui/utils/error';
+import { SafeReact } from '@base-ui/utils/safeReact';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { FloatingFocusManager } from "../../floating-ui-react/index.js";
@@ -18,7 +20,64 @@ import { useDrawerRootContext } from "../root/DrawerRootContext.js";
 import { useDrawerSnapPoints } from "../root/useDrawerSnapPoints.js";
 import { useDrawerViewportContext } from "../viewport/DrawerViewportContext.js";
 import { EMPTY_OBJECT } from "../../utils/constants.js";
+// Module-level flag to ensure we only register the CSS properties once,
+// regardless of how many Drawer components are mounted.
 import { jsx as _jsx } from "react/jsx-runtime";
+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.
+ */
+function removeCSSVariableInheritance() {
+  if (drawerSwipeVarsRegistered) {
+    return;
+  }
+
+  // Intentionally keep inheritance disabled on WebKit as well. Safari doesn't support
+  // opting descendants back in via `--var: inherit` for custom properties registered
+  // with `inherits: false`, but Drawer does not rely on descendant access to these vars
+  // (unlike ScrollArea), so we keep the performance optimization enabled.
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    [DrawerPopupCssVars.swipeMovementX, DrawerPopupCssVars.swipeMovementY, DrawerPopupCssVars.snapPointOffset].forEach(name => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<length>',
+          inherits: false,
+          initialValue: '0px'
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+    [{
+      name: DrawerBackdropCssVars.swipeProgress,
+      initialValue: '0'
+    }, {
+      name: DrawerPopupCssVars.swipeStrength,
+      initialValue: '1'
+    }].forEach(({
+      name,
+      initialValue
+    }) => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<number>',
+          inherits: false,
+          initialValue
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+  }
+  drawerSwipeVarsRegistered = true;
+}
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping,
@@ -61,6 +120,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -83,13 +143,13 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   const modal = store.useState('modal');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const transitionStatus = store.useState('transitionStatus');
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const swipe = useDrawerViewportContext(true);
   const swiping = swipe?.swiping ?? false;
   const swipeStrength = swipe?.swipeStrength ?? null;
@@ -101,6 +161,17 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   useDialogPortalContext();
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (swipe) {
+        return;
+      }
+      const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+      const message = '<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the ' + 'viewport disables drawer swipe handling and touch scroll locking. Wrap ' + '<Drawer.Popup> in <Drawer.Viewport>.';
+      error(`${message}${ownerStackMessage}`);
+    }, [swipe]);
+  }
   const measureHeight = useStableCallback(() => {
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
@@ -119,8 +190,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
       onPopupHeightChange(oldHeight);
       return;
     }
-    const scrollHeight = popupElement.scrollHeight;
-    const nextHeight = scrollHeight > 0 ? Math.min(offsetHeight, scrollHeight) : offsetHeight;
+    const nextHeight = offsetHeight;
     if (nextHeight === popupHeightRef.current) {
       return;
     }
@@ -139,6 +209,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
     if (!popupElement) {
       return undefined;
     }
+    removeCSSVariableInheritance();
     measureHeight();
     if (typeof ResizeObserver !== 'function') {
       return undefined;
@@ -260,7 +331,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
       style: {
         ...dragStyles,
         [DrawerBackdropCssVars.swipeProgress]: '0',
-        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDrawerCount,
         [DrawerPopupCssVars.height]: popupHeightCssVarValue,
         [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
         [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,

package/esm/drawer/popup/DrawerPopupDataAttributes.d.ts

@@ -1,4 +1,20 @@
 export declare enum DrawerPopupDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */

package/esm/drawer/popup/DrawerPopupDataAttributes.js

@@ -1,4 +1,21 @@
-export let DrawerPopupDataAttributes = /*#__PURE__*/function (DrawerPopupDataAttributes) {
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */

package/esm/drawer/portal/DrawerPortal.d.ts

@@ -9,7 +9,7 @@ import type { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const DrawerPortal: DrawerPortal;
 export interface DrawerPortalState {}
-export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.State> {
+export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -18,7 +18,7 @@ export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.Sta
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DrawerPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<DrawerPortalState>['container'] | undefined;
 }
 export interface DrawerPortal {
   (componentProps: DrawerPortalProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element | null;

package/esm/drawer/provider/DrawerProvider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/esm/drawer/provider/DrawerProvider.js

@@ -5,8 +5,8 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { DrawerProviderContext } from "./DrawerProviderContext.js";
 
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/esm/drawer/root/DrawerRoot.d.ts

@@ -11,6 +11,7 @@ import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare function DrawerRoot<Payload = unknown>(props: DrawerRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DrawerRootState {}
 export interface DrawerRootProps<Payload = unknown> {
   /**
    * Whether the drawer is currently open.
@@ -30,7 +31,7 @@ export interface DrawerRootProps<Payload = unknown> {
    * - `'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled.
    * @default true
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * Event handler called when the drawer is opened or closed.
    */
@@ -61,14 +62,14 @@ export interface DrawerRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled drawer.
-   * There's no need to specify this prop when the drawer is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the drawer 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 drawer is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open drawer.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
   /**
    * The content of the drawer.
    */
@@ -114,6 +115,7 @@ export type DrawerRootChangeEventDetails = BaseUIChangeEventDetails<DrawerRoot.C
 export type DrawerRootSnapPointChangeEventReason = DrawerRootChangeEventReason;
 export type DrawerRootSnapPointChangeEventDetails = BaseUIChangeEventDetails<DrawerRootSnapPointChangeEventReason>;
 export declare namespace DrawerRoot {
+  type State = DrawerRootState;
   type Props<Payload = unknown> = DrawerRootProps<Payload>;
   type Actions = DrawerRootActions;
   type ChangeEventReason = DrawerRootChangeEventReason;

package/esm/drawer/root/DrawerRoot.js

@@ -2,12 +2,15 @@
 
 var _DrawerProviderReport, _DrawerProviderReport2;
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerWindow } from '@base-ui/utils/owner';
 import { isAndroid } from '@base-ui/utils/detectBrowser';
+import { useId } from '@base-ui/utils/useId';
 import { DrawerRootContext, useDrawerRootContext } from "./DrawerRootContext.js";
 import { Dialog } from "../../dialog/index.js";
+import { IsDrawerContext } from "../../dialog/root/DialogRoot.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
@@ -144,18 +147,21 @@ export function DrawerRoot(props) {
   });
   return /*#__PURE__*/_jsx(DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(Dialog.Root, {
-      open: openProp,
-      defaultOpen: defaultOpen,
-      onOpenChange: handleOpenChange,
-      onOpenChangeComplete: onOpenChangeComplete,
-      disablePointerDismissal: disablePointerDismissal,
-      modal: modal,
-      actionsRef: actionsRef,
-      handle: handle,
-      triggerId: triggerIdProp,
-      defaultTriggerId: defaultTriggerIdProp,
-      children: resolvedChildren
+    children: /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/_jsx(Dialog.Root, {
+        open: openProp,
+        defaultOpen: defaultOpen,
+        onOpenChange: handleOpenChange,
+        onOpenChangeComplete: onOpenChangeComplete,
+        disablePointerDismissal: disablePointerDismissal,
+        modal: modal,
+        actionsRef: actionsRef,
+        handle: handle,
+        triggerId: triggerIdProp,
+        defaultTriggerId: defaultTriggerIdProp,
+        children: resolvedChildren
+      })
     })
   });
 }
@@ -183,7 +189,7 @@ function createNestedSwipeProgressStore() {
   };
 }
 function DrawerProviderReporter() {
-  const drawerId = React.useId();
+  const drawerId = useId();
   const providerContext = useDrawerProviderContext(true);
   const dialogRootContext = useDialogRootContext(false);
   const open = dialogRootContext.store.useState('open');
@@ -191,7 +197,7 @@ function DrawerProviderReporter() {
   const popupElement = dialogRootContext.store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
   React.useEffect(() => {
-    if (!providerContext) {
+    if (!providerContext || drawerId == null) {
       return undefined;
     }
     return () => {
@@ -199,6 +205,9 @@ function DrawerProviderReporter() {
     };
   }, [drawerId, providerContext]);
   React.useEffect(() => {
+    if (drawerId == null) {
+      return;
+    }
     providerContext?.setDrawerOpen(drawerId, open);
   }, [drawerId, open, providerContext]);
   React.useEffect(() => {
@@ -219,9 +228,9 @@ function DrawerProviderReporter() {
       dialogRootContext.store.setOpen(false, createChangeEventDetails(REASONS.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
-    closeWatcher.addEventListener('close', handleCloseWatcher);
+    const unsubscribe = addEventListener(closeWatcher, 'close', handleCloseWatcher);
     return () => {
-      closeWatcher.removeEventListener('close', handleCloseWatcher);
+      unsubscribe();
       closeWatcher.destroy();
     };
   }, [dialogRootContext.store, isTopmost, open, popupElement]);

package/esm/drawer/root/DrawerRootContext.d.ts

@@ -38,6 +38,10 @@ export interface DrawerRootContext {
    * transitioning out).
    */
   hasNestedDrawer: boolean;
+  /**
+   * Called by the drawer popup to report its own measured height.
+   */
+  onPopupHeightChange: (height: number) => void;
   /**
    * Whether a nested drawer is currently being swiped.
    */
@@ -50,10 +54,6 @@ export interface DrawerRootContext {
    * Called by a nested drawer to report whether it is still present (open or transitioning out).
    */
   onNestedDrawerPresenceChange: (present: boolean) => void;
-  /**
-   * Called by the drawer popup to report its own measured height.
-   */
-  onPopupHeightChange: (height: number) => void;
   /**
    * Called by a nested drawer to report the frontmost height of its own stack.
    */