@samline/drawer 2.0.3 → 2.0.5

package/dist/vue/index.mjs

@@ -1099,7 +1099,7 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useReducer(reducer, initialArg, init);
         }
-        function useRef10(initialValue) {
+        function useRef11(initialValue) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
@@ -1893,7 +1893,7 @@ var require_react_development = __commonJS({
         exports.useLayoutEffect = useLayoutEffect5;
         exports.useMemo = useMemo6;
         exports.useReducer = useReducer3;
-        exports.useRef = useRef10;
+        exports.useRef = useRef11;
         exports.useState = useState10;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
@@ -26965,25 +26965,34 @@ var nonTextInputTypes = /* @__PURE__ */ new Set([
   "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]);
 }
@@ -27557,12 +27566,23 @@ function useScaleBackground() {
   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(
@@ -27591,6 +27611,7 @@ function useScaleBackground() {
           } else {
             document.body.style.removeProperty("background");
           }
+          timeoutIdRef.current = null;
         }, TRANSITIONS.DURATION * 1e3);
       };
     }
@@ -27600,6 +27621,14 @@ function useScaleBackground() {
 // 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,
@@ -27610,8 +27639,17 @@ function usePositionFixed({
 }) {
   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,
@@ -27628,7 +27666,8 @@ function usePositionFixed({
         right: "0px",
         height: "auto"
       });
-      window.setTimeout(
+      clearBodyPositionTimeout();
+      bodyPositionTimeoutId = window.setTimeout(
         () => window.requestAnimationFrame(() => {
           const bottomBarHeight = innerHeight - window.innerHeight;
           if (bottomBarHeight && scrollPos.current >= innerHeight) {
@@ -27638,10 +27677,16 @@ function usePositionFixed({
         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);
@@ -27654,7 +27699,7 @@ function usePositionFixed({
       });
       previousBodyPosition = null;
     }
-  }, [activeUrl]);
+  }, [activeUrl, noBodyStyles, setActiveUrl]);
   import_react7.default.useEffect(() => {
     function onScroll() {
       scrollPos.current = window.scrollY;
@@ -27952,6 +27997,12 @@ function Root2({
   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,
@@ -27960,13 +28011,20 @@ function Root2({
       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;
           });
         }
       }
@@ -28075,7 +28133,15 @@ function Root2({
     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;
@@ -28182,9 +28248,15 @@ function Root2({
     }
   }
   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() {
@@ -28225,10 +28297,14 @@ function Root2({
     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() {
@@ -28303,8 +28379,12 @@ function Root2({
     });
     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") {
@@ -28378,11 +28458,44 @@ function Root2({
       });
     }
   }
+  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(
@@ -28489,15 +28602,23 @@ var Content2 = import_react9.default.forwardRef(function({ onPointerDownOutside,
   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;
@@ -28606,13 +28727,14 @@ var Handle = import_react9.default.forwardRef(function({ preventCycle = false, c
     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);
   }
@@ -28643,9 +28765,19 @@ var Handle = import_react9.default.forwardRef(function({ preventCycle = false, c
   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",
     {
@@ -28755,11 +28887,16 @@ function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, i
     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);
@@ -28780,6 +28917,19 @@ function VanillaNode({ value, dataAttribute }) {
   }
   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,
@@ -28808,16 +28958,43 @@ function VanillaDrawerRenderer({
   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
   )));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samline/drawer",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "A universal drawer package for React, Vue, Svelte, vanilla JS, and browser usage.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",