@m4l/components 9.4.1 → 9.4.2-JT11122025.beta.2

package/components/DataGrid/hooks/useChangeColumnsConfig/useChangeColumnsConfig.js

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+import { s as saveViewConfig } from "../../helpers/saveViewConfig/saveViewConfig.js";
+import { g as getViewSuffix } from "../../helpers/getViewSuffix/getViewSuffix.js";
+const useChangeColumnsConfig = ({
+  id,
+  onChangeConfig,
+  updateConfigColumns
+}) => {
+  const onChangeColumnsConfig = useCallback(
+    (viewModeParam, newConfig) => {
+      saveViewConfig(
+        id,
+        getViewSuffix(viewModeParam),
+        newConfig,
+        onChangeConfig
+      );
+      updateConfigColumns(viewModeParam, newConfig);
+    },
+    [id, onChangeConfig, updateConfigColumns]
+  );
+  return {
+    onChangeColumnsConfig
+  };
+};
+export {
+  useChangeColumnsConfig as u
+};

package/components/DataGrid/hooks/useChangeColumnsConfig/useChangeColumnsConfig.test.d.ts

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

package/components/DataGrid/hooks/useChangeColumnsOrder/index.d.ts

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

package/components/DataGrid/hooks/useChangeColumnsOrder/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/hooks/useChangeColumnsOrder/useChangeColumnsOrder.d.ts

@@ -0,0 +1,10 @@
+import { UseChangeColumnsOrderParams, UseChangeColumnsOrderReturn } from '../../types.hooks';
+/**
+ * Hook para manejar el cambio de orden de columnas.
+ *
+ * Reordena las columnas y llama a onChangeColumnsConfig para persistir.
+ * @param getConfigColumns Función para obtener la configuración de columnas
+ * @param onChangeColumnsConfig Función para cambiar la configuración de columnas
+ * @returns Función para cambiar el orden de columnas
+ */
+export declare const useChangeColumnsOrder: ({ getConfigColumns, onChangeColumnsConfig, }: UseChangeColumnsOrderParams) => UseChangeColumnsOrderReturn;

package/components/DataGrid/hooks/useChangeColumnsOrder/useChangeColumnsOrder.js

@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+const useChangeColumnsOrder = ({
+  getConfigColumns,
+  onChangeColumnsConfig
+}) => {
+  const onChangeColumnsOrder = useCallback(
+    (viewModeParam, sourceKey, targetKey) => {
+      if (sourceKey === targetKey) {
+        return;
+      }
+      const currentConfig = getConfigColumns(viewModeParam);
+      const sourceColumnIndex = currentConfig.findIndex(
+        (c) => c.key === sourceKey
+      );
+      const targetColumnIndex = currentConfig.findIndex(
+        (c) => c.key === targetKey
+      );
+      const reorderedConfig = [...currentConfig];
+      reorderedConfig.splice(
+        targetColumnIndex,
+        0,
+        reorderedConfig.splice(sourceColumnIndex, 1)[0]
+      );
+      onChangeColumnsConfig(viewModeParam, reorderedConfig);
+    },
+    [getConfigColumns, onChangeColumnsConfig]
+  );
+  return {
+    onChangeColumnsOrder
+  };
+};
+export {
+  useChangeColumnsOrder as u
+};

package/components/DataGrid/hooks/useChangeColumnsOrder/useChangeColumnsOrder.test.d.ts

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

package/components/DataGrid/hooks/useColumnsWidth/index.d.ts

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

package/components/DataGrid/hooks/useColumnsWidth/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/hooks/useColumnsWidth/useColumnsWidth.d.ts

@@ -0,0 +1,11 @@
+import { UseColumnsWidthParams, UseColumnsWidthReturn } from '../../types.hooks';
+/**
+ * Hook para manejar el estado del ancho de las columnas del DataGrid.
+ *
+ * Maneja:
+ * - Estado del ancho de cada columna
+ * - Guardado con debounce de 500ms al cambiar el ancho
+ * @param params - Parámetros del hook
+ * @returns Estado y función para cambiar el ancho de columnas
+ */
+export declare const useColumnsWidth: ({ id, onChangeConfig, }: UseColumnsWidthParams) => UseColumnsWidthReturn;

