@envisiongroup/porygon 1.0.0 → 1.0.1

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

@@ -1,11 +1,11 @@
-import { jsx as a, jsxs as _, Fragment as Ie } from "react/jsx-runtime";
+import { jsx as a, jsxs as F, Fragment as Ee } 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 { makeStyles as De, tokens as n, useTagPickerFilter as ze, TagPickerOption as R, Spinner as Ve, mergeClasses as _e, Text as Fe, TagPicker as Qe, TagPickerControl as We, TagPickerGroup as je, Tag as Ge, TagPickerInput as qe, 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({
+const Q = [], Ze = 12, ue = (P) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden": !0, name: P.text, color: "colorful" }), et = De({
   efwTagPickerControlError: {
     backgroundColor: n.colorPaletteRedBackground1,
     "::after": {
@@ -62,31 +62,31 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
     fontSize: "12px",
     lineHeight: "16px"
   }
-}), st = (x) => {
+}), ct = (P) => {
   const {
     labels: f,
     className: ge = "",
     minQueryLength: m = 0,
     options: r = Q,
     hidden: fe = !1,
-    disabled: j = !1,
+    disabled: W = !1,
     editable: me = !0,
-    selectedOptions: q = Q,
-    defaultSelectedOptions: R = Q,
+    selectedOptions: j = Q,
+    defaultSelectedOptions: B = Q,
     noPopover: be = !1,
     tagSize: he = "medium",
     tagShape: Se = "rounded",
-    tagAppearance: ye = "brand",
-    onChange: P,
-    beforeRenderOptions: O,
-    renderOptionMedia: E,
+    tagAppearance: Oe = "brand",
+    onChange: x,
+    beforeRenderOptions: y,
+    renderOptionMedia: I,
     showOptionMediaInSelectedTags: G = !1,
-    readOnlyRenderer: Oe,
-    multiple: W = !0,
+    readOnlyRenderer: ye,
+    multiple: q = !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(
+    setParentComponentState: E
+  } = P, Te = v(X), ke = v(Ce), [s, H] = w(""), c = P.selectedOptions !== void 0, J = (c ? j : B) ?? [], [Me, D] = w(J), i = c ? j ?? [] : Me, N = p(
     () => new Map(i.map((e) => [e.key, e])),
     [i]
   ), b = p(
@@ -101,15 +101,15 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
   ), 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);
+  ), Pe = Y.loading, [z, 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
+    I ?? ue
   ), U = p(
-    () => R ?? [],
-    [R]
+    () => B ?? [],
+    [B]
   ), 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,
@@ -136,9 +136,9 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
       g.current[e.key] = e;
     });
   }, [i]), A(() => {
-    V.current = E ?? ue;
-  }, [E]);
-  const y = Ze(), Pe = u(
+    V.current = I ?? ue;
+  }, [I]);
+  const O = et(), xe = u(
     (e) => (N.get(e) || l.get(e) || g.current[e])?.text || e,
     [N, l]
   ), Ne = u(
@@ -158,13 +158,13 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
       l
     ]
   );
-  A(() => D ? (k.current?.abort(), k.current = new AbortController(), (async () => {
+  A(() => z ? (k.current?.abort(), k.current = new AbortController(), (async () => {
     if (typeof r != "function") {
-      const t = O ? O(r) : r;
+      const t = y ? y(r) : r;
       C((o) => ({ ...o, available: t }));
       return;
     }
-    I?.(
+    E?.(
       Te.current,
       ke.current
     );
@@ -172,22 +172,22 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
       C({ available: [], loading: !0 });
       const t = await r(s, {
         signal: k.current.signal
-      }), o = O ? O(t) : t;
+      }), o = y ? y(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?.signal.aborted || (console.error("Error loading options:", t), C({ available: [], loading: !1 }), E?.("error", JSON.stringify(t)));
     }
   })(), () => k.current?.abort()) : void 0, [
-    D,
+    z,
     r,
     s,
-    O,
-    I,
+    y,
+    E,
     m
   ]);
   const Le = u(() => {
-    c || z([]), P?.([], "");
-  }, [c, P]), we = u(
+    c || D([]), x?.([], "");
+  }, [c, x]), we = u(
     (e, t) => {
       if (t.open && typeof r == "function" && s.length < m) {
         T(!1);
@@ -202,28 +202,28 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
       H(t), typeof r == "function" && t.length < m && T(!1);
     },
     [r, m]
-  ), Be = u(
+  ), Re = 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);
+      q ? 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 };
+        const _ = l.get(d) || g.current[d];
+        return _ && (g.current[d] = _), _ || { key: d, text: d };
       });
-      c || z(M), P?.(
+      c || D(M), x?.(
         M,
         pe(Ke(M))
       );
     },
