@envisiongroup/porygon 0.1.0-rc.1

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

@@ -0,0 +1,367 @@
+import { ListChildComponentProps } from 'react-window';
+import { TableRowData, CardProps } from '@fluentui/react-components';
+import { DefaultDrawerButtonProps, EFWTableCommandBarButton } from './components/EFWTableCommandBar/EFWTableCommandBar.types';
+import { EFWFormFieldProps, EFWFormFieldType, EFWFormFieldValue } from '../../forms/EFWForm';
+
+export interface EFWTableItem {
+    readonly id?: string;
+    [key: string]: EFWFormFieldValue | undefined;
+}
+export interface EFWTableRow<T = EFWTableItem> {
+    index: number;
+    item: T;
+}
+export interface OperationResult<T> {
+    successful: {
+        index: number;
+        item: T;
+    }[];
+    failed: {
+        index: number;
+        item?: Partial<T>;
+        error?: string | Error;
+    }[];
+}
+/**
+ * Interfaz que define los métodos expuestos por el componente EFWForm para controlar su estado y comportamiento.
+ * Estos métodos permiten interactuar con los valores, estado de edición, validaciones y mensajes del formulario.
+ */
+export interface EFWTableMethods {
+    getFields: () => EFWFormFieldProps[];
+    addItem: (item: Omit<EFWTableItem, 'id'>) => Promise<OperationResult<EFWTableItem>>;
+    addItems: (items: Omit<EFWTableItem, 'id'>[]) => Promise<OperationResult<EFWTableItem>>;
+    updateItem: (index: number, item: Partial<EFWTableItem>) => Promise<OperationResult<EFWTableItem>>;
+    updateItems: (items: {
+        index: number;
+        item: Partial<EFWTableItem>;
+    }[]) => Promise<OperationResult<EFWTableItem>>;
+    deleteItem: (index: number) => Promise<OperationResult<EFWTableItem>>;
+    deleteItems: (indexes: number[]) => Promise<OperationResult<EFWTableItem>>;
+    getItem: (id: string | number) => EFWTableItem | undefined;
+    getItemByIndex: (index: number) => EFWTableItem | undefined;
+    replaceAllItems: (newItems: EFWTableItem[]) => void;
+    clearItems: () => void;
+    getItemIndex: (id: string | number) => number;
+    itemExists: (id: string | number) => boolean;
+    getItemsCount: () => number;
+    getItems: () => EFWTableItem[];
+    getSelectedRows: () => EFWTableRow[];
+    deselectAllRows: () => void;
+    getSelectedItems: () => {
+        items: EFWTableItem[];
+        indexes: number[];
+    };
+}
+/**
+ * Tipo que representa la referencia al componente EFWForm.
+ * Puede ser un objeto con los métodos de `EFWFormMethods` o null si no está inicializado.
+ */
+export type EFWTableRef = EFWTableMethods | null;
+export interface EFWTableButton {
+    key: string;
+    label?: string | (() => string);
+    icon?: React.ReactNode | (() => React.ReactNode);
+    appearance?: "primary" | "outline" | "subtle" | "secondary" | "transparent";
+    disabled?: boolean | ((selectedItems: EFWTableItem[], selectedIndexes: number[]) => boolean);
+    hidden?: boolean;
+    title?: string | (() => string);
+    loading?: boolean | (() => boolean);
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    render?: (config: EFWTableButton, selectedItems: EFWTableItem[], selectedIndexes: number[]) => React.ReactNode;
+}
+export interface EFWTableRowData extends TableRowData<EFWTableItem> {
+    onClick: (e: React.MouseEvent) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onCheckboxClick: (e: React.MouseEvent) => void;
+    selected: boolean;
+    appearance: "brand" | "none" | "neutral";
+}
+export interface ReactWindowRenderFnProps extends ListChildComponentProps {
+    data: EFWTableRowData[];
+    fields: EFWFormFieldProps[];
+    columnSizing?: any;
+    resizableColumns: boolean;
+    customGetFieldIcon?: (internalName: string, item: EFWTableItem) => React.ReactNode;
+}
+export interface EFWTableProps {
+    appearance?: CardProps['appearance'];
+    fields: EFWFormFieldProps[];
+    items?: EFWTableItem[];
+    height?: number;
+    itemSize?: number;
+    enableSelection?: boolean;
+    enableCommandBar?: boolean;
+    tableStyle?: 'row' | 'grid';
+    style?: React.CSSProperties;
+    className?: string;
+    defaultSelectedItems?: Set<number>;
+    onSelectionChange?: (selectedItems: Set<number>) => void;
+    onRowClick?: (item: EFWTableItem, index: number) => void;
+    resizableColumns?: boolean;
+    autoSizeColumns?: boolean;
+    columnSizing?: Record<string, {
+        maxWidth?: number;
+        width?: number;
+        minWidth?: number;
+        sticky?: boolean;
+    }>;
+    useVirtualization?: boolean;
+    getFieldIcon?: (internalName: string, item: EFWTableItem) => React.ReactNode;
+    tableRef?: React.MutableRefObject<EFWTableRef>;
+    onItemsChange?: (newItems: EFWTableItem[]) => void;
+    onBeforeDelete?: (selectedItems: EFWTableItem[], selectedIndexes: number[]) => number[] | Promise<number[]>;
+    /** Botones que se renderizan siempre, independientemente de la selección. */
+    alwaysButtons?: EFWTableCommandBarButton[];
+    /** Botones que se renderizan solo cuando no hay filas seleccionadas. */
+    noSelectionButtons?: EFWTableCommandBarButton[];
+    /** Botones que se renderizan solo cuando hay exactamente una fila seleccionada. */
+    singleSelectionButtons?: EFWTableCommandBarButton[];
+    /** Botones que se renderizan cuando hay más de una fila seleccionada. */
+    multiSelectionButtons?: EFWTableCommandBarButton[];
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    addButtonConfig?: DefaultDrawerButtonProps;
+    updateButtonConfig?: DefaultDrawerButtonProps;
+    deleteButtonConfig?: DefaultDrawerButtonProps;
+    /**
+     * Callback que se ejecuta antes de agregar elementos
+     *
+     * @description Hook que permite interceptar y controlar la operación de agregar elementos.
+     * Se ejecuta antes de que los elementos se agreguen a la tabla local. Útil para validaciones,
+     * persistencia en BD, transformaciones de datos o control de flujo.
+     *
+     * @param {EFWTableItem[]} items - Elementos que se van a agregar (ya incluyen ID generado)
+     * @param {EFWTableMethods} tableMethods - Métodos de la tabla para operaciones adicionales
+     * @returns {Promise<OperationResult<EFWTableItem> | void>}
+     *   - `void`: Continúa con la operación normal de agregar
+     *   - `OperationResult`: Controla exactamente qué elementos se agregan basado en el resultado
+     *
+     * @example
+     * // Validación simple - devuelve void para continuar normal
+     * const beforeAddItems = async (items, tableMethods) => {
+     *   for (const item of items) {
+     *     if (!item.email) {
+     *       throw new Error('Email es requerido');
+     *     }
+     *   }
+     *   // No devuelve nada (void) = continúa operación normal
+     * };
+     *
+     * @example
+     * // Control total - guardar en BD y controlar resultado
+     * const beforeAddItems = async (items, tableMethods) => {
+     *   try {
+     *     const savedItems = await database.insertMany(items);
+     *     return {
+     *       successful: savedItems.map((item, index) => ({ index, item })),
+     *       failed: []
+     *     };
+     *   } catch (error) {
+     *     return {
+     *       successful: [],
+     *       failed: items.map((item, index) => ({ index, item, error: error.message }))
+     *     };
+     *   }
+     * };
+     *
+     * @example
+     * // Validación con algunos elementos válidos
+     * const beforeAddItems = async (items, tableMethods) => {
+     *   const existing = await tableMethods.getItems();
+     *   const valid = [];
+     *   const invalid = [];
+     *
+     *   items.forEach((item, index) => {
+     *     if (existing.some(e => e.email === item.email)) {
+     *       invalid.push({ index, item, error: 'Email ya existe' });
+     *     } else {
+     *       valid.push({ index, item });
+     *     }
+     *   });
+     *
+     *   if (invalid.length > 0) {
+     *     return { successful: valid, failed: invalid };
+     *   }
+     *   // Si todos son válidos, no devolver nada (void)
+     * };
+     */
+    beforeAddItems?: (items: EFWTableItem[], tableMethods: EFWTableMethods) => Promise<OperationResult<EFWTableItem> | void>;
+    /**
+     * Callback que se ejecuta antes de actualizar elementos
+     *
+     * @description Hook que permite interceptar y controlar las operaciones de actualización.
+     * Se ejecuta antes de que los cambios se apliquen a la tabla local. Útil para validaciones
+     * de permisos, persistencia en BD, auditoría o transformaciones de datos.
+     *
+     * @param {Array<{index: number, item: Partial<EFWTableItem>}>} items - Elementos a actualizar con sus índices
+     * @param {EFWTableMethods} tableMethods - Métodos de la tabla para operaciones adicionales
+     * @returns {Promise<OperationResult<EFWTableItem> | void>}
+     *   - `void`: Continúa con la operación normal de actualización
+     *   - `OperationResult`: Controla exactamente qué elementos se actualizan
+     *
+     * @example
+     * // Validación de permisos - devuelve void si todo OK
+     * const beforeUpdateItems = async (items, tableMethods) => {
+     *   const currentUser = getCurrentUser();
+     *   for (const { index, item } of items) {
+     *     const existing = tableMethods.getItem(index);
+     *     if (existing.ownerId !== currentUser.id) {
+     *       throw new Error('No tienes permisos para actualizar este elemento');
+     *     }
+     *   }
+     *   // Continúa operación normal
+     * };
+     *
+     * @example
+     * // Persistencia en BD con control granular
+     * const beforeUpdateItems = async (items, tableMethods) => {
+     *   const successful = [];
+     *   const failed = [];
+     *
+     *   for (const { index, item } of items) {
+     *     try {
+     *       const current = tableMethods.getItem(index);
+     *       const updated = await database.update(current.id, item);
+     *       successful.push({ index, item: { ...current, ...updated } });
+     *     } catch (error) {
+     *       failed.push({ index, item, error: error.message });
+     *     }
+     *   }
+     *
+     *   return { successful, failed };
+     * };
+     *
+     * @example
+     * // Auditoría de cambios
+     * const beforeUpdateItems = async (items, tableMethods) => {
+     *   const auditLog = items.map(({ index, item }) => ({
+     *     action: 'UPDATE',
+     *     index,
+     *     oldValue: tableMethods.getItem(index),
+     *     newValue: item,
+     *     timestamp: new Date(),
+     *     userId: getCurrentUser().id
+     *   }));
+     *
+     *   await auditService.log(auditLog);
+     *   // No devuelve nada = continúa operación normal
+     * };
+     */
+    beforeUpdateItems?: (items: {
+        index: number;
+        item: Partial<EFWTableItem>;
+    }[], tableMethods: EFWTableMethods) => Promise<OperationResult<EFWTableItem> | void>;
+    /**
+     * Callback que se ejecuta antes de eliminar elementos
+     *
+     * @description Hook que permite interceptar y controlar las operaciones de eliminación.
+     * Se ejecuta antes de que los elementos se eliminen de la tabla local. Útil para validar
+     * dependencias, hacer soft deletes, backup de datos o control de permisos.
+     *
+     * @param {Array<{index: number, item: Partial<EFWTableItem>}>} items - Elementos a eliminar con sus índices
+     * @param {EFWTableMethods} tableMethods - Métodos de la tabla para operaciones adicionales
+     * @returns {Promise<OperationResult<EFWTableItem> | void>}
+     *   - `void`: Continúa con la operación normal de eliminación
+     *   - `OperationResult`: Controla exactamente qué elementos se eliminan
+     *
+     * @example
+     * // Validación de dependencias - devuelve void si todo OK
+     * const beforeDeleteItems = async (items, tableMethods) => {
+     *   for (const { item } of items) {
+     *     const hasDependencies = await checkDependencies(item.id);
+     *     if (hasDependencies) {
+     *       throw new Error(`El elemento ${item.name} tiene dependencias y no puede eliminarse`);
+     *     }
+     *   }
+     *   // Continúa operación normal
+     * };
+     *
+     * @example
+     * // Soft delete en BD
+     * const beforeDeleteItems = async (items, tableMethods) => {
+     *   const successful = [];
+     *   const failed = [];
+     *
+     *   for (const { index, item } of items) {
+     *     try {
+     *       await database.softDelete(item.id);
+     *       successful.push({ index, item });
+     *     } catch (error) {
+     *       failed.push({ index, item, error: error.message });
+     *     }
+     *   }
+     *
+     *   return { successful, failed };
+     * };
+     *
+     * @example
+     * // Backup antes de eliminar con validación selectiva
+     * const beforeDeleteItems = async (items, tableMethods) => {
+     *   const backupable = [];
+     *   const protected = [];
+     *
+     *   for (const { index, item } of items) {
+     *     if (item.protected) {
+     *       protected.push({ index, item, error: 'Elemento protegido' });
+     *     } else {
+     *       await backupService.backup(item);
+     *       await database.delete(item.id);
+     *       backupable.push({ index, item });
+     *     }
+     *   }
+     *
+     *   if (protected.length > 0) {
+     *     return { successful: backupable, failed: protected };
+     *   }
+     *   // Si todos son eliminables, no devolver nada (void)
+     * };
+     *
+     * @example
+     * // Control de permisos con tabla relacionada
+     * const beforeDeleteItems = async (items, tableMethods) => {
+     *   const user = getCurrentUser();
+     *   const allowed = [];
+     *   const denied = [];
+     *
+     *   for (const { index, item } of items) {
+     *     if (user.role === 'admin' || item.ownerId === user.id) {
+     *       allowed.push({ index, item });
+     *     } else {
+     *       denied.push({ index, item, error: 'Sin permisos de eliminación' });
+     *     }
+     *   }
+     *
+     *   return { successful: allowed, failed: denied };
+     * };
+     */
+    beforeDeleteItems?: (items: {
+        index: number;
+        item: Partial<EFWTableItem>;
+    }[], tableMethods: EFWTableMethods) => Promise<OperationResult<EFWTableItem> | void>;
+    /**
+     * Renderers personalizados para tipos de campo.
+     * Si el renderer retorna null/undefined, se usará el renderer por defecto.
+     */
+    columnRenderers?: ColumnRenderers;
+    /** Si usar el renderer por defecto como fallback final (default: true) */
+    useDefaultRendererAsFallback?: boolean;
+}
+export interface CellRendererContext<T extends EFWFormFieldType> {
+    field: EFWFormFieldProps<T>;
+    value: EFWFormFieldValue<T>;
+    item: EFWTableItem;
+    rowIndex: number;
+    columnId: string;
+}
+export type CellRenderer<T extends EFWFormFieldType> = (context: CellRendererContext<T>) => React.ReactNode;
+export type Renderers = {
+    [K in EFWFormFieldType]?: CellRenderer<K>;
+};
+export type ColumnRenderers = {
+    [K in EFWFormFieldType]?: {
+        default?: CellRenderer<K>;
+        fields?: {
+            [fieldName: string]: CellRenderer<K>;
+        };
+    };
+};

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