package/components/DataGrid/hooks/useColumnsWidth/useColumnsWidth.js

@@ -0,0 +1,29 @@
+import { useState, useRef, useCallback } from "react";
+import { s as saveColumnsWidth } from "../../helpers/saveColumnsWidth/saveColumnsWidth.js";
+const useColumnsWidth = ({
+  id,
+  onChangeConfig
+}) => {
+  const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
+  const timerRef = useRef(null);
+  const onChangeColumnWidth = useCallback(
+    (columnKey, width) => {
+      columnsWidths.set(columnKey, Math.round(width));
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        saveColumnsWidth(id, columnsWidths, onChangeConfig);
+      }, 500);
+    },
+    [id, columnsWidths, onChangeConfig]
+  );
+  return {
+    columnsWidths,
+    setColumnsWidths,
+    onChangeColumnWidth
+  };
+};
+export {
+  useColumnsWidth as u
+};

package/components/DataGrid/hooks/useColumnsWidth/useColumnsWidth.test.d.ts

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

package/components/DataGrid/hooks/useRowHeight/index.d.ts

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

package/components/DataGrid/hooks/useRowHeight/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/hooks/useRowHeight/useRowHeight.d.ts

@@ -0,0 +1,28 @@
+import { UseRowHeightParams, UseRowHeightReturn } from '../../types.hooks';
+/**
+ * Hook para manejar el estado de la altura de las filas del DataGrid.
+ *
+ * Soporta dos modos:
+ * - **Modo fijo**: rowHeights y rowHeaderHeights son números fijos
+ * - **Modo variable**: rowHeights y rowHeaderHeights son arrays de 3 elementos [compact, standard, confortable]
+ * @param params - Parámetros del hook
+ * @returns Estado actual y función para cambiar el variant
+ * @throws Error si rowHeights y rowHeaderHeights no son del mismo tipo
+ * @throws Error si los arrays no tienen exactamente 3 elementos
+ * @throws Error si se intenta cambiar el variant en modo fijo
+ * @example
+ * // Modo variable (permite cambiar variant)
+ * const { currentRowHeightVariant, setRowHeightVariant } = useRowHeight({
+ *   rowHeights: [32, 40, 48],
+ *   rowHeaderHeights: [36, 44, 52],
+ *   initialRowHeightVariant: 'standard',
+ * });
+ *
+ * // Modo fijo (altura constante)
+ * const { currentRowHeightVariant } = useRowHeight({
+ *   rowHeights: 40,
+ *   rowHeaderHeights: 44,
+ *   initialRowHeightVariant: 'standard',
+ * });
+ */
+export declare const useRowHeight: ({ rowHeights, rowHeaderHeights, initialRowHeightVariant, }: UseRowHeightParams) => UseRowHeightReturn;

package/components/DataGrid/hooks/useRowHeight/useRowHeight.js

@@ -0,0 +1,51 @@
+import { useState, useCallback } from "react";
+import { g as getIndexRowHeightVariant } from "../../helpers/getIndexRowHeightVariant/getIndexRowHeightVariant.js";
+const useRowHeight = ({
+  rowHeights,
+  rowHeaderHeights,
+  initialRowHeightVariant
+}) => {
+  const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState(() => {
+    if (typeof rowHeights !== typeof rowHeaderHeights) {
+      throw new Error("Must be same type rowheights and rowHeaderTypes");
+    }
+    if (typeof rowHeights === "number" && typeof rowHeaderHeights === "number") {
+      return {
+        rowHVariant: "compact",
+        rowHeight: rowHeights,
+        rowHeaderHeight: rowHeaderHeights
+      };
+    }
+    if (typeof rowHeights !== "number" && rowHeights.length !== 3) {
+      throw new Error("Must be 3 heights");
+    }
+    if (typeof rowHeaderHeights !== "number" && rowHeaderHeights.length !== 3) {
+      throw new Error("Must be 3 HeaderHeights");
+    }
+    return {
+      rowHVariant: initialRowHeightVariant,
+      rowHeight: typeof rowHeights !== "number" ? rowHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeights,
+      rowHeaderHeight: typeof rowHeaderHeights !== "number" ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeaderHeights
+    };
+  });
+  const setRowHeightVariant = useCallback(
+    (newVariant) => {
+      if (typeof rowHeights === "number" || typeof rowHeaderHeights === "number") {
+        throw new Error("Only use setCurrentRowHeight with vector rowHeights");
+      }
+      setCurrentRowHeightVariant({
+        rowHVariant: newVariant,
+        rowHeight: rowHeights[getIndexRowHeightVariant(newVariant)],
+        rowHeaderHeight: rowHeaderHeights[getIndexRowHeightVariant(newVariant)]
+      });
+    },
+    [rowHeights, rowHeaderHeights]
+  );
+  return {
+    currentRowHeightVariant,
+    setRowHeightVariant
+  };
+};
+export {
+  useRowHeight as u
+};

