@m4l/components 9.4.6 → 9.4.7

package/components/{DataGrid/subcomponents/Cards/subcomponents/LazyLoadCard/index.js → datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/LazyLoadCard.js}

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { I as IntersectCard } from "../IntersectCard/index.js";
+import { I as IntersectCard } from "./subcomponents/IntersectCard/IntersectCard.js";
 const isIntersectionObserverAvailable = () => {
   return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
 };

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/LazyLoadCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LazyLoadCard';
+export * from './types';

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/index.js

@@ -0,0 +1 @@
+

package/components/{DataGrid/subcomponents/Cards/subcomponents/IntersectCard/index.d.ts → datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/IntersectCard.d.ts}

@@ -1,4 +1,4 @@
-import { IntersectCardProps } from '../../types';
+import { IntersectCardProps } from './types';
 /**
  * Componente centinela que detecta cuando una card debe ser renderizada.
  *

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/IntersectCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IntersectCard';
+export * from './types';

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Props para el componente IntersectCard
+ */
+export interface IntersectCardProps {
+    /**
+     * Función callback que se ejecuta cuando el elemento entra en el viewport.
+     * Recibe true cuando el elemento es visible.
+     * @param visible - Estado de visibilidad del elemento
+     */
+    setIsVisible: (visible: boolean) => void;
+    /**
+     * Distancia en píxeles desde el borde del viewport donde se activa la detección.
+     * Un valor de 100 significa que el elemento se considerará visible cuando esté
+     * a 100px o menos del área visible de la pantalla.
+     * @default 100
+     */
+    threshold: number;
+    /**
+     * Altura mínima del placeholder en píxeles
+     * @default '120px'
+     */
+    minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
+}
+/**
+ * Tipo extendido para el elemento div que incluye el método setIsVisible.
+ * Este método se adjunta dinámicamente al elemento DOM para que el Observer
+ * pueda comunicarse con el componente React.
+ */
+export type IntersectCardRef = HTMLDivElement & {
+    setIsVisible?: (visible: boolean) => void;
+};

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/subcomponents/IntersectCard/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+/**
+ * Props para el componente LazyLoadCard
+ */
+export interface LazyLoadCardProps {
+    /**
+     * Contenido a renderizar cuando la card sea visible
+     */
+    children: ReactNode;
+    /**
+     * Habilita o deshabilita el IntersectionObserver.
+     * Si es false, el contenido se renderiza inmediatamente.
+     * @default true
+     */
+    enableIntersectionObserver?: boolean;
+    /**
+     * Distancia en píxeles desde el borde del viewport donde se activa la detección.
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * Altura mínima del placeholder en píxeles
+     * @default 120
+     */
+    minHeight?: number;
+    /**
+     * Clave de la fila
+     */
+    rowKey?: string | number;
+}

package/components/datagrids/views/CardsView/subcomponents/CardRow/subcomponents/LazyLoadCard/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/CardRow/types.d.ts

@@ -0,0 +1,72 @@
+import { Column, RowsChangeData } from 'react-data-grid';
+import { CardsViewConfig, RowKey } from '../../../../types';
+import { Maybe } from '@m4l/core';
+/**
+ * Props para el componente CardRow
+ */
+export interface CardRowProps<TRow, TKey extends RowKey = RowKey> {
+    /**
+     * Fila que se mostrará en la tarjeta
+     */
+    row: TRow;
+    /**
+     * Array completo de todas las filas (necesario para reconstruir el array al editar)
+     */
+    rows: readonly TRow[];
+    /**
+     * Índice de la fila actual en el array de filas
+     */
+    rowIndex: number;
+    /**
+     * Columnas que se mostrarán en la tarjeta (procesadas, filtradas por visibilidad)
+     */
+    columns: readonly Column<TRow, any>[];
+    /**
+     * Columnas originales sin filtrar (para el modal de detalle)
+     */
+    originalColumns: readonly Column<TRow, any>[];
+    /**
+     * Función que devuelve la clave de la fila
+     */
+    rowKeyGetter: (row: TRow) => TKey;
+    /**
+     * Filas seleccionadas actualmente
+     */
+    selectedRows?: ReadonlySet<TKey>;
+    /**
+     * Función para manejar el cambio de filas seleccionadas
+     */
+    onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
+    /**
+     * Función para manejar cambios en las filas (para editores)
+     */
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
+    /**
+     * Indica si se debe renderizar el contenido personalizado de la tarjeta
+     */
+    customRender?: CardsViewConfig<TRow>['customRender'];
+    /**
+     * Altura mínima de la tarjeta
+     */
+    minHeight: number;
+    /**
+     * Indica si la fila está chequeada
+     */
+    isChecked: boolean;
+    /**
+     * Indica si se debe mostrar el checkbox para checkedRows
+     */
+    showCheckbox: boolean;
+    /**
+     * Filas chequeadas actualmente
+     */
+    checkedRows?: ReadonlySet<TKey>;
+    /**
+     * Función para manejar el cambio de filas chequeadas
+     */
+    onCheckedRowsChange?: (mapRowsChecked: ReadonlySet<TKey>) => void;
+    /**
+     * Función para abrir el modal de detalle de la fila
+     */
+    onOpenDetail: (row: TRow) => void;
+}

