@5ive-souls/controls 0.0.6 → 0.0.7

package/dist/components/DynamicForm/DynamicForm.js

@@ -2,17 +2,18 @@ import { jsx as i, jsxs as D } from "react/jsx-runtime";
 import c from "react";
 import { Wizard as j } from "../Wizard/Wizard.js";
 import { WizardPanel as U } from "../Wizard/WizardPanel/WizardPanel.js";
-import { makeStyles as H, tokens as k, Text as $, Divider as A, mergeClasses as J, Textarea as K, RadioGroup as Q, Radio as X, Dropdown as Y, Option as Z, Checkbox as ee, Input as ne, Field as te } from "@fluentui/react-components";
+import { makeStyles as H, tokens as v, Text as $, Divider as A, mergeClasses as J, Textarea as K, RadioGroup as Q, Radio as X, Dropdown as Y, Option as Z, Checkbox as ee, Input as ne, Field as te } from "@fluentui/react-components";
 import { Device as ae } from "../FiveSoulsProvider/FiveSouls.Types.js";
 import "../FiveSoulsProvider/deviceContext.js";
 import { useDevice as ie } from "../FiveSoulsProvider/useDevice.js";
-import { FlexBox as v } from "../FlexBox/FlexBox.js";
+import { FlexBox as b } from "../FlexBox/FlexBox.js";
 import { FlexBoxItem as se } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import { ClassNames as b } from "../ClassNames.js";
