@m4l/components 9.3.36 → 9.3.37-JT20251128-beta.2

package/@types/export.d.ts

@@ -55,6 +55,9 @@ declare module '@mui/material/styles' {
     M4LCheckBox?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
     };
+    M4LRadioButton?: {
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
+    };
     M4LDataGrid?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDataGrid'];
     };

package/@types/types.d.ts

@@ -76,6 +76,10 @@ import {
   CheckBoxOwnerState,
   CheckBoxSlotsType,
 } from '../components/mui_extended/CheckBox/types';
+import {
+  RadioButtonOwnerState,
+  RadioButtonSlotsType,
+} from '../components/mui_extended/RadioButton/types';
 import {
   RHFNumberInputOwnerState,
   RHFNumberInputSlotsType,
@@ -292,11 +296,26 @@ import {
   ImageTextOwnerState,
   ImageTextSlotsType,
 } from '../components/ImageText/types';
-import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
-import { ActionsGroupOwnerState, ActionsGroupSlotsType } from '../components/ActionsGroup/types';
-import { TabsNavigatorSlotsType, TabsNavigatorOwnerState } from '../components/TabsNavigator/types';
-import { EditLabelOwnerState, EditLabelSlotsType } from '../components/EditLabel/types';
-import { MFIsolationAppOwnerState, MFIsolationAppSlotsType } from '../components/MFIsolationApp/types';
+import {
+  FormContainerOwnerState,
+  FormContainerSlotsType,
+} from '../components/FormContainer/types';
+import {
+  ActionsGroupOwnerState,
+  ActionsGroupSlotsType,
+} from '../components/ActionsGroup/types';
+import {
+  TabsNavigatorSlotsType,
+  TabsNavigatorOwnerState,
+} from 'src/components/TabsNavigator/types';
+import {
+  EditLabelOwnerState,
+  EditLabelSlotsType,
+} from '../components/EditLabel/types';
+import {
+  MFIsolationAppOwnerState,
+  MFIsolationAppSlotsType,
+} from '../components/MFIsolationApp/types';
 import {
   TagsFormatterOwnerState,
   TagsFormatterSlotsType,
@@ -333,6 +352,7 @@ declare module '@mui/material/styles' {
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
     M4LCheckBox: CheckBoxSlotsType;
+    M4LRadioButton: RadioButtonSlotsType;
     M4LRHFNumberInput: RHFNumberInputSlotsType;
     M4LTab: TabSlotsType;
     M4LButton: ButtonSlotsType;
@@ -347,7 +367,8 @@ declare module '@mui/material/styles' {
     M4LChip: ChipSlotsType;
     M4LCircularProgress: CircularProgressSlotsType;
     M4LPaperForm: PaperFormSlotsType;
-    M4LWindowBase: WindowBaseType;a
+    M4LWindowBase: WindowBaseType;
+    a;
     M4LWindowConfirm: WindowConfirmType;
     M4LAppBar: AppBarSlotsType;
     M4LDialog: DialogType;
@@ -427,6 +448,7 @@ declare module '@mui/material/styles' {
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
     M4LCheckBox: Partial<CheckBoxOwnerState>;
+    M4LRadioButton: Partial<RadioButtonOwnerState>;
     M4LRHFNumberInput: Partial<RHFNumberInputOwnerState>;
     M4LTab: Partial<TabOwnerState>;
     M4LButton: Partial<ButtonOwnerState>;
@@ -620,6 +642,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
       variants?: ComponentsVariants['M4LCheckBox'];
     };
+    M4LRadioButton?: {
+      defaultProps?: ComponentsPropsList['M4LRadioButton'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
+      variants?: ComponentsVariants['M4LRadioButton'];
+    };
     M4LActionCancel?: {
       defaultProps?: ComponentsPropsList['M4LActionCancel'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];

package/components/DataGrid/DataGrid.js

@@ -30,6 +30,7 @@ function DataGrid(props) {
     initialRowHeightVariant,
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     dataTestId = "",
     customHeader: CustomHeader,
     visibleCustomHeader = true,
@@ -87,6 +88,7 @@ function DataGrid(props) {
           checkedRows,
           rowActionsGetter,
           onCheckedRowsChange,
+          checkedRowsMultiple,
           rowKeyGetter,
           rows,
           onChangeUserColumns,

package/components/DataGrid/Datagrid.styles.js

@@ -424,6 +424,10 @@ const dataGridStyles = {
           borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
+        "&:has(> .M4LRadioButton-root)": {
+          overflow: "visible",
+          paddingInline: 0
+        },
         "&.rdg-cell-frozen": {
           display: "flex",
           boxShadow: "unset",
@@ -734,7 +738,10 @@ const dataGridStyles = {
    */
   cardsContainer: () => ({
     height: "auto",
-    overflow: "auto"
+    overflow: "auto",
+    "& > .M4LContainerFlow-root": {
+      alignItems: "start"
+    }
   }),
   /**
    * Card de la vista cards
@@ -746,6 +753,8 @@ const dataGridStyles = {
     minWidth: "280px",
     maxWidth: "580px",
     cursor: "pointer",
+    padding: theme.vars.size.baseSpacings["sp2-5"],
+    gap: "0 !important",
     // Si está checked (pero no selected), border de checked
     ...ownerState?.checked && !ownerState?.selected && {
       borderColor: theme.vars.palette.primary.activeOpacity
@@ -786,7 +795,7 @@ const dataGridStyles = {
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Contenido de la card (body)

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -1,146 +1,22 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect, useMemo, createContext } from "react";
-import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
-import { useFirstRender, useIsMobile } from "@m4l/graphics";
+import { useState, useEffect, useMemo, createContext } from "react";
+import { useFirstRender } from "@m4l/graphics";
 import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
 import { a as DATAGRID_ROW_HEIGHTS, b as DATAGRID_ROW_HEADER_HEIGHTS, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
 import { C as ControlNavigateSlots, a as ColumnsConfigSlots, T as TextEditorSlots, b as TableSlots, R as RowsCountSlots, A as ActionsSlots, D as DataGridSlots } from "../../slots/DataGridEnum.js";
 import { deepEqual } from "fast-equals";
+import { u as useViewMode } from "../../hooks/useViewMode/useViewMode.js";
+import { u as useRowHeight } from "../../hooks/useRowHeight/useRowHeight.js";
+import { u as useColumnsWidth } from "../../hooks/useColumnsWidth/useColumnsWidth.js";
+import { u as useViewConfig } from "../../hooks/useViewConfig/useViewConfig.js";
+import { u as useChangeColumnsConfig } from "../../hooks/useChangeColumnsConfig/useChangeColumnsConfig.js";
+import { u as useChangeColumnsOrder } from "../../hooks/useChangeColumnsOrder/useChangeColumnsOrder.js";
+import { g as getColumnsWidth } from "../../helpers/getColumnsWidth/getColumnsWidth.js";
+import { g as getInitialColumnsConfig } from "../../helpers/getInitialColumnsConfig/getInitialColumnsConfig.js";
+import { g as getAllViewModes } from "../../helpers/getAllViewModes/getAllViewModes.js";
+import { g as getViewSpecificConfig } from "../../helpers/getViewSpecificConfig/getViewSpecificConfig.js";
+import { g as getViewMode } from "../../helpers/getViewMode/getViewMode.js";
 const DataGridContext = createContext(null);
-function getColumnsWidth(id, columns, defaultUserColumns) {
-  const newMap = /* @__PURE__ */ new Map();
-  let storeColumnsWidth;
-  try {
-    const item = window.localStorage.getItem(`${id}_columns_width`);
-    storeColumnsWidth = item !== null ? new Map(JSON.parse(item)) : /* @__PURE__ */ new Map();
-  } catch (_e) {
-    storeColumnsWidth = /* @__PURE__ */ new Map();
-  }
-  for (let i = 0; i < columns.length; i++) {
-    let width;
-    if (defaultUserColumns) {
-      try {
-        width = defaultUserColumns.columnsWidths[columns[i].key];
-      } catch (_e) {
-      }
-    }
-    if (width === void 0) {
-      const storeWidth = storeColumnsWidth.get(columns[i].key);
-      if (typeof storeWidth === "number") {
-        width = storeWidth;
-      }
-    }
-    if (width !== void 0) {
-      newMap.set(columns[i].key, width);
-    }
-  }
-  return newMap;
-}
-function saveColumnsWidth(id, storeColumnsWidth, onChangeUserColumns) {
-  if (onChangeUserColumns) {
-    const columnsWidthObject = castMapColumnsWidthToRecord(storeColumnsWidth);
-    onChangeUserColumns({
-      reason: "columnsWidths",
-      userConfig: columnsWidthObject
-    });
-    return;
-  }
-  localStorage.setItem(
-    `${id}_columns_width`,
-    JSON.stringify([...storeColumnsWidth])
-  );
-}
-const getAllViewModes = () => {
-  return ["table", "cards"];
-};
-const getViewSpecificConfig = (viewMode) => {
-  const configs = {
-    table: {
-      defaults: { frozen: false },
-      originalDefaults: { originalFrozen: false },
-      dynamicOriginalProperty: (item) => ({
-        originalFrozen: item?.frozen ?? false
-      })
-    },
-    cards: {
-      defaults: { showTitle: true },
-      originalDefaults: { originalShowTitle: true },
-      dynamicOriginalProperty: (item) => ({
-        originalShowTitle: item?.showTitle ?? true
-      })
-    }
-  };
-  return configs[viewMode] || configs.table;
-};
-const getViewSuffix = (viewMode) => {
-  if (viewMode === "table") {
-    return "";
-  }
-  return `_${viewMode}`;
-};
-function getInitialColumnsConfig(id, columns, viewMode, defaultUserConfig, viewSpecificDefaults, originalViewSpecificDefaults) {
-  let columnsConfig;
-  if (defaultUserConfig) {
-    columnsConfig = defaultUserConfig;
-  } else {
-    columnsConfig = loadViewConfig(
-      id,
-      getViewSuffix(viewMode)
-    ) || [];
-  }
-  return columns.map((column, index) => {
-    const existingConfig = columnsConfig.find((c) => c.key === column.key);
-    const columnConfigIndex = existingConfig ? columnsConfig.indexOf(existingConfig) : -1;
-    const baseConfig = {
-      key: column.key,
-      name: typeof column.name === "string" ? column.name : String(column.name),
-      hidden: column.hidden === void 0 ? false : column.hidden,
-      index: columnConfigIndex > -1 ? columnConfigIndex : index,
-      visible: existingConfig?.visible !== void 0 ? existingConfig.visible : column.visible === void 0 ? true : column.visible,
-      originalIndex: index,
-      originalVisible: column.visible === void 0 ? true : column.visible
-    };
-    return {
-      ...baseConfig,
-      ...viewSpecificDefaults,
-      ...originalViewSpecificDefaults,
-      ...existingConfig || {}
-    };
-  }).sort((a, b) => a.index - b.index);
-}
-function saveViewConfig(id, viewSuffix, config, onChangeCallback) {
-  if (onChangeCallback) {
-    const reason = viewSuffix === "" ? "columnsConfig" : `columnsConfig${viewSuffix.replace("_", "")}`;
-    onChangeCallback({
-      reason,
-      userConfig: config
-    });
-    return;
-  }
-  const storageKey = viewSuffix === "" ? `${id}_columns_config` : `${id}_columns_config${viewSuffix}`;
-  localStorage.setItem(storageKey, JSON.stringify(config));
-}
-function loadViewConfig(id, viewSuffix) {
-  try {
-    const storageKey = viewSuffix === "" ? `${id}_columns_config` : `${id}_columns_config${viewSuffix}`;
-    const stored = localStorage.getItem(storageKey);
-    return stored ? JSON.parse(stored) : null;
-  } catch (_e) {
-    return null;
-  }
-}
-function saveViewMode(id, viewMode) {
-  localStorage.setItem(`${id}_view_mode`, viewMode);
-}
-function getIndexRowHeightVariant(variant) {
-  if (variant === "compact") {
-    return 0;
-  }
-  if (variant === "standard") {
-    return 1;
-  }
-  return 2;
-}
 function DataGridProvider(props) {
   const {
     id,
@@ -155,6 +31,7 @@ function DataGridProvider(props) {
     initialRowHeightVariant = "standard",
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     rowKeyGetter,
     onChangeUserColumns,
     externalSortSettings: sortSettings,
@@ -166,7 +43,32 @@ function DataGridProvider(props) {
     cardsViewConfig
   } = props;
   const isFirstRender = useFirstRender([columns, id]);
-  const isMobile = useIsMobile();
+  const { viewModeState, setViewModeState, handleViewModeChange } = useViewMode({
+    id,
+    viewMode,
+    defaultViewMode,
+    onViewModeChange,
+    onChangeUserColumns
+  });
+  const { currentRowHeightVariant, setRowHeightVariant } = useRowHeight({
+    rowHeights,
+    rowHeaderHeights,
+    initialRowHeightVariant
+  });
+  const { columnsWidths, setColumnsWidths, onChangeColumnWidth } = useColumnsWidth({
+    id,
+    onChangeUserColumns
+  });
+  const { getConfigColumns, updateConfigColumns } = useViewConfig();
+  const { onChangeColumnsConfig } = useChangeColumnsConfig({
+    id,
+    onChangeUserColumns,
+    updateConfigColumns
+  });
+  const { onChangeColumnsOrder } = useChangeColumnsOrder({
+    getConfigColumns,
+    onChangeColumnsConfig
+  });
   const classes = getComponentClasses(DATAGRID_PREFIX_NAME, {
     ...DataGridSlots,
     ...ActionsSlots,
@@ -176,80 +78,8 @@ function DataGridProvider(props) {
     ...ColumnsConfigSlots,
     ...ControlNavigateSlots
   });
-  const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
-  const [viewConfig, setViewConfig] = useState(() => ({
-    table: [],
-    cards: []
-  }));
-  const getConfigColumns = useCallback(
-    (viewModeParam) => {
-      return viewConfig[viewModeParam];
-    },
-    [viewConfig]
-  );
-  const updateConfigColumns = useCallback(
-    (viewModeParam, config) => {
-      setViewConfig((prev) => ({
-        ...prev,
-        [viewModeParam]: config
-      }));
-    },
-    []
-  );
   const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
   const [sortColumns, setSortColumns] = useState([]);
-  const [viewModeState, setViewModeState] = useState(() => {
-    if (viewMode) {
-      return viewMode;
-    }
-    try {
-      const savedViewMode = localStorage.getItem(`${id}_view_mode`);
-      if (savedViewMode === "cards" || savedViewMode === "table") {
-        return savedViewMode;
-      }
-    } catch (_e) {
-    }
-    if (defaultViewMode) {
-      return defaultViewMode;
-    }
-    return isMobile ? "cards" : "table";
-  });
-  const handleViewModeChange = useCallback(
-    (newViewMode) => {
-      setViewModeState(newViewMode);
-      saveViewMode(id, newViewMode);
-      onViewModeChange?.(newViewMode);
-    },
-    [onViewModeChange, id]
-  );
-  useEffect(() => {
-    if (viewMode !== void 0) {
-      setViewModeState(viewMode);
-    }
-  }, [viewMode]);
-  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
-    };
-  });
   useEffect(() => {
     const keys = new Set(columns.map((c) => c.key));
     if (sortSettings?.sortsColumns) {
@@ -315,10 +145,10 @@ function DataGridProvider(props) {
     }
   }, [columns, sortSettings, filterSettings, cardsViewConfig]);
   const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
-  let timerSaveColumns;
   useEffect(() => {
     if (isFirstRender) {
       setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
+      setViewModeState(getViewMode(id, defaultUserColumns, defaultViewMode) ?? "table");
       updateConfigColumns(
         "table",
         getInitialColumnsConfig(
@@ -450,65 +280,9 @@ function DataGridProvider(props) {
       });
     }
   }, [columns, id]);
-  const onChangeColumnsConfig = useCallback(
-    (viewModeParam, newConfig) => {
-      saveViewConfig(
-        id,
-        getViewSuffix(viewModeParam),
-        newConfig,
-        onChangeUserColumns
-      );
-      updateConfigColumns(viewModeParam, newConfig);
-    },
-    [id, onChangeUserColumns, updateConfigColumns]
-  );
-  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]
-  );
-  const onChangeColumnWidth = (columnKey, width) => {
-    columnsWidths.set(columnKey, Math.round(width));
-    if (timerSaveColumns) {
-      clearTimeout(timerSaveColumns);
-    }
-    timerSaveColumns = setTimeout(() => {
-      saveColumnsWidth(id, columnsWidths, onChangeUserColumns);
-    }, 500);
-  };
   const setRowFilterCountInternal = (newRowsCount) => {
     setRowFilterCount(newRowsCount);
   };
-  const setCurrentRowHeightInternal = 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)]
-      });
-    },
-    [setCurrentRowHeightVariant, rowHeights, rowHeaderHeights]
-  );
   return /* @__PURE__ */ jsx(
     DataGridContext.Provider,
     {
@@ -528,8 +302,9 @@ function DataGridProvider(props) {
         onChangeColumnWidth,
         setRowsCount: setRowFilterCountInternal,
         rowActionsGetter,
-        setRowHeightVariant: setCurrentRowHeightInternal,
+        setRowHeightVariant,
         onCheckedRowsChange,
+        checkedRowsMultiple,
         rowKeyGetter,
         onChangeUserColumns,
         sortColumns,

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -3,21 +3,12 @@ import { RowKey, RowHeightVariants, GridProps } from '../../types';
 import { Maybe } from '@m4l/core';
 import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from '../../slots/DataGridEnum';
 import { SortColumn } from 'react-data-grid';
-/**
- * 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
- */
-export type BaseViewConfig<TViewSpecific = {}> = TViewSpecific & {
-    key: string;
-    visible: boolean;
-    index: number;
-    name?: string;
-};
+import { IGridConfig, BaseViewConfig } from '../../types.helpers';
 /**
  * Configuración extendida genérica con propiedades originales
  * USO INTERNO: El contexto usa esto para el estado interno con propiedades de tracking
  */
-export type IViewConfig<TViewSpecific = {}, TOriginalViewSpecific = {}> = BaseViewConfig<TViewSpecific> & {
+export type IViewConfig<TViewSpecific = object, TOriginalViewSpecific = object> = BaseViewConfig<TViewSpecific> & {
     hidden: boolean;
     originalIndex: number;
     originalVisible: boolean;
@@ -62,15 +53,6 @@ export interface IConfigColumnCards extends Omit<IConfigColumn, 'frozen' | 'orig
     originalShowTitle: boolean;
 }
 export type ViewMode = 'table' | 'cards';
-/**
- * Configuración base del Grid (API pública original)
- * USO: Tipo base para defaultUserColumns - mantiene retrocompatibilidad
- * IMPORTANTE: No modificar para mantener retrocompatibilidad con código existente
- */
-export interface IGridConfig {
-    columnsConfig: BaseConfigColumn[];
-    columnsWidths: Record<RowKey, number>;
-}
 /**
  * Configuración extendida del Grid para soportar múltiples vistas
  * USO: Para nuevas implementaciones que soporten cards y futuras vistas
@@ -78,8 +60,9 @@ export interface IGridConfig {
  */
 export interface IGridConfigExtended extends IGridConfig {
     columnsConfigCards?: BaseConfigColumnCards[];
+    viewMode?: ViewMode;
 }
-export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
     id: number | string;
     children: ReactNode;
     rowsCount: number;
@@ -92,7 +75,7 @@ export type RowHeightState = {
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
     getConfigColumns: (viewMode: ViewMode) => IViewConfig[];
     onChangeColumnsConfig: (viewMode: ViewMode, config: IViewConfig[]) => void;
     onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;

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

@@ -0,0 +1,19 @@
+import { ViewMode } from '../../contexts/DataGridContext/types';
+/**
+ * Obtiene todos los modos de vista disponibles en el DataGrid.
+ *
+ * ## Modos disponibles
+ *
+ * - `table`: Vista de tabla tradicional con filas y columnas
+ * - `cards`: Vista de tarjetas para visualización compacta
+ *
+ * ## Uso
+ *
+ * Esta función centraliza los modos de vista disponibles,
+ * facilitando la extensión futura si se agregan nuevos modos.
+ * @returns Array con los modos de vista disponibles
+ * @example
+ * const modes = getAllViewModes();
+ * // ['table', 'cards']
+ */
+export declare const getAllViewModes: () => ViewMode[];

package/components/DataGrid/helpers/getAllViewModes/getAllViewModes.js

@@ -0,0 +1,6 @@
+const getAllViewModes = () => {
+  return ["table", "cards"];
+};
+export {
+  getAllViewModes as g
+};

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

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

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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,47 @@
+import { Column } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+import { RowKey } from '../../types';
+import { IGridConfig } from '../../types.helpers';
+/**
+ * Obtiene la configuración de anchos de las columnas del DataGrid.
+ *
+ * ## Flujo de persistencia
+ *
+ * Esta función obtiene los anchos de columnas siguiendo una jerarquía de precedencia:
+ *
+ * 1. **defaultUserColumns** (Backend/API) - Prioridad máxima
+ * Configuración que viene del backend cuando el componente se monta.
+ * En producción, esta es la fuente principal de datos persistidos.
+ *
+ * 2. **localStorage** - Fallback local
+ * Solo se usa cuando NO hay configuración del backend.
+ * Útil para desarrollo o cuando no hay integración con backend.
+ *
+ * Si no se encuentra configuración en ninguna fuente, la columna no se incluye
+ * en el Map resultante y usará el ancho por defecto definido en la columna.
+ *
+ * ## Relación con saveColumnsWidth
+ *
+ * - Cuando el usuario modifica anchos, `saveColumnsWidth` envía los cambios al backend
+ * mediante el callback `onChangeUserColumns`
+ * - En la siguiente carga, esos datos vuelven como `defaultUserColumns`
+ * - localStorage es solo un fallback cuando no hay callback configurado
+ * @template TRow - Tipo de datos de cada fila del DataGrid
+ * @template TSummaryRow - Tipo de datos de la fila de resumen del DataGrid
+ * @param id - Identificador único del DataGrid. Se usa como prefijo para la key en localStorage (fallback)
+ * @param columns - Array de columnas del DataGrid con su configuración
+ * @param defaultUserColumns - Configuración del usuario obtenida del backend/API.
+ *                             Esta es la fuente principal en producción.
+ * @returns Map donde la key es el identificador de la columna (column.key) y el value
+ *          es el ancho configurado (número en píxeles o string con unidad CSS)
+ * @example
+ * // Sin configuración del backend (usa localStorage como fallback)
+ * const columnsWidths = getColumnsWidth('my-grid', columns, null);
+ * @example
+ * // Con configuración del backend (caso típico en producción)
+ * const columnsWidths = getColumnsWidth('my-grid', columns, {
+ *   columnsWidths: { name: 200, email: 300 }
+ * });
+ * @see saveColumnsWidth - Función complementaria para persistir la configuración
+ */
+export declare function getColumnsWidth<TRow, TSummaryRow>(id: RowKey, columns: readonly Column<TRow, TSummaryRow>[], defaultUserColumns: Maybe<IGridConfig>): Map<string, Maybe<string | number>>;