@envisiongroup/porygon 0.1.0-rc.2 → 0.1.0-rc.4

package/dist/react-components/fields/EFWNumberInput/EFWNumberInput.js

@@ -1,183 +1,198 @@
-import { jsx as k, Fragment as Z } from "react/jsx-runtime";
-import { makeStyles as ee, tokens as N, mergeClasses as re, Input as te, Text as ne } from "@fluentui/react-components";
-import { useId as ae, useMemo as oe, useState as P, useRef as se, useCallback as B, useEffect as le } from "react";
-import { applyFormatting as p, stripFormatting as x, isValidNumber as H } from "./EFWNumberInput.utils.js";
-const ue = ee({
+import { jsx as j, Fragment as ie } from "react/jsx-runtime";
+import { makeStyles as ce, tokens as C, mergeClasses as de, Input as fe, Text as me } from "@fluentui/react-components";
+import { useId as pe, useMemo as S, useCallback as k, useState as A, useRef as ge, useEffect as L } from "react";
+import { stripFormatting as D, applyFormatting as p, isValidNumber as Q } from "./EFWNumberInput.utils.js";
+const be = ce({
   EFWNumberInputError: {
-    backgroundColor: N.colorPaletteRedBackground1,
+    backgroundColor: C.colorPaletteRedBackground1,
     "::after": {
-      borderBottomColor: N.colorPaletteRedBorder2,
+      borderBottomColor: C.colorPaletteRedBorder2,
       borderBottomStyle: "solid",
       borderBottomWidth: "2px"
     }
   },
   EFWNumberInput: {
     "& [disabled]": {
-      backgroundColor: N.colorNeutralBackground3,
-      color: N.colorNeutralForeground2,
+      backgroundColor: C.colorNeutralBackground3,
+      color: C.colorNeutralForeground2,
       "&::placeholder": {
         color: "transparent"
       }
     },
     "&:has(span + [disabled])": {
-      backgroundColor: N.colorNeutralBackground3
+      backgroundColor: C.colorNeutralBackground3
     }
   }
-}), ie = () => {
+}), Ve = () => {
   const i = /* @__PURE__ */ new Map();
-  return (r, t) => {
-    const $ = `${r}-${t}`;
-    if (!i.has($)) {
-      const E = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), g = t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      i.set($, {
-        validation: new RegExp(`^-?[\\d${E}]*${g}?\\d*$`),
-        thousandSeparator: new RegExp(`^\\d+${E}0{1,2}$`),
+  return (o, V) => {
+    const a = `${o}-${V}`;
+    if (!i.has(a)) {
+      const w = o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = V.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      i.set(a, {
+        validation: new RegExp(`^-?[\\d${w}]*${h}?\\d*$`),
+        thousandSeparator: new RegExp(`^\\d+${w}0{1,2}$`),
         progressPatterns: [
           new RegExp("^-?$"),
-          new RegExp(`^-?\\d+${g}$`),
-          new RegExp(`^-?\\d+${g}0+$`),
-          new RegExp(`^-?[\\d${E}]+${g}$`),
-          new RegExp(`^-?[\\d${E}]+${g}0+$`)
+          new RegExp(`^-?\\d+${h}$`),
+          new RegExp(`^-?\\d+${h}0+$`),
+          new RegExp(`^-?[\\d${w}]+${h}$`),
+          new RegExp(`^-?[\\d${w}]+${h}0+$`)
         ]
       });
     }
-    return i.get($);
+    return i.get(a);
   };
-}, ce = ie(), O = (i, r) => r.some((t) => t.test(i)), de = (i, r) => i.includes(r) && (i.endsWith("0") || i.endsWith(r) || /\.\d*0$/.test(i.replace(r, "."))), he = (i) => {
+}, he = Ve(), X = (i, o) => o.some((V) => V.test(i)), Ee = (i, o) => i.includes(o) && (i.endsWith("0") || i.endsWith(o) || /\.\d*0$/.test(i.replace(o, "."))), ye = (i) => {
   const {
-    value: r,
-    onChange: t,
-    editable: $ = !0,
-    disabled: E = !1,
-    className: g = "",
-    autoComplete: U = "off",
-    placeholder: _,
-    contentBefore: q,
-    contentAfter: G,
-    formatType: a = "number",
-    maxValue: y,
-    minValue: C,
-    validationState: J = "none",
+    value: o,
+    defaultValue: V,
+    onChange: a,
+    editable: w = !0,
+    disabled: h = !1,
+    className: Y = "",
+    autoComplete: Z = "off",
+    placeholder: ee,
+    contentBefore: re,
+    contentAfter: te,
+    formatType: t = "number",
+    maxValue: R,
+    minValue: F,
+    validationState: ne = "none",
     setParentComponentState: d,
-    enableFormatting: W = !0,
-    thousandSeparator: v = ",",
+    enableFormatting: H = !0,
+    thousandSeparator: N = ",",
     decimalSeparator: f = "."
-  } = i, D = ue(), T = ae(), o = oe(() => ({
-    enableFormatting: W,
-    thousandSeparator: v,
+  } = i, I = V ?? null, O = be(), U = pe(), x = o !== void 0, P = x ? o ?? null : V ?? null, n = S(() => ({
+    enableFormatting: H,
+    thousandSeparator: N,
     decimalSeparator: f
-  }), [W, v, f]), [c, b] = P(() => p(r ? r.toString() : "", a, o)), [S, w] = P(!1), [V, M] = P(!1), u = se({
-    prevValue: r,
+  }), [H, N, f]), $ = k((r) => r === null ? "" : D(r.toString(), t, n), [t, n]), B = S(() => $(P), [$, P]), y = S(
+    () => $(I),
+    [$, I]
+  ), _ = S(
+    () => y ? p(y, t, n) : "",
+    [y, t, n]
+  ), [c, g] = A(() => B ? p(B, t, n) : ""), [W, v] = A(!1), [b, q] = A(!1), l = ge({
+    prevValue: P,
     lastValidatedValue: "",
-    rawValue: r ? x(r.toString(), a, o) : ""
-  }), h = ce(v, f), F = B((n) => {
-    if (u.current.lastValidatedValue === n)
-      return S;
-    if (u.current.lastValidatedValue = n, a !== "number" || n.length === 0)
+    rawValue: B
+  }), E = he(N, f), T = k((r) => {
+    if (l.current.lastValidatedValue === r)
+      return W;
+    if (l.current.lastValidatedValue = r, t !== "number" || r.length === 0)
       return d?.("none", ""), !1;
-    if (!h.validation.test(n))
+    if (!E.validation.test(r))
       return d?.("error", "El valor ingresado no es un número válido."), !0;
-    const s = x(n, a, o);
-    if (O(n, h.progressPatterns))
+    const s = D(r, t, n);
+    if (X(r, E.progressPatterns))
       return d?.("none", ""), !1;
-    if (s && !H(s))
+    if (s && !Q(s))
       return d?.("error", "El valor ingresado no es un número válido."), !0;
     if (s) {
       const e = Number(s);
-      if (C !== void 0 && e < C)
-        return d?.("error", `El valor debe ser mayor o igual a ${p(C.toString(), "number", o)}.`), !0;
-      if (y !== void 0 && e > y)
-        return d?.("error", `El valor debe ser menor o igual a ${p(y.toString(), "number", o)}.`), !0;
+      if (F !== void 0 && e < F)
+        return d?.("error", `El valor debe ser mayor o igual a ${p(F.toString(), "number", n)}.`), !0;
+      if (R !== void 0 && e > R)
+        return d?.("error", `El valor debe ser menor o igual a ${p(R.toString(), "number", n)}.`), !0;
     }
     return d?.("none", ""), !1;
-  }, [a, h, d, C, y, o, S]);
-  le(() => {
-    if (r !== u.current.prevValue && !V) {
-      const n = x(r ? r.toString() : "", a, o), s = p(n, a, o);
-      u.current.rawValue = n, u.current.prevValue = r, b(s), w(!1);
+  }, [t, E, d, F, R, n, W]);
+  L(() => {
+    if (x && o !== l.current.prevValue && !b) {
+      const r = $(o ?? null), s = r ? p(r, t, n) : "";
+      l.current.rawValue = r, l.current.prevValue = o ?? null, g(s), v(!1);
     }
-  }, [r, a, o, V]);
-  const K = B(() => {
-    if (a !== "number" || !V) return;
-    M(!1);
-    let n = c;
-    if (n.endsWith(f) && (n = n.slice(0, -1)), n.includes(f)) {
-      const [e, I] = n.split(f);
-      I && /^0+$/.test(I) && (n = e);
+  }, [o, t, n, b, x, $]), L(() => {
+    x || b || (l.current.rawValue = y, l.current.prevValue = I, g(_), v(!1));
+  }, [
+    x,
+    b,
+    y,
+    _,
+    I
+  ]);
+  const ae = k(() => {
+    if (t !== "number" || !b) return;
+    q(!1);
+    let r = c;
+    if (r.endsWith(f) && (r = r.slice(0, -1)), r.includes(f)) {
+      const [e, z] = r.split(f);
+      z && /^0+$/.test(z) && (r = e);
     }
-    const s = x(n, a, o);
-    if (s && H(s)) {
-      const e = p(s, a, o);
-      u.current.rawValue = s, b(e), w(!1), t?.(Number(s), e);
-    } else (c === "" || c === "-") && (u.current.rawValue = "", b(""), w(!1), t?.(null, ""));
-  }, [c, a, o, t, f, V]), L = B((n, s) => {
+    const s = D(r, t, n);
+    if (s && Q(s)) {
+      const e = p(s, t, n);
+      l.current.rawValue = s, g(e), v(!1), a?.(Number(s), e);
+    } else (c === "" || c === "-") && (l.current.rawValue = "", g(""), v(!1), a?.(null, ""));
+  }, [c, t, n, a, f, b]), oe = k((r, s) => {
     if (typeof s.value != "string") return;
     const e = s.value;
-    if (V || M(!0), b(e), e.length < c.length && c.startsWith(e) && h.thousandSeparator.test(e)) {
-      const l = e.replace(new RegExp(v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), ""), R = p(l, a, o), A = F(R);
-      u.current.rawValue = l, b(R), w(A), t?.(A || !l ? null : Number(l), R);
+    if (b || q(!0), g(e), e.length < c.length && c.startsWith(e) && E.thousandSeparator.test(e)) {
+      const u = e.replace(new RegExp(N.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), ""), M = p(u, t, n), K = T(M);
+      l.current.rawValue = u, g(M), v(K), a?.(K || !u ? null : Number(u), M);
       return;
     }
-    const m = x(e, a, o), j = F(e), z = de(e, f), Y = O(e, h.progressPatterns);
-    if (u.current.rawValue = m, w(j), j)
-      if (m && h.validation.test(e))
-        if (z)
-          t?.(Number(m), e);
+    const m = D(e, t, n), G = T(e), J = Ee(e, f), ue = X(e, E.progressPatterns);
+    if (l.current.rawValue = m, v(G), G)
+      if (m && E.validation.test(e))
+        if (J)
+          a?.(Number(m), e);
         else {
-          const l = p(m, a, o);
-          b(l), t?.(Number(m), l);
+          const u = p(m, t, n);
+          g(u), a?.(Number(m), u);
         }
       else
-        t?.(null, e);
+        a?.(null, e);
     else if (m)
-      if (z)
-        t?.(Number(m), e);
+      if (J)
+        a?.(Number(m), e);
       else {
-        const l = p(m, a, o);
-        b(l), t?.(Number(m), l);
+        const u = p(m, t, n);
+        g(u), a?.(Number(m), u);
       }
-    else if (Y) {
-      const l = e.replace(/[^\d-]/g, "");
-      l && l !== "-" ? (u.current.rawValue = l, t?.(Number(l), e)) : (u.current.rawValue = "", t?.(null, e));
+    else if (ue) {
+      const u = e.replace(/[^\d-]/g, "");
+      u && u !== "-" ? (l.current.rawValue = u, a?.(Number(u), e)) : (l.current.rawValue = "", a?.(null, e));
     } else
-      u.current.rawValue = "", t?.(null, "");
+      l.current.rawValue = "", a?.(null, "");
   }, [
     c,
-    V,
-    h,
-    v,
-    a,
-    o,
-    F,
+    b,
+    E,
+    N,
+    t,
+    n,
+    T,
     f,
-    t
-  ]), Q = J === "error" || S, X = re(
-    g,
-    D.EFWNumberInput,
-    Q && D.EFWNumberInputError
+    a
+  ]), le = ne === "error" || W, se = de(
+    Y,
+    O.EFWNumberInput,
+    le && O.EFWNumberInputError
   );
-  return /* @__PURE__ */ k(Z, { children: $ ? /* @__PURE__ */ k(
-    te,
+  return /* @__PURE__ */ j(ie, { children: w ? /* @__PURE__ */ j(
+    fe,
     {
-      className: X,
-      id: T,
-      name: T,
+      className: se,
+      id: U,
+      name: U,
       type: "text",
-      placeholder: _,
-      contentBefore: q,
-      contentAfter: G,
-      disabled: E,
+      placeholder: ee,
+      contentBefore: re,
+      contentAfter: te,
+      disabled: h,
       value: c,
-      "data-raw-value": u.current.rawValue,
-      autoComplete: U,
+      "data-raw-value": l.current.rawValue,
+      autoComplete: Z,
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: "false",
-      onChange: L,
-      onBlur: K
+      onChange: oe,
+      onBlur: ae
     }
-  ) : /* @__PURE__ */ k(ne, { style: c ? void 0 : { opacity: 0.7 }, children: c || "Sin datos disponibles" }) });
+  ) : /* @__PURE__ */ j(me, { style: c ? void 0 : { opacity: 0.7 }, children: c || "Sin datos disponibles" }) });
 };
 export {
-  he as EFWNumberInput
+  ye as EFWNumberInput
 };

package/dist/react-components/fields/EFWNumberInput/EFWNumberInput.types.d.ts

@@ -71,6 +71,18 @@ export interface EFWNumberInputProps extends Partial<EFWFieldChildrenProps> {
      * value={null}
      */
     value?: EFWNumberInputValue;
+    /**
+     * Valor inicial usado cuando el componente opera en modo uncontrolled.
+     * Solo se toma en cuenta durante el montaje o cuando cambia explícitamente
+     * mientras no se haya definido `value`.
+     *
+     * @example
+     * defaultValue={25000}
+     *
+     * @example
+     * defaultValue={null}
+     */
+    defaultValue?: EFWNumberInputValue;
     formatType?: FormatType;
     /**
      * Controla si el usuario puede editar el contenido del campo.

package/dist/react-components/fields/EFWNumberInputField/EFWNumberInputField.js

@@ -1,58 +1,60 @@
 import { jsx as a } from "react/jsx-runtime";
-import { EFWField as W } from "../EFWField/EFWField.js";
-import { EFWNumberInput as I } from "../EFWNumberInput/EFWNumberInput.js";
-const w = (t) => {
+import { EFWField as I } from "../EFWField/EFWField.js";
+import { EFWNumberInput as L } from "../EFWNumberInput/EFWNumberInput.js";
+const y = (t) => {
   const {
     title: n,
-    infoLabel: o,
-    hint: l,
+    infoLabel: l,
+    hint: o,
     style: r = {},
     required: i = !1,
     contentBefore: d,
-    contentAfter: h,
-    minValue: m,
-    maxValue: s,
-    validationState: u,
+    contentAfter: u,
+    minValue: h,
+    maxValue: m,
+    validationState: s,
     validationMessage: f,
     value: p,
+    defaultValue: c,
     editable: e = !0,
-    disabled: c = !1,
-    hidden: g = !1,
-    onChange: b,
-    autoComplete: C = "off",
-    placeholder: F,
+    disabled: g = !1,
+    hidden: b = !1,
+    onChange: C,
+    autoComplete: F = "off",
+    placeholder: V,
     thousandSeparator: v,
     decimalSeparator: x,
     onValidationChange: E
   } = t;
   return /* @__PURE__ */ a(
-    W,
+    I,
     {
       style: r,
       title: n,
-      infoLabel: o,
+      infoLabel: l,
       weightLabel: e ? "regular" : "semibold",
-      hint: l,
+      hint: o,
       required: i,
-      validationState: u,
+      validationState: s,
       validationMessage: f,
       onValidationChange: E,
-      hidden: g,
+      hidden: b,
       children: /* @__PURE__ */ a(
-        I,
+        L,
         {
           value: p,
+          defaultValue: c,
           editable: e,
-          onChange: (S, V) => {
-            b?.(S, V || "");
+          onChange: (S, W) => {
+            C?.(S, W);
           },
-          disabled: c,
-          autoComplete: C,
-          placeholder: F,
+          disabled: g,
+          autoComplete: F,
+          placeholder: V,
           contentBefore: d,
-          contentAfter: h,
-          minValue: m,
-          maxValue: s,
+          contentAfter: u,
+          minValue: h,
+          maxValue: m,
           thousandSeparator: v,
           decimalSeparator: x
         }
@@ -61,5 +63,5 @@ const w = (t) => {
   );
 };
 export {
-  w as EFWNumberInputField
+  y as EFWNumberInputField
 };

package/dist/react-components/fields/EFWSwitch/EFWSwitch.js

@@ -1,54 +1,55 @@
-import { jsx as c, Fragment as C } from "react/jsx-runtime";
-import { makeStyles as N, tokens as s, mergeClasses as x, Switch as y, Text as T } from "@fluentui/react-components";
-import { useId as F, useState as u, useEffect as V, useCallback as _ } from "react";
-const I = N({
+import { jsx as r, Fragment as x } from "react/jsx-runtime";
+import { makeStyles as y, tokens as c, mergeClasses as T, Switch as v, Text as F } from "@fluentui/react-components";
+import { useId as V, useState as _, useEffect as I, useCallback as B } from "react";
+const E = y({
   efwSwitch: {
     "& [disabled]": {
       "&~ .fui-Switch__indicator": {
-        backgroundColor: s.colorNeutralBackground3,
-        color: s.colorNeutralForeground4
+        backgroundColor: c.colorNeutralBackground3,
+        color: c.colorNeutralForeground4
       },
       "&~ .fui-Switch__label": {
-        color: s.colorNeutralForeground2
+        color: c.colorNeutralForeground2
       }
     },
     // Afectar el span que contiene el input disabled
     "& :has(span + [disabled])": {
-      backgroundColor: s.colorNeutralBackground3
+      backgroundColor: c.colorNeutralBackground3
     }
   }
-}), j = (h) => {
+}), U = (f) => {
   const {
-    value: o = !1,
-    onChange: l,
-    className: f = "",
+    value: d,
+    defaultValue: k,
+    onChange: i,
+    className: m = "",
     editable: g = !0,
-    disabled: k = !1,
-    checkedText: e = "Sí",
-    uncheckedText: t = "No"
-  } = h, m = I(), S = F(), [r, n] = u(o || !1), [i, d] = u(o ? e : t);
-  V(() => {
-    n(o || !1), d(o ? e : t);
-  }, [o, e, t]);
-  const b = _((p) => {
-    const a = p.currentTarget.checked;
-    n(a), d(a ? e : t), l?.(a, a ? e : t);
-  }, [e, t, l]), w = x(
-    m.efwSwitch,
-    f
+    disabled: C = !1,
+    checkedText: l = "Sí",
+    uncheckedText: s = "No"
+  } = f, S = E(), b = V(), o = k ?? !1, e = d !== void 0, [w, u] = _(o);
+  I(() => {
+    e || u((t) => t === o ? t : o);
+  }, [e, o]);
+  const h = e ? !!d : w, a = h ? l : s, p = B((t) => {
+    const n = t.currentTarget.checked;
+    e || u(n), i?.(n, n ? l : s);
+  }, [l, s, i, e]), N = T(
+    S.efwSwitch,
+    m
   );
-  return /* @__PURE__ */ c(C, { children: g ? /* @__PURE__ */ c(
-    y,
+  return /* @__PURE__ */ r(x, { children: g ? /* @__PURE__ */ r(
+    v,
     {
-      className: w,
-      id: S,
-      disabled: k,
-      checked: r,
-      onChange: b,
-      label: r ? e : t
+      className: N,
+      id: b,
+      disabled: C,
+      checked: h,
+      onChange: p,
+      label: a
     }
-  ) : /* @__PURE__ */ c(T, { style: i ? void 0 : { opacity: 0.7 }, children: i || "Sin datos disponibles" }) });
+  ) : /* @__PURE__ */ r(F, { style: a ? void 0 : { opacity: 0.7 }, children: a || "Sin datos disponibles" }) });
 };
 export {
-  j as EFWSwitch
+  U as EFWSwitch
 };

package/dist/react-components/fields/EFWSwitch/EFWSwitch.types.d.ts

@@ -23,6 +23,12 @@ export interface EFWSwitchProps extends Partial<EFWFieldChildrenProps> {
      * Valor inicial del switch.
      */
     value?: EFWSwitchValue;
+    /**
+     * Valor por defecto utilizado cuando el componente opera en modo uncontrolled.
+     * Este valor solo se usa durante la inicialización o cuando cambia la prop
+     * `defaultValue` mientras no exista una prop `value` controlando el campo.
+     */
+    defaultValue?: EFWSwitchValue;
     /**
      * Determina si el switch es editable por el usuario.
      * @default true

package/dist/react-components/fields/EFWSwitchField/EFWSwitchField.js

@@ -1,47 +1,49 @@
 import { jsx as a } from "react/jsx-runtime";
-import { EFWField as p } from "../EFWField/EFWField.js";
-import { EFWSwitch as x } from "../EFWSwitch/EFWSwitch.js";
-const W = (t) => {
+import { EFWField as x } from "../EFWField/EFWField.js";
+import { EFWSwitch as S } from "../EFWSwitch/EFWSwitch.js";
+const k = (t) => {
   const {
     title: i,
-    infoLabel: n,
-    hint: l,
+    infoLabel: l,
+    hint: n,
     style: o = {},
     required: d = !1,
     validationState: h,
     validationMessage: r,
-    value: s = !1,
+    value: s,
+    defaultValue: c,
     editable: e = !0,
-    disabled: c = !1,
-    hidden: f = !1,
-    checkedText: g = "Sí",
+    disabled: f = !1,
+    hidden: g = !1,
+    checkedText: u = "Sí",
     uncheckedText: m = "No",
-    onChange: u,
-    onValidationChange: b
+    onChange: b,
+    onValidationChange: C
   } = t;
   return /* @__PURE__ */ a(
-    p,
+    x,
     {
       style: o,
       title: i,
-      infoLabel: n,
+      infoLabel: l,
       weightLabel: e ? "regular" : "semibold",
-      hint: l,
+      hint: n,
       required: d,
       validationState: h,
       validationMessage: r,
-      onValidationChange: b,
-      hidden: f,
+      onValidationChange: C,
+      hidden: g,
       children: /* @__PURE__ */ a(
-        x,
+        S,
         {
           value: s,
+          defaultValue: c,
           editable: e,
-          onChange: (C, F) => {
-            u?.(C, F);
+          onChange: (F, p) => {
+            b?.(F, p);
           },
-          disabled: c,
-          checkedText: g,
+          disabled: f,
+          checkedText: u,
           uncheckedText: m
         }
       )
@@ -49,5 +51,5 @@ const W = (t) => {
   );
 };
 export {
-  W as EFWSwitchField
+  k as EFWSwitchField
 };

package/dist/react-components/fields/EFWSwitchField/EFWSwitchField.types.d.ts

@@ -1,7 +1,7 @@
 import { EFWFieldProps } from '../EFWField/EFWField.types';
 import { EFWSwitchProps, EFWSwitchValue, EFWSwitchOnChange } from '../EFWSwitch/EFWSwitch.types';
 
-export type EFWSwitchFieldValue = EFWSwitchValue;
+export type EFWSwitchFieldValue = EFWSwitchValue | undefined;
 export type EFWSwitchFieldOnChange = EFWSwitchOnChange;
 export interface EFWSwitchFieldProps extends Omit<EFWFieldProps, 'children'>, EFWSwitchProps {
 }