package/components/datagrids/views/CardsView/subcomponents/CardRow/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/Settings/Settings.d.ts

@@ -0,0 +1,6 @@
+import { SettingsProps } from './types';
+/**
+ * Componente que renderiza el icono de configuración para CardsView.
+ * Abre el modal de configuración de columnas específico para la vista de cards.
+ */
+export declare function Settings(props: SettingsProps): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/Settings/index.js → datagrids/views/CardsView/subcomponents/Settings/Settings.js}

@@ -1,23 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { u as useModalSettingsCards } from "../hooks/useModalSettingsCards/index.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { u as useModalSettings } from "./hooks/useModalSettings/useModalSettings.js";
 function Settings(props) {
   const { columns } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { size, viewMode } = useDataGrid();
+  const { size } = useDataGrid();
   const modalSettings = useModalSettings(size, columns);
-  const modalSettingsCards = useModalSettingsCards(size, columns);
   const { getLabel } = useModuleDictionary();
   const handleClick = () => {
-    if (viewMode === "table") {
-      modalSettings();
-    } else {
-      modalSettingsCards();
-    }
+    modalSettings();
   };
   return /* @__PURE__ */ jsx(
     IconButton,

package/components/datagrids/views/CardsView/subcomponents/Settings/Settings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useModalSettings';
+export * from './types';

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.d.ts

@@ -0,0 +1,7 @@
+import { GridProps } from '../../../../../../types';
+import { Column } from 'react-data-grid';
+/**
+ * Hook que renderiza el modal de configuración de las columnas
+ * de la vista de cards
+ */
+export declare const useModalSettings: (size: GridProps<unknown, unknown>["size"], columns: readonly Column<any, any>[]) => () => void;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettingsCards/index.js → datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js}

@@ -2,19 +2,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useIsMobile } from "@m4l/graphics";
 import { useRef, useCallback } from "react";
