@base-ui/react 1.1.0 → 1.3.0

package/esm/drawer/popup/DrawerPopup.js

@@ -0,0 +1,342 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { FloatingFocusManager } from "../../floating-ui-react/index.js";
+import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
+import { DrawerPopupCssVars } from "./DrawerPopupCssVars.js";
+import { DrawerPopupDataAttributes } from "./DrawerPopupDataAttributes.js";
+import { useDialogPortalContext } from "../../dialog/portal/DialogPortalContext.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { COMPOSITE_KEYS } from "../../composite/composite.js";
+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,
+  expanded(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.expanded]: ''
+    } : null;
+  },
+  nestedDrawerOpen(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.nestedDrawerOpen]: ''
+    } : null;
+  },
+  nestedDrawerSwiping(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.nestedDrawerSwiping]: ''
+    } : null;
+  },
+  swipeDirection(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.swipeDirection]: value
+    } : null;
+  },
+  swiping(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.swiping]: ''
+    } : null;
+  }
+};
+
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
+  const {
+    className,
+    finalFocus,
+    initialFocus,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const {
+    swipeDirection,
+    frontmostHeight,
+    hasNestedDrawer,
+    nestedSwiping,
+    nestedSwipeProgressStore,
+    onPopupHeightChange,
+    notifyParentFrontmostHeight,
+    notifyParentHasNestedDrawer
+  } = useDrawerRootContext();
+  const descriptionElementId = store.useState('descriptionElementId');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const floatingRootContext = store.useState('floatingRootContext');
+  const rootPopupProps = store.useState('popupProps');
+  const modal = store.useState('modal');
+  const mounted = store.useState('mounted');
+  const nested = store.useState('nested');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  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 swipe = useDrawerViewportContext(true);
+  const swiping = swipe?.swiping ?? false;
+  const swipeStrength = swipe?.swipeStrength ?? null;
+  const {
+    snapPoints,
+    activeSnapPoint,
+    activeSnapPointOffset
+  } = useDrawerSnapPoints();
+  useDialogPortalContext();
+  const [popupHeight, setPopupHeight] = React.useState(0);
+  const popupHeightRef = React.useRef(0);
+  const measureHeight = useStableCallback(() => {
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return;
+    }
+    const offsetHeight = popupElement.offsetHeight;
+
+    // Only skip while the element is still actually stretched beyond its last measured height.
+    if (popupHeightRef.current > 0 && frontmostHeight > popupHeightRef.current && offsetHeight > popupHeightRef.current) {
+      return;
+    }
+    const keepHeightWhileNested = popupHeightRef.current > 0 && hasNestedDrawer;
+    if (keepHeightWhileNested) {
+      const oldHeight = popupHeightRef.current;
+      setPopupHeight(oldHeight);
+      onPopupHeightChange(oldHeight);
+      return;
+    }
+    const nextHeight = offsetHeight;
+    if (nextHeight === popupHeightRef.current) {
+      return;
+    }
+    popupHeightRef.current = nextHeight;
+    setPopupHeight(nextHeight);
+    onPopupHeightChange(nextHeight);
+  });
+  useIsoLayoutEffect(() => {
+    if (!mounted) {
+      popupHeightRef.current = 0;
+      setPopupHeight(0);
+      onPopupHeightChange(0);
+      return undefined;
+    }
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return undefined;
+    }
+    removeCSSVariableInheritance();
+    measureHeight();
+    if (typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(measureHeight);
+    resizeObserver.observe(popupElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, store.context.popupRef]);
+  useIsoLayoutEffect(() => {
+    const popupRef = store.context.popupRef;
+    const syncNestedSwipeProgress = () => {
+      const popupElement = popupRef.current;
+      if (!popupElement) {
+        return;
+      }
+      const progress = nestedSwipeProgressStore.getSnapshot();
+      if (progress > 0) {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${progress}`);
+      } else {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      }
+    };
+    syncNestedSwipeProgress();
+    const unsubscribe = nestedSwipeProgressStore.subscribe(syncNestedSwipeProgress);
+    return () => {
+      unsubscribe();
+      const popupElement = popupRef.current;
+      if (popupElement) {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      }
+    };
+  }, [nestedSwipeProgressStore, store.context.popupRef]);
+  React.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    notifyParentFrontmostHeight?.(frontmostHeight);
+    return () => {
+      notifyParentFrontmostHeight?.(0);
+    };
+  }, [frontmostHeight, open, notifyParentFrontmostHeight]);
+  React.useEffect(() => {
+    if (!notifyParentHasNestedDrawer) {
+      return undefined;
+    }
+    const present = open || transitionStatus === 'ending';
+    notifyParentHasNestedDrawer(present);
+    return () => {
+      notifyParentHasNestedDrawer(false);
+    };
+  }, [notifyParentHasNestedDrawer, open, transitionStatus]);
+  useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
+      }
+    }
+  });
+  const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
+  const state = {
+    open,
+    nested,
+    transitionStatus,
+    expanded: activeSnapPoint === 1,
+    nestedDrawerOpen,
+    nestedDrawerSwiping: nestedSwiping,
+    swipeDirection,
+    swiping
+  };
+  let popupHeightCssVarValue;
+  const shouldUseAutoHeight = !hasNestedDrawer && transitionStatus !== 'ending';
+  if (popupHeight && !shouldUseAutoHeight) {
+    popupHeightCssVarValue = `${popupHeight}px`;
+  }
+  const shouldApplySnapPoints = snapPoints && snapPoints.length > 0 && (swipeDirection === 'down' || swipeDirection === 'up');
+  let snapPointOffsetValue = null;
+  if (shouldApplySnapPoints && activeSnapPointOffset !== null) {
+    snapPointOffsetValue = swipeDirection === 'up' ? -activeSnapPointOffset : activeSnapPointOffset;
+  }
+  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 nextOffset = Number.isFinite(movementValue) ? baseOffset + movementValue : baseOffset;
+    const shouldDamp = nextOffset < 0;
+    if (swiping && shouldDamp && Number.isFinite(movementValue)) {
+      const overshoot = Math.abs(nextOffset);
+      const dampedOffset = -Math.sqrt(overshoot);
+      const dampedMovement = dampedOffset - baseOffset;
+      dragStyles = {
+        ...dragStyles,
+        transform: undefined,
+        [DrawerPopupCssVars.swipeMovementY]: `${dampedMovement}px`
+      };
+    } else {
+      dragStyles = {
+        ...dragStyles,
+        transform: undefined
+      };
+    }
+  }
+  const element = useRenderElement('div', componentProps, {
+    state,
+    props: [rootPopupProps, {
+      'aria-labelledby': titleElementId,
+      'aria-describedby': descriptionElementId,
+      role,
+      tabIndex: -1,
+      hidden: !mounted,
+      onKeyDown(event) {
+        if (COMPOSITE_KEYS.has(event.key)) {
+          event.stopPropagation();
+        }
+      },
+      style: {
+        ...dragStyles,
+        [DrawerBackdropCssVars.swipeProgress]: '0',
+        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [DrawerPopupCssVars.height]: popupHeightCssVarValue,
+        [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
+        [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,
+        [DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
+      }
+    }, elementProps],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/_jsx(FloatingFocusManager, {
+    context: floatingRootContext,
+    openInteractionType: openMethod,
+    disabled: !mounted,
+    closeOnFocusOut: !disablePointerDismissal,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: finalFocus,
+    modal: modal !== false,
+    restoreFocus: "popup",
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerPopup.displayName = "DrawerPopup";

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

@@ -0,0 +1,37 @@
+export declare enum DrawerPopupCssVars {
+  /**
+   * The number of nested drawers that are currently open.
+   * @type {number}
+   */
+  nestedDrawers = "--nested-drawers",
+  /**
+   * The height of the drawer popup.
+   * @type {CSS length}
+   */
+  height = "--drawer-height",
+  /**
+   * The height of the frontmost open drawer in the current nested drawer stack.
+   * @type {CSS length}
+   */
+  frontmostHeight = "--drawer-frontmost-height",
+  /**
+   * The swipe movement on the X axis.
+   * @type {CSS length}
+   */
+  swipeMovementX = "--drawer-swipe-movement-x",
+  /**
+   * The swipe movement on the Y axis.
+   * @type {CSS length}
+   */
+  swipeMovementY = "--drawer-swipe-movement-y",
+  /**
+   * The snap point offset used for translating the drawer.
+   * @type {CSS length}
+   */
+  snapPointOffset = "--drawer-snap-point-offset",
+  /**
+   * A scalar (0.1-1) used to scale the swipe release transition duration in CSS.
+   * @type {number}
+   */
+  swipeStrength = "--drawer-swipe-strength",
+}

package/esm/drawer/popup/DrawerPopupCssVars.js

@@ -0,0 +1,38 @@
+export let DrawerPopupCssVars = /*#__PURE__*/function (DrawerPopupCssVars) {
+  /**
+   * The number of nested drawers that are currently open.
+   * @type {number}
+   */
+  DrawerPopupCssVars["nestedDrawers"] = "--nested-drawers";
+  /**
+   * The height of the drawer popup.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["height"] = "--drawer-height";
+  /**
+   * The height of the frontmost open drawer in the current nested drawer stack.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["frontmostHeight"] = "--drawer-frontmost-height";
+  /**
+   * The swipe movement on the X axis.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["swipeMovementX"] = "--drawer-swipe-movement-x";
+  /**
+   * The swipe movement on the Y axis.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["swipeMovementY"] = "--drawer-swipe-movement-y";
+  /**
+   * The snap point offset used for translating the drawer.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["snapPointOffset"] = "--drawer-snap-point-offset";
+  /**
+   * A scalar (0.1-1) used to scale the swipe release transition duration in CSS.
+   * @type {number}
+   */
+  DrawerPopupCssVars["swipeStrength"] = "--drawer-swipe-strength";
+  return DrawerPopupCssVars;
+}({});

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

@@ -0,0 +1,43 @@
+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.
+   */
+  expanded = "data-expanded",
+  /**
+   * Present when a nested drawer is open.
+   */
+  nestedDrawerOpen = "data-nested-drawer-open",
+  /**
+   * Present when a nested drawer is being swiped.
+   */
+  nestedDrawerSwiping = "data-nested-drawer-swiping",
+  /**
+   * Present when the drawer is dismissed by swiping.
+   */
+  swipeDismiss = "data-swipe-dismiss",
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  swipeDirection = "data-swipe-direction",
+  /**
+   * Present when the drawer is being swiped.
+   */
+  swiping = "data-swiping",
+}

package/esm/drawer/popup/DrawerPopupDataAttributes.js

@@ -0,0 +1,45 @@
+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.
+   */
+  DrawerPopupDataAttributes["expanded"] = "data-expanded";
+  /**
+   * Present when a nested drawer is open.
+   */
+  DrawerPopupDataAttributes["nestedDrawerOpen"] = "data-nested-drawer-open";
+  /**
+   * Present when a nested drawer is being swiped.
+   */
+  DrawerPopupDataAttributes["nestedDrawerSwiping"] = "data-nested-drawer-swiping";
+  /**
+   * Present when the drawer is dismissed by swiping.
+   */
+  DrawerPopupDataAttributes["swipeDismiss"] = "data-swipe-dismiss";
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  DrawerPopupDataAttributes["swipeDirection"] = "data-swipe-direction";
+  /**
+   * Present when the drawer is being swiped.
+   */
+  DrawerPopupDataAttributes["swiping"] = "data-swiping";
+  return DrawerPopupDataAttributes;
+}({});

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

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import type { FloatingPortal } from "../../floating-ui-react/index.js";
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export declare const DrawerPortal: DrawerPortal;
+export interface DrawerPortalState {}
+export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortalState> {
+  /**
+   * Whether to keep the portal mounted in the DOM while the popup is hidden.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: FloatingPortal.Props<DrawerPortalState>['container'] | undefined;
+}
+export interface DrawerPortal {
+  (componentProps: DrawerPortalProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element | null;
+}
+export declare namespace DrawerPortal {
+  type Props = DrawerPortalProps;
+  type State = DrawerPortalState;
+}

package/esm/drawer/portal/DrawerPortal.js

@@ -0,0 +1,11 @@
+'use client';
+
+import { DialogPortal } from "../../dialog/portal/DialogPortal.js";
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerPortal = DialogPortal;

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

@@ -0,0 +1,16 @@
+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.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export declare function DrawerProvider(props: DrawerProvider.Props): import("react/jsx-runtime").JSX.Element;
+export interface DrawerProviderState {}
+export interface DrawerProviderProps {
+  children?: React.ReactNode;
+}
+export declare namespace DrawerProvider {
+  type State = DrawerProviderState;
+  type Props = DrawerProviderProps;
+}

package/esm/drawer/provider/DrawerProvider.js

@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+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.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DrawerProvider(props) {
+  const {
+    children
+  } = props;
+  const [openById, setOpenById] = React.useState(() => new Map());
+  const [visualStateStore] = React.useState(createVisualStateStore);
+  const setDrawerOpen = useStableCallback((drawerId, open) => {
+    setOpenById(prev => {
+      const prevOpen = prev.get(drawerId);
+      if (prevOpen === 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 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 contextValue = React.useMemo(() => ({
+    setDrawerOpen,
+    removeDrawer,
+    active,
+    visualStateStore
+  }), [active, removeDrawer, setDrawerOpen, visualStateStore]);
+  return /*#__PURE__*/_jsx(DrawerProviderContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+function createVisualStateStore() {
+  let state = {
+    swipeProgress: 0,
+    frontmostHeight: 0
+  };
+  const listeners = new Set();
+  return {
+    getSnapshot: () => state,
+    set(nextState) {
+      let nextSwipeProgress = state.swipeProgress;
+      if (nextState.swipeProgress !== undefined) {
+        nextSwipeProgress = Number.isFinite(nextState.swipeProgress) ? nextState.swipeProgress : 0;
+      }
+      let nextFrontmostHeight = state.frontmostHeight;
+      if (nextState.frontmostHeight !== undefined) {
+        nextFrontmostHeight = Number.isFinite(nextState.frontmostHeight) ? nextState.frontmostHeight : 0;
+      }
+      if (nextSwipeProgress === state.swipeProgress && nextFrontmostHeight === state.frontmostHeight) {
+        return;
+      }
+      state = {
+        swipeProgress: nextSwipeProgress,
+        frontmostHeight: nextFrontmostHeight
+      };
+      listeners.forEach(listener => {
+        listener();
+      });
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface DrawerProviderContext {
+  setDrawerOpen: (drawerId: string, open: boolean) => void;
+  removeDrawer: (drawerId: string) => void;
+  active: boolean;
+  visualStateStore: DrawerVisualStateStore;
+}
+export declare const DrawerProviderContext: React.Context<DrawerProviderContext | undefined>;
+export interface DrawerVisualState {
+  swipeProgress: number;
+  frontmostHeight: number;
+}
+export interface DrawerVisualStateStore {
+  getSnapshot: () => DrawerVisualState;
+  subscribe: (listener: () => void) => () => void;
+  set: (state: Partial<DrawerVisualState>) => void;
+}
+export declare function useDrawerProviderContext(optional?: false): DrawerProviderContext;
+export declare function useDrawerProviderContext(optional: true): DrawerProviderContext | undefined;