@base-ui/react 1.6.0 → 1.7.0

package/drawer/provider/DrawerProviderContext.mjs

@@ -1,13 +1,8 @@
 'use client';
 
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const DrawerProviderContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DrawerProviderContext.displayName = "DrawerProviderContext";
-export 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>.' : _formatErrorMessage(91));
-  }
-  return context;
+export function useDrawerProviderContext() {
+  return React.useContext(DrawerProviderContext);
 }

package/drawer/root/DrawerRoot.d.mts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type DrawerSwipeDirection, type DrawerSnapPoint } from "./DrawerRootContext.mjs";
 import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
-import type { DialogHandle } from "../../dialog/store/DialogHandle.mjs";
+import type { DrawerHandle } from "../handle.mjs";
 import type { PayloadChildRenderFunction } from "../../utils/popups/index.mjs";
 /**
  * Groups all parts of the drawer.
@@ -58,7 +58,7 @@ export interface DrawerRootProps<Payload = unknown> {
    * If specified, allows detached triggers to control the drawer's open state.
    * Can be created with the Drawer.createHandle() method.
    */
-  handle?: DialogHandle<Payload> | undefined;
+  handle?: DrawerHandle<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.

package/drawer/root/DrawerRoot.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type DrawerSwipeDirection, type DrawerSnapPoint } from "./DrawerRootContext.js";
 import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
-import type { DialogHandle } from "../../dialog/store/DialogHandle.js";
+import type { DrawerHandle } from "../handle.js";
 import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
 /**
  * Groups all parts of the drawer.
@@ -58,7 +58,7 @@ export interface DrawerRootProps<Payload = unknown> {
    * If specified, allows detached triggers to control the drawer's open state.
    * Can be created with the Drawer.createHandle() method.
    */
-  handle?: DialogHandle<Payload> | undefined;
+  handle?: DrawerHandle<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.

package/drawer/root/DrawerRoot.js

@@ -9,15 +9,15 @@ exports.DrawerRoot = DrawerRoot;
 var React = _interopRequireWildcard(require("react"));
 var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useControlled = require("@base-ui/utils/useControlled");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
 var _platform = require("@base-ui/utils/platform");
-var _useId = require("@base-ui/utils/useId");
 var _DrawerRootContext = require("./DrawerRootContext");
-var _dialog = require("../../dialog");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
+var _useRenderDialogRoot = require("../../dialog/root/useRenderDialogRoot");
 var _DrawerProviderContext = require("../provider/DrawerProviderContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _DrawerProviderReport, _DrawerProviderReport2;
@@ -66,6 +66,7 @@ function DrawerRoot(props) {
     state: 'snapPoint'
   });
   const isNestedDrawerOpenRef = React.useRef(false);
+  const swipeAreaActiveRef = React.useRef(false);
   const setActiveSnapPoint = (0, _useStableCallback.useStableCallback)((nextSnapPoint, eventDetails) => {
     const resolvedEventDetails = eventDetails ?? (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none);
     onSnapPointChange?.(nextSnapPoint, resolvedEventDetails);
@@ -125,6 +126,7 @@ function DrawerRoot(props) {
   });
   const contextValue = React.useMemo(() => ({
     swipeDirection,
+    swipeAreaActiveRef,
     snapToSequentialPoints,
     snapPoints,
     activeSnapPoint: resolvedActiveSnapPoint,
@@ -143,30 +145,28 @@ function DrawerRoot(props) {
     notifyParentSwipingChange,
     notifyParentSwipeProgressChange,
     notifyParentHasNestedDrawer
-  }), [resolvedActiveSnapPoint, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, notifyParentHasNestedDrawer, notifyParentSwipeProgressChange, notifyParentSwipingChange, notifyParentFrontmostHeight, onNestedDrawerPresenceChange, onNestedFrontmostHeightChange, onNestedSwipeProgressChange, onNestedSwipingChange, onPopupHeightChange, popupHeight, setActiveSnapPoint, snapPoints, snapToSequentialPoints, swipeDirection]);
+  }), [resolvedActiveSnapPoint, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, notifyParentHasNestedDrawer, notifyParentSwipeProgressChange, notifyParentSwipingChange, notifyParentFrontmostHeight, onNestedDrawerPresenceChange, onNestedFrontmostHeightChange, onNestedSwipeProgressChange, onNestedSwipingChange, onPopupHeightChange, popupHeight, setActiveSnapPoint, snapPoints, snapToSequentialPoints, swipeAreaActiveRef, 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]
   });
