@base-ui/react 1.0.0 → 1.2.0

package/drawer/root/DrawerRoot.d.ts

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { type DrawerSwipeDirection, type DrawerSnapPoint } from "./DrawerRootContext.js";
+import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import type { DialogHandle } from "../../dialog/store/DialogHandle.js";
+import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
+/**
+ * Groups all parts of the drawer.
+ * Doesn't render its own HTML element.
+ *
+ * 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 DrawerRootProps<Payload = unknown> {
+  /**
+   * Whether the drawer is currently open.
+   */
+  open?: boolean | undefined;
+  /**
+   * Whether the drawer is initially open.
+   *
+   * To render a controlled drawer, use the `open` prop instead.
+   * @default false
+   */
+  defaultOpen?: boolean | undefined;
+  /**
+   * Determines if the drawer enters a modal state when open.
+   * - `true`: user interaction is limited to just the drawer: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
+   * - `false`: user interaction with the rest of the document is allowed.
+   * - `'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;
+  /**
+   * Event handler called when the drawer is opened or closed.
+   */
+  onOpenChange?: ((open: boolean, eventDetails: DrawerRoot.ChangeEventDetails) => void) | undefined;
+  /**
+   * Event handler called after any animations complete when the drawer is opened or closed.
+   */
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  /**
+   * Determines whether the drawer should close on outside clicks.
+   * @default false
+   */
+  disablePointerDismissal?: boolean | undefined;
+  /**
+   * A ref to imperative actions.
+   * - `unmount`: When specified, the drawer will not be unmounted when closed.
+   * Instead, the `unmount` function must be called to unmount the drawer manually.
+   * Useful when the drawer's animation is controlled by an external library.
+   * - `close`: Closes the drawer imperatively when called.
+   */
+  actionsRef?: React.RefObject<DrawerRoot.Actions | null> | undefined;
+  /**
+   * A handle to associate the drawer with a trigger.
+   * If specified, allows detached triggers to control the drawer's open state.
+   * Can be created with the Drawer.createHandle() method.
+   */
+  handle?: DialogHandle<Payload> | undefined;
+  /**
+   * 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).
+   */
+  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;
+  /**
+   * The content of the drawer.
+   */
+  children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
+  /**
+   * The swipe direction used to dismiss the drawer.
+   * @default 'down'
+   */
+  swipeDirection?: DrawerSwipeDirection | undefined;
+  /**
+   * Snap points used to position the drawer.
+   * Use numbers between 0 and 1 to represent fractions of the viewport height,
+   * numbers greater than 1 as pixel values, or strings in `px`/`rem` units
+   * (for example, `'148px'` or `'30rem'`).
+   */
+  snapPoints?: DrawerSnapPoint[] | undefined;
+  /**
+   * Disables velocity-based snap skipping so drag distance determines the next snap point.
+   * @default false
+   */
+  snapToSequentialPoints?: boolean | undefined;
+  /**
+   * The currently active snap point. Use with `onSnapPointChange` to control the snap point.
+   */
+  snapPoint?: DrawerSnapPoint | null | undefined;
+  /**
+   * The initial snap point value when uncontrolled.
+   */
+  defaultSnapPoint?: DrawerSnapPoint | null | undefined;
+  /**
+   * Callback fired when the snap point changes.
+   */
+  onSnapPointChange?: ((snapPoint: DrawerSnapPoint | null, eventDetails: DrawerRoot.SnapPointChangeEventDetails) => void) | undefined;
+}
+export interface DrawerRootActions {
+  unmount: () => void;
+  close: () => void;
+}
+export type DrawerRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.escapeKey | typeof REASONS.closeWatcher | typeof REASONS.closePress | typeof REASONS.focusOut | typeof REASONS.imperativeAction | typeof REASONS.swipe | typeof REASONS.none;
+export type DrawerRootChangeEventDetails = BaseUIChangeEventDetails<DrawerRoot.ChangeEventReason> & {
+  preventUnmountOnClose(): void;
+};
+export type DrawerRootSnapPointChangeEventReason = DrawerRootChangeEventReason;
+export type DrawerRootSnapPointChangeEventDetails = BaseUIChangeEventDetails<DrawerRootSnapPointChangeEventReason>;
+export declare namespace DrawerRoot {
+  type Props<Payload = unknown> = DrawerRootProps<Payload>;
+  type Actions = DrawerRootActions;
+  type ChangeEventReason = DrawerRootChangeEventReason;
+  type ChangeEventDetails = DrawerRootChangeEventDetails;
+  type SnapPointChangeEventReason = DrawerRootSnapPointChangeEventReason;
+  type SnapPointChangeEventDetails = DrawerRootSnapPointChangeEventDetails;
+  type SnapPoint = DrawerSnapPoint;
+}

