@envisiongroup/porygon 1.0.0-rc.9 → 1.0.0

package/dist/react-components/tables/EFWTable/components/EFWTableHeader/EFWTableHeader.js

@@ -1,87 +1,222 @@
-import { jsx as l, jsxs as k } from "react/jsx-runtime";
-import { flexRender as f } from "@tanstack/react-table";
-import { tokens as n } from "@fluentui/react-components";
-import { COLS_MAX_WIDTH as b, COLS_MIN_WIDTH as y } from "../../EFWTable.js";
-const W = ({
-  table: c,
-  gridTemplateColumns: s,
-  columnSizing: u,
-  stickyColumnsInfo: r,
-  resizableColumns: a
-}) => /* @__PURE__ */ l(
-  "div",
-  {
-    className: "table-header",
-    style: {
-      position: "sticky",
-      top: 0,
-      backgroundColor: n.colorNeutralBackground1,
-      zIndex: 2,
-      display: "grid",
-      gridTemplateColumns: s
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { flexRender as L } from "@tanstack/react-table";
+import { makeStyles as D, tokens as t, mergeClasses as p } from "@fluentui/react-components";
+import { Filter16Filled as b, ArrowSortUpLines16Filled as F, ArrowSortDownLines16Filled as R, ArrowSort16Regular as $ } from "@fluentui/react-icons";
+import { COLS_MAX_WIDTH as O, COLS_MIN_WIDTH as _ } from "../../EFWTable.js";
+const j = D({
+  separator: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    height: "100%",
+    width: "5px",
+    cursor: "col-resize",
+    userSelect: "none",
+    touchAction: "none",
+    backgroundColor: "transparent",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-end",
+    maxWidth: "10px",
+    "& div": {
+      width: "1px",
+      height: "60%",
+      display: "inline-block",
+      flexShrink: 0,
+      transition: "width 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms cubic-bezier(0.22, 1, 0.36, 1)",
+      backgroundColor: t.colorNeutralStroke1
     },
-    children: c.getHeaderGroups().map(
-      (d) => d.headers.map((o) => {
-        const t = o.id === "select", e = r.stickyColumns.includes(o.id), p = r.stickyPositions[o.id] || 0, m = u[o.id] || o.getSize(), g = o.column.columnDef.minSize || y, x = o.column.columnDef.maxSize || b;
-        return /* @__PURE__ */ k(
-          "div",
-          {
-            className: `
-								header-cell
-								${e || t ? "sticky-column" : ""}
-							`,
-            style: {
-              width: `${m}px`,
-              minWidth: `${g}px`,
-              maxWidth: `${x}px`,
-              position: e || t ? "sticky" : "relative",
-              left: e || t ? `${p}px` : "auto",
-              zIndex: e || t ? 3 : 1,
-              padding: t ? "0px" : "4px 8px",
-              textAlign: t ? "center" : "left",
-              fontWeight: "bold",
-              fontSize: "12px",
-              backgroundColor: n.colorNeutralBackground1,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              boxSizing: "border-box"
-            },
-            children: [
-              f(o.column.columnDef.header, o.getContext()),
-              a && o.column.getCanResize() && !t && /* @__PURE__ */ l(
-                "div",
-                {
-                  onMouseDown: o.getResizeHandler(),
-                  onTouchStart: o.getResizeHandler(),
-                  style: {
-                    position: "absolute",
-                    right: 0,
-                    top: 0,
-                    height: "100%",
-                    width: "5px",
-                    cursor: "col-resize",
-                    userSelect: "none",
-                    touchAction: "none",
-                    backgroundColor: "transparent",
-                    zIndex: e ? 4 : 2
-                  },
-                  onMouseEnter: (i) => {
-                    i.currentTarget.style.backgroundColor = n.colorNeutralBackground1;
-                  },
-                  onMouseLeave: (i) => {
-                    i.currentTarget.style.backgroundColor = n.colorTransparentBackground;
-                  }
-                }
-              )
-            ]
-          },
-          o.id
-        );
-      })
-    )
+    "&:hover div, &:active div, &:focus-visible div": {
+      width: "3px",
+      backgroundColor: t.colorBrandBackground
+    }
+  },
+  sortButton: {
+    appearance: "none",
+    background: "none",
+    border: "none",
+    padding: "0",
+    margin: "0",
+    font: "inherit",
+    color: "inherit",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    width: "100%",
+    userSelect: "none",
+    overflow: "hidden",
+    textAlign: "left",
+    ":focus-visible": {
+      outline: `2px solid ${t.colorBrandBackground}`,
+      outlineOffset: "2px",
+      borderRadius: t.borderRadiusSmall
+    },
+    ":hover [data-sort-icon]": {
+      display: "block"
+    }
+  },
+  sortIcon: {
+    flexShrink: 0,
+    color: t.colorNeutralForeground3,
+    display: "none"
+  },
+  sortIconActive: {
+    flexShrink: 0,
+    color: t.colorBrandBackground
+  },
+  filterIconActive: {
+    flexShrink: 0,
+    color: t.colorBrandBackground
+  },
+  tableHeader: {
+    position: "sticky",
+    top: 0,
+    backgroundColor: t.colorNeutralBackground1,
+    zIndex: 40,
+    display: "grid"
+  },
+  tableCell: {
+    fontWeight: "bold",
+    backgroundColor: "inherit",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    boxSizing: "border-box"
   }
-);
+}), M = (a) => a ? {
+  fontSize: t.fontSizeBase200,
+  lineHeight: t.lineHeightBase400
+} : {
+  fontSize: t.fontSizeBase300,
+  lineHeight: t.lineHeightBase600
+}, X = ({
+  table: a,
+  gridTemplateColumns: x,
+  columnSizing: f,
+  dense: u = !0,
+  stickyColumnsInfo: g,
+  resizableColumns: h,
+  localeText: s
+}) => {
+  const S = M(u), i = j(), y = p(i.tableHeader, "table-header"), k = p(i.tableCell, "table-cell"), v = p(
+    i.separator,
+    "table-separator"
+  );
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: y,
+      style: {
+        gridTemplateColumns: x,
+        height: u ? "32px" : "44px"
+      },
+      children: a.getHeaderGroups().map(
+        (w) => w.headers.map((e) => {
+          const n = e.id === "select", r = g.stickyColumns.includes(
+            e.id
+          ), C = g.stickyPositions[e.id] || 0, z = f[e.id] || e.getSize(), I = e.column.columnDef.minSize || _, B = e.column.columnDef.maxSize || O, A = !n && e.column.getCanSort(), l = e.column.getIsSorted(), m = !n && e.column.getIsFiltered(), H = e.column.getToggleSortingHandler(), N = l === "asc" ? s.sortStateAscLabel : l === "desc" ? s.sortStateDescLabel : s.sortStateNoneLabel, c = L(
+            e.column.columnDef.header,
+            e.getContext()
+          ), W = A ? /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              className: i.sortButton,
+              onClick: H,
+              title: N,
+              children: [
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    style: {
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: c
+                  }
+                ),
+                m && /* @__PURE__ */ o(b, { className: i.filterIconActive }),
+                l === "asc" && /* @__PURE__ */ o(F, { className: i.sortIconActive }),
+                l === "desc" && /* @__PURE__ */ o(R, { className: i.sortIconActive }),
+                !l && /* @__PURE__ */ o(
+                  $,
+                  {
+                    className: i.sortIcon,
+                    "data-sort-icon": !0
+                  }
+                )
+              ]
+            }
+          ) : m ? /* @__PURE__ */ d(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    style: {
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: c
+                  }
+                ),
+                /* @__PURE__ */ o(b, { className: i.filterIconActive })
+              ]
+            }
+          ) : c;
+          return /* @__PURE__ */ d(
+            "div",
+            {
+              className: `${k}${r || n ? " sticky-column" : ""}`,
+              style: {
+                width: `${z}px`,
+                minWidth: `${I}px`,
+                maxWidth: `${B}px`,
+                position: r || n ? "sticky" : "relative",
+                left: r || n ? `${C}px` : "auto",
+                zIndex: r || n ? 50 : 1,
+                padding: n ? "0px" : "4px 8px",
+                textAlign: n ? "center" : "left",
+                ...S
+              },
+              children: [
+                W,
+                h && e.column.getCanResize() && !n && /* @__PURE__ */ o(
+                  "div",
+                  {
+                    role: "separator",
+                    "aria-orientation": "vertical",
+                    "aria-label": s.resizeColumnAriaLabel,
+                    tabIndex: 0,
+                    className: v,
+                    onMouseDown: e.getResizeHandler(),
+                    onTouchStart: e.getResizeHandler(),
+                    style: {
+                      zIndex: r ? 40 : 10
+                    },
+                    children: /* @__PURE__ */ o("div", {})
+                  }
+                )
+              ]
+            },
+            e.id
+          );
+        })
+      )
+    }
+  );
+};
 export {
-  W as EFWTableHeader
+  X as EFWTableHeader
 };

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

