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

package/dist/index.js

@@ -2,23 +2,23 @@ import { formatFileSize as o, getErrorMessage as t, getFileIconUrl as F } from "
 import { EFWMessageBarManager as p } from "./react-components/forms/EFWMessageBarManager/EFWMessageBarManager.js";
 import { EFWButton as f } from "./react-components/buttons/EFWButton/EFWButton.js";
 import { useEFWButton as W } from "./react-components/buttons/EFWButton/EFWButton.hooks.js";
-import { EFWDrawerButton as i } from "./react-components/buttons/EFWDrawerButton/EFWDrawerButton.js";
+import { EFWDrawerButton as l } from "./react-components/buttons/EFWDrawerButton/EFWDrawerButton.js";
 import { EFWGroupButton as u } from "./react-components/buttons/EFWGroupButton/EFWGroupButton.js";
 import { EFWAttachment as s } from "./react-components/fields/EFWAttachments/EFWAttachments.js";
 import { EFWAttachmentsField as d } from "./react-components/fields/EFWAttachmentsField/EFWAttachmentsField.js";
 import { EFWDatePicker as T } from "./react-components/fields/EFWDatePicker/EFWDatePicker.js";
-import { EFWDatePickerField as D } from "./react-components/fields/EFWDatePickerField/EFWDatePickerField.js";
-import { EFWField as b } from "./react-components/fields/EFWField/EFWField.js";
+import { EFWDatePickerField as B } from "./react-components/fields/EFWDatePickerField/EFWDatePickerField.js";
+import { EFWField as I } from "./react-components/fields/EFWField/EFWField.js";
 import { EFWInput as k } from "./react-components/fields/EFWInput/EFWInput.js";
 import { EFWInputField as A } from "./react-components/fields/EFWInputField/EFWInputField.js";
 import { EFWNumberInput as P } from "./react-components/fields/EFWNumberInput/EFWNumberInput.js";
-import { EFWNumberInputField as C } from "./react-components/fields/EFWNumberInputField/EFWNumberInputField.js";
-import { EFWSwitch as N } from "./react-components/fields/EFWSwitch/EFWSwitch.js";
-import { EFWSwitchField as z } from "./react-components/fields/EFWSwitchField/EFWSwitchField.js";
-import { EFWTagPicker as j } from "./react-components/fields/EFWTagPicker/EFWTagPicker.js";
-import { EFWTagPickerField as v } from "./react-components/fields/EFWTagPickerField/EFWTagPickerField.js";
-import { EFWTextArea as J } from "./react-components/fields/EFWTextArea/EFWTextArea.js";
-import { EFWTextAreaField as L } from "./react-components/fields/EFWTextAreaField/EFWTextAreaField.js";
+import { EFWNumberInputField as S } from "./react-components/fields/EFWNumberInputField/EFWNumberInputField.js";
+import { EFWSwitch as G } from "./react-components/fields/EFWSwitch/EFWSwitch.js";
+import { EFWSwitchField as v } from "./react-components/fields/EFWSwitchField/EFWSwitchField.js";
+import { EFWTagPicker as O } from "./react-components/fields/EFWTagPicker/EFWTagPicker.js";
+import { EFWTagPickerField as j } from "./react-components/fields/EFWTagPickerField/EFWTagPickerField.js";
+import { EFWTextArea as H } from "./react-components/fields/EFWTextArea/EFWTextArea.js";
+import { EFWTextAreaField as K } from "./react-components/fields/EFWTextAreaField/EFWTextAreaField.js";
 import { getEFWFormFieldDisplayText as Q } from "./react-components/forms/EFWForm/EFWForm.converter.js";
 import { useFormController as V } from "./react-components/forms/EFWForm/EFWForm.hooks.js";
 import { EFWForm as Y } from "./react-components/forms/EFWForm/EFWForm.js";
@@ -26,14 +26,15 @@ import { EFWFormMessageBarGroup as _ } from "./react-components/forms/EFWFormMes
 import { useDrawer as rr } from "./react-components/hooks/useDrawer/useDrawer.js";
 import { EFWTable as or } from "./react-components/tables/EFWTable/EFWTable.js";
 import { useTableController as Fr } from "./react-components/tables/EFWTable/hooks/useTableController/useTableController.js";