package/drawer/root/DrawerRoot.js

@@ -0,0 +1,235 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerRoot = DrawerRoot;
+var React = _interopRequireWildcard(require("react"));
+var _useControlled = require("@base-ui/utils/useControlled");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
+var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _DrawerRootContext = require("./DrawerRootContext");
+var _dialog = require("../../dialog");
+var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _DialogRootContext = require("../../dialog/root/DialogRootContext");
+var _DrawerProviderContext = require("../provider/DrawerProviderContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _DrawerProviderReport, _DrawerProviderReport2;
+/**
+ * Groups all parts of the drawer.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+function DrawerRoot(props) {
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal = false,
+    modal = true,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null,
+    swipeDirection = 'down',
+    snapToSequentialPoints = false,
+    snapPoints,
+    snapPoint: snapPointProp,
+    defaultSnapPoint,
+    onSnapPointChange: onSnapPointChangeProp
+  } = props;
+  const onSnapPointChange = (0, _useStableCallback.useStableCallback)(onSnapPointChangeProp);
+  const parentDrawerRootContext = (0, _DrawerRootContext.useDrawerRootContext)(true);
+  const notifyParentSwipeProgressChange = parentDrawerRootContext?.onNestedSwipeProgressChange;
+  const notifyParentFrontmostHeight = parentDrawerRootContext?.onNestedFrontmostHeightChange;
+  const notifyParentSwipingChange = parentDrawerRootContext?.onNestedSwipingChange;
+  const notifyParentHasNestedDrawer = parentDrawerRootContext?.onNestedDrawerPresenceChange;
+  const [popupHeight, setPopupHeight] = React.useState(0);
+  const [frontmostHeight, setFrontmostHeight] = React.useState(0);
+  const [hasNestedDrawer, setHasNestedDrawer] = React.useState(false);
+  const [nestedSwiping, setNestedSwiping] = React.useState(false);
+  const [nestedSwipeProgressStore] = React.useState(createNestedSwipeProgressStore);
+  const resolvedDefaultSnapPoint = defaultSnapPoint !== undefined ? defaultSnapPoint : snapPoints?.[0] ?? null;
+  const isSnapPointControlled = snapPointProp !== undefined;
+  const [activeSnapPoint, setActiveSnapPointUnwrapped] = (0, _useControlled.useControlled)({
+    controlled: snapPointProp,
+    default: resolvedDefaultSnapPoint,
+    name: 'Drawer',
+    state: 'snapPoint'
+  });
+  const isNestedDrawerOpenRef = React.useRef(false);
+  const setActiveSnapPoint = (0, _useStableCallback.useStableCallback)((nextSnapPoint, eventDetails) => {
+    const resolvedEventDetails = eventDetails ?? (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none);
+    onSnapPointChange?.(nextSnapPoint, resolvedEventDetails);
+    if (resolvedEventDetails.isCanceled) {
+      return;
+    }
+    setActiveSnapPointUnwrapped(nextSnapPoint);
+  });
+  const resolvedActiveSnapPoint = React.useMemo(() => {
+    if (isSnapPointControlled) {
+      return activeSnapPoint;
+    }
+    if (!snapPoints || snapPoints.length === 0) {
+      return activeSnapPoint;
+    }
+    if (activeSnapPoint === null || !snapPoints.some(snapPoint => Object.is(snapPoint, activeSnapPoint))) {
+      return resolvedDefaultSnapPoint;
+    }
+    return activeSnapPoint;
+  }, [activeSnapPoint, isSnapPointControlled, resolvedDefaultSnapPoint, snapPoints]);
+  const onPopupHeightChange = (0, _useStableCallback.useStableCallback)(height => {
+    setPopupHeight(height);
+    if (!isNestedDrawerOpenRef.current && height > 0) {
+      setFrontmostHeight(height);
+    }
+  });
+  const onNestedFrontmostHeightChange = (0, _useStableCallback.useStableCallback)(height => {
+    if (height > 0) {
+      isNestedDrawerOpenRef.current = true;
+      setFrontmostHeight(height);
+      return;
+    }
+    isNestedDrawerOpenRef.current = false;
+    if (popupHeight > 0) {
+      setFrontmostHeight(popupHeight);
+    }
+  });
+  const onNestedDrawerPresenceChange = (0, _useStableCallback.useStableCallback)(present => {
+    setHasNestedDrawer(present);
+  });
+  const onNestedSwipeProgressChange = (0, _useStableCallback.useStableCallback)(progress => {
+    nestedSwipeProgressStore.set(progress);
+    notifyParentSwipeProgressChange?.(progress);
+  });
+  const onNestedSwipingChange = (0, _useStableCallback.useStableCallback)(swiping => {
+    setNestedSwiping(swiping);
+    notifyParentSwipingChange?.(swiping);
+  });
+  const handleOpenChange = (0, _useStableCallback.useStableCallback)((nextOpen, eventDetails) => {
+    onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    if (!nextOpen && snapPoints && snapPoints.length > 0) {
+      setActiveSnapPoint(resolvedDefaultSnapPoint, (0, _createBaseUIEventDetails.createChangeEventDetails)(eventDetails.reason, eventDetails.event, eventDetails.trigger));
+    }
+  });
+  const contextValue = React.useMemo(() => ({
+    swipeDirection,
+    snapToSequentialPoints,
+    snapPoints,
+    activeSnapPoint: resolvedActiveSnapPoint,
+    setActiveSnapPoint,
+    frontmostHeight,
+    popupHeight,
+    hasNestedDrawer,
+    nestedSwiping,
+    nestedSwipeProgressStore,
+    onNestedDrawerPresenceChange,
+    onPopupHeightChange,
+    onNestedFrontmostHeightChange,
+    onNestedSwipingChange,
+    onNestedSwipeProgressChange,
+    notifyParentFrontmostHeight,
+    notifyParentSwipingChange,
+    notifyParentSwipeProgressChange,
+    notifyParentHasNestedDrawer
+  }), [resolvedActiveSnapPoint, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, notifyParentHasNestedDrawer, notifyParentSwipeProgressChange, notifyParentSwipingChange, notifyParentFrontmostHeight, onNestedDrawerPresenceChange, onNestedFrontmostHeightChange, onNestedSwipeProgressChange, onNestedSwipingChange, onPopupHeightChange, popupHeight, setActiveSnapPoint, snapPoints, snapToSequentialPoints, swipeDirection]);
+  const resolvedChildren = typeof children === 'function' ? payload => /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [_DrawerProviderReport || (_DrawerProviderReport = /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerProviderReporter, {})), children(payload)]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [_DrawerProviderReport2 || (_DrawerProviderReport2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerProviderReporter, {})), children]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerRootContext.DrawerRootContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.Dialog.Root, {
+      open: openProp,
+      defaultOpen: defaultOpen,
+      onOpenChange: handleOpenChange,
+      onOpenChangeComplete: onOpenChangeComplete,
+      disablePointerDismissal: disablePointerDismissal,
+      modal: modal,
+      actionsRef: actionsRef,
+      handle: handle,
+      triggerId: triggerIdProp,
+      defaultTriggerId: defaultTriggerIdProp,
+      children: resolvedChildren
+    })
+  });
+}
+function createNestedSwipeProgressStore() {
+  let progress = 0;
+  const listeners = new Set();
+  return {
+    getSnapshot: () => progress,
+    set(nextProgress) {
+      const resolved = Number.isFinite(nextProgress) ? nextProgress : 0;
+      if (resolved === progress) {
+        return;
+      }
+      progress = resolved;
+      listeners.forEach(listener => {
+        listener();
+      });
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+function DrawerProviderReporter() {
+  const drawerId = React.useId();
+  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
+  const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(false);
+  const open = dialogRootContext.store.useState('open');
+  const nestedOpenDialogCount = dialogRootContext.store.useState('nestedOpenDialogCount');
+  const popupElement = dialogRootContext.store.useState('popupElement');
+  const isTopmost = nestedOpenDialogCount === 0;
+  React.useEffect(() => {
+    if (!providerContext) {
+      return undefined;
+    }
+    return () => {
+      providerContext.removeDrawer(drawerId);
+    };
+  }, [drawerId, providerContext]);
+  React.useEffect(() => {
+    providerContext?.setDrawerOpen(drawerId, open);
+  }, [drawerId, open, providerContext]);
+  React.useEffect(() => {
+    // CloseWatcher enables the Android back gesture (Chromium-only).
+    // Keep this Android-only for now to avoid interfering with Escape/nesting semantics on desktop due to `useDismiss`.
+    if (!open || !isTopmost || !_detectBrowser.isAndroid) {
+      return undefined;
+    }
+    const win = (0, _owner.ownerWindow)(popupElement);
+    const CloseWatcherCtor = win.CloseWatcher;
+    if (!CloseWatcherCtor) {
+      return undefined;
+    }
+    function handleCloseWatcher(event) {
+      if (!dialogRootContext.store.select('open')) {
+        return;
+      }
+      dialogRootContext.store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closeWatcher, event));
+    }
+    const closeWatcher = new CloseWatcherCtor();
+    closeWatcher.addEventListener('close', handleCloseWatcher);
+    return () => {
+      closeWatcher.removeEventListener('close', handleCloseWatcher);
+      closeWatcher.destroy();
+    };
+  }, [dialogRootContext.store, isTopmost, open, popupElement]);
+  return null;
+}

package/drawer/root/DrawerRootContext.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import type { SwipeDirection } from "../../utils/useSwipeDismiss.js";
+import type { DrawerRootSnapPointChangeEventDetails } from "./DrawerRoot.js";
+export type DrawerSwipeDirection = SwipeDirection;
+export type DrawerSnapPoint = number | string;
+export interface DrawerNestedSwipeProgressStore {
+  getSnapshot: () => number;
+  subscribe: (listener: () => void) => () => void;
+}
+export interface DrawerRootContext {
+  swipeDirection: DrawerSwipeDirection;
+  /**
+   * Whether snap points can be skipped based on swipe velocity.
+   */
+  snapToSequentialPoints: boolean;
+  /**
+   * Snap points used to size/position the drawer.
+   */
+  snapPoints?: DrawerSnapPoint[] | undefined;
+  /**
+   * The currently active snap point.
+   */
+  activeSnapPoint?: DrawerSnapPoint | null | undefined;
+  /**
+   * Updates the currently active snap point.
+   */
+  setActiveSnapPoint?: ((snapPoint: DrawerSnapPoint | null, eventDetails?: DrawerRootSnapPointChangeEventDetails) => void) | undefined;
+  /**
+   * The measured height of the frontmost open drawer within the current nested drawer stack.
+   */
+  frontmostHeight: number;
+  /**
+   * The measured height of the drawer popup element.
+   */
+  popupHeight: number;
+  /**
+   * Whether the current drawer has a nested drawer mounted in its stack (including while it is
+   * transitioning out).
+   */
+  hasNestedDrawer: boolean;
+  /**
+   * Whether a nested drawer is currently being swiped.
+   */
+  nestedSwiping: boolean;
+  /**
+   * Provides nested swipe progress without re-rendering the drawer tree.
+   */
+  nestedSwipeProgressStore: DrawerNestedSwipeProgressStore;
+  /**
+   * 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.
+   */
+  onNestedFrontmostHeightChange: (height: number) => void;
+  /**
+   * Called by a nested drawer to report whether it's being swiped.
+   */
+  onNestedSwipingChange: (swiping: boolean) => void;
+  /**
+   * Called by a nested drawer to report its swipe progress.
+   */
+  onNestedSwipeProgressChange: (progress: number) => void;
+  /**
+   * Provided to nested drawers so they can report their frontmost height to the parent drawer.
+   */
+  notifyParentFrontmostHeight?: ((height: number) => void) | undefined;
+  /**
+   * Provided to nested drawers so they can report swiping to the parent drawer.
+   */
+  notifyParentSwipingChange?: ((swiping: boolean) => void) | undefined;
+  /**
+   * Provided to nested drawers so they can report swipe progress to the parent drawer.
+   */
+  notifyParentSwipeProgressChange?: ((progress: number) => void) | undefined;
+  /**
+   * Provided to nested drawers so they can report whether they are still present (open or
+   * transitioning out) to the parent drawer.
+   */
+  notifyParentHasNestedDrawer?: ((present: boolean) => void) | undefined;
+}
+export declare const DrawerRootContext: React.Context<DrawerRootContext | undefined>;
+export declare function useDrawerRootContext(optional?: false): DrawerRootContext;
+export declare function useDrawerRootContext(optional: true): DrawerRootContext | undefined;

