@samline/drawer 2.0.3 → 2.0.5

package/dist/react/index.js

@@ -215,30 +215,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 = React.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
@@ -973,12 +981,23 @@ function useScaleBackground() {
     const { direction, isOpen, shouldScaleBackground, setBackgroundColorOnScale, noBodyStyles } = useDrawerContext();
     const timeoutIdRef = React__namespace.default.useRef(null);
     const initialBackgroundColor = React.useMemo(()=>document.body.style.backgroundColor, []);
+    React__namespace.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__namespace.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, {
@@ -1006,6 +1025,7 @@ function useScaleBackground() {
                     } else {
                         document.body.style.removeProperty('background');
                     }
+                    timeoutIdRef.current = null;
                 }, TRANSITIONS.DURATION * 1000);
             };
         }
@@ -1017,6 +1037,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.
@@ -1024,9 +1052,18 @@ let previousBodyPosition = null;
  */ function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles }) {
     const [activeUrl, setActiveUrl] = React__namespace.default.useState(()=>typeof window !== 'undefined' ? window.location.href : '');
     const scrollPos = React__namespace.default.useRef(0);
+    const lockIdRef = React__namespace.default.useRef();
+    if (!lockIdRef.current) {
+        lockIdRef.current = Symbol('drawer-body-position-lock');
+    }
     const setPositionFixed = React__namespace.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 = {
@@ -1045,7 +1082,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) {
@@ -1055,12 +1093,19 @@ let previousBodyPosition = null;
                 }), 300);
         }
     }, [
-        isOpen
+        isOpen,
+        noBodyStyles
     ]);
     const restorePositionSetting = React__namespace.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);
@@ -1076,7 +1121,9 @@ let previousBodyPosition = null;
             previousBodyPosition = null;
         }
     }, [
-        activeUrl
+        activeUrl,
+        noBodyStyles,
+        setActiveUrl
     ]);
     React__namespace.default.useEffect(()=>{
         function onScroll() {
@@ -1428,6 +1475,12 @@ function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeS
 
 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__namespace.default.useRef(null);
+    const nonModalPointerEventsRafRef = React__namespace.default.useRef(null);
+    const shouldAnimateRafRef = React__namespace.default.useRef(null);
+    const snapPointsResetTimeoutRef = React__namespace.default.useRef(null);
+    const justReleasedTimeoutRef = React__namespace.default.useRef(null);
+    const touchEndHandlerRef = React__namespace.default.useRef(null);
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
@@ -1436,13 +1489,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;
                     });
                 }
             }
@@ -1551,7 +1611,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
             });
         }
