@flytedan/flytebot-design-system 0.12.2 → 0.12.3

package/dist/index.cjs

@@ -388,6 +388,16 @@ var portal = (node) => {
   if (typeof document !== "undefined") return (0, import_react_dom.createPortal)(node, document.body);
   return node;
 };
+var ROOT_LAYER = 0;
+var LAYER_STEP = 10;
+var LayerContext = React.createContext(ROOT_LAYER);
+var useLayer = () => React.useContext(LayerContext);
+var useOverlayLayer = (base) => {
+  const parent = useLayer();
+  return parent === ROOT_LAYER ? base : parent + LAYER_STEP;
+};
+var LayerProvider = ({ zIndex, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayerContext.Provider, { value: zIndex, children });
+var POPOVER_BASE = 140;
 function Popover({
   open,
   anchorRef,
@@ -424,6 +434,7 @@ function Popover({
     layerRef: ref
   });
   const restore = React.useRef(null);
+  const zIndex = useOverlayLayer(POPOVER_BASE);
   React.useEffect(() => {
     if (!open) return;
     restore.current = typeof document !== "undefined" ? document.activeElement : null;
@@ -462,7 +473,7 @@ function Popover({
   }, [open, closeOnOutside, closeOnEscape, onClose, anchorRef, triggerRef]);
   if (!open || !pos) return null;
   return portal(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         ref,
@@ -492,8 +503,12 @@ function Popover({
           // ordinary content that simply happens to be taller than some fixed number.
           maxHeight: maxHeight != null ? Math.min(maxHeight, pos.maxH) : pos.maxH,
           transformOrigin: pos.side === "top" ? "bottom center" : "top center",
-          zIndex: 140,
-          ...style
+          // Last, and always: a caller's `style` (Select, DatePicker, TimePicker all pass
+          // one) must never be able to clobber the computed layer — that silent override
+          // via object-spread order is exactly how the Select listbox (130) ended up
+          // fixed below the Popover (140) it opens from. zIndex is never a caller concern.
+          ...style,
+          zIndex
         },
         children: [
           header != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-pop-header", children: header }) : null,
@@ -501,7 +516,7 @@ function Popover({
           footer != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fd-pop-footer", children: footer }) : null
         ]
       }
-    )
+    ) })
   );
 }
 var isItem = (it) => !!it && it.kind !== "separator" && it.kind !== "section" && it.kind !== "custom" && !it.disabled;
@@ -820,7 +835,9 @@ function Collapsible({
 var React3 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var DRAWER_BASE = 90;
 function Drawer({ open = true, title, onClose, footer, children, className = "", ...rest }) {
+  const zIndex = useOverlayLayer(DRAWER_BASE);
   const [closing, setClosing] = React3.useState(false);
   const close = React3.useCallback(() => {
     if (!onClose) return;
@@ -837,9 +854,9 @@ function Drawer({ open = true, title, onClose, footer, children, className = "",
   }, [open, onClose, close]);
   if (!open) return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block" }, onClick: close }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("aside", { className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(LayerProvider, { zIndex, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("aside", { className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fd-card-head-title", children: title }),
           onClose ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { className: "ph ph-x" }) }) : null
@@ -1328,6 +1345,7 @@ function Toast({ title, children, tone = "success", onUndo, onDismiss, className
 // src/components/feedback/Tooltip.tsx
 var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var TOOLTIP_BASE = 150;
 var CLOSE_DELAY_MS = 120;
 function Tooltip({ label, placement = "top", children, className = "" }) {
   const anchorRef = React6.useRef(null);
@@ -1371,6 +1389,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
     layerRef: bubbleRef,
     onDetach: hide
   });
+  const zIndex = useOverlayLayer(TOOLTIP_BASE);
   React6.useEffect(() => {
     if (!open) return;
     const key = (e) => {
@@ -1434,7 +1453,7 @@ function Tooltip({ label, placement = "top", children, className = "" }) {
               ref: bubbleRef,
               role: "tooltip",
               className: ["fd-tooltip", pos.side === "bottom" ? "is-below" : "", className].filter(Boolean).join(" "),
-              style: { left: pos.left, top: pos.top == null ? "auto" : pos.top, bottom: pos.bottom == null ? "auto" : pos.bottom },
+              style: { left: pos.left, top: pos.top == null ? "auto" : pos.top, bottom: pos.bottom == null ? "auto" : pos.bottom, zIndex },
               onPointerEnter: (e) => {
                 if (isMouse(e)) cancelClose();
               },
@@ -3847,7 +3866,7 @@ function Select({
         matchWidth: "min",
         minWidth: 260,
         role: "presentation",
-        style: { maxWidth: 380, zIndex: 130 },
+        style: { maxWidth: 380 },
         header: hasSearch ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "fd-pop-search", children: [
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { className: "ph ph-magnifying-glass", style: { color: "var(--text-muted)", fontSize: 14 } }),
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
@@ -4111,7 +4130,7 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
         placement: "bottom-start",
         offset: 6,
         role: "presentation",
-        style: { width: "max-content", zIndex: 130 },
+        style: { width: "max-content" },
         children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Calendar,
           {
@@ -4263,7 +4282,6 @@ function TimePicker({ label, help, error, required = false, disabled = false, va
         offset: 6,
         width: 262,
         role: "presentation",
-        style: { zIndex: 130 },
         footer: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(React24.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "button",