+import { EFWTableEmpty as pr, EFWTableOverlay as xr } from "./react-components/tables/EFWTable/components/EFWTableOverlay/EFWTableOverlay.js";
 export {
   s as EFWAttachment,
   d as EFWAttachmentsField,
   f as EFWButton,
   T as EFWDatePicker,
-  D as EFWDatePickerField,
-  i as EFWDrawerButton,
-  b as EFWField,
+  B as EFWDatePickerField,
+  l as EFWDrawerButton,
+  I as EFWField,
   Y as EFWForm,
   _ as EFWFormMessageBarGroup,
   u as EFWGroupButton,
@@ -41,14 +42,16 @@ export {
   A as EFWInputField,
   p as EFWMessageBarManager,
   P as EFWNumberInput,
-  C as EFWNumberInputField,
-  N as EFWSwitch,
-  z as EFWSwitchField,
+  S as EFWNumberInputField,
+  G as EFWSwitch,
+  v as EFWSwitchField,
   or as EFWTable,
-  j as EFWTagPicker,
-  v as EFWTagPickerField,
-  J as EFWTextArea,
-  L as EFWTextAreaField,
+  pr as EFWTableEmpty,
+  xr as EFWTableOverlay,
+  O as EFWTagPicker,
+  j as EFWTagPickerField,
+  H as EFWTextArea,
+  K as EFWTextAreaField,
   o as formatFileSize,
   Q as getEFWFormFieldDisplayText,
   t as getErrorMessage,

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

@@ -1,9 +1,9 @@
-import { jsx as h, Fragment as H } from "react/jsx-runtime";
+import { jsx as g, Fragment as H } from "react/jsx-runtime";
 import { makeStyles as J, tokens as l, mergeClasses as K, Text as O } from "@fluentui/react-components";
-import { useId as Q, useMemo as y, useState as X, useRef as M, useCallback as D, useEffect as Z } from "react";
+import { useId as Q, useMemo as M, useState as X, useRef as F, useCallback as h, useEffect as Z } from "react";
 import { DatePicker as ee } from "@fluentui/react-datepicker-compat";
-import { mapToValidDates as p, esLocalizedStrings as F } from "./EFWDatePicker.utils.js";
-const C = [], te = J({
+import { mapToValidDates as D, esLocalizedStrings as x } from "./EFWDatePicker.utils.js";
+const p = [], te = J({
   efwDatePickerControl: {
     "& [disabled]": {
       backgroundColor: l.colorNeutralBackground3,
@@ -25,42 +25,42 @@ const C = [], te = J({
       borderBottomWidth: "2px"
     }
   }
-}), se = (x) => {
+}), se = (C) => {
   const {
     editable: T = !0,
     disabled: Y = !1,
     placeholder: B = "DD/MM/YYYY",
     className: V = "",
-    selectedDates: u = C,
-    defaultSelectedDates: d = C,
+    selectedDates: S = p,
+    defaultSelectedDates: u = p,
     allowTextInput: $ = !0,
-    localizedStrings: w = F,
+    localizedStrings: w = x,
     minDate: E,
     maxDate: I,
     showGoToToday: N = !0,
     showCloseButton: R = !0,
-    restrictedDates: v = C,
-    friendlyDateFormat: S = !1,
+    restrictedDates: v = p,
+    friendlyDateFormat: k = !1,
     onSelectDate: s,
-    onChange: m,
+    onChange: d,
     validationState: z = "none",
-    setParentComponentState: f
-  } = x, k = Q(), P = te(), n = u !== void 0, A = y(() => p(u ?? []), [u]), b = y(() => p(d), [d]), [L, g] = X(() => p(d)), e = n ? A : L, W = M(null), j = M(null), G = D((o) => {
+    setParentComponentState: m
+  } = C, P = Q(), b = te(), n = C.selectedDates !== void 0, A = M(() => D(S ?? []), [S]), y = M(() => D(u), [u]), [L, f] = X(() => D(u)), e = n ? A : L, W = F(null), j = F(null), G = h((o) => {
     if (!o) return "";
     const a = o.getDate(), t = o.getMonth(), c = o.getFullYear();
-    if (S)
-      return `${F.months[t]} ${a}, ${c}`;
+    if (k)
+      return `${x.months[t]} ${a}, ${c}`;
     {
       const i = a < 10 ? `0${a}` : a, r = t + 1 < 10 ? `0${t + 1}` : t + 1;
       return `${i}/${r}/${c}`;
     }
-  }, [S]), U = D((o) => {
+  }, [k]), U = h((o) => {
     const a = e.length && e[0] instanceof Date ? e[0] : /* @__PURE__ */ new Date(), t = (o || "").trim().split("/"), c = t.length > 0 ? Math.max(1, Math.min(31, parseInt(t[0], 10))) : a.getDate(), i = t.length > 1 ? Math.max(1, Math.min(12, parseInt(t[1], 10))) - 1 : a.getMonth();
     let r = t.length > 2 ? parseInt(t[2], 10) : a.getFullYear();
     return r < 100 && (r += a.getFullYear() - a.getFullYear() % 100), new Date(r, i, c);
-  }, [e]), _ = D((o) => {
+  }, [e]), _ = h((o) => {
     if (!(o instanceof Date)) {
-      !n && e.length > 0 && g([]), s?.(null), m?.([]), f?.("none", "");
+      !n && e.length > 0 && f([]), s?.(null), d?.([]), m?.("none", "");
       return;
     }
     if (e.length > 0 && e[0] instanceof Date ? e[0].getTime() === o.getTime() : !1) {
@@ -68,17 +68,17 @@ const C = [], te = J({
       return;
     }
     const t = [o];
-    n || g(t), s?.(o), m?.(t), f?.("none", "");
-  }, [e, n, s, m, f]);
+    n || f(t), s?.(o), d?.(t), m?.("none", "");
+  }, [e, n, s, d, m]);
   Z(() => {
-    n || g(b);
-  }, [n, b]);
+    n || f(y);
+  }, [n, y]);
   const q = K(
     V,
-    P.efwDatePickerControl,
-    z === "error" && P.efwDatePickerControlError
+    b.efwDatePickerControl,
+    z === "error" && b.efwDatePickerControlError
   );
-  return /* @__PURE__ */ h(H, { children: T ? /* @__PURE__ */ h(
+  return /* @__PURE__ */ g(H, { children: T ? /* @__PURE__ */ g(
     ee,
     {
       calendar: {
@@ -88,8 +88,8 @@ const C = [], te = J({
       strings: w,
       className: q,
       ref: W,
-      id: k,
-      name: k,
+      id: P,
+      name: P,
       autoComplete: "off",
       autoCorrect: "off",
       autoCapitalize: "off",
@@ -107,7 +107,7 @@ const C = [], te = J({
       showGoToToday: N,
       showCloseButton: R
     }
-  ) : /* @__PURE__ */ h(O, { style: e.length ? void 0 : { opacity: 0.7 }, children: e.length > 0 && e[0] instanceof Date ? e[0].toLocaleDateString() : "Sin datos disponibles" }) });
+  ) : /* @__PURE__ */ g(O, { style: e.length ? void 0 : { opacity: 0.7 }, children: e.length > 0 && e[0] instanceof Date ? e[0].toLocaleDateString() : "Sin datos disponibles" }) });
 };
 export {
   se as EFWDatePicker

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

@@ -1,8 +1,8 @@
-import { jsx as t, Fragment as pe, jsxs as F } from "react/jsx-runtime";
-import { useRef as y, useState as C, useMemo as V, useEffect as T, useCallback as u } from "react";
-import { makeStyles as ue, tokens as r, useTagPickerFilter as fe, TagPickerOption as E, Avatar as ge, Spinner as me, mergeClasses as be, TagPicker as he, TagPickerControl as Ce, TagPickerGroup as Se, Tag as ke, TagPickerInput as Oe, Button as ye, TagPickerList as Te, Text as xe } from "@fluentui/react-components";
+import { jsx as t, Fragment as pe, jsxs as V } from "react/jsx-runtime";
+import { useRef as y, useState as C, useMemo as q, useEffect as T, useCallback as u } from "react";
+import { makeStyles as ue, tokens as r, useTagPickerFilter as fe, TagPickerOption as R, Avatar as ge, Spinner as me, mergeClasses as be, TagPicker as he, TagPickerControl as Ce, TagPickerGroup as Se, Tag as Oe, 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({
+const E = [], Ne = ue({
   efwTagPickerControlError: {
     backgroundColor: r.colorPaletteRedBackground1,
     "::after": {
@@ -40,78 +40,78 @@ const w = [], Ne = ue({
       }
     }
   }
-}), De = (q) => {
+}), De = (w) => {
   const {
     placeholder: Q = "Selecciona una opción",
     noMatchesMessage: W = "No se encontraron coincidencias",
     loadingMessage: G = "Buscando información...",
     className: J = "",
     minQueryLength: f = 0,
-    options: a = w,
+    options: a = E,
     hidden: Y = !1,
     disabled: D = !1,
     editable: H = !0,
-    selectedOptions: x = w,
-    defaultSelectedOptions: P = w,
+    selectedOptions: L = E,
+    defaultSelectedOptions: x = E,
     noPopover: U = !1,
     tagSize: X = "medium",
     tagShape: Z = "rounded",
     tagAppearance: $ = "brand",
     onChange: S,
     beforeRenderOptions: g,
-    multiple: L = !0,
-    validationState: M = "none",
+    multiple: M = !0,
+    validationState: z = "none",
     validationMessage: K,
-    setParentComponentState: v
-  } = q, ee = y(M), oe = y(K), [l, z] = C(""), i = x !== void 0, A = (i ? x : P) ?? [], [te, N] = C(A), s = i ? x ?? [] : te, d = V(() => s.map((e) => e.key), [s]), [c, m] = C([]), [re, B] = C(!1), [b, k] = C(!1), p = y(), O = y(
-    Object.fromEntries(A.map((e) => [e.key, e]))
-  ), I = V(
-    () => P ?? [],
-    [P]
+    setParentComponentState: P
+  } = w, ee = y(z), oe = y(K), [l, A] = C(""), i = w.selectedOptions !== void 0, I = (i ? L : x) ?? [], [te, v] = C(I), s = i ? L ?? [] : te, d = q(() => s.map((e) => e.key), [s]), [c, m] = C([]), [re, N] = C(!1), [b, O] = C(!1), p = y(), k = y(
+    Object.fromEntries(I.map((e) => [e.key, e]))
+  ), _ = q(
+    () => x ?? [],
+    [x]
   );
   T(() => {
     s.forEach((e) => {
-      O.current[e.key] = e;
+      k.current[e.key] = e;
     });
   }, [s]);
-  const _ = Ne(), ne = u((e) => (s.find((n) => n.key === e) || O.current[e])?.text || e, [s]);
+  const j = Ne(), ne = u((e) => (s.find((n) => n.key === e) || k.current[e])?.text || e, [s]);
   T(() => {
-    typeof a == "function" && l.length < f && b && k(!1);
+    typeof a == "function" && l.length < f && b && O(!1);
   }, [l, f, a, b]), T(() => b ? (p.current?.abort(), p.current = new AbortController(), (async () => {
     if (typeof a != "function") {
       const o = g ? g(a) : a;
       m(o);
       return;
     }
-    v?.(ee.current, oe.current);
+    P?.(ee.current, oe.current);
     try {
-      B(!0), m([]);
+      N(!0), m([]);
       const o = await a(l, { signal: p.current.signal }), n = g ? g(o) : o;
       m(n);
     } catch (o) {
-      p.current?.signal.aborted || (console.error("Error loading options:", o), m([]), v?.("error", JSON.stringify(o)));
+      p.current?.signal.aborted || (console.error("Error loading options:", o), m([]), P?.("error", JSON.stringify(o)));
     } finally {
-      p.current?.signal.aborted || B(!1);
+      p.current?.signal.aborted || N(!1);
     }
-  })(), () => p.current?.abort()) : void 0, [b, a, l, g, v, f]);
+  })(), () => p.current?.abort()) : void 0, [b, a, l, g, P, f]);
   const ae = u(() => {
-    i || N([]), S?.([]);
+    i || v([]), S?.([]);
   }, [i, S]), le = u((e, o) => {
     if (o.open && typeof a == "function" && l.length < f) {
-      k(!1);
+      O(!1);
       return;
     }
-    o.open && typeof a == "function" && (B(!0), m([])), k(o.open);
+    o.open && typeof a == "function" && (N(!0), m([])), O(o.open);
   }, [a, l, f]), se = u((e, o) => {
     if (o.value === "no-matches") return;
     let n;
-    L ? n = o.selectedOptions : (n = o.selectedOptions.slice(-1), k(!1)), z("");
-    const j = n.map((h) => {
-      const R = c.find((de) => de.key === h) || O.current[h];
-      return R && (O.current[h] = R), R || { key: h, text: h };
+    M ? n = o.selectedOptions : (n = o.selectedOptions.slice(-1), O(!1)), A("");
+    const F = n.map((h) => {
+      const B = c.find((de) => de.key === h) || k.current[h];
+      return B && (k.current[h] = B), B || { key: h, text: h };
     });
-    i || N(j), S?.(j);
-  }, [c, S, L, i]), ie = fe({
+    i || v(F), S?.(F);
+  }, [c, S, M, i]), ie = fe({
     // La consulta actual ingresada por el usuario para filtrar opciones.
     query: l,
     // Lista de claves (como strings) de las opciones disponibles, obtenidas de 'availableOptions'.
@@ -135,7 +135,7 @@ const w = [], Ne = ue({
     ) : (
       // Si no está cargando y no hay opciones, muestra un mensaje de "sin coincidencias".
       /* @__PURE__ */ t(
-        E,
+        R,
         {
           value: "no-matches",
           media: /* @__PURE__ */ t(Pe, {}),
@@ -151,7 +151,7 @@ const w = [], Ne = ue({
     renderOption: u((e) => {
       const o = c.find((n) => n.key === e);
       return o ? /* @__PURE__ */ t(
-        E,
+        R,
         {
           secondaryContent: o.secondaryContent || "",
           media: /* @__PURE__ */ t(ge, { shape: "square", "aria-hidden": !0, name: o.text, color: "colorful" }),
@@ -161,7 +161,7 @@ const w = [], Ne = ue({
         o.key
       ) : (
         // Si no se encuentra la opción, renderiza una versión básica con solo la clave.
-        /* @__PURE__ */ t(E, { value: e, children: e }, e)
+        /* @__PURE__ */ t(R, { value: e, children: e }, e)
       );
     }, [c]),
     // Dependencia: se recrea si 'availableOptions' cambia.
@@ -178,12 +178,12 @@ const w = [], Ne = ue({
   if (Y) return null;
   const ce = be(
     J,
-    _.efwTagPickerControl,
-    M === "error" && _.efwTagPickerControlError
+    j.efwTagPickerControl,
+    z === "error" && j.efwTagPickerControlError
   );
   return T(() => {
-    i || N(I);
-  }, [i, I]), /* @__PURE__ */ t(pe, { children: H ? /* @__PURE__ */ F(
+    i || v(_);
+  }, [i, _]), /* @__PURE__ */ t(pe, { children: H ? /* @__PURE__ */ V(
     he,
     {
       open: b,
@@ -194,7 +194,7 @@ const w = [], Ne = ue({
       selectedOptions: d,
       noPopover: U,
       children: [
-        /* @__PURE__ */ F(
+        /* @__PURE__ */ V(
           Ce,
           {
             className: ce,
@@ -211,7 +211,7 @@ const w = [], Ne = ue({
             ) : void 0,
             children: [
               /* @__PURE__ */ t(Se, { "aria-label": "Selected items", children: d.map((e) => /* @__PURE__ */ t(
-                ke,
+                Oe,
                 {
                   style: { paddingTop: "0px", paddingBottom: "0px" },
                   shape: Z,
@@ -222,13 +222,13 @@ const w = [], Ne = ue({
                 e
               )) }),
               /* @__PURE__ */ t(
-                Oe,
+                ke,
                 {
                   placeholder: d.length ? "" : Q,
                   autoComplete: "off",
                   "aria-label": "Select items",
                   value: l,
-                  onChange: (e) => z(e.target.value)
+                  onChange: (e) => A(e.target.value)
                 }
               )
             ]

package/dist/react-components/tables/EFWTable/EFWTable.d.ts

@@ -5,4 +5,4 @@ export declare const COLS_MIN_WIDTH = 80;
 export declare const COLS_MAX_WIDTH = 2500;
 export declare const SELECTOR_CELL_WIDTH = 48;
 export declare const SELECTOR_CELL_HEIGHT = 48;
-export declare const EFWTable: ({ appearance, style, className, fields, items: itemsProp, defaultItems, height, itemSize, enableSelection, enableCommandBar, defaultSelectedItems, onSelectionChange, onRowClick, resizableColumns, columnSizing: columnSizingOptions, useVirtualization, autoSizeColumns, tableRef: externalTableRef, onItemsChange, onScroll, addButtonConfig, updateButtonConfig, deleteButtonConfig, alwaysButtons, noSelectionButtons, singleSelectionButtons, multiSelectionButtons, beforeAddItems, beforeUpdateItems, beforeDeleteItems, columnRenderers, useDefaultRendererAsFallback, }: EFWTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EFWTable: ({ appearance, style, className, fields, items: itemsProp, defaultItems, height, itemSize, enableSelection, enableCommandBar, defaultSelectedItems, onSelectionChange, onRowClick, resizableColumns, columnSizing: columnSizingOptions, useVirtualization, autoSizeColumns, tableRef: externalTableRef, onItemsChange, onScroll, addButtonConfig, updateButtonConfig, deleteButtonConfig, alwaysButtons, noSelectionButtons, singleSelectionButtons, multiSelectionButtons, beforeAddItems, beforeUpdateItems, beforeDeleteItems, columnRenderers, useDefaultRendererAsFallback, overlayState: overlayStateProp, defaultOverlayState, onOverlayStateChange, overlayCustomization, }: EFWTableProps) => import("react/jsx-runtime").JSX.Element;