@envisiongroup/porygon 1.0.0-rc.8 → 1.0.0

package/dist/react-components/tables/EFWTable/hooks/useDefaultFilterButton/useDefaultFilterButton.js

@@ -0,0 +1,255 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useRef as g, useCallback as L } from "react";
+import { mergeClasses as Z } from "@fluentui/react-components";
+import { FilterDismiss20Regular as $, FilterAdd20Filled as ee, Filter20Regular as D } from "@fluentui/react-icons";
+import { mergeButtonProps as te, generateFormProps as re } from "../../components/EFWTableCommandBar/EFWTableCommandBar.utils.js";
+import { isEmptyFilterValue as x, EMPTY_CHOICE_FILTER_KEY as E } from "../../utils/filterFunctions.js";
+import { useFormController as le } from "../../../../forms/EFWForm/EFWForm.hooks.js";
+import { EFWForm as ne } from "../../../../forms/EFWForm/EFWForm.js";
+const oe = (r) => {
+  switch (r) {
+    case "Text":
+    case "Note":
+      return "";
+    case "Number":
+      return null;
+    case "Choice":
+    case "MultiChoice":
+    case "Date":
+    case "Attachments":
+      return [];
+    case "Boolean":
+      return null;
+    default:
+      return;
+  }
+}, se = (r, n) => {
+  const e = {
+    ...r,
+    editable: !0,
+    disabled: !1,
+    required: !1,
+    hint: void 0,
+    infoLabel: void 0
+  };
+  switch (r.typeAsString) {
+    case "Text":
+      return {
+        ...e,
+        minLength: void 0,
+        maxLength: void 0,
+        formatType: void 0,
+        labels: {
+          ...r.labels ?? {},
+          placeholder: n.filterTextPlaceholder
+        }
+      };
+    case "Number":
+      return {
+        ...e,
+        minValue: void 0,
+        maxValue: void 0,
+        labels: {
+          ...r.labels ?? {},
+          placeholder: n.filterNumberPlaceholder
+        }
+      };
+    case "Note":
+      return {
+        ...e,
+        labels: {
+          ...r.labels ?? {},
+          placeholder: n.filterNotePlaceholder
+        }
+      };
+    case "Date":
+      return {
+        ...e,
+        labels: {
+          ...r.labels ?? {},
+          placeholder: n.filterDatePlaceholder
+        }
+      };
+    case "Choice":
+      return {
+        ...e,
+        labels: {
+          ...r.labels ?? {},
+          placeholder: n.filterChoicePlaceholder
+        }
+      };
+    case "MultiChoice":
+      return {
+        ...e,
+        labels: {
+          ...r.labels ?? {},
+          placeholder: n.filterMultiChoicePlaceholder
+        }
+      };
+    default:
+      return e;
+  }
+}, ae = (r = [], n) => {
+  const e = r.filter((i) => i.key !== E);
+  return [{ key: E, text: n }, ...e];
+}, he = (r, n) => {
+  const e = n, i = le(), F = g(null), B = g(/* @__PURE__ */ new Set()), R = g([]), y = g(), m = g(!1), N = te(
+    {
+      enabled: !0,
+      props: {
+        children: e.filterButtonLabel,
+        icon: /* @__PURE__ */ h(D, {}),
+        collapseLabel: "xs",
+        drawerConfig: {
+          title: e.filterDrawerTitle,
+          size: "small",
+          position: "end"
+        }
+      }
+    },
+    r
+  ), { enabled: P, props: V, form: k } = N, { children: S, appearance: M, collapseLabel: O, drawerConfig: _, style: j, className: z } = V || {}, {
+    title: W,
+    size: I,
+    position: Y,
+    modalType: q,
+    labels: H,
+    contentRenderDelay: K,
+    deferContentRendering: G
+  } = _ || {}, J = Object.values(i.values).some((u) => !x(u)), C = L((u) => [
+    {
+      kind: "EFWButton",
+      props: {
+        icon: /* @__PURE__ */ h($, {}),
+        children: e.filterClearButtonLabel,
+        disabled: !u,
+        onClick: (c, f) => {
+          const o = F.current;
+          if (!o) return { success: !1 };
+          const l = R.current.reduce((s, b) => (s[b.internalName] = oe(b.typeAsString), s), {});
+          return o.clearColumnFilters(), i.setValues(l, {
+            overwriteAll: !0,
+            triggerFieldLogic: !1,
+            triggerOnChange: !1
+          }), i.onValuesChange(l), m.current && (m.current = !1, y.current?.({ buttons: C(!1) })), { success: !0 };
+        }
+      }
+    },
+    {
+      kind: "EFWButton",
+      props: {
+        children: e.filterCloseButtonLabel,
+        onClick: (c, f) => {
+          f();
+        }
+      }
+    }
+  ], [i, e]), Q = L((u) => {
+    i.onValuesChange(u);
+    const c = {};
+    Object.entries(u).forEach(([l, s]) => {
+      B.current.has(l) && Array.isArray(s) ? c[l] = s.length === 0 ? null : s[0].key === "true" : c[l] = s;
+    }), F.current?.setColumnFilters(c);
+    const o = Object.values(c).some((l) => !x(l));
+    m.current !== o && (m.current = o, y.current?.({ buttons: C(o) }));
+  }, [C, i]);
+  return {
+    enabled: P,
+    kind: "EFWDrawerButton",
+    props: {
+      icon: J ? /* @__PURE__ */ h(ee, {}) : /* @__PURE__ */ h(D, {}),
+      children: S,
+      appearance: M,
+      collapseLabel: O,
+      style: j,
+      className: z,
+      onClick: (u, c, f) => {
+        const { tableMethods: o } = f;
+        F.current = o;
+        const l = o.getFilterableFields(), s = o.getColumnFilters(), b = Object.values(s).some((t) => !x(t)), v = /* @__PURE__ */ new Set();
+        l.forEach((t) => {
+          t.typeAsString === "Boolean" && v.add(t.internalName);
+        }), B.current = v;
+        const T = l.map((t) => {
+          const a = se(t, e);
+          if (t.typeAsString === "Boolean") {
+            const d = t.labels?.checkedText ?? e.filterBooleanTrueLabel, p = t.labels?.uncheckedText ?? e.filterBooleanFalseLabel;
+            return {
+              ...a,
+              typeAsString: "Choice",
+              multiple: !1,
+              options: [
+                { key: "true", text: d },
+                { key: "false", text: p }
+              ],
+              labels: {
+                placeholder: e.filterBooleanPlaceholder
+              }
+            };
+          }
+          if (t.typeAsString === "Choice") {
+            const d = t.beforeRenderOptions;
+            return {
+              ...a,
+              multiple: !0,
+              beforeRenderOptions: (p) => {
+                const X = d ? d(p) : p;
+                return ae(X, e.filterEmptyChoiceOptionLabel);
+              }
+            };
+          }
+          return t.typeAsString === "MultiChoice" ? {
+            ...a,
+            multiple: !0
+          } : a;
+        });
+        R.current = T, y.current = c.updateDrawer, m.current = b;
+        const w = {};
+        l.forEach((t) => {
+          const a = s[t.internalName];
+          if (t.typeAsString === "Boolean" && a !== null && a !== void 0) {
+            const d = t.labels?.checkedText ?? e.filterBooleanTrueLabel, p = t.labels?.uncheckedText ?? e.filterBooleanFalseLabel;
+            w[t.internalName] = [
+              { key: String(a), text: a ? d : p }
+            ];
+          } else
+            w[t.internalName] = a;
+        });
+        const A = k ? re(
+          T,
+          k
+        ) : { fields: T }, U = {
+          ...A,
+          className: Z("efw-table-filter", A.className)
+        };
+        c({
+          size: I,
+          title: W,
+          position: Y,
+          modalType: q,
+          deferContentRendering: G ?? !0,
+          contentRenderDelay: K,
+          labels: {
+            closeButtonAriaLabel: e.drawerCloseButtonAriaLabel,
+            loadingContentText: e.drawerLoadingContentText,
+            ...H ?? {}
+          },
+          content: /* @__PURE__ */ h(
+            ne,
+            {
+              ...U,
+              description: e.filterDrawerDescription,
+              formRef: i.formRef,
+              onValuesChange: Q,
+              defaultValues: w
+            }
+          ),
+          buttons: C(b)
+        });
+      }
+    }
+  };
+};
+export {
+  he as useDefaultFilterButton
+};

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