package/components/DataGrid/hooks/useRowHeight/useRowHeight.test.d.ts

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

package/components/DataGrid/hooks/useViewConfig/index.d.ts

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

package/components/DataGrid/hooks/useViewConfig/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/hooks/useViewConfig/useViewConfig.d.ts

@@ -0,0 +1,9 @@
+import { UseViewConfigReturn } from '../../types.hooks';
+/**
+ * Hook para manejar el estado de la configuración de columnas por vista.
+ *
+ * Maneja un estado genérico unificado para las configuraciones de TODAS las vistas
+ * (table, cards, etc).
+ * @returns Estado y funciones para manejar la configuración de vistas
+ */
+export declare const useViewConfig: () => UseViewConfigReturn;

package/components/DataGrid/hooks/useViewConfig/useViewConfig.js

@@ -0,0 +1,30 @@
+import { useState, useCallback } from "react";
+const useViewConfig = () => {
+  const [viewConfig, setViewConfig] = useState(() => ({
+    table: [],
+    cards: []
+  }));
+  const getConfigColumns = useCallback(
+    (viewModeParam) => {
+      return viewConfig[viewModeParam];
+    },
+    [viewConfig]
+  );
+  const updateConfigColumns = useCallback(
+    (viewModeParam, config) => {
+      setViewConfig((prev) => ({
+        ...prev,
+        [viewModeParam]: config
+      }));
+    },
+    []
+  );
+  return {
+    viewConfig,
+    getConfigColumns,
+    updateConfigColumns
+  };
+};
+export {
+  useViewConfig as u
+};

package/components/DataGrid/hooks/useViewConfig/useViewConfig.test.d.ts

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

package/components/DataGrid/hooks/useViewMode/index.d.ts

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

package/components/DataGrid/hooks/useViewMode/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/hooks/useViewMode/useViewMode.d.ts

@@ -0,0 +1,31 @@
+import { UseViewModeParams, UseViewModeReturn } from '../../types.hooks';
+/**
+ * Hook para manejar el estado del modo de visualización (table/cards).
+ *
+ * ## Inicialización del viewMode
+ *
+ * El viewMode se inicializa siguiendo esta jerarquía de precedencia:
+ * 1. viewMode prop (modo controlado)
+ * 2. localStorage (configuración guardada localmente)
+ * 3. defaultViewMode (valor por defecto del desarrollador)
+ * 4. Fallback según dispositivo (mobile: 'cards', desktop: 'table')
+ *
+ * ## Persistencia del viewMode
+ *
+ * - Si `onChangeConfig` está definido → Guarda en cookies de red
+ * - Si no está definido → Fallback a localStorage
+ *
+ * ## Modo controlado vs no controlado
+ *
+ * - **Controlado**: Cuando se pasa `viewMode` prop, el padre controla el estado
+ * - **No controlado**: El hook maneja internamente el estado y persiste
+ * @param id - Identificador único del DataGrid
+ * @param viewMode - ViewMode controlado por el padre (opcional)
+ * @param defaultViewMode - ViewMode por defecto cuando no hay valor guardado
+ * @param onViewModeChange - Callback cuando cambia el viewMode (opcional)
+ * @param onChangeConfig - Callback para guardar en cookies de red (opcional)
+ * @returns viewModeState - Estado actual del viewMode
+ * @returns setViewModeState - Función para establecer el viewMode
+ * @returns handleViewModeChange - Función para cambiar el viewMode y persistirlo
+ */
+export declare const useViewMode: ({ id, viewMode, defaultViewMode, onViewModeChange, onChangeConfig, }: UseViewModeParams) => UseViewModeReturn;

