@octaviaflow/core 3.0.18-beta.41 → 3.0.18-beta.42

package/dist/index.js

@@ -7771,10 +7771,12 @@ import {
   useCallback as useCallback12,
   useEffect as useEffect9,
   useId as useId15,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo9,
   useRef as useRef14,
   useState as useState14
 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
 import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
 function OptionDropdown({
   value,
@@ -7792,6 +7794,22 @@ function OptionDropdown({
   const panelRef = useRef14(null);
   const inputRef = useRef14(null);
   const listboxId = useId15();
+  const [panelPos, setPanelPos] = useState14(null);
+  const updatePanelPos = useCallback12(() => {
+    if (!triggerRef.current) return;
+    const r = triggerRef.current.getBoundingClientRect();
+    setPanelPos({ top: r.bottom + 4, left: r.left, width: r.width });
+  }, []);
+  useLayoutEffect3(() => {
+    if (!open) return;
+    updatePanelPos();
+    window.addEventListener("scroll", updatePanelPos, true);
+    window.addEventListener("resize", updatePanelPos);
+    return () => {
+      window.removeEventListener("scroll", updatePanelPos, true);
+      window.removeEventListener("resize", updatePanelPos);
+    };
+  }, [open, updatePanelPos]);
   const showSearch = searchable === true || searchable === "auto" && options.length > 8;
   const selected = options.find((o) => o.value === value);
   const filtered = useMemo9(() => {
@@ -7878,54 +7896,71 @@ function OptionDropdown({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs27("div", { ref: panelRef, className: "ods-cb-dd__panel", role: "presentation", children: [
-      showSearch && /* @__PURE__ */ jsxs27("div", { className: "ods-cb-dd__search", children: [
-        /* @__PURE__ */ jsx28(SearchIcon4, { "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx28(
-          "input",
-          {
-            ref: inputRef,
-            value: query,
-            onChange: (e) => setQuery(e.target.value),
-            placeholder: "Search\u2026",
-            "aria-label": "Search options"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs27("ul", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "ods-cb-dd__list", children: [
-        filtered.length === 0 && /* @__PURE__ */ jsx28("li", { className: "ods-cb-dd__empty", children: "No matches" }),
-        filtered.map((opt, idx) => /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsxs27(
-          "button",
-          {
-            type: "button",
-            role: "option",
-            "aria-selected": opt.value === value,
-            className: cn(
-              "ods-cb-dd__opt",
-              opt.value === value && "ods-cb-dd__opt--selected",
-              idx === activeIdx && "ods-cb-dd__opt--active"
-            ),
-            onClick: () => select(opt.value),
-            onMouseEnter: () => setActiveIdx(idx),
-            children: [
-              opt.icon && /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-icon", "aria-hidden": "true", children: opt.icon }),
-              opt.symbol && /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-symbol", children: opt.symbol }),
-              /* @__PURE__ */ jsxs27("span", { className: "ods-cb-dd__opt-text", children: [
-                /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-label", children: opt.label }),
-                opt.description && /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-desc", children: opt.description })
-              ] }),
-              opt.value === value && /* @__PURE__ */ jsx28(
-                CheckmarkIcon4,
+    open && panelPos && typeof document !== "undefined" && createPortal5(
+      /* @__PURE__ */ jsxs27(
+        "div",
+        {
+          ref: panelRef,
+          className: "ods-cb-dd__panel ods-cb-dd__panel--portal",
+          role: "presentation",
+          style: {
+            position: "fixed",
+            top: panelPos.top,
+            left: panelPos.left,
+            minWidth: panelPos.width
+          },
+          children: [
+            showSearch && /* @__PURE__ */ jsxs27("div", { className: "ods-cb-dd__search", children: [
+              /* @__PURE__ */ jsx28(SearchIcon4, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx28(
+                "input",
                 {
-                  "aria-hidden": "true",
-                  className: "ods-cb-dd__opt-check"
+                  ref: inputRef,
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: "Search\u2026",
+                  "aria-label": "Search options"
                 }
               )
-            ]
-          }
-        ) }, opt.value))
-      ] })
-    ] })
+            ] }),
+            /* @__PURE__ */ jsxs27("ul", { id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "ods-cb-dd__list", children: [
+              filtered.length === 0 && /* @__PURE__ */ jsx28("li", { className: "ods-cb-dd__empty", children: "No matches" }),
+              filtered.map((opt, idx) => /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsxs27(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": opt.value === value,
+                  className: cn(
+                    "ods-cb-dd__opt",
+                    opt.value === value && "ods-cb-dd__opt--selected",
+                    idx === activeIdx && "ods-cb-dd__opt--active"
+                  ),
+                  onClick: () => select(opt.value),
+                  onMouseEnter: () => setActiveIdx(idx),
+                  children: [
+                    opt.icon && /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-icon", "aria-hidden": "true", children: opt.icon }),
+                    opt.symbol && /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-symbol", children: opt.symbol }),
+                    /* @__PURE__ */ jsxs27("span", { className: "ods-cb-dd__opt-text", children: [
+                      /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-label", children: opt.label }),
+                      opt.description && /* @__PURE__ */ jsx28("span", { className: "ods-cb-dd__opt-desc", children: opt.description })
+                    ] }),
+                    opt.value === value && /* @__PURE__ */ jsx28(
+                      CheckmarkIcon4,
+                      {
+                        "aria-hidden": "true",
+                        className: "ods-cb-dd__opt-check"
+                      }
+                    )
+                  ]
+                }
+              ) }, opt.value))
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
   ] });
 }
 var ConditionBuilder = forwardRef26(function ConditionBuilder2({
@@ -8273,7 +8308,7 @@ import {
   useRef as useRef16
 } from "react";
 import { FocusScope, OverlayProvider, useDialog, useModal, useOverlay } from "react-aria";
-import { createPortal as createPortal5 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 
 // src/utils/motion.ts
 var odsMotion = {
@@ -8429,7 +8464,7 @@ var DialogContent = forwardRef28(function DialogContent2({
 DialogContent.displayName = "Dialog.Content";
 var Dialog = forwardRef28(function Dialog2(props, ref) {
   if (typeof document === "undefined") return null;
-  return createPortal5(
+  return createPortal6(
     /* @__PURE__ */ jsx30(OverlayProvider, { children: /* @__PURE__ */ jsx30(DialogContent, { ref, ...props }) }),
     document.body
   );
@@ -9048,11 +9083,11 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect14,
   useId as useId19,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useRef as useRef18,
   useState as useState18
 } from "react";
-import { createPortal as createPortal6 } from "react-dom";
+import { createPortal as createPortal7 } from "react-dom";
 import { Fragment as Fragment17, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
 function flipIntoViewport(cursor, panelRect, viewport, margin = 8) {
   if (!panelRect) return cursor;
@@ -9118,7 +9153,7 @@ var ContextMenu = forwardRef33(
       setActiveIndex(navigableIndices[0] ?? -1);
       onOpenChange?.(true);
     };
-    useLayoutEffect3(() => {
+    useLayoutEffect4(() => {
       if (!open) return;
       const panel2 = panelRef.current;
       if (!panel2) return;
@@ -9285,7 +9320,7 @@ var ContextMenu = forwardRef33(
           children
         }
       ),
-      createPortal6(panel, portalTarget)
+      createPortal7(panel, portalTarget)
     ] });
   }
 );
@@ -10824,12 +10859,12 @@ import {
 import {
   useCallback as useCallback18,
   useEffect as useEffect16,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo12,
   useRef as useRef20,
   useState as useState20
 } from "react";
-import { createPortal as createPortal7 } from "react-dom";
+import { createPortal as createPortal8 } from "react-dom";
 import { Fragment as Fragment20, jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
 function readValue(row, col) {
   if (typeof col.accessor === "function") return col.accessor(row);
@@ -10846,7 +10881,7 @@ function PortalMenu({
 }) {
   const menuRef = useRef20(null);
   const [pos, setPos] = useState20(null);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!open) return;
     const update = () => {
       const t = triggerRef.current;
@@ -10892,7 +10927,7 @@ function PortalMenu({
     right: align === "end" ? pos.right : "auto",
     zIndex: 1e3
   };
-  return createPortal7(
+  return createPortal8(
     /* @__PURE__ */ jsx38("div", { ref: menuRef, className: cn("ods-datatable__menu", className), style, children }),
     document.body
   );
@@ -12337,7 +12372,7 @@ Drawer.displayName = "Drawer";
 import { AnimatePresence as AnimatePresence13, motion as motion19 } from "framer-motion";
 import { useEffect as useEffect18, useMemo as useMemo14, useRef as useRef22 } from "react";
 import { useButton as useButton4, useMenu, useMenuItem, useMenuTrigger } from "react-aria";
-import { createPortal as createPortal8 } from "react-dom";
+import { createPortal as createPortal9 } from "react-dom";
 import { Fragment as Fragment22, jsx as jsx44, jsxs as jsxs43 } from "react/jsx-runtime";
 function MenuItemComponent({ item, state, onAction }) {
   const ref = useRef22(null);
@@ -12501,7 +12536,7 @@ function MenuPopup({
     }
   ) });
   if (typeof document !== "undefined") {
-    return createPortal8(portalContent, document.body);
+    return createPortal9(portalContent, document.body);
   }
   return null;
 }
@@ -15797,8 +15832,8 @@ var Heatmap = forwardRef48(
 Heatmap.displayName = "Heatmap";
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback24, useEffect as useEffect24, useLayoutEffect as useLayoutEffect5, useRef as useRef29, useState as useState29 } from "react";
-import { createPortal as createPortal9 } from "react-dom";
+import { useCallback as useCallback24, useEffect as useEffect24, useLayoutEffect as useLayoutEffect6, useRef as useRef29, useState as useState29 } from "react";
+import { createPortal as createPortal10 } from "react-dom";
 import { Fragment as Fragment25, jsx as jsx59, jsxs as jsxs56 } from "react/jsx-runtime";
 function computePosition3(rect, panelRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
@@ -15854,7 +15889,7 @@ function HoverCard({
     const panelRect = panelRef.current.getBoundingClientRect();
     setCoords(computePosition3(trigRect, panelRect, placement, offset));
   }, [placement, offset]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (!open) return;
     reposition();
     const id = requestAnimationFrame(reposition);
@@ -15882,7 +15917,7 @@ function HoverCard({
       children
     }
   );
-  const portal = typeof document !== "undefined" && open ? createPortal9(
+  const portal = typeof document !== "undefined" && open ? createPortal10(
     /* @__PURE__ */ jsx59(
       "div",
       {
@@ -18115,12 +18150,12 @@ import {
   useCallback as useCallback26,
   useEffect as useEffect28,
   useId as useId35,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo22,
   useRef as useRef33,
   useState as useState33
 } from "react";
-import { createPortal as createPortal10 } from "react-dom";
+import { createPortal as createPortal11 } from "react-dom";
 import {
   ChevronDownIcon as ChevronDownIcon6,
   CloseIcon as CloseIcon11,
@@ -18242,7 +18277,7 @@ var MultiSelect = forwardRef60(
     useEffect28(() => setActiveIdx(0), [query, open]);
     const [fitCount, setFitCount] = useState33(selectedValues.length);
     const [tick, setTick] = useState33(0);
-    useLayoutEffect6(() => {
+    useLayoutEffect7(() => {
       if (maxVisibleTags !== void 0) {
         setFitCount(Math.min(selectedValues.length, maxVisibleTags));
         return;
@@ -18492,7 +18527,7 @@ var MultiSelect = forwardRef60(
               ]
             }
           ),
-          typeof document !== "undefined" && createPortal10(
+          typeof document !== "undefined" && createPortal11(
             /* @__PURE__ */ jsx70(AnimatePresence17, { children: open && /* @__PURE__ */ jsxs68(
               motion26.div,
               {
@@ -20495,8 +20530,8 @@ var PipelineCard = forwardRef66(
 PipelineCard.displayName = "PipelineCard";
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback31, useEffect as useEffect30, useLayoutEffect as useLayoutEffect7, useRef as useRef36, useState as useState37 } from "react";
-import { createPortal as createPortal11 } from "react-dom";
+import { useCallback as useCallback31, useEffect as useEffect30, useLayoutEffect as useLayoutEffect8, useRef as useRef36, useState as useState37 } from "react";
+import { createPortal as createPortal12 } from "react-dom";
 import { Fragment as Fragment34, jsx as jsx78, jsxs as jsxs76 } from "react/jsx-runtime";
 function computePosition4(rect, popRect, placement, offset) {
   const cx = rect.left + rect.width / 2;
@@ -20545,7 +20580,7 @@ function Popover({
     const popRect = popRef.current.getBoundingClientRect();
     setCoords(computePosition4(trigRect, popRect, placement, offset));
   }, [placement, offset]);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (!open) return;
     reposition();
     const id = requestAnimationFrame(reposition);
@@ -20593,7 +20628,7 @@ function Popover({
       children
     }
   );
-  const portal = typeof document !== "undefined" && open ? createPortal11(
+  const portal = typeof document !== "undefined" && open ? createPortal12(
     /* @__PURE__ */ jsxs76(
       "div",
       {
@@ -22177,7 +22212,7 @@ import {
   forwardRef as forwardRef78,
   useCallback as useCallback33,
   useEffect as useEffect32,
-  useLayoutEffect as useLayoutEffect8,
+  useLayoutEffect as useLayoutEffect9,
   useRef as useRef40,
   useState as useState40
 } from "react";
@@ -22221,7 +22256,7 @@ var Resizable = forwardRef78(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    useLayoutEffect8(() => {
+    useLayoutEffect9(() => {
       const el = wrapRef.current;
       if (!el) return;
       const t = direction === "horizontal" ? el.offsetWidth : el.offsetHeight;
@@ -22596,7 +22631,7 @@ function SettingsRow({
 // src/components/Sheet/Sheet.tsx
 import { AnimatePresence as AnimatePresence18, motion as motion28 } from "framer-motion";
 import { useEffect as useEffect33 } from "react";
-import { createPortal as createPortal12 } from "react-dom";
+import { createPortal as createPortal13 } from "react-dom";
 import { Fragment as Fragment37, jsx as jsx94, jsxs as jsxs91 } from "react/jsx-runtime";
 var slideVariants = {
   top: { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } },
@@ -22679,7 +22714,7 @@ function Sheet({
     )
   ] }) });
   if (typeof document === "undefined") return null;
-  return createPortal12(content, document.body);
+  return createPortal13(content, document.body);
 }
 
 // src/components/Show/Show.tsx
@@ -23314,7 +23349,7 @@ SkeletonGroup.displayName = "SkeletonGroup";
 import { AnimatePresence as AnimatePresence19, motion as motion29 } from "framer-motion";
 import { useRef as useRef42 } from "react";
 import { FocusScope as FocusScope2, OverlayProvider as OverlayProvider2, useDialog as useDialog2, useModal as useModal2, useOverlay as useOverlay2 } from "react-aria";
-import { createPortal as createPortal13 } from "react-dom";
+import { createPortal as createPortal14 } from "react-dom";
 import { Fragment as Fragment39, jsx as jsx98, jsxs as jsxs93 } from "react/jsx-runtime";
 var slideVariants2 = {
   left: {
@@ -23406,7 +23441,7 @@ function SlideoutContent({
 }
 function SlideoutPanel(props) {
   if (typeof document === "undefined") return null;
-  return createPortal13(
+  return createPortal14(
     /* @__PURE__ */ jsx98(OverlayProvider2, { children: /* @__PURE__ */ jsx98(SlideoutContent, { ...props }) }),
     document.body
   );
@@ -24041,11 +24076,11 @@ import {
   forwardRef as forwardRef86,
   useCallback as useCallback36,
   useEffect as useEffect36,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo25,
   useState as useState43
 } from "react";
-import { createPortal as createPortal14 } from "react-dom";
+import { createPortal as createPortal15 } from "react-dom";
 import { jsx as jsx103, jsxs as jsxs97 } from "react/jsx-runtime";
 var Spotlight = forwardRef86(
   function Spotlight2({
@@ -24083,7 +24118,7 @@ var Spotlight = forwardRef86(
         height: window.innerHeight
       });
     }, [open, target]);
-    useLayoutEffect9(() => {
+    useLayoutEffect10(() => {
       measure();
     }, [measure]);
     useEffect36(() => {
@@ -24112,7 +24147,7 @@ var Spotlight = forwardRef86(
       width: rect.width + padding * 2,
       height: rect.height + padding * 2
     } : null;
-    return createPortal14(
+    return createPortal15(
       /* @__PURE__ */ jsx103(AnimatePresence20, { children: open && /* @__PURE__ */ jsxs97(
         motion30.div,
         {
@@ -25852,7 +25887,7 @@ import {
   useState as useState51
 } from "react";
 import { useTextField } from "react-aria";
-import { createPortal as createPortal15 } from "react-dom";
+import { createPortal as createPortal16 } from "react-dom";
 import { CopyIcon as CopyIcon5, CutIcon } from "@octaviaflow/icons";
 
 // src/hooks/useTextareaCommands.ts
@@ -26662,7 +26697,7 @@ var Textarea = forwardRef96(
                 "aria-activedescendant": cmdEnabled && cmdPalette.isOpen && cmdPalette.items[cmdPalette.activeIndex] ? `${baseId}-cmd-${cmdPalette.items[cmdPalette.activeIndex].id}` : void 0
               }
             ),
-            cmdEnabled && cmdPalette.isOpen && cmdPalette.items.length > 0 && typeof document !== "undefined" && createPortal15(
+            cmdEnabled && cmdPalette.isOpen && cmdPalette.items.length > 0 && typeof document !== "undefined" && createPortal16(
               /* @__PURE__ */ jsx115(
                 "ul",
                 {
@@ -26705,7 +26740,7 @@ var Textarea = forwardRef96(
               ),
               document.body
             ),
-            selectionToolbar && sel.active && sel.rect && typeof document !== "undefined" && createPortal15(
+            selectionToolbar && sel.active && sel.rect && typeof document !== "undefined" && createPortal16(
               /* @__PURE__ */ jsxs108(
                 "div",
                 {
@@ -27630,7 +27665,7 @@ import {
   useRef as useRef51,
   useState as useState54
 } from "react";
-import { createPortal as createPortal16 } from "react-dom";
+import { createPortal as createPortal17 } from "react-dom";
 import { Fragment as Fragment46, jsx as jsx119, jsxs as jsxs112 } from "react/jsx-runtime";
 var defaultIcons = {
   success: /* @__PURE__ */ jsxs112("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
@@ -27960,7 +27995,7 @@ function ToastProvider({
   }) });
   return /* @__PURE__ */ jsxs112(ToastContext.Provider, { value: ctx, children: [
     children,
-    typeof document !== "undefined" && createPortal16(containers, document.body)
+    typeof document !== "undefined" && createPortal17(containers, document.body)
   ] });
 }
 function useToast() {