@flytedan/flytebot-design-system 0.43.0 → 0.44.0

package/dist/index.js

@@ -715,6 +715,7 @@ import ReactDOM from "react-dom";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function AnchoredPopover({ rect, width = 620, onClose, children }) {
   const ref = React4.useRef(null);
+  const isInnermostEscapeLayer = useEscapeLayer(!!rect);
   const w = Math.min(width, window.innerWidth - 32);
   const [h, setH] = React4.useState(0);
   React4.useLayoutEffect(() => {
@@ -731,7 +732,8 @@ function AnchoredPopover({ rect, width = 620, onClose, children }) {
       if (ref.current && !ref.current.contains(e.target)) onClose();
     };
     const esc = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key !== "Escape" || !isInnermostEscapeLayer()) return;
+      onClose();
     };
     const t = setTimeout(() => document.addEventListener("pointerdown", away), 0);
     document.addEventListener("keydown", esc);
@@ -740,7 +742,7 @@ function AnchoredPopover({ rect, width = 620, onClose, children }) {
       document.removeEventListener("pointerdown", away);
       document.removeEventListener("keydown", esc);
     };
-  }, [onClose]);
+  }, [onClose, isInnermostEscapeLayer]);
   if (!rect) return null;
   const GAP = 8;
   const PAD = 16;
@@ -1377,14 +1379,16 @@ function useResponsiveRail(options = {}) {
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, [breakpoint]);
+  const isInnermostEscapeLayer = useEscapeLayer(overlay && open);
   React12.useEffect(() => {
     if (!overlay || !open) return;
     const handler = (e) => {
-      if (e.key === "Escape") close();
+      if (e.key !== "Escape" || !isInnermostEscapeLayer()) return;
+      close();
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [overlay, open, close]);
+  }, [overlay, open, close, isInnermostEscapeLayer]);
   React12.useEffect(() => {
     if (!overlay || !open) return;
     const previousOverflow = document.body.style.overflow;
@@ -1790,10 +1794,12 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     onDetach: hide
   });
   const zIndex = useOverlayLayer(open);
+  const isInnermostEscapeLayer = useEscapeLayer(open);
   React13.useEffect(() => {
     if (!open) return;
     const key = (e) => {
-      if (e.key === "Escape") hide();
+      if (e.key !== "Escape" || !isInnermostEscapeLayer()) return;
+      hide();
     };
     const away = (e) => {
       const t = e.target;
@@ -1807,7 +1813,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
       document.removeEventListener("keydown", key);
       document.removeEventListener("pointerdown", away, true);
     };
-  }, [open, hide]);
+  }, [open, hide, isInnermostEscapeLayer]);
   const isMouse = (e) => e.pointerType === "mouse";
   const onFocus = (e) => {
     const el = e.target;
@@ -4995,22 +5001,29 @@ import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
 function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
   const [open, setOpen] = React30.useState(false);
   const zIndex = useOverlayLayer(open);
+  const isInnermostEscapeLayer = useEscapeLayer(open);
   const ref = React30.useRef(null);
   React30.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
+    document.addEventListener("pointerdown", away);
+    return () => {
+      document.removeEventListener("pointerdown", away);
+    };
+  }, [open]);
+  React30.useEffect(() => {
+    if (!open) return;
     const esc = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape" || !isInnermostEscapeLayer()) return;
+      setOpen(false);
     };
-    document.addEventListener("pointerdown", away);
     document.addEventListener("keydown", esc);
     return () => {
-      document.removeEventListener("pointerdown", away);
       document.removeEventListener("keydown", esc);
     };
-  }, [open]);
+  }, [open, isInnermostEscapeLayer]);
   const cur = fields.find((f) => f.key === (sort && sort.key));
   const dir = sort && sort.dir;
   const arrow = (f, d) => {
@@ -10522,22 +10535,29 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
   const mode2 = useRuntimeMode();
   const [open, setOpen] = React54.useState(false);
   const zIndex = useOverlayLayer(open);
+  const isInnermostEscapeLayer = useEscapeLayer(open);
   const ref = React54.useRef(null);
   React54.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
+    document.addEventListener("pointerdown", away);
+    return () => {
+      document.removeEventListener("pointerdown", away);
+    };
+  }, [open]);
+  React54.useEffect(() => {
+    if (!open) return;
     const esc = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape" || !isInnermostEscapeLayer()) return;
+      setOpen(false);
     };
-    document.addEventListener("pointerdown", away);
     document.addEventListener("keydown", esc);
     return () => {
-      document.removeEventListener("pointerdown", away);
       document.removeEventListener("keydown", esc);
     };
-  }, [open]);
+  }, [open, isInnermostEscapeLayer]);
   if (!canToggle) return null;
   const test = mode2 === "test";
   const s = summary || RuntimeKit.summary();
@@ -13032,22 +13052,29 @@ function FolderPickerMenu({
 }) {
   const [open, setOpen] = React65.useState(false);
   const zIndex = useOverlayLayer(open);
+  const isInnermostEscapeLayer = useEscapeLayer(open);
   const ref = React65.useRef(null);
   React65.useEffect(() => {
     if (!open) return;
     const away = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
+    document.addEventListener("pointerdown", away);
+    return () => {
+      document.removeEventListener("pointerdown", away);
+    };
+  }, [open]);
+  React65.useEffect(() => {
+    if (!open) return;
     const esc = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape" || !isInnermostEscapeLayer()) return;
+      setOpen(false);
     };
-    document.addEventListener("pointerdown", away);
     document.addEventListener("keydown", esc);
     return () => {
-      document.removeEventListener("pointerdown", away);
       document.removeEventListener("keydown", esc);
     };
-  }, [open]);
+  }, [open, isInnermostEscapeLayer]);
   return /* @__PURE__ */ jsxs87("span", { className: "fd-fb-menu-anchor", ref, children: [
     /* @__PURE__ */ jsx94(
       IconButton,