@envisiongroup/porygon 1.0.0-rc.9 → 1.0.1

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

@@ -0,0 +1,260 @@
+import { jsx as x, Fragment as zt } from "react/jsx-runtime";
+import { makeStyles as Bt, tokens as p, mergeClasses as Dt, Text as Nt, Input as Pt } from "@fluentui/react-components";
+import { useId as Tt, useRef as L, useState as It, useMemo as u, useCallback as ht, useEffect as C } from "react";
+import { stripFormatting as v, getInputFormattedValue as E, applyFormatting as gt, computeFormattedCaretPosition as Wt } from "./EFWInput.utils.js";
+import { useIsomorphicLayoutEffect as Ot } from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { resolveInputValidationState as jt } from "./EFWInput.validation.js";
+import { useFieldsLocaleText as At } from "../../i18n/PorygonI18nProvider.js";
+const qt = Bt({
+  efwInputError: {
+    backgroundColor: p.colorPaletteRedBackground1,
+    "::after": {
+      borderBottomColor: p.colorPaletteRedBorder2,
+      borderBottomStyle: "solid",
+      borderBottomWidth: "2px"
+    }
+  },
+  efwInput: {
+    "& [disabled]": {
+      backgroundColor: p.colorNeutralBackground3,
+      color: p.colorNeutralForeground2,
+      "&::placeholder": {
+        color: "transparent"
+      }
+    },
+    // Afectar el span que contiene el input disabled
+    "&:has(span + [disabled])": {
+      backgroundColor: p.colorNeutralBackground3
+    }
+  }
+}), Yt = (Ct) => {
+  const {
+    value: c,
+    defaultValue: M,
+    onChange: k,
+    editable: bt = !0,
+    disabled: Vt = !1,
+    className: Ft = "",
+    autoComplete: yt = "off",
+    type: wt = "text",
+    contentBefore: Rt,
+    contentAfter: St,
+    formatType: a = "none",
+    formatPattern: m,
+    formatFunction: b,
+    formatConfig: o,
+    minLength: z = 0,
+    maxLength: B = 250,
+    labels: D,
+    readOnlyRenderer: xt,
+    validationMessages: r,
+    validationState: Lt = "none",
+    setParentComponentState: N
+  } = Ct, n = c !== void 0, P = (n ? c : M) ?? "", I = M ?? "", T = qt(), W = Tt(), O = L(!1), j = L(null), V = L(null), [d, A] = It(
+    () => v(P, a, o)
+  ), [Et, F] = It(
+    () => E(P, a, {
+      formatPattern: m,
+      formatFunction: b,
+      formatConfig: o
+    })
+  ), l = u(
+    () => ({ formatPattern: m, formatFunction: b, formatConfig: o }),
+    [m, b, o]
+  ), q = At(), G = q.input.labels, i = q.input.validationMessages, H = G.placeholder, J = G.emptyState, K = D?.placeholder, Q = D?.emptyState, U = u(() => ({
+    placeholder: K ?? H,
+    emptyState: Q ?? J
+  }), [
+    K,
+    Q,
+    H,
+    J
+  ]), X = i.minLength, Y = i.maxLength, Z = i.creditCardInvalid, _ = i.chileanRutInvalid, $ = i.dateInvalid, tt = i.dateInvalidWithFormat, et = i.timeInvalid, at = i.emailInvalid, nt = i.formatInvalid, ot = r?.minLength, lt = r?.maxLength, rt = r?.creditCardInvalid, it = r?.chileanRutInvalid, st = r?.dateInvalid, ct = r?.dateInvalidWithFormat, dt = r?.timeInvalid, ut = r?.emailInvalid, mt = r?.formatInvalid, ft = u(() => ({
+    minLength: ot ?? X,
+    maxLength: lt ?? Y,
+    creditCardInvalid: rt ?? Z,
+    chileanRutInvalid: it ?? _,
+    dateInvalid: st ?? $,
+    dateInvalidWithFormat: ct ?? tt,
+    timeInvalid: dt ?? et,
+    emailInvalid: ut ?? at,
+    formatInvalid: mt ?? nt
+  }), [
+    ot,
+    lt,
+    rt,
+    it,
+    st,
+    ct,
+    dt,
+    ut,
+    mt,
+    X,
+    Y,
+    Z,
+    _,
+    $,
+    tt,
+    et,
+    at,
+    nt
+  ]), h = u(
+    () => v(I, a, o),
+    [I, a, o]
+  ), y = u(
+    () => E(
+      I,
+      a,
+      l
+    ),
+    [I, a, l]
+  ), pt = u(() => {
+    if (!n)
+      return { raw: "", formatted: "" };
+    const e = v(
+      c ?? "",
+      a,
+      o
+    ), t = E(
+      c,
+      a,
+      l
+    );
+    return { raw: e, formatted: t };
+  }, [n, c, a, o, l]), w = n ? pt.raw : d, R = n ? pt.formatted : Et, s = ht(
+    (e) => {
+      const t = jt({
+        rawValue: e,
+        formatType: a,
+        formatPattern: m,
+        formatConfig: o,
+        minLength: z,
+        maxLength: B,
+        messages: ft,
+        formatOptions: l
+      });
+      return N?.(
+        t.hasError ? "error" : "none",
+        t.message
+      ), t.hasError;
+    },
+    [
+      z,
+      B,
+      a,
+      m,
+      o,
+      l,
+      N,
+      ft
+    ]
+  );
+  C(() => {
+    n && s(w);
+  }, [n, w, s]), C(() => {
+    n || (A(
+      (e) => e === h ? e : h
+    ), F(
+      (e) => e === y ? e : y
+    ), s(h));
+  }, [
+    n,
+    h,
+    y,
+    s
+  ]), C(() => {
+    n || F((e) => {
+      const t = gt(
+        d,
+        a,
+        l
+      );
+      return t === e ? e : t;
+    });
+  }, [n, d, a, l]), C(() => {
+    n || O.current || (O.current = !0, s(d));
+  }, [n, d, s]);
+  const Mt = ht(
+    (e, t) => {
+      if (typeof t.value == "string") {
+        const g = v(
+          t.value,
+          a,
+          o
+        ), f = gt(
+          g,
+          a,
+          l
+        ), S = v(
+          f,
+          a,
+          o
+        );
+        if (f !== t.value) {
+          const vt = e.currentTarget?.selectionStart;
+          typeof vt == "number" && (V.current = Wt({
+            previousCaret: vt,
+            typedValue: t.value,
+            nextFormatted: f,
+            formatType: a,
+            formatOptions: l
+          }));
+        }
+        s(S), n || (A(S), F(f)), k?.(S, f);
+      }
+    },
+    [
+      a,
+      o,
+      l,
+      k,
+      s,
+      n
+    ]
+  );
+  Ot(() => {
+    const e = V.current;
+    if (e === null) return;
+    V.current = null;
+    const t = j.current;
+    if (!t || document.activeElement !== t) return;
+    const g = Math.max(0, Math.min(e, t.value.length));
+    t.setSelectionRange(g, g);
+  });
+  const kt = Dt(
+    Ft,
+    T.efwInput,
+    Lt === "error" && T.efwInputError
+  );
+  if (!bt) {
+    const e = R || U.emptyState, t = xt?.(
+      n ? c : d,
+      e
+    );
+    return t != null ? /* @__PURE__ */ x(zt, { children: t }) : /* @__PURE__ */ x(Nt, { style: R ? void 0 : { opacity: 0.7 }, children: e });
+  }
+  return /* @__PURE__ */ x(
+    Pt,
+    {
+      ref: j,
+      className: kt,
+      id: W,
+      name: W,
+      type: wt,
+      placeholder: U.placeholder,
+      contentBefore: Rt,
+      contentAfter: St,
+      disabled: Vt,
+      value: R,
+      "data-raw-value": w,
+      autoComplete: yt,
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: "false",
+      onChange: Mt
+    }
+  );
+};
+export {
+  Yt as EFWInput
+};

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

