@samline/drawer 2.0.4 → 2.0.6

package/dist/react/index.mjs

@@ -10,7 +10,7 @@ function __insertCSS(code) {
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as React from 'react';
-import React__default, { useLayoutEffect, useEffect, useMemo } from 'react';
+import React__default, { useRef, useLayoutEffect, useEffect, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 
 const DEFAULT_OPTIONS = {
@@ -193,30 +193,38 @@ const nonTextInputTypes = new Set([
     'submit',
     'reset'
 ]);
-// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
-let preventScrollCount = 0;
-let restore;
+const activePreventScrollLocks = new Set();
+let activePreventScrollRestore = null;
+function acquirePreventScrollLock(lockId) {
+    activePreventScrollLocks.add(lockId);
+    if (activePreventScrollLocks.size === 1 && isIOS()) {
+        activePreventScrollRestore = preventScrollMobileSafari();
+    }
+}
+function releasePreventScrollLock(lockId) {
+    activePreventScrollLocks.delete(lockId);
+    if (activePreventScrollLocks.size === 0) {
+        activePreventScrollRestore == null ? void 0 : activePreventScrollRestore();
+        activePreventScrollRestore = null;
+    }
+}
 /**
  * Prevents scrolling on the document body on mount, and
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */ function usePreventScroll(options = {}) {
     let { isDisabled } = options;
+    const lockIdRef = useRef();
+    if (!lockIdRef.current) {
+        lockIdRef.current = Symbol('drawer-prevent-scroll-lock');
+    }
     useIsomorphicLayoutEffect(()=>{
         if (isDisabled) {
             return;
         }
-        preventScrollCount++;
-        if (preventScrollCount === 1) {
-            if (isIOS()) {
-                restore = preventScrollMobileSafari();
-            }
-        }
+        acquirePreventScrollLock(lockIdRef.current);
         return ()=>{
-            preventScrollCount--;
-            if (preventScrollCount === 0) {
-                restore == null ? void 0 : restore();
-            }
+            releasePreventScrollLock(lockIdRef.current);
         };
     }, [
         isDisabled
@@ -951,12 +959,23 @@ function useScaleBackground() {
     const { direction, isOpen, shouldScaleBackground, setBackgroundColorOnScale, noBodyStyles } = useDrawerContext();
     const timeoutIdRef = React__default.useRef(null);
     const initialBackgroundColor = useMemo(()=>document.body.style.backgroundColor, []);
+    React__default.useEffect(()=>{
+        return ()=>{
+            if (timeoutIdRef.current !== null) {
+                window.clearTimeout(timeoutIdRef.current);
+                timeoutIdRef.current = null;
+            }
+        };
+    }, []);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
     }
     React__default.useEffect(()=>{
         if (isOpen && shouldScaleBackground) {
-            if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
+            if (timeoutIdRef.current !== null) {
+                clearTimeout(timeoutIdRef.current);
+                timeoutIdRef.current = null;
+            }
             const wrapper = document.querySelector('[data-drawer-wrapper]');
             if (!wrapper) return;
             chain(setBackgroundColorOnScale && !noBodyStyles ? assignStyle(document.body, {
@@ -984,6 +1003,7 @@ function useScaleBackground() {
                     } else {
                         document.body.style.removeProperty('background');
                     }
+                    timeoutIdRef.current = null;
                 }, TRANSITIONS.DURATION * 1000);
             };
         }
@@ -995,6 +1015,14 @@ function useScaleBackground() {
 }
 
 let previousBodyPosition = null;
+const activeBodyPositionLocks = new Set();
+let bodyPositionTimeoutId = null;
+function clearBodyPositionTimeout() {
+    if (bodyPositionTimeoutId !== null) {
+        window.clearTimeout(bodyPositionTimeoutId);
+        bodyPositionTimeoutId = null;
+    }
+}
 /**
  * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
  * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
@@ -1002,9 +1030,18 @@ let previousBodyPosition = null;
  */ function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles }) {
     const [activeUrl, setActiveUrl] = React__default.useState(()=>typeof window !== 'undefined' ? window.location.href : '');
     const scrollPos = React__default.useRef(0);
+    const lockIdRef = React__default.useRef();
+    if (!lockIdRef.current) {
+        lockIdRef.current = Symbol('drawer-body-position-lock');
+    }
     const setPositionFixed = React__default.useCallback(()=>{
         // All browsers on iOS will return true here.
         if (!isSafari()) return;
+        const lockId = lockIdRef.current;
+        if (activeBodyPositionLocks.has(lockId)) {
+            return;
+        }
+        activeBodyPositionLocks.add(lockId);
         // If previousBodyPosition is already set, don't set it again.
         if (previousBodyPosition === null && isOpen && !noBodyStyles) {
             previousBodyPosition = {
@@ -1023,7 +1060,8 @@ let previousBodyPosition = null;
                 right: '0px',
                 height: 'auto'
             });
-            window.setTimeout(()=>window.requestAnimationFrame(()=>{
+            clearBodyPositionTimeout();
+            bodyPositionTimeoutId = window.setTimeout(()=>window.requestAnimationFrame(()=>{
                     // Attempt to check if the bottom bar appeared due to the position change
                     const bottomBarHeight = innerHeight - window.innerHeight;
                     if (bottomBarHeight && scrollPos.current >= innerHeight) {
@@ -1033,12 +1071,19 @@ let previousBodyPosition = null;
                 }), 300);
         }
     }, [
-        isOpen
+        isOpen,
+        noBodyStyles
     ]);
     const restorePositionSetting = React__default.useCallback(()=>{
         // All browsers on iOS will return true here.
         if (!isSafari()) return;
+        const lockId = lockIdRef.current;
+        activeBodyPositionLocks.delete(lockId);
+        if (activeBodyPositionLocks.size > 0) {
+            return;
+        }
         if (previousBodyPosition !== null && !noBodyStyles) {
+            clearBodyPositionTimeout();
             // Convert the position from "px" to Int
             const y = -parseInt(document.body.style.top, 10);
             const x = -parseInt(document.body.style.left, 10);
@@ -1054,7 +1099,9 @@ let previousBodyPosition = null;
             previousBodyPosition = null;
         }
     }, [
-        activeUrl
+        activeUrl,
+        noBodyStyles,
+        setActiveUrl
     ]);
     React__default.useEffect(()=>{
         function onScroll() {
@@ -1404,8 +1451,15 @@ function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeS
     };
 }
 
+const useSafeLayoutEffect$1 = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
 function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = 'bottom', defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false }) {
     var _drawerRef_current, _drawerRef_current1;
+    const animationEndTimeoutRef = React__default.useRef(null);
+    const nonModalPointerEventsRafRef = React__default.useRef(null);
+    const shouldAnimateRafRef = React__default.useRef(null);
+    const snapPointsResetTimeoutRef = React__default.useRef(null);
+    const justReleasedTimeoutRef = React__default.useRef(null);
+    const touchEndHandlerRef = React__default.useRef(null);
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
@@ -1414,13 +1468,20 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             if (!o && !nested) {
                 restorePositionSetting();
             }
-            setTimeout(()=>{
+            if (animationEndTimeoutRef.current !== null) {
+                window.clearTimeout(animationEndTimeoutRef.current);
+            }
+            animationEndTimeoutRef.current = window.setTimeout(()=>{
                 onAnimationEnd == null ? void 0 : onAnimationEnd(o);
             }, TRANSITIONS.DURATION * 1000);
             if (o && !modal) {
                 if (typeof window !== 'undefined') {
-                    window.requestAnimationFrame(()=>{
+                    if (nonModalPointerEventsRafRef.current !== null) {
+                        window.cancelAnimationFrame(nonModalPointerEventsRafRef.current);
+                    }
+                    nonModalPointerEventsRafRef.current = window.requestAnimationFrame(()=>{
                         document.body.style.pointerEvents = 'auto';
+                        nonModalPointerEventsRafRef.current = null;
                     });
                 }
             }
@@ -1498,19 +1559,23 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
-    React__default.useEffect(()=>{
+    useSafeLayoutEffect$1(()=>{
         var _drawerRef_current;
         if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
             return;
         }
         const activeElement = document.activeElement;
-        if (!(activeElement instanceof HTMLElement)) {
+        if (!activeElement || activeElement === document.body) {
             return;
         }
-        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
+        const activeElementNode = activeElement;
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
             return;
         }
-        activeElement.blur();
+        if (typeof activeElementNode.blur !== 'function') {
+            return;
+        }
+        activeElementNode.blur();
     }, [
         autoFocus,
         isOpen,
@@ -1529,7 +1594,15 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         dragStartTime.current = new Date();
         // iOS doesn't trigger mouseUp after scrolling so we need to listen to touched in order to disallow dragging
         if (isIOS()) {
-            window.addEventListener('touchend', ()=>isAllowedToDrag.current = false, {
+            if (touchEndHandlerRef.current) {
+                window.removeEventListener('touchend', touchEndHandlerRef.current);
+            }
+            const handleTouchEnd = ()=>{
+                isAllowedToDrag.current = false;
+                touchEndHandlerRef.current = null;
+            };
+            touchEndHandlerRef.current = handleTouchEnd;
+            window.addEventListener('touchend', handleTouchEnd, {
                 once: true
             });
         }
@@ -1646,9 +1719,15 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         }
     }
     React__default.useEffect(()=>{
-        window.requestAnimationFrame(()=>{
+        shouldAnimateRafRef.current = window.requestAnimationFrame(()=>{
             shouldAnimate.current = true;
         });
+        return ()=>{
+            if (shouldAnimateRafRef.current !== null) {
+                window.cancelAnimationFrame(shouldAnimateRafRef.current);
+                shouldAnimateRafRef.current = null;
+            }
+        };
     }, []);
     React__default.useEffect(()=>{
         var _window_visualViewport;
@@ -1698,10 +1777,14 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         if (!fromWithin) {
             setIsOpen(false);
         }
-        setTimeout(()=>{
+        if (snapPointsResetTimeoutRef.current !== null) {
+            window.clearTimeout(snapPointsResetTimeoutRef.current);
+        }
+        snapPointsResetTimeoutRef.current = window.setTimeout(()=>{
             if (snapPoints) {
                 setActiveSnapPoint(snapPoints[0]);
             }
+            snapPointsResetTimeoutRef.current = null;
         }, TRANSITIONS.DURATION * 1000); // seconds to ms
     }
     function resetDrawer() {
@@ -1775,8 +1858,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         if (releaseResult.shouldPreventFocus) {
             // `justReleased` is needed to prevent the drawer from focusing on an input when the drag ends, as it's not the intent most of the time.
             setJustReleased(true);
-            setTimeout(()=>{
+            if (justReleasedTimeoutRef.current !== null) {
+                window.clearTimeout(justReleasedTimeoutRef.current);
+            }
+            justReleasedTimeoutRef.current = window.setTimeout(()=>{
                 setJustReleased(false);
+                justReleasedTimeoutRef.current = null;
             }, 200);
         }
         if (releaseResult.action === 'close') {
@@ -1853,12 +1940,45 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             });
         }
     }
+    React__default.useEffect(()=>{
+        return ()=>{
+            if (animationEndTimeoutRef.current !== null) {
+                window.clearTimeout(animationEndTimeoutRef.current);
+            }
+            if (nonModalPointerEventsRafRef.current !== null) {
+                window.cancelAnimationFrame(nonModalPointerEventsRafRef.current);
+            }
+            if (snapPointsResetTimeoutRef.current !== null) {
+                window.clearTimeout(snapPointsResetTimeoutRef.current);
+            }
+            if (justReleasedTimeoutRef.current !== null) {
+                window.clearTimeout(justReleasedTimeoutRef.current);
+            }
+            if (nestedOpenChangeTimer.current) {
+                window.clearTimeout(nestedOpenChangeTimer.current);
+            }
+            if (touchEndHandlerRef.current) {
+                window.removeEventListener('touchend', touchEndHandlerRef.current);
+                touchEndHandlerRef.current = null;
+            }
+        };
+    }, []);
     React__default.useEffect(()=>{
         if (!modal) {
             // Need to do this manually unfortunately
-            window.requestAnimationFrame(()=>{
+            if (nonModalPointerEventsRafRef.current !== null) {
+                window.cancelAnimationFrame(nonModalPointerEventsRafRef.current);
+            }
+            nonModalPointerEventsRafRef.current = window.requestAnimationFrame(()=>{
                 document.body.style.pointerEvents = 'auto';
+                nonModalPointerEventsRafRef.current = null;
             });
+            return ()=>{
+                if (nonModalPointerEventsRafRef.current !== null) {
+                    window.cancelAnimationFrame(nonModalPointerEventsRafRef.current);
+                    nonModalPointerEventsRafRef.current = null;
+                }
+            };
         }
     }, [
         modal
@@ -1942,15 +2062,25 @@ const Content = /*#__PURE__*/ React__default.forwardRef(function({ onPointerDown
     const pointerStartRef = React__default.useRef(null);
     const lastKnownPointerEventRef = React__default.useRef(null);
     const wasBeyondThePointRef = React__default.useRef(false);
+    const delayedSnapPointsRafRef = React__default.useRef(null);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     useScaleBackground();
     React__default.useEffect(()=>{
         if (hasSnapPoints) {
-            window.requestAnimationFrame(()=>{
+            delayedSnapPointsRafRef.current = window.requestAnimationFrame(()=>{
                 setDelayedSnapPoints(true);
+                delayedSnapPointsRafRef.current = null;
             });
         }
-    }, []);
+        return ()=>{
+            if (delayedSnapPointsRafRef.current !== null) {
+                window.cancelAnimationFrame(delayedSnapPointsRafRef.current);
+                delayedSnapPointsRafRef.current = null;
+            }
+        };
+    }, [
+        hasSnapPoints
+    ]);
     function handleOnPointerUp(event) {
         pointerStartRef.current = null;
         wasBeyondThePointRef.current = false;
@@ -2051,6 +2181,7 @@ const DOUBLE_TAP_TIMEOUT = 120;
 const Handle = /*#__PURE__*/ React__default.forwardRef(function({ preventCycle = false, children, ...rest }, ref) {
     const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
     const closeTimeoutIdRef = React__default.useRef(null);
+    const cycleTimeoutIdRef = React__default.useRef(null);
     const shouldCancelInteractionRef = React__default.useRef(false);
     function handleStartCycle() {
         // Stop if this is the second click of a double click
@@ -2058,7 +2189,7 @@ const Handle = /*#__PURE__*/ React__default.forwardRef(function({ preventCycle =
             handleCancelInteraction();
             return;
         }
-        window.setTimeout(()=>{
+        cycleTimeoutIdRef.current = window.setTimeout(()=>{
             handleCycleSnapPoints();
         }, DOUBLE_TAP_TIMEOUT);
     }
@@ -2091,9 +2222,19 @@ const Handle = /*#__PURE__*/ React__default.forwardRef(function({ preventCycle =
     function handleCancelInteraction() {
         if (closeTimeoutIdRef.current) {
             window.clearTimeout(closeTimeoutIdRef.current);
+            closeTimeoutIdRef.current = null;
+        }
+        if (cycleTimeoutIdRef.current) {
+            window.clearTimeout(cycleTimeoutIdRef.current);
+            cycleTimeoutIdRef.current = null;
         }
         shouldCancelInteractionRef.current = false;
     }
+    React__default.useEffect(()=>{
+        return ()=>{
+            handleCancelInteraction();
+        };
+    }, []);
     return /*#__PURE__*/ React__default.createElement("div", {
         onClick: handleStartCycle,
         onPointerCancel: handleCancelInteraction,
@@ -2441,6 +2582,7 @@ function openAncestorChain(parentId) {
         openAncestorChain(nextParentId);
     }
     if (!parentRuntime.controller.getSnapshot().state.isOpen) {
+        releaseHiddenFocusBeforeOpen(parentRuntime.options);
         parentRuntime.controller.setOpen(true);
         notifyOpenStateChange(parentRuntime, true);
         renderVanillaDrawer(parentRuntime.id);
@@ -2460,6 +2602,7 @@ function bindTriggerElement(runtime) {
     }
     const triggerElement = runtime.options.triggerElement;
     const handleClick = ()=>{
+        releaseHiddenFocusBeforeOpen(runtime.options);
         runtime.controller.setOpen(true);
         renderVanillaDrawer(runtime.id);
     };
@@ -2495,6 +2638,16 @@ function notifyOpenStateChange(runtime, open) {
 function canUseDOM() {
     return typeof window !== 'undefined' && typeof document !== 'undefined';
 }
+function releaseHiddenFocusBeforeOpen(options) {
+    if (!canUseDOM() || options.modal === false || options.autoFocus) {
+        return;
+    }
+    const activeElement = document.activeElement;
+    if (!activeElement || activeElement === document.body || typeof activeElement.blur !== 'function') {
+        return;
+    }
+    activeElement.blur();
+}
 function getRuntimeDrawerElement(runtime) {
     if (!runtime.element) {
         return null;
@@ -2545,6 +2698,9 @@ function renderVanillaDrawer(id) {
         open: snapshot.state.isOpen,
         onOpenChange: (open)=>{
             const previousOpen = runtime.controller.getSnapshot().state.isOpen;
+            if (open) {
+                releaseHiddenFocusBeforeOpen(runtime.options);
+            }
             runtime.controller.setOpen(open);
             if (previousOpen !== open) {
                 notifyOpenStateChange(runtime, open);
@@ -2597,6 +2753,9 @@ function buildVanillaController(id) {
                     open
                 }).getSnapshot();
             }
+            if (open) {
+                releaseHiddenFocusBeforeOpen(runtime.options);
+            }
             const previousOpen = runtime.controller.getSnapshot().state.isOpen;
             const snapshot = runtime.controller.setOpen(open);
             if (previousOpen !== open) {
@@ -2690,6 +2849,9 @@ function createDrawer(options = {}) {
             notifyOpenStateChange(existing, snapshot.state.isOpen);
         }
     }
+    if (nextOptions.open && !previousOpen) {
+        releaseHiddenFocusBeforeOpen(nextOptions);
+    }
     renderVanillaDrawer(id);
     if (nextOptions.parentId && nextOptions.open) {
         openAncestorChain(nextOptions.parentId);