@samline/drawer 2.0.4 → 2.0.6

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;
@@ -27921,6 +27966,7 @@ function getDragPermission({
 }
 
 // src/react/components.tsx
+var useSafeLayoutEffect = typeof window === "undefined" ? import_react9.default.useEffect : import_react9.default.useLayoutEffect;
 function Root2({
   open: openProp,
   onOpenChange,
@@ -27952,6 +27998,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 +28012,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;
           });
         }
       }
@@ -28051,18 +28110,22 @@ function Root2({
     noBodyStyles,
     autoFocus
   });
-  import_react9.default.useEffect(() => {
+  useSafeLayoutEffect(() => {
     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?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
+    const activeElementNode = activeElement;
+    if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
       return;
     }
-    activeElement.blur();
+    if (typeof activeElementNode.blur !== "function") {
+      return;
+    }
+    activeElementNode.blur();
   }, [autoFocus, isOpen, modal]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -28075,7 +28138,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 +28253,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 +28302,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 +28384,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 +28463,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 +28607,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 +28732,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 +28770,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",
     {
@@ -28726,7 +28863,7 @@ var VISUALLY_HIDDEN_STYLE = {
   whiteSpace: "nowrap",
   border: 0
 };
-var useSafeLayoutEffect = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
+var useSafeLayoutEffect2 = typeof window === "undefined" ? import_react10.default.useEffect : import_react10.default.useLayoutEffect;
 function toReactDrawerProps(options, open, onOpenChange, internalOnDragChange, internalOnReleaseChange) {
   const { id: _id, parentId: _parentId, onDragChange, onReleaseChange, ...drawerOptions } = options;
   const baseProps = {
@@ -28760,7 +28897,7 @@ function VanillaNode({
   dataAttribute
 }) {
   const ref = import_react10.default.useRef(null);
-  useSafeLayoutEffect(() => {
+  useSafeLayoutEffect2(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -28966,6 +29103,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);
@@ -28985,6 +29123,7 @@ function bindTriggerElement(runtime) {
   }
   const triggerElement = runtime.options.triggerElement;
   const handleClick = () => {
+    releaseHiddenFocusBeforeOpen(runtime.options);
     runtime.controller.setOpen(true);
     renderVanillaDrawer(runtime.id);
   };
@@ -29020,6 +29159,16 @@ function notifyOpenStateChange(runtime, open) {
 function canUseDOM3() {
   return typeof window !== "undefined" && typeof document !== "undefined";
 }
+function releaseHiddenFocusBeforeOpen(options) {
+  if (!canUseDOM3() || 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;
@@ -29073,6 +29222,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);
@@ -29119,6 +29271,9 @@ function buildVanillaController(id) {
       if (!runtime) {
         return createDrawer({ id, open }).getSnapshot();
       }
+      if (open) {
+        releaseHiddenFocusBeforeOpen(runtime.options);
+      }
       const previousOpen = runtime.controller.getSnapshot().state.isOpen;
       const snapshot = runtime.controller.setOpen(open);
       if (previousOpen !== open) {
@@ -29189,6 +29344,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);

package/package.json

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