@samline/drawer 2.0.3 → 2.0.5

package/dist/browser/index.js

@@ -1106,7 +1106,7 @@ var __samlineDrawerBrowser = (() => {
             var dispatcher = resolveDispatcher();
             return dispatcher.useReducer(reducer, initialArg, init);
           }
-          function useRef10(initialValue) {
+          function useRef11(initialValue) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useRef(initialValue);
           }
@@ -1900,7 +1900,7 @@ var __samlineDrawerBrowser = (() => {
           exports.useLayoutEffect = useLayoutEffect5;
           exports.useMemo = useMemo6;
           exports.useReducer = useReducer3;
-          exports.useRef = useRef10;
+          exports.useRef = useRef11;
           exports.useState = useState10;
           exports.useSyncExternalStore = useSyncExternalStore;
           exports.useTransition = useTransition;
@@ -26988,25 +26988,34 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     "submit",
     "reset"
   ]);
-  var preventScrollCount = 0;
-  var restore;
+  var activePreventScrollLocks = /* @__PURE__ */ new Set();
+  var 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?.();
+      activePreventScrollRestore = null;
+    }
+  }
   function usePreventScroll(options = {}) {
     let { isDisabled } = options;
+    const lockIdRef = (0, import_react3.useRef)();
+    if (!lockIdRef.current) {
+      lockIdRef.current = /* @__PURE__ */ Symbol("drawer-prevent-scroll-lock");
+    }
     useIsomorphicLayoutEffect2(() => {
       if (isDisabled) {
         return;
       }
-      preventScrollCount++;
-      if (preventScrollCount === 1) {
-        if (isIOS()) {
-          restore = preventScrollMobileSafari();
-        }
-      }
+      acquirePreventScrollLock(lockIdRef.current);
       return () => {
-        preventScrollCount--;
-        if (preventScrollCount === 0) {
-          restore?.();
-        }
+        releasePreventScrollLock(lockIdRef.current);
       };
     }, [isDisabled]);
   }
@@ -27580,12 +27589,23 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { direction, isOpen, shouldScaleBackground, setBackgroundColorOnScale, noBodyStyles } = useDrawerContext();
     const timeoutIdRef = import_react6.default.useRef(null);
     const initialBackgroundColor = (0, import_react6.useMemo)(() => document.body.style.backgroundColor, []);
+    import_react6.default.useEffect(() => {
+      return () => {
+        if (timeoutIdRef.current !== null) {
+          window.clearTimeout(timeoutIdRef.current);
+          timeoutIdRef.current = null;
+        }
+      };
+    }, []);
     function getScale() {
       return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
     }
     import_react6.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(
@@ -27614,6 +27634,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             } else {
               document.body.style.removeProperty("background");
             }
+            timeoutIdRef.current = null;
           }, TRANSITIONS.DURATION * 1e3);
         };
       }
@@ -27623,6 +27644,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   // src/use-position-fixed.ts
   var import_react7 = __toESM(require_react());
   var previousBodyPosition = null;