-import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
-import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
-import { a as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
-import { p as pathIcons } from "../../../../../icons.js";
-import { C as ColumnsConfigCards } from "../../Settings/subcomponents/ColumnsConfigCards/index.js";
-import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";
-import { A as ActionCancel } from "../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
-import { A as ActionIntro } from "../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
-const useModalSettingsCards = (size, columns) => {
+import { u as useModal } from "../../../../../../../../hooks/useModal/index.js";
+import { n as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../../../../icons.js";
+import { C as ColumnsConfig } from "../../subcomponents/ColumnsConfig/ColumnsConfig.js";
+import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/useDataGrid.js";
+import { W as WindowBase } from "../../../../../../../WindowBase/WindowBase.js";
+import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
+const useModalSettings = (size, columns) => {
   const { openModal, closeModal } = useModal();
   const { getConfigColumns, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
-  const columnsConfigCards = getConfigColumns("cards");
+  const columnsConfig = getConfigColumns("cards");
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
@@ -46,12 +46,12 @@ const useModalSettingsCards = (size, columns) => {
           emergeType: "modal",
           children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { classes: classes?.contentModalSetting, children: [
             /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
-              ColumnsConfigCards,
+              ColumnsConfig,
               {
                 ref,
                 rowHeight: currentRowHeight,
-                columnsConfigCards,
-                onChangeColumnsConfigCards: handleColumnsSetting,
+                columnsConfig,
+                onChangeColumnsConfig: handleColumnsSetting,
                 onCloseSettings,
                 classes,
                 size,
@@ -70,5 +70,5 @@ const useModalSettingsCards = (size, columns) => {
   return onClickSettings;
 };
 export {
-  useModalSettingsCards as u
+  useModalSettings as u
 };

package/components/datagrids/views/CardsView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/CardsView/subcomponents/Settings/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Settings';
+export * from './types';

package/components/datagrids/views/CardsView/subcomponents/Settings/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.d.ts

@@ -0,0 +1,10 @@
+import { ColumnAlign } from '../../../../../../types';
+import { ColumnsConfigRef, ConfigProps } from './types';
+/**
+ * función encargada de definir la clase css de alineación
+ */
+export declare const getAlignClass: (align: ColumnAlign) => {
+    cellClass: string;
+    headerCellClass: string;
+};
+export declare const ColumnsConfig: import('react').ForwardRefExoticComponent<ConfigProps & import('react').RefAttributes<ColumnsConfigRef>>;

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/index.js → datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js}

@@ -4,11 +4,11 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { t as ColumnsConfigWrapperStyled, u as ColumnsConfigDataGridStyled, v as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, w as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as ColumnsConfigSelColumnsStyled, y as TableWrapperDataGridStyled, z as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
-function getRowsFromColumnsConfigCards(columnsConfigCards, columns) {
-  return columnsConfigCards.filter((cConfig) => !cConfig.hidden).map(
+function getRowsFromColumnsConfig(columnsConfig, columns) {
+  return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
     (cConfig) => ({
       key: cConfig.key,
       name: columns?.find((c) => c.key === cConfig.key)?.name ?? "",
@@ -27,13 +27,13 @@ const getAlignClass = (align) => {
     headerCellClass: cellClass
   };
 };
-const ColumnsConfigCards = forwardRef(
+const ColumnsConfig = forwardRef(
   (props, ref) => {
     const refdata_grid = useRef(null);
     const {
       onCloseSettings,
-      columnsConfigCards,
-      onChangeColumnsConfigCards,
+      columnsConfig,
+      onChangeColumnsConfig,
       rowHeight,
       classes,
       size,
@@ -42,7 +42,7 @@ const ColumnsConfigCards = forwardRef(
     const { getLabel } = useModuleDictionary();
     const [isInit, setIsInit] = useState(true);
     const [rows, setRows] = useState(
-      getRowsFromColumnsConfigCards(columnsConfigCards, columns)
+      getRowsFromColumnsConfig(columnsConfig, columns)
     );
     const [selRows, setSelRows] = useState(
       () => /* @__PURE__ */ new Set()
@@ -100,10 +100,10 @@ const ColumnsConfigCards = forwardRef(
     };
     useEffect(() => {
       if (isInit === false) {
-        setRows(getRowsFromColumnsConfigCards(columnsConfigCards, columns));
+        setRows(getRowsFromColumnsConfig(columnsConfig, columns));
       }
       setIsInit(false);
-    }, [columnsConfigCards]);
+    }, [columnsConfig]);
     const rowSelectedIndex = useMemo(() => {
       let rowIndex = -1;
       if (selRows.size !== 1) {
@@ -163,21 +163,21 @@ const ColumnsConfigCards = forwardRef(
       if (rowIndexFinded > -1) {
         return rowIndexFinded;
       }
-      return columnsConfigCards.findIndex(
-        (columnConfigCards) => columnConfigCards.key === column.key
+      return columnsConfig.findIndex(
+        (columnConfig) => columnConfig.key === column.key
       );
     };
     const handleIntro = () => {
-      const newColumnsConfig = columnsConfigCards.map((columnConfigCards) => {
-        const newColumnConfig = { ...columnConfigCards };
-        if (!columnConfigCards.hidden) {
-          const columnConfigRow = getColumnConfigByKey(columnConfigCards.key);
+      const newColumnsConfig = columnsConfig.map((columnConfig) => {
+        const newColumnConfig = { ...columnConfig };
+        if (!columnConfig.hidden) {
+          const columnConfigRow = getColumnConfigByKey(columnConfig.key);
           if (columnConfigRow) {
             newColumnConfig.visible = columnConfigRow.visible;
             newColumnConfig.showTitle = columnConfigRow.showTitle;
           }
           const rowIndex = rows.findIndex(
-            (row) => row.key === columnConfigCards.key
+            (row) => row.key === columnConfig.key
           );
           if (rowIndex > -1) {
             newColumnConfig.index = rowIndex;
@@ -185,7 +185,7 @@ const ColumnsConfigCards = forwardRef(
         }
         return newColumnConfig;
       }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
-      onChangeColumnsConfigCards(newColumnsConfig);
+      onChangeColumnsConfig(newColumnsConfig);
       onCloseSettings();
     };
     const onInternalSelectedRowsChange = () => {
@@ -298,7 +298,7 @@ const ColumnsConfigCards = forwardRef(
     ] });
   }
 );
-ColumnsConfigCards.displayName = "ColumnsConfigCards";
+ColumnsConfig.displayName = "ColumnsConfig";
 export {
-  ColumnsConfigCards as C
+  ColumnsConfig as C
 };

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ColumnsConfig';
+export * from './types';

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -0,0 +1 @@
+

package/components/{DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards → datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig}/types.d.ts

@@ -19,8 +19,8 @@ export type ColumnsConfigRef = {
 export interface ConfigProps {
     onCloseSettings: () => void;
     columns: readonly Column<any, any>[];
-    columnsConfigCards: IViewConfig[];
-    onChangeColumnsConfigCards: (newColumnsConfigCards: IViewConfig[]) => void;
+    columnsConfig: IViewConfig[];
+    onChangeColumnsConfig: (newColumnsConfig: IViewConfig[]) => void;
     rowHeight: number;
     classes: DataGridContextProps<unknown, unknown>['classes'];
     size: GridProps<unknown, unknown>['size'];

package/components/datagrids/views/CardsView/subcomponents/Settings/subcomponents/ColumnsConfig/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/subcomponents/Settings/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/CardsView/types.d.ts

@@ -0,0 +1,18 @@
+import { GridProps, RowKey } from '../../types';
+/**
+ * Props para el componente CardsView
+ */
+export type CardsViewProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> = GridProps<TRow, TSummaryRow, TKey>;
+/**
+ * Props para el helper calculateCardHeight
+ */
+export interface CalculateCardHeightProps {
+    /**
+     * Número de columnas visibles en la card
+     */
+    visibleColumnsCount: number;
+    /**
+     * Altura mínima personalizada (opcional, para customRender)
+     */
+    customMinHeight?: number;
+}

package/components/datagrids/views/CardsView/types.js

@@ -0,0 +1 @@
+

package/components/{DataGrid/subcomponents/Table/index.d.ts → datagrids/views/TableView/TableView.d.ts}

@@ -4,4 +4,4 @@ import { GridProps, RowKey } from '../../types';
  * Componente que renderiza la tabla con las filas y columnas
  * Acepta todos los props de DataGrid y prioriza las configuraciones personalizadas
  */
-export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey> & Omit<DataGridProps<TRow, TSummaryRow>, keyof GridProps<TRow, TSummaryRow, TKey>>): import("react/jsx-runtime").JSX.Element;
+export declare function TableView<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey> & Omit<DataGridProps<TRow, TSummaryRow>, keyof GridProps<TRow, TSummaryRow, TKey>>): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/subcomponents/Table/index.js → datagrids/views/TableView/TableView.js}

@@ -3,15 +3,15 @@ import { useMemo, useState, useRef, useEffect } from "react";
 import DataGrid from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter.js";
-import { a as filterHeight } from "./subcomponents/SelectColumn.js";
-import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
-import { u as useFilters } from "../../hooks/useFilters.js";
-import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { B as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
-import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
+import { B as TableContainerStyled, y as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows/useSortColumnsRows.js";
+import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions/useHeaderMenuActions.js";
+import { f as filterHeight } from "./subcomponents/SelectColumn/SelectColumn.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
-function Table(props) {
+import { u as useFilters } from "../../hooks/shared/useFilters/useFilters.js";
+import { u as useDataGrid } from "../../hooks/shared/useDataGrid/useDataGrid.js";
+import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter/CheckboxFormatter.js";
+function TableView(props) {
   const {
     columns,
     rows,
@@ -194,5 +194,5 @@ function Table(props) {
   ) });
 }
 export {
-  Table as T
+  TableView as T
 };

package/components/datagrids/views/TableView/TableView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/{DataGrid/subcomponents/Table/hooks → datagrids/views/TableView/helpers/getDragHeaderRenderer}/getDragHeaderRenderer.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { D as DraggableHeaderRenderer } from "../subcomponents/DraggableHeaderRenderer.js";
+import { D as DraggableHeaderRenderer } from "../../subcomponents/DraggableHeaderRenderer/DraggableHeaderRenderer.js";
 const getDragHeaderRenderer = (handleColumnsReorder, options) => {
   function HeaderRenderer(props) {
     return /* @__PURE__ */ jsx(

package/components/datagrids/views/TableView/helpers/getDragHeaderRenderer/getDragHeaderRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/TableView/helpers/getDragHeaderRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from './getDragHeaderRenderer';

package/components/datagrids/views/TableView/helpers/getDragHeaderRenderer/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/helpers/index.d.ts

@@ -0,0 +1 @@
+export { getDragHeaderRenderer } from './getDragHeaderRenderer';

package/components/datagrids/views/TableView/helpers/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/hooks/useFocusRef/index.d.ts

@@ -0,0 +1 @@
+export * from './useFocusRef';

package/components/datagrids/views/TableView/hooks/useFocusRef/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/hooks/useFocusRef/useFocusRef.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Hook para manejar el foco de elementos HTML/SVG en la vista de tabla.
+ *
+ * Este hook gestiona automáticamente el foco de un elemento cuando está seleccionado,
+ * útil para la navegación por teclado en celdas del DataGrid.
+ * @template T - Tipo del elemento HTML o SVG que recibirá el foco
+ * @param isSelected - Indica si el elemento está actualmente seleccionado
+ * @returns Objeto con:
+ *   - `ref`: Referencia React para asignar al elemento
+ *   - `tabIndex`: Valor de tabIndex (0 si seleccionado, -1 si no)
+ * @example
+ * ```tsx
+ * const { ref, tabIndex } = useFocusRef<HTMLDivElement>(isRowSelected);
+ * return <div ref={ref} tabIndex={tabIndex}>Contenido</div>;
+ * ```
+ */
+export declare function useFocusRef<T extends HTMLOrSVGElement>(isSelected: boolean): {
+    ref: import('react').RefObject<T>;
+    tabIndex: number;
+};

package/components/datagrids/views/TableView/hooks/useFocusRef/useFocusRef.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/TableView/hooks/useHeaderMenuActions/index.d.ts

@@ -0,0 +1 @@
+export * from './useHeaderMenuActions';

package/components/datagrids/views/TableView/hooks/useHeaderMenuActions/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/hooks/useHeaderMenuActions/useHeaderMenuActions.d.ts

@@ -0,0 +1,27 @@
+import { Column, SortColumn } from 'react-data-grid';
+import { MenuAction } from '../../subcomponents/HeaderRenderClick/types';
+/**
+ * Hook que genera las acciones del menú contextual del header de una columna en TableView.
+ *
+ * Proporciona acciones para:
+ * - Ordenamiento (ASC/DESC) tanto local como externo
+ * - Filtrado externo
+ * - Congelar/descongelar columnas
+ * - Ocultar columnas
+ * @template TRow - Tipo de datos de la fila
+ * @template TSummaryRow - Tipo de datos de la fila de resumen
+ * @param columnKey - Key de la columna actual (null si no hay columna seleccionada)
+ * @param finalColumns - Array de columnas del DataGrid
+ * @param defaultSortable - Indica si las columnas son ordenables por defecto
+ * @param handleSortFromPopover - Función opcional para manejar el sort desde un popover
+ * @returns Array de MenuAction con las acciones disponibles para el header
+ * @example
+ * ```tsx
+ * const actions = useHeaderMenuActions<MyRow, MySummary>(
+ *   'columnName',
+ *   columns,
+ *   true
+ * );
+ * ```
+ */
+export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean, handleSortFromPopover?: (newSortColumns: SortColumn[]) => void): MenuAction[];

package/components/{DataGrid/subcomponents/Table/hooks → datagrids/views/TableView/hooks/useHeaderMenuActions}/useHeaderMenuActions.js

@@ -1,8 +1,8 @@
 import { useMemo, useCallback } from "react";
-import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { D as DICTIONARY } from "../../../dictionary.js";
-import { p as pathIcons } from "../../../icons.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSortFromPopover) {
   const {
     columnsConfig,