@base-ui/react 1.6.0 → 1.7.0

package/drawer/backdrop/DrawerBackdropDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum DrawerBackdropDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/drawer/backdrop/DrawerBackdropDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum DrawerBackdropDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/drawer/backdrop/DrawerBackdropDataAttributes.js

@@ -15,7 +15,7 @@ let DrawerBackdropDataAttributes = exports.DrawerBackdropDataAttributes = functi
    */
   DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/drawer/backdrop/DrawerBackdropDataAttributes.mjs

@@ -9,7 +9,7 @@ export let DrawerBackdropDataAttributes = function (DrawerBackdropDataAttributes
    */
   DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/drawer/handle.d.mts

@@ -0,0 +1,16 @@
+import { DialogHandle } from "../dialog/store/DialogHandle.mjs";
+/**
+ * Controls a Drawer imperatively and associates detached `Drawer.Trigger` components with a
+ * `Drawer.Root`. Create one with `Drawer.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+export declare class DrawerHandle<Payload> extends DialogHandle<Payload> {
+  private readonly __drawerBrand;
+}
+/**
+ * Creates a new handle to connect a Drawer.Root with detached Drawer.Trigger components.
+ */
+export declare function createDrawerHandle<Payload>(): DrawerHandle<Payload>;

package/drawer/handle.d.ts

@@ -0,0 +1,16 @@
+import { DialogHandle } from "../dialog/store/DialogHandle.js";
+/**
+ * Controls a Drawer imperatively and associates detached `Drawer.Trigger` components with a
+ * `Drawer.Root`. Create one with `Drawer.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+export declare class DrawerHandle<Payload> extends DialogHandle<Payload> {
+  private readonly __drawerBrand;
+}
+/**
+ * Creates a new handle to connect a Drawer.Root with detached Drawer.Trigger components.
+ */
+export declare function createDrawerHandle<Payload>(): DrawerHandle<Payload>;

package/drawer/handle.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerHandle = void 0;
+exports.createDrawerHandle = createDrawerHandle;
+var _DialogHandle = require("../dialog/store/DialogHandle");
+/**
+ * Controls a Drawer imperatively and associates detached `Drawer.Trigger` components with a
+ * `Drawer.Root`. Create one with `Drawer.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+class DrawerHandle extends _DialogHandle.DialogHandle {}
+
+/**
+ * Creates a new handle to connect a Drawer.Root with detached Drawer.Trigger components.
+ */
+exports.DrawerHandle = DrawerHandle;
+function createDrawerHandle() {
+  return new DrawerHandle();
+}

package/drawer/handle.mjs

@@ -0,0 +1,18 @@
+import { DialogHandle } from "../dialog/store/DialogHandle.mjs";
+
+/**
+ * Controls a Drawer imperatively and associates detached `Drawer.Trigger` components with a
+ * `Drawer.Root`. Create one with `Drawer.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+export class DrawerHandle extends DialogHandle {}
+
+/**
+ * Creates a new handle to connect a Drawer.Root with detached Drawer.Trigger components.
+ */
+export function createDrawerHandle() {
+  return new DrawerHandle();
+}

package/drawer/indent/DrawerIndent.js

@@ -39,7 +39,7 @@ const DrawerIndent = exports.DrawerIndent = /*#__PURE__*/React.forwardRef(functi
     style,
     ...elementProps
   } = componentProps;
-  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
+  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)();
   const active = providerContext?.active ?? false;
   const visualStateStore = providerContext?.visualStateStore;
   const indentRef = React.useRef(null);

package/drawer/indent/DrawerIndent.mjs

@@ -33,7 +33,7 @@ export const DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(
     style,
     ...elementProps
   } = componentProps;
-  const providerContext = useDrawerProviderContext(true);
+  const providerContext = useDrawerProviderContext();
   const active = providerContext?.active ?? false;
   const visualStateStore = providerContext?.visualStateStore;
   const indentRef = React.useRef(null);

package/drawer/indent-background/DrawerIndentBackground.js

