@envisiongroup/porygon 1.0.0-rc.9 → 1.0.0

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

@@ -0,0 +1,75 @@
+import { jsx as u, Fragment as I } from "react/jsx-runtime";
+import { makeStyles as U, tokens as n, mergeClasses as B, Text as j, Switch as z } from "@fluentui/react-components";
+import { useMemo as D, useId as M, useState as O, useEffect as R, useCallback as W } from "react";
+import { getSwitchFormattedValue as p } from "./EFWSwitch.utils.js";
+import { useFieldsLocaleText as q } from "../../i18n/PorygonI18nProvider.js";
+const A = U({
+  efwSwitch: {
+    "& [disabled]": {
+      "&~ .fui-Switch__indicator": {
+        backgroundColor: n.colorNeutralBackground3,
+        color: n.colorNeutralForeground4
+      },
+      "&~ .fui-Switch__label": {
+        color: n.colorNeutralForeground2
+      }
+    },
+    // Afectar el span que contiene el input disabled
+    "& :has(span + [disabled])": {
+      backgroundColor: n.colorNeutralBackground3
+    }
+  }
+}), X = (C) => {
+  const {
+    value: h,
+    defaultValue: g,
+    onChange: i,
+    className: w = "",
+    editable: y = !0,
+    disabled: N = !1,
+    labels: s,
+    readOnlyRenderer: v
+  } = C, a = q().switch.labels, k = a.checkedText, x = a.uncheckedText, m = a.emptyState, T = s?.checkedText, f = s?.uncheckedText, b = s?.emptyState, e = D(() => ({
+    checkedText: T ?? k,
+    uncheckedText: f ?? x,
+    emptyState: b ?? m
+  }), [
+    T,
+    f,
+    b,
+    k,
+    x,
+    m
+  ]), F = A(), V = M(), l = g ?? !1, o = h !== void 0, [E, S] = O(l);
+  R(() => {
+    o || S((t) => t === l ? t : l);
+  }, [o, l]);
+  const d = o ? !!h : E, r = p(d, { checkedText: e.checkedText, uncheckedText: e.uncheckedText }), L = W((t) => {
+    const c = t.currentTarget.checked;
+    o || S(c), i?.(c, p(c, { checkedText: e.checkedText, uncheckedText: e.uncheckedText }));
+  }, [e.checkedText, e.uncheckedText, i, o]), _ = B(
+    F.efwSwitch,
+    w
+  );
+  if (!y) {
+    const t = r || e.emptyState, c = v?.(
+      d,
+      t
+    );
+    return c != null ? /* @__PURE__ */ u(I, { children: c }) : /* @__PURE__ */ u(j, { style: r ? void 0 : { opacity: 0.7 }, children: t });
+  }
+  return /* @__PURE__ */ u(
+    z,
+    {
+      className: _,
+      id: V,
+      disabled: N,
+      checked: d,
+      onChange: L,
+      label: r
+    }
+  );
+};
+export {
+  X as EFWSwitch
+};

package/dist/react-components/fields/{EFWSwitch → Switch}/EFWSwitch.types.d.ts

@@ -1,4 +1,5 @@
-import { EFWFieldChildrenProps } from '../EFWField/EFWField.types';
+import { EFWFieldChildrenProps } from '../_shared/EFWField/EFWField.types';
+import { ReactNode } from 'react';
 
 /**
  * Tipo que representa el valor de un switch (interruptor).
@@ -13,6 +14,12 @@ export type EFWSwitchValue = boolean;
  * @returns {void}
  */
 export type EFWSwitchOnChange = (value: EFWSwitchValue, displayValue?: string) => void;