package/drawer/root/DrawerRootContext.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.DrawerRootContext = void 0;
+exports.useDrawerRootContext = useDrawerRootContext;
+var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
+var React = _interopRequireWildcard(require("react"));
+const DrawerRootContext = exports.DrawerRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
+function useDrawerRootContext(optional) {
+  const drawerRootContext = React.useContext(DrawerRootContext);
+  if (optional === false && drawerRootContext === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerRootContext is missing. Drawer parts must be placed within <Drawer.Root>.' : (0, _formatErrorMessage2.default)(90));
+  }
+  return drawerRootContext;
+}

package/drawer/root/useDrawerSnapPoints.d.ts

@@ -0,0 +1,15 @@
+import type { DrawerSnapPoint } from "./DrawerRootContext.js";
+export interface ResolvedDrawerSnapPoint {
+  value: DrawerSnapPoint;
+  height: number;
+  offset: number;
+}
+export declare function useDrawerSnapPoints(): {
+  snapPoints: DrawerSnapPoint[] | undefined;
+  activeSnapPoint: DrawerSnapPoint | null | undefined;
+  setActiveSnapPoint: ((snapPoint: DrawerSnapPoint | null, eventDetails?: import("./DrawerRoot.js").DrawerRootSnapPointChangeEventDetails) => void) | undefined;
+  popupHeight: number;
+  viewportHeight: number;
+  resolvedSnapPoints: ResolvedDrawerSnapPoint[];
+  activeSnapPointOffset: number | null;
+};

