@flytedan/flytebot-design-system 0.43.0 → 0.44.0

package/dist/index.cjs

@@ -959,6 +959,7 @@ var import_react_dom2 = __toESM(require("react-dom"), 1);
 var import_jsx_runtime6 = require("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(() => {
@@ -975,7 +976,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);
@@ -984,7 +986,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;
@@ -1621,14 +1623,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;
@@ -2034,10 +2038,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;
@@ -2051,7 +2057,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;
@@ -5239,22 +5245,29 @@ var import_jsx_runtime54 = require("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) => {
@@ -10766,22 +10779,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();
@@ -13276,22 +13296,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__ */ (0, import_jsx_runtime95.jsxs)("span", { className: "fd-fb-menu-anchor", ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       IconButton,