-    [l, P, W, c]
-  ), Re = De({
+    [l, x, q, c]
+  ), Be = ze({
     // 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 ? (
+    noOptionsElement: Pe ? (
       // Si está cargando ('isLoading' es true), muestra un spinner pequeño.
       /* @__PURE__ */ a(
         Ve,
@@ -241,7 +241,7 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
     ) : (
       // Si no está cargando y no hay opciones, muestra un mensaje de "sin coincidencias".
       /* @__PURE__ */ a(
-        B,
+        R,
         {
           value: "no-matches",
           media: /* @__PURE__ */ a(Ye, {}),
@@ -260,19 +260,19 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
         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,
+            R,
             {
               media: d,
               text: t.text,
               value: t.key,
-              children: /* @__PURE__ */ _("div", { className: y.efwTagPickerOptionContentNoMedia, children: [
+              children: /* @__PURE__ */ F("div", { className: O.efwTagPickerOptionContentNoMedia, children: [
                 /* @__PURE__ */ a("span", { children: t.text }),
-                /* @__PURE__ */ a("span", { className: y.efwTagPickerOptionSecondaryNoMedia, children: t.secondaryContent })
+                /* @__PURE__ */ a("span", { className: O.efwTagPickerOptionSecondaryNoMedia, children: t.secondaryContent })
               ] })
             },
             t.key
           ) : /* @__PURE__ */ a(
-            B,
+            R,
             {
               secondaryContent: t.secondaryContent || "",
               media: d,
@@ -285,13 +285,13 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
         }
         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)
+          /* @__PURE__ */ a(R, { value: e, children: e }, e)
         );
       },
       [
         l,
-        y.efwTagPickerOptionContentNoMedia,
-        y.efwTagPickerOptionSecondaryNoMedia
+        O.efwTagPickerOptionContentNoMedia,
+        O.efwTagPickerOptionSecondaryNoMedia
       ]
     ),
     // Dependencia: se recrea solo si cambia el set de opciones disponibles.
@@ -307,37 +307,41 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
       },
       [l, K, $]
     )
-  }), Ee = Fe(
+  }), Ie = _e(
     ge,
-    y.efwTagPickerControl,
-    X === "error" && y.efwTagPickerControlError
+    O.efwTagPickerControl,
+    X === "error" && O.efwTagPickerControlError
   );
   if (A(() => {
-    c || z(U);
+    c || D(U);
   }, [c, U]), fe) return null;
   if (!me) {
-    const e = pe(i) || S.emptyState, t = Oe?.(
+    const e = pe(i) || S.emptyState, t = ye?.(
       i,
       e
     );
-    return t != null ? /* @__PURE__ */ a(Ie, { children: t }) : /* @__PURE__ */ a(_e, { style: i.length ? void 0 : { opacity: 0.7 }, children: e });
+    return t != null ? /* @__PURE__ */ a(Ee, { children: t }) : /* @__PURE__ */ a(Fe, { style: i.length ? void 0 : { opacity: 0.7 }, children: e });
   }
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ F(
     Qe,
     {
-      open: D,
+      open: z,
       size: he,
-      disabled: j,
-      onOptionSelect: Be,
+      disabled: W,
+      onOptionSelect: Re,
       onOpenChange: we,
       selectedOptions: b,
       noPopover: be,
+      positioning: {
+        autoSize: "height",
+        overflowBoundaryPadding: Ze
+      },
       children: [
-        /* @__PURE__ */ _(
-          je,
+        /* @__PURE__ */ F(
+          We,
           {
-            className: Ee,
-            secondaryAction: !j && b.length ? /* @__PURE__ */ a(
+            className: Ie,
+            secondaryAction: !W && b.length ? /* @__PURE__ */ a(
               Xe,
               {
                 appearance: "transparent",
@@ -349,20 +353,20 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
               }
             ) : void 0,
             children: [
-              /* @__PURE__ */ a(qe, { "aria-label": S.selectedItemsAriaLabel, children: b.map((e) => /* @__PURE__ */ a(
+              /* @__PURE__ */ a(je, { "aria-label": S.selectedItemsAriaLabel, children: b.map((e) => /* @__PURE__ */ a(
                 Ge,
                 {
                   style: { paddingTop: "0px", paddingBottom: "0px" },
                   shape: Se,
-                  appearance: ye,
+                  appearance: Oe,
                   media: Ne(e),
                   value: e,
-                  children: Pe(e)
+                  children: xe(e)
                 },
                 e
               )) }),
               /* @__PURE__ */ a(
-                We,
+                qe,
                 {
                   placeholder: b.length ? "" : S.placeholder,
                   autoComplete: "off",
@@ -374,11 +378,11 @@ const Q = [], ue = (x) => /* @__PURE__ */ a(Je, { shape: "square", "aria-hidden"
             ]
           }
         ),
-        /* @__PURE__ */ a(He, { children: Re })
+        /* @__PURE__ */ a(He, { children: Be })
       ]
     }
   );
 };
 export {
-  st as EFWTagPicker
+  ct as EFWTagPicker
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envisiongroup/porygon",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Librerias de componentes de React creados por la empresa Envision",
   "license": "CC-BY-ND-4.0",
   "main": "./dist/index.js",