@@ -0,0 +1,3 @@
+import { EFWTableBodyProps } from './EFWTableBody.types';
+
+export declare const EFWTableBody: ({ tableContainerRef, useVirtualization, enableSelection, itemSize, table, gridTemplateColumns, columnSizing, stickyColumnsInfo, onRowClick, }: EFWTableBodyProps) => React.ReactElement;

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

@@ -0,0 +1,75 @@
+import { jsxs as E, jsx as g } from "react/jsx-runtime";
+import { useEffect as f } from "react";
+import { useVirtualizer as F } from "@tanstack/react-virtual";
+import { EFWTableRow as R } from "../EFWTableRow/EFWTableRow.js";
+const S = (l) => {
+  f(() => {
+    const e = l.current;
+    if (!e) return;
+    let s = 0, d = !1, r = !1;
+    const c = () => {
+      cancelAnimationFrame(s), s = requestAnimationFrame(() => {
+        const i = e.scrollLeft > 0, a = e.scrollTop > 0;
+        i !== d && (e.classList.toggle("is-scrolling-x", i), d = i), a !== r && (e.classList.toggle("is-scrolling-y", a), r = a);
+      });
+    };
+    return e.addEventListener("scroll", c, { passive: !0 }), c(), () => {
+      e.removeEventListener("scroll", c), cancelAnimationFrame(s);
+    };
+  }, [l]);
+}, M = ({
+  tableContainerRef: l,
+  useVirtualization: e,
+  enableSelection: s = !0,
+  itemSize: d,
+  table: r,
+  gridTemplateColumns: c,
+  columnSizing: i,
+  stickyColumnsInfo: a,
+  onRowClick: h
+}) => {
+  const m = r.getRowModel().rows.length, w = m > 0;
+  S(w ? l : { current: null });
+  const o = e ? F({
+    count: m,
+    getScrollElement: () => l.current,
+    estimateSize: () => d,
+    measureElement: typeof window < "u" && navigator.userAgent.indexOf("Firefox") === -1 ? (t) => t?.getBoundingClientRect().height : void 0,
+    overscan: 10
+  }) : null;
+  f(() => {
+    !e || !o || requestAnimationFrame(() => {
+      try {
+        o.measure();
+      } catch (t) {
+        console.warn("Error al recalcular virtualizer:", t);
+      }
+    });
+  }, [m > 0, e, o]);
+  const n = o?.getVirtualItems() || [], v = o?.getTotalSize() || 0, u = n.length > 0 ? n[0].start : 0, p = n.length > 0 ? v - n[n.length - 1].end : 0, x = e ? n.map((t) => ({
+    virtualRow: t,
+    row: r.getRowModel().rows[t.index]
+  })) : r.getRowModel().rows.map((t) => ({ row: t, virtualRow: null }));
+  return /* @__PURE__ */ E("div", { className: "table-body", style: { fontSize: "12px", lineHeight: "16px" }, children: [
+    e && u > 0 && /* @__PURE__ */ g("div", { style: { height: u } }),
+    x.map(({ row: t, virtualRow: y }) => /* @__PURE__ */ g(
+      R,
+      {
+        row: t,
+        virtualRow: y,
+        rowVirtualizer: o,
+        useVirtualization: e,
+        enableSelection: s,
+        gridTemplateColumns: c,
+        columnSizing: i,
+        stickyColumnsInfo: a,
+        onRowClick: h
+      },
+      t.id
+    )),
+    e && p > 0 && /* @__PURE__ */ g("div", { style: { height: p } })
+  ] });
+};
+export {
+  M as EFWTableBody
+};

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