+export type EFWSwitchNonEditableRenderer = (value: EFWSwitchValue, displayValue: string) => ReactNode;
+export interface EFWSwitchLabels {
+    checkedText?: string;
+    uncheckedText?: string;
+    emptyState?: string;
+}
 /**
  * Propiedades del componente EFWSwitch.
  * @interface EFWSwitchProps
@@ -20,7 +27,8 @@ export type EFWSwitchOnChange = (value: EFWSwitchValue, displayValue?: string) =
  */
 export interface EFWSwitchProps extends Partial<EFWFieldChildrenProps> {
     /**
-     * Valor inicial del switch.
+     * Valor controlado del switch.
+     * Si se omite, el componente opera en modo uncontrolled.
      */
     value?: EFWSwitchValue;
     /**
@@ -39,17 +47,17 @@ export interface EFWSwitchProps extends Partial<EFWFieldChildrenProps> {
      */
     className?: string;
     /**
-     * Texto que se muestra cuando el switch está activado.
-     * @default Sí
+     * Función callback que se ejecuta cuando el usuario cambia el estado del switch.
      */
-    checkedText?: string;
+    onChange?: EFWSwitchOnChange;
     /**
-     * Texto que se muestra cuando el switch está desactivado.
-     * @default No
+     * Textos personalizables de la UI del campo.
+     * Permite sobreescribir los textos por defecto para internacionalización.
      */
-    uncheckedText?: string;
+    labels?: EFWSwitchLabels;
     /**
-     * Función callback que se ejecuta cuando el usuario cambia el estado del switch.
+     * Renderiza contenido custom cuando `editable={false}`.
+     * Si retorna `null` o `undefined`, se utiliza el render no editable por defecto.
      */
-    onChange?: EFWSwitchOnChange;
+    readOnlyRenderer?: EFWSwitchNonEditableRenderer;
 }

package/dist/react-components/fields/Switch/EFWSwitch.utils.d.ts

@@ -0,0 +1,9 @@
+import { EFWSwitchValue } from './EFWSwitch.types';
+
+/**
+ * Retorna el valor formateado que EFWSwitch muestra cuando no está en modo editable.
+ */
+export declare const getSwitchFormattedValue: (value: EFWSwitchValue | undefined | null, options?: {
+    checkedText?: string;
+    uncheckedText?: string;
+}) => string;

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

@@ -0,0 +1,4 @@
+const c = (e, t) => e == null ? "" : e ? t?.checkedText ?? "Sí" : t?.uncheckedText ?? "No";
+export {
+  c as getSwitchFormattedValue
+};

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

@@ -0,0 +1,62 @@
+import { jsx as a } from "react/jsx-runtime";
+import { EFWField as W } from "../_shared/EFWField/EFWField.js";
+import { EFWSwitch as x } from "./EFWSwitch.js";
+import { mergeClasses as y } from "@griffel/react";
+const q = (l) => {
+  const {
+    title: i,
+    infoLabel: s,
+    hint: t,
+    className: n,
+    style: o = {},
+    required: r = !1,
+    validationState: d,
+    validationMessage: m,
+    validationMessageIcon: f,
+    value: h,
+    defaultValue: c,
+    editable: e = !0,
+    disabled: g = !1,
+    hidden: u = !1,
+    labels: b,
+    readOnlyRenderer: p,
+    onChange: C,
+    onValidationChange: w,
+    ...F
+  } = l, v = (N, S) => {
+    C?.(N, S);
+  }, E = y(n, "efw-switch-field");
+  return /* @__PURE__ */ a(
+    W,
+    {
+      className: E,
+      style: o,
+      title: i,
+      infoLabel: s,
+      weightLabel: e ? "regular" : "semibold",
+      hint: t,
+      required: r,
+      validationState: d,
+      validationMessage: m,
+      validationMessageIcon: f,
+      onValidationChange: w,
+      hidden: u,
+      ...F,
+      children: /* @__PURE__ */ a(
+        x,
+        {
+          value: h,
+          defaultValue: c,
+          editable: e,
+          onChange: v,
+          disabled: g,
+          labels: b,
+          readOnlyRenderer: p
+        }
+      )
+    }
+  );
+};
+export {
+  q as EFWSwitchField
+};

package/dist/react-components/fields/{EFWSwitchField → Switch}/EFWSwitchField.types.d.ts