+import { ClassNames as F } from "../ClassNames.js";
 const oe = H({
   root: {
     width: "100%",
+    height: "100%",
     boxSizing: "border-box"
   },
   radio: {
@@ -20,8 +21,8 @@ const oe = H({
     flexBasis: "0px"
   }
 }), be = (M) => {
-  const { metaData: F, readonly: d, onSubmit: x, className: R, ref: E, action: m, target: O, strings: f, wizardStrings: V, onFieldChanged: z, id: _ } = M, { sections: u, results: o } = F, S = oe(), l = c.useReducer((e) => e + 1, 0)[1], I = ie(), p = c.useRef({}), h = c.useCallback((e, n) => {
-    const a = p.current;
+  const { metaData: x, readonly: d, onSubmit: f, className: R, ref: E, action: m, target: O, strings: z, wizardStrings: V, onFieldChanged: S, id: _ } = M, { sections: u, results: o } = x, p = oe(), l = c.useReducer((e) => e + 1, 0)[1], I = ie(), h = c.useRef({}), g = c.useCallback((e, n) => {
+    const a = h.current;
     if (!(e in a))
       return;
     const t = a[e];
@@ -47,30 +48,30 @@ const oe = H({
     }
   }, [l]);
   c.useEffect(() => {
-    const e = p.current;
+    const e = h.current;
     for (const n in e) {
       const a = e[n];
-      a && h(n, o[a.dependantOn]);
+      a && g(n, o[a.dependantOn]);
     }
-  }, [h, o]);
+  }, [g, o]);
   const q = (e) => "key" in e, r = (e, n) => {
     const a = o[e.key];
-    o[e.key] = n, h(e.key, n), z && z(e.key, a, n);
+    o[e.key] = n, g(e.key, n), S && S(e.key, a, n);
   };
   let C = 0;
   const B = (e) => (C++, /* @__PURE__ */ i(
-    v,
+    b,
     {
-      className: b.FormFieldGroup,
+      className: F.FormFieldGroup,
       horizontal: I != ae.Mobile,
-      childrenGap: k.spacingHorizontalM,
+      childrenGap: v.spacingHorizontalM,
       alignItems: "start",
-      children: e.fields.map((n) => w(n))
+      children: e.fields.map((n) => N(n))
     },
     "field-group-" + C
-  )), w = (e) => {
+  )), N = (e) => {
     let n;
-    e.dependantOn && (p.current[e.dependantOn] = e);
+    e.dependantOn && (h.current[e.dependantOn] = e);
     const a = d || e.disabled;
     return e.multiLine ? n = /* @__PURE__ */ i(
       K,
@@ -96,7 +97,7 @@ const oe = H({
             readOnly: d,
             label: t,
             value: t,
-            className: S.radio
+            className: p.radio
           },
           t
         ))
@@ -133,7 +134,7 @@ const oe = H({
       se,
       {
         id: `field-${e.key}`,
-        className: b.FormField,
+        className: F.FormField,
         grow: e.doNotFill ? 0 : 1,
         children: /* @__PURE__ */ i(
           te,
@@ -150,47 +151,47 @@ const oe = H({
     );
   }, T = (e, n, a) => {
     u.forEach((t) => {
-      g(t, e, n, a);
+      y(t, e, n, a);
     });
-  }, g = (e, n, a, t) => {
+  }, y = (e, n, a, t) => {
     e.fields.forEach((s) => {
       q(s) ? n(s, t) : a(s, t);
     });
-  }, y = (e, n) => {
+  }, k = (e, n) => {
     if (e.required && o[e.key] === void 0) {
-      if (e.validationMessage = f ? f.fieldRequired : "This field is required.", n) {
+      if (e.validationMessage = z ? z.fieldRequired : "This field is required.", n) {
         const a = n;
         a.missingFields++;
       }
     } else
       e.validationMessage = "";
-  }, G = (e, n) => {
+  }, w = (e, n) => {
     e.fields.forEach((a) => {
-      y(a, n);
+      k(a, n);
     });
   }, W = (e, n) => {
     const a = u[e], t = { missingFields: 0 };
-    return g(a, y, G, t), l(), t.missingFields <= 0;
+    return y(a, k, w, t), l(), t.missingFields <= 0;
   }, P = () => {
     const e = { missingFields: 0 };
-    T(y, G, e), e.missingFields > 0 ? l() : x && !m && x(F.results);
-  }, N = [];
+    T(k, w, e), e.missingFields > 0 ? l() : f && !m && f(x.results);
+  }, G = [];
   return u.forEach((e, n) => {
     const a = [];
-    g(e, (t) => {
-      a.push(w(t));
+    y(e, (t) => {
+      a.push(N(t));
     }, (t) => {
       a.push(B(t));
-    }), N.push(
-      /* @__PURE__ */ i(U, { title: e.title, children: /* @__PURE__ */ D(v, { fill: !0, childrenGap: k.spacingVerticalM, children: [
+    }), G.push(
+      /* @__PURE__ */ i(U, { title: e.title, children: /* @__PURE__ */ D(b, { fill: !0, childrenGap: v.spacingVerticalM, children: [
         e.message && /* @__PURE__ */ D("div", { children: [
           /* @__PURE__ */ i($, { children: e.message }),
           /* @__PURE__ */ i(A, { appearance: "brand" })
         ] }),
-        /* @__PURE__ */ i(v, { fill: !0, childrenGap: k.spacingVerticalM, children: a })
+        /* @__PURE__ */ i(b, { fill: !0, childrenGap: v.spacingVerticalM, children: a })
       ] }) }, "WizardPanel-" + n)
     );
-  }), /* @__PURE__ */ i("div", { id: _, className: J(b.DynamicForm, S.root, R), ref: E, children: /* @__PURE__ */ i("form", { action: m, target: O, children: /* @__PURE__ */ i(j, { onSubmit: P, onNavigatePanel: W, readonly: d, asForm: m != null, strings: V, children: N }) }) });
+  }), /* @__PURE__ */ i("div", { id: _, className: J(F.DynamicForm, p.root, R), ref: E, children: /* @__PURE__ */ i("form", { action: m, target: O, className: p.root, children: /* @__PURE__ */ i(j, { onSubmit: P, onNavigatePanel: W, readonly: d, asForm: m != null, strings: V, children: G }) }) });
 };
 export {
   be as DynamicForm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5ive-souls/controls",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Collection of react components built on the Fluent UI framework.",
   "keywords": [
     "react",