@@ -1,8 +1,15 @@
-import { EFWFieldChildrenProps } from '../EFWField/EFWField.types';
+import { EFWFieldChildrenProps } from '../_shared/EFWField/EFWField.types';
+import { ReactNode } from 'react';
 
 /**
  * Valor que puede contener un componente de entrada EFW.
- * Representa el valor de texto o null cuando no hay contenido.
+ * Semántica recomendada:
+ * - `undefined`: prop ausente (modo uncontrolled)
+ * - `null`: vacío explícito recibido desde integración externa
+ * - `string`: valor efectivo del campo
+ *
+ * Nota: el callback `onChange` emite siempre un `string` normalizado
+ * (incluyendo `""` cuando el valor está vacío).
  *
  * @example
  * // Valor con texto
@@ -17,6 +24,39 @@ import { EFWFieldChildrenProps } from '../EFWField/EFWField.types';
  * const [inputValue, setInputValue] = useState<EFWInputValue>("Valor inicial");
  */
 export type EFWInputValue = string | null | undefined;
+export type EFWInputNonEditableRenderer = (value: EFWInputValue, displayValue: string) => ReactNode;
+/**
+ * Textos de la UI del componente EFWInput.
+ */
+export interface EFWInputLabels {
+    /** Texto de sugerencia mostrado cuando el campo está vacío. */
+    placeholder?: string;
+    /** Texto mostrado cuando el campo no tiene valor. */
+    emptyState?: string;
+}
+/**
+ * Mensajes de error para cada tipo de validación del componente EFWInput.
+ */
+export interface EFWInputValidationMessages {
+    /** Mensaje cuando el valor no alcanza la longitud mínima. */
+    minLength?: (minLength: number) => string;
+    /** Mensaje cuando el valor supera la longitud máxima. */
+    maxLength?: (maxLength: number) => string;
+    /** Mensaje cuando el número de tarjeta de crédito es inválido. */
+    creditCardInvalid?: string;
+    /** Mensaje cuando el RUT chileno es inválido. */
+    chileanRutInvalid?: string;
+    /** Mensaje cuando la fecha es inválida. */
+    dateInvalid?: string;
+    /** Mensaje cuando la fecha no cumple el formato esperado. */
+    dateInvalidWithFormat?: string;
+    /** Mensaje cuando la hora es inválida. */
+    timeInvalid?: string;
+    /** Mensaje cuando el correo electrónico es inválido. */
+    emailInvalid?: string;
+    /** Mensaje cuando el valor no cumple el formato personalizado. */
+    formatInvalid?: string;
+}
 /**
  * Tipos de formato disponibles para el componente EFWInput.
  * Determina cómo se formatea y valida el contenido del campo de entrada.
@@ -26,14 +66,46 @@ export type EFWInputValue = string | null | undefined;
  * const basicFormat: FormatType = 'none';
  *
  * @example
- * // Para números de teléfono
- * const phoneFormat: FormatType = 'phone';
- *
- * @example
  * // Para RUT chileno
  * const rutFormat: FormatType = 'chileanRut';
  */