package/drawer/root/useDrawerSnapPoints.js

@@ -0,0 +1,155 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDrawerSnapPoints = useDrawerSnapPoints;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
+var _clamp = require("../../utils/clamp");
+var _DialogRootContext = require("../../dialog/root/DialogRootContext");
+var _DrawerRootContext = require("./DrawerRootContext");
+function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
+  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) {
+    return null;
+  }
+  if (typeof snapPoint === 'number') {
+    if (!Number.isFinite(snapPoint)) {
+      return null;
+    }
+    if (snapPoint <= 1) {
+      return (0, _clamp.clamp)(snapPoint, 0, 1) * viewportHeight;
+    }
+    return snapPoint;
+  }
+  const trimmed = snapPoint.trim();
+  if (trimmed.endsWith('px')) {
+    const value = Number.parseFloat(trimmed);
+    return Number.isFinite(value) ? value : null;
+  }
+  if (trimmed.endsWith('rem')) {
+    const value = Number.parseFloat(trimmed);
+    return Number.isFinite(value) ? value * rootFontSize : null;
+  }
+  return null;
+}
+function findClosestSnapPoint(height, points) {
+  let closest = null;
+  let closestDistance = Infinity;
+  for (const point of points) {
+    const distance = Math.abs(point.height - height);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closest = point;
+    }
+  }
+  return closest;
+}
+function useDrawerSnapPoints() {
+  const {
+    store
+  } = (0, _DialogRootContext.useDialogRootContext)();
+  const {
+    snapPoints,
+    activeSnapPoint,
+    setActiveSnapPoint,
+    popupHeight
+  } = (0, _DrawerRootContext.useDrawerRootContext)();
+  const viewportElement = store.useState('viewportElement');
+  const [viewportHeight, setViewportHeight] = React.useState(0);
+  const [rootFontSize, setRootFontSize] = React.useState(16);
+  const measureViewportHeight = (0, _useStableCallback.useStableCallback)(() => {
+    const doc = (0, _owner.ownerDocument)(viewportElement);
+    const html = doc.documentElement;
+    if (viewportElement) {
+      setViewportHeight(viewportElement.offsetHeight);
+    }
+    if (!viewportElement) {
+      setViewportHeight(html.clientHeight);
+    }
+    const fontSize = parseFloat(getComputedStyle(html).fontSize);
+    if (Number.isFinite(fontSize)) {
+      setRootFontSize(fontSize);
+    }
+  });
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    measureViewportHeight();
+    if (!viewportElement || typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(measureViewportHeight);
+    resizeObserver.observe(viewportElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [measureViewportHeight, viewportElement]);
+  const resolvedSnapPoints = React.useMemo(() => {
+    if (!snapPoints || snapPoints.length === 0 || viewportHeight <= 0 || popupHeight <= 0) {
+      return [];
+    }
+    const maxHeight = Math.min(popupHeight, viewportHeight);
+    if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
+      return [];
+    }
+    const resolved = snapPoints.map(value => {
+      const resolvedHeight = resolveSnapPointValue(value, viewportHeight, rootFontSize);
+      if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+        return null;
+      }
+      const clampedHeight = (0, _clamp.clamp)(resolvedHeight, 0, maxHeight);
+      return {
+        value,
+        height: clampedHeight,
+        offset: Math.max(0, popupHeight - clampedHeight)
+      };
+    }).filter(point => Boolean(point));
+    if (resolved.length <= 1) {
+      return resolved;
+    }
+    const deduped = [];
+    const seenHeights = [];
+    for (let index = resolved.length - 1; index >= 0; index -= 1) {
+      const point = resolved[index];
+      const isDuplicate = seenHeights.some(height => Math.abs(height - point.height) <= 1);
+      if (isDuplicate) {
+        continue;
+      }
+      seenHeights.push(point.height);
+      deduped.push(point);
+    }
+    deduped.reverse();
+    return deduped;
+  }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
+  const resolvedActiveSnapPoint = React.useMemo(() => {
+    if (activeSnapPoint === undefined) {
+      return resolvedSnapPoints[0];
+    }
+    if (activeSnapPoint === null) {
+      return undefined;
+    }
+    const exactMatch = resolvedSnapPoints.find(point => Object.is(point.value, activeSnapPoint));
+    if (exactMatch) {
+      return exactMatch;
+    }
+    const maxHeight = Math.min(popupHeight, viewportHeight);
+    const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
+    if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+      return undefined;
+    }
+    const clampedHeight = (0, _clamp.clamp)(resolvedHeight, 0, maxHeight);
+    return findClosestSnapPoint(clampedHeight, resolvedSnapPoints) ?? undefined;
+  }, [activeSnapPoint, popupHeight, resolvedSnapPoints, rootFontSize, viewportHeight]);
+  return {
+    snapPoints,
+    activeSnapPoint,
+    setActiveSnapPoint,
+    popupHeight,
+    viewportHeight,
+    resolvedSnapPoints,
+    activeSnapPointOffset: resolvedActiveSnapPoint?.offset ?? null
+  };
+}