@@ -0,0 +1,18 @@
+import { Row, Table } from '@tanstack/react-table';
+import { EFWTableProps, EFWTableItem } from '../../EFWTable.types';
+
+export interface EFWTableBodyProps {
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    useVirtualization: boolean;
+    enableSelection?: boolean;
+    itemSize: number;
+    table: Table<EFWTableItem>;
+    gridTemplateColumns: string;
+    columnSizing: Record<string, number>;
+    fields: EFWTableProps['fields'];
+    stickyColumnsInfo: {
+        stickyColumns: string[];
+        stickyPositions: Record<string, number>;
+    };
+    onRowClick: (row: Row<EFWTableItem>, event?: React.MouseEvent) => void;
+}

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

@@ -0,0 +1,2 @@
+export { EFWTableBody } from './EFWTableBody';
+export type { EFWTableBodyProps } from './EFWTableBody.types';

package/dist/react-components/tables/EFWTable/components/EFWTableBody/index.js

@@ -0,0 +1,4 @@
+import { EFWTableBody as r } from "./EFWTableBody.js";
+export {
+  r as EFWTableBody
+};

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

@@ -0,0 +1,16 @@
+import { Cell } from '@tanstack/react-table';
+import { EFWTableItem } from '../../EFWTable.types';
+
+/**
+ * Componente para renderizar una celda individual.
+ * Separa la lógica de estilos y propiedades de celda para mayor claridad.
+ */
+export declare const EFWTableCell: ({ cell, columnSizing, stickyColumnsInfo, useVirtualization, }: {
+    cell: Cell<EFWTableItem, unknown>;
+    columnSizing: Record<string, number>;
+    stickyColumnsInfo: {
+        stickyColumns: string[];
+        stickyPositions: Record<string, number>;
+    };
+    useVirtualization: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as l } from "react/jsx-runtime";
+import { flexRender as u } from "@tanstack/react-table";
+import { COLS_MAX_WIDTH as a, COLS_MIN_WIDTH as p } from "../../EFWTable.js";
+const g = ({
+  cell: o,
+  columnSizing: e,
+  stickyColumnsInfo: n,
+  useVirtualization: r
+}) => {
+  const t = o.column.id === "select", i = n.stickyColumns.includes(o.column.id), c = n.stickyPositions[o.column.id] || 0, m = e[o.column.id] || o.column.getSize(), s = o.column.columnDef.minSize || p, d = o.column.columnDef.maxSize || a;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `table-cell ${i || t ? "sticky-column" : ""}`,
+      style: {
+        width: m,
+        minWidth: `${s}px`,
+        maxWidth: `${d}px`,
+        position: i || t ? "sticky" : "static",
+        left: i || t ? `${c}px` : "auto",
+        zIndex: i || t ? 1 : 0,
+        padding: t ? "0px" : "4px 8px",
+        whiteSpace: t ? "nowrap" : "pre-wrap",
+        wordWrap: t ? "normal" : "break-word",
+        verticalAlign: "top",
+        minHeight: r ? "32px" : "auto",
+        overflow: "hidden",
+        textAlign: t ? "center" : "left",
+        backgroundColor: "var(--current-row-bg)",
+        boxSizing: "border-box"
+      },
+      children: u(o.column.columnDef.cell, o.getContext())
+    }
+  );
+};
+export {
+  g as EFWTableCell
+};

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