+  var activeBodyPositionLocks = /* @__PURE__ */ new Set();
+  var bodyPositionTimeoutId = null;
+  function clearBodyPositionTimeout() {
+    if (bodyPositionTimeoutId !== null) {
+      window.clearTimeout(bodyPositionTimeoutId);
+      bodyPositionTimeoutId = null;
+    }
+  }
   function usePositionFixed({
     isOpen,
     modal,
@@ -27633,8 +27662,17 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   }) {
     const [activeUrl, setActiveUrl] = import_react7.default.useState(() => typeof window !== "undefined" ? window.location.href : "");
     const scrollPos = import_react7.default.useRef(0);
+    const lockIdRef = import_react7.default.useRef();
+    if (!lockIdRef.current) {
+      lockIdRef.current = /* @__PURE__ */ Symbol("drawer-body-position-lock");
+    }
     const setPositionFixed = import_react7.default.useCallback(() => {
       if (!isSafari()) return;
+      const lockId = lockIdRef.current;
+      if (activeBodyPositionLocks.has(lockId)) {
+        return;
+      }
+      activeBodyPositionLocks.add(lockId);
       if (previousBodyPosition === null && isOpen && !noBodyStyles) {
         previousBodyPosition = {
           position: document.body.style.position,
@@ -27651,7 +27689,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           right: "0px",
           height: "auto"
         });
-        window.setTimeout(
+        clearBodyPositionTimeout();
+        bodyPositionTimeoutId = window.setTimeout(
           () => window.requestAnimationFrame(() => {
             const bottomBarHeight = innerHeight - window.innerHeight;
             if (bottomBarHeight && scrollPos.current >= innerHeight) {
@@ -27661,10 +27700,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           300
         );
       }
-    }, [isOpen]);
+    }, [isOpen, noBodyStyles]);
     const restorePositionSetting = import_react7.default.useCallback(() => {
       if (!isSafari()) return;
+      const lockId = lockIdRef.current;
+      activeBodyPositionLocks.delete(lockId);
+      if (activeBodyPositionLocks.size > 0) {
+        return;
+      }
       if (previousBodyPosition !== null && !noBodyStyles) {
+        clearBodyPositionTimeout();
         const y = -parseInt(document.body.style.top, 10);
         const x = -parseInt(document.body.style.left, 10);
         Object.assign(document.body.style, previousBodyPosition);
@@ -27677,7 +27722,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         });
         previousBodyPosition = null;
       }
-    }, [activeUrl]);
+    }, [activeUrl, noBodyStyles, setActiveUrl]);
     import_react7.default.useEffect(() => {
       function onScroll() {
         scrollPos.current = window.scrollY;
@@ -27975,6 +28020,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     container,
     autoFocus = false
   }) {
+    const animationEndTimeoutRef = import_react9.default.useRef(null);
+    const nonModalPointerEventsRafRef = import_react9.default.useRef(null);
+    const shouldAnimateRafRef = import_react9.default.useRef(null);
+    const snapPointsResetTimeoutRef = import_react9.default.useRef(null);
+    const justReleasedTimeoutRef = import_react9.default.useRef(null);
+    const touchEndHandlerRef = import_react9.default.useRef(null);
     const [isOpen = false, setIsOpen] = useControllableState2({
       defaultProp: defaultOpen,
       prop: openProp,
@@ -27983,13 +28034,20 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         if (!o && !nested) {
           restorePositionSetting();
         }
-        setTimeout(() => {
+        if (animationEndTimeoutRef.current !== null) {
+          window.clearTimeout(animationEndTimeoutRef.current);
+        }
+        animationEndTimeoutRef.current = window.setTimeout(() => {
           onAnimationEnd?.(o);
         }, TRANSITIONS.DURATION * 1e3);
         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;
             });
           }
         }
@@ -28098,7 +28156,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       setIsDragging(true);
       dragStartTime.current = /* @__PURE__ */ new Date();
       if (isIOS()) {
-        window.addEventListener("touchend", () => isAllowedToDrag.current = false, { once: true });
+        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 });
       }
       event.target.setPointerCapture(event.pointerId);
       pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
@@ -28205,9 +28271,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       }
     }
     import_react9.default.useEffect(() => {
-      window.requestAnimationFrame(() => {
+      shouldAnimateRafRef.current = window.requestAnimationFrame(() => {
         shouldAnimate.current = true;
       });
+      return () => {
+        if (shouldAnimateRafRef.current !== null) {
+          window.cancelAnimationFrame(shouldAnimateRafRef.current);
+          shouldAnimateRafRef.current = null;
+        }
+      };
     }, []);
     import_react9.default.useEffect(() => {
       function onVisualViewportChange() {
@@ -28248,10 +28320,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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 * 1e3);
     }
     function resetDrawer() {
@@ -28326,8 +28402,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       });
       if (releaseResult.shouldPreventFocus) {
         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") {
@@ -28401,11 +28481,44 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         });
       }
     }
