@samline/drawer 2.0.0 → 2.0.1

package/dist/vue/{components-client-rq_o2zwK.mjs → components-client-DZfql3-W.mjs}

@@ -1311,6 +1311,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
     };
 }
 
+function isElementLike(target) {
+    const element = target;
+    return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
+}
+function getDragTargetMetadata(target) {
+    var _ref;
+    const targetElement = isElementLike(target) ? target : null;
+    const ancestors = [];
+    let element = targetElement;
+    while(element){
+        ancestors.push({
+            scrollHeight: element.scrollHeight,
+            clientHeight: element.clientHeight,
+            scrollTop: element.scrollTop,
+            role: element.getAttribute('role')
+        });
+        element = element.parentElement;
+    }
+    return {
+        targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
+        hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
+        ancestors
+    };
+}
 function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
     if (targetTagName === 'SELECT' || hasNoDragAttribute) {
         return {
@@ -1473,6 +1497,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
         noBodyStyles,
         autoFocus
     });
+    React__default.useEffect(()=>{
+        var _drawerRef_current;
+        if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
+            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();
+    }, [
+        autoFocus,
+        isOpen,
+        modal
+    ]);
     function getScale() {
         return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
     }
@@ -1496,24 +1538,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
     }
     function shouldDrag(el, isDraggingInDirection) {
         var _window_getSelection;
-        let element = el;
         const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
         const date = new Date();
-        const ancestors = [];
-        // Keep climbing up the DOM tree as long as there's a parent
-        while(element){
-            ancestors.push({
-                scrollHeight: element.scrollHeight,
-                clientHeight: element.clientHeight,
-                scrollTop: element.scrollTop,
-                role: element.getAttribute('role')
-            });
-            // Move up to the parent element
-            element = element.parentNode;
-        }
+        const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
         const result = getDragPermission({
-            targetTagName: el.tagName,
-            hasNoDragAttribute: el.hasAttribute('data-drawer-no-drag') || Boolean(el.closest('[data-drawer-no-drag]')),
+            targetTagName,
+            hasNoDragAttribute,
             direction,
             timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
             swipeAmount,

package/dist/vue/index.js

@@ -27871,6 +27871,31 @@ function getNextHandleState({
 }
 
 // src/runtime/drag-policy.ts
+function isElementLike(target) {
+  const element = target;
+  return Boolean(
+    element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
+  );
+}
+function getDragTargetMetadata(target) {
+  const targetElement = isElementLike(target) ? target : null;
+  const ancestors = [];
+  let element = targetElement;
+  while (element) {
+    ancestors.push({
+      scrollHeight: element.scrollHeight,
+      clientHeight: element.clientHeight,
+      scrollTop: element.scrollTop,
+      role: element.getAttribute("role")
+    });
+    element = element.parentElement;
+  }
+  return {
+    targetTagName: targetElement?.tagName ?? "",
+    hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
+    ancestors
+  };
+}
 function getDragPermission({
   targetTagName,
   hasNoDragAttribute,
@@ -28051,6 +28076,19 @@ 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]")) {
+      return;
+    }
+    activeElement.blur();
+  }, [autoFocus, isOpen, modal]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28068,22 +28106,12 @@ function Root2({
     pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
   }
   function shouldDrag(el, isDraggingInDirection) {
-    let element = el;
     const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
     const date = /* @__PURE__ */ new Date();
-    const ancestors = [];
-    while (element) {
-      ancestors.push({
-        scrollHeight: element.scrollHeight,
-        clientHeight: element.clientHeight,
-        scrollTop: element.scrollTop,
-        role: element.getAttribute("role")
-      });
-      element = element.parentNode;
-    }
+    const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
     const result = getDragPermission({
-      targetTagName: el.tagName,
-      hasNoDragAttribute: el.hasAttribute("data-drawer-no-drag") || Boolean(el.closest("[data-drawer-no-drag]")),
+      targetTagName,
+      hasNoDragAttribute,
       direction,
       timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
       swipeAmount,

package/dist/vue/index.mjs

@@ -27846,6 +27846,31 @@ function getNextHandleState({
 }
 
 // src/runtime/drag-policy.ts
+function isElementLike(target) {
+  const element = target;
+  return Boolean(
+    element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
+  );
+}
+function getDragTargetMetadata(target) {
+  const targetElement = isElementLike(target) ? target : null;
+  const ancestors = [];
+  let element = targetElement;
+  while (element) {
+    ancestors.push({
+      scrollHeight: element.scrollHeight,
+      clientHeight: element.clientHeight,
+      scrollTop: element.scrollTop,
+      role: element.getAttribute("role")
+    });
+    element = element.parentElement;
+  }
+  return {
+    targetTagName: targetElement?.tagName ?? "",
+    hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
+    ancestors
+  };
+}
 function getDragPermission({
   targetTagName,
   hasNoDragAttribute,
@@ -28026,6 +28051,19 @@ 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]")) {
+      return;
+    }
+    activeElement.blur();
+  }, [autoFocus, isOpen, modal]);
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -28043,22 +28081,12 @@ function Root2({
     pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
   }
   function shouldDrag(el, isDraggingInDirection) {
-    let element = el;
     const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
     const date = /* @__PURE__ */ new Date();
-    const ancestors = [];
-    while (element) {
-      ancestors.push({
-        scrollHeight: element.scrollHeight,
-        clientHeight: element.clientHeight,
-        scrollTop: element.scrollTop,
-        role: element.getAttribute("role")
-      });
-      element = element.parentNode;
-    }
+    const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
     const result = getDragPermission({
-      targetTagName: el.tagName,
-      hasNoDragAttribute: el.hasAttribute("data-drawer-no-drag") || Boolean(el.closest("[data-drawer-no-drag]")),
+      targetTagName,
+      hasNoDragAttribute,
       direction,
       timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
       swipeAmount,

package/package.json

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