@@ -0,0 +1,17 @@
+import { EFWTableCommandBarProps } from './EFWTableCommandBar.types';
+import { default as React } from 'react';
+
+/**
+ * Componente EFWTableCommandBar que renderiza botones dinámicamente basados en la selección de filas.
+ *
+ * @description
+ * - Evalúa la propiedad `enabled` de cada botón (boolean o función) para decidir si renderizarlo.
+ * - Combina botones "always" con botones específicos del escenario de selección.
+ * - Usa EFWGroupButton internamente para renderizar el grupo de botones filtrados.
+ * - Pasa { selectedRows, tableMethods } como onClickParams a todos los botones.
+ * - Optimizado con React.memo para evitar re-renders innecesarios.
+ *
+ * @param {EFWTableCommandBarProps} props - Propiedades del componente.
+ * @returns {JSX.Element|null} - El grupo de botones renderizados o null si no hay botones visibles.
+ */
+export declare const EFWTableCommandBar: React.FC<EFWTableCommandBarProps>;

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

@@ -0,0 +1,105 @@
+import { jsx as s, jsxs as T } from "react/jsx-runtime";
+import r, { useCallback as h } from "react";
+import { CardHeader as N, tokens as W, Button as _ } from "@fluentui/react-components";
+import { Dismiss20Regular as A } from "@fluentui/react-icons";
+import { EFWGroupButton as P } from "../../../../buttons/EFWGroupButton/EFWGroupButton.js";
+const l = [], $ = r.memo(({
+  alwaysButtons: m = l,
+  noSelectionButtons: d = l,
+  singleSelectionButtons: u = l,
+  multiSelectionButtons: f = l,
+  selectedRows: o = [],
+  tableMethods: n,
+  containerStyle: k,
+  gap: g,
+  className: y
+}) => {
+  const t = r.useMemo(() => o.length, [o]), i = r.useCallback(
+    (c) => c.filter((e) => e.enabled === void 0 ? !0 : typeof e.enabled == "boolean" ? e.enabled : e.enabled(o, n)).map(({ enabled: e, ...p }) => p),
+    [o, n]
+  ), B = h(() => {
+    n.deselectAllRows();
+  }, [n]), b = r.useMemo(
+    () => i(m),
+    [m, i]
+  ), x = r.useMemo(() => {
+    const c = () => t === 0 ? {
+      buttons: d,
+      // Botones disponibles cuando no hay selección
+      prefix: "no-selected-button"
+      // Prefijo para IDs: "no-selected-button-0", "no-selected-button-1", etc.
+    } : t === 1 ? {
+      buttons: u,
+      // Botones disponibles para selección única
+      prefix: "one-selected-button"
+      // Prefijo para IDs: "one-selected-button-0", "one-selected-button-1", etc.
+    } : {
+      buttons: f,
+      // Botones disponibles para selección múltiple
+      prefix: "many-selected-button"
+      // Prefijo para IDs: "many-selected-button-0", "many-selected-button-1", etc.
+    }, { buttons: e, prefix: p } = c(), E = e.map(
+      (a, F) => a.props.id ? a : {
+        ...a,
+        props: {
+          ...a.props,
+          id: `${p}-${F}`
+        }
+      }
+    );
+    return i(E);
+  }, [
+    t,
+    // Número de elementos seleccionados en la tabla/lista
+    d,
+    // Array de botones para mostrar cuando no hay selección
+    u,
+    // Array de botones para mostrar con selección única
+    f,
+    // Array de botones para mostrar con selección múltiple  
+    i
+    // Función que determina qué botones están habilitados
+  ]), C = r.useMemo(
+    () => [...b, ...x],
+    [b, x]
+  );
+  return /* @__PURE__ */ s(
+    N,
+    {
+      style: {
+        padding: "4px 8px 3px",
+        borderBottom: `1px solid ${W.colorNeutralStroke1}`,
+        transition: "background-color 0.2s ease"
+      },
+      header: t > 0 ? /* @__PURE__ */ T(
+        _,
+        {
+          appearance: "subtle",
+          icon: /* @__PURE__ */ s(A, {}),
+          onClick: B,
+          title: "Limpiar selección",
+          iconPosition: "after",
+          children: [
+            "Seleccionados (",
+            t,
+            ")"
+          ]
+        }
+      ) : /* @__PURE__ */ s("div", { style: { height: 32 } }),
+      action: C.length > 0 ? /* @__PURE__ */ s(
+        P,
+        {
+          buttons: C,
+          onClickParams: { selectedRows: o, tableMethods: n },
+          style: k,
+          gap: g,
+          className: y
+        }
+      ) : null
+    }
+  );
+});
+$.displayName = "EFWTableCommandBar";
+export {
+  $ as EFWTableCommandBar
+};