+    import_react9.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;
+        }
+      };
+    }, []);
     import_react9.default.useEffect(() => {
       if (!modal) {
-        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]);
     return /* @__PURE__ */ import_react9.default.createElement(
@@ -28512,15 +28625,23 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const pointerStartRef = import_react9.default.useRef(null);
     const lastKnownPointerEventRef = import_react9.default.useRef(null);
     const wasBeyondThePointRef = import_react9.default.useRef(false);
+    const delayedSnapPointsRafRef = import_react9.default.useRef(null);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     useScaleBackground();
     import_react9.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;
@@ -28629,13 +28750,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       onDrag
     } = useDrawerContext();
     const closeTimeoutIdRef = import_react9.default.useRef(null);
+    const cycleTimeoutIdRef = import_react9.default.useRef(null);
     const shouldCancelInteractionRef = import_react9.default.useRef(false);
     function handleStartCycle() {
       if (shouldCancelInteractionRef.current) {
         handleCancelInteraction();
         return;
       }
-      window.setTimeout(() => {
+      cycleTimeoutIdRef.current = window.setTimeout(() => {
         handleCycleSnapPoints();
       }, DOUBLE_TAP_TIMEOUT);
     }
@@ -28666,9 +28788,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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;
     }
+    import_react9.default.useEffect(() => {
+      return () => {
+        handleCancelInteraction();
+      };
+    }, []);
     return /* @__PURE__ */ import_react9.default.createElement(
       "div",
       {
@@ -28778,11 +28910,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       fadeFromIndex: void 0
     };
   }
-  function VanillaNode({ value, dataAttribute }) {
+  function VanillaNode({
+    value,
+    dataAttribute
+  }) {
     const ref = import_react10.default.useRef(null);
     useSafeLayoutEffect(() => {
       const element = ref.current;
-      if (!element) return;
+      if (!element) {
+        return;
+      }
       element.innerHTML = "";
       if (value instanceof HTMLElement) {
         element.appendChild(value);
@@ -28803,6 +28940,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     }
     return /* @__PURE__ */ import_react10.default.createElement("div", { ...dataAttribute ? { [dataAttribute]: "" } : {}, ref });
   }
+  function readAccessibleTextFromRoot(root, elementId) {
+    if (!root || !elementId) {
+      return void 0;
+    }
+    const elements = Array.from(root.querySelectorAll("[id]"));
+    for (const element of elements) {
+      if (element instanceof HTMLElement && element.id === elementId) {
+        const value = element.textContent?.trim();
+        return value ? value : void 0;
+      }
+    }
+    return root.id === elementId ? root.textContent?.trim() || void 0 : void 0;
+  }
   function VanillaDrawerRenderer({
     options,
     open,
@@ -28831,16 +28981,43 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const rootProps = toReactDrawerProps(drawerOptions, open, onOpenChange, onDragChange, onReleaseChange);
     const shouldRenderHandle = Boolean(drawerOptions.handleOnly || showHandle);
     const shouldRenderVanillaContent = title != null || description != null || content != null;
+    const resolvedContent = import_react10.default.useMemo(() => {
+      if (content instanceof HTMLElement) {
+        return {
+          value: content,
+          proxyTitle: title == null ? readAccessibleTextFromRoot(content, ariaLabelledBy) : void 0,
+          proxyDescription: description == null ? readAccessibleTextFromRoot(content, ariaDescribedBy) : void 0
+        };
+      }
+      if (typeof content === "function") {
+        const result = content();
+        return {
+          value: result,
+          proxyTitle: title == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaLabelledBy) : void 0,
+          proxyDescription: description == null && result instanceof HTMLElement ? readAccessibleTextFromRoot(result, ariaDescribedBy) : void 0
+        };
+      }
+      return {
+        value: content,
+        proxyTitle: void 0,
+        proxyDescription: void 0
+      };
+    }, [ariaDescribedBy, ariaLabelledBy, content, description, title]);
+    const proxyTitle = resolvedContent.proxyTitle ?? (title == null ? ariaLabel : void 0);
+    const proxyDescription = resolvedContent.proxyDescription;
+    const contentAriaLabel = title == null && !proxyTitle ? ariaLabel : void 0;
+    const contentAriaLabelledBy = title == null && !proxyTitle ? ariaLabelledBy : void 0;
+    const contentAriaDescribedBy = description == null && !proxyDescription ? ariaDescribedBy : void 0;
     return /* @__PURE__ */ import_react10.default.createElement(Drawer.Root, { ...rootProps }, triggerText ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Trigger, { asChild: true }, /* @__PURE__ */ import_react10.default.createElement("button", { type: "button", "data-drawer-vanilla-trigger": "" }, triggerText)) : null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Portal, null, /* @__PURE__ */ import_react10.default.createElement(Drawer.Overlay, { className: overlayClassName }), /* @__PURE__ */ import_react10.default.createElement(
       Drawer.Content,
       {
         className: contentClassName,
-        "aria-label": title == null ? ariaLabel : void 0,
-        "aria-labelledby": title == null ? ariaLabelledBy : void 0,
-        "aria-describedby": description == null ? ariaDescribedBy : void 0
+        "aria-label": contentAriaLabel,
+        "aria-labelledby": contentAriaLabelledBy,
+        "aria-describedby": contentAriaDescribedBy
       },
       shouldRenderHandle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Handle, { className: handleClassName }) : null,
-      shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: content, dataAttribute: "data-drawer-vanilla-body" })) : null
+      shouldRenderVanillaContent ? /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-node": "" }, proxyTitle ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: VISUALLY_HIDDEN_STYLE }, proxyTitle) : null, title != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Title, { style: titleVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: title })) : null, proxyDescription ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: VISUALLY_HIDDEN_STYLE }, proxyDescription) : null, description != null ? /* @__PURE__ */ import_react10.default.createElement(Drawer.Description, { style: descriptionVisuallyHidden ? VISUALLY_HIDDEN_STYLE : void 0 }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: description })) : null, /* @__PURE__ */ import_react10.default.createElement("div", { "data-drawer-vanilla-body": "" }, /* @__PURE__ */ import_react10.default.createElement(VanillaNode, { value: resolvedContent.value }))) : null
     )));
   }