@flytedan/flytebot-design-system 0.17.0 → 0.17.1

package/dist/index.js

@@ -11666,6 +11666,42 @@ var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disable
 function getFocusable(container) {
   return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
 }
+function useFocusTrap(navRef, active) {
+  React55.useEffect(() => {
+    if (!active) return;
+    const container = navRef.current;
+    if (!container) return;
+    const previouslyFocused = document.activeElement;
+    const focusable = getFocusable(container);
+    (focusable[0] ?? container).focus();
+    const handler = (e) => {
+      if (e.key !== "Tab") return;
+      const items = getFocusable(container);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const activeElement = document.activeElement;
+      const outside = !(activeElement instanceof Node) || !container.contains(activeElement);
+      if (e.shiftKey) {
+        if (outside || activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (outside || activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+      previouslyFocused?.focus?.();
+    };
+  }, [active, navRef]);
+}
 function useResponsiveRail(options = {}) {
   const { breakpoint = 1024, initialOpen = true, onPersist } = options;
   const navRef = React55.useRef(null);
@@ -11706,40 +11742,7 @@ function useResponsiveRail(options = {}) {
       document.body.style.overflow = previousOverflow;
     };
   }, [overlay, open]);
-  React55.useEffect(() => {
-    if (!overlay || !open) return;
-    const container = navRef.current;
-    if (!container) return;
-    const previouslyFocused = document.activeElement;
-    const focusable = getFocusable(container);
-    (focusable[0] ?? container).focus();
-    const handler = (e) => {
-      if (e.key !== "Tab") return;
-      const items = getFocusable(container);
-      if (items.length === 0) {
-        e.preventDefault();
-        return;
-      }
-      const first = items[0];
-      const last = items[items.length - 1];
-      const active = document.activeElement;
-      const outside = !(active instanceof Node) || !container.contains(active);
-      if (e.shiftKey) {
-        if (outside || active === first) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else if (outside || active === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener("keydown", handler);
-    return () => {
-      document.removeEventListener("keydown", handler);
-      previouslyFocused?.focus?.();
-    };
-  }, [overlay, open]);
+  useFocusTrap(navRef, overlay && open);
   return { open, overlay, navRef, toggle, close, setOpen };
 }
 export {