@samline/drawer 2.0.5 → 2.0.7

package/dist/vue/index.js

@@ -27991,6 +27991,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,
@@ -28076,6 +28077,23 @@ function Root2({
   const drawerHeightRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
   const drawerWidthRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
   const initialDrawerHeight = import_react9.default.useRef(0);
+  const releaseHiddenFocusBeforeOpen2 = import_react9.default.useCallback(() => {
+    if (!modal || autoFocus || typeof document === "undefined") {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!activeElement || activeElement === document.body) {
+      return;
+    }
+    const activeElementNode = activeElement;
+    if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
+      return;
+    }
+    if (typeof activeElementNode.blur !== "function") {
+      return;
+    }
+    activeElementNode.blur();
+  }, [autoFocus, modal]);
   const onSnapPointChange = import_react9.default.useCallback((activeSnapPointIndex2) => {
     if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
   }, []);
@@ -28134,19 +28152,12 @@ function Root2({
     noBodyStyles,
     autoFocus
   });
-  import_react9.default.useEffect(() => {
-    if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
-      return;
-    }
-    const activeElement = document.activeElement;
-    if (!(activeElement instanceof HTMLElement)) {
-      return;
-    }
-    if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
+  useSafeLayoutEffect(() => {
+    if (!isOpen) {
       return;
     }
-    activeElement.blur();
-  }, [autoFocus, isOpen, modal]);
+    releaseHiddenFocusBeforeOpen2();
+  }, [isOpen, releaseHiddenFocusBeforeOpen2]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28530,6 +28541,7 @@ function Root2({
       onOpenChange: (open) => {
         if (!dismissible && !open) return;
         if (open) {
+          releaseHiddenFocusBeforeOpen2();
           setHasBeenOpened(true);
         } else {
           closeDrawer2(true);
@@ -28883,7 +28895,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 = {
@@ -28917,7 +28929,7 @@ function VanillaNode({
   dataAttribute
 }) {
   const ref = import_react10.default.useRef(null);
-  useSafeLayoutEffect(() => {
+  useSafeLayoutEffect2(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -29123,6 +29135,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);
@@ -29142,6 +29155,7 @@ function bindTriggerElement(runtime) {
   }
   const triggerElement = runtime.options.triggerElement;
   const handleClick = () => {
+    releaseHiddenFocusBeforeOpen(runtime.options);
     runtime.controller.setOpen(true);
     renderVanillaDrawer(runtime.id);
   };
@@ -29177,6 +29191,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;
@@ -29230,6 +29254,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);
@@ -29276,6 +29303,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) {
@@ -29346,6 +29376,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/dist/vue/index.mjs

@@ -27966,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,
@@ -28051,6 +28052,23 @@ function Root2({
   const drawerHeightRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
   const drawerWidthRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
   const initialDrawerHeight = import_react9.default.useRef(0);
+  const releaseHiddenFocusBeforeOpen2 = import_react9.default.useCallback(() => {
+    if (!modal || autoFocus || typeof document === "undefined") {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!activeElement || activeElement === document.body) {
+      return;
+    }
+    const activeElementNode = activeElement;
+    if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
+      return;
+    }
+    if (typeof activeElementNode.blur !== "function") {
+      return;
+    }
+    activeElementNode.blur();
+  }, [autoFocus, modal]);
   const onSnapPointChange = import_react9.default.useCallback((activeSnapPointIndex2) => {
     if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
   }, []);
@@ -28109,19 +28127,12 @@ function Root2({
     noBodyStyles,
     autoFocus
   });
-  import_react9.default.useEffect(() => {
-    if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
-      return;
-    }
-    const activeElement = document.activeElement;
-    if (!(activeElement instanceof HTMLElement)) {
-      return;
-    }
-    if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
+  useSafeLayoutEffect(() => {
+    if (!isOpen) {
       return;
     }
-    activeElement.blur();
-  }, [autoFocus, isOpen, modal]);
+    releaseHiddenFocusBeforeOpen2();
+  }, [isOpen, releaseHiddenFocusBeforeOpen2]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28505,6 +28516,7 @@ function Root2({
       onOpenChange: (open) => {
         if (!dismissible && !open) return;
         if (open) {
+          releaseHiddenFocusBeforeOpen2();
           setHasBeenOpened(true);
         } else {
           closeDrawer2(true);
@@ -28858,7 +28870,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 = {
@@ -28892,7 +28904,7 @@ function VanillaNode({
   dataAttribute
 }) {
   const ref = import_react10.default.useRef(null);
-  useSafeLayoutEffect(() => {
+  useSafeLayoutEffect2(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -29098,6 +29110,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);
@@ -29117,6 +29130,7 @@ function bindTriggerElement(runtime) {
   }
   const triggerElement = runtime.options.triggerElement;
   const handleClick = () => {
+    releaseHiddenFocusBeforeOpen(runtime.options);
     runtime.controller.setOpen(true);
     renderVanillaDrawer(runtime.id);
   };
@@ -29152,6 +29166,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;
@@ -29205,6 +29229,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);
@@ -29251,6 +29278,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) {
@@ -29321,6 +29351,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.5",
+  "version": "2.0.7",
   "description": "A universal drawer package for React, Vue, Svelte, vanilla JS, and browser usage.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",