@flytedan/flytebot-design-system 0.55.2 → 0.55.3

package/dist/index.cjs

@@ -5669,27 +5669,26 @@ var import_jsx_runtime57 = require("react/jsx-runtime");
 function useInlinePanel() {
   const [open2, setOpen] = React35.useState(false);
   const ref = React35.useRef(null);
-  const layer = useStackedLayer({ active: open2, containerRef: ref, onEscape: () => setOpen(false) });
-  const zIndex = useLayerZIndex(layer);
-  React35.useEffect(() => {
-    if (!open2) return;
-    const away = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("pointerdown", away);
-    return () => document.removeEventListener("pointerdown", away);
-  }, [open2]);
-  return { open: open2, setOpen, ref, zIndex, layer };
+  return { open: open2, setOpen, ref };
 }
-function InlinePanelLayers({ panel, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StackedLayerProvider, { layer: panel.layer, children });
+function InlinePanelSurface({ panel, align = "right", ...popover }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    Popover,
+    {
+      open: panel.open,
+      anchorRef: panel.ref,
+      onClose: () => panel.setOpen(false),
+      placement: align === "left" ? "bottom-start" : "bottom-end",
+      ...popover
+    }
+  );
 }
 
 // src/components/data/SortMenu.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
   const panel = useInlinePanel();
-  const { open: open2, setOpen, ref, zIndex } = panel;
+  const { open: open2, setOpen, ref } = panel;
   const cur = fields.find((f) => f.key === (sort && sort.key));
   const dir = sort && sort.dir;
   const arrow = (f, d) => {
@@ -5717,12 +5716,12 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className, style: { position: "relative", display: "inline-flex" }, ref, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className, style: { display: "inline-flex" }, ref, ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button, { size, variant: "secondary", icon: dir === "asc" ? "sort-ascending" : "sort-descending", onClick: () => setOpen(!open2), children: [
       cur ? cur.label : "Unsorted",
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
     ] }),
-    open2 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlinePanelLayers, { panel, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-view-enter", style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 280, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-stack", style: { gap: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlinePanelSurface, { panel, align, offset: 6, width: 280, label: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-stack", style: { gap: 2, padding: 8 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
       fields.map((f) => {
         const active = cur && cur.key === f.key;
@@ -5732,7 +5731,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
           arrow(f, "desc")
         ] }, f.key);
       })
-    ] }) }) }) : null
+    ] }) })
   ] });
 }
 
@@ -11292,7 +11291,7 @@ var import_jsx_runtime85 = require("react/jsx-runtime");
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
   const panel = useInlinePanel();
-  const { open: open2, setOpen, ref, zIndex } = panel;
+  const { open: open2, setOpen, ref } = panel;
   if (!canToggle) return null;
   const test = mode2 === "test";
   const s = summary || RuntimeKit.summary();
@@ -11300,7 +11299,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
     RuntimeKit.setMode(next);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { style: { position: "relative", display: "inline-flex" }, ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { style: { display: "inline-flex" }, ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
       "button",
       {
@@ -11316,7 +11315,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
         ]
       }
     ),
-    open2 ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(InlinePanelLayers, { panel, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "fd-view-enter fd-mode-pop", style: { zIndex }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(InlinePanelSurface, { panel, align: "right", offset: 8, width: 400, className: "fd-mode-pop", label: test ? "Test mode" : "Live mode", children: [
       /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "fd-row", style: { gap: 10, padding: "12px 14px", borderBottom: "1px solid var(--border)" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "fd-badge " + (test ? "fd-badge-warning" : "fd-badge-neutral"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("i", { className: "ph " + (test ? "ph-flask" : "ph-lightning"), "aria-hidden": "true" }),
@@ -11374,7 +11373,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
         ] })
       ] }),
       test && renderLog ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { style: { display: "block", maxHeight: 340, overflowY: "auto", borderTop: "1px solid var(--border)" }, children: renderLog() }) : null
-    ] }) }) : null
+    ] })
   ] });
 }
 function TestModeBar({ onExit }) {
@@ -13767,7 +13766,7 @@ function FolderPickerMenu({
   onPick
 }) {
   const panel = useInlinePanel();
-  const { open: open2, setOpen, ref, zIndex } = panel;
+  const { open: open2, setOpen, ref } = panel;
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { className: "fd-fb-menu-anchor", ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       IconButton,
@@ -13781,7 +13780,7 @@ function FolderPickerMenu({
         onClick: () => setOpen((v) => !v)
       }
     ),
-    open2 ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InlinePanelLayers, { panel, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "fd-fb-menu", role: "menu", "aria-label": label, style: { zIndex }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InlinePanelSurface, { panel, align: "right", offset: 4, width: 220, maxHeight: 280, role: "menu", label, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "fd-fb-menu", children: [
       /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "fd-overline fd-muted fd-fb-menu-title", children: "Move to\u2026" }),
       destinations.map((d) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
         "button",
@@ -13801,7 +13800,7 @@ function FolderPickerMenu({
         },
         d.id ?? "__root__"
       ))
-    ] }) }) : null
+    ] }) })
   ] });
 }
 function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropPayload, actions, className = "" }) {