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

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

@@ -1,8 +1,8 @@
-import { jsx as t, Fragment as ae, jsxs as j } from "react/jsx-runtime";
-import { useRef as y, useState as p, useCallback as u, useEffect as N } from "react";
-import { makeStyles as se, tokens as s, useTagPickerFilter as ie, TagPickerOption as R, Avatar as le, Spinner as ce, mergeClasses as de, TagPicker as pe, TagPickerControl as ue, TagPickerGroup as ge, Tag as fe, TagPickerInput as me, Button as he, TagPickerList as be, Text as Ce } from "@fluentui/react-components";
-import { CollectionsEmpty20Regular as ke, Eraser20Regular as Oe } from "@fluentui/react-icons";
-const ye = se({
+import { jsx as o, Fragment as pe, jsxs as F } from "react/jsx-runtime";
+import { useRef as y, useState as O, useMemo as V, useEffect as T, useCallback as u } from "react";
+import { makeStyles as ue, tokens as s, useTagPickerFilter as fe, TagPickerOption as R, Avatar as ge, Spinner as me, mergeClasses as he, TagPicker as be, TagPickerControl as Oe, TagPickerGroup as Ce, Tag as Se, TagPickerInput as ke, Button as ye, TagPickerList as Te, Text as xe } from "@fluentui/react-components";
+import { CollectionsEmpty20Regular as Pe, Eraser20Regular as ve } from "@fluentui/react-icons";
+const w = [], Ne = ue({
   efwTagPickerControl: {
     "& [disabled]": {
       backgroundColor: s.colorNeutralBackground3,
@@ -35,99 +35,106 @@ const ye = se({
       borderBottomWidth: "2px"
     }
   }
-}), ve = (D) => {
+}), Me = (q) => {
   const {
-    placeholder: F = "Selecciona una opción",
-    noMatchesMessage: I = "No se encontraron coincidencias",
-    loadingMessage: V = "Buscando información...",
-    className: _ = "",
-    minQueryLength: g = 0,
-    options: n = [],
-    hidden: q = !1,
-    disabled: w = !1,
-    editable: Q = !0,
-    selectedOptions: l = [],
-    //values: initialSelectedOptions = [],
-    noPopover: W = !1,
-    tagSize: G = "medium",
-    tagShape: J = "rounded",
-    tagAppearance: H = "brand",
-    onChange: k,
-    beforeRenderOptions: f,
-    multiple: E = !0,
-    validationState: L = "none",
-    validationMessage: U,
-    setParentComponentState: S
-  } = D, X = y(L), Y = y(U), [a, A] = p(""), [c, T] = p(l.map((e) => e.key)), [m, x] = p(l), [i, h] = p([]), [Z, P] = p(!1), [b, O] = p(!1), d = y(), v = y(
-    Object.fromEntries(l.map((e) => [e.key, e]))
-  ), M = ye(), $ = u((e) => (m.find((r) => r.key === e) || v.current[e])?.text || e, [m]);
-  N(() => {
-    T(l.map((e) => e.key)), x(l);
-  }, [l]), N(() => {
-    typeof n == "function" && a.length < g && b && O(!1);
-  }, [a, g, n, b]), N(() => b ? (d.current?.abort(), d.current = new AbortController(), (async () => {
-    if (typeof n != "function") {
-      const o = f ? f(n) : n;
-      h(o);
+    placeholder: Q = "Selecciona una opción",
+    noMatchesMessage: W = "No se encontraron coincidencias",
+    loadingMessage: G = "Buscando información...",
+    className: J = "",
+    minQueryLength: f = 0,
+    options: r = w,
+    hidden: Y = !1,
+    disabled: M = !1,
+    editable: H = !0,
+    selectedOptions: x = w,
+    defaultSelectedOptions: P = w,
+    noPopover: U = !1,
+    tagSize: X = "medium",
+    tagShape: Z = "rounded",
+    tagAppearance: $ = "brand",
+    onChange: C,
+    beforeRenderOptions: g,
+    multiple: L = !0,
+    validationState: z = "none",
+    validationMessage: K,
+    setParentComponentState: v
+  } = q, ee = y(z), te = y(K), [a, A] = O(""), i = x !== void 0, D = (i ? x : P) ?? [], [oe, N] = O(D), l = i ? x ?? [] : oe, d = V(() => l.map((e) => e.key), [l]), [c, m] = O([]), [ne, B] = O(!1), [h, S] = O(!1), p = y(), k = y(
+    Object.fromEntries(D.map((e) => [e.key, e]))
+  ), I = V(
+    () => P ?? [],
+    [P]
+  );
+  T(() => {
+    l.forEach((e) => {
+      k.current[e.key] = e;
+    });
+  }, [l]);
+  const _ = Ne(), re = u((e) => (l.find((n) => n.key === e) || k.current[e])?.text || e, [l]);
+  T(() => {
+    typeof r == "function" && a.length < f && h && S(!1);
+  }, [a, f, r, h]), T(() => h ? (p.current?.abort(), p.current = new AbortController(), (async () => {
+    if (typeof r != "function") {
+      const t = g ? g(r) : r;
+      m(t);
       return;
     }
-    S?.(X.current, Y.current);
+    v?.(ee.current, te.current);
     try {
-      P(!0), h([]);
-      const o = await n(a, { signal: d.current.signal }), r = f ? f(o) : o;
-      h(r);
-    } catch (o) {
-      d.current?.signal.aborted || (console.error("Error loading options:", o), h([]), S?.("error", JSON.stringify(o)));
+      B(!0), m([]);
+      const t = await r(a, { signal: p.current.signal }), n = g ? g(t) : t;
+      m(n);
+    } catch (t) {
+      p.current?.signal.aborted || (console.error("Error loading options:", t), m([]), v?.("error", JSON.stringify(t)));
     } finally {
-      d.current?.signal.aborted || P(!1);
+      p.current?.signal.aborted || B(!1);
     }
-  })(), () => d.current?.abort()) : void 0, [b, n, a, f, S, g]);
-  const K = u(() => {
-    T([]), x([]), k?.([]);
-  }, [k]), ee = u((e, o) => {
-    if (o.open && typeof n == "function" && a.length < g) {
-      O(!1);
+  })(), () => p.current?.abort()) : void 0, [h, r, a, g, v, f]);
+  const ae = u(() => {
+    i || N([]), C?.([]);
+  }, [i, C]), le = u((e, t) => {
+    if (t.open && typeof r == "function" && a.length < f) {
+      S(!1);
       return;
     }
-    o.open && typeof n == "function" && (P(!0), h([])), O(o.open);
-  }, [n, a, g]), oe = u((e, o) => {
-    if (o.value === "no-matches") return;
-    let r;
-    E ? r = o.selectedOptions : (r = o.selectedOptions.slice(-1), O(!1)), T(r), A("");
-    const z = r.map((C) => {
-      const B = i.find((ne) => ne.key === C) || v.current[C];
-      return B && (v.current[C] = B), B || { key: C, text: C };
+    t.open && typeof r == "function" && (B(!0), m([])), S(t.open);
+  }, [r, a, f]), se = u((e, t) => {
+    if (t.value === "no-matches") return;
+    let n;
+    L ? n = t.selectedOptions : (n = t.selectedOptions.slice(-1), S(!1)), A("");
+    const j = n.map((b) => {
+      const E = c.find((de) => de.key === b) || k.current[b];
+      return E && (k.current[b] = E), E || { key: b, text: b };
     });
-    x(z), k?.(z);
-  }, [i, k, E]), te = ie({
+    i || N(j), C?.(j);
+  }, [c, C, L, i]), ie = fe({
     // La consulta actual ingresada por el usuario para filtrar opciones.
     query: a,
     // Lista de claves (como strings) de las opciones disponibles, obtenidas de 'availableOptions'.
-    options: i.map((e) => e.key.toString()),
+    options: c.map((e) => e.key.toString()),
     // Elemento a mostrar cuando no hay opciones disponibles.
-    noOptionsElement: Z ? (
+    noOptionsElement: ne ? (
       // Si está cargando ('isLoading' es true), muestra un spinner pequeño.
-      /* @__PURE__ */ t(
-        ce,
+      /* @__PURE__ */ o(
+        me,
         {
           style: { height: "30px" },
           size: "extra-tiny",
           appearance: "primary",
           label: {
             size: "small",
-            children: V
+            children: G
             // Mensaje como "Buscando información...".
           }
         }
       )
     ) : (
       // Si no está cargando y no hay opciones, muestra un mensaje de "sin coincidencias".
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ o(
         R,
         {
           value: "no-matches",
-          media: /* @__PURE__ */ t(ke, {}),
-          children: I
+          media: /* @__PURE__ */ o(Pe, {}),
+          children: W
         }
       )
     ),
@@ -137,21 +144,21 @@ const ye = se({
      * @returns {JSX.Element} - Elemento JSX que representa la opción.
      */
     renderOption: u((e) => {
-      const o = i.find((r) => r.key === e);
-      return o ? /* @__PURE__ */ t(
+      const t = c.find((n) => n.key === e);
+      return t ? /* @__PURE__ */ o(
         R,
         {
-          secondaryContent: o.secondaryContent || "",
-          media: /* @__PURE__ */ t(le, { shape: "square", "aria-hidden": !0, name: o.text, color: "colorful" }),
-          value: o.key,
-          children: o.text
+          secondaryContent: t.secondaryContent || "",
+          media: /* @__PURE__ */ o(ge, { shape: "square", "aria-hidden": !0, name: t.text, color: "colorful" }),
+          value: t.key,
+          children: t.text
         },
-        o.key
+        t.key
       ) : (
         // Si no se encuentra la opción, renderiza una versión básica con solo la clave.
-        /* @__PURE__ */ t(R, { value: e, children: e }, e)
+        /* @__PURE__ */ o(R, { value: e, children: e }, e)
       );
-    }, [i]),
+    }, [c]),
     // Dependencia: se recrea si 'availableOptions' cambia.
     /**
      * Función de filtrado para determinar qué opciones mostrar.
@@ -159,58 +166,60 @@ const ye = se({
      * @returns {boolean} - True si la opción debe mostrarse, false si no.
      */
     filter: u((e) => {
-      const o = i.find((r) => r.key === e);
-      return o ? !c.includes(e) && o.text.toLowerCase().includes(a.toLowerCase()) : !1;
-    }, [i, c, a])
+      const t = c.find((n) => n.key === e);
+      return t ? !d.includes(e) && t.text.toLowerCase().includes(a.toLowerCase()) : !1;
+    }, [c, d, a])
   });
-  if (q) return null;
-  const re = de(
-    _,
-    M.efwTagPickerControl,
-    L === "error" && M.efwTagPickerControlError
+  if (Y) return null;
+  const ce = he(
+    J,
+    _.efwTagPickerControl,
+    z === "error" && _.efwTagPickerControlError
   );
-  return /* @__PURE__ */ t(ae, { children: Q ? /* @__PURE__ */ j(
-    pe,
+  return T(() => {
+    i || N(I);
+  }, [i, I]), /* @__PURE__ */ o(pe, { children: H ? /* @__PURE__ */ F(
+    be,
     {
-      open: b,
-      size: G,
-      disabled: w,
-      onOptionSelect: oe,
-      onOpenChange: ee,
-      selectedOptions: c,
-      noPopover: W,
+      open: h,
+      size: X,
+      disabled: M,
+      onOptionSelect: se,
+      onOpenChange: le,
+      selectedOptions: d,
+      noPopover: U,
       children: [
-        /* @__PURE__ */ j(
-          ue,
+        /* @__PURE__ */ F(
+          Oe,
           {
-            className: re,
-            secondaryAction: !w && c.length ? /* @__PURE__ */ t(
-              he,
+            className: ce,
+            secondaryAction: !M && d.length ? /* @__PURE__ */ o(
+              ye,
               {
                 appearance: "transparent",
                 size: "small",
                 shape: "rounded",
-                onClick: K,
-                icon: /* @__PURE__ */ t(Oe, {}),
+                onClick: ae,
+                icon: /* @__PURE__ */ o(ve, {}),
                 iconPosition: "before"
               }
             ) : void 0,
             children: [
-              /* @__PURE__ */ t(ge, { "aria-label": "Selected items", children: c.map((e) => /* @__PURE__ */ t(
-                fe,
+              /* @__PURE__ */ o(Ce, { "aria-label": "Selected items", children: d.map((e) => /* @__PURE__ */ o(
+                Se,
                 {
                   style: { paddingTop: "0px", paddingBottom: "0px" },
-                  shape: J,
-                  appearance: H,
+                  shape: Z,
+                  appearance: $,
                   value: e,
-                  children: $(e)
+                  children: re(e)
                 },
                 e
               )) }),
-              /* @__PURE__ */ t(
-                me,
+              /* @__PURE__ */ o(
+                ke,
                 {
-                  placeholder: c.length ? "" : F,
+                  placeholder: d.length ? "" : Q,
                   autoComplete: "off",
                   "aria-label": "Select items",
                   value: a,
@@ -220,11 +229,11 @@ const ye = se({
             ]
           }
         ),
-        /* @__PURE__ */ t(be, { children: te })
+        /* @__PURE__ */ o(Te, { children: ie })
       ]
     }
-  ) : /* @__PURE__ */ t(Ce, { style: m.length ? void 0 : { opacity: 0.7 }, children: m.length ? m.map((e) => e.text).join(", ") : "Sin datos disponibles" }) });
+  ) : /* @__PURE__ */ o(xe, { style: l.length ? void 0 : { opacity: 0.7 }, children: l.length ? l.map((e) => e.text).join(", ") : "Sin datos disponibles" }) });
 };
 export {
-  ve as EFWTagPicker
+  Me as EFWTagPicker
 };

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

@@ -122,10 +122,15 @@ export interface EFWTagPickerProps extends EFWFieldChildrenProps {
      */
     options: EFWTagPickerOption[] | AsyncOptionsLoader;
     /**
-     * Array de opciones actualmente seleccionadas en el componente
-     * @default []
+     * Array de opciones actualmente seleccionadas. Cuando esta prop está presente,
+     * el componente funciona en modo controlled y se espera que los cambios se sincronicen desde el padre.
      */
     selectedOptions?: EFWTagPickerOption[];
+    /**
+     * Selección inicial utilizada en modo uncontrolled. Solo se aplica durante el montaje
+     * y permite que el componente administre su propio estado si no se proporciona `selectedOptions`.
+     */
+    defaultSelectedOptions?: EFWTagPickerOption[];
     /** Función callback ejecutada cuando cambian las opciones seleccionadas */
     onChange?: EFWTagPickerOnChange;
     /** Función para transformar o procesar las opciones antes de renderizarlas */

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

@@ -1,72 +1,74 @@
 import { jsx as a } from "react/jsx-runtime";
-import { EFWField as v } from "../EFWField/EFWField.js";
-import { EFWTagPicker as L } from "../EFWTagPicker/EFWTagPicker.js";
-const j = (n) => {
+import { EFWField as L } from "../EFWField/EFWField.js";
+import { EFWTagPicker as O } from "../EFWTagPicker/EFWTagPicker.js";
+const q = (n) => {
   const {
     title: i,
     // description,
     infoLabel: o,
     hint: t,
     style: l = {},
-    required: r = !1,
-    placeholder: d = "Selecciona una opción",
+    required: d = !1,
+    placeholder: r = "Selecciona una opción",
     noMatchesMessage: s = "No se encontraron coincidencias",
     loadingMessage: c = "Buscando información...",
     validationState: g = "none",
     validationMessage: h = "",
     minQueryLength: p = 0,
-    options: m = [],
-    selectedOptions: f = [],
+    options: f = [],
+    selectedOptions: m,
+    defaultSelectedOptions: u,
     editable: e = !0,
-    disabled: u = !1,
-    hidden: b = !1,
-    noPopover: F = !1,
-    multiple: C = !1,
+    disabled: b = !1,
+    hidden: F = !1,
+    noPopover: C = !1,
+    multiple: S = !1,
     tagSize: E = "medium",
     tagShape: M = "rounded",
     tagAppearance: P = "brand",
-    onChange: S,
-    beforeRenderOptions: W,
-    onValidationChange: _
+    onChange: W,
+    beforeRenderOptions: _,
+    onValidationChange: k
   } = n;
   return /* @__PURE__ */ a(
-    v,
+    L,
     {
       hint: t,
       style: l,
       title: i,
       infoLabel: o,
       weightLabel: e ? "regular" : "semibold",
-      required: r,
+      required: d,
       validationState: g,
       validationMessage: h,
-      onValidationChange: _,
-      hidden: b,
+      onValidationChange: k,
+      hidden: F,
       children: /* @__PURE__ */ a(
-        L,
+        O,
         {
           editable: e,
           noMatchesMessage: s,
           loadingMessage: c,
-          placeholder: d,
-          selectedOptions: f,
+          placeholder: r,
+          selectedOptions: m,
+          defaultSelectedOptions: u,
           minQueryLength: p,
-          options: m,
-          onChange: (k = []) => {
-            S?.(k, "[EFWTagPickerField]: __handleChange__");
+          options: f,
+          onChange: (v = []) => {
+            W?.(v, "[EFWTagPickerField]: __handleChange__");
           },
-          beforeRenderOptions: W,
-          disabled: u,
-          noPopover: F,
+          beforeRenderOptions: _,
+          disabled: b,
+          noPopover: C,
           tagSize: E,
           tagShape: M,
           tagAppearance: P,
-          multiple: C
+          multiple: S
         }
       )
     }
   );
 };
 export {
-  j as EFWTagPickerField
+  q as EFWTagPickerField
 };

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

@@ -1,7 +1,7 @@
-import { jsx as x, Fragment as H } from "react/jsx-runtime";
-import { makeStyles as B, tokens as l, mergeClasses as D, Textarea as F, Text as I } from "@fluentui/react-components";
-import { useId as K, useRef as v, useState as P, useCallback as s, useEffect as j, useLayoutEffect as L } from "react";
-const $ = B({
+import { jsx as m, Fragment as j } from "react/jsx-runtime";
+import { makeStyles as L, tokens as l, mergeClasses as $, Textarea as U, Text as W } from "@fluentui/react-components";
+import { useId as _, useRef as z, useState as q, useCallback as s, useEffect as h, useLayoutEffect as G } from "react";
+const J = L({
   efwTextArea: {
     "& textarea": {
       maxHeight: "none",
@@ -29,75 +29,77 @@ const $ = B({
     // 	borderBottom: "2px solid var(--colorPaletteRedBorder2) !important"
     // }
   }
-}), G = (k) => {
+}), x = (i) => i ?? "", X = (i) => {
   const {
-    value: o = "",
-    onKeyDown: g,
-    onChange: r,
-    editable: b = !0,
-    disabled: T = !1,
-    autoComplete: w = "off",
-    className: S = "",
-    placeholder: N,
+    value: u,
+    defaultValue: p,
+    onKeyDown: C,
+    onChange: y,
+    editable: S = !0,
+    disabled: N = !1,
+    autoComplete: A = "off",
+    className: E = "",
+    placeholder: D,
     maxLength: c = 250,
-    size: V,
-    validationState: z = "none",
-    setParentComponentState: i,
-    autoResize: u = !0
+    size: H,
+    validationState: I = "none",
+    setParentComponentState: d,
+    autoResize: f = !0
     // Nuevo prop con valor por defecto true
-  } = k, h = $(), m = K(), d = v(o || ""), f = v(null), [t, p] = P(o || ""), C = s(() => {
-    if (!u || !f.current) return;
-    const e = f.current;
+  } = i, t = u !== void 0, R = x(t ? u : p), r = x(p), k = J(), v = _(), g = z(null), [B, V] = q(R), b = z(!1), o = t ? x(u) : B, T = s(() => {
+    if (!f || !g.current) return;
+    const e = g.current;
     e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
-  }, [u]), n = s((e) => {
-    e.length > c ? i?.("error", `Por favor introduzca menos de ${c} caracteres.`) : i?.("none", "");
-  }, [c, i]);
-  j(() => {
-    if (o !== d.current) {
-      const e = o || "";
-      n(e), p(e), d.current = e, r?.(e, e);
+  }, [f]), a = s((e) => {
+    e.length > c ? d?.("error", `Por favor introduzca menos de ${c} caracteres.`) : d?.("none", "");
+  }, [c, d]);
+  h(() => {
+    t && a(o);
+  }, [t, o, a]), h(() => {
+    t || b.current || (b.current = !0, a(o));
+  }, [t, o, a]), G(() => {
+    T();
+  }, [o, T]);
+  const F = s((e, w) => {
+    if (typeof w.value == "string") {
+      const n = w.value ?? "";
+      a(n), t || V(n), y?.(n, n);
     }
-  }, [o, n, r]), L(() => {
-    C();
-  }, [t, C]);
-  const A = s((e, y) => {
-    if (typeof y.value == "string") {
-      const a = y.value || "";
-      n(a), p(a), d.current = a, r?.(a, a);
-    }
-  }, [n, r]), E = s((e) => {
-    g?.(e, t);
-  }, [g, t]), R = D(
-    S,
-    h.efwTextArea,
-    z === "error" && h.efwTextAreaError
+  }, [a, t, y]), K = s((e) => {
+    C?.(e, o);
+  }, [C, o]), P = $(
+    E,
+    k.efwTextArea,
+    I === "error" && k.efwTextAreaError
   );
-  return /* @__PURE__ */ x(H, { children: b ? /* @__PURE__ */ x(
-    F,
+  return h(() => {
+    t || (V((e) => e === r ? e : r), a(r));
+  }, [t, r, a]), /* @__PURE__ */ m(j, { children: S ? /* @__PURE__ */ m(
+    U,
     {
-      ref: f,
-      className: R,
-      id: m,
-      name: m,
-      placeholder: N,
-      disabled: T,
-      value: t,
-      autoComplete: w,
+      ref: g,
+      className: P,
+      id: v,
+      name: v,
+      placeholder: D,
+      disabled: N,
+      value: o,
+      autoComplete: A,
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: "false",
-      onChange: A,
-      onKeyDown: E,
-      size: V,
+      onChange: F,
+      onKeyDown: K,
+      size: H,
       style: {
-        resize: u ? "none" : "vertical",
+        resize: f ? "none" : "vertical",
         overflow: "hidden",
         minHeight: "40px"
         // Altura mínima para mantener usabilidad
       }
     }
-  ) : /* @__PURE__ */ x(I, { style: t ? void 0 : { opacity: 0.7 }, children: t || "Sin datos disponibles" }) });
+  ) : /* @__PURE__ */ m(W, { style: o ? void 0 : { opacity: 0.7 }, children: o || "Sin datos disponibles" }) });
 };
 export {
-  G as EFWTextArea
+  X as EFWTextArea
 };

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

@@ -22,10 +22,14 @@ export interface EFWTextAreaProps extends Partial<EFWFieldChildrenProps> {
      */
     autoComplete?: 'on' | 'off';
     /**
-     * Valor inicial o controlado del textarea
-     * @default ""
+     * Valor controlado del textarea. Si se proporciona, el componente opera en modo controlled.
      */
     value?: EFWTextAreaValue;
+    /**
+     * Valor inicial usado cuando el componente funciona en modo uncontrolled.
+     * Solo se aplica durante el montaje.
+     */
+    defaultValue?: EFWTextAreaValue;
     /**
      * Tamaño visual del textarea
      */