@@ -1668,9 +1736,15 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         }
     }
     React__namespace.default.useEffect(()=>{
-        window.requestAnimationFrame(()=>{
+        shouldAnimateRafRef.current = window.requestAnimationFrame(()=>{
             shouldAnimate.current = true;
         });
+        return ()=>{
+            if (shouldAnimateRafRef.current !== null) {
+                window.cancelAnimationFrame(shouldAnimateRafRef.current);
+                shouldAnimateRafRef.current = null;
+            }
+        };
     }, []);
     React__namespace.default.useEffect(()=>{
         var _window_visualViewport;
@@ -1720,10 +1794,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() {
@@ -1797,8 +1875,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') {
@@ -1875,12 +1957,45 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
             });
         }
     }
+    React__namespace.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__namespace.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
@@ -1964,15 +2079,25 @@ const Content = /*#__PURE__*/ React__namespace.default.forwardRef(function({ onP
     const pointerStartRef = React__namespace.default.useRef(null);
     const lastKnownPointerEventRef = React__namespace.default.useRef(null);
     const wasBeyondThePointRef = React__namespace.default.useRef(false);
+    const delayedSnapPointsRafRef = React__namespace.default.useRef(null);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     useScaleBackground();
     React__namespace.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;
@@ -2073,6 +2198,7 @@ const DOUBLE_TAP_TIMEOUT = 120;
 const Handle = /*#__PURE__*/ React__namespace.default.forwardRef(function({ preventCycle = false, children, ...rest }, ref) {
     const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
     const closeTimeoutIdRef = React__namespace.default.useRef(null);
+    const cycleTimeoutIdRef = React__namespace.default.useRef(null);
     const shouldCancelInteractionRef = React__namespace.default.useRef(false);
     function handleStartCycle() {
         // Stop if this is the second click of a double click
@@ -2080,7 +2206,7 @@ const Handle = /*#__PURE__*/ React__namespace.default.forwardRef(function({ prev
             handleCancelInteraction();
             return;
         }
-        window.setTimeout(()=>{
+        cycleTimeoutIdRef.current = window.setTimeout(()=>{
             handleCycleSnapPoints();
         }, DOUBLE_TAP_TIMEOUT);
     }
@@ -2113,9 +2239,19 @@ const Handle = /*#__PURE__*/ React__namespace.default.forwardRef(function({ prev
     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__namespace.default.useEffect(()=>{
+        return ()=>{
+            handleCancelInteraction();
+        };
+    }, []);
     return /*#__PURE__*/ React__namespace.default.createElement("div", {
         onClick: handleStartCycle,
         onPointerCancel: handleCancelInteraction,
@@ -2254,7 +2390,9 @@ function VanillaNode({ value, dataAttribute }) {
     const ref = React__namespace.default.useRef(null);
     useSafeLayoutEffect(()=>{
         const element = ref.current;
-        if (!element) return;
+        if (!element) {
+            return;
+        }
         element.innerHTML = '';
         if (value instanceof HTMLElement) {
             element.appendChild(value);
@@ -2282,11 +2420,60 @@ function VanillaNode({ value, dataAttribute }) {
         ref: ref
     });
 }
+function readAccessibleTextFromRoot(root, elementId) {
+    var _root_textContent;
+    if (!root || !elementId) {
+        return undefined;
+    }
+    const elements = Array.from(root.querySelectorAll('[id]'));
+    for (const element of elements){
+        if (element instanceof HTMLElement && element.id === elementId) {
+            var _element_textContent;
+            const value = (_element_textContent = element.textContent) == null ? void 0 : _element_textContent.trim();
+            return value ? value : undefined;
+        }
+    }
+    return root.id === elementId ? ((_root_textContent = root.textContent) == null ? void 0 : _root_textContent.trim()) || undefined : undefined;
+}
 function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onReleaseChange }) {
+    var _resolvedContent_proxyTitle;
     const { mountElement: _mountElement, triggerElement: _triggerElement, triggerText, showHandle, handleClassName, ariaLabel, ariaLabelledBy, ariaDescribedBy, title, titleVisuallyHidden, description, descriptionVisuallyHidden, content, overlayClassName, contentClassName, ...drawerOptions } = options;
     const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
     const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
     const shouldRenderVanillaContent = title != null || description != null || content != null;
+    const resolvedContent = React__namespace.default.useMemo(()=>{
+        if (content instanceof HTMLElement) {
+            return {
+                value: content,
+                proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : undefined,
+                proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : undefined
+            };
+        }
+        if (typeof content === 'function') {
+            const result = content();
+            return {
+                value: result,
+                proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : undefined,
+                proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : undefined
+            };
+        }
+        return {
+            value: content,
+            proxyTitle: undefined,
+            proxyDescription: undefined
+        };
+    }, [
+        ariaDescribedBy,
+        ariaLabelledBy,
+        content,
+        description,
+        title
+    ]);
+    const proxyTitle = (_resolvedContent_proxyTitle = resolvedContent.proxyTitle) != null ? _resolvedContent_proxyTitle : title == null ? ariaLabel : undefined;
+    const proxyDescription = resolvedContent.proxyDescription;
+    const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : undefined;
+    const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : undefined;
+    const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : undefined;
     return /*#__PURE__*/ React__namespace.default.createElement(Drawer.Root, rootProps, triggerText ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Trigger, {
         asChild: true
     }, /*#__PURE__*/ React__namespace.default.createElement("button", {
@@ -2296,25 +2483,30 @@ function VanillaDrawerRenderer({ options, open, onOpenChange, onDragChange, onRe
         className: overlayClassName
     }), /*#__PURE__*/ React__namespace.default.createElement(Drawer.Content, {
         className: contentClassName,
-        "aria-label": title == null ? ariaLabel : undefined,
-        "aria-labelledby": title == null ? ariaLabelledBy : undefined,
-        "aria-describedby": description == null ? ariaDescribedBy : undefined
+        "aria-label": contentAriaLabel,
+        "aria-labelledby": contentAriaLabelledBy,
+        "aria-describedby": contentAriaDescribedBy
     }, shouldRenderHandle ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Handle, {
         className: handleClassName
     }) : null, shouldRenderVanillaContent ? /*#__PURE__*/ React__namespace.default.createElement("div", {
         "data-drawer-vanilla-node": ""
-    }, title != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, {
+    }, proxyTitle ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, {
+        style: VISUALLY_HIDDEN_STYLE
+    }, proxyTitle) : null, title != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Title, {
         style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
     }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
         value: title
-    })) : null, description != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, {
+    })) : null, proxyDescription ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, {
+        style: VISUALLY_HIDDEN_STYLE
+    }, proxyDescription) : null, description != null ? /*#__PURE__*/ React__namespace.default.createElement(Drawer.Description, {
         style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : undefined
     }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
         value: description
-    })) : null, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
-        value: content,
-        dataAttribute: "data-drawer-vanilla-body"
-    })) : null)));
+    })) : null, /*#__PURE__*/ React__namespace.default.createElement("div", {
+        "data-drawer-vanilla-body": ""
+    }, /*#__PURE__*/ React__namespace.default.createElement(VanillaNode, {
+        value: resolvedContent.value
+    }))) : null)));
 }
 
 function canUseDOM$1() {