-export type FormatType = 'none' | 'phone' | 'creditCard' | 'chileanRut' | 'date' | 'custom' | 'email';
+export type FormatType = "none" | "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.
+     *
+     * Manejo de entrada inválida: cuando además se define `mask`, un valor que
+     * contiene caracteres que `stripPattern` removería pero que NO son decoración
+     * de la máscara se considera inválido; en ese caso el texto se conserva tal
+     * cual (se refleja en el campo) y se marca como error en lugar de descartarse
+     * en silencio. Sin `mask`, `stripPattern` actúa solo como sanitizador y los
+     * caracteres que no calzan se eliminan sin feedback.
+     */
+    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
@@ -46,7 +118,7 @@ export type FormatType = 'none' | 'phone' | 'creditCard' | 'chileanRut' | 'date'
  * // Uso básico
  * const basicProps: EFWInputProps = {
  *   value: "ejemplo@email.com",
- *   placeholder: "Ingrese su email",
+ *   labels: { placeholder: "Ingrese su email" },
  *   formatType: "email"
  * };
  *
@@ -99,7 +171,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.
@@ -138,7 +210,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.
@@ -150,17 +222,6 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
      * className="campo-destacado campo-grande"
      */
     className?: string;
-    /**
-     * Texto de sugerencia mostrado cuando el campo está vacío.
-     * Proporciona una pista visual sobre qué tipo de contenido se espera.
-     *
-     * @example
-     * placeholder="Ingrese su nombre completo"
-     *
-     * @example
-     * placeholder="ejemplo@correo.com"
-     */
-    placeholder?: string;
     /**
      * Tipo de formato aplicado automáticamente al valor del campo.
      * Determina cómo se muestra y valida el contenido ingresado.
@@ -171,15 +232,13 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
      * formatType="chileanRut"
      *
      * @example
-     * formatType="phone"
-     *
-     * @example
      * formatType="email"
      */
     formatType?: FormatType;
     /**
      * 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}$"
@@ -188,6 +247,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.
@@ -244,11 +317,33 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
      * }}
      */
     formatFunction?: (value: EFWInputValue) => EFWInputValue;