+  const dialog = (0, _useRenderDialogRoot.useRenderDialogRoot)('drawer', {
+    open: openProp,
+    defaultOpen,
+    onOpenChange: handleOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal,
+    modal,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp,
+    children: resolvedChildren
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerRootContext.DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.IsDrawerContext.Provider, {
-      value: true,
-      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
-      })
-    })
+    children: dialog
   });
 }
 function createNestedSwipeProgressStore() {
@@ -193,29 +193,25 @@ function createNestedSwipeProgressStore() {
   };
 }
 function DrawerProviderReporter() {
-  const drawerId = (0, _useId.useId)();
-  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
-  const {
-    store
-  } = (0, _DialogRootContext.useDialogRootContext)(false);
+  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)();
+  const store = (0, _DialogRootContext.useDialogRootContext)(false);
+  const setDrawerOpen = providerContext?.setDrawerOpen;
+  const removeDrawer = providerContext?.removeDrawer;
   const open = store.useState('open');
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const popupElement = store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
-  React.useEffect(() => {
-    if (!providerContext || drawerId == null) {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!removeDrawer) {
       return undefined;
     }
     return () => {
-      providerContext.removeDrawer(drawerId);
+      removeDrawer(store);
     };
-  }, [drawerId, providerContext]);
-  React.useEffect(() => {
-    if (drawerId == null) {
-      return;
-    }
-    providerContext?.setDrawerOpen(drawerId, open);
-  }, [drawerId, open, providerContext]);
+  }, [removeDrawer, store]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    setDrawerOpen?.(store, open);
+  }, [open, setDrawerOpen, store]);
   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`.

package/drawer/root/DrawerRoot.mjs

@@ -4,15 +4,15 @@ var _DrawerProviderReport, _DrawerProviderReport2;
 import * as React from 'react';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useControlled } from '@base-ui/utils/useControlled';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerWindow } from '@base-ui/utils/owner';
 import { platform } from '@base-ui/utils/platform';
-import { useId } from '@base-ui/utils/useId';
 import { DrawerRootContext, useDrawerRootContext } from "./DrawerRootContext.mjs";
-import { Dialog } from "../../dialog/index.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
-import { IsDrawerContext, useDialogRootContext } from "../../dialog/root/DialogRootContext.mjs";
+import { useDialogRootContext } from "../../dialog/root/DialogRootContext.mjs";
+import { useRenderDialogRoot } from "../../dialog/root/useRenderDialogRoot.mjs";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -60,6 +60,7 @@ export function DrawerRoot(props) {
     state: 'snapPoint'
   });
   const isNestedDrawerOpenRef = React.useRef(false);
+  const swipeAreaActiveRef = React.useRef(false);
   const setActiveSnapPoint = useStableCallback((nextSnapPoint, eventDetails) => {
     const resolvedEventDetails = eventDetails ?? createChangeEventDetails(REASONS.none);
     onSnapPointChange?.(nextSnapPoint, resolvedEventDetails);
@@ -119,6 +120,7 @@ export function DrawerRoot(props) {
   });
   const contextValue = React.useMemo(() => ({
     swipeDirection,
+    swipeAreaActiveRef,
     snapToSequentialPoints,
     snapPoints,
     activeSnapPoint: resolvedActiveSnapPoint,
@@ -137,30 +139,28 @@ export function DrawerRoot(props) {
     notifyParentSwipingChange,
     notifyParentSwipeProgressChange,
     notifyParentHasNestedDrawer
-  }), [resolvedActiveSnapPoint, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, notifyParentHasNestedDrawer, notifyParentSwipeProgressChange, notifyParentSwipingChange, notifyParentFrontmostHeight, onNestedDrawerPresenceChange, onNestedFrontmostHeightChange, onNestedSwipeProgressChange, onNestedSwipingChange, onPopupHeightChange, popupHeight, setActiveSnapPoint, snapPoints, snapToSequentialPoints, swipeDirection]);
+  }), [resolvedActiveSnapPoint, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, notifyParentHasNestedDrawer, notifyParentSwipeProgressChange, notifyParentSwipingChange, notifyParentFrontmostHeight, onNestedDrawerPresenceChange, onNestedFrontmostHeightChange, onNestedSwipeProgressChange, onNestedSwipingChange, onPopupHeightChange, popupHeight, setActiveSnapPoint, snapPoints, snapToSequentialPoints, swipeAreaActiveRef, swipeDirection]);
   const resolvedChildren = typeof children === 'function' ? payload => /*#__PURE__*/_jsxs(React.Fragment, {
     children: [_DrawerProviderReport || (_DrawerProviderReport = /*#__PURE__*/_jsx(DrawerProviderReporter, {})), children(payload)]
   }) : /*#__PURE__*/_jsxs(React.Fragment, {
     children: [_DrawerProviderReport2 || (_DrawerProviderReport2 = /*#__PURE__*/_jsx(DrawerProviderReporter, {})), children]
   });
+  const dialog = useRenderDialogRoot('drawer', {
+    open: openProp,
+    defaultOpen,
+    onOpenChange: handleOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal,
+    modal,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp,
+    children: resolvedChildren
+  });
   return /*#__PURE__*/_jsx(DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
-      value: true,
-      children: /*#__PURE__*/_jsx(Dialog.Root, {
-        open: openProp,
-        defaultOpen: defaultOpen,
-        onOpenChange: handleOpenChange,
-        onOpenChangeComplete: onOpenChangeComplete,
-        disablePointerDismissal: disablePointerDismissal,
-        modal: modal,
-        actionsRef: actionsRef,
-        handle: handle,
-        triggerId: triggerIdProp,
-        defaultTriggerId: defaultTriggerIdProp,
-        children: resolvedChildren
-      })
-    })
+    children: dialog
   });
 }
 function createNestedSwipeProgressStore() {
@@ -187,29 +187,25 @@ function createNestedSwipeProgressStore() {
   };
 }
 function DrawerProviderReporter() {
-  const drawerId = useId();
-  const providerContext = useDrawerProviderContext(true);
-  const {
-    store
-  } = useDialogRootContext(false);
+  const providerContext = useDrawerProviderContext();
+  const store = useDialogRootContext(false);
+  const setDrawerOpen = providerContext?.setDrawerOpen;
+  const removeDrawer = providerContext?.removeDrawer;
   const open = store.useState('open');
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const popupElement = store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
-  React.useEffect(() => {
-    if (!providerContext || drawerId == null) {
+  useIsoLayoutEffect(() => {
+    if (!removeDrawer) {
       return undefined;
     }
     return () => {
-      providerContext.removeDrawer(drawerId);
+      removeDrawer(store);
     };
-  }, [drawerId, providerContext]);
-  React.useEffect(() => {
-    if (drawerId == null) {
-      return;
-    }
-    providerContext?.setDrawerOpen(drawerId, open);
-  }, [drawerId, open, providerContext]);
+  }, [removeDrawer, store]);
+  useIsoLayoutEffect(() => {
+    setDrawerOpen?.(store, open);
+  }, [open, setDrawerOpen, store]);
   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`.

