@acellera/pm-rjsf 0.0.3 → 0.0.5

package/dist/pm-rjsf.js

@@ -1,11 +1,11 @@
 import k from "react";
 import G from "@rjsf/mui";
-import { Accordion as $, AccordionSummary as K, AccordionDetails as U, FormLabel as L, Box as M, TextField as V, Grid as x, Tooltip as O, Typography as H, IconButton as X, Button as B, ButtonGroup as J, Menu as Y, MenuItem as E, ListItemIcon as R, ListItemText as D, ThemeProvider as Q, createTheme as Z } from "@mui/material";
+import { Accordion as $, AccordionSummary as K, AccordionDetails as U, FormLabel as L, Box as _, TextField as V, Grid as x, Tooltip as O, Typography as H, IconButton as X, Button as B, ButtonGroup as J, Menu as Y, MenuItem as M, ListItemIcon as D, ListItemText as R, ThemeProvider as Q, createTheme as Z } from "@mui/material";
 import { customizeValidator as ee } from "@rjsf/validator-ajv8";
 import te from "ajv/dist/2020";
 import { getTemplate as ne, getUiOptions as ie, ADDITIONAL_PROPERTY_FLAG as z, canExpand as le } from "@rjsf/utils";
-import { ExpandMore as oe, Delete as re, DriveFolderUpload as ae, CloudDownload as se, ArrowDropDown as ce } from "@mui/icons-material";
-function de() {
+import { ExpandMore as oe, Delete as re, DriveFolderUpload as ae, CloudDownload as se, ArrowDropDown as de } from "@mui/icons-material";
+function ce() {
   return ee({
     AjvClass: te,
     customFormats: { path: () => !0 },
@@ -26,8 +26,8 @@ function w(e) {
     if (Array.isArray(e.anyOf)) {
       const i = e.anyOf.filter((n) => !(n && n.type === "null"));
       if (i.length === 1) {
-        const { anyOf: n, ...o } = e;
-        return w({ ...i[0], ...o });
+        const { anyOf: n, default: o, ...r } = e, d = { ...i[0], ...r };
+        return o != null && (d.default = o), w(d);
       }
       e = { ...e, anyOf: i };
     }
@@ -63,7 +63,7 @@ function pe(e) {
   }
   return t;
 }
-function _(e, t) {
+function j(e, t) {
   const i = pe(e);
   return i ? l(
     O,
@@ -85,25 +85,25 @@ const q = {
   mb: 1.5
 };
 function ye(e) {
-  const { children: t, errors: i, help: n, hidden: o, schema: a, registry: u, uiSchema: m } = e;
+  const { children: t, errors: i, help: n, hidden: o, schema: r, registry: d, uiSchema: m } = e;
   if (o) return l("div", { className: "hidden" }, t);
-  const d = a && a.type, c = d === "object" || d === "array" || Array.isArray(d) && (d.includes("object") || d.includes("array"));
+  const u = r && r.type, c = u === "object" || u === "array" || Array.isArray(u) && (u.includes("object") || u.includes("array"));
   let s;
   if (c)
     s = t;
   else {
-    const p = a && a.description ? String(a.description) : "", h = d === "boolean" || Array.isArray(d) && d.includes("boolean"), y = l(
+    const p = r && r.description ? String(r.description) : "", h = u === "boolean" || Array.isArray(u) && u.includes("boolean"), y = l(
       "div",
       h ? { style: { display: "inline-block" } } : null,
       t,
       i,
       n
     );
-    s = _(p, y);
+    s = j(p, y);
   }
   const f = ne(
     "WrapIfAdditionalTemplate",
-    u,
+    d,
     ie(m)
   );
   return l(f, { ...e }, s);
@@ -114,8 +114,8 @@ function he(e) {
     const s = t[c.name] && t[c.name]["ui:options"] && t[c.name]["ui:options"].group;
     s ? (o.get(s) || o.set(s, []).get(s)).push(c) : n.push(c);
   }
-  const a = [], u = z in (e.schema || {}), m = t["ui:options"] && t["ui:options"].group, d = m && m === e.title;
-  e.title && !u && !d && a.push(
+  const r = [], d = z in (e.schema || {}), m = t["ui:options"] && t["ui:options"].group, u = m && m === e.title;
+  e.title && !d && !u && r.push(
     l(i.TitleFieldTemplate, {
       key: "__title",
       id: e.idSchema.$id + "__title",
@@ -127,9 +127,9 @@ function he(e) {
     })
   );
   for (const c of n)
-    a.push(l("div", { key: c.name, className: "pm-field" }, c.content));
+    r.push(l("div", { key: c.name, className: "pm-field" }, c.content));
   for (const [c, s] of o)
-    a.push(
+    r.push(
       l(
         $,
         {
@@ -159,7 +159,7 @@ function he(e) {
         )
       )
     );
-  return le(e.schema, e.uiSchema, e.formData) && a.push(
+  return le(e.schema, e.uiSchema, e.formData) && r.push(
     l(i.ButtonTemplates.AddButton, {
       key: "__add",
       className: "object-property-expand",
@@ -168,7 +168,7 @@ function he(e) {
       uiSchema: e.uiSchema,
       registry: e.registry
     })
-  ), l("div", null, a);
+  ), l("div", null, r);
 }
 function be(e) {
   const {
@@ -176,10 +176,10 @@ function be(e) {
     classNames: i,
     style: n,
     disabled: o,
-    id: a,
-    label: u,
+    id: r,
+    label: d,
     onKeyChange: m,
-    onDropPropertyClick: d,
+    onDropPropertyClick: u,
     readonly: c,
     schema: s,
     uiSchema: f,
@@ -187,9 +187,9 @@ function be(e) {
   } = e;
   if (!(z in s))
     return l("div", { className: i, style: n }, t);
-  const h = p.templates.ButtonTemplates.RemoveButton, y = f && f["ui:options"] && f["ui:options"].keyLabel || u + " Key", I = a + "-key", T = /^newKey(-\d+)?$/.test(u || ""), v = s && s.description ? String(s.description) : "";
+  const h = p.templates.ButtonTemplates.RemoveButton, y = f && f["ui:options"] && f["ui:options"].keyLabel || d + " Key", I = r + "-key", T = /^newKey(-\d+)?$/.test(d || ""), v = s && s.description ? String(s.description) : "";
   return l(
-    M,
+    _,
     { sx: q },
     l(
       "div",
@@ -197,18 +197,18 @@ function be(e) {
       l(
         "div",
         { style: { flex: "0 0 34%" } },
-        _(
+        j(
           v,
           l(V, {
             id: I,
             label: y,
             size: "small",
             fullWidth: !0,
-            defaultValue: T ? "" : u,
+            defaultValue: T ? "" : d,
             disabled: o || c,
-            onBlur: (C) => {
-              const g = C.target.value.trim();
-              g && g !== u && m(g);
+            onBlur: (S) => {
+              const g = S.target.value.trim();
+              g && g !== d && m(g);
             }
           })
         )
@@ -219,7 +219,7 @@ function be(e) {
         { style: { flex: "0 0 auto", paddingTop: ".5rem" } },
         l(h, {
           disabled: o || c,
-          onClick: d(u),
+          onClick: u(d),
           uiSchema: f,
           registry: p
         })
@@ -241,7 +241,7 @@ function xe(e) {
   return l(
     "div",
     { style: { marginTop: "8px", marginBottom: "2px" } },
-    _(t, l("span", null, i))
+    j(t, l("span", null, i))
   );
 }
 function ke(e) {
@@ -257,7 +257,7 @@ function ke(e) {
       registry: e.registry
     })
   ), (e.items || []).forEach(
-    ({ key: a, ...u }) => o.push(l(i, { key: a, ...u }))
+    ({ key: r, ...d }) => o.push(l(i, { key: r, ...d }))
   ), e.canAdd && o.push(
     l(t.ButtonTemplates.AddButton, {
       key: "__add",
@@ -274,19 +274,19 @@ function ve(e) {
     hasToolbar: i,
     hasCopy: n,
     hasMoveDown: o,
-    hasMoveUp: a,
-    hasRemove: u,
+    hasMoveUp: r,
+    hasRemove: d,
     index: m,
-    onCopyIndexClick: d,
+    onCopyIndexClick: u,
     onDropIndexClick: c,
     onReorderClick: s,
     disabled: f,
     readonly: p,
     uiSchema: h,
     registry: y
-  } = e, { CopyButton: I, MoveDownButton: T, MoveUpButton: v, RemoveButton: C } = y.templates.ButtonTemplates, g = { flex: 1, paddingLeft: 6, paddingRight: 6, fontWeight: "bold", minWidth: 0 };
+  } = e, { CopyButton: I, MoveDownButton: T, MoveUpButton: v, RemoveButton: S } = y.templates.ButtonTemplates, g = { flex: 1, paddingLeft: 6, paddingRight: 6, fontWeight: "bold", minWidth: 0 };
   return l(
-    M,
+    _,
     { sx: q },
     l(
       x,
@@ -295,14 +295,14 @@ function ve(e) {
       i && l(
         x,
         { item: !0 },
-        (a || o) && l(v, {
+        (r || o) && l(v, {
           style: g,
-          disabled: f || p || !a,
+          disabled: f || p || !r,
           onClick: s(m, m - 1),
           uiSchema: h,
           registry: y
         }),
-        (a || o) && l(T, {
+        (r || o) && l(T, {
           style: g,
           disabled: f || p || !o,
           onClick: s(m, m + 1),
@@ -312,11 +312,11 @@ function ve(e) {
         n && l(I, {
           style: g,
           disabled: f || p,
-          onClick: d(m),
+          onClick: u(m),
           uiSchema: h,
           registry: y
         }),
-        u && l(C, {
+        d && l(S, {
           style: g,
           disabled: f || p,
           onClick: c(m),
@@ -335,108 +335,108 @@ const Ie = {
   TitleFieldTemplate: xe,
   ArrayFieldTemplate: ke,
   ArrayFieldItemTemplate: ve
-}, r = k.createElement, P = [
+}, a = k.createElement, P = [
   { key: "local", label: "From local file system", isInput: !0, Icon: ae },
   { key: "datacenter", label: "From datacenter", isInput: !1, Icon: se }
 ];
 function Te(e) {
-  const { value: t, onChange: i, disabled: n = !1, readonly: o = !1, label: a, required: u } = e, m = /_\d+$/.test(e.id || ""), d = n || o, [c, s] = k.useState(null), [f, p] = k.useState(0), h = !!c, y = t ? String(t).split("/").pop() : "", I = (S) => S && i(S.name), T = () => i(void 0), v = P[f], C = a && !m ? r(
+  const { value: t, onChange: i, disabled: n = !1, readonly: o = !1, label: r, required: d } = e, m = /_\d+$/.test(e.id || ""), u = n || o, [c, s] = k.useState(null), [f, p] = k.useState(0), h = !!c, y = t ? String(t).split("/").pop() : "", I = (C) => C && i(C.name), T = () => i(void 0), v = P[f], S = r && !m ? a(
     x,
     { item: !0, zeroMinWidth: !0 },
-    r(L, null, a, u ? " *" : null)
-  ) : null, g = t ? r(
+    a(L, null, r, d ? " *" : null)
+  ) : null, g = t ? a(
     x,
     { item: !0, xs: !0, zeroMinWidth: !0 },
-    r(
+    a(
       O,
       { title: y, arrow: !0, placement: "top" },
-      r(H, { style: { textOverflow: "ellipsis", overflow: "hidden" } }, y)
+      a(H, { style: { textOverflow: "ellipsis", overflow: "hidden" } }, y)
     )
-  ) : r(x, { item: !0, xs: !0 }, null);
+  ) : a(x, { item: !0, xs: !0 }, null);
   let F;
   if (t)
-    F = r(
+    F = a(
       x,
       { item: !0, xs: "auto" },
-      r(
+      a(
         O,
         { title: "Clear", arrow: !0, placement: "right" },
-        r(
+        a(
           "span",
           null,
-          r(
+          a(
             X,
-            { onClick: T, size: "small", disabled: d },
-            r(re, { fontSize: "small" })
+            { onClick: T, size: "small", disabled: u },
+            a(re, { fontSize: "small" })
           )
         )
       )
     );
   else {
-    const S = v.isInput ? r(
+    const C = v.isInput ? a(
       B,
       {
         component: "label",
-        disabled: d,
-        endIcon: r(v.Icon, null),
+        disabled: u,
+        endIcon: a(v.Icon, null),
         sx: { px: 1.2, borderRadius: "4px 0 0 4px", borderRight: 0 }
       },
       "Select",
-      r("input", {
+      a("input", {
         type: "file",
         hidden: !0,
         onChange: (b) => I(b.target.files && b.target.files[0])
       })
-    ) : r(
+    ) : a(
       B,
       {
-        disabled: d,
-        endIcon: r(v.Icon, null),
+        disabled: u,
+        endIcon: a(v.Icon, null),
         sx: { px: 1.2, borderRadius: "4px 0 0 4px", borderRight: 0 },
         onClick: () => {
         }
       },
       "Select"
     );
-    F = r(
+    F = a(
       x,
       { item: !0, xs: "auto" },
-      r(
+      a(
         J,
         {
           variant: "outlined",
-          disabled: d,
+          disabled: u,
           sx: { "& .MuiButtonGroup-grouped": { minWidth: 0 } }
         },
-        S,
-        r(
+        C,
+        a(
           B,
           {
             size: "small",
             onClick: (b) => s(b.currentTarget),
             sx: { width: "1em", borderRadius: "0 4px 4px 0" }
           },
-          r(ce, null)
+          a(de, null)
         )
       ),
-      r(
+      a(
         Y,
         { anchorEl: c, open: h, onClose: () => s(null) },
         P.map(
-          (b, A) => b.isInput ? r(
-            E,
+          (b, A) => b.isInput ? a(
+            M,
             { key: b.key, component: "label", selected: A === f },
-            r(R, null, r(b.Icon, null)),
-            r(D, null, b.label),
-            r("input", {
+            a(D, null, a(b.Icon, null)),
+            a(R, null, b.label),
+            a("input", {
               type: "file",
               hidden: !0,
-              onChange: (j) => {
-                p(A), s(null), I(j.target.files && j.target.files[0]);
+              onChange: (E) => {
+                p(A), s(null), I(E.target.files && E.target.files[0]);
               }
             })
-          ) : r(
-            E,
+          ) : a(
+            M,
             {
               key: b.key,
               selected: A === f,
@@ -444,14 +444,14 @@ function Te(e) {
                 p(A), s(null);
               }
             },
-            r(R, null, r(b.Icon, null)),
-            r(D, null, b.label)
+            a(D, null, a(b.Icon, null)),
+            a(R, null, b.label)
           )
         )
       )
     );
   }
-  return r(
+  return a(
     x,
     {
       container: !0,
@@ -462,25 +462,25 @@ function Te(e) {
       wrap: "nowrap",
       sx: { mt: 0.5 }
     },
-    C,
+    S,
     g,
     F
   );
 }
-const Ce = `
+const Se = `
 .pm-field { margin: .5rem 0; }
 /* In an additionalProperties row, align the value's first field with the key
    field (drop its leading margin so both start at the row top). */
 .pm-ap-value > div > .pm-field:first-child { margin-top: 0; }
 `;
 let W = !1;
-function Se() {
+function Ce() {
   if (W || typeof document > "u") return;
   W = !0;
   const e = document.createElement("style");
-  e.setAttribute("data-pm-rjsf", ""), e.textContent = Ce, document.head.appendChild(e);
+  e.setAttribute("data-pm-rjsf", ""), e.textContent = Se, document.head.appendChild(e);
 }
-const Ae = de(), we = (e) => Z(e || {}, {
+const Ae = ce(), we = (e) => Z(e || {}, {
   components: {
     MuiTextField: { defaultProps: { size: "small", fullWidth: !0 } },
     MuiFormControl: { defaultProps: { size: "small", fullWidth: !0 } },
@@ -492,24 +492,24 @@ function Fe(e, t) {
   if (!e || typeof e != "object") return e;
   const i = t && typeof t == "object" ? t : {};
   let n = null;
-  for (const [o, a] of Object.entries(e)) {
-    const u = a && a["ui:options"] && a["ui:options"].enabledBy;
-    if (!u) continue;
-    const m = !i[u];
-    !!a["ui:disabled"] !== m && (n = n || { ...e }, n[o] = { ...a, "ui:disabled": m });
+  for (const [o, r] of Object.entries(e)) {
+    const d = r && r["ui:options"] && r["ui:options"].enabledBy;
+    if (!d) continue;
+    const m = !i[d];
+    !!r["ui:disabled"] !== m && (n = n || { ...e }, n[o] = { ...r, "ui:disabled": m });
   }
   return n || e;
 }
-function De({ schema: e, uiSchema: t, widgets: i, formData: n, onChange: o, ...a }) {
-  Se();
-  const [u, m] = k.useState(n), d = n !== void 0 ? n : u, c = (h, y) => {
+function Re({ schema: e, uiSchema: t, widgets: i, formData: n, onChange: o, ...r }) {
+  Ce();
+  const [d, m] = k.useState(n), u = n !== void 0 ? n : d, c = (h, y) => {
     m(h.formData), o && o(h, y);
-  }, s = me(e), f = Fe(t, d), p = { file: Te, ...i || {} };
+  }, s = me(e), f = Fe(t, u), p = { file: Te, ...i || {} };
   return k.createElement(
     Q,
     { theme: we },
     k.createElement(
-      M,
+      _,
       { sx: { color: "text.primary" } },
       k.createElement(G, {
         schema: s,
@@ -517,9 +517,17 @@ function De({ schema: e, uiSchema: t, widgets: i, formData: n, onChange: o, ...a
         validator: Ae,
         templates: Ie,
         widgets: p,
-        formData: d,
+        formData: u,
         onChange: c,
-        ...a
+        // RJSF owns validation + error display. Native HTML5 validation hard-
+        // blocks submit when a `required` control is non-focusable (e.g. inside a
+        // collapsed accordion) and does so SILENTLY -- onSubmit never fires and
+        // nothing surfaces. Let RJSF validate instead so errors are visible.
+        noHtml5Validate: !0,
+        // Don't fabricate empty objects for optional submodels (Optional[Model]);
+        // leaving them absent keeps them valid until the user fills them in.
+        experimental_defaultFormStateBehavior: { emptyObjectFields: "skipEmptyDefaults" },
+        ...r
       })
     )
   );
@@ -530,13 +538,13 @@ export {
   ye as FieldTemplate,
   Te as FileWidget,
   he as GroupedObjectFieldTemplate,
-  De as PMForm,
-  Ce as PM_RJSF_CSS,
+  Re as PMForm,
+  Se as PM_RJSF_CSS,
   N as SPECIAL_DIRS,
   xe as TitleFieldTemplate,
   be as WrapIfAdditionalTemplate,
-  Se as injectStyles,
-  de as makeValidator,
+  Ce as injectStyles,
+  ce as makeValidator,
   me as prepareForRjsf,
   w as simplify,
   ue as stripSpecialDirs,