package/components/DataGrid/hooks/useViewMode/useViewMode.js

@@ -0,0 +1,44 @@
+import { useState, useCallback, useEffect } from "react";
+import { useIsMobile } from "@m4l/graphics";
+import { g as getViewMode } from "../../helpers/getViewMode/getViewMode.js";
+import { s as saveViewMode } from "../../helpers/saveViewMode/saveViewMode.js";
+const useViewMode = ({
+  id,
+  viewMode,
+  defaultViewMode,
+  onViewModeChange,
+  onChangeConfig
+}) => {
+  const isMobile = useIsMobile();
+  const [viewModeState, setViewModeState] = useState(() => {
+    if (viewMode) {
+      return viewMode;
+    }
+    const savedViewMode = getViewMode(id, null, defaultViewMode);
+    if (savedViewMode) {
+      return savedViewMode;
+    }
+    return isMobile ? "cards" : "table";
+  });
+  const handleViewModeChange = useCallback(
+    (newViewMode) => {
+      setViewModeState(newViewMode);
+      saveViewMode(id, newViewMode, onChangeConfig);
+      onViewModeChange?.(newViewMode);
+    },
+    [id, onViewModeChange, onChangeConfig]
+  );
+  useEffect(() => {
+    if (viewMode !== void 0) {
+      setViewModeState(viewMode);
+    }
+  }, [viewMode]);
+  return {
+    viewModeState,
+    setViewModeState,
+    handleViewModeChange
+  };
+};
+export {
+  useViewMode as u
+};

package/components/DataGrid/hooks/useViewMode/useViewMode.test.d.ts

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

package/components/DataGrid/index.d.ts

@@ -1,9 +1,10 @@
 export { DataGrid } from './DataGrid';
 export * from './formatters';
-export type { Column, RenderEditCellProps, RenderCellProps } from 'react-data-grid';
-export type { RowKey, ChangeUserColumn, RowActionsGetter, RowKeyGetter } from './types';
+export type { Column, RenderEditCellProps, RenderCellProps, } from 'react-data-grid';
+export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, } from './types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';
-export type { IGridConfig, IGridConfigExtended, BaseConfigColumn } from './contexts/DataGridContext/types';
-export { DATAGRID_SEMANTIC_WIDTHS, DATAGRID_ROW_HEADER_HEIGHTS, DATAGRID_ROW_HEIGHTS } from './constants';
+export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
+export { DATAGRID_SEMANTIC_WIDTHS, DATAGRID_ROW_HEADER_HEIGHTS, DATAGRID_ROW_HEIGHTS, } from './constants';
+export * from './types.helpers';

package/components/DataGrid/subcomponents/Cards/helpers/calculateCardHeight.d.ts

@@ -6,13 +6,14 @@ import { CalculateCardHeightProps } from '../types';
  * @returns Altura calculada en píxeles
  *
  * Fórmula:
+ * - 42px de header (checkbox + acciones)
  * - 32px por cada columna visible (altura de label + value)
- * - 40px de padding, márgenes y header
+ * - 40px de padding vertical
  * - Mínimo de 120px para garantizar una altura base
  *
  * Ejemplos:
- * - 3 columnas: Math.max(120, 3 * 32 + 40) = 136px
- * - 5 columnas: Math.max(120, 5 * 32 + 40) = 200px
- * - 10 columnas: Math.max(120, 10 * 32 + 40) = 360px
+ * - 3 columnas: Math.max(120, 42 + 3 * 32 + 40) = 178px
+ * - 5 columnas: Math.max(120, 42 + 5 * 32 + 40) = 242px
+ * - 10 columnas: Math.max(120, 42 + 10 * 32 + 40) = 402px
  */
 export declare function calculateCardHeight(props: CalculateCardHeightProps): number;

