@nivaro/react 0.3.40 → 0.3.42

package/dist/components/LayoutForm.js

@@ -1,70 +1,72 @@
-import { jsx as l, jsxs as d, Fragment as k } from "react/jsx-runtime";
-import w, { useMemo as ce, useState as M } from "react";
-import { NivaroField as pe } from "./NivaroField.js";
-import { CommentsSlot as fe } from "./slots/CommentsSlot.js";
-import { PipelineSlot as he } from "./slots/PipelineSlot.js";
-import { TasksSlot as ye } from "./slots/TasksSlot.js";
-import { GridFlushContext as _e } from "../shared/context.js";
-const G = {
-  __pipeline__: (o) => /* @__PURE__ */ l(he, { ...o }),
-  __comments__: (o) => /* @__PURE__ */ l(fe, { ...o }),
-  __tasks__: (o) => /* @__PURE__ */ l(ye, { ...o })
+import { jsx as r, jsxs as d, Fragment as k } from "react/jsx-runtime";
+import P, { useMemo as pe, useState as G } from "react";
+import { NivaroField as fe } from "./NivaroField.js";
+import { CommentsSlot as he } from "./slots/CommentsSlot.js";
+import { PipelineSlot as ye } from "./slots/PipelineSlot.js";
+import { TasksSlot as _e } from "./slots/TasksSlot.js";
+import { GridFlushContext as be } from "../shared/context.js";
+const T = {
+  __pipeline__: (o) => /* @__PURE__ */ r(ye, { ...o }),
+  __comments__: (o) => /* @__PURE__ */ r(he, { ...o }),
+  __tasks__: (o) => /* @__PURE__ */ r(_e, { ...o })
 };
-function be(o) {
+function me(o) {
   return { gridColumn: `span ${o ?? 12}` };
 }
-function me(o) {
+function ge(o) {
   var b;
   return ((b = o.options) == null ? void 0 : b.col_span) ?? 12;
 }
-function Me({
+function Ge({
   form: o,
   components: b,
-  className: P,
-  style: U,
-  sectionClassName: j,
-  tabStripClassName: D,
-  activeTabClassName: T,
-  inactiveTabClassName: V,
-  gridClassName: I = "nivaro-grid",
+  className: U,
+  style: j,
+  sectionClassName: D,
+  tabStripClassName: I,
+  activeTabClassName: V,
+  inactiveTabClassName: A,
+  gridClassName: $ = "nivaro-grid",
   slotRenderers: u,
   itemId: m,
-  stepperClassName: $,
-  stepNavClassName: q,
-  prevButtonClassName: z,
-  nextButtonClassName: A,
-  lastStepActions: H,
-  layoutSlug: ge
+  stepperClassName: q,
+  stepNavClassName: z,
+  prevButtonClassName: H,
+  nextButtonClassName: L,
+  lastStepActions: J,
+  layoutSlug: ve,
+  loadingFallback: x
 }) {
-  var L;
-  const { schema: s, values: J, errors: Q, setValue: W, isVisible: f, isLocked: X, isSubmitting: B, gridFlushersRef: x } = o, Y = ce(
+  var O;
+  const { schema: s, values: Q, errors: W, setValue: X, isVisible: f, isLocked: Y, isSubmitting: B, gridFlushersRef: C } = o, Z = pe(
     () => ({
       register: (e, n) => {
-        x.current.set(e, n);
+        C.current.set(e, n);
       },
       unregister: (e) => {
-        x.current.delete(e);
+        C.current.delete(e);
       }
     }),
-    [x]
-  ), [Z, C] = M(0), [R, ee] = M(/* @__PURE__ */ new Set()), [te, E] = M(null);
-  if (!s) return null;
-  const c = s.groups.filter((e) => e.type === "tab"), h = s.groups.filter((e) => e.type === "section"), K = c.length > 0, ne = K && s.tabMode === "steps", y = te ?? ((L = c[0]) == null ? void 0 : L.key) ?? null, F = (o.fieldsByGroup.get(null) ?? []).filter((e) => f(e.field));
+    [C]
+  ), [R, N] = G(0), [ee, te] = G(/* @__PURE__ */ new Set()), [ne, E] = G(null);
+  if (!s) return x ?? null;
+  if (x !== void 0 && o.isLoading) return x;
+  const c = s.groups.filter((e) => e.type === "tab"), h = s.groups.filter((e) => e.type === "section"), K = c.length > 0, re = K && s.tabMode === "steps", y = ne ?? ((O = c[0]) == null ? void 0 : O.key) ?? null, M = (o.fieldsByGroup.get(null) ?? []).filter((e) => f(e.field));
   function le(e) {
-    return f(e.field) ? /* @__PURE__ */ l(
+    return f(e.field) ? /* @__PURE__ */ r(
       "div",
       {
-        style: be(me(e)),
+        style: me(ge(e)),
         "data-nivaro-field": e.field,
-        children: /* @__PURE__ */ l(
-          pe,
+        children: /* @__PURE__ */ r(
+          fe,
           {
             field: e,
-            value: J[e.field],
-            onChange: (n) => W(e.field, n),
-            error: Q[e.field],
+            value: Q[e.field],
+            onChange: (n) => X(e.field, n),
+            error: W[e.field],
             disabled: B,
-            readOnly: X(e.field),
+            readOnly: Y(e.field),
             components: b,
             itemId: m
           }
@@ -75,27 +77,27 @@ function Me({
   }
   function g(e) {
     const n = e.filter((t) => f(t.field));
-    return n.length === 0 ? null : /* @__PURE__ */ l(
+    return n.length === 0 ? null : /* @__PURE__ */ r(
       "div",
       {
-        className: I,
+        className: $,
         style: { display: "grid", gridTemplateColumns: "repeat(12, minmax(0, 1fr))", gap: "1rem" },
         children: n.map(le)
       }
     );
   }
-  function N(e) {
+  function F(e) {
     const t = (o.fieldsByGroup.get(e.key) ?? []).filter((p) => f(p.field));
     if (t.length === 0) return null;
-    const a = R.has(e.key);
-    return /* @__PURE__ */ d("div", { className: j, "data-nivaro-section": e.key, children: [
-      /* @__PURE__ */ l(
+    const a = ee.has(e.key);
+    return /* @__PURE__ */ d("div", { className: D, "data-nivaro-section": e.key, children: [
+      /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           "data-nivaro-section-toggle": e.key,
           "aria-expanded": !a,
-          onClick: () => ee((p) => {
+          onClick: () => te((p) => {
             const _ = new Set(p);
             return a ? _.delete(e.key) : _.add(e.key), _;
           }),
@@ -106,12 +108,12 @@ function Me({
     ] }, e.key);
   }
   function v() {
-    return F.length === 0 ? null : /* @__PURE__ */ l("div", { "data-nivaro-ungrouped": !0, children: g(F) }, "__ungrouped__");
+    return M.length === 0 ? null : /* @__PURE__ */ r("div", { "data-nivaro-ungrouped": !0, children: g(M) }, "__ungrouped__");
   }
   function S(e) {
     if (!e.isVisible) return null;
-    const n = (u == null ? void 0 : u[e.slot]) ?? G[e.slot];
-    return n ? /* @__PURE__ */ l("div", { "data-nivaro-slot": e.slot, children: n({
+    const n = (u == null ? void 0 : u[e.slot]) ?? T[e.slot];
+    return n ? /* @__PURE__ */ r("div", { "data-nivaro-slot": e.slot, children: n({
       slot: e.slot,
       collection: s.collection,
       itemId: m ?? null,
@@ -119,53 +121,53 @@ function Me({
       defaultExpanded: e.defaultExpanded
     }) }, e.slot) : null;
   }
-  function re() {
+  function oe() {
     const e = [];
     for (const t of h)
-      e.push({ key: t.key, sort: t.sort, render: () => N(t) });
+      e.push({ key: t.key, sort: t.sort, render: () => F(t) });
     const n = s.ungroupedSort ?? h.length;
     e.push({ key: "__ungrouped__", sort: n, render: v });
     for (const t of s.slotAssignments)
-      !t.isVisible || !((u == null ? void 0 : u[t.slot]) ?? G[t.slot]) || e.push({ key: t.slot, sort: t.sort, render: () => S(t) });
+      !t.isVisible || !((u == null ? void 0 : u[t.slot]) ?? T[t.slot]) || e.push({ key: t.slot, sort: t.sort, render: () => S(t) });
     return e.sort((t, a) => t.sort - a.sort);
   }
-  function oe() {
-    return /* @__PURE__ */ l(k, { children: re().map((e) => /* @__PURE__ */ l(w.Fragment, { children: e.render() }, e.key)) });
-  }
   function ie() {
+    return /* @__PURE__ */ r(k, { children: oe().map((e) => /* @__PURE__ */ r(P.Fragment, { children: e.render() }, e.key)) });
+  }
+  function se() {
     const e = s.ungroupedSort != null && s.ungroupedSort >= s.groups.length, n = s.slotAssignments.filter(
-      (t) => t.isVisible && t.groupKey == null && !!((u == null ? void 0 : u[t.slot]) ?? G[t.slot])
+      (t) => t.isVisible && t.groupKey == null && !!((u == null ? void 0 : u[t.slot]) ?? T[t.slot])
     );
     return /* @__PURE__ */ d(k, { children: [
       !e && v(),
-      /* @__PURE__ */ d("div", { className: D, "data-nivaro-tab-strip": !0, role: "tablist", children: [
-        c.map((t) => /* @__PURE__ */ l(
+      /* @__PURE__ */ d("div", { className: I, "data-nivaro-tab-strip": !0, role: "tablist", children: [
+        c.map((t) => /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             role: "tab",
             "aria-selected": y === t.key,
             onClick: () => E(t.key),
-            className: y === t.key ? T : V,
+            className: y === t.key ? V : A,
             children: t.label
           },
           t.key
         )),
-        h.length > 0 && /* @__PURE__ */ l(
+        h.length > 0 && /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             role: "tab",
             "aria-selected": y === "__general__",
             onClick: () => E("__general__"),
-            className: y === "__general__" ? T : V,
+            className: y === "__general__" ? V : A,
             children: "General"
           }
         )
       ] }),
       c.map((t) => {
         const a = (o.fieldsByGroup.get(t.key) ?? []).filter((p) => f(p.field));
-        return /* @__PURE__ */ l(
+        return /* @__PURE__ */ r(
           "div",
           {
             role: "tabpanel",
@@ -176,21 +178,21 @@ function Me({
           t.key
         );
       }),
-      y === "__general__" && h.length > 0 && /* @__PURE__ */ l("div", { role: "tabpanel", "data-nivaro-tab": "__general__", children: h.map(N) }),
+      y === "__general__" && h.length > 0 && /* @__PURE__ */ r("div", { role: "tabpanel", "data-nivaro-tab": "__general__", children: h.map(F) }),
       e && v(),
       n.sort((t, a) => t.sort - a.sort).map(S)
     ] });
   }
-  function se() {
-    const e = c.length, n = Math.min(Math.max(Z, 0), e - 1), t = c[n], a = s.slotAssignments.filter((r) => r.isVisible && r.groupKey == null && r.slot !== "__pipeline__").sort((r, i) => r.sort - i.sort), p = s.slotAssignments.find(
-      (r) => r.slot === "__pipeline__" && r.isVisible
-    ), _ = s.ungroupedSort, ae = F.length > 0 && (_ == null || _ >= c.length) ? n === e - 1 : !1;
+  function ae() {
+    const e = c.length, n = Math.min(Math.max(R, 0), e - 1), t = c[n], a = s.slotAssignments.filter((l) => l.isVisible && l.groupKey == null && l.slot !== "__pipeline__").sort((l, i) => l.sort - i.sort), p = s.slotAssignments.find(
+      (l) => l.slot === "__pipeline__" && l.isVisible
+    ), _ = s.ungroupedSort, de = M.length > 0 && (_ == null || _ >= c.length) ? n === e - 1 : !1;
     return (o.fieldsByGroup.get((t == null ? void 0 : t.key) ?? "") ?? []).filter(
-      (r) => f(r.field)
+      (l) => f(l.field)
     ), /* @__PURE__ */ d(k, { children: [
       p && S(p),
-      /* @__PURE__ */ l("div", { className: $, "data-nf-stepper": !0, "data-nf-steps": e, children: c.map((r, i) => /* @__PURE__ */ d(w.Fragment, { children: [
-        i > 0 && /* @__PURE__ */ l(
+      /* @__PURE__ */ r("div", { className: q, "data-nf-stepper": !0, "data-nf-steps": e, children: c.map((l, i) => /* @__PURE__ */ d(P.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ r(
           "div",
           {
             "data-nf-step-connector": !0,
@@ -201,45 +203,45 @@ function Me({
           "button",
           {
             type: "button",
-            "data-nf-step": r.key,
+            "data-nf-step": l.key,
             "data-nf-step-index": i,
             "data-active": i === n ? "true" : "false",
             "data-completed": (m != null ? i !== n : i < n) ? "true" : "false",
-            onClick: () => C(i),
+            onClick: () => N(i),
             "aria-current": i === n ? "step" : void 0,
             children: [
-              /* @__PURE__ */ l("span", { "data-nf-step-circle": !0, children: (m != null ? i !== n : i < n) ? "✓" : i + 1 }),
-              /* @__PURE__ */ l("span", { "data-nf-step-label": !0, children: r.label })
+              /* @__PURE__ */ r("span", { "data-nf-step-circle": !0, children: (m != null ? i !== n : i < n) ? "✓" : i + 1 }),
+              /* @__PURE__ */ r("span", { "data-nf-step-label": !0, children: l.label })
             ]
           }
         )
-      ] }, r.key)) }),
-      c.map((r, i) => {
-        const de = (o.fieldsByGroup.get(r.key) ?? []).filter((ue) => f(ue.field)), O = i === e - 1;
+      ] }, l.key)) }),
+      c.map((l, i) => {
+        const ue = (o.fieldsByGroup.get(l.key) ?? []).filter((ce) => f(ce.field)), w = i === e - 1;
         return /* @__PURE__ */ d(
           "div",
           {
-            "data-nf-step-content": r.key,
+            "data-nf-step-content": l.key,
             style: i !== n ? { display: "none" } : void 0,
             children: [
-              g(de),
-              O && ae && v(),
-              O && h.map(N)
+              g(ue),
+              w && de && v(),
+              w && h.map(F)
             ]
           },
-          r.key
+          l.key
         );
       }),
       a.map(S),
-      /* @__PURE__ */ d("div", { className: q, "data-nf-step-nav": !0, children: [
-        /* @__PURE__ */ l(
+      /* @__PURE__ */ d("div", { className: z, "data-nf-step-nav": !0, children: [
+        /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             "data-nf-prev": !0,
-            className: z,
+            className: H,
             disabled: n === 0,
-            onClick: () => C((r) => Math.max(0, r - 1)),
+            onClick: () => N((l) => Math.max(0, l - 1)),
             children: "Previous"
           }
         ),
@@ -249,23 +251,23 @@ function Me({
           " of ",
           e
         ] }),
-        n < e - 1 ? /* @__PURE__ */ l(
+        n < e - 1 ? /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             "data-nf-next": !0,
-            className: A,
-            onClick: () => C((r) => Math.min(e - 1, r + 1)),
+            className: L,
+            onClick: () => N((l) => Math.min(e - 1, l + 1)),
             children: "Next"
           }
         ) : /* @__PURE__ */ d(k, { children: [
-          H,
-          /* @__PURE__ */ l(
+          J,
+          /* @__PURE__ */ r(
             "button",
             {
               type: "submit",
               "data-nf-save": !0,
-              className: A,
+              className: L,
               disabled: B,
               children: "Save"
             }
@@ -274,8 +276,8 @@ function Me({
       ] })
     ] });
   }
-  return /* @__PURE__ */ l(_e.Provider, { value: Y, children: /* @__PURE__ */ l("form", { className: P, style: U, onSubmit: o.handleSubmit, children: ne ? se() : K ? ie() : oe() }) });
+  return /* @__PURE__ */ r(be.Provider, { value: Z, children: /* @__PURE__ */ r("form", { className: U, style: j, onSubmit: o.handleSubmit, children: re ? ae() : K ? se() : ie() }) });
 }
 export {
-  Me as LayoutForm
+  Ge as LayoutForm
 };