@envisiongroup/porygon 1.0.0-rc.8 → 1.0.0

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

@@ -1,40 +1,65 @@
-import { jsx as l } from "react/jsx-runtime";
-import { flexRender as a } from "@tanstack/react-table";
-import { COLS_MAX_WIDTH as u, COLS_MIN_WIDTH as d } from "../../EFWTable.js";
-const p = ({
+import { jsx as m } from "react/jsx-runtime";
+import { flexRender as r } from "@tanstack/react-table";
+import { COLS_MAX_WIDTH as h, COLS_MIN_WIDTH as f } from "../../EFWTable.js";
+const C = [
+  "Text",
+  "Note",
+  "Choice",
+  "MultiChoice",
+  "Attachments"
+], g = ({
   cell: t,
-  columnSizing: e,
-  stickyColumnsInfo: n,
-  useVirtualization: x
+  dense: e = !0,
+  columnSizing: a,
+  stickyColumnsInfo: o,
+  useVirtualization: S
   // Mantenido para compatibilidad de API
 }) => {
-  const i = t.column.id === "select", o = n.stickyColumns.includes(t.column.id), r = n.stickyPositions[t.column.id] || 0, c = e[t.column.id] || t.column.getSize(), m = t.column.columnDef.minSize || d, s = t.column.columnDef.maxSize || u;
-  return /* @__PURE__ */ l(
+  const i = t.column.id === "select", n = o.stickyColumns.includes(
+    t.column.id
+  ), s = o.stickyPositions[t.column.id] || 0, u = a[t.column.id] || t.column.getSize(), l = t.column.columnDef.meta?.typeAsString, c = t.column.columnDef.meta?.cellLineClamp, p = c != null && l != null && C.includes(l), d = t.column.columnDef.minSize || f, x = t.column.columnDef.maxSize || h;
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: `table-cell ${o || i ? "sticky-column" : ""}`,
+      className: `table-cell${n || i ? " sticky-column" : ""}`,
+      "data-internalname": i ? void 0 : t.column.id,
+      "data-typeasstring": i ? void 0 : t.column.columnDef.meta?.typeAsString,
       style: {
-        width: `${c}px`,
-        minWidth: `${m}px`,
-        maxWidth: `${s}px`,
-        position: o || i ? "sticky" : "static",
-        left: o || i ? `${r}px` : "auto",
-        zIndex: o || i ? 1 : 0,
-        padding: i ? "0px" : "8px",
+        width: `${u}px`,
+        minWidth: `${d}px`,
+        maxWidth: `${x}px`,
+        position: n || i ? "sticky" : "static",
+        left: n || i ? `${s}px` : "auto",
+        zIndex: n ? 10 : 0,
+        padding: i ? "0px" : e ? "8px" : "12px",
         whiteSpace: i ? "nowrap" : "pre-wrap",
         wordWrap: i ? "normal" : "break-word",
         verticalAlign: "top",
-        minHeight: "32px",
+        minHeight: e ? "32px" : "44px",
         //minHeight: useVirtualization ? '32px' : 'auto',
         overflow: "hidden",
         textAlign: i ? "center" : "left",
-        backgroundColor: "var(--current-row-bg)",
+        //backgroundColor: 'var(--current-row-bg)',
+        backgroundColor: "inherit",
         boxSizing: "border-box"
       },
-      children: a(t.column.columnDef.cell, t.getContext())
+      children: p ? /* @__PURE__ */ m(
+        "div",
+        {
+          className: "cell-line-clamp-wrapper",
+          style: {
+            display: "-webkit-box",
+            WebkitLineClamp: c,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: r(t.column.columnDef.cell, t.getContext())
+        }
+      ) : r(t.column.columnDef.cell, t.getContext())
     }
   );
-}, f = p;
+}, w = g;
 export {
-  f as EFWTableCell
+  w as EFWTableCell
 };

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

@@ -0,0 +1,13 @@
+import { Cell } from '@tanstack/react-table';
+import { EFWTableItem } from '../../EFWTable.types';
+
+export interface EFWTableCellProps {
+    cell: Cell<EFWTableItem, unknown>;
+    dense?: boolean;
+    columnSizing: Record<string, number>;
+    stickyColumnsInfo: {
+        stickyColumns: string[];
+        stickyPositions: Record<string, number>;
+    };
+    useVirtualization: boolean;
+}

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

@@ -14,6 +14,6 @@ import { EFWFormFieldProps } from '../../../../forms/EFWForm';
  * @param {EFWTableCommandBarProps} props - Propiedades del componente.
  * @returns {JSX.Element|null} - El grupo de botones renderizados o null si no hay botones visibles.
  */
-declare const EFWTableCommandBarInner: <T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]>({ alwaysButtons, noSelectionButtons, singleSelectionButtons, multiSelectionButtons, selectedRows, tableMethods, containerStyle, gap, className, }: EFWTableCommandBarProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const EFWTableCommandBarInner: <T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]>({ alwaysButtons, noSelectionButtons, singleSelectionButtons, multiSelectionButtons, selectedRows, tableMethods, containerStyle, gap, className, localeText: localeTextOverrides, }: EFWTableCommandBarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const EFWTableCommandBar: typeof EFWTableCommandBarInner;
 export {};

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

@@ -1,96 +1,121 @@
-import { jsx as s, jsxs as S } from "react/jsx-runtime";
-import n, { useCallback as W } from "react";
-import { CardHeader as I, tokens as M, Button as _ } from "@fluentui/react-components";
-import { Dismiss20Regular as $ } from "@fluentui/react-icons";
-import { EFWGroupButton as j } from "../../../../buttons/EFWGroupButton/EFWGroupButton.js";
-const l = [], A = ({
-  alwaysButtons: c = l,
-  noSelectionButtons: p = l,
-  singleSelectionButtons: m = l,
-  multiSelectionButtons: d = l,
-  selectedRows: t = [],
-  tableMethods: a,
-  containerStyle: h,
-  gap: k,
-  className: v
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import n, { useCallback as M } from "react";
+import { makeStyles as I, tokens as j, CardHeader as D, Button as G } from "@fluentui/react-components";
+import { Dismiss20Regular as H } from "@fluentui/react-icons";
+import { useTableLocaleText as O } from "../../../../i18n/PorygonI18nProvider.js";
+import { EFWGroupButton as $ } from "../../../../buttons/EFWGroupButton/EFWGroupButton.js";
+const s = [], A = [], Y = I({
+  commandBar: {
+    padding: "4px 8px 3px",
+    borderBottom: `1px solid ${j.colorNeutralStroke1}`,
+    transition: "background-color 0.2s ease",
+    containerName: "commandBar",
+    containerType: "inline-size",
+    "& .fui-CardHeader__header": {
+      flexShrink: 0,
+      flexGrow: 0
+    },
+    "& .fui-CardHeader__action": {
+      flex: 1,
+      minWidth: 0
+    }
+  },
+  fullLabel: {
+    "@container commandBar (max-width: 640px)": {
+      display: "none"
+    }
+  },
+  shortLabel: {
+    display: "none",
+    "@container commandBar (max-width: 640px)": {
+      display: "inline"
+    }
+  }
+}), w = ({
+  alwaysButtons: d = s,
+  noSelectionButtons: p = s,
+  singleSelectionButtons: u = s,
+  multiSelectionButtons: f = s,
+  selectedRows: r = A,
+  tableMethods: i,
+  containerStyle: S,
+  gap: g,
+  className: E,
+  localeText: _
 }) => {
-  const e = n.useMemo(() => t.length, [t]), o = n.useCallback(
-    (T, C) => T.map((r, B) => {
-      const F = r.enabled === void 0 ? !0 : typeof r.enabled == "boolean" ? r.enabled : r.enabled(t, a), g = C.active && F, i = r.props || {}, N = g ? i.style : { ...i.style, display: "none" }, P = {
-        ...i,
-        ...i.id ? {} : { id: `${C.prefix}-${B}` },
-        style: N,
-        ...g ? {} : {
+  const c = Y(), m = O(_), e = n.useMemo(() => r.length, [r]), a = n.useCallback(
+    (L, B) => L.map((o, N) => {
+      const W = o.enabled === void 0 ? !0 : typeof o.enabled == "boolean" ? o.enabled : o.enabled(r, i), T = B.active && W, l = o.props || {}, v = T ? l.style : { ...l.style, display: "none" }, P = {
+        ...l,
+        ...l.id ? {} : { id: `${B.prefix}-${N}` },
+        style: v,
+        ...T ? {} : {
           "aria-hidden": !0,
-          tabIndex: i.tabIndex ?? -1
+          tabIndex: l.tabIndex ?? -1
         }
       };
       return {
-        ...r,
+        ...o,
         props: P
       };
     }),
-    [t, a]
-  ), E = W(() => {
-    a.deselectAllRows();
-  }, [a]), u = n.useMemo(
-    () => o(c, { active: !0, prefix: "always-button" }),
-    [c, o]
-  ), f = n.useMemo(
-    () => o(p, { active: e === 0, prefix: "no-selected-button" }),
-    [o, p, e]
-  ), b = n.useMemo(
-    () => o(m, { active: e === 1, prefix: "one-selected-button" }),
-    [o, e, m]
-  ), x = n.useMemo(
-    () => o(d, { active: e > 1, prefix: "many-selected-button" }),
-    [o, d, e]
+    [r, i]
+  ), k = M(() => {
+    i.deselectAllRows();
+  }, [i]), x = n.useMemo(
+    () => a(d, { active: !0, prefix: "always-button" }),
+    [d, a]
   ), y = n.useMemo(
+    () => a(p, { active: e === 0, prefix: "no-selected-button" }),
+    [a, p, e]
+  ), b = n.useMemo(
+    () => a(u, { active: e === 1, prefix: "one-selected-button" }),
+    [a, e, u]
+  ), h = n.useMemo(
+    () => a(f, { active: e > 1, prefix: "many-selected-button" }),
+    [a, f, e]
+  ), C = n.useMemo(
     () => [
-      ...u,
-      ...f,
+      ...x,
+      ...y,
       ...b,
-      ...x
+      ...h
     ],
-    [u, x, f, b]
+    [x, h, y, b]
   );
-  return /* @__PURE__ */ s(
-    I,
+  return /* @__PURE__ */ t(
+    D,
     {
-      style: {
-        padding: "4px 8px 3px",
-        borderBottom: `1px solid ${M.colorNeutralStroke1}`,
-        transition: "background-color 0.2s ease"
-      },
-      header: e > 0 ? /* @__PURE__ */ S(
-        _,
+      className: c.commandBar,
+      header: e > 0 ? /* @__PURE__ */ F(
+        G,
         {
+          style: { minWidth: "auto", paddingLeft: 7, paddingRight: 7 },
           appearance: "subtle",
-          icon: /* @__PURE__ */ s($, {}),
-          onClick: E,
-          title: "Limpiar selección",
+          icon: /* @__PURE__ */ t(H, {}),
+          onClick: k,
+          title: m.commandBarClearSelectionTitle,
           iconPosition: "after",
           children: [
-            "Seleccionados (",
-            e,
-            ")"
+            /* @__PURE__ */ t("span", { className: c.fullLabel, children: m.commandBarSelectedCountLabel(e) }),
+            /* @__PURE__ */ t("span", { className: c.shortLabel, children: m.commandBarSelectedCountShortLabel(e) })
           ]
         }
-      ) : /* @__PURE__ */ s("div", { style: { height: 32 } }),
-      action: y.length > 0 ? /* @__PURE__ */ s(
-        j,
+      ) : /* @__PURE__ */ t("div", { style: { height: 32 } }),
+      action: C.length > 0 ? /* @__PURE__ */ t(
+        $,
         {
-          buttons: y,
-          onClickParams: { selectedRows: t, tableMethods: a },
-          style: h,
-          gap: k,
-          className: v
+          buttons: C,
+          onClickParams: { selectedRows: r, tableMethods: i },
+          style: { justifyContent: "flex-end", ...S },
+          gap: g,
+          className: E
         }
       ) : null
     }
   );
-}, D = n.memo(A);
-D.displayName = "EFWTableCommandBar";
+}, z = n.memo(w);
+z.displayName = "EFWTableCommandBar";
 export {
-  D as EFWTableCommandBar
+  z as EFWTableCommandBar
 };

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

@@ -1,7 +1,8 @@
-import { EFWTableItem, EFWTableMethods, EFWTableRow } from '../../EFWTable.types';
+import { EFWTableItem, EFWTableInsertPosition, EFWTableMethods, EFWTableRow } from '../../EFWTable.types';
 import { EFWGroupButtonConfig } from '../../../../buttons/EFWGroupButton';
 import { EFWFormFieldProps, EFWFormProps } from '../../../../forms/EFWForm';
 import { EFWDrawerButtonProps } from '../../../../buttons/EFWDrawerButton';
+import { EFWTableLocaleText } from '../../../../i18n';
 
 /**
  * Interfaz que define los parámetros pasados al manejador de eventos onClick del CommandBar.
@@ -22,24 +23,9 @@ export interface CommandBarOnClickParams<T extends readonly EFWFormFieldProps[]
      */
     tableMethods: EFWTableMethods<T>;
 }
-export interface CommandBarOnClickParams<T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]> {
-    /**
-     * Un arreglo de filas seleccionadas de la tabla.
-     *
-     * @type {EFWTableRow[]}
-     */
-    selectedRows: EFWTableRow<EFWTableItem<T>>[];
-    /**
-     * Métodos disponibles para interactuar con la tabla.
-     *
-     * @type {EFWTableMethods}
-     */
-    tableMethods: EFWTableMethods<T>;
-}
 export type EFWTableCommandBarButton<T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]> = EFWGroupButtonConfig<CommandBarOnClickParams<T>> & {
     enabled?: boolean | ((selectedRows: EFWTableRow<EFWTableItem<T>>[], tableMethods: EFWTableMethods<T>) => boolean);
 };
-export type EFWTableCommandBarButtonsFn<T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]> = (selectedRows: EFWTableRow<EFWTableItem<T>>[], tableMethods: EFWTableMethods<T>) => EFWTableCommandBarButton<T>[];
 /**
  * Propiedades del componente EFWTableCommandBar.
  *
@@ -82,9 +68,12 @@ export interface EFWTableCommandBarProps<T extends readonly EFWFormFieldProps[]
     gap?: string | number;
     /** Clase CSS opcional para el contenedor. */
     className?: string;
+    /** Textos localizados para labels internos del command bar. */
+    localeText?: Partial<EFWTableLocaleText>;
 }
 export type DefaultDrawerButtonProps<T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]> = {
     enabled?: boolean | ((selectedRows: EFWTableRow<EFWTableItem<T>>[], tableMethods: EFWTableMethods<T>) => boolean);
+    insertPosition?: EFWTableInsertPosition;
     form?: Omit<EFWFormProps<T>, 'formRef'> & {
         fields?: T;
     };
@@ -92,3 +81,5 @@ export type DefaultDrawerButtonProps<T extends readonly EFWFormFieldProps[] = EF
         drawerConfig?: Omit<EFWDrawerButtonProps['drawerConfig'], 'buttons'>;
     };
 };
+/** Configuración del botón de filtro. Igual que DefaultDrawerButtonProps sin `insertPosition`. */
+export type DefaultFilterButtonProps<T extends readonly EFWFormFieldProps[] = EFWFormFieldProps[]> = Omit<DefaultDrawerButtonProps<T>, 'insertPosition'>;

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

@@ -1,2 +1,2 @@
 export { EFWTableCommandBar } from './EFWTableCommandBar';
-export type { EFWTableCommandBarProps } from './EFWTableCommandBar.types';
+export type { EFWTableCommandBarProps, EFWTableCommandBarButton, DefaultFilterButtonProps } from './EFWTableCommandBar.types';

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

@@ -1,3 +1,3 @@
 import { EFWTableHeaderProps } from './EFWTableHeader.types';
 
-export declare const EFWTableHeader: ({ table, gridTemplateColumns, columnSizing, stickyColumnsInfo, resizableColumns }: EFWTableHeaderProps) => React.ReactElement;
+export declare const EFWTableHeader: ({ table, gridTemplateColumns, columnSizing, dense, stickyColumnsInfo, resizableColumns, localeText, }: EFWTableHeaderProps) => React.ReactElement;