package/drawer/root/DrawerRootContext.d.mts

@@ -9,6 +9,11 @@ export interface DrawerNestedSwipeProgressStore {
 }
 export interface DrawerRootContext {
   swipeDirection: DrawerSwipeDirection;
+  /**
+   * Whether `Drawer.SwipeArea` is currently driving an open gesture (writing the popup's
+   * swipe-movement vars imperatively). The viewport reads this to skip resetting them on open.
+   */
+  swipeAreaActiveRef: React.MutableRefObject<boolean>;
   /**
    * Whether to disable velocity-based snap skipping.
    */
@@ -20,11 +25,11 @@ export interface DrawerRootContext {
   /**
    * The currently active snap point.
    */
-  activeSnapPoint?: DrawerSnapPoint | null | undefined;
+  activeSnapPoint: DrawerSnapPoint | null;
   /**
    * Updates the currently active snap point.
    */
-  setActiveSnapPoint?: ((snapPoint: DrawerSnapPoint | null, eventDetails?: DrawerRootSnapPointChangeEventDetails) => void) | undefined;
+  setActiveSnapPoint: (snapPoint: DrawerSnapPoint | null, eventDetails?: DrawerRootSnapPointChangeEventDetails) => void;
   /**
    * The measured height of the frontmost open drawer within the current nested drawer stack.
    */

package/drawer/root/DrawerRootContext.d.ts

@@ -9,6 +9,11 @@ export interface DrawerNestedSwipeProgressStore {
 }
 export interface DrawerRootContext {
   swipeDirection: DrawerSwipeDirection;
+  /**
+   * Whether `Drawer.SwipeArea` is currently driving an open gesture (writing the popup's
+   * swipe-movement vars imperatively). The viewport reads this to skip resetting them on open.
+   */
+  swipeAreaActiveRef: React.MutableRefObject<boolean>;
   /**
    * Whether to disable velocity-based snap skipping.
    */
@@ -20,11 +25,11 @@ export interface DrawerRootContext {
   /**
    * The currently active snap point.
    */
-  activeSnapPoint?: DrawerSnapPoint | null | undefined;
+  activeSnapPoint: DrawerSnapPoint | null;
   /**
    * Updates the currently active snap point.
    */
-  setActiveSnapPoint?: ((snapPoint: DrawerSnapPoint | null, eventDetails?: DrawerRootSnapPointChangeEventDetails) => void) | undefined;
+  setActiveSnapPoint: (snapPoint: DrawerSnapPoint | null, eventDetails?: DrawerRootSnapPointChangeEventDetails) => void;
   /**
    * The measured height of the frontmost open drawer within the current nested drawer stack.
    */

package/drawer/root/DrawerRootContext.js

@@ -14,7 +14,7 @@ const DrawerRootContext = exports.DrawerRootContext = /*#__PURE__*/React.createC
 if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
 function useDrawerRootContext(optional) {
   const drawerRootContext = React.useContext(DrawerRootContext);
-  if (optional === false && drawerRootContext === undefined) {
+  if (optional !== true && 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/DrawerRootContext.mjs

@@ -6,7 +6,7 @@ export const DrawerRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
 export function useDrawerRootContext(optional) {
   const drawerRootContext = React.useContext(DrawerRootContext);
-  if (optional === false && drawerRootContext === undefined) {
+  if (optional !== true && drawerRootContext === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerRootContext is missing. Drawer parts must be placed within <Drawer.Root>.' : _formatErrorMessage(90));
   }
   return drawerRootContext;

package/drawer/root/useDrawerSnapPoints.d.mts

@@ -9,10 +9,14 @@ export interface ResolvedDrawerSnapPoint {
  * overshoots the fully-open edge (`nextOffset < 0`) so the popup resists travelling past it.
  */
 export declare function getSnapPointSwipeMovement(baseOffset: number, movementValue: number): number;
+/**
+ * Returns the index of the value closest to `target`, or `-1` if `values` is empty.
+ */
+export declare function closestSnapPointIndex(values: number[], target: number): number;
 export declare function useDrawerSnapPoints(): {
   snapPoints: DrawerSnapPoint[] | undefined;
-  activeSnapPoint: DrawerSnapPoint | null | undefined;
-  setActiveSnapPoint: ((snapPoint: DrawerSnapPoint | null, eventDetails?: import("./DrawerRoot.mjs").DrawerRootSnapPointChangeEventDetails) => void) | undefined;
+  activeSnapPoint: DrawerSnapPoint | null;
+  setActiveSnapPoint: (snapPoint: DrawerSnapPoint | null, eventDetails?: import("./DrawerRoot.mjs").DrawerRootSnapPointChangeEventDetails) => void;
   popupHeight: number;
   viewportHeight: number;
   resolvedSnapPoints: ResolvedDrawerSnapPoint[];

package/drawer/root/useDrawerSnapPoints.d.ts

@@ -9,10 +9,14 @@ export interface ResolvedDrawerSnapPoint {
  * overshoots the fully-open edge (`nextOffset < 0`) so the popup resists travelling past it.
  */
 export declare function getSnapPointSwipeMovement(baseOffset: number, movementValue: number): number;
+/**
+ * Returns the index of the value closest to `target`, or `-1` if `values` is empty.
+ */
+export declare function closestSnapPointIndex(values: number[], target: number): number;
 export declare function useDrawerSnapPoints(): {
   snapPoints: DrawerSnapPoint[] | undefined;
-  activeSnapPoint: DrawerSnapPoint | null | undefined;
-  setActiveSnapPoint: ((snapPoint: DrawerSnapPoint | null, eventDetails?: import("./DrawerRoot.js").DrawerRootSnapPointChangeEventDetails) => void) | undefined;
+  activeSnapPoint: DrawerSnapPoint | null;
+  setActiveSnapPoint: (snapPoint: DrawerSnapPoint | null, eventDetails?: import("./DrawerRoot.js").DrawerRootSnapPointChangeEventDetails) => void;
   popupHeight: number;
   viewportHeight: number;
   resolvedSnapPoints: ResolvedDrawerSnapPoint[];

package/drawer/root/useDrawerSnapPoints.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.closestSnapPointIndex = closestSnapPointIndex;
 exports.getSnapPointSwipeMovement = getSnapPointSwipeMovement;
 exports.useDrawerSnapPoints = useDrawerSnapPoints;
 var React = _interopRequireWildcard(require("react"));
@@ -49,22 +50,24 @@ function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
   }
   return null;
 }
-function findClosestSnapPoint(height, points) {
-  let closest = null;
+
+/**
+ * Returns the index of the value closest to `target`, or `-1` if `values` is empty.
+ */
+function closestSnapPointIndex(values, target) {
+  let closestIndex = -1;
   let closestDistance = Infinity;
-  for (const point of points) {
-    const distance = Math.abs(point.height - height);
+  for (let index = 0; index < values.length; index += 1) {
+    const distance = Math.abs(values[index] - target);
     if (distance < closestDistance) {
       closestDistance = distance;
-      closest = point;
+      closestIndex = index;
     }
   }
-  return closest;
+  return closestIndex;
 }
 function useDrawerSnapPoints() {
-  const {
-    store
-  } = (0, _DialogRootContext.useDialogRootContext)();
+  const store = (0, _DialogRootContext.useDialogRootContext)();
   const {
     snapPoints,
     activeSnapPoint,
@@ -77,12 +80,7 @@ function useDrawerSnapPoints() {
   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);
-    }
+    setViewportHeight(viewportElement ? viewportElement.offsetHeight : html.clientHeight);
     const fontSize = parseFloat(getComputedStyle(html).fontSize);
     if (Number.isFinite(fontSize)) {
       setRootFontSize(fontSize);
@@ -104,12 +102,9 @@ function useDrawerSnapPoints() {
       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)) {
+      if (resolvedHeight === null) {
         return null;
       }
       const clampedHeight = (0, _clamp.clamp)(resolvedHeight, 0, maxHeight);
@@ -137,9 +132,6 @@ function useDrawerSnapPoints() {
     return deduped;
   }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
   const resolvedActiveSnapPoint = React.useMemo(() => {
-    if (activeSnapPoint === undefined) {
-      return resolvedSnapPoints[0];
-    }
     if (activeSnapPoint === null) {
       return undefined;
     }
@@ -149,11 +141,11 @@ function useDrawerSnapPoints() {
     }
     const maxHeight = Math.min(popupHeight, viewportHeight);
     const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
-    if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+    if (resolvedHeight === null) {
       return undefined;
     }
     const clampedHeight = (0, _clamp.clamp)(resolvedHeight, 0, maxHeight);
-    return findClosestSnapPoint(clampedHeight, resolvedSnapPoints) ?? undefined;
+    return resolvedSnapPoints[closestSnapPointIndex(resolvedSnapPoints.map(point => point.height), clampedHeight)];
   }, [activeSnapPoint, popupHeight, resolvedSnapPoints, rootFontSize, viewportHeight]);
   return {
     snapPoints,

package/drawer/root/useDrawerSnapPoints.mjs

@@ -42,22 +42,24 @@ function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
   }
   return null;
 }
-function findClosestSnapPoint(height, points) {
-  let closest = null;
+
+/**
+ * Returns the index of the value closest to `target`, or `-1` if `values` is empty.
+ */
+export function closestSnapPointIndex(values, target) {
+  let closestIndex = -1;
   let closestDistance = Infinity;
-  for (const point of points) {
-    const distance = Math.abs(point.height - height);
+  for (let index = 0; index < values.length; index += 1) {
+    const distance = Math.abs(values[index] - target);
     if (distance < closestDistance) {
       closestDistance = distance;
-      closest = point;
+      closestIndex = index;
     }
   }
-  return closest;
+  return closestIndex;
 }
 export function useDrawerSnapPoints() {
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const {
     snapPoints,
     activeSnapPoint,
@@ -70,12 +72,7 @@ export function useDrawerSnapPoints() {
   const measureViewportHeight = useStableCallback(() => {
     const doc = ownerDocument(viewportElement);
     const html = doc.documentElement;
-    if (viewportElement) {
-      setViewportHeight(viewportElement.offsetHeight);
-    }
-    if (!viewportElement) {
-      setViewportHeight(html.clientHeight);
-    }
+    setViewportHeight(viewportElement ? viewportElement.offsetHeight : html.clientHeight);
     const fontSize = parseFloat(getComputedStyle(html).fontSize);
     if (Number.isFinite(fontSize)) {
       setRootFontSize(fontSize);
@@ -97,12 +94,9 @@ export function useDrawerSnapPoints() {
       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)) {
+      if (resolvedHeight === null) {
         return null;
       }
       const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
@@ -130,9 +124,6 @@ export function useDrawerSnapPoints() {
     return deduped;
   }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
   const resolvedActiveSnapPoint = React.useMemo(() => {
-    if (activeSnapPoint === undefined) {
-      return resolvedSnapPoints[0];
-    }
     if (activeSnapPoint === null) {
       return undefined;
     }
@@ -142,11 +133,11 @@ export function useDrawerSnapPoints() {
     }
     const maxHeight = Math.min(popupHeight, viewportHeight);
     const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
-    if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+    if (resolvedHeight === null) {
       return undefined;
     }
     const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
-    return findClosestSnapPoint(clampedHeight, resolvedSnapPoints) ?? undefined;
+    return resolvedSnapPoints[closestSnapPointIndex(resolvedSnapPoints.map(point => point.height), clampedHeight)];
   }, [activeSnapPoint, popupHeight, resolvedSnapPoints, rootFontSize, viewportHeight]);
   return {
     snapPoints,