@@ -35,7 +35,7 @@ const DrawerIndentBackground = exports.DrawerIndentBackground = /*#__PURE__*/Rea
     style,
     ...elementProps
   } = componentProps;
-  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
+  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)();
   const active = providerContext?.active ?? false;
   const state = {
     active

package/drawer/indent-background/DrawerIndentBackground.mjs

@@ -29,7 +29,7 @@ export const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function Dra
     style,
     ...elementProps
   } = componentProps;
-  const providerContext = useDrawerProviderContext(true);
+  const providerContext = useDrawerProviderContext();
   const active = providerContext?.active ?? false;
   const state = {
     active

package/drawer/index.parts.d.mts

@@ -13,4 +13,4 @@ export { DrawerTitle as Title } from "./title/DrawerTitle.mjs";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.mjs";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.mjs";
 export { DrawerVirtualKeyboardProvider as VirtualKeyboardProvider } from "./virtual-keyboard-provider/DrawerVirtualKeyboardProvider.mjs";
-export { createDialogHandle as createHandle, DialogHandle as Handle } from "../dialog/store/DialogHandle.mjs";
+export { createDrawerHandle as createHandle, DrawerHandle as Handle } from "./handle.mjs";

package/drawer/index.parts.d.ts

@@ -13,4 +13,4 @@ export { DrawerTitle as Title } from "./title/DrawerTitle.js";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.js";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.js";
 export { DrawerVirtualKeyboardProvider as VirtualKeyboardProvider } from "./virtual-keyboard-provider/DrawerVirtualKeyboardProvider.js";
-export { createDialogHandle as createHandle, DialogHandle as Handle } from "../dialog/store/DialogHandle.js";
+export { createDrawerHandle as createHandle, DrawerHandle as Handle } from "./handle.js";

package/drawer/index.parts.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "Description", {
 Object.defineProperty(exports, "Handle", {
   enumerable: true,
   get: function () {
-    return _DialogHandle.DialogHandle;
+    return _handle.DrawerHandle;
   }
 });
 Object.defineProperty(exports, "Indent", {
@@ -102,7 +102,7 @@ Object.defineProperty(exports, "VirtualKeyboardProvider", {
 Object.defineProperty(exports, "createHandle", {
   enumerable: true,
   get: function () {
-    return _DialogHandle.createDialogHandle;
+    return _handle.createDrawerHandle;
   }
 });
 var _DrawerBackdrop = require("./backdrop/DrawerBackdrop");
@@ -120,4 +120,4 @@ var _DrawerTitle = require("./title/DrawerTitle");
 var _DrawerTrigger = require("./trigger/DrawerTrigger");
 var _DrawerViewport = require("./viewport/DrawerViewport");
 var _DrawerVirtualKeyboardProvider = require("./virtual-keyboard-provider/DrawerVirtualKeyboardProvider");
-var _DialogHandle = require("../dialog/store/DialogHandle");
+var _handle = require("./handle");

package/drawer/index.parts.mjs

@@ -13,4 +13,4 @@ export { DrawerTitle as Title } from "./title/DrawerTitle.mjs";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.mjs";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.mjs";
 export { DrawerVirtualKeyboardProvider as VirtualKeyboardProvider } from "./virtual-keyboard-provider/DrawerVirtualKeyboardProvider.mjs";
-export { createDialogHandle as createHandle, DialogHandle as Handle } from "../dialog/store/DialogHandle.mjs";
+export { createDrawerHandle as createHandle, DrawerHandle as Handle } from "./handle.mjs";

package/drawer/popup/DrawerPopup.js

@@ -16,7 +16,6 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _DrawerBackdropCssVars = require("../backdrop/DrawerBackdropCssVars");
 var _DrawerPopupCssVars = require("./DrawerPopupCssVars");
 var _DrawerPopupDataAttributes = require("./DrawerPopupDataAttributes");
@@ -85,8 +84,7 @@ function removeCSSVariableInheritance() {
   drawerSwipeVarsRegistered = true;
 }
 const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping,
+  ..._popupStateMapping.popupTransitionStateMapping,
   expanded(value) {
     return value ? {
       [_DrawerPopupDataAttributes.DrawerPopupDataAttributes.expanded]: ''
@@ -103,9 +101,9 @@ const stateAttributesMapping = {
     } : null;
   },
   swipeDirection(value) {
-    return value ? {
+    return {
       [_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swipeDirection]: value
-    } : null;
+    };
   },
   swiping(value) {
     return value ? {
@@ -129,9 +127,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
     initialFocus,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _DialogRootContext.useDialogRootContext)();
+  const store = (0, _DialogRootContext.useDialogRootContext)();
   const popupRef = store.context.popupRef;
   const {
     swipeDirection,
@@ -158,7 +154,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   const role = store.useState('role');
   const floatingId = floatingRootContext.useState('floatingId');
   const popupId = elementProps.id ?? floatingId;
-  const swipe = (0, _DrawerViewportContext.useDrawerViewportContext)(true);
+  const swipe = (0, _DrawerViewportContext.useDrawerViewportContext)();
   (0, _DialogPortalContext.useDialogPortalContext)();
   const {
     snapPoints,
@@ -170,6 +166,8 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   const swipeStrength = swipe?.swipeStrength ?? null;
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+
+  /* istanbul ignore else -- process.env.NODE_ENV is a build-time constant. */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -252,7 +250,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
       }
     };
   }, [nestedSwipeProgressStore, popupRef]);
-  React.useEffect(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
       return undefined;
     }
@@ -261,7 +259,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
       notifyParentFrontmostHeight?.(0);
     };
   }, [frontmostHeight, open, notifyParentFrontmostHeight]);
-  React.useEffect(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!notifyParentHasNestedDrawer) {
       return undefined;
     }
@@ -305,7 +303,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   let dragStyles = swipe ? swipe.getDragStyles() : _empty.EMPTY_OBJECT;
   if (shouldApplySnapPoints && swipeDirection === 'down') {
     const baseOffset = activeSnapPointOffset ?? 0;
-    const movementValue = Number.parseFloat(String(dragStyles[_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementY] ?? 0));
+    const movementValue = Number.parseFloat(String(dragStyles[_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementY]));
     if (swiping && Number.isFinite(movementValue)) {
       dragStyles = {
         ...dragStyles,

package/drawer/popup/DrawerPopup.mjs

@@ -9,8 +9,7 @@ import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { FloatingFocusManager } from "../../floating-ui-react/index.mjs";
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
+import { popupTransitionStateMapping } from "../../utils/popupStateMapping.mjs";
 import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.mjs";
 import { DrawerPopupCssVars } from "./DrawerPopupCssVars.mjs";
 import { DrawerPopupDataAttributes } from "./DrawerPopupDataAttributes.mjs";
@@ -80,8 +79,7 @@ function removeCSSVariableInheritance() {
   drawerSwipeVarsRegistered = true;
 }
 const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping,
+  ...popupTransitionStateMapping,
   expanded(value) {
     return value ? {
       [DrawerPopupDataAttributes.expanded]: ''
@@ -98,9 +96,9 @@ const stateAttributesMapping = {
     } : null;
   },
   swipeDirection(value) {
-    return value ? {
+    return {
       [DrawerPopupDataAttributes.swipeDirection]: value
-    } : null;
+    };
   },
   swiping(value) {
     return value ? {
@@ -124,9 +122,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
     initialFocus,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const popupRef = store.context.popupRef;
   const {
     swipeDirection,
@@ -153,7 +149,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   const role = store.useState('role');
   const floatingId = floatingRootContext.useState('floatingId');
   const popupId = elementProps.id ?? floatingId;
-  const swipe = useDrawerViewportContext(true);
+  const swipe = useDrawerViewportContext();
   useDialogPortalContext();
   const {
     snapPoints,
@@ -165,6 +161,8 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   const swipeStrength = swipe?.swipeStrength ?? null;
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+
+  /* istanbul ignore else -- process.env.NODE_ENV is a build-time constant. */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -247,7 +245,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
       }
     };
   }, [nestedSwipeProgressStore, popupRef]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!open) {
       return undefined;
     }
@@ -256,7 +254,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
       notifyParentFrontmostHeight?.(0);
     };
   }, [frontmostHeight, open, notifyParentFrontmostHeight]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!notifyParentHasNestedDrawer) {
       return undefined;
     }
@@ -300,7 +298,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   let dragStyles = swipe ? swipe.getDragStyles() : EMPTY_OBJECT;
   if (shouldApplySnapPoints && swipeDirection === 'down') {
     const baseOffset = activeSnapPointOffset ?? 0;
-    const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY] ?? 0));
+    const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY]));
     if (swiping && Number.isFinite(movementValue)) {
       dragStyles = {
         ...dragStyles,

package/drawer/popup/DrawerPopupDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum DrawerPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/drawer/popup/DrawerPopupDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum DrawerPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/drawer/popup/DrawerPopupDataAttributes.js

@@ -15,7 +15,7 @@ let DrawerPopupDataAttributes = exports.DrawerPopupDataAttributes = function (Dr
    */
   DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/drawer/popup/DrawerPopupDataAttributes.mjs

@@ -9,7 +9,7 @@ export let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
    */
   DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/drawer/portal/DrawerPortal.d.mts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { FloatingPortal } from "../../floating-ui-react/index.mjs";
+import { type BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -9,7 +9,7 @@ import type { FloatingPortal } from "../../floating-ui-react/index.mjs";
  */
 export declare const DrawerPortal: DrawerPortal;
 export interface DrawerPortalState {}
-export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortalState> {
+export interface DrawerPortalProps extends BaseUIComponentProps<'div', 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<DrawerPortalStat
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DrawerPortalState>['container'] | undefined;
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export interface DrawerPortal {
   (componentProps: DrawerPortalProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element | null;

package/drawer/portal/DrawerPortal.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { FloatingPortal } from "../../floating-ui-react/index.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
@@ -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<DrawerPortalState> {
+export interface DrawerPortalProps extends BaseUIComponentProps<'div', 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<DrawerPortalStat
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DrawerPortalState>['container'] | undefined;
+  container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
 }
 export interface DrawerPortal {
   (componentProps: DrawerPortalProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element | null;

package/drawer/provider/DrawerProvider.js

@@ -20,37 +20,26 @@ function DrawerProvider(props) {
   const {
     children
   } = props;
-  const [openById, setOpenById] = React.useState(() => new Map());
+  const [openDrawers, setOpenDrawers] = React.useState(() => new Set());
   const [visualStateStore] = React.useState(createVisualStateStore);
-  const setDrawerOpen = (0, _useStableCallback.useStableCallback)((drawerId, open) => {
-    setOpenById(prev => {
-      const prevOpen = prev.get(drawerId);
-      if (prevOpen === open) {
+  const setDrawerOpen = (0, _useStableCallback.useStableCallback)((drawer, open) => {
+    setOpenDrawers(prev => {
+      if (prev.has(drawer) === open) {
         return prev;
       }
-      const next = new Map(prev);
-      next.set(drawerId, open);
-      return next;
-    });
-  });
-  const removeDrawer = (0, _useStableCallback.useStableCallback)(drawerId => {
-    setOpenById(prev => {
-      if (!prev.has(drawerId)) {
-        return prev;
+      const next = new Set(prev);
+      if (open) {
+        next.add(drawer);
+      } else {
+        next.delete(drawer);
       }
-      const next = new Map(prev);
-      next.delete(drawerId);
       return next;
     });
   });
-  const active = React.useMemo(() => {
-    for (const open of openById.values()) {
-      if (open) {
-        return true;
-      }
-    }
-    return false;
-  }, [openById]);
+  const removeDrawer = (0, _useStableCallback.useStableCallback)(drawer => {
+    setDrawerOpen(drawer, false);
+  });
+  const active = openDrawers.size > 0;
   const contextValue = React.useMemo(() => ({
     setDrawerOpen,
     removeDrawer,

package/drawer/provider/DrawerProvider.mjs

@@ -15,37 +15,26 @@ export function DrawerProvider(props) {
   const {
     children
   } = props;
-  const [openById, setOpenById] = React.useState(() => new Map());
+  const [openDrawers, setOpenDrawers] = React.useState(() => new Set());
   const [visualStateStore] = React.useState(createVisualStateStore);
-  const setDrawerOpen = useStableCallback((drawerId, open) => {
-    setOpenById(prev => {
-      const prevOpen = prev.get(drawerId);
-      if (prevOpen === open) {
+  const setDrawerOpen = useStableCallback((drawer, open) => {
+    setOpenDrawers(prev => {
+      if (prev.has(drawer) === open) {
         return prev;
       }
-      const next = new Map(prev);
-      next.set(drawerId, open);
-      return next;
-    });
-  });
-  const removeDrawer = useStableCallback(drawerId => {
-    setOpenById(prev => {
-      if (!prev.has(drawerId)) {
-        return prev;
+      const next = new Set(prev);
+      if (open) {
+        next.add(drawer);
+      } else {
+        next.delete(drawer);
       }
-      const next = new Map(prev);
-      next.delete(drawerId);
       return next;
     });
   });
-  const active = React.useMemo(() => {
-    for (const open of openById.values()) {
-      if (open) {
-        return true;
-      }
-    }
-    return false;
-  }, [openById]);
+  const removeDrawer = useStableCallback(drawer => {
+    setDrawerOpen(drawer, false);
+  });
+  const active = openDrawers.size > 0;
   const contextValue = React.useMemo(() => ({
     setDrawerOpen,
     removeDrawer,

package/drawer/provider/DrawerProviderContext.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface DrawerProviderContext {
-  setDrawerOpen: (drawerId: string, open: boolean) => void;
-  removeDrawer: (drawerId: string) => void;
+  setDrawerOpen: (drawer: object, open: boolean) => void;
+  removeDrawer: (drawer: object) => void;
   active: boolean;
   visualStateStore: DrawerVisualStateStore;
 }
@@ -15,5 +15,4 @@ export interface DrawerVisualStateStore {
   subscribe: (listener: () => void) => () => void;
   set: (state: Partial<DrawerVisualState>) => void;
 }
-export declare function useDrawerProviderContext(optional?: false): DrawerProviderContext;
-export declare function useDrawerProviderContext(optional: true): DrawerProviderContext | undefined;
+export declare function useDrawerProviderContext(): DrawerProviderContext | undefined;

package/drawer/provider/DrawerProviderContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface DrawerProviderContext {
-  setDrawerOpen: (drawerId: string, open: boolean) => void;
-  removeDrawer: (drawerId: string) => void;
+  setDrawerOpen: (drawer: object, open: boolean) => void;
+  removeDrawer: (drawer: object) => void;
   active: boolean;
   visualStateStore: DrawerVisualStateStore;
 }
@@ -15,5 +15,4 @@ export interface DrawerVisualStateStore {
   subscribe: (listener: () => void) => () => void;
   set: (state: Partial<DrawerVisualState>) => void;
 }
-export declare function useDrawerProviderContext(optional?: false): DrawerProviderContext;
-export declare function useDrawerProviderContext(optional: true): DrawerProviderContext | undefined;
+export declare function useDrawerProviderContext(): DrawerProviderContext | undefined;

package/drawer/provider/DrawerProviderContext.js

@@ -2,20 +2,14 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DrawerProviderContext = void 0;
 exports.useDrawerProviderContext = useDrawerProviderContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 const DrawerProviderContext = exports.DrawerProviderContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DrawerProviderContext.displayName = "DrawerProviderContext";
-function useDrawerProviderContext(optional) {
-  const context = React.useContext(DrawerProviderContext);
-  if (optional === false && context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerProviderContext is missing. Use <Drawer.Provider>.' : (0, _formatErrorMessage2.default)(91));
-  }
-  return context;
+function useDrawerProviderContext() {
+  return React.useContext(DrawerProviderContext);
 }