@envisiongroup/porygon 1.0.0-rc.9 → 1.0.1

package/dist/react-components/forms/EFWForm/EFWForm.utils.js

@@ -1,264 +1,392 @@
-import { jsx as m, jsxs as y } from "react/jsx-runtime";
-import { memo as M, useState as A, useRef as V, useCallback as b, useMemo as T } from "react";
-import { EFWInputField as P } from "../../fields/EFWInputField/EFWInputField.js";
-import { EFWNumberInputField as O } from "../../fields/EFWNumberInputField/EFWNumberInputField.js";
-import { EFWTextAreaField as E } from "../../fields/EFWTextAreaField/EFWTextAreaField.js";
-import { EFWSwitchField as N } from "../../fields/EFWSwitchField/EFWSwitchField.js";
-import { EFWTagPickerField as W } from "../../fields/EFWTagPickerField/EFWTagPickerField.js";
-import { EFWDatePickerField as k } from "../../fields/EFWDatePickerField/EFWDatePickerField.js";
-import { EFWAttachmentsField as R } from "../../fields/EFWAttachmentsField/EFWAttachmentsField.js";
-const p = (t) => {
+import { jsx as s } from "react/jsx-runtime";
+import { memo as H, useRef as B, useState as k, useCallback as R, useEffect as z, useMemo as J } from "react";
+import { useIsomorphicLayoutEffect as K } from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { normalizeArrayValue as T } from "../../commons/valueNormalization.js";
+import { EFWInputField as Q } from "../../fields/Input/EFWInputField.js";
+import { EFWNumberInputField as X } from "../../fields/NumberInput/EFWNumberInputField.js";
+import { EFWTextAreaField as Y } from "../../fields/TextArea/EFWTextAreaField.js";
+import { EFWSwitchField as Z } from "../../fields/Switch/EFWSwitchField.js";
+import { EFWTagPickerField as _ } from "../../fields/TagPicker/EFWTagPickerField.js";
+import { EFWDatePickerField as U } from "../../fields/DatePicker/EFWDatePickerField.js";
+import { EFWAttachmentsField as p } from "../../fields/Attachments/EFWAttachmentsField.js";
+const Fe = (t) => {
   if (typeof t == "number")
     return t > 1 ? `repeat(${t}, 1fr)` : "1fr";
   if (typeof t == "string")
     return t;
   if (t?.autoFit) {
-    const { minColumnWidth: e, maxColumns: a } = t.autoFit;
-    return a ? `repeat(auto-fit, minmax(clamp(${e}, 100% / ${a + 1}, 100% / 1), 1fr))` : `repeat(auto-fit, minmax(${e}, 1fr))`;
+    const { minColumnWidth: e, maxColumns: n } = t.autoFit;
+    return n ? `repeat(auto-fit, minmax(clamp(${e}, 100% / ${n + 1}, 100% / 1), 1fr))` : `repeat(auto-fit, minmax(${e}, 1fr))`;
   }
   return "1fr";
-}, B = ({
+}, ee = ({
   field: t,
   initialValue: e,
-  onValueChange: a,
-  registerUpdateProps: n,
-  fieldLogic: i,
-  isControlled: d,
-  getAllValues: u,
-  updateFieldProps: f,
-  onValidationChange: o
+  onValueChange: n,
+  registerUpdateProps: i,
+  unregisterUpdateProps: l,
+  getFieldLogicByName: r,
+  isControlled: j,
+  getAllValues: x,
+  updateFieldProps: q,
+  localeText: G,
+  onValidationChange: L
 }) => {
-  const [c, v] = A(e), [S, L] = A({
-    title: t.title,
-    required: t.required,
+  const d = t.internalName, F = B(e), [c, C] = k(() => F.current), f = !!j, [I, P] = k(
+    {}
+  ), N = B({
     editable: t.editable,
     disabled: t.disabled,
-    validationState: t.validationState,
-    validationMessage: t.validationMessage
-  }), F = V(e), x = !!d, r = b(
-    (l, h) => {
-      console.log("handleChange:", l, h);
-      const q = F.current;
-      if (v(l), F.current = l, i) {
-        const D = u();
-        D[t.internalName] = l, i(l, f, {
-          allValues: D,
+    hidden: t.hidden,
+    required: t.required
+  }), m = R(
+    (a) => {
+      C(a), F.current = a;
+    },
+    []
+  );
+  z(() => {
+    f || (C(e), F.current = e);
+  }, [e, f]);
+  const u = R(
+    (a) => {
+      const v = F.current;
+      m(a), n(d, a, { silent: !0 });
+      const y = r?.(d);
+      let S = a;
+      if (y) {
+        const M = x();
+        y(a, q, {
+          allValues: M,
           trigger: "change",
-          fieldName: t.internalName,
-          previousValue: q,
-          isControlled: x
-        });
+          fieldName: d,
+          previousValue: v,
+          isControlled: f
+        }), S = x()[d];
       }
-      a(t.internalName, l);
+      n(d, S);
+    },
+    [
+      m,
+      r,
+      x,
+      d,
+      f,
+      n,
+      q
+    ]
+  ), b = R(
+    (a) => {
+      L?.(d, a);
+    },
+    [d, L]
+  ), A = R(
+    (a) => {
+      P((v) => ({ ...v, ...a })), "value" in a ? m(
+        a.value
+      ) : "selectedOptions" in a && a.selectedOptions !== void 0 ? m(
+        a.selectedOptions
+      ) : "selectedDates" in a ? m(
+        a.selectedDates
+      ) : "files" in a && a.files !== void 0 && m(
+        a.files
+      );
     },
-    [t.internalName, a, i, u, f, x]
-  ), g = b((l) => {
-    L((h) => ({ ...h, ...l })), "value" in l ? v(l.value) : "selectedOptions" in l && l.selectedOptions !== void 0 ? v(l.selectedOptions) : "selectedDates" in l ? v(l.selectedDates) : "files" in l && l.files !== void 0 && v(l.files);
-  }, []);
-  b(() => n(t.internalName, g), [t.internalName, n, g])();
-  const s = T(
+    [m]
+  );
+  K(() => (i(d, A), () => {
+    l(d, A);
+  }), [d, i, l, A]), z(() => {
+    const a = N.current, v = a.editable !== t.editable, y = a.disabled !== t.disabled, S = a.hidden !== t.hidden, M = a.required !== t.required;
+    !v && !y && !S && !M || (P((w) => {
+      let E = !1;
+      const D = { ...w }, O = (V, W) => {
+        V && W in D && (delete D[W], E = !0);
+      };
+      return O(v, "editable"), O(y, "disabled"), O(S, "hidden"), O(M, "required"), E ? D : w;
+    }), N.current = {
+      editable: t.editable,
+      disabled: t.disabled,
+      hidden: t.hidden,
+      required: t.required
+    });
+  }, [t.editable, t.disabled, t.hidden, t.required]);
+  const g = J(
     () => ({
       ...t,
-      ...S
+      ...I
     }),
-    [t, S]
+    [t, I]
   );
-  return t.typeAsString === "Text" ? /* @__PURE__ */ m(
-    P,
-    {
-      ...$(
-        t,
-        s,
-        c,
-        r,
-        o
-      )
-    }
-  ) : t.typeAsString === "Number" ? /* @__PURE__ */ m(
-    O,
-    {
-      ...j(
-        t,
-        s,
-        c,
-        r,
-        o
-      )
-    }
-  ) : t.typeAsString === "Note" ? /* @__PURE__ */ m(
-    E,
-    {
-      ...z(
-        t,
-        s,
-        c,
-        r,
-        o
-      )
-    }
-  ) : t.typeAsString === "Boolean" ? /* @__PURE__ */ m(
-    N,
-    {
-      ...H(
-        t,
-        s,
-        c,
-        r,
-        o
-      )
-    }
-  ) : t.typeAsString === "Choice" || t.typeAsString === "MultiChoice" ? /* @__PURE__ */ m(
-    W,
-    {
-      ...C(
-        t,
-        s,
-        c,
-        r,
-        o
-      )
-    }
-  ) : t.typeAsString === "Date" ? /* @__PURE__ */ m(
-    k,
-    {
-      ...I(
-        t,
-        s,
-        c,
-        r,
-        o
-      )
-    }
-  ) : t.typeAsString === "Attachments" ? /* @__PURE__ */ m(
-    R,
-    {
-      ...G(
-        t,
-        s,
-        c,
-        r,
-        o
-      )
+  if (t.typeAsString === "Text")
+    return /* @__PURE__ */ s(
+      Q,
+      {
+        "data-field-internalname": t.internalName,
+        "data-field-typeasstring": t.typeAsString,
+        ...te(
+          t,
+          g,
+          c,
+          u,
+          b
+        )
+      }
+    );
+  if (t.typeAsString === "Number")
+    return /* @__PURE__ */ s(
+      X,
+      {
+        "data-field-internalname": t.internalName,
+        "data-field-typeasstring": t.typeAsString,
+        ...ae(
+          t,
+          g,
+          c,
+          u,
+          b
+        )
+      }
+    );
+  if (t.typeAsString === "Note")
+    return /* @__PURE__ */ s(
+      Y,
+      {
+        "data-field-internalname": t.internalName,
+        "data-field-typeasstring": t.typeAsString,
+        ...ne(
+          t,
+          g,
+          c,
+          u,
+          b
+        )
+      }
+    );
+  if (t.typeAsString === "Boolean")
+    return /* @__PURE__ */ s(
+      Z,
+      {
+        "data-field-internalname": t.internalName,
+        "data-field-typeasstring": t.typeAsString,
+        ...de(
+          t,
+          g,
+          c,
+          u,
+          b
+        )
+      }
+    );
+  if (t.typeAsString === "Choice" || t.typeAsString === "MultiChoice")
+    return /* @__PURE__ */ s(
+      _,
+      {
+        "data-field-internalname": t.internalName,
+        "data-field-typeasstring": t.typeAsString,
+        ...ie(
+          t,
+          g,
+          c,
+          u,
+          b
+        )
+      }
+    );
+  if (t.typeAsString === "Date")
+    return /* @__PURE__ */ s(
+      U,
+      {
+        "data-field-internalname": t.internalName,
+        "data-field-typeasstring": t.typeAsString,
+        ...le(
+          t,
+          g,
+          c,
+          u,
+          b
+        )
+      }
+    );
+  if (t.typeAsString === "Attachments")
+    return /* @__PURE__ */ s(
+      p,
+      {
+        "data-field-internalname": t.internalName,
+        "data-field-typeasstring": t.typeAsString,
+        ...re(
+          t,
+          g,
+          c,
+          u,
+          b
+        )
+      }
+    );
+  const $ = t.typeAsString ?? "unknown";
+  return /* @__PURE__ */ s("div", { children: G.unsupportedFieldType(String($)) });
+}, fe = H(
+  ee
+), o = (t, e) => {
+  if (!t) return e;
+  if (!e) return t;
+  const n = Object.entries(e);
+  if (n.length === 0) return t;
+  let i = !1;
+  for (const [l, r] of n)
+    if (!Object.is(t[l], r)) {
+      i = !0;
+      break;
     }
-  ) : /* @__PURE__ */ y("div", { children: [
-    "Tipo de campo no soportado: ",
-    t
-  ] });
-}, ee = M(B), $ = (t, e, a, n, i) => {
-  const d = a !== void 0 ? a : e.value, u = e.defaultValue !== void 0 ? e.defaultValue : t.defaultValue;
-  return {
-    title: e.title || t.title,
-    type: "text",
-    formatType: e.formatType,
-    formatPattern: e.formatPattern,
-    value: d,
-    defaultValue: u,
-    contentAfter: e.contentAfter,
-    contentBefore: e.contentBefore,
-    onChange: n,
-    onValidationChange: i,
-    infoLabel: e.infoLabel,
-    hint: e.hint,
-    hidden: e.hidden || !1,
-    minLength: e.minLength || 0,
-    maxLength: e.maxLength || 250,
-    placeholder: e.placeholder ? e.placeholder : e.formatType == "chileanRut" ? "Ej: 11.111.111-1" : "Escriba aquí el texto",
-    required: e.required || !1,
-    editable: e.editable !== void 0 ? e.editable : !0,
-    disabled: e.disabled || !1,
-    validationState: e.validationState || "none",
-    validationMessage: e.validationMessage || "",
-    formatFunction: e.formatFunction
-  };
-}, j = (t, e, a, n, i) => {
-  const d = e.defaultValue !== void 0 ? e.defaultValue : t.defaultValue;
-  return {
-    title: e.title || t.title,
-    contentAfter: e.contentAfter,
-    contentBefore: e.contentBefore,
-    minValue: e.minValue,
-    maxValue: e.maxValue,
-    thousandSeparator: e.thousandSeparator,
-    decimalSeparator: e.decimalSeparator,
-    value: a,
-    defaultValue: d,
-    onChange: n,
-    onValidationChange: i,
-    infoLabel: e.infoLabel,
-    hint: e.hint,
-    placeholder: e.placeholder || "Escriba aquí el número",
-    hidden: e.hidden || !1,
-    required: e.required || !1,
-    editable: e.editable !== void 0 ? e.editable : !0,
-    disabled: e.disabled || !1,
-    validationState: e.validationState || "none",
-    validationMessage: e.validationMessage || ""
-  };
-}, z = (t, e, a, n, i) => {
-  const d = a !== void 0 ? a : e.value, u = e.defaultValue !== void 0 ? e.defaultValue : t.defaultValue, f = e.maxLength ?? t.maxLength ?? 3e3, o = e.placeholder ?? t.placeholder ?? "Escriba aquí el texto";
+  return i ? { ...t, ...e } : t;
+}, h = (t, e) => "validationMessageIcon" in e ? e.validationMessageIcon : t.validationMessageIcon, te = (t, e, n, i, l) => ({
+  title: e.title || t.title,
+  type: e.type ?? "text",
+  formatType: e.formatType,
+  formatPattern: e.formatPattern,
+  formatConfig: e.formatConfig ?? t.formatConfig,
+  value: n,
+  contentAfter: e.contentAfter,
+  contentBefore: e.contentBefore,
+  onChange: i,
+  onValidationChange: l,
+  infoLabel: e.infoLabel,
+  hint: e.hint,
+  hidden: e.hidden || !1,
+  minLength: e.minLength || 0,
+  maxLength: e.maxLength || 250,
+  required: e.required || !1,
+  editable: e.editable !== void 0 ? e.editable : !0,
+  disabled: e.disabled || !1,
+  validationState: e.validationState || "none",
+  validationMessage: e.validationMessage || "",
+  validationMessageIcon: h(t, e),
+  formatFunction: e.formatFunction,
+  labels: o(t.labels, e.labels),
+  readOnlyRenderer: e.readOnlyRenderer ?? t.readOnlyRenderer,
+  validationMessages: o(
+    t.validationMessages,
+    e.validationMessages
+  )
+}), ae = (t, e, n, i, l) => ({
+  title: e.title || t.title,
+  contentAfter: e.contentAfter,
+  contentBefore: e.contentBefore,
+  minValue: e.minValue,
+  maxValue: e.maxValue,
+  thousandSeparator: e.thousandSeparator,
+  decimalSeparator: e.decimalSeparator,
+  value: n,
+  onChange: i,
+  autoComplete: e.autoComplete,
+  formatType: e.formatType,
+  formatFunction: e.formatFunction,
+  enableFormatting: e.enableFormatting,
+  onValidationChange: l,
+  infoLabel: e.infoLabel,
+  hint: e.hint,
+  hidden: e.hidden || !1,
+  required: e.required || !1,
+  editable: e.editable !== void 0 ? e.editable : !0,
+  disabled: e.disabled || !1,
+  validationState: e.validationState || "none",
+  validationMessage: e.validationMessage || "",
+  validationMessageIcon: h(t, e),
+  labels: o(t.labels, e.labels),
+  readOnlyRenderer: e.readOnlyRenderer ?? t.readOnlyRenderer,
+  validationMessages: o(
+    t.validationMessages,
+    e.validationMessages
+  )
+}), ne = (t, e, n, i, l) => {
+  const r = e.maxLength ?? t.maxLength ?? 3e3;
   return {
     title: e.title || t.title,
-    value: d,
-    defaultValue: u,
-    onChange: n,
-    onValidationChange: i,
+    value: n,
+    onChange: i,
+    onValidationChange: l,
     infoLabel: e.infoLabel,
     hint: e.hint,
-    maxLength: f,
-    placeholder: o,
+    maxLength: r,
     hidden: e.hidden || !1,
     required: e.required || !1,
     editable: e.editable !== void 0 ? e.editable : !0,
     disabled: e.disabled || !1,
     validationState: e.validationState || "none",
     validationMessage: e.validationMessage || "",
-    formatFunction: e.formatFunction
+    validationMessageIcon: h(t, e),
+    formatFunction: e.formatFunction,
+    labels: o(t.labels, e.labels),
+    readOnlyRenderer: e.readOnlyRenderer ?? t.readOnlyRenderer,
+    validationMessages: o(
+      t.validationMessages,
+      e.validationMessages
+    )
   };
-}, C = (t, e, a, n, i) => {
-  const d = a ?? e.selectedOptions ?? t.selectedOptions ?? [], u = e.defaultSelectedOptions ?? t.defaultSelectedOptions ?? [];
+}, ie = (t, e, n, i, l) => {
+  const r = T(
+    n ?? e.selectedOptions ?? t.selectedOptions
+  );
   return {
     title: e.title || t.title,
-    onChange: n,
-    onValidationChange: i,
+    onChange: i,
+    onValidationChange: l,
     infoLabel: e.infoLabel,
     hint: e.hint,
-    placeholder: e.placeholder,
+    labels: o(t.labels, e.labels),
     hidden: e.hidden || !1,
     required: e.required || !1,
     editable: e.editable !== void 0 ? e.editable : !0,
     disabled: e.disabled || !1,
     validationState: e.validationState || "none",
     validationMessage: e.validationMessage || "",
+    validationMessageIcon: h(t, e),
     multiple: e.multiple ?? t.multiple,
     options: e.options ?? t.options ?? [],
-    selectedOptions: d,
-    defaultSelectedOptions: u,
-    beforeRenderOptions: e.beforeRenderOptions ?? t.beforeRenderOptions
+    selectedOptions: r,
+    beforeRenderOptions: e.beforeRenderOptions ?? t.beforeRenderOptions,
+    readOnlyRenderer: e.readOnlyRenderer ?? t.readOnlyRenderer
   };
-}, I = (t, e, a, n, i) => {
-  const d = a !== void 0 ? a : e.selectedDates !== void 0 ? e.selectedDates : void 0, u = e.defaultSelectedDates ?? t.defaultSelectedDates ?? [];
+}, le = (t, e, n, i, l) => {
+  const r = T(
+    n ?? e.selectedDates ?? t.selectedDates
+  );
   return {
     title: e.title || t.title,
-    onChange: n,
-    onValidationChange: i,
+    onChange: i,
+    onSelectDate: e.onSelectDate ?? t.onSelectDate,
+    onValidationChange: l,
     infoLabel: e.infoLabel,
     hint: e.hint,
-    placeholder: e.placeholder,
     hidden: e.hidden || !1,
     required: e.required || !1,
     editable: e.editable !== void 0 ? e.editable : !0,
     disabled: e.disabled || !1,
     validationState: e.validationState || "none",
     validationMessage: e.validationMessage || "",
-    selectedDates: d ?? [],
-    defaultSelectedDates: u
+    validationMessageIcon: h(t, e),
+    selectedDates: r,
+    localizedStrings: e.localizedStrings ?? t.localizedStrings,
+    allowTextInput: e.allowTextInput ?? t.allowTextInput,
+    allowRangeSelection: e.allowRangeSelection ?? t.allowRangeSelection,
+    restrictedDates: e.restrictedDates ?? t.restrictedDates,
+    minDate: e.minDate ?? t.minDate,
+    maxDate: e.maxDate ?? t.maxDate,
+    friendlyDateFormat: e.friendlyDateFormat ?? t.friendlyDateFormat,
+    onFormatDate: e.onFormatDate ?? t.onFormatDate,
+    labels: o(t.labels, e.labels),
+    showGoToToday: e.showGoToToday ?? t.showGoToToday,
+    showCloseButton: e.showCloseButton ?? t.showCloseButton,
+    includeTime: e.includeTime ?? t.includeTime ?? !1,
+    timePlaceholder: e.timePlaceholder ?? t.timePlaceholder,
+    readOnlyRenderer: e.readOnlyRenderer ?? t.readOnlyRenderer
   };
-}, G = (t, e, a, n, i) => {
-  const d = e.files !== void 0 ? e.files : a, u = e.defaultFiles ?? t.defaultFiles;
+}, re = (t, e, n, i, l) => {
+  const r = T(n ?? e.files);
   return {
     title: e.title || t.title,
-    onChange: n,
-    onValidationChange: i,
+    onChange: i,
+    onValidationChange: l,
     infoLabel: e.infoLabel,
     hint: e.hint,
     hidden: e.hidden || !1,
@@ -267,34 +395,33 @@ const p = (t) => {
     disabled: e.disabled || !1,
     validationState: e.validationState || "none",
     validationMessage: e.validationMessage || "",
-    files: d ?? [],
-    defaultFiles: u ?? [],
+    validationMessageIcon: h(t, e),
+    files: r,
     multiple: e.multiple ?? t.multiple,
     acceptedTypes: e.acceptedTypes ?? t.acceptedTypes,
     maxFileSize: e.maxFileSize ?? t.maxFileSize,
-    onRemoveAttachment: e.onRemoveAttachment ?? t.onRemoveAttachment
+    labels: o(t.labels, e.labels),
+    onRemoveAttachment: e.onRemoveAttachment ?? t.onRemoveAttachment,
+    readOnlyRenderer: e.readOnlyRenderer ?? t.readOnlyRenderer
   };
-}, H = (t, e, a, n, i) => {
-  const d = a !== void 0 ? a : e.value, u = e.defaultValue !== void 0 ? e.defaultValue : t.defaultValue, f = d === void 0 && u === void 0 ? !1 : u;
-  return {
-    title: e.title || t.title,
-    value: d,
-    defaultValue: f,
-    onChange: n,
-    checkedText: e.checkedText || "Sí",
-    uncheckedText: e.uncheckedText || "No",
-    onValidationChange: i,
-    infoLabel: e.infoLabel,
-    hint: e.hint,
-    hidden: e.hidden || !1,
-    required: e.required || !1,
-    editable: e.editable !== void 0 ? e.editable : !0,
-    disabled: e.disabled || !1,
-    validationState: e.validationState || "none",
-    validationMessage: e.validationMessage || ""
-  };
-};
+}, de = (t, e, n, i, l) => ({
+  title: e.title || t.title,
+  value: n,
+  onChange: i,
+  labels: o(t.labels, e.labels),
+  onValidationChange: l,
+  infoLabel: e.infoLabel,
+  hint: e.hint,
+  hidden: e.hidden || !1,
+  required: e.required || !1,
+  editable: e.editable !== void 0 ? e.editable : !0,
+  disabled: e.disabled || !1,
+  validationState: e.validationState || "none",
+  validationMessage: e.validationMessage || "",
+  validationMessageIcon: h(t, e),
+  readOnlyRenderer: e.readOnlyRenderer ?? t.readOnlyRenderer
+});
 export {
-  ee as EFWFormFieldWrapper,
-  p as generateGridTemplateColumns
+  fe as EFWFormFieldWrapper,
+  Fe as generateGridTemplateColumns
 };

package/dist/react-components/forms/EFWForm/index.d.ts

@@ -1,4 +1,7 @@
-export type { EFWFieldLogic, EFWFormProps, EFWFormValues, EFWFormFieldValue, EFWFormFieldProps, EFWFormMethods, EFWFormRef, EFWFormFieldUpdate, EFWFormFieldType, EFWFieldLogicContext, EFWFieldLogicTrigger } from './EFWForm.types';
-export { getEFWFormFieldDisplayText } from './EFWForm.converter';
+export type { EFWFieldLogic, EFWFormProps, EFWFormValues, EFWFormFieldValue, EFWFormFieldProps, EFWFormMethods, EFWFormRef, EFWFormFieldUpdate, EFWFormFieldType, EFWFieldLogicContext, EFWFieldLogicTrigger, EFWUpdateFieldFunction, EFWFormFieldAnimationConfig } from './EFWForm.types';
+export type { EFWFormLocaleText } from '../../i18n';
+export { getFormFieldDisplayText } from './EFWForm.converter';
 export { useFormController } from './EFWForm.hooks';
 export { EFWForm } from './EFWForm';
+export { flatToEFWValues, EFWValuesToFlat, EFWConversionError } from './EFWForm.flatConverter';
+export type { FlatValues, FlatValueOfField, FlatToEFWOptions, EFWToFlatOptions, EFWConversionErrorCode, DateSerializeFunction } from './EFWForm.flatConverter';