package/drawer/swipe-area/DrawerSwipeArea.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import { type SwipeDirection } from "../../utils/useSwipeDismiss.js";
+import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
+/**
+ * An invisible area that listens for swipe gestures to open the drawer.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export declare const DrawerSwipeArea: React.ForwardRefExoticComponent<Omit<DrawerSwipeAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerSwipeAreaProps extends BaseUIComponentProps<'div', DrawerSwipeArea.State> {
+  /**
+   * Whether the swipe area is disabled.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * The swipe direction that opens the drawer.
+   * Defaults to the opposite of `Drawer.Root` `swipeDirection`.
+   */
+  swipeDirection?: DrawerSwipeDirection | undefined;
+}
+export interface DrawerSwipeAreaState {
+  /**
+   * Whether the drawer is currently open.
+   */
+  open: boolean;
+  /**
+   * Whether the swipe area is currently being swiped.
+   */
+  swiping: boolean;
+  /**
+   * The swipe direction that opens the drawer.
+   */
+  swipeDirection: SwipeDirection;
+  /**
+   * Whether the swipe area is disabled.
+   */
+  disabled: boolean;
+}
+export declare namespace DrawerSwipeArea {
+  type Props = DrawerSwipeAreaProps;
+  type State = DrawerSwipeAreaState;
+}