@@ -1,6 +1,10 @@
-import { EFWFieldProps } from '../EFWField/EFWField.types';
-import { EFWSwitchProps, EFWSwitchValue, EFWSwitchOnChange } from '../EFWSwitch/EFWSwitch.types';
+import { EFWFieldProps } from '../_shared/EFWField/EFWField.types';
+import { EFWSwitchProps, EFWSwitchValue, EFWSwitchOnChange } from './EFWSwitch.types';
 
+/**
+ * `undefined` se conserva por compatibilidad con EFWForm cuando aún no existe valor
+ * inicial para el campo. En runtime el componente resuelve a estado booleano.
+ */
 export type EFWSwitchFieldValue = EFWSwitchValue | undefined;
 export type EFWSwitchFieldOnChange = EFWSwitchOnChange;
 export interface EFWSwitchFieldProps extends Omit<EFWFieldProps, 'children'>, EFWSwitchProps {

package/dist/react-components/fields/Switch/index.d.ts

@@ -0,0 +1,5 @@
+export { EFWSwitch } from './EFWSwitch';
+export { getSwitchFormattedValue } from './EFWSwitch.utils';
+export type { EFWSwitchProps, EFWSwitchValue, EFWSwitchOnChange, EFWSwitchNonEditableRenderer } from './EFWSwitch.types';
+export { EFWSwitchField } from './EFWSwitchField';
+export type { EFWSwitchFieldProps, EFWSwitchFieldValue, EFWSwitchFieldOnChange } from './EFWSwitchField.types';

package/dist/react-components/fields/Switch/index.js

@@ -0,0 +1,8 @@
+import { EFWSwitch as o } from "./EFWSwitch.js";
+import { getSwitchFormattedValue as i } from "./EFWSwitch.utils.js";
+import { EFWSwitchField as F } from "./EFWSwitchField.js";
+export {
+  o as EFWSwitch,
+  F as EFWSwitchField,
+  i as getSwitchFormattedValue
+};

package/dist/react-components/fields/TagPicker/EFWTagPicker.js

@@ -0,0 +1,384 @@
+import { jsx as a, jsxs as _, Fragment as Ie } from "react/jsx-runtime";
+import { useRef as v, useState as w, useMemo as p, useEffect as A, useCallback as u } from "react";
+import { makeStyles as ze, tokens as n, useTagPickerFilter as De, TagPickerOption as B, Spinner as Ve, mergeClasses as Fe, Text as _e, TagPicker as Qe, TagPickerControl as je, TagPickerGroup as qe, Tag as Ge, TagPickerInput as We, Button as Xe, TagPickerList as He, Avatar as Je } from "@fluentui/react-components";
+import { getTagPickerFormattedValue as pe } from "./EFWTagPicker.utils.js";
+import { normalizeArrayValue as Ke } from "../../commons/valueNormalization.js";
+import { CollectionsEmpty20Regular as Ye, Eraser20Regular as $e } from "@fluentui/react-icons";
+import { useFieldsLocaleText as Ue } from "../../i18n/PorygonI18nProvider.js";
+const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden": !0, name: x.text, color: "colorful" }), Ze = ze({
+  efwTagPickerControlError: {
+    backgroundColor: n.colorPaletteRedBackground1,
+    "::after": {
+      borderBottomColor: n.colorPaletteRedBorder2,
+      borderBottomStyle: "solid",
+      borderBottomWidth: "2px"
+    }
+  },
+  efwTagPickerControl: {
+    "& [disabled]": {
+      backgroundColor: n.colorNeutralBackground3,
+      color: n.colorNeutralForeground2,
+      "&::placeholder": {
+        color: "transparent"
+      }
+    },
+    // Afectar el span que contiene el input disabled
+    // Aumentar especificidad repitiendo el selector
+    "&&:has([disabled])": {
+      backgroundColor: n.colorNeutralBackground3,
+      borderTopColor: n.colorNeutralStrokeDisabled,
+      borderBottomColor: n.colorNeutralStrokeDisabled,
+      borderLeftColor: n.colorNeutralStrokeDisabled,
+      borderRightColor: n.colorNeutralStrokeDisabled,
+      "& button": {
+        borderBottomColor: n.colorNeutralStrokeDisabled,
+        borderTopColor: n.colorNeutralStrokeDisabled,
+        borderLeftColor: n.colorNeutralStrokeDisabled,
+        borderRightColor: n.colorNeutralStrokeDisabled,
+        paddingRight: "5px",
+        "& .fui-Tag__dismissIcon": {
+          display: "none"
+          //visibility: 'hidden'
+        }
+      }
+    },
+    "& .fui-TagPickerGroup, & input": {
+      padding: `${n.spacingVerticalXXS} 0`
+    },
+    "& .fui-Tag__primaryText": {
+      whiteSpace: "normal"
+    },
+    "& .fui-Tag": {
+      height: "auto"
+    }
+  },
+  efwTagPickerOptionContentNoMedia: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  },
+  efwTagPickerOptionSecondaryNoMedia: {
+    color: n.colorNeutralForeground3,
+    fontSize: "12px",
+    lineHeight: "16px"
+  }
+}), st = (x) => {
+  const {
+    labels: f,
+    className: ge = "",
+    minQueryLength: m = 0,
+    options: r = Q,
+    hidden: fe = !1,
+    disabled: j = !1,
+    editable: me = !0,
+    selectedOptions: q = Q,
+    defaultSelectedOptions: R = Q,
+    noPopover: be = !1,
+    tagSize: he = "medium",
+    tagShape: Se = "rounded",
+    tagAppearance: ye = "brand",
+    onChange: P,
+    beforeRenderOptions: O,
+    renderOptionMedia: E,
+    showOptionMediaInSelectedTags: G = !1,
+    readOnlyRenderer: Oe,
+    multiple: W = !0,
+    validationState: X = "none",
+    validationMessage: Ce,
+    setParentComponentState: I
+  } = x, Te = v(X), ke = v(Ce), [s, H] = w(""), c = x.selectedOptions !== void 0, J = (c ? q : R) ?? [], [Me, z] = w(J), i = c ? q ?? [] : Me, N = p(
+    () => new Map(i.map((e) => [e.key, e])),
+    [i]
+  ), b = p(
+    () => i.map((e) => e.key),
+    [i]
+  ), K = p(
+    () => new Set(b),
+    [b]
+  ), [Y, C] = w({ available: [], loading: !1 }), L = Y.available, ve = p(
+    () => L.map((e) => e.key.toString()),
+    [L]
+  ), l = p(
+    () => new Map(L.map((e) => [e.key, e])),
+    [L]
+  ), xe = Y.loading, [D, T] = w(!1), $ = p(() => s.toLowerCase(), [s]), k = v(), g = v(null);
+  g.current === null && (g.current = Object.fromEntries(
+    J.map((e) => [e.key, e])
+  ));
+  const V = v(
+    E ?? ue
+  ), U = p(
+    () => R ?? [],
+    [R]
+  ), h = Ue().tagPicker.labels, Z = h.placeholder, ee = h.noMatchesMessage, te = h.loadingMessage, oe = h.emptyState, ae = h.selectedItemsAriaLabel, ne = h.inputAriaLabel, re = f?.placeholder, le = f?.noMatchesMessage, ie = f?.loadingMessage, se = f?.emptyState, ce = f?.selectedItemsAriaLabel, de = f?.inputAriaLabel, S = p(() => ({
+    placeholder: re ?? Z,
+    noMatchesMessage: le ?? ee,
+    loadingMessage: ie ?? te,
+    emptyState: se ?? oe,
+    selectedItemsAriaLabel: ce ?? ae,
+    inputAriaLabel: de ?? ne
+  }), [
+    re,
+    le,
+    ie,
+    se,
+    ce,
+    de,
+    Z,
+    ee,
+    te,
+    oe,
+    ae,
+    ne
+  ]);
+  A(() => {
+    i.forEach((e) => {
+      g.current[e.key] = e;
+    });
+  }, [i]), A(() => {
+    V.current = E ?? ue;
+  }, [E]);
+  const y = Ze(), Pe = u(
+    (e) => (N.get(e) || l.get(e) || g.current[e])?.text || e,
+    [N, l]
+  ), Ne = u(
+    (e) => {
+      if (!G)
+        return;
+      const t = N.get(e) || l.get(e) || g.current[e];
+      if (!t)
+        return;
+      const o = V.current(t);
+      if (!(o == null || o === !1 || typeof o == "boolean"))
+        return o;
+    },
+    [
+      G,
+      N,
+      l
+    ]
+  );
+  A(() => D ? (k.current?.abort(), k.current = new AbortController(), (async () => {
+    if (typeof r != "function") {
+      const t = O ? O(r) : r;
+      C((o) => ({ ...o, available: t }));
+      return;
+    }
+    I?.(
+      Te.current,
+      ke.current
+    );
+    try {
+      C({ available: [], loading: !0 });
+      const t = await r(s, {
+        signal: k.current.signal
+      }), o = O ? O(t) : t;
+      C({ available: o, loading: !1 });
+    } catch (t) {
+      k.current?.signal.aborted || (console.error("Error loading options:", t), C({ available: [], loading: !1 }), I?.("error", JSON.stringify(t)));
+    }
+  })(), () => k.current?.abort()) : void 0, [
+    D,
+    r,
+    s,
+    O,
+    I,
+    m
+  ]);
+  const Le = u(() => {
+    c || z([]), P?.([], "");
+  }, [c, P]), we = u(
+    (e, t) => {
+      if (t.open && typeof r == "function" && s.length < m) {
+        T(!1);
+        return;
+      }
+      t.open && typeof r == "function" && C({ available: [], loading: !0 }), T(t.open);
+    },
+    [r, s, m]
+  ), Ae = u(
+    (e) => {
+      const t = e.target.value;
+      H(t), typeof r == "function" && t.length < m && T(!1);
+    },
+    [r, m]
+  ), Be = u(
+    (e, t) => {
+      if (t.value === "no-matches") return;
+      let o;
+      W ? o = t.selectedOptions : (o = t.selectedOptions.slice(-1), T(!1)), H(""), typeof r == "function" && m > 0 && T(!1);
+      const M = o.map((d) => {
+        const F = l.get(d) || g.current[d];
+        return F && (g.current[d] = F), F || { key: d, text: d };
+      });
+      c || z(M), P?.(
+        M,
+        pe(Ke(M))
+      );
+    },
+    [l, P, W, c]
+  ), Re = De({
+    // La consulta actual ingresada por el usuario para filtrar opciones.
+    query: s,
+    // Lista de claves (como strings) de las opciones disponibles, obtenidas de 'availableOptions'.
+    options: ve,
+    // Elemento a mostrar cuando no hay opciones disponibles.
+    noOptionsElement: xe ? (
+      // Si está cargando ('isLoading' es true), muestra un spinner pequeño.
+      /* @__PURE__ */ a(
+        Ve,
+        {
+          style: { height: "30px" },
+          size: "extra-tiny",
+          appearance: "primary",
+          label: {
+            size: "small",
+            children: S.loadingMessage
+            // Mensaje como "Buscando información...".
+          }
+        }
+      )
+    ) : (
+      // Si no está cargando y no hay opciones, muestra un mensaje de "sin coincidencias".
+      /* @__PURE__ */ a(
+        B,
+        {
+          value: "no-matches",
+          media: /* @__PURE__ */ a(Ye, {}),
+          children: S.noMatchesMessage
+        }
+      )
+    ),
+    /**
+     * Función para renderizar una opción individual en la lista.
+     * @param {string} optionKey - Clave de la opción a renderizar.
+     * @returns {JSX.Element} - Elemento JSX que representa la opción.
+     */
+    renderOption: u(
+      (e) => {
+        const t = l.get(e);
+        if (t) {
+          const o = V.current(t), M = o != null && o !== !1, d = typeof o == "boolean" ? void 0 : o;
+          return !M && t.secondaryContent ? /* @__PURE__ */ a(
+            B,
+            {
+              media: d,
+              text: t.text,
+              value: t.key,
+              children: /* @__PURE__ */ _("div", { className: y.efwTagPickerOptionContentNoMedia, children: [
+                /* @__PURE__ */ a("span", { children: t.text }),
+                /* @__PURE__ */ a("span", { className: y.efwTagPickerOptionSecondaryNoMedia, children: t.secondaryContent })
+              ] })
+            },
+            t.key
+          ) : /* @__PURE__ */ a(
+            B,
+            {
+              secondaryContent: t.secondaryContent || "",
+              media: d,
+              text: t.text,
+              value: t.key,
+              children: t.text
+            },
+            t.key
+          );
+        }
+        return (
+          // Si no se encuentra la opción, renderiza una versión básica con solo la clave.
+          /* @__PURE__ */ a(B, { value: e, children: e }, e)
+        );
+      },
+      [
+        l,
+        y.efwTagPickerOptionContentNoMedia,
+        y.efwTagPickerOptionSecondaryNoMedia
+      ]
+    ),
+    // Dependencia: se recrea solo si cambia el set de opciones disponibles.
+    /**
+     * Función de filtrado para determinar qué opciones mostrar.
+     * @param {string} optionKey - Clave de la opción a evaluar.
+     * @returns {boolean} - True si la opción debe mostrarse, false si no.
+     */
+    filter: u(
+      (e) => {
+        const t = l.get(e);
+        return t ? !K.has(e) && t.text.toLowerCase().includes($) : !1;
+      },
+      [l, K, $]
+    )
+  }), Ee = Fe(
+    ge,
+    y.efwTagPickerControl,
+    X === "error" && y.efwTagPickerControlError
+  );
+  if (A(() => {
+    c || z(U);
+  }, [c, U]), fe) return null;
+  if (!me) {
+    const e = pe(i) || S.emptyState, t = Oe?.(
+      i,
+      e
+    );
+    return t != null ? /* @__PURE__ */ a(Ie, { children: t }) : /* @__PURE__ */ a(_e, { style: i.length ? void 0 : { opacity: 0.7 }, children: e });
+  }
+  return /* @__PURE__ */ _(
+    Qe,
+    {
+      open: D,
+      size: he,
+      disabled: j,
+      onOptionSelect: Be,
+      onOpenChange: we,
+      selectedOptions: b,
+      noPopover: be,
+      children: [
+        /* @__PURE__ */ _(
+          je,
+          {
+            className: Ee,
+            secondaryAction: !j && b.length ? /* @__PURE__ */ a(
+              Xe,
+              {
+                appearance: "transparent",
+                size: "small",
+                shape: "rounded",
+                onClick: Le,
+                icon: /* @__PURE__ */ a($e, {}),
+                iconPosition: "before"
+              }
+            ) : void 0,
+            children: [
+              /* @__PURE__ */ a(qe, { "aria-label": S.selectedItemsAriaLabel, children: b.map((e) => /* @__PURE__ */ a(
+                Ge,
+                {
+                  style: { paddingTop: "0px", paddingBottom: "0px" },
+                  shape: Se,
+                  appearance: ye,
+                  media: Ne(e),
+                  value: e,
+                  children: Pe(e)
+                },
+                e
+              )) }),
+              /* @__PURE__ */ a(
+                We,
+                {
+                  placeholder: b.length ? "" : S.placeholder,
+                  autoComplete: "off",
+                  "aria-label": S.inputAriaLabel,
+                  value: s,
+                  onChange: Ae
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(He, { children: Re })
+      ]
+    }
+  );
+};
+export {
+  st as EFWTagPicker
+};