@factorialco/f0-react 3.2.2 → 3.2.4

package/dist/experimental.js

@@ -2,8 +2,8 @@ import { h as ga, B as pa, i as ba, j as xa, k as Dt, l as Be, m as Te, n as va,
 import { c1 as Kc, c0 as qc, cd as Yc, bZ as Jc, b_ as Zc, bS as Xc, cg as Qc, bT as ed, bU as td, ch as nd, b$ as ad, c9 as rd, ca as id, ce as ld, bV as sd, c3 as od, c2 as cd, bW as dd, bX as ud, cb as fd, ci as md, cc as hd, cf as gd, c8 as pd, c5 as bd, c7 as xd, c4 as vd, bY as yd, c6 as wd } from "./F0CanvasPanel-C3fJQSVe.js";
 import { jsx as e, jsxs as o, Fragment as Z } from "react/jsx-runtime";
 import ue, { forwardRef as G, useRef as j, useTransition as ni, useState as D, useLayoutEffect as Tn, useId as pt, useContext as Pe, createContext as Qe, useEffect as W, useCallback as ne, useMemo as q, Fragment as ai, isValidElement as ri, cloneElement as zn, Children as Rn } from "react";
-import { C as ii, P as li, a as Bn, M as si, p as oi, b as ci, R as Mt, c as $n, u as di, d as ui, e as fi, f as mi, g as hi, h as Mn, S as gi, A as pi, B as bi, L as xi, i as vi, V as yi, j as wi, k as Ni, l as Ci, O as Ii } from "./useDataCollectionSource-Dd1Hv_zM.js";
-import { r as Cd, s as Id, o as kd, H as Sd, t as Fd, z as Ad, a8 as Ld, G as Od, q as Pd, aa as Ed, a9 as _d, Q as Dd, ad as Td, F as zd, Y as Rd, U as Bd, J as $d, af as Md, K as Wd, Z as jd, _ as Vd, v as Ud, ab as Hd, ac as Gd, N as Kd, $ as qd, a5 as Yd, a7 as Jd, w as Zd, y as Xd, D as Qd, W as eu, ae as tu, X as nu, T as au, ag as ru, x as iu, E as lu, m as su, n as ou, a1 as cu, a2 as du, a6 as uu, I as fu, a3 as mu, a0 as hu, a4 as gu } from "./useDataCollectionSource-Dd1Hv_zM.js";
+import { C as ii, P as li, a as Bn, M as si, p as oi, b as ci, R as Mt, c as $n, u as di, d as ui, e as fi, f as mi, g as hi, h as Mn, S as gi, A as pi, B as bi, L as xi, i as vi, V as yi, j as wi, k as Ni, l as Ci, O as Ii } from "./useDataCollectionSource-DAyA5jD3.js";
+import { r as Cd, s as Id, o as kd, H as Sd, t as Fd, z as Ad, a8 as Ld, G as Od, q as Pd, aa as Ed, a9 as _d, Q as Dd, ad as Td, F as zd, Y as Rd, U as Bd, J as $d, af as Md, K as Wd, Z as jd, _ as Vd, v as Ud, ab as Hd, ac as Gd, N as Kd, $ as qd, a5 as Yd, a7 as Jd, w as Zd, y as Xd, D as Qd, W as eu, ae as tu, X as nu, T as au, ag as ru, x as iu, E as lu, m as su, n as ou, a1 as cu, a2 as du, a6 as uu, I as fu, a3 as mu, a0 as hu, a4 as gu } from "./useDataCollectionSource-DAyA5jD3.js";
 const ki = ga("Search", [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]

package/dist/f0.js

@@ -6,8 +6,8 @@ import _t, { forwardRef as Pr, useRef as fe, useImperativeHandle as _3, Children
 import { T as c2, y as S3, z as C3, B as T3, C as D3, D as f2, E as sv, G as Bx, H as d2, I as h2, J as v2, K as A3, L as M3, M as E3, N as L3, O as N3, F as I3 } from "./useChatHistory-shjDpEO2.js";
 import { A as Uge, s as Yge, t as Xge, w as qge, l as Zge, i as jge, q as Kge, x as Qge, p as Jge, r as eme, j as tme, e as rme, P as nme, g as ime, k as ame, h as ome, a as sme, n as lme, m as ume, o as cme, b as fme, f as dme, v as hme, c as vme, d as pme, u as gme } from "./useChatHistory-shjDpEO2.js";
 import { createPortal as zx, unstable_batchedUpdates as ud } from "react-dom";
-import { C as R3, F as k3, ah as p2, ai as P3, aj as O3, ak as B3, al as Vx, am as Fx, G as z3, an as V3, Y as F3, a8 as G3, ao as H3, Q as W3, ap as $3, aq as U3, c as $p, ar as zf, R as Gx, u as Hx, W as g2, O as Wx, as as m2, at as XS, au as $x, o as Y3, d as y2, $ as b2, av as X3, aw as q3, ax as Z3, ay as j3, az as K3, M as Q3 } from "./useDataCollectionSource-Dd1Hv_zM.js";
-import { r as yme, s as bme, H as _me, t as xme, z as wme, aQ as Sme, aP as Cme, aL as Tme, aB as Dme, aA as Ame, aC as Mme, aD as Eme, aa as Lme, a9 as Nme, ad as Ime, U as Rme, J as kme, af as Pme, K as Ome, v as Bme, aR as zme, ab as Vme, ac as Fme, N as Gme, w as Hme, P as Wme, y as $me, D as Ume, ae as Yme, T as Xme, ag as qme, x as Zme, E as jme, aT as Kme, m as Qme, n as Jme, aK as eye, aG as tye, aF as rye, aS as nye, a6 as iye, aI as aye, aJ as oye, I as sye, aU as lye, aV as uye, e as cye, aM as fye, aN as dye, aO as hye, aH as vye, f as pye, h as gye, aE as mye, aW as yye } from "./useDataCollectionSource-Dd1Hv_zM.js";
+import { C as R3, F as k3, ah as p2, ai as P3, aj as O3, ak as B3, al as Vx, am as Fx, G as z3, an as V3, Y as F3, a8 as G3, ao as H3, Q as W3, ap as $3, aq as U3, c as $p, ar as zf, R as Gx, u as Hx, W as g2, O as Wx, as as m2, at as XS, au as $x, o as Y3, d as y2, $ as b2, av as X3, aw as q3, ax as Z3, ay as j3, az as K3, M as Q3 } from "./useDataCollectionSource-DAyA5jD3.js";
+import { r as yme, s as bme, H as _me, t as xme, z as wme, aQ as Sme, aP as Cme, aL as Tme, aB as Dme, aA as Ame, aC as Mme, aD as Eme, aa as Lme, a9 as Nme, ad as Ime, U as Rme, J as kme, af as Pme, K as Ome, v as Bme, aR as zme, ab as Vme, ac as Fme, N as Gme, w as Hme, P as Wme, y as $me, D as Ume, ae as Yme, T as Xme, ag as qme, x as Zme, E as jme, aT as Kme, m as Qme, n as Jme, aK as eye, aG as tye, aF as rye, aS as nye, a6 as iye, aI as aye, aJ as oye, I as sye, aU as lye, aV as uye, e as cye, aM as fye, aN as dye, aO as hye, aH as vye, f as pye, h as gye, aE as mye, aW as yye } from "./useDataCollectionSource-DAyA5jD3.js";
 import { utils as Nl, write as _2 } from "./xlsx-Bedf3nwD.js";
 import { defaultTranslations as _ye } from "./i18n-provider-defaults.js";
 import './f0.css';const J3 = {
@@ -58498,25 +58498,26 @@ const Ace = (r) => ie(
     className: t,
     children: n,
     container: i,
-    ...a
-  }, o) => {
-    const [s, l] = ce(), u = fe(null), c = le(() => {
-      u.current && T3(
-        u.current,
+    defaultContainerId: a = "content",
+    ...o
+  }, s) => {
+    const [l, u] = ce(), c = fe(null), f = le(() => {
+      c.current && T3(
+        c.current,
         { x: [-15, 15, -10, 10, 0] },
         { duration: 0.3, ease: "easeInOut" }
       );
-    }, [u.current]);
+    }, [c.current]);
     ge(() => {
-      l(i !== void 0 ? i : document.getElementById("content") ?? document.body);
-    }, [i]);
-    const f = VF();
-    return s === void 0 ? null : /* @__PURE__ */ z(pG, { container: s, children: [
-      f.showOverlay && /* @__PURE__ */ S(FF, {}),
+      u(i !== void 0 ? i : document.getElementById(a) ?? document.getElementById("content") ?? document.body);
+    }, [i, a]);
+    const d = VF();
+    return l === void 0 ? null : /* @__PURE__ */ z(pG, { container: l, children: [
+      d.showOverlay && /* @__PURE__ */ S(FF, {}),
       /* @__PURE__ */ S(
         UI,
         {
-          ref: o,
+          ref: s,
           className: ie(
             "fixed inset-0 z-50 flex items-center justify-center overflow-hidden",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -58528,28 +58529,28 @@ const Ace = (r) => ie(
           style: {
             transition: "all 2s 100ms !important"
           },
-          ...a,
-          onClick: (d) => {
-            if (a.onPointerDownOutside) {
-              const h = new CustomEvent("pointerdownoutside", {
-                detail: { originalEvent: d.nativeEvent }
+          ...o,
+          onClick: (h) => {
+            if (o.onPointerDownOutside) {
+              const v = new CustomEvent("pointerdownoutside", {
+                detail: { originalEvent: h.nativeEvent }
               });
-              a.onPointerDownOutside(h);
+              o.onPointerDownOutside(v);
             }
-            f.modal && c(), d.preventDefault(), d.stopPropagation();
+            d.modal && f(), h.preventDefault(), h.stopPropagation();
           },
           children: /* @__PURE__ */ S(
             "div",
             {
-              ref: u,
+              ref: c,
               className: ie(
                 "relative flex w-[90%] flex-col rounded-xl bg-f1-background shadow-lg pointer-events-auto",
                 "group-data-[state=open]/dialog:animate-in group-data-[state=closed]/dialog:animate-out overflow-hidden",
                 Ace(e),
                 t
               ),
-              onClick: (d) => {
-                d.preventDefault(), d.stopPropagation();
+              onClick: (h) => {
+                h.preventDefault(), h.stopPropagation();
               },
               children: n
             }
@@ -58596,24 +58597,25 @@ const Mce = () => gG("(max-width: 560px)", {
   modal: a = !1,
   showOverlay: o = !0,
   size: s = "md",
-  fullHeight: l = !1
+  fullHeight: l = !1,
+  container: u
 }) => {
-  const [u, c] = ce(null), f = le((b) => {
-    c(b);
-  }, []), d = Mce(), h = le(
-    (b) => {
-      e?.(b);
+  const [c, f] = ce(null), d = le((w) => {
+    f(w);
+  }, []), h = Mce(), v = le(
+    (w) => {
+      e?.(w);
     },
     [e]
-  ), v = fe(void 0);
+  ), p = fe(void 0);
   ge(() => {
-    v.current === !0 && !r && t(), v.current = r;
+    p.current === !0 && !r && t(), p.current = r;
   }, [r, t]);
-  const p = se(() => n === "left" || n === "right", [n]), g = se(() => p ? "sm" : (s && n !== "center" && console.warn(
+  const g = se(() => n === "left" || n === "right", [n]), m = se(() => g ? "sm" : (s && n !== "center" && console.warn(
     "F0Dialog: `size` prop is only applicable to center position"
-  ), s), [p, s, n]), m = (b) => {
-    a && b.preventDefault();
-  }, y = {
+  ), s), [g, s, n]), y = (w) => {
+    a && w.preventDefault();
+  }, b = {
     left: "slideRight",
     right: "slideLeft",
     center: "zoom"
@@ -58624,9 +58626,9 @@ const Mce = () => gG("(max-width: 560px)", {
       isOpen: r,
       onClose: t,
       position: n,
-      portalContainer: u ?? null,
+      portalContainer: c ?? null,
       shownBottomSheet: !0,
-      children: d ? /* @__PURE__ */ z(mG, { open: r, onOpenChange: h, children: [
+      children: h ? /* @__PURE__ */ z(mG, { open: r, onOpenChange: v, children: [
         /* @__PURE__ */ S(
           yG,
           {
@@ -58636,7 +58638,7 @@ const Mce = () => gG("(max-width: 560px)", {
         /* @__PURE__ */ S(
           bG,
           {
-            ref: f,
+            ref: d,
             className: "max-h-full bg-f1-background",
             children: i
           }
@@ -58647,23 +58649,25 @@ const Mce = () => gG("(max-width: 560px)", {
           Dce,
           {
             open: r,
-            onOpenChange: h,
+            onOpenChange: v,
             modal: a,
             showOverlay: o,
             children: /* @__PURE__ */ S(
               GF,
               {
-                ref: f,
+                ref: d,
+                container: u,
+                defaultContainerId: n === "center" ? "f0-overlay-root" : "content",
                 wrapperClassName: Ece({ position: n }),
                 className: ie(
-                  Lce({ size: g }),
+                  Lce({ size: m }),
                   l && "h-full"
                 ),
-                animation: y[n],
-                onOpenAutoFocus: (b) => b.preventDefault(),
-                onEscapeKeyDown: m,
-                onPointerDownOutside: m,
-                onInteractOutside: m,
+                animation: b[n],
+                onOpenAutoFocus: (w) => w.preventDefault(),
+                onEscapeKeyDown: y,
+                onPointerDownOutside: y,
+                onInteractOutside: y,
                 children: i
               }
             )
@@ -58689,13 +58693,14 @@ const Mce = () => gG("(max-width: 560px)", {
   modal: h = !1,
   activeTabId: v,
   setActiveTabId: p,
-  disableContentPadding: g
+  disableContentPadding: g,
+  container: m
 }) => {
-  const [m, y] = ce(t);
+  const [y, b] = ce(t);
   ge(() => {
-    y(t);
+    b(t);
   }, [t]);
-  const b = se(() => /* @__PURE__ */ z(st, { children: [
+  const _ = se(() => /* @__PURE__ */ z(st, { children: [
     /* @__PURE__ */ S(
       BF,
       {
@@ -58715,7 +58720,7 @@ const Mce = () => gG("(max-width: 560px)", {
       {
         primaryAction: o ?? [],
         secondaryAction: s ?? [],
-        onClose: () => y(!1)
+        onClose: () => b(!1)
       }
     )
   ] }), [
@@ -58735,15 +58740,16 @@ const Mce = () => gG("(max-width: 560px)", {
   return /* @__PURE__ */ S(
     HF,
     {
-      isOpen: m,
+      isOpen: y,
       onClose: e,
       position: i,
       size: a,
       modal: h,
       showOverlay: h,
       fullHeight: !0,
-      onOpenChange: y,
-      children: b
+      onOpenChange: b,
+      container: m,
+      children: _
     }
   );
 }, Nce = IF, $F = (r) => {
@@ -58995,13 +59001,14 @@ const SS = ({
   setActiveTabId: v,
   disableContentPadding: p,
   variant: g = "default",
-  type: m = "default"
+  type: m = "default",
+  container: y
 }) => {
-  const [y, b] = ce(t);
+  const [b, _] = ce(t);
   ge(() => {
-    b(t);
+    _(t);
   }, [t]);
-  const _ = se(() => /* @__PURE__ */ z(st, { children: [
+  const w = se(() => /* @__PURE__ */ z(st, { children: [
     g !== "notification" && /* @__PURE__ */ S(
       BF,
       {
@@ -59023,7 +59030,7 @@ const SS = ({
         secondaryAction: o ?? [],
         variant: g,
         type: m,
-        onClose: () => b(!1)
+        onClose: () => _(!1)
       }
     )
   ] }), [
@@ -59045,13 +59052,14 @@ const SS = ({
   return /* @__PURE__ */ S(
     HF,
     {
-      isOpen: y,
+      isOpen: b,
       onClose: e,
       position: "center",
       size: i,
       modal: d,
-      onOpenChange: b,
-      children: _
+      onOpenChange: _,
+      container: y,
+      children: w
     }
   );
 }, Oce = IF, YF = (r) => {
@@ -67902,7 +67910,7 @@ const Nh = /* @__PURE__ */ new Set(), Cx = /* @__PURE__ */ new Set(), U0 = () =>
   const t = fe(null), [n, i] = ce(t.current);
   return b3(() => {
     i(t.current);
-  }, []), /* @__PURE__ */ S(uve.Provider, { value: { element: n }, children: /* @__PURE__ */ S(
+  }, []), /* @__PURE__ */ S(uve.Provider, { value: { element: n }, children: /* @__PURE__ */ z(
     "div",
     {
       ref: t,
@@ -67910,7 +67918,10 @@ const Nh = /* @__PURE__ */ new Set(), Cx = /* @__PURE__ */ new Set(), U0 = () =>
       className: ie({
         "flex h-screen w-screen flex-col bg-[#F5F6F8] dark:bg-[#0D1625]": e
       }),
-      children: r
+      children: [
+        r,
+        /* @__PURE__ */ S("div", { id: "f0-overlay-root", className: "contents" })
+      ]
     }
   ) });
 }, fve = ({