@@ -1,4 +1,5 @@
 import { EFWFormFieldProps } from '../../../../forms/EFWForm';
 import { EFWTableCommandBarButton, DefaultDrawerButtonProps } from '../../components/EFWTableCommandBar/EFWTableCommandBar.types';
+import { EFWTableLocaleText } from '../../../../i18n';
 
-export declare const useDefaultUpdateButton: <T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]>(editButtonConfig?: DefaultDrawerButtonProps<T>) => EFWTableCommandBarButton<T>;
+export declare const useDefaultUpdateButton: <T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]>(editButtonConfig: DefaultDrawerButtonProps<T> | undefined, localeText: EFWTableLocaleText) => EFWTableCommandBarButton<T>;

package/dist/react-components/tables/EFWTable/hooks/useDefaultUpdateButton/useDefaultUpdateButton.js

@@ -1,78 +1,98 @@
-import { jsx as r, jsxs as V } from "react/jsx-runtime";
-import { Text as q } from "@fluentui/react-components";
-import { Edit20Regular as S } from "@fluentui/react-icons";
-import { getErrorMessage as m } from "../../../../commons/utils.js";
-import { mergeButtonProps as U, generateFormProps as G } from "../../components/EFWTableCommandBar/EFWTableCommandBar.utils.js";
-import { useFormController as H } from "../../../../forms/EFWForm/EFWForm.hooks.js";
-import { EFWForm as J } from "../../../../forms/EFWForm/EFWForm.js";
-const re = (f = {}) => {
-  const { formRef: g, getValues: E, validateForm: h, addMessageBar: i, setDisabled: t, removeAllMessagesBar: C } = H(), z = U({
+import { jsx as o } from "react/jsx-runtime";
+import { Text as J } from "@fluentui/react-components";
+import { Edit20Regular as K } from "@fluentui/react-icons";
+import { getErrorMessage as f } from "../../../../commons/utils.js";
+import { mergeButtonProps as O, generateFormProps as Q } from "../../components/EFWTableCommandBar/EFWTableCommandBar.utils.js";
+import { useFormController as X } from "../../../../forms/EFWForm/EFWForm.hooks.js";
+import { EFWForm as Y } from "../../../../forms/EFWForm/EFWForm.js";
+const le = (b = {}, w) => {
+  const e = w, { formRef: T, getValues: x, validateForm: C, addMessageBar: l, setDisabled: n, removeAllMessagesBar: h } = X(), y = O({
     enabled: !0,
     props: {
-      children: "Editar",
-      icon: /* @__PURE__ */ r(S, {}),
+      children: e.updateButtonLabel,
+      icon: /* @__PURE__ */ o(K, {}),
+      collapseLabel: "xs",
       drawerConfig: {
-        title: "Editar elemento",
+        title: e.updateDrawerTitle,
         size: "small",
         position: "end"
       }
     }
-  }, f), { enabled: F, props: b, form: w } = z, { children: l, appearance: x, icon: c, drawerConfig: v } = b || {}, { title: y, size: B, position: M, modalType: T } = v || {};
+  }, b), { enabled: B, props: E, form: D } = y, { children: d, appearance: F, icon: c, collapseLabel: L, drawerConfig: R, style: k, className: M } = E || {}, {
+    title: v,
+    size: z,
+    position: P,
+    modalType: A,
+    labels: S,
+    contentRenderDelay: W,
+    deferContentRendering: $
+  } = R || {};
   return {
-    enabled: F,
+    enabled: B,
     kind: "EFWDrawerButton",
     props: {
       icon: c,
-      children: l,
-      appearance: x,
-      onClick: (K, k, P) => {
-        const { selectedRows: o, tableMethods: d } = P, R = d.getFields(), W = /* @__PURE__ */ V(q, { children: [
-          "Complete los campos requeridos para crear un nuevo elemento en la tabla. Los campos marcados con asterisco (",
-          /* @__PURE__ */ r("span", { style: { color: "#c00" }, children: "*" }),
-          ") son obligatorios."
-        ] }), p = o.length === 1 ? o[0].item : {}, A = o.map((s) => s.index), D = G(R, w);
-        k({
-          size: B,
-          title: y,
-          position: M,
-          deferContentRendering: !0,
-          modalType: T,
-          content: /* @__PURE__ */ r(J, { defaultValues: p, formRef: g, description: W, ...D }),
+      children: d,
+      appearance: F,
+      collapseLabel: L,
+      style: k,
+      className: M,
+      onClick: (Z, _, I) => {
+        const { selectedRows: s, tableMethods: p } = I, V = p.getFields(), j = /* @__PURE__ */ o(J, { children: e.updateDrawerDescription }), u = s.length === 1 ? s[0].item : {}, N = s.map((a) => a.index), U = Q(V, D);
+        _({
+          size: z,
+          title: v,
+          position: P,
+          deferContentRendering: $ ?? !0,
+          contentRenderDelay: W,
+          modalType: A,
+          labels: {
+            closeButtonAriaLabel: e.drawerCloseButtonAriaLabel,
+            loadingContentText: e.drawerLoadingContentText,
+            ...S ?? {}
+          },
+          content: /* @__PURE__ */ o(Y, { defaultValues: u, formRef: T, description: j, ...U }),
           buttons: [
             {
               kind: "EFWButton",
               props: {
                 icon: c,
-                children: l,
+                children: e.updateActionText || d,
                 appearance: "primary",
                 autoLoading: !0,
-                loadingText: "Actualizando...",
+                labels: { loadingText: e.updateLoadingText },
                 successConfig: {
-                  text: "¡Actualizado!"
+                  text: e.updateSuccessText
                 },
-                onClick: async (s, a) => {
-                  if (h()) {
-                    const I = E(), u = t(!0);
-                    C();
+                onClick: async (a, i) => {
+                  if (C()) {
+                    const q = x(), m = n(!0);
+                    h();
                     try {
-                      const e = await d.updateItem(A[0], { ...p, ...I });
-                      if (e.failed?.length) {
-                        t(!1, u);
-                        const _ = e.failed.map((n) => m(n.error)), j = e.failed.length > 1;
-                        return i({
+                      const t = await p.updateItem(N[0], { ...u, ...q });
+                      if (t.failed?.length) {
+                        n(!1, m);
+                        const G = t.failed.map((r) => {
+                          const g = f(r.error);
+                          return {
+                            key: `update-error-${r.index}-${g}`,
+                            message: g
+                          };
+                        }), H = t.failed.length > 1;
+                        return l({
                           id: "update-operation-error",
                           intent: "error",
-                          title: j ? "Error al intentar actualizar elementos:" : "Error al intentar actualizar elemento:",
-                          message: /* @__PURE__ */ r("ul", { children: _.map((n, L) => /* @__PURE__ */ r("li", { children: n }, L)) })
+                          title: H ? `${e.updateErrorTitleMultiple}:` : `${e.updateErrorTitleSingle}:`,
+                          message: /* @__PURE__ */ o("ul", { children: G.map((r) => /* @__PURE__ */ o("li", { children: r.message }, r.key)) })
                         }), { success: !1 };
                       }
-                      return setTimeout(a, 100), { success: !0 };
-                    } catch (e) {
-                      return t(!1, u), console.error("Error durante actualización:", e), i({
+                      return setTimeout(i, 100), { success: !0 };
+                    } catch (t) {
+                      return n(!1, m), console.error("Error durante actualización:", t), l({
                         id: "update-unexpected-error",
                         intent: "error",
-                        title: "Error al intentar actualizar elemento",
-                        message: m(e)
+                        title: e.updateErrorTitleSingle,
+                        message: f(t)
                       }), { success: !1 };
                     }
                   } else
@@ -83,9 +103,9 @@ const re = (f = {}) => {
             {
               kind: "EFWButton",
               props: {
-                children: "Cancelar",
-                onClick: (s, a) => {
-                  a();
+                children: e.cancelButtonLabel,
+                onClick: (a, i) => {
+                  i();
                 }
               }
             }
@@ -96,5 +116,5 @@ const re = (f = {}) => {
   };
 };
 export {
-  re as useDefaultUpdateButton
+  le as useDefaultUpdateButton
 };

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

@@ -0,0 +1,10 @@
+import { ColumnRenderers } from '../../EFWTable.types';
+
+/**
+ * Estabiliza la referencia de `columnRenderers` para evitar re-renders
+ * innecesarios cuando el consumidor la pasa como objeto inline.
+ *
+ * Solo actualiza la referencia interna si la estructura o las funciones
+ * renderer realmente cambiaron (shallow comparison por nivel).
+ */
+export declare function useStableColumnRenderers(columnRenderers?: ColumnRenderers): ColumnRenderers | undefined;

package/dist/react-components/tables/EFWTable/hooks/useStableColumnRenderers/useStableColumnRenderers.js

@@ -0,0 +1,28 @@
+import { useRef as a } from "react";
+function d(e, t) {
+  if (e === t) return !0;
+  if (!e || !t) return !1;
+  const i = Object.keys(e), l = Object.keys(t);
+  if (i.length !== l.length) return !1;
+  for (const o of i) {
+    const f = e[o], n = t[o];
+    if (f === n) continue;
+    if (!f || !n || f.default !== n.default) return !1;
+    const r = f.fields, s = n.fields;
+    if (r === s) continue;
+    if (!r || !s) return !1;
+    const u = Object.keys(r), y = Object.keys(s);
+    if (u.length !== y.length) return !1;
+    for (const c of u)
+      if (r[c] !== s[c])
+        return !1;
+  }
+  return !0;
+}
+function k(e) {
+  const t = a(e);
+  return d(t.current, e) || (t.current = e), t.current;
+}
+export {
+  k as useStableColumnRenderers
+};