@ringcentral/spring-ui 1.11.2 → 1.13.0

package/SwipeableDrawer.js

@@ -1,35 +1,47 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect, useLayoutEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
-import { useWindowContext, useEventCallback, useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import clsx from 'clsx';
-import { D as Drawer } from './chunks/Drawer.js';
-import { D as DragHandle } from './chunks/DragHandle.js';
-import { useMotionValue, animate, useTransform } from 'framer-motion';
-import { rubberbandIfOutOfBounds, useDrag } from '@use-gesture/react';
-import { u as useAnimationFrame } from './chunks/useAnimationFrame.js';
-import { ResizeObserver } from '@juggle/resize-observer';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getSlideIn.js';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-
-var SwipeableDrawer$1 = {"sui-swipeable-drawer-header-drag":"sui-swipeable-drawer-header-drag"};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useClasses, useEventCallback, useWindowContext } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import clsx from "clsx";
+import { animate, useMotionValue, useTransform } from "framer-motion";
+import { rubberbandIfOutOfBounds, useDrag } from "@use-gesture/react";
+import { ResizeObserver } from "@juggle/resize-observer";
+import { useAnimationFrame } from "./chunks/6335.js";
+import { Drawer as Drawer_Drawer } from "./Drawer.js";
+import { DragHandle as DragHandle_DragHandle } from "./DragHandle.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var SwipeableDrawer = ({"sui-swipeable-drawer-header-drag":"sui-swipeable-drawer-header-drag"});
+
+
+
+
+
+// Keeps track of whether everything is good to go or not, in the most efficient way possible
 
 function useReady() {
     const [ready, setReady] = useState(false);
     const [readyMap, updateReadyMap] = useState({});
-    const registerReady = useCallback((key) => {
-        updateReadyMap((ready) => ({ ...ready, [key]: false }));
-        return () => {
-            updateReadyMap((ready) => ({ ...ready, [key]: true }));
+    const registerReady = useCallback((key)=>{
+        // Register the check we're gonna wait for until it's ready
+        updateReadyMap((ready)=>({
+                ...ready,
+                [key]: false
+            }));
+        return ()=>{
+            // Set it to ready
+            updateReadyMap((ready)=>({
+                    ...ready,
+                    [key]: true
+                }));
         };
     }, []);
-    useEffect(() => {
+    useEffect(()=>{
         const states = Object.values(readyMap);
         if (states.length === 0) {
             return;
@@ -37,76 +49,106 @@ function useReady() {
         const isReady = states.every(Boolean);
         if (isReady) {
             setReady(true);
-        }
-        else {
+        } else {
             setReady(false);
         }
-    }, [readyMap]);
-    return { ready, registerReady };
+    }, [
+        readyMap
+    ]);
+    return {
+        ready,
+        registerReady
+    };
 }
 
+
+
+
+
+// Hook for determining the size of an element using the Resize Observer API
+
+
+
 const observerOptions = {
-    box: 'border-box',
+    // Respond to changes to padding, happens often on iOS when using env(safe-area-inset-bottom)
+    // And the user hides or shows the Safari browser toolbar
+    box: 'border-box'
 };
-function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
+/**
+ * Hook for determining the size of an element using the Resize Observer API.
+ *
+ * @param ref - A React ref to an element
+ * @param options - Configuration options
+ * @param options.enabled - Whether the observer is enabled
+ * @param options.resizeSourceRef - Optional ref to track resize source
+ */ function useElementSizeObserver(ref, { enabled, resizeSourceRef }) {
     const { requestAnimationFrame, cancelAnimationFrame } = useAnimationFrame();
     const [size, setSize] = useState(0);
-    const handleResize = useCallback((entries) => {
+    const handleResize = useCallback((entries)=>{
+        // we only observe one element, so accessing the first entry here is fine
         const entry = entries?.[0];
         if (!entry) {
+            // Early return if no entry - can happen during observer disconnect
             return;
         }
         const el = entry.target;
         if (!el) {
+            // Early return if no target element
             return;
         }
+        // Prefer intrinsic content size to visible height so drag doesn't change the measured height.
+        // @juggle/resize-observer provides consistent borderBoxSize access across browsers
         const roBlock = entry?.borderBoxSize?.[0]?.blockSize ?? 0;
         const contentRectH = entry?.contentRect?.height ?? 0;
         const scrollH = el?.scrollHeight ?? 0;
         const offsetH = el?.offsetHeight ?? 0;
         const newSize = Math.max(scrollH, roBlock, contentRectH, offsetH);
         setSize(newSize);
+        // Update resize source if provided
         if (resizeSourceRef) {
             resizeSourceRef.current = 'element';
         }
-    }, [resizeSourceRef]);
-    useLayoutEffect(() => {
+    }, [
+        resizeSourceRef
+    ]);
+    useLayoutEffect(()=>{
         if (!enabled) {
             return;
         }
         let resizeObserver = null;
         let rafId = 0;
         let initialMeasurementRafId = 0;
-        const startObserving = () => {
+        const startObserving = ()=>{
             const el = ref.current;
-            if (!el || !el.isConnected)
-                return;
+            if (!el || !el.isConnected) return;
+            // @juggle/resize-observer provides cross-browser compatibility and polyfills
             resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(el, observerOptions);
-            initialMeasurementRafId = requestAnimationFrame(() => {
+            // Seed an initial measurement in case RO hasn't fired yet
+            initialMeasurementRafId = requestAnimationFrame(()=>{
                 const initial = Math.max(el.scrollHeight, el.offsetHeight, el.getBoundingClientRect().height);
                 if (initial > 0) {
                     setSize(initial);
                 }
+            // else keep waiting for RO to update on next ticks
             });
         };
-        const waitForElement = () => {
+        // If the element is not yet mounted (e.g. Modal shouldRender=false), keep
+        // polling via rAF until it's available, then attach the observer.
+        const waitForElement = ()=>{
             if (ref.current) {
                 startObserving();
-            }
-            else {
+            } else {
                 rafId = requestAnimationFrame(waitForElement);
             }
         };
         if (ref.current) {
             startObserving();
-        }
-        else {
+        } else {
             rafId = requestAnimationFrame(waitForElement);
         }
-        return () => {
-            if (rafId)
-                cancelAnimationFrame(rafId);
+        return ()=>{
+            if (rafId) cancelAnimationFrame(rafId);
             if (initialMeasurementRafId) {
                 cancelAnimationFrame(initialMeasurementRafId);
             }
@@ -114,95 +156,138 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
                 resizeObserver.disconnect();
             }
         };
-    }, [ref, handleResize, enabled, requestAnimationFrame, cancelAnimationFrame]);
+    }, [
+        ref,
+        handleResize,
+        enabled,
+        requestAnimationFrame,
+        cancelAnimationFrame
+    ]);
     return enabled ? size : 0;
 }
 
+// Hook for measuring drawer dimensions
+
+
+
+
+// Hook for tracking viewport height
 function useMaxHeight(registerReady) {
     const { externalWindow, globalThis: contextGlobal } = useWindowContext();
     const win = externalWindow ?? contextGlobal;
     const { requestAnimationFrame, cancelAnimationFrame } = useAnimationFrame();
-    const setReady = useMemo(() => {
+    const setReady = useMemo(()=>{
         return registerReady ? registerReady('maxHeight') : undefined;
-    }, [registerReady]);
-    const [maxHeight, setMaxHeight] = useState(() => win.innerHeight ?? 0);
+    }, [
+        registerReady
+    ]);
+    const [maxHeight, setMaxHeight] = useState(()=>win.innerHeight ?? 0);
     const raf = useRef(0);
     const maxReadyCalledRef = useRef(false);
-    useLayoutEffect(() => {
+    // Reset the ready flag when setReady changes (drawer reset)
+    useLayoutEffect(()=>{
         maxReadyCalledRef.current = false;
-    }, [setReady]);
-    useLayoutEffect(() => {
-        const handleResize = () => {
+    }, [
+        setReady
+    ]);
+    useLayoutEffect(()=>{
+        const handleResize = ()=>{
             if (raf.current) {
+                // bail to throttle the amount of resize changes
                 return;
             }
-            raf.current = requestAnimationFrame(() => {
+            // throttle state changes using rAF from target window
+            raf.current = requestAnimationFrame(()=>{
+                // Check if cleanup already ran (raf.current would be 0)
                 if (raf.current !== 0) {
-                    setMaxHeight(win.innerHeight);
+                    setMaxHeight(win.innerHeight); // Safe to update
                     raf.current = 0;
                 }
             });
         };
         win.addEventListener('resize', handleResize);
         setMaxHeight(win.innerHeight);
+        // Call setReady exactly once for window height readiness
         if (setReady && !maxReadyCalledRef.current) {
             maxReadyCalledRef.current = true;
             setReady();
         }
-        return () => {
+        return ()=>{
             win.removeEventListener('resize', handleResize);
             cancelAnimationFrame(raf.current);
         };
-    }, [setReady, win, requestAnimationFrame, cancelAnimationFrame]);
+    }, [
+        setReady,
+        win,
+        requestAnimationFrame,
+        cancelAnimationFrame
+    ]);
     return maxHeight;
 }
-function usePreservedHeight(currentHeight) {
+/**
+ * Custom hook to preserve last non-zero height values
+ */ function usePreservedHeight(currentHeight) {
     const lastHeightRef = useRef(0);
-    useLayoutEffect(() => {
+    useLayoutEffect(()=>{
         if (currentHeight > 0) {
             lastHeightRef.current = currentHeight;
         }
-    }, [currentHeight]);
+    }, [
+        currentHeight
+    ]);
     return currentHeight > 0 ? currentHeight : lastHeightRef.current;
 }
-function useDimensions({ contentRef, footerEnabled, footerRef, headerEnabled, headerRef, registerReady, resizeSourceRef, open, }) {
-    const setReady = useMemo(() => registerReady('contentHeight'), [registerReady]);
+function useDimensions({ contentRef, footerEnabled, footerRef, headerEnabled, headerRef, registerReady, resizeSourceRef, open }) {
+    const setReady = useMemo(()=>registerReady('contentHeight'), [
+        registerReady
+    ]);
+    // Do not re-register contentHeight readiness on disconnect; register once above and let
+    // the ResizeObserver drive readiness when size > 0. This avoids readiness loops.
+    // (Intentionally removed disconnection re-register logic)
     const maxHeight = useMaxHeight(registerReady);
+    // Measure all elements - only when drawer is open
     const headerHeight = useElementSizeObserver(headerRef, {
         enabled: open && headerEnabled,
-        resizeSourceRef,
+        resizeSourceRef
     });
     const contentHeight = useElementSizeObserver(contentRef, {
         enabled: open,
-        resizeSourceRef,
+        resizeSourceRef
     });
     const footerHeight = useElementSizeObserver(footerRef, {
         enabled: open && footerEnabled,
-        resizeSourceRef,
+        resizeSourceRef
     });
+    // Preserve last non-zero heights to avoid collapsing to 0 when the
+    // modal/portal temporarily unmounts or RO reports 0 during transitions
     const effectiveContentHeight = usePreservedHeight(contentHeight);
     const effectiveHeaderHeight = usePreservedHeight(headerHeight);
     const effectiveFooterHeight = usePreservedHeight(footerHeight);
-    useLayoutEffect(() => {
-        if (!setReady)
-            return;
+    // When content is measured (>0), mark ready for contentHeight
+    useLayoutEffect(()=>{
+        if (!setReady) return;
         const ok = contentHeight > 0;
         if (ok) {
             setReady();
         }
-    }, [contentHeight, contentRef, setReady]);
+    }, [
+        contentHeight,
+        contentRef,
+        setReady
+    ]);
+    // Calculate available space for content, ensuring it's never negative
     const availableContentSpace = Math.max(0, maxHeight - effectiveHeaderHeight - effectiveFooterHeight);
-    const minHeight = Math.min(availableContentSpace, effectiveContentHeight) +
-        effectiveHeaderHeight +
-        effectiveFooterHeight;
+    const minHeight = Math.min(availableContentSpace, effectiveContentHeight) + effectiveHeaderHeight + effectiveFooterHeight;
     return {
         maxHeight,
         minHeight,
         headerHeight,
-        footerHeight: effectiveFooterHeight,
+        footerHeight: effectiveFooterHeight
     };
 }
 
+// Hook for calculating snap points
+
 function roundAndCheckForNaN(value) {
     const rounded = Math.round(value);
     if (Number.isNaN(rounded)) {
@@ -210,12 +295,15 @@ function roundAndCheckForNaN(value) {
     }
     return rounded;
 }
+// Clamp function with clear NaN handling
 function clamp(number, lower, upper) {
     number = +number;
     lower = +lower;
     upper = +upper;
+    // Handle NaN values with sensible defaults
     const safeLower = Number.isNaN(lower) ? 0 : lower;
     const safeUpper = Number.isNaN(upper) ? Number.POSITIVE_INFINITY : upper;
+    // Ensure lower <= upper to avoid invalid ranges
     const finalLower = Math.min(safeLower, safeUpper);
     const finalUpper = Math.max(safeLower, safeUpper);
     if (Number.isNaN(number)) {
@@ -224,20 +312,20 @@ function clamp(number, lower, upper) {
     return Math.min(Math.max(number, finalLower), finalUpper);
 }
 function processSnapPoints(snapPoints, maxHeight) {
+    // Validate maxHeight input
     if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
         throw new Error(`Invalid maxHeight: ${maxHeight}. Must be a positive finite number.`);
     }
-    const safeSnaps = []
-        .concat(snapPoints)
-        .map(roundAndCheckForNaN);
-    const snapPointsDedupedSet = safeSnaps.reduce((acc, snapPoint) => {
+    // Match React Spring Bottom Sheet implementation exactly
+    const safeSnaps = [].concat(snapPoints).map(roundAndCheckForNaN);
+    const snapPointsDedupedSet = safeSnaps.reduce((acc, snapPoint)=>{
         acc.add(clamp(snapPoint, 0, maxHeight));
         return acc;
     }, new Set());
     const processedPoints = Array.from(snapPointsDedupedSet);
+    // Handle empty snap points array
     if (processedPoints.length === 0) {
-        throw new Error('No valid snap points available. The snapPoints function must return at least one valid number.\n' +
-            'Example: snapPoints: ({ minHeight, maxHeight }) => [minHeight, maxHeight]');
+        throw new Error('No valid snap points available. The snapPoints function must return at least one valid number.\n' + 'Example: snapPoints: ({ minHeight, maxHeight }) => [minHeight, maxHeight]');
     }
     const minSnap = Math.min(...processedPoints);
     if (Number.isNaN(minSnap)) {
@@ -250,10 +338,10 @@ function processSnapPoints(snapPoints, maxHeight) {
     return {
         snapPoints: processedPoints,
         minSnap,
-        maxSnap,
+        maxSnap
     };
 }
-function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, headerEnabled, headerRef, heightRef, lastSnapRef, ready, registerReady, resizeSourceRef, open, }) {
+function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, headerEnabled, headerRef, heightRef, lastSnapRef, ready, registerReady, resizeSourceRef, open }) {
     const { maxHeight, minHeight, headerHeight, footerHeight } = useDimensions({
         contentRef,
         footerEnabled,
@@ -262,18 +350,19 @@ function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, he
         headerRef,
         registerReady,
         resizeSourceRef,
-        open,
+        open
     });
-    const { snapPoints, minSnap, maxSnap } = processSnapPoints(ready
-        ? getSnapPoints({
-            height: heightRef.current ?? 0,
-            footerHeight,
-            headerHeight,
-            minHeight,
-            maxHeight,
-        })
-        : [0], maxHeight);
+    const { snapPoints, minSnap, maxSnap } = processSnapPoints(ready ? getSnapPoints({
+        height: heightRef.current ?? 0,
+        footerHeight,
+        headerHeight,
+        minHeight,
+        maxHeight
+    }) : [
+        0
+    ], maxHeight);
     function findSnap(numberOrCallback) {
+        // Defensive check: should never happen due to processSnapPoints validation
         if (snapPoints.length === 0) {
             throw new Error('Cannot find snap point: no snap points available');
         }
@@ -287,76 +376,106 @@ function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, he
                     minHeight,
                     maxHeight,
                     snapPoints,
-                    lastSnap: lastSnapRef.current,
+                    lastSnap: lastSnapRef.current
                 });
-            }
-            catch (error) {
+            } catch (error) {
+                // If callback throws, fall back to current position or minSnap
                 unsafeSearch = heightRef.current ?? minSnap;
             }
-        }
-        else {
+        } else {
             unsafeSearch = numberOrCallback;
         }
         let querySnap;
         try {
             querySnap = roundAndCheckForNaN(unsafeSearch);
-        }
-        catch (error) {
+        } catch (error) {
+            // If number is invalid (NaN, etc), fall back to current position or minSnap
             querySnap = heightRef.current ?? minSnap;
         }
-        const isValidIndex = querySnap >= 0 &&
-            querySnap < snapPoints.length &&
-            Number.isInteger(querySnap);
+        // Support index-based selection: if querySnap is a small integer and within bounds, treat as index
+        const isValidIndex = querySnap >= 0 && querySnap < snapPoints.length && Number.isInteger(querySnap);
         if (isValidIndex) {
             return snapPoints[querySnap];
         }
-        return snapPoints.reduce((prev, curr) => Math.abs(curr - querySnap) < Math.abs(prev - querySnap) ? curr : prev, minSnap);
+        // Otherwise, find closest snap point by value
+        return snapPoints.reduce((prev, curr)=>Math.abs(curr - querySnap) < Math.abs(prev - querySnap) ? curr : prev, minSnap);
     }
-    return { minSnap, maxSnap, findSnap, maxHeight, snapPoints };
+    return {
+        minSnap,
+        maxSnap,
+        findSnap,
+        maxHeight,
+        snapPoints
+    };
 }
 
+//implementation for Drawer gestures
+
+
+
+
+
+
+// Standardized spring configuration
 const SPRING_CONFIG = {
     type: 'spring',
     stiffness: 600,
     damping: 50,
-    mass: 1,
+    mass: 1
 };
+// Rubberband effect constants
 const RUBBERBAND_RESISTANCE = 0.8;
 const SINGLE_SNAP_STRETCH_FACTOR = 1.2;
 const MULTI_SNAP_STRETCH_FACTOR = 1.8;
-const DISMISS_THRESHOLD = 50;
-const VELOCITY_THRESHOLD = 0.1;
-const PREDICTION_MULTIPLIER = 2;
-const DISMISS_POSITION_FACTOR = 2;
+// Gesture behavior constants
+const DISMISS_THRESHOLD = 50; // Minimum movement in pixels to trigger dismiss
+const VELOCITY_THRESHOLD = 0.1; // Minimum velocity to apply to spring animation
+const PREDICTION_MULTIPLIER = 2; // Multiplier for velocity-based position prediction
+const DISMISS_POSITION_FACTOR = 2; // Divisor for calculating dismiss threshold (minSnap / 2)
+// Default functions
 function defaultSnapPoints({ minHeight }) {
-    return [minHeight];
+    // When no snap points are specified, just use content height
+    // This means the drawer shows content at natural size and can only dismiss
+    return [
+        minHeight
+    ];
 }
-function defaultInitialSnap({ snapPoints, lastSnap: _lastSnap, }) {
+function defaultInitialSnap({ snapPoints, lastSnap: _lastSnap }) {
+    // Default behavior: choose the smallest snap point (usually content height)
+    // Users can override this in their initialSnap function if they want lastSnap behavior
     return Math.min(...snapPoints);
 }
 function useDrawerGestures(options) {
-    const { anchor, open, onClose, snapPoints: getSnapPoints = defaultSnapPoints, initialSnap: getInitialSnap = defaultInitialSnap, contentRef, headerRef, footerRef, headerEnabled, footerEnabled, } = options;
+    const { anchor, open, onClose, snapPoints: getSnapPoints = defaultSnapPoints, initialSnap: getInitialSnap = defaultInitialSnap, contentRef, headerRef, footerRef, headerEnabled, footerEnabled } = options;
     const { externalWindow } = useWindowContext();
     const gestureWindow = externalWindow;
     const { ready, registerReady } = useReady();
+    // Height tracking refs
     const heightRef = useRef(0);
     const lastSnapRef = useRef(null);
     const resizeSourceRef = useRef('window');
+    // Animation cleanup ref to prevent memory leaks
     const animationRef = useRef(null);
-    useLayoutEffect(() => {
-        return () => {
+    // Cleanup animations on unmount to prevent memory leaks
+    useLayoutEffect(()=>{
+        return ()=>{
             animationRef.current?.stop();
         };
     }, []);
+    // Motion values
     const heightMotionValue = useMotionValue(0);
-    useLayoutEffect(() => {
-        if (open &&
-            ready &&
-            heightRef.current > 0 &&
-            heightMotionValue.get() === 0) {
+    // We animate with spring only on release; during drag we set the value directly for immediate follow
+    // Ensure motion value starts with correct value when drawer opens
+    useLayoutEffect(()=>{
+        if (open && ready && heightRef.current > 0 && heightMotionValue.get() === 0) {
             heightMotionValue.set(heightRef.current);
         }
-    }, [open, ready, heightMotionValue]);
+    }, [
+        open,
+        ready,
+        heightMotionValue
+    ]);
+    // Snap points calculation
     const { minSnap, maxSnap, findSnap, maxHeight } = useSnapPoints({
         contentRef: contentRef,
         footerEnabled,
@@ -369,33 +488,48 @@ function useDrawerGestures(options) {
         ready,
         registerReady,
         resizeSourceRef,
-        open,
+        open
     });
-    const defaultSnap = useMemo(() => {
-        if (!ready)
-            return 0;
+    // Calculate initial snap
+    const defaultSnap = useMemo(()=>{
+        if (!ready) return 0;
+        // If initial snap is a function, it receives state via findSnap
         return findSnap(getInitialSnap);
-    }, [ready, getInitialSnap, findSnap]);
+    }, [
+        ready,
+        getInitialSnap,
+        findSnap
+    ]);
+    // Only set the initial height once per open cycle when content is present
     const didInitRef = useRef(false);
     const isContentPresent = !!contentRef?.current && contentRef.current.isConnected;
-    useLayoutEffect(() => {
-        if (!open || !ready)
-            return;
-        if (didInitRef.current)
-            return;
+    useLayoutEffect(()=>{
+        if (!open || !ready) return;
+        if (didInitRef.current) return;
+        // Use the calculated defaultSnap (which may or may not include lastSnap based on user's initialSnap function)
         const safeInitial = defaultSnap > 0 ? defaultSnap : minSnap;
-        if (!isContentPresent && safeInitial <= 0)
-            return;
+        // If we don't have content present and no valid fallback height, wait
+        if (!isContentPresent && safeInitial <= 0) return;
+        // 1. Set to 0 immediately
         heightMotionValue.set(0);
+        // 2. Update heightRef
         heightRef.current = safeInitial;
+        // 3. Animate to target position
         animationRef.current = animate(heightMotionValue, safeInitial, SPRING_CONFIG);
         didInitRef.current = true;
-    }, [open, ready, isContentPresent, defaultSnap, minSnap, heightMotionValue]);
-    useLayoutEffect(() => {
-        if (!open || !ready || !isContentPresent)
-            return;
-        if (!didInitRef.current)
-            return;
+    }, [
+        open,
+        ready,
+        isContentPresent,
+        defaultSnap,
+        minSnap,
+        heightMotionValue
+    ]);
+    // Content resize:
+    useLayoutEffect(()=>{
+        if (!open || !ready || !isContentPresent) return;
+        if (!didInitRef.current) return; // Only after initial setup is complete
+        // Find closest snap point to current height (preserves user positioning)
         const currentHeight = heightRef.current ?? 0;
         if (currentHeight > 0) {
             const closestSnap = findSnap(currentHeight);
@@ -403,66 +537,82 @@ function useDrawerGestures(options) {
             heightRef.current = closestSnap;
             lastSnapRef.current = closestSnap;
         }
-    }, [minSnap, maxSnap]);
-    useLayoutEffect(() => {
+    }, [
+        minSnap,
+        maxSnap
+    ]); // Triggers when snap points change (content resize)
+    // Reset init flag when closing so next open can initialize again
+    useLayoutEffect(()=>{
         if (!open) {
             didInitRef.current = false;
+            // Preserve the current height as lastSnap for next open
             if (heightRef.current > 0) {
                 lastSnapRef.current = heightRef.current;
             }
+            // Animate motion value to 0 on close
             animationRef.current = animate(heightMotionValue, 0, SPRING_CONFIG);
         }
-    }, [open, heightMotionValue]);
-    const handleDrag = useEventCallback(({ args: [{ closeOnTap = false } = {}] = [], cancel, down, last, memo = heightMotionValue.get(), movement: [_mx, _my], tap, velocity: [_, velocityY], event, }) => {
+    }, [
+        open,
+        heightMotionValue
+    ]);
+    // Drag handler
+    const handleDrag = useEventCallback(({ args: [{ closeOnTap = false } = {}] = [], cancel, down, last, memo = heightMotionValue.get(), movement: [_mx, _my], tap, velocity: [_, velocityY], event })=>{
         if (!ready) {
             cancel();
             return memo;
         }
+        // Handle close on tap (backdrop tap)
         if (closeOnTap && tap) {
             cancel();
+            // Use timeout to avoid tap events on backdrop triggering click events underneath
             onClose(event, 'gestureSwipe');
             return memo;
         }
+        // Filter out taps
         if (tap) {
             return memo;
         }
-        const getDismissInfo = () => {
-            switch (anchor) {
+        // dismissal logic for all anchors
+        const getDismissInfo = ()=>{
+            switch(anchor){
                 case 'bottom':
                     return {
                         isDismissDirection: _my > 0,
                         movement: _my,
-                        threshold: DISMISS_THRESHOLD,
+                        threshold: DISMISS_THRESHOLD
                     };
                 case 'top':
                     return {
                         isDismissDirection: _my < 0,
                         movement: Math.abs(_my),
-                        threshold: DISMISS_THRESHOLD,
+                        threshold: DISMISS_THRESHOLD
                     };
                 case 'left':
                     return {
                         isDismissDirection: _mx < 0,
                         movement: Math.abs(_mx),
-                        threshold: DISMISS_THRESHOLD,
+                        threshold: DISMISS_THRESHOLD
                     };
                 case 'right':
                     return {
                         isDismissDirection: _mx > 0,
                         movement: Math.abs(_mx),
-                        threshold: DISMISS_THRESHOLD,
+                        threshold: DISMISS_THRESHOLD
                     };
                 default:
                     return {
                         isDismissDirection: false,
                         movement: 0,
-                        threshold: DISMISS_THRESHOLD,
+                        threshold: DISMISS_THRESHOLD
                     };
             }
         };
         const { isDismissDirection, movement, threshold } = getDismissInfo();
+        // For horizontal drawers, only handle dismiss (no snap points)
         const isVertical = anchor === 'top' || anchor === 'bottom';
         if (!isVertical) {
+            // Check for dismiss condition (horizontal drawers only)
             if (!down && isDismissDirection && movement > threshold) {
                 cancel();
                 onClose(event, 'gestureSwipe');
@@ -474,6 +624,7 @@ function useDrawerGestures(options) {
         const rawY = memo + my;
         const predictedDistance = my * velocityY;
         const predictedY = Math.max(minSnap, Math.min(maxHeight, rawY + predictedDistance * PREDICTION_MULTIPLIER));
+        // Check for vertical dismissal - only when trying to go below minimum snap point
         if (!down && isDismissDirection) {
             const dismissThreshold = minSnap / DISMISS_POSITION_FACTOR;
             const currentPosition = rawY + predictedDistance;
@@ -486,88 +637,145 @@ function useDrawerGestures(options) {
         let newY;
         if (down) {
             if (minSnap === maxSnap) {
+                // Special case when min and max snap are the same (only one snap point)
                 if (rawY < minSnap) {
-                    newY = rawY;
-                }
-                else {
+                    newY = rawY; // Allow smooth dragging down (toward dismiss) with no resistance
+                } else {
+                    // Strong resistance when dragging up beyond content
                     newY = rubberbandIfOutOfBounds(rawY, minSnap, maxSnap * SINGLE_SNAP_STRETCH_FACTOR, RUBBERBAND_RESISTANCE);
                 }
-            }
-            else {
+            } else {
+                // Multiple snap points: allow stretching beyond maxSnap for rubberband effect
                 newY = rubberbandIfOutOfBounds(rawY, 0, maxSnap * MULTI_SNAP_STRETCH_FACTOR, RUBBERBAND_RESISTANCE);
             }
-        }
-        else {
+        } else {
+            // On release: use predicted position
             newY = predictedY;
         }
         if (last) {
+            // End of gesture: find closest snap point and animate to it
             const targetSnap = findSnap(newY);
+            // Animate to target snap point using spring
             animationRef.current = animate(heightMotionValue, targetSnap, {
                 ...SPRING_CONFIG,
-                velocity: Math.abs(velocityY) > VELOCITY_THRESHOLD ? velocityY : 0,
+                velocity: Math.abs(velocityY) > VELOCITY_THRESHOLD ? velocityY : 0
             });
             heightRef.current = targetSnap;
             lastSnapRef.current = targetSnap;
             return memo;
         }
+        // During drag: directly set height to follow finger with rubberband
         heightMotionValue.set(newY);
         return memo;
     });
+    // Gesture binding
     const isVertical = anchor === 'top' || anchor === 'bottom';
-    const gestureConfig = useMemo(() => ({
-        filterTaps: true,
-        ...(gestureWindow && {
-            window: gestureWindow,
-        }),
-    }), [gestureWindow]);
+    const gestureConfig = useMemo(()=>({
+            filterTaps: true,
+            ...gestureWindow && {
+                window: gestureWindow
+            }
+        }), [
+        gestureWindow
+    ]);
     const bind = useDrag(handleDrag, gestureConfig);
-    const heightStyle = useTransform(heightMotionValue, (y) => {
+    //  animate height for vertical drawers only
+    const heightStyle = useTransform(heightMotionValue, (y)=>{
+        // Ensure drawer never exceeds viewport bounds
         const clamped = Math.max(0, Math.min(y, maxHeight));
         return `${Math.round(clamped)}px`;
     });
-    const snapTo = useCallback((numberOrCallback) => {
-        if (!ready)
-            return;
+    // Imperative snapTo function
+    const snapTo = useCallback((numberOrCallback)=>{
+        if (!ready) return;
         const targetSnap = findSnap(numberOrCallback);
+        // Animate to target snap point
         animationRef.current = animate(heightMotionValue, targetSnap, SPRING_CONFIG);
+        // Update refs
         heightRef.current = targetSnap;
         lastSnapRef.current = targetSnap;
-    }, [ready, findSnap, heightMotionValue, heightRef, lastSnapRef]);
+    }, [
+        ready,
+        findSnap,
+        heightMotionValue,
+        heightRef,
+        lastSnapRef
+    ]);
     return {
         bind,
         motionProps: {
-            style: ready && isVertical
-                ? {
-                    height: heightStyle,
-                }
-                : {},
+            style: ready && isVertical ? {
+                height: heightStyle
+            } : {}
         },
         isGestureEnabled: ready,
         contentRef,
         headerRef,
         footerRef,
-        snapTo,
+        snapTo
     };
 }
 
-const SwipeableDrawer = forwardRef((inProps, ref) => {
+
+
+
+
+
+
+
+
+
+/**
+ * SwipeableDrawer Component - Gesture-enhanced drawer with swipe support
+ *
+ * Wraps the base Drawer component and adds touch/mouse gesture support for resizing and closing.
+ * Perfect for mobile bottom sheets and interactive panels.
+ *
+ * @example
+ * ```tsx
+ * bottom sheet with gestures
+ * <SwipeableDrawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="bottom"
+ *   gestureControlsProps={{
+ *     snapPoints: ({ minHeight, maxHeight }) => [
+ *       minHeight,        // Content height
+ *       maxHeight * 0.6,  // 60% of screen
+ *       maxHeight         // Full screen
+ *     ],
+ *     initialSnap: 0      // Start at content height
+ *   }}
+ * >
+ *   <Content />
+ * </SwipeableDrawer>
+ * ```
+ */ const SwipeableDrawer_SwipeableDrawer = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'SwipeableDrawer',
+        name: 'SwipeableDrawer'
     });
     const { anchor = 'bottom', bodyProps, classes, className, children, header, footer, open, onClose, variant = 'temporary', blocking = true, gestureControlsProps, ...rest } = props;
+    // Refs for gesture system
     const contentRef = useRef(null);
     const headerRef = useRef(null);
     const footerRef = useRef(null);
     const isVertical = anchor === 'top' || anchor === 'bottom';
-    const headerEnabled = useMemo(() => !!header || isVertical, [header, isVertical]);
-    const footerEnabled = useMemo(() => !!footer, [footer]);
+    // Stabilize header/footer enabled state to prevent measurement fluctuations
+    // Header is enabled if there's a header prop OR if there's a drag handle (for vertical drawers)
+    const headerEnabled = useMemo(()=>!!header || isVertical, [
+        header,
+        isVertical
+    ]);
+    const footerEnabled = useMemo(()=>!!footer, [
+        footer
+    ]);
     const cls = useClasses('swipeable-drawer', classes, className);
     const { action, ...gestureProps } = gestureControlsProps || {};
     const gestureControls = useDrawerGestures({
         anchor,
         open,
-        onClose: (event, reason) => {
+        onClose: (event, reason)=>{
             onClose?.(event, reason);
         },
         contentRef,
@@ -575,33 +783,70 @@ const SwipeableDrawer = forwardRef((inProps, ref) => {
         footerRef,
         headerEnabled,
         footerEnabled,
-        ...gestureProps,
+        ...gestureProps
     });
-    useImperativeHandle(action, () => ({
-        snapTo: gestureControls.snapTo,
-    }), [gestureControls.snapTo]);
+    // Expose snapTo function through action ref
+    useImperativeHandle(action, ()=>({
+            snapTo: gestureControls.snapTo
+        }), [
+        gestureControls.snapTo
+    ]);
     const gestureBindProps = gestureControls.bind();
+    // Enhanced body props that include gesture motion
     const enhancedBodyProps = {
         ...bodyProps,
-        ...(!isVertical ? gestureBindProps : {}),
+        // Apply gesture bindings for horizontal drawers (left/right)
+        // Vertical drawers (top/bottom) use motion values instead
+        ...!isVertical ? gestureBindProps : {},
         style: {
             ...bodyProps?.style,
-            ...(isVertical && {
-                ...gestureControls.motionProps.style,
-            }),
-        },
+            // Apply motion styles for vertical drawers (top/bottom)
+            ...isVertical && {
+                ...gestureControls.motionProps.style
+            }
+        }
     };
+    // Consolidate measurement refs (refs only)
     const measurementRefs = {
         header: headerRef,
         footer: footerRef,
-        content: contentRef,
+        content: contentRef
     };
+    // Gesture props for header
     const headerGestureProps = {
         className: clsx(isVertical && cls('header-drag')),
-        ...(isVertical && gestureBindProps),
+        ...isVertical && gestureBindProps
     };
-    return (jsx(Drawer, { ref: ref, anchor: anchor, open: open, onClose: onClose, variant: variant, blocking: blocking, bodyProps: enhancedBodyProps, classes: classes, className: className, measurementRefs: measurementRefs, headerProps: headerGestureProps, header: isVertical ? (jsxs(Fragment, { children: [jsx(DragHandle, { anchor: anchor }), header] })) : (header), footer: footer, ...rest, children: children }));
+    return /*#__PURE__*/ jsx(Drawer_Drawer, {
+        ref: ref,
+        anchor: anchor,
+        open: open,
+        onClose: onClose,
+        variant: variant,
+        blocking: blocking,
+        bodyProps: enhancedBodyProps,
+        classes: classes,
+        className: className,
+        measurementRefs: measurementRefs,
+        headerProps: headerGestureProps,
+        header: isVertical ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(DragHandle_DragHandle, {
+                    anchor: anchor
+                }),
+                header
+            ]
+        }) : header,
+        footer: footer,
+        ...rest,
+        children: children
+    });
 });
-SwipeableDrawer.displayName = 'SuiSwipeableDrawer';
+SwipeableDrawer_SwipeableDrawer.displayName = 'SuiSwipeableDrawer';
+
+
+
+
+
 
-export { SwipeableDrawer, SwipeableDrawer$1 as swipeableDrawerStyles };
+export { SwipeableDrawer as swipeableDrawerStyles, SwipeableDrawer_SwipeableDrawer as SwipeableDrawer };