@samline/drawer 2.0.5 → 2.0.7

package/README.md

@@ -17,6 +17,7 @@ bun add @samline/drawer
 ## Quick Start
 
 ```ts
+import '@samline/drawer/styles.css'
 import { createDrawer } from '@samline/drawer'
 
 const drawer = createDrawer({

package/dist/{svelte/components-client-D4tSixHM.js → browser/components-client-B8ZDZqhE.js}

@@ -1470,6 +1470,7 @@ function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeS
     };
 }
 
+const useSafeLayoutEffect = typeof window === 'undefined' ? React__namespace.default.useEffect : React__namespace.default.useLayoutEffect;
 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);
@@ -1527,6 +1528,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const drawerHeightRef = React__namespace.default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
     const drawerWidthRef = React__namespace.default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
     const initialDrawerHeight = React__namespace.default.useRef(0);
+    const releaseHiddenFocusBeforeOpen = React__namespace.default.useCallback(()=>{
+        var _drawerRef_current;
+        if (!modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return;
+        }
+        const activeElementNode = activeElement;
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
+            return;
+        }
+        if (typeof activeElementNode.blur !== 'function') {
+            return;
+        }
+        activeElementNode.blur();
+    }, [
+        autoFocus,
+        modal
+    ]);
     const onSnapPointChange = React__namespace.default.useCallback((activeSnapPointIndex)=>{
         // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
         if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
@@ -1577,23 +1599,14 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
-    React__namespace.default.useEffect(()=>{
-        var _drawerRef_current;
-        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+    useSafeLayoutEffect(()=>{
+        if (!isOpen) {
             return;
         }
-        const activeElement = document.activeElement;
-        if (!(activeElement instanceof HTMLElement)) {
-            return;
-        }
-        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
-            return;
-        }
-        activeElement.blur();
+        releaseHiddenFocusBeforeOpen();
     }, [
-        autoFocus,
         isOpen,
-        modal
+        releaseHiddenFocusBeforeOpen
     ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -2002,6 +2015,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         onOpenChange: (open)=>{
             if (!dismissible && !open) return;
             if (open) {
+                releaseHiddenFocusBeforeOpen();
                 setHasBeenOpened(true);
             } else {
                 closeDrawer(true);

package/dist/browser/{components-client-BnT3P9Or.mjs → components-client-LPOAyYIW.mjs}

@@ -1450,6 +1450,7 @@ function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeS
     };
 }
 
+const useSafeLayoutEffect = typeof window === 'undefined' ? React__default.useEffect : React__default.useLayoutEffect;
 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__default.useRef(null);
@@ -1507,6 +1508,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const drawerHeightRef = React__default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
     const drawerWidthRef = React__default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
     const initialDrawerHeight = React__default.useRef(0);
+    const releaseHiddenFocusBeforeOpen = React__default.useCallback(()=>{
+        var _drawerRef_current;
+        if (!modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return;
+        }
+        const activeElementNode = activeElement;
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
+            return;
+        }
+        if (typeof activeElementNode.blur !== 'function') {
+            return;
+        }
+        activeElementNode.blur();
+    }, [
+        autoFocus,
+        modal
+    ]);
     const onSnapPointChange = React__default.useCallback((activeSnapPointIndex)=>{
         // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
         if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
@@ -1557,23 +1579,14 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
-    React__default.useEffect(()=>{
-        var _drawerRef_current;
-        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+    useSafeLayoutEffect(()=>{
+        if (!isOpen) {
             return;
         }
-        const activeElement = document.activeElement;
-        if (!(activeElement instanceof HTMLElement)) {
-            return;
-        }
-        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
-            return;
-        }
-        activeElement.blur();
+        releaseHiddenFocusBeforeOpen();
     }, [
-        autoFocus,
         isOpen,
-        modal
+        releaseHiddenFocusBeforeOpen
     ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -1982,6 +1995,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         onOpenChange: (open)=>{
             if (!dismissible && !open) return;
             if (open) {
+                releaseHiddenFocusBeforeOpen();
                 setHasBeenOpened(true);
             } else {
                 closeDrawer(true);

package/dist/browser/index.cjs

@@ -27989,6 +27989,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,
@@ -28074,6 +28075,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();
   }, []);
@@ -28132,19 +28150,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;
   }
@@ -28528,6 +28539,7 @@ function Root2({
       onOpenChange: (open) => {
         if (!dismissible && !open) return;
         if (open) {
+          releaseHiddenFocusBeforeOpen2();
           setHasBeenOpened(true);
         } else {
           closeDrawer2(true);
@@ -28881,7 +28893,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 = {
@@ -28915,7 +28927,7 @@ function VanillaNode({
   dataAttribute
 }) {
   const ref = import_react10.default.useRef(null);
-  useSafeLayoutEffect(() => {
+  useSafeLayoutEffect2(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -29121,6 +29133,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);
@@ -29140,6 +29153,7 @@ function bindTriggerElement(runtime) {
   }
   const triggerElement = runtime.options.triggerElement;
   const handleClick = () => {
+    releaseHiddenFocusBeforeOpen(runtime.options);
     runtime.controller.setOpen(true);
     renderVanillaDrawer(runtime.id);
   };
@@ -29175,6 +29189,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;
@@ -29228,6 +29252,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);
@@ -29274,6 +29301,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) {
@@ -29344,6 +29374,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/browser/index.js

@@ -27989,6 +27989,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   }
 
   // src/react/components.tsx
+  var useSafeLayoutEffect = typeof window === "undefined" ? import_react9.default.useEffect : import_react9.default.useLayoutEffect;
   function Root2({
     open: openProp,
     onOpenChange,
@@ -28074,6 +28075,23 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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();
     }, []);
@@ -28132,19 +28150,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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;
     }
@@ -28528,6 +28539,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         onOpenChange: (open) => {
           if (!dismissible && !open) return;
           if (open) {
+            releaseHiddenFocusBeforeOpen2();
             setHasBeenOpened(true);
           } else {
             closeDrawer2(true);
@@ -28881,7 +28893,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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 = {
@@ -28915,7 +28927,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     dataAttribute
   }) {
     const ref = import_react10.default.useRef(null);
-    useSafeLayoutEffect(() => {
+    useSafeLayoutEffect2(() => {
       const element = ref.current;
       if (!element) {
         return;
@@ -29121,6 +29133,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       openAncestorChain(nextParentId);
     }
     if (!parentRuntime.controller.getSnapshot().state.isOpen) {
+      releaseHiddenFocusBeforeOpen(parentRuntime.options);
       parentRuntime.controller.setOpen(true);
       notifyOpenStateChange(parentRuntime, true);
       renderVanillaDrawer(parentRuntime.id);
@@ -29140,6 +29153,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     }
     const triggerElement = runtime.options.triggerElement;
     const handleClick = () => {
+      releaseHiddenFocusBeforeOpen(runtime.options);
       runtime.controller.setOpen(true);
       renderVanillaDrawer(runtime.id);
     };
@@ -29175,6 +29189,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   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;
@@ -29228,6 +29252,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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);
@@ -29274,6 +29301,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         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) {
@@ -29344,6 +29374,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         notifyOpenStateChange(existing, snapshot.state.isOpen);
       }
     }
+    if (nextOptions.open && !previousOpen) {
+      releaseHiddenFocusBeforeOpen(nextOptions);
+    }
     renderVanillaDrawer(id);
     if (nextOptions.parentId && nextOptions.open) {
       openAncestorChain(nextOptions.parentId);

package/dist/browser/index.mjs

@@ -27963,6 +27963,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,
@@ -28048,6 +28049,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();
   }, []);
@@ -28106,19 +28124,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;
   }
@@ -28502,6 +28513,7 @@ function Root2({
       onOpenChange: (open) => {
         if (!dismissible && !open) return;
         if (open) {
+          releaseHiddenFocusBeforeOpen2();
           setHasBeenOpened(true);
         } else {
           closeDrawer2(true);
@@ -28855,7 +28867,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 = {
@@ -28889,7 +28901,7 @@ function VanillaNode({
   dataAttribute
 }) {
   const ref = import_react10.default.useRef(null);
-  useSafeLayoutEffect(() => {
+  useSafeLayoutEffect2(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -29095,6 +29107,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);
@@ -29114,6 +29127,7 @@ function bindTriggerElement(runtime) {
   }
   const triggerElement = runtime.options.triggerElement;
   const handleClick = () => {
+    releaseHiddenFocusBeforeOpen(runtime.options);
     runtime.controller.setOpen(true);
     renderVanillaDrawer(runtime.id);
   };
@@ -29149,6 +29163,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;
@@ -29202,6 +29226,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);
@@ -29248,6 +29275,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) {
@@ -29318,6 +29348,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/{browser/components-client-D4tSixHM.js → components-client-B8ZDZqhE.js}

@@ -1470,6 +1470,7 @@ function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeS
     };
 }
 
+const useSafeLayoutEffect = typeof window === 'undefined' ? React__namespace.default.useEffect : React__namespace.default.useLayoutEffect;
 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);
@@ -1527,6 +1528,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     const drawerHeightRef = React__namespace.default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
     const drawerWidthRef = React__namespace.default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
     const initialDrawerHeight = React__namespace.default.useRef(0);
+    const releaseHiddenFocusBeforeOpen = React__namespace.default.useCallback(()=>{
+        var _drawerRef_current;
+        if (!modal || autoFocus || typeof document === 'undefined') {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return;
+        }
+        const activeElementNode = activeElement;
+        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
+            return;
+        }
+        if (typeof activeElementNode.blur !== 'function') {
+            return;
+        }
+        activeElementNode.blur();
+    }, [
+        autoFocus,
+        modal
+    ]);
     const onSnapPointChange = React__namespace.default.useCallback((activeSnapPointIndex)=>{
         // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
         if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
@@ -1577,23 +1599,14 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
-    React__namespace.default.useEffect(()=>{
-        var _drawerRef_current;
-        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+    useSafeLayoutEffect(()=>{
+        if (!isOpen) {
             return;
         }
-        const activeElement = document.activeElement;
-        if (!(activeElement instanceof HTMLElement)) {
-            return;
-        }
-        if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
-            return;
-        }
-        activeElement.blur();
+        releaseHiddenFocusBeforeOpen();
     }, [
-        autoFocus,
         isOpen,
-        modal
+        releaseHiddenFocusBeforeOpen
     ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -2002,6 +2015,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         onOpenChange: (open)=>{
             if (!dismissible && !open) return;
             if (open) {
+                releaseHiddenFocusBeforeOpen();
                 setHasBeenOpened(true);
             } else {
                 closeDrawer(true);