@m4l/components 9.3.34-BE20251127-beta.1 → 9.3.34-JT20251210-beta.1

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

@@ -0,0 +1,52 @@
+import { Maybe } from '@m4l/core';
+import { RowKey, OnChangeConfig } from '../../types';
+/**
+ * Persiste la configuración de anchos de las columnas del DataGrid.
+ *
+ * ## Flujo de persistencia
+ *
+ * Esta función guarda los anchos de columnas siguiendo esta lógica:
+ *
+ * 1. **onChangeConfig** (Cookies de red) - Método principal en producción
+ * Si está disponible, envía la configuración al callback para que el consumidor
+ * la persista en cookies de red. En la siguiente carga, estos datos volverán
+ * como `defaultConfig` en `getColumnsWidth`.
+ *
+ * 2. **localStorage** - Fallback local
+ * Solo se usa cuando NO hay callback configurado.
+ * Útil para desarrollo o cuando no hay integración con cookies de red.
+ *
+ * ## Ciclo completo de persistencia
+ *
+ * ```
+ * Usuario redimensiona columna
+ * ↓
+ * saveColumnsWidth() envía via onChangeConfig
+ * ↓
+ * Se persiste en cookies de red
+ * ↓
+ * Próxima carga: datos vienen en defaultConfig
+ * ↓
+ * getColumnsWidth() lee de defaultConfig
+ * ```
+ * @param id - Identificador único del DataGrid. Se usa como prefijo en localStorage (fallback)
+ * @param storeColumnsWidth - Map con la configuración de anchos donde:
+ *                            - key: identificador de la columna (column.key)
+ *                            - value: ancho en píxeles (number) o string con unidad CSS
+ * @param onChangeConfig - Callback para enviar la configuración a cookies de red.
+ *                              Recibe un objeto con:
+ *                              - reason: 'columnsWidths' (identificador del tipo de cambio)
+ *                              - userConfig: Record con los anchos de columnas
+ * @example
+ * // Producción: Guardar mediante callback a cookies de red
+ * saveColumnsWidth('my-grid', columnsWidthsMap, ({ reason, userConfig }) => {
+ *   // Persistir en cookies de red
+ *   setCookie(userConfig);
+ * });
+ * @example
+ * // Desarrollo: Guardar en localStorage (sin cookies de red)
+ * saveColumnsWidth('my-grid', columnsWidthsMap);
+ * @see getColumnsWidth - Función complementaria para obtener la configuración
+ * @see castMapColumnsWidthToRecord - Helper usado para convertir el Map a Record
+ */
+export declare function saveColumnsWidth(id: RowKey, storeColumnsWidth: Map<string, Maybe<string | number>>, onChangeConfig?: OnChangeConfig): void;

package/components/DataGrid/helpers/saveColumnsWidth/saveColumnsWidth.js

@@ -0,0 +1,18 @@
+import { c as castMapColumnsWidthToRecord } from "../castMapColumnsWidthToRecord.js";
+function saveColumnsWidth(id, storeColumnsWidth, onChangeConfig) {
+  if (onChangeConfig) {
+    const columnsWidthObject = castMapColumnsWidthToRecord(storeColumnsWidth);
+    onChangeConfig({
+      reason: "columnsWidths",
+      userConfig: columnsWidthObject
+    });
+    return;
+  }
+  localStorage.setItem(
+    `${id}_columns_width`,
+    JSON.stringify([...storeColumnsWidth])
+  );
+}
+export {
+  saveColumnsWidth as s
+};

package/components/DataGrid/helpers/saveColumnsWidth/saveColumnsWidth.test.d.ts

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

package/components/DataGrid/helpers/saveViewConfig/index.d.ts

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

package/components/DataGrid/helpers/saveViewConfig/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,35 @@
+import { RowKey } from '../../types';
+/**
+ * Guarda configuraciones de vista en localStorage o notifica via callback.
+ *
+ * ## Propósito
+ *
+ * Persiste la configuración de columnas para una vista específica.
+ * Soporta dos modos: localStorage directo o callback externo (cookies de red).
+ *
+ * ## Prioridad de persistencia
+ *
+ * 1. Si hay `onChangeConfig`, notifica al callback (para guardar en cookies de red)
+ * 2. Si no hay callback, guarda directamente en localStorage
+ *
+ * ## Formato de key en localStorage
+ *
+ * ```
+ * table: `${id}_columns_config`
+ * cards: `${id}_columns_config_cards`
+ * ```
+ * @param id - Identificador único del DataGrid
+ * @param viewSuffix - Sufijo para identificar la vista ('' para table, '_cards' para cards)
+ * @param config - Array de configuración a guardar
+ * @param onChangeConfig - Callback opcional para notificar cambios (prioridad sobre localStorage)
+ * @example
+ * // Guardar en localStorage
+ * saveViewConfig('my-grid', '', config);
+ *
+ * // Notificar via callback
+ * saveViewConfig('my-grid', '_cards', config, onChangeConfig);
+ */
+export declare const saveViewConfig: <T>(id: RowKey, viewSuffix: string, config: T[], onChangeConfig?: (data: {
+    reason: string;
+    userConfig: T[];
+}) => void) => void;

package/components/DataGrid/helpers/saveViewConfig/saveViewConfig.js