@@ -1,13 +1,16 @@
 import { Table } from '@tanstack/react-table';
 import { EFWTableItem } from '../../EFWTable.types';
+import { EFWTableLocaleText } from '../../../../i18n';
 
 export interface EFWTableHeaderProps {
     table: Table<EFWTableItem>;
     gridTemplateColumns: string;
     columnSizing: Record<string, number>;
+    dense: boolean;
     stickyColumnsInfo: {
         stickyColumns: string[];
         stickyPositions: Record<string, number>;
     };
     resizableColumns: boolean;
+    localeText: EFWTableLocaleText;
 }

package/dist/react-components/tables/EFWTable/components/EFWTableOverlay/EFWTableOverlay.js

@@ -1,21 +1,8 @@
-import { jsx as e, Fragment as v, jsxs as g } from "react/jsx-runtime";
-import { makeStyles as B, tokens as i, mergeClasses as a, Card as E, CardPreview as I, Image as A, CardHeader as F, Body1 as N, Body1Stronger as x, Spinner as T, Button as j } from "@fluentui/react-components";
-import { ErrorCircle24Regular as V, ArrowClockwise20Regular as k } from "@fluentui/react-icons";
-const M = "https://res-1.public.onecdn.static.microsoft/files/sp-client/odsp-media-53ad6982/images/emptyfolder/empty_list_placeholder2.webp", d = {
-  empty: {
-    title: "Sin datos disponibles",
-    description: "Los datos aparecerán aquí una vez se agreguen registros"
-  },
-  loading: {
-    title: "Cargando datos...",
-    description: "Por favor espere mientras se cargan los datos"
-  },
-  error: {
-    title: "Error al cargar datos",
-    description: "Ha ocurrido un error al cargar los datos",
-    retryButtonText: "Reintentar"
-  }
-}, R = B({
+import { jsx as e, Fragment as E, jsxs as g } from "react/jsx-runtime";
+import { makeStyles as j, tokens as n, mergeClasses as l, Card as L, CardPreview as A, Image as D, CardHeader as F, Body1 as S, Body1Stronger as T, Spinner as b, Button as V } from "@fluentui/react-components";
+import { ErrorCircle24Regular as k, ArrowClockwise20Regular as M } from "@fluentui/react-icons";
+import { useTableLocaleText as R } from "../../../../i18n/PorygonI18nProvider.js";
+const W = "https://res-1.public.onecdn.static.microsoft/files/sp-client/odsp-media-53ad6982/images/emptyfolder/empty_list_placeholder2.webp", O = j({
   // Container principal
   container: {
     display: "flex",
@@ -29,7 +16,7 @@ const M = "https://res-1.public.onecdn.static.microsoft/files/sp-client/odsp-med
     height: "fit-content"
   },
   caption: {
-    color: i.colorNeutralForeground3,
+    color: n.colorNeutralForeground3,
     width: "100%",
     textAlign: "center"
   },
@@ -39,35 +26,35 @@ const M = "https://res-1.public.onecdn.static.microsoft/files/sp-client/odsp-med
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: i.spacingVerticalM,
-    padding: i.spacingVerticalXXL,
+    gap: n.spacingVerticalM,
+    padding: n.spacingVerticalXXL,
     "& div": {
       display: "grid"
     }
   },
   loadingText: {
-    color: i.colorNeutralForeground2,
+    color: n.colorNeutralForeground2,
     textAlign: "center"
   },
   // Error state
   errorIcon: {
-    color: i.colorStatusDangerForeground1,
+    color: n.colorStatusDangerForeground1,
     fontSize: "48px",
-    marginBottom: i.spacingVerticalS
+    marginBottom: n.spacingVerticalS
   },
   errorContainer: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: i.spacingVerticalS,
-    padding: i.spacingVerticalL,
+    gap: n.spacingVerticalS,
+    padding: n.spacingVerticalL,
     "& div": {
       display: "grid"
     }
   },
   retryButton: {
-    marginTop: i.spacingVerticalM
+    marginTop: n.spacingVerticalM
   },
   // Partial loading overlay
   partialLoadingWrapper: {
@@ -89,58 +76,73 @@ const M = "https://res-1.public.onecdn.static.microsoft/files/sp-client/odsp-med
   }
 }), U = (C) => {
   const {
-    config: n,
+    config: i,
     height: m,
     customization: p = {},
+    localeText: N,
     className: y,
     style: u,
-    cardClassName: f,
-    cardStyle: S,
+    cardClassName: v,
+    cardStyle: x,
     captionClassName: h,
-    children: o
-  } = C, t = R();
-  switch (n.state) {
+    children: f
+  } = C, t = O(), a = R(N), s = {
+    empty: {
+      title: a.overlayEmptyTitle,
+      description: a.overlayEmptyDescription
+    },
+    loading: {
+      title: a.overlayLoadingTitle,
+      description: a.overlayLoadingDescription
+    },
+    error: {
+      title: a.overlayErrorTitle,
+      description: a.overlayErrorDescription,
+      retryButtonText: a.overlayRetryButtonLabel
+    }
+  };
+  switch (i.state) {
     case "none":
-      return o ? /* @__PURE__ */ e(v, { children: o }) : null;
+      return f ? /* @__PURE__ */ e(E, { children: f }) : null;
     case "empty":
-      return b();
+      return B();
     case "loading":
       return w();
     case "error":
-      return L();
+      return I();
     case "partial-loading":
       return z();
     default:
-      return o ? /* @__PURE__ */ e(v, { children: o }) : null;
+      return f ? /* @__PURE__ */ e(E, { children: f }) : null;
   }
-  function b() {
-    const r = p.empty || {}, s = n.message || r.title || d.empty.title, c = n.description || r.description || d.empty.description, l = n.imageUrl || r.imageUrl || M;
+  function B() {
+    const r = p.empty || {}, c = i.message || r.title || s.empty.title, o = i.description || r.description || s.empty.description, d = i.imageUrl || r.imageUrl || W;
     return /* @__PURE__ */ e(
       "div",
       {
-        className: a(t.container, y),
+        className: l(t.container, y),
         style: { height: m, ...u },
         children: /* @__PURE__ */ g(
-          E,
+          L,
           {
-            className: a(t.card, f),
-            style: S,
+            className: l(t.card, v),
+            style: x,
             appearance: "subtle",
             children: [
-              /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
-                A,
+              /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(
+                D,
                 {
                   style: { height: 80 },
-                  src: l,
-                  alt: "Sin datos",
+                  src: d,
+                  alt: a.overlayEmptyImageAlt,
                   fit: "contain"
                 }
               ) }),
               /* @__PURE__ */ e(
                 F,
                 {
-                  header: /* @__PURE__ */ e(x, { align: "center", style: { width: "100%" }, children: s }),
-                  description: /* @__PURE__ */ e(N, { align: "center", className: a(t.caption, h), children: c })
+                  header: /* @__PURE__ */ e(T, { align: "center", style: { width: "100%" }, children: c }),
+                  description: /* @__PURE__ */ e(S, { align: "center", className: l(t.caption, h), children: o })
                 }
               )
             ]
@@ -150,49 +152,49 @@ const M = "https://res-1.public.onecdn.static.microsoft/files/sp-client/odsp-med
     );
   }
   function w() {
-    const r = p.loading || {}, s = n.message || r.title || d.loading.title, c = n.description || r.description || d.loading.description, l = r.spinnerSize || "small";
+    const r = p.loading || {}, c = i.message || r.title || s.loading.title, o = i.description || r.description || s.loading.description, d = r.spinnerSize || "small";
     return /* @__PURE__ */ e(
       "div",
       {
-        className: a(t.container, y),
+        className: l(t.container, y),
         style: { height: m, ...u },
         children: /* @__PURE__ */ g("div", { className: t.loadingContainer, children: [
-          /* @__PURE__ */ e(T, { size: l }),
+          /* @__PURE__ */ e(b, { size: d }),
           /* @__PURE__ */ g("div", { children: [
-            /* @__PURE__ */ e(x, { className: t.loadingText, children: s }),
-            /* @__PURE__ */ e(N, { className: a(t.caption, h), children: c })
+            /* @__PURE__ */ e(T, { className: t.loadingText, children: c }),
+            o && /* @__PURE__ */ e(S, { className: l(t.caption, h), children: o })
           ] })
         ] })
       }
     );
   }
-  function L() {
-    const r = p.error || {}, s = n.message || r.title || d.error.title, c = n.description || r.description || d.error.description, l = r.retryButtonText || d.error.retryButtonText;
+  function I() {
+    const r = p.error || {}, c = i.message || r.title || s.error.title, o = i.description || r.description || s.error.description, d = i.retryButtonText || r.retryButtonText || s.error.retryButtonText;
     return /* @__PURE__ */ e(
       "div",
       {
-        className: a(t.container, y),
+        className: l(t.container, y),
         style: { height: m, ...u },
         children: /* @__PURE__ */ e(
-          E,
+          L,
           {
-            className: a(t.card, f),
-            style: S,
+            className: l(t.card, v),
+            style: x,
             appearance: "subtle",
             children: /* @__PURE__ */ g("div", { className: t.errorContainer, children: [
-              /* @__PURE__ */ e(V, { className: t.errorIcon }),
+              /* @__PURE__ */ e(k, { className: t.errorIcon }),
               /* @__PURE__ */ g("div", { children: [
-                /* @__PURE__ */ e(x, { align: "center", style: { width: "100%" }, children: s }),
-                /* @__PURE__ */ e(N, { align: "center", className: a(t.caption, h), children: c })
+                /* @__PURE__ */ e(T, { align: "center", style: { width: "100%" }, children: c }),
+                /* @__PURE__ */ e(S, { align: "center", className: l(t.caption, h), children: o })
               ] }),
-              n.onRetry && /* @__PURE__ */ e(
-                j,
+              i.onRetry && /* @__PURE__ */ e(
+                V,
                 {
                   className: t.retryButton,
                   appearance: "primary",
-                  icon: /* @__PURE__ */ e(k, {}),
-                  onClick: n.onRetry,
-                  children: l
+                  icon: /* @__PURE__ */ e(M, {}),
+                  onClick: i.onRetry,
+                  children: d
                 }
               )
             ] })
@@ -202,52 +204,52 @@ const M = "https://res-1.public.onecdn.static.microsoft/files/sp-client/odsp-med
     );
   }
   function z() {
-    const r = p.partialLoading || {}, s = r.opacity ?? 0.7, c = r.showSpinner ?? !0, l = r.spinnerSize || "small";
+    const r = p.partialLoading || {}, c = r.opacity ?? 0.7, o = r.showSpinner ?? !0, d = r.spinnerSize || "small";
     return /* @__PURE__ */ g("div", { className: t.partialLoadingWrapper, children: [
-      o,
+      f,
       /* @__PURE__ */ e(
         "div",
         {
           className: t.partialLoadingOverlay,
           style: {
-            backgroundColor: `rgba(255, 255, 255, ${s})`
+            backgroundColor: `rgba(255, 255, 255, ${c})`
           },
-          children: c && /* @__PURE__ */ e(T, { size: l })
+          children: o && /* @__PURE__ */ e(b, { size: d })
         }
       )
     ] });
   }
-}, P = (C) => {
+}, H = (C) => {
   const {
-    title: n,
+    title: i,
     description: m,
     imageUrl: p,
-    height: y,
-    className: u,
-    style: f,
-    cardClassName: S,
-    cardStyle: h,
-    captionClassName: o
+    height: N,
+    className: y,
+    style: u,
+    cardClassName: v,
+    cardStyle: x,
+    captionClassName: h
   } = C;
   return /* @__PURE__ */ e(
     U,
     {
       config: {
         state: "empty",
-        message: n,
+        message: i,
         description: m,
         imageUrl: p
       },
-      height: y,
-      className: u,
-      style: f,
-      cardClassName: S,
-      cardStyle: h,
-      captionClassName: o
+      height: N,
+      className: y,
+      style: u,
+      cardClassName: v,
+      cardStyle: x,
+      captionClassName: h
     }
   );
 };
 export {
-  P as EFWTableEmpty,
+  H as EFWTableEmpty,
   U as EFWTableOverlay
 };

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

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SpinnerProps } from '@fluentui/react-components';
+import { EFWTableLocaleText } from '../../../../i18n';
 
 /**
  * Estados posibles del overlay de la tabla
@@ -66,6 +67,8 @@ export interface EFWTableOverlayConfig {
     description?: string;
     /** Callback para reintentar (solo para estado error) */
     onRetry?: () => void;
+    /** Texto del botón de reintentar (solo para estado error) */
+    retryButtonText?: string;
     /** URL de imagen personalizada (para empty/error) */
     imageUrl?: string;
 }
@@ -112,6 +115,8 @@ export interface EFWTableOverlayCustomization {
 export interface EFWTableOverlayProps {
     /** Configuración del estado actual */
     config: EFWTableOverlayConfig;
+    /** Textos localizados para labels internos del overlay. */
+    localeText?: Partial<EFWTableLocaleText>;
     /** Altura del contenedor */
     height?: number | string;
     /** Personalización por estado */