@envisiongroup/porygon 1.0.0-rc.41 → 1.0.0-rc.42

package/dist/react-components/fields/DatePicker/EFWDatePicker.utils.js

@@ -138,7 +138,7 @@ const i = (t) => ({
     return `${a}/${u}/${n}`;
   }
 }, d = (t) => {
-  if (t instanceof Date) return t;
+  if (t instanceof Date) return s(t) ? t : null;
   if (typeof t == "string")
     try {
       const e = new Date(t);

package/dist/react-components/fields/Input/EFWInput.d.ts

@@ -1,25 +1,10 @@
 import { EFWInputProps } from './EFWInput.types';
 
 /**
- * Componente de entrada de texto personalizado con soporte para formateo y validación.
- * Permite manejar valores con formatos específicos (como RUT chileno, correo electrónico, números) y valida la entrada del usuario.
- * @param {EFWInputProps} props - Propiedades del componente.
- * @param {string} [props.value=""] - Valor inicial del input.
- * @param {(rawValue: string, formattedValue: string) => void} [props.onChange] - Función llamada cuando cambia el valor del input.
- * @param {boolean} [props.editable=true] - Indica si el input es editable o de solo lectura.
- * @param {boolean} [props.disabled=false] - Indica si el input está deshabilitado.
- * @param {string} [props.autoComplete="off"] - Configuración de autocompletado del input.
- * @param {string} [props.type="text"] - Tipo de input (por ejemplo, 'text', 'number').
- * @param {React.ReactNode} [props.contentBefore] - Contenido renderizado antes del input.
- * @param {React.ReactNode} [props.contentAfter] - Contenido renderizado después del input.
- * @param {string} [props.formatType="none"] - Tipo de formateo aplicado al valor (por ejemplo, 'chileanRut', 'email', 'number').
- * @param {string} [props.formatPattern] - Expresión regular para validar el formato del valor.
- * @param {(value: string) => string} [props.formatFunction] - Función personalizada para formatear el valor.
- * @param {number} [props.maxLength=250] - Longitud máxima del valor en caracteres.
- * @param {number} [props.maxValue] - Valor numérico máximo permitido (para `formatType="number"`).
- * @param {number} [props.minValue] - Valor numérico mínimo permitido (para `formatType="number"`).
- * @param {string} [props.validationState="none"] - Estado de validación externo ('none', 'error').
- * @param {(state: string, message: string) => void} [props.setParentComponentState] - Función para actualizar el estado de validación en el componente padre.
- * @returns {JSX.Element} El componente de input o texto renderizado según la configuración.
+ * Campo de texto con soporte para modo controlled/uncontrolled, formato visual,
+ * normalización de valor crudo, validación y render de solo lectura.
+ *
+ * Los contratos públicos viven en `EFWInput.types.tsx`; este componente se
+ * encarga de orquestar estado, callbacks y render.
  */
 export declare const EFWInput: (props: EFWInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/react-components/fields/Input/EFWInput.js

@@ -1,199 +1,241 @@
-import { jsx as M, Fragment as Be } from "react/jsx-runtime";
-import { makeStyles as Pe, tokens as v, mergeClasses as Te, Text as We, Input as De } from "@fluentui/react-components";
-import { useId as Ne, useRef as Ve, useState as fe, useMemo as h, useCallback as z, useEffect as C } from "react";
-import { stripFormatting as f, getInputFormattedValue as B, isFormattableValue as Oe, validateChileanRut as je, validateEmail as Ae, applyFormatting as P, validateTime as _e } from "./EFWInput.utils.js";
-import { useFieldsLocaleText as qe } from "../../i18n/PorygonI18nProvider.js";
-const Ge = Pe({
+import { jsx as L, Fragment as ke } from "react/jsx-runtime";
+import { makeStyles as Me, tokens as I, mergeClasses as ze, Text as Be, Input as Pe } from "@fluentui/react-components";
+import { useId as De, useRef as Ne, useState as Ie, useMemo as u, useCallback as pe, useEffect as h } from "react";
+import { stripFormatting as p, getInputFormattedValue as x, applyFormatting as fe } from "./EFWInput.utils.js";
+import { resolveInputValidationState as We } from "./EFWInput.validation.js";
+import { useFieldsLocaleText as Te } from "../../i18n/PorygonI18nProvider.js";
+const Oe = Me({
   efwInputError: {
-    backgroundColor: v.colorPaletteRedBackground1,
+    backgroundColor: I.colorPaletteRedBackground1,
     "::after": {
-      borderBottomColor: v.colorPaletteRedBorder2,
+      borderBottomColor: I.colorPaletteRedBorder2,
       borderBottomStyle: "solid",
       borderBottomWidth: "2px"
     }
   },
   efwInput: {
     "& [disabled]": {
-      backgroundColor: v.colorNeutralBackground3,
-      color: v.colorNeutralForeground2,
+      backgroundColor: I.colorNeutralBackground3,
+      color: I.colorNeutralForeground2,
       "&::placeholder": {
         color: "transparent"
       }
     },
     // Afectar el span que contiene el input disabled
     "&:has(span + [disabled])": {
-      backgroundColor: v.colorNeutralBackground3
+      backgroundColor: I.colorNeutralBackground3
     }
   }
-}), Ue = (Ie) => {
+}), Je = (ve) => {
   const {
-    value: c,
-    defaultValue: T,
-    onChange: W,
-    editable: pe = !0,
+    value: d,
+    defaultValue: R,
+    onChange: S,
+    editable: he = !0,
     disabled: ge = !1,
-    className: Ce = "",
-    autoComplete: be = "off",
-    type: Fe = "text",
-    contentBefore: xe,
-    contentAfter: ye,
-    formatType: t = "none",
-    formatPattern: u,
-    formatFunction: b,
-    minLength: I = 0,
-    maxLength: F = 250,
-    labels: D,
-    readOnlyRenderer: Le,
-    validationMessages: o,
-    validationState: Se = "none",
-    setParentComponentState: r
-  } = Ie, a = c !== void 0, N = (a ? c : T) ?? "", p = T ?? "", V = Ge(), O = Ne(), j = Ve(!1), [m, A] = fe(() => f(N, t)), [Ee, x] = fe(() => B(N, t, { formatPattern: u, formatFunction: b })), d = h(
-    () => ({ formatPattern: u, formatFunction: b }),
-    [u, b]
-  ), _ = qe(), q = _.input.labels, i = _.input.validationMessages, G = q.placeholder, H = q.emptyState, J = D?.placeholder, K = D?.emptyState, Q = h(() => ({
-    placeholder: J ?? G,
-    emptyState: K ?? H
+    className: be = "",
+    autoComplete: Ce = "off",
+    type: Ve = "text",
+    contentBefore: Fe,
+    contentAfter: we,
+    formatType: e = "none",
+    formatPattern: m,
+    formatFunction: g,
+    formatConfig: o,
+    minLength: E = 0,
+    maxLength: k = 250,
+    labels: M,
+    readOnlyRenderer: ye,
+    validationMessages: l,
+    validationState: Le = "none",
+    setParentComponentState: z
+  } = ve, t = d !== void 0, B = (t ? d : R) ?? "", f = R ?? "", P = Oe(), D = De(), N = Ne(!1), [c, W] = Ie(
+    () => p(B, e, o)
+  ), [xe, b] = Ie(
+    () => x(B, e, {
+      formatPattern: m,
+      formatFunction: g,
+      formatConfig: o
+    })
+  ), r = u(
+    () => ({ formatPattern: m, formatFunction: g, formatConfig: o }),
+    [m, g, o]
+  ), T = Te(), O = T.input.labels, i = T.input.validationMessages, j = O.placeholder, A = O.emptyState, _ = M?.placeholder, q = M?.emptyState, G = u(() => ({
+    placeholder: _ ?? j,
+    emptyState: q ?? A
   }), [
-    J,
-    K,
-    G,
-    H
-  ]), R = i.minLength, U = i.maxLength, X = i.phoneInvalid, Y = i.creditCardInvalid, Z = i.chileanRutInvalid, $ = i.dateInvalid, w = i.dateInvalidWithFormat, ee = i.timeInvalid, te = i.emailInvalid, ae = i.formatInvalid, ne = o?.minLength, le = o?.maxLength, re = o?.phoneInvalid, oe = o?.creditCardInvalid, ie = o?.chileanRutInvalid, de = o?.dateInvalid, se = o?.dateInvalidWithFormat, ce = o?.timeInvalid, ue = o?.emailInvalid, me = o?.formatInvalid, n = h(() => ({
-    minLength: ne ?? R,
-    maxLength: le ?? U,
-    phoneInvalid: re ?? X,
-    creditCardInvalid: oe ?? Y,
-    chileanRutInvalid: ie ?? Z,
-    dateInvalid: de ?? $,
-    dateInvalidWithFormat: se ?? w,
-    timeInvalid: ce ?? ee,
-    emailInvalid: ue ?? te,
-    formatInvalid: me ?? ae
+    _,
+    q,
+    j,
+    A
+  ]), H = i.minLength, J = i.maxLength, K = i.phoneInvalid, Q = i.creditCardInvalid, U = i.chileanRutInvalid, X = i.dateInvalid, Y = i.dateInvalidWithFormat, Z = i.timeInvalid, $ = i.emailInvalid, ee = i.formatInvalid, te = l?.minLength, ae = l?.maxLength, ne = l?.phoneInvalid, oe = l?.creditCardInvalid, le = l?.chileanRutInvalid, re = l?.dateInvalid, ie = l?.dateInvalidWithFormat, se = l?.timeInvalid, de = l?.emailInvalid, ce = l?.formatInvalid, ue = u(() => ({
+    minLength: te ?? H,
+    maxLength: ae ?? J,
+    phoneInvalid: ne ?? K,
+    creditCardInvalid: oe ?? Q,
+    chileanRutInvalid: le ?? U,
+    dateInvalid: re ?? X,
+    dateInvalidWithFormat: ie ?? Y,
+    timeInvalid: se ?? Z,
+    emailInvalid: de ?? $,
+    formatInvalid: ce ?? ee
   }), [
+    te,
+    ae,
     ne,
+    oe,
     le,
     re,
-    oe,
     ie,
-    de,
     se,
+    de,
     ce,
-    ue,
-    me,
-    R,
+    H,
+    J,
+    K,
+    Q,
     U,
     X,
     Y,
     Z,
     $,
-    w,
-    ee,
-    te,
-    ae
-  ]), g = h(
-    () => f(p, t),
-    [p, t]
-  ), y = h(
-    () => B(p, t, d),
-    [p, t, d]
-  ), he = h(() => {
-    if (!a)
+    ee
+  ]), v = u(
+    () => p(f, e, o),
+    [f, e, o]
+  ), C = u(
+    () => x(
+      f,
+      e,
+      r
+    ),
+    [f, e, r]
+  ), me = u(() => {
+    if (!t)
       return { raw: "", formatted: "" };
-    const e = f(c ?? "", t), l = B(c, t, d);
-    return { raw: e, formatted: l };
-  }, [a, c, t, d]), L = a ? he.raw : m, S = a ? he.formatted : Ee, ve = z((e) => {
-    if (t === "none" || !u) return !0;
-    try {
-      return new RegExp(u).test(e);
-    } catch {
-      return !1;
-    }
-  }, [t, u]), s = z((e) => {
-    if (I > 0 && e.length > 0 && e.length < I)
-      return r?.("error", n.minLength(I)), !0;
-    if (e.length > F)
-      return r?.("error", n.maxLength(F)), !0;
-    if (e.length > 0 && !Oe(e, t)) {
-      const l = {
-        phone: n.phoneInvalid,
-        creditCard: n.creditCardInvalid,
-        chileanRut: n.chileanRutInvalid,
-        date: n.dateInvalid,
-        time: n.timeInvalid
-      };
-      return r?.("error", l[t] || n.formatInvalid), !0;
-    } else {
-      if (t === "chileanRut" && e.length > 0 && !je(e))
-        return r?.("error", n.chileanRutInvalid), !0;
-      if (t === "phone" && e.length > 0 && (e.length < 7 || e.length > 15))
-        return r?.("error", n.phoneInvalid), !0;
-      if (t === "creditCard" && e.length > 0 && (e.length < 13 || e.length > 19))
-        return r?.("error", n.creditCardInvalid), !0;
-      if (t === "date" && e.length > 0 && e.length !== 8)
-        return r?.("error", n.dateInvalidWithFormat), !0;
-      if (t === "email" && e.length > 0 && !Ae(e))
-        return r?.("error", n.emailInvalid), !0;
-      if (t === "time" && e.length > 0) {
-        const l = P(e, t, {});
-        return e.length !== 4 || !_e(l) ? (r?.("error", n.timeInvalid), !0) : (r?.("none", ""), !1);
-      } else return ve(e) ? (r?.("none", ""), !1) : (r?.("error", n.formatInvalid), !0);
-    }
-  }, [I, F, t, ve, r, n]);
-  C(() => {
-    a && s(L);
-  }, [a, L, s]), C(() => {
-    a || (A((e) => e === g ? e : g), x((e) => e === y ? e : y), s(g));
+    const a = p(
+      d ?? "",
+      e,
+      o
+    ), n = x(
+      d,
+      e,
+      r
+    );
+    return { raw: a, formatted: n };
+  }, [t, d, e, o, r]), V = t ? me.raw : c, F = t ? me.formatted : xe, s = pe(
+    (a) => {
+      const n = We({
+        rawValue: a,
+        formatType: e,
+        formatPattern: m,
+        formatConfig: o,
+        minLength: E,
+        maxLength: k,
+        messages: ue,
+        formatOptions: r
+      });
+      return z?.(
+        n.hasError ? "error" : "none",
+        n.message
+      ), n.hasError;
+    },
+    [
+      E,
+      k,
+      e,
+      m,
+      o,
+      r,
+      z,
+      ue
+    ]
+  );
+  h(() => {
+    t && s(V);
+  }, [t, V, s]), h(() => {
+    t || (W(
+      (a) => a === v ? a : v
+    ), b(
+      (a) => a === C ? a : C
+    ), s(v));
   }, [
-    a,
-    g,
-    y,
+    t,
+    v,
+    C,
     s
-  ]), C(() => {
-    a || x((e) => {
-      const l = P(m, t, d);
-      return l === e ? e : l;
+  ]), h(() => {
+    t || b((a) => {
+      const n = fe(
+        c,
+        e,
+        r
+      );
+      return n === a ? a : n;
     });
-  }, [a, m, t, d]), C(() => {
-    a || j.current || (j.current = !0, s(m));
-  }, [a, m, s]);
-  const ke = z((e, l) => {
-    if (typeof l.value == "string") {
-      const ze = f(l.value, t), E = P(ze, t, d), k = f(E, t);
-      s(k), a || (A(k), x(E)), W?.(k, E);
-    }
-  }, [t, d, W, s, a]), Me = Te(
-    Ce,
-    V.efwInput,
-    Se === "error" && V.efwInputError
+  }, [t, c, e, r]), h(() => {
+    t || N.current || (N.current = !0, s(c));
+  }, [t, c, s]);
+  const Re = pe(
+    (a, n) => {
+      if (typeof n.value == "string") {
+        const Ee = p(
+          n.value,
+          e,
+          o
+        ), w = fe(
+          Ee,
+          e,
+          r
+        ), y = p(
+          w,
+          e,
+          o
+        );
+        s(y), t || (W(y), b(w)), S?.(y, w);
+      }
+    },
+    [
+      e,
+      o,
+      r,
+      S,
+      s,
+      t
+    ]
+  ), Se = ze(
+    be,
+    P.efwInput,
+    Le === "error" && P.efwInputError
   );
-  if (!pe) {
-    const e = S || Q.emptyState, l = Le?.(
-      a ? c : m,
-      e
+  if (!he) {
+    const a = F || G.emptyState, n = ye?.(
+      t ? d : c,
+      a
     );
-    return l != null ? /* @__PURE__ */ M(Be, { children: l }) : /* @__PURE__ */ M(We, { style: S ? void 0 : { opacity: 0.7 }, children: e });
+    return n != null ? /* @__PURE__ */ L(ke, { children: n }) : /* @__PURE__ */ L(Be, { style: F ? void 0 : { opacity: 0.7 }, children: a });
   }
-  return /* @__PURE__ */ M(
-    De,
+  return /* @__PURE__ */ L(
+    Pe,
     {
-      className: Me,
-      id: O,
-      name: O,
-      type: Fe,
-      placeholder: Q.placeholder,
-      contentBefore: xe,
-      contentAfter: ye,
+      className: Se,
+      id: D,
+      name: D,
+      type: Ve,
+      placeholder: G.placeholder,
+      contentBefore: Fe,
+      contentAfter: we,
       disabled: ge,
-      value: S,
-      "data-raw-value": L,
-      autoComplete: be,
+      value: F,
+      "data-raw-value": V,
+      autoComplete: Ce,
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: "false",
-      onChange: ke
+      onChange: Re
     }
   );
 };
 export {
-  Ue as EFWInput
+  Je as EFWInput
 };

package/dist/react-components/fields/Input/EFWInput.types.d.ts

@@ -75,7 +75,36 @@ export interface EFWInputValidationMessages {
  * // Para RUT chileno
  * const rutFormat: FormatType = 'chileanRut';
  */
-export type FormatType = 'none' | 'phone' | 'creditCard' | 'chileanRut' | 'date' | 'custom' | 'email' | 'time';
+export type FormatType = "none" | "phone" | "creditCard" | "chileanRut" | "date" | "custom" | "email" | "time";
+export type EFWInputValidationTarget = "raw" | "formatted";
+export interface EFWInputFormatValidationContext {
+    rawValue: string;
+    formattedValue: string;
+}
+export interface EFWInputFormatConfig {
+    /**
+     * Máscara visual. Usa `#` como placeholder de caracteres del valor crudo.
+     * Los caracteres estáticos se renderizan como decoración y se consumen del raw
+     * cuando coinciden, permitiendo máscaras como `+56 # #### ####` con raw `569...`.
+     */
+    mask?: string;
+    /**
+     * Patrón usado para remover decoración y obtener el valor crudo.
+     * Debe provenir de código/configuración confiable; no usar patrones editables por usuarios finales.
+     */
+    stripPattern?: RegExp | string;
+    /**
+     * Patrón usado para validar el valor crudo o formateado.
+     * Debe provenir de código/configuración confiable; no usar patrones editables por usuarios finales.
+     */
+    validationPattern?: RegExp | string;
+    /** Valor sobre el que se aplican `validationPattern` y `validate`. Default: `raw`. */
+    validationTarget?: EFWInputValidationTarget;
+    /** Validador avanzado. Retornar string marca inválido y usa ese string como mensaje. */
+    validate?: (value: string, context: EFWInputFormatValidationContext) => boolean | string;
+    /** Mensaje de error usado cuando falla la validación de este formato. */
+    invalidMessage?: string;
+}
 /**
  * Propiedades del componente EFWInput.
  * Extiende las propiedades básicas de los campos EFW con funcionalidades específicas
@@ -141,7 +170,7 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
      * @example
      * autoComplete="off"
      */
-    autoComplete?: 'on' | 'off';
+    autoComplete?: "on" | "off";
     /**
      * Valor actual del campo de entrada.
      * Puede ser una cadena de texto o null para campos vacíos.
@@ -180,7 +209,7 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
      * @example
      * type="tel"
      */
-    type?: 'text' | 'password' | 'email' | 'number' | 'tel';
+    type?: "text" | "password" | "email" | "number" | "tel";
     /**
      * Clases CSS adicionales aplicadas al componente.
      * Permite personalizar la apariencia del campo de entrada.
@@ -211,6 +240,7 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
     /**
      * Patrón de expresión regular para validación personalizada.
      * Se aplica cuando formatType es "custom" o para validaciones adicionales.
+     * Debe provenir de código/configuración confiable; no usar patrones editables por usuarios finales.
      *
      * @example
      * formatPattern="^[A-Z]{2}[0-9]{6}$"
@@ -219,6 +249,20 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
      * formatPattern="\\d{4}-\\d{4}-\\d{4}-\\d{4}"
      */
     formatPattern?: string;
+    /**
+     * Configuración explícita de formato, normalización y validación.
+     * Es la API recomendada para formatos específicos de negocio.
+     *
+     * @example
+     * formatConfig={{
+     *   mask: '+56 # #### ####',
+     *   stripPattern: /\D/g,
+     *   validationPattern: /^569\d{8}$/,
+     *   validationTarget: 'raw',
+     *   invalidMessage: 'Ingrese un teléfono móvil chileno válido.'
+     * }}
+     */
+    formatConfig?: EFWInputFormatConfig;
     /**
      * Controla si el usuario puede editar el contenido del campo.
      * Cuando es false, el campo se muestra como texto de solo lectura.

package/dist/react-components/fields/Input/EFWInput.utils.d.ts

@@ -1,24 +1,44 @@
-import { EFWInputValue, FormatType } from './EFWInput.types';
+import { EFWInputFormatConfig, EFWInputValue, FormatType } from './EFWInput.types';
 
-interface FormatOptions {
+export interface FormatOptions {
     formatPattern?: string;
     formatFunction?: (value: EFWInputValue) => EFWInputValue;
+    formatConfig?: EFWInputFormatConfig;
+}
+export interface InputFormatValidationResult {
+    valid: boolean;
+    message?: string;
 }
 export declare const validateChileanRut: (rutCompleto: string) => boolean;
 export declare const validateEmail: (email: string) => boolean;
 export declare const validateTime: (time: string) => boolean;
+export declare const toRegExp: (pattern: RegExp | string) => RegExp | undefined;
 /**
  * Verifica si un valor contiene solo caracteres válidos para aplicar formato visual.
  */
 export declare const isFormattableValue: (value: string, formatType: FormatType) => boolean;
+/**
+ * Aplica una máscara visual usando `#` como placeholder de caracteres del raw.
+ * Los caracteres estáticos se consumen del raw si coinciden, lo que permite que
+ * una máscara con prefijo (`+56 # ...`) funcione con raw que incluye el prefijo (`569...`).
+ */
+export declare const applyMask: (rawValue: string, mask: string) => string;
+export declare const stripInputValue: (value: string, formatType: FormatType, formatConfig?: EFWInputFormatConfig) => string;
+export declare const applyInputFormatting: (value: string, formatType: FormatType, options?: FormatOptions) => string;
 /**
  * Quita el formato de un valor según el tipo especificado
  */
-export declare const stripFormatting: (value: string, formatType: FormatType) => string;
+export declare const stripFormatting: (value: string, formatType: FormatType, formatConfig?: EFWInputFormatConfig) => string;
 /**
  * Aplica formato a un valor según el tipo y opciones especificadas
  */
 export declare const applyFormatting: (value: string, formatType: FormatType, options?: FormatOptions) => string;
+export declare const validateInputFormat: ({ rawValue, formattedValue, formatConfig, defaultMessage, }: {
+    rawValue: string;
+    formattedValue: string;
+    formatConfig?: EFWInputFormatConfig;
+    defaultMessage: string;
+}) => InputFormatValidationResult;
 /**
  * Retorna el valor formateado que EFWInput muestra cuando no está en modo editable.
  * Combina stripFormatting + applyFormatting en una sola llamada.
@@ -26,5 +46,5 @@ export declare const applyFormatting: (value: string, formatType: FormatType, op
 export declare const getInputFormattedValue: (value: EFWInputValue, formatType?: FormatType, options?: {
     formatPattern?: string;
     formatFunction?: (value: EFWInputValue) => EFWInputValue;
+    formatConfig?: EFWInputFormatConfig;
 }) => string;
-export {};