package/components/DataGrid/subcomponents/Cards/helpers/calculateCardHeight.js

@@ -1,9 +1,12 @@
+import { C as CARD_HEIGHT } from "../../../constants.js";
 function calculateCardHeight(props) {
   const { visibleColumnsCount, customMinHeight } = props;
   if (customMinHeight !== void 0) {
     return customMinHeight;
   }
-  return Math.max(120, visibleColumnsCount * 32 + 40);
+  const contentHeight = visibleColumnsCount * CARD_HEIGHT.COLUMN;
+  const totalHeight = CARD_HEIGHT.HEADER + contentHeight + CARD_HEIGHT.PADDING_VERTICAL;
+  return Math.max(CARD_HEIGHT.BASE_MIN, totalHeight);
 }
 export {
   calculateCardHeight as c

package/components/DataGrid/types.d.ts

@@ -61,12 +61,27 @@ export interface ColumnConfig {
     position?: number;
     frozen?: Maybe<boolean>;
 }
-type KeyUserColumns = keyof IGridConfigExtended;
-export interface ChangeUserColumn<T extends KeyUserColumns = KeyUserColumns> {
+type KeyConfig = keyof IGridConfigExtended;
+/**
+ * Tipo que representa un cambio de configuración del DataGrid.
+ */
+export interface ChangeConfig<T extends KeyConfig = KeyConfig> {
     reason: T;
     userConfig: IGridConfigExtended[T];
 }
-export type OnChangeUserColumns = (props: ChangeUserColumn) => void;
+/**
+ * @deprecated Usar `ChangeConfig` en su lugar. Este tipo será eliminado en futuras versiones.
+ */
+export type ChangeUserColumn = ChangeConfig;
+/**
+ * Callback que se ejecuta cuando cambia cualquier configuración del DataGrid.
+ * Maneja todas las vistas genéricamente a través de IGridConfigExtended.
+ */
+export type OnChangeConfig = (props: ChangeConfig) => void;
+/**
+ * @deprecated Usar `OnChangeConfig` en su lugar. Este tipo será eliminado en futuras versiones.
+ */
+export type OnChangeUserColumns = OnChangeConfig;
 export type SortApplied = {
     columnKey: string;
     removable: boolean;
@@ -146,12 +161,21 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
     checkedRowsMultiple?: boolean;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
     /**
-     * Propiedad opcional que recibe la configuración de las columnas
+     * Configuración inicial del DataGrid (anchos, orden, visibilidad, viewMode).
+     * Tiene prioridad sobre localStorage.
+     */
+    defaultConfig?: IGridConfigExtended;
+    /**
+     * Callback que se ejecuta cuando cambia cualquier configuración del DataGrid.
+     * @param props - Objeto con `reason` (tipo de cambio) y `userConfig` (nueva configuración)
+     */
+    onChangeConfig?: OnChangeConfig;
+    /**
+     * @deprecated Usar `defaultConfig` en su lugar. Esta prop será eliminada en futuras versiones.
      */
     defaultUserColumns?: IGridConfigExtended;
     /**
-     * Propiedad que recibe la función que se ejecuta cuando se cambian
-     * las configuraciones de las columnas.
+     * @deprecated Usar `onChangeConfig` en su lugar. Esta prop será eliminada en futuras versiones.
      */
     onChangeUserColumns?: OnChangeUserColumns;
     /**

package/components/DataGrid/types.helpers.d.ts

@@ -0,0 +1,55 @@
+import { RowKey } from './types';
+import { BaseConfigColumn } from './contexts/DataGridContext/types';
+/**
+ * Configuración base genérica que puede extenderse con propiedades específicas de cualquier vista.
+ *
+ * USO INTERNO: El sistema usa esto para manejar genéricamente las configuraciones
+ * de columnas sin importar el tipo de vista (table, cards, etc).
+ * @example
+ * // Para vista table
+ * BaseViewConfig<{ frozen: boolean }>
+ *
+ * // Para vista cards
+ * BaseViewConfig<{ showTitle: boolean }>
+ */
+export type BaseViewConfig<TViewSpecific = object> = TViewSpecific & {
+    key: string;
+    visible: boolean;
+    index: number;
+    name?: string;
+};
+/**
+ *
+ *Este tipo define la estructura de configuración que el usuario puede
+ *pasar al DataGrid para personalizar columnas y sus anchos.
+ *
+ *- `columnsConfig`: Configuración de visibilidad y orden de columnas para vista table
+ *- `columnsWidths`: Anchos personalizados de columnas
+ * @example
+ * ```typescript
+ * const userConfig: IGridConfig = {
+ *   columnsConfig: [
+ *     { key: 'name', visible: true, index: 0, frozen: false },
+ *     { key: 'email', visible: true, index: 1, frozen: false },
+ *   ],
+ *   columnsWidths: { name: 200, email: 300 }
+ * };
+ * ```
+ */
+export interface IGridConfig {
+    /** Configuración de columnas para vista table (visibilidad, orden, frozen) */
+    columnsConfig: BaseConfigColumn[];
+    /** Anchos de columnas en píxeles */
+    columnsWidths: Record<RowKey, number>;
+}
+/**
+ * Configuración específica retornada por getViewSpecificConfig
+ */
+export interface ViewSpecificConfig {
+    /** Valores por defecto para propiedades específicas de la vista */
+    defaults: Record<string, unknown>;
+    /** Valores originales por defecto para tracking de cambios */
+    originalDefaults: Record<string, unknown>;
+    /** Función para obtener propiedades originales dinámicas de un item */
+    dynamicOriginalProperty: (item: unknown) => Record<string, unknown>;
+}

package/components/DataGrid/types.helpers.js

@@ -0,0 +1 @@
+

package/components/DataGrid/types.hooks.d.ts

@@ -0,0 +1,81 @@
+import { RowKey, RowHeightVariants, RowHeights, OnChangeConfig } from './types';
+import { Maybe } from '@m4l/core';
+import { IViewConfig, RowHeightState, ViewMode } from './contexts/DataGridContext/types';
+export interface UseViewModeParams {
+    /** Identificador único del DataGrid */
+    id: RowKey;
+    /** ViewMode controlado por el padre */
+    viewMode?: ViewMode;
+    /** ViewMode por defecto cuando no hay valor guardado */
+    defaultViewMode?: ViewMode;
+    /** Callback cuando cambia el viewMode */
+    onViewModeChange?: (viewMode: ViewMode) => void;
+    /** Callback para persistir cambios */
+    onChangeConfig?: OnChangeConfig;
+}
+export interface UseViewModeReturn {
+    /** Estado actual del viewMode */
+    viewModeState: ViewMode;
+    /** Función para establecer el viewMode */
+    setViewModeState: React.Dispatch<React.SetStateAction<ViewMode>>;
+    /** Función para cambiar el viewMode y persistirlo */
+    handleViewModeChange: (newViewMode: ViewMode) => void;
+}
+export interface UseRowHeightParams {
+    /** Alturas de las filas (número fijo o array de 3 elementos) */
+    rowHeights: RowHeights;
+    /** Alturas de los headers (número fijo o array de 3 elementos) */
+    rowHeaderHeights: RowHeights;
+    /** Variant inicial de altura */
+    initialRowHeightVariant: RowHeightVariants;
+}
+export interface UseRowHeightReturn {
+    /** Estado actual de la altura de filas */
+    currentRowHeightVariant: RowHeightState;
+    /** Función para cambiar el variant de altura */
+    setRowHeightVariant: (newVariant: RowHeightVariants) => void;
+}
+export interface UseColumnsWidthParams {
+    /** Identificador único del DataGrid */
+    id: RowKey;
+    /** Callback para persistir cambios */
+    onChangeConfig?: OnChangeConfig;
+}
+export interface UseColumnsWidthReturn {
+    /** Mapa con el ancho de cada columna */
+    columnsWidths: Map<string, Maybe<string | number>>;
+    /** Función para establecer el mapa de anchos */
+    setColumnsWidths: React.Dispatch<React.SetStateAction<Map<string, Maybe<string | number>>>>;
+    /** Función para cambiar el ancho de una columna */
+    onChangeColumnWidth: (columnKey: string, width: number) => void;
+}
+export interface UseViewConfigReturn {
+    /** Estado de configuración por vista */
+    viewConfig: Record<ViewMode, IViewConfig<any, any>[]>;
+    /** Obtiene la configuración de columnas para una vista */
+    getConfigColumns: (viewMode: ViewMode) => IViewConfig<any, any>[];
+    /** Actualiza la configuración de columnas para una vista */
+    updateConfigColumns: (viewMode: ViewMode, config: IViewConfig<any, any>[]) => void;
+}
+export interface UseChangeColumnsConfigParams {
+    /** Identificador único del DataGrid */
+    id: RowKey;
+    /** Callback para persistir cambios */
+    onChangeConfig?: OnChangeConfig;
+    /** Función para actualizar la configuración de columnas */
+    updateConfigColumns: (viewMode: ViewMode, config: IViewConfig<any, any>[]) => void;
+}
+export interface UseChangeColumnsConfigReturn {
+    /** Función para cambiar la configuración de columnas de una vista */
+    onChangeColumnsConfig: (viewMode: ViewMode, newConfig: IViewConfig<any, any>[]) => void;
+}
+export interface UseChangeColumnsOrderParams {
+    /** Función para obtener la configuración de columnas de una vista */
+    getConfigColumns: (viewMode: ViewMode) => IViewConfig<any, any>[];
+    /** Función para cambiar la configuración de columnas */
+    onChangeColumnsConfig: (viewMode: ViewMode, newConfig: IViewConfig<any, any>[]) => void;
+}
+export interface UseChangeColumnsOrderReturn {
+    /** Función para cambiar el orden de columnas de una vista */
+    onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;
+}

package/hooks/useDataGridPersistence/constants.d.ts

@@ -1,3 +1,5 @@
 export declare const M4LDYNAMIC_KEY_FILTER_AND_SORT = "M4LDynamicFilterAndSort";
 export declare const COOKIE_COLUMNS_WIDTHS = "columns_widths";
 export declare const COOKIE_COLUMNS_CONFIG = "columns_config";
+export declare const COOKIE_COLUMNS_CONFIG_CARDS = "columns_config_cards";
+export declare const COOKIE_VIEW_MODE = "view_mode";

package/hooks/useDataGridPersistence/constants.js

@@ -1,6 +1,10 @@
 const COOKIE_COLUMNS_WIDTHS = "columns_widths";
 const COOKIE_COLUMNS_CONFIG = "columns_config";
+const COOKIE_COLUMNS_CONFIG_CARDS = "columns_config_cards";
+const COOKIE_VIEW_MODE = "view_mode";
 export {
-  COOKIE_COLUMNS_CONFIG as C,
-  COOKIE_COLUMNS_WIDTHS as a
+  COOKIE_VIEW_MODE as C,
+  COOKIE_COLUMNS_CONFIG_CARDS as a,
+  COOKIE_COLUMNS_CONFIG as b,
+  COOKIE_COLUMNS_WIDTHS as c
 };

package/hooks/useDataGridPersistence/helpers.d.ts

@@ -1,5 +1,9 @@
 import { IGridConfigExtended } from '../../components/DataGrid';
 /**
- * Obtiene el sort de la cookie
+ * Obtiene la configuración de columnas de tabla desde la cookie
  */
 export declare const getColumnsConfigCookie: (cookie: Record<string, any> | undefined | Array<any>) => IGridConfigExtended["columnsConfig"];
+/**
+ * Obtiene la configuración de columnas de cards desde la cookie
+ */
+export declare const getColumnsConfigCardsCookie: (cookie: Record<string, any> | undefined | Array<any>) => IGridConfigExtended["columnsConfigCards"];