@base-ui/react 1.0.0 → 1.2.0

package/drawer/popup/DrawerPopup.js

@@ -0,0 +1,291 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerPopup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _floatingUiReact = require("../../floating-ui-react");
+var _DialogRootContext = require("../../dialog/root/DialogRootContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _DrawerBackdropCssVars = require("../backdrop/DrawerBackdropCssVars");
+var _DrawerPopupCssVars = require("./DrawerPopupCssVars");
+var _DrawerPopupDataAttributes = require("./DrawerPopupDataAttributes");
+var _DialogPortalContext = require("../../dialog/portal/DialogPortalContext");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _composite = require("../../composite/composite");
+var _DrawerRootContext = require("../root/DrawerRootContext");
+var _useDrawerSnapPoints = require("../root/useDrawerSnapPoints");
+var _DrawerViewportContext = require("../viewport/DrawerViewportContext");
+var _constants = require("../../utils/constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const stateAttributesMapping = {
+  ..._popupStateMapping.popupStateMapping,
+  ..._stateAttributesMapping.transitionStatusMapping,
+  expanded(value) {
+    return value ? {
+      [_DrawerPopupDataAttributes.DrawerPopupDataAttributes.expanded]: ''
+    } : null;
+  },
+  nestedDrawerOpen(value) {
+    return value ? {
+      [_DrawerPopupDataAttributes.DrawerPopupDataAttributes.nestedDrawerOpen]: ''
+    } : null;
+  },
+  nestedDrawerSwiping(value) {
+    return value ? {
+      [_DrawerPopupDataAttributes.DrawerPopupDataAttributes.nestedDrawerSwiping]: ''
+    } : null;
+  },
+  swipeDirection(value) {
+    return value ? {
+      [_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swipeDirection]: value
+    } : null;
+  },
+  swiping(value) {
+    return value ? {
+      [_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swiping]: ''
+    } : null;
+  }
+};
+
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
+  const {
+    className,
+    finalFocus,
+    initialFocus,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = (0, _DialogRootContext.useDialogRootContext)();
+  const {
+    swipeDirection,
+    frontmostHeight,
+    hasNestedDrawer,
+    nestedSwiping,
+    nestedSwipeProgressStore,
+    onPopupHeightChange,
+    notifyParentFrontmostHeight,
+    notifyParentHasNestedDrawer
+  } = (0, _DrawerRootContext.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 = (0, _DrawerViewportContext.useDrawerViewportContext)(true);
+  const swiping = swipe?.swiping ?? false;
+  const swipeStrength = swipe?.swipeStrength ?? null;
+  const {
+    snapPoints,
+    activeSnapPoint,
+    activeSnapPointOffset
+  } = (0, _useDrawerSnapPoints.useDrawerSnapPoints)();
+  (0, _DialogPortalContext.useDialogPortalContext)();
+  const [popupHeight, setPopupHeight] = React.useState(0);
+  const popupHeightRef = React.useRef(0);
+  const measureHeight = (0, _useStableCallback.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 scrollHeight = popupElement.scrollHeight;
+    const nextHeight = scrollHeight > 0 ? Math.min(offsetHeight, scrollHeight) : offsetHeight;
+    if (nextHeight === popupHeightRef.current) {
+      return;
+    }
+    popupHeightRef.current = nextHeight;
+    setPopupHeight(nextHeight);
+    onPopupHeightChange(nextHeight);
+  });
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!mounted) {
+      popupHeightRef.current = 0;
+      setPopupHeight(0);
+      onPopupHeightChange(0);
+      return undefined;
+    }
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return undefined;
+    }
+    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]);
+  (0, _useIsoLayoutEffect.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.DrawerBackdropCssVars.swipeProgress, `${progress}`);
+      } else {
+        popupElement.style.setProperty(_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress, '0');
+      }
+    };
+    syncNestedSwipeProgress();
+    const unsubscribe = nestedSwipeProgressStore.subscribe(syncNestedSwipeProgress);
+    return () => {
+      unsubscribe();
+      const popupElement = popupRef.current;
+      if (popupElement) {
+        popupElement.style.setProperty(_DrawerBackdropCssVars.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]);
+  (0, _useOpenChangeComplete.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() : _constants.EMPTY_OBJECT;
+  if (shouldApplySnapPoints && swipeDirection === 'down') {
+    const baseOffset = activeSnapPointOffset ?? 0;
+    const movementValue = Number.parseFloat(String(dragStyles[_DrawerPopupCssVars.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.DrawerPopupCssVars.swipeMovementY]: `${dampedMovement}px`
+      };
+    } else {
+      dragStyles = {
+        ...dragStyles,
+        transform: undefined
+      };
+    }
+  }
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    props: [rootPopupProps, {
+      'aria-labelledby': titleElementId,
+      'aria-describedby': descriptionElementId,
+      role,
+      tabIndex: -1,
+      hidden: !mounted,
+      onKeyDown(event) {
+        if (_composite.COMPOSITE_KEYS.has(event.key)) {
+          event.stopPropagation();
+        }
+      },
+      style: {
+        ...dragStyles,
+        [_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress]: '0',
+        [_DrawerPopupCssVars.DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [_DrawerPopupCssVars.DrawerPopupCssVars.height]: popupHeightCssVarValue,
+        [_DrawerPopupCssVars.DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
+        [_DrawerPopupCssVars.DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,
+        [_DrawerPopupCssVars.DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
+      }
+    }, elementProps],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.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/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/drawer/popup/DrawerPopupCssVars.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerPopupCssVars = void 0;
+let DrawerPopupCssVars = exports.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/drawer/popup/DrawerPopupDataAttributes.d.ts

@@ -0,0 +1,27 @@
+export declare enum DrawerPopupDataAttributes {
+  /**
+   * 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/drawer/popup/DrawerPopupDataAttributes.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerPopupDataAttributes = void 0;
+let DrawerPopupDataAttributes = exports.DrawerPopupDataAttributes = /*#__PURE__*/function (DrawerPopupDataAttributes) {
+  /**
+   * 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/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<DrawerPortal.State> {
+  /**
+   * 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<DrawerPortal.State>['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/drawer/portal/DrawerPortal.js

@@ -0,0 +1,16 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerPortal = void 0;
+var _DialogPortal = require("../../dialog/portal/DialogPortal");
+/**
+ * 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)
+ */
+const DrawerPortal = exports.DrawerPortal = _DialogPortal.DialogPortal;

package/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.
+ *
+ * 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/drawer/provider/DrawerProvider.js

@@ -0,0 +1,100 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerProvider = DrawerProvider;
+var React = _interopRequireWildcard(require("react"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _DrawerProviderContext = require("./DrawerProviderContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Provides a shared context for coordinating global Drawer UI,
+ * such as indent/background effects based on whether any Drawer is open.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+function DrawerProvider(props) {
+  const {
+    children
+  } = props;
+  const [openById, setOpenById] = React.useState(() => new Map());
+  const [visualStateStore] = React.useState(createVisualStateStore);
+  const setDrawerOpen = (0, _useStableCallback.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 = (0, _useStableCallback.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__*/(0, _jsxRuntime.jsx)(_DrawerProviderContext.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/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;

package/drawer/provider/DrawerProviderContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'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;
+}