+    /**
+     * Textos personalizables de la UI del campo.
+     *
+     * @example
+     * labels={{ placeholder: "Ingrese su nombre", emptyState: "Sin valor" }}
+     */
+    labels?: EFWInputLabels;
+    /**
+     * Renderiza contenido custom cuando `editable={false}`.
+     * Si retorna `null` o `undefined`, se utiliza el render no editable por defecto.
+     */
+    readOnlyRenderer?: EFWInputNonEditableRenderer;
+    /**
+     * Mensajes de error personalizados para cada tipo de validación.
+     *
+     * @example
+     * validationMessages={{ emailInvalid: "Correo no válido", minLength: (n) => `Mínimo ${n} caracteres` }}
+     */
+    validationMessages?: EFWInputValidationMessages;
     /**
      * Callback ejecutado cuando el valor del campo cambia.
      * Recibe tanto el valor sin formato como el valor mostrado al usuario.
      *
-     * @param value - Valor crudo sin formato aplicado
+     * @param value - Valor crudo normalizado (emisión real: `string`).
+     *   Nota: el valor crudo solo está garantizado sin decoración cuando es válido.
+     *   Para entradas inválidas con `mask` + `stripPattern`, se emite el texto tal
+     *   como se ingresó (puede incluir decoración) para reflejarlo y marcar el error.
      * @param displayValue - Valor formateado mostrado en el campo
      *
      * @example

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

@@ -0,0 +1,101 @@
+import { EFWInputFormatConfig, EFWInputValue, FormatType } from './EFWInput.types';
+
+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;
+/**
+ * Determina si un valor contiene caracteres que `stripPattern` eliminaría pero
+ * que NO forman parte de la decoración estática de la máscara.
+ *
+ * Esos caracteres se consideran "inválidos": en lugar de descartarlos en
+ * silencio (lo que dejaba el campo vacío y sin feedback), deben conservarse y
+ * mostrarse tal como se ingresaron para que el campo pueda marcar el error.
+ *
+ * Solo se evalúan los caracteres que el `stripPattern` removería, por lo que el
+ * solapamiento entre dígitos de payload y dígitos usados como decoración en la
+ * máscara (p. ej. `+56`) no produce falsos positivos: esos dígitos válidos no
+ * son removidos por un `stripPattern` como `/\D/g` y por ende nunca se evalúan.
+ *
+ * La comparación contra la decoración es sensible a mayúsculas/minúsculas: con
+ * una máscara con letras (p. ej. `NV-####`) un carácter con distinta caja que el
+ * de la máscara se considera inválido. Es el comportamiento esperado para
+ * surfacing de errores de tipeo.
+ */
+export declare const hasInvalidMaskCharacters: (value: string, stripPattern: RegExp, mask: string) => boolean;
+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, 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;
+/**
+ * Crea un predicado que determina si un carácter forma parte del "payload"
+ * (los datos reales que escribe la persona) o si es decoración estática que el
+ * formato inserta.
+ *
+ * Devuelve `null` cuando el formato no permite un mapeo confiable de caret
+ * (p. ej. `formatType="custom"` con una `formatFunction` arbitraria), en cuyo
+ * caso el llamador debe abstenerse de reposicionar el caret.
+ *
+ * Notas sobre solapamiento decoración/payload: en máscaras como `+56 # #### ####`
+ * los dígitos del prefijo (`5`, `6`) se consideran payload por el `stripPattern`
+ * (`/\\D/g`). Esto es intencional y consistente: se cuentan igual en el texto
+ * tecleado y en el formateado, por lo que el mapeo de caret no se desbalancea.
+ */
+export declare const createPayloadCharTester: (formatType: FormatType, options?: FormatOptions) => ((char: string) => boolean) | null;
+/**
+ * Calcula la posición de caret en `nextFormatted` tras una edición, preservando
+ * la posición lógica respecto al payload que la persona está editando.
+ *
+ * Delega el cálculo en `computeCaretAfterReformat` (core compartido en commons),
+ * resolviendo primero el predicado de payload propio del `formatType`.
+ *
+ * Devuelve `null` cuando el formato no permite un mapeo confiable; en ese caso
+ * el llamador debe dejar el comportamiento por defecto del navegador.
+ */
+export declare const computeFormattedCaretPosition: ({ previousCaret, typedValue, nextFormatted, formatType, formatOptions, }: {
+    previousCaret: number;
+    typedValue: string;
+    nextFormatted: string;
+    formatType: FormatType;
+    formatOptions?: FormatOptions;
+}) => number | null;
+/**
+ * Retorna el valor formateado que EFWInput muestra cuando no está en modo editable.
+ * Combina stripFormatting + applyFormatting en una sola llamada.
+ */
+export declare const getInputFormattedValue: (value: EFWInputValue, formatType?: FormatType, options?: {
+    formatPattern?: string;
+    formatFunction?: (value: EFWInputValue) => EFWInputValue;
+    formatConfig?: EFWInputFormatConfig;
+}) => string;