@@ -0,0 +1,15 @@
+const saveViewConfig = (id, viewSuffix, config, onChangeConfig) => {
+  if (onChangeConfig) {
+    const reason = viewSuffix === "" ? "columnsConfig" : `columnsConfig${viewSuffix.replace("_", "").charAt(0).toUpperCase()}${viewSuffix.replace("_", "").slice(1)}`;
+    onChangeConfig({
+      reason,
+      userConfig: config
+    });
+    return;
+  }
+  const storageKey = viewSuffix === "" ? `${id}_columns_config` : `${id}_columns_config${viewSuffix}`;
+  localStorage.setItem(storageKey, JSON.stringify(config));
+};
+export {
+  saveViewConfig as s
+};

package/components/DataGrid/helpers/saveViewConfig/saveViewConfig.test.d.ts

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

package/components/DataGrid/helpers/saveViewMode/index.d.ts

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

package/components/DataGrid/helpers/saveViewMode/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,33 @@
+import { ViewMode } from '../../contexts/DataGridContext/types';
+import { OnChangeConfig, RowKey } from '../../types';
+/**
+ * Guarda el modo de visualización (table o cards).
+ *
+ * ## Propósito
+ *
+ * Persiste la preferencia del usuario sobre el modo de vista seleccionado.
+ * Permite que al recargar la página se mantenga la última vista utilizada.
+ *
+ * ## Prioridad de guardado
+ *
+ * 1. Si existe `onChangeConfig` → Guarda en cookies de red
+ * 2. Si no existe → Fallback a localStorage
+ *
+ * ## Formato de key en localStorage (fallback)
+ *
+ * ```
+ * `${id}_view_mode` -> 'table' | 'cards'
+ * ```
+ * @param id - Identificador único del DataGrid
+ * @param viewMode - Modo de visualización ('table' | 'cards')
+ * @param onChangeConfig - Callback opcional para guardar en cookies de red
+ * @example
+ * // Con cookies de red
+ * saveViewMode('my-grid', 'cards', onChangeConfig);
+ * // Llama: onChangeConfig({ reason: 'viewMode', userConfig: 'cards' })
+ *
+ * // Sin cookies de red (fallback)
+ * saveViewMode('my-grid', 'cards');
+ * // localStorage: 'my-grid_view_mode' = 'cards'
+ */
+export declare const saveViewMode: (id: RowKey, viewMode: ViewMode, onChangeConfig?: OnChangeConfig) => void;

package/components/DataGrid/helpers/saveViewMode/saveViewMode.js

@@ -0,0 +1,13 @@
+const saveViewMode = (id, viewMode, onChangeConfig) => {
+  if (onChangeConfig) {
+    onChangeConfig({
+      reason: "viewMode",
+      userConfig: viewMode
+    });
+    return;
+  }
+  localStorage.setItem(`${id}_view_mode`, viewMode);
+};
+export {
+  saveViewMode as s
+};

package/components/DataGrid/helpers/saveViewMode/saveViewMode.test.d.ts

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

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

@@ -0,0 +1,6 @@
+export * from './useViewMode';
+export * from './useRowHeight';
+export * from './useColumnsWidth';
+export * from './useViewConfig';
+export * from './useChangeColumnsConfig';
+export * from './useChangeColumnsOrder';

package/components/DataGrid/hooks/index.js

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,9 @@
+import { UseChangeColumnsConfigParams, UseChangeColumnsConfigReturn } from '../../types.hooks';
+/**
+ * Hook para manejar el cambio de configuración de columnas.
+ *
+ * Guarda la configuración en localStorage y actualiza el estado.
+ * @param params - Parámetros del hook
+ * @returns Función para cambiar la configuración de columnas
+ */
+export declare const useChangeColumnsConfig: ({ id, onChangeConfig, updateConfigColumns, }: UseChangeColumnsConfigParams) => UseChangeColumnsConfigReturn;

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/useModalCardDetail.d.ts

@@ -3,4 +3,4 @@ import { UseModalDetailProps } from '../types';
  * Hook que renderiza el modal de detalle para cualquier vista
  * mostrando TODAS las columnas sin excepción
  */
-export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, }: UseModalDetailProps<TRow>) => (row: TRow) => void;
+export declare const useModalDetail: <TRow>({ columns, viewMode, onRowsChange, rows, }: UseModalDetailProps<TRow>) => (row: TRow) => void;

package/components/DataGrid/hooks/useModalCardDetail.js

@@ -14,7 +14,8 @@ import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/A
 const useModalDetail = ({
   columns,
   viewMode,
-  onRowsChange
+  onRowsChange,
+  rows
 }) => {
   const { getConfigColumns, size } = useDataGrid();
   const { openModal, closeModal } = useModal();
@@ -24,6 +25,7 @@ const useModalDetail = ({
   const handleOpenDetail = useCallback(
     (row) => {
       const viewColumnsConfig = getConfigColumns(viewMode);
+      const rowIndex = rows.findIndex((r) => r === row);
       openModal({
         initialWidth: 500,
         initialHeight: 680,
@@ -42,6 +44,8 @@ const useModalDetail = ({
                 CardDetails,
                 {
                   row,
+                  rows,
+                  rowIndex,
                   columns,
                   viewColumnsConfig,
                   onRowsChange,
@@ -56,6 +60,7 @@ const useModalDetail = ({
     },
     [
       columns,
+      rows,
       onRowsChange,
       size,
       getConfigColumns,

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/icons.d.ts

@@ -27,4 +27,5 @@ export declare const pathIcons: {
     mail: string;
     smartphone: string;
     internet: string;
+    edit: string;
 };