@m4l/components 9.4.6 → 9.4.7

package/components/{DataGrid → datagrids}/Datagrid.styles.js

@@ -10,12 +10,8 @@ const dataGridStyles = {
   datagridRoot: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    //padding: theme.vars.size.baseSpacings.sp0,
-    //inset: theme.vars.size.baseSpacings.sp0,
-    //overflow: 'hidden',
     container: "container / inline-size",
     background: "transparent",
-    //boxShadow: 'unset',
     borderRadius: theme.vars.size.borderRadius.r1,
     position: "relative",
     gap: theme.vars.size.baseSpacings.sp3,
@@ -82,7 +78,6 @@ const dataGridStyles = {
     },
     "&& .M4lclassCssSpecificity": {
       fontWeight: 400
-      //Se utiliza directamente el valor porque no está tokenizado
     },
     '& [role="row"]:last-of-type': {
       "& .rdg-cell": {
@@ -170,7 +165,6 @@ const dataGridStyles = {
   rowsCountLabel: ({ theme, ownerState }) => ({
     color: theme.vars.palette.text.primary,
     fontWeight: 400,
-    //Se utiliza directamente el valor porque no está tokenizado
     height: "100%",
     lineHeight: theme.vars.size.baseSpacings.sp4,
     fontSize: getTypographyStyles(
@@ -188,7 +182,6 @@ const dataGridStyles = {
     paddingBottom: theme.vars.size.baseSpacings["sp0-5"],
     paddingLeft: theme.vars.size.baseSpacings.sp1,
     paddingRight: "6px",
-    //No hay token para este valor
     paddingTop: theme.vars.size.baseSpacings.sp1,
     fontSize: getTypographyStyles(
       theme.generalSettings.isMobile,
@@ -426,10 +419,7 @@ const dataGridStyles = {
           "body"
         ),
         lineHeight: "var(--rdg-row-height)!important",
-        '&[aria-selected="true"]': {
-          // outline: `2px solid var(--rdg-selection-color)`,
-          // outlineOffset: '-2px',
-        },
+        '&[aria-selected="true"]': {},
         "&:has(> .MuiCheckbox-root)": {
           overflow: "visible",
           paddingInline: 0
@@ -448,15 +438,12 @@ const dataGridStyles = {
           textAlign: "inherit",
           color: theme.vars.palette.text.secondary,
           padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
-          // border: theme.vars.size.baseSpacings.sp0,
+          border: theme.vars.size.baseSpacings.sp0,
           borderTop: "0.5px solid",
-          //Se deja el valor directamente porque no está tokenizado
           borderBottom: theme.vars.size.borderStroke.container,
           borderLeft: "0.5px solid",
-          //Se deja el valor directamente porque no está tokenizado
           borderRight: "0.5px solid",
-          //Se deja el valor directamente porque no está tokenizado
-          borderColor: `${theme.vars.palette?.border.secondary} !important`,
+          borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
         "&:has(> .M4LRadio-root)": {
@@ -473,14 +460,12 @@ const dataGridStyles = {
           position: "sticky !important",
           zIndex: 1
         },
-        // Ajuste de celda checkbox (No header)
         '&:has(> .MuiCheckbox-root):not([role="columnheader"])': {
           overflow: "visible",
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        // Ajuste al checkbox (Header)
         '&[role="columnheader"]:has(> .MuiCheckbox-root)': {
           justifyContent: "center",
           alignItems: "center"
@@ -490,7 +475,6 @@ const dataGridStyles = {
           borderRight: `${theme.vars.size.baseSpacings.sp0} solid ${theme.vars.palette.divider}`,
           position: "absolute",
           right: theme.vars.size.baseSpacings.sp0,
-          // Por desajuste en chrome en el espaciado
           height: "100%"
         },
         "& .m4l_icon": {
@@ -500,7 +484,6 @@ const dataGridStyles = {
           position: "sticky",
           top: 0,
           zIndex: 2,
-          // Ajuste de header checkbox
           "&:has(> .MuiCheckbox-root)": {
             borderTopLeftRadius: theme.vars.size.baseSpacings.sp2,
             overflow: "visible",
@@ -512,7 +495,6 @@ const dataGridStyles = {
       },
       '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
         ...theme.colorSchemes.finalTheme.typography.bodyDens,
-        //ajuste de contenido filtro del DataGrid
         width: "100%",
         display: "-webkit-box !important",
         WebkitBoxOrient: "vertical !important",
@@ -529,12 +511,6 @@ const dataGridStyles = {
         lineHeight: "var(--rdg-summary-row-height)!important",
         color: `${theme.vars.palette.text.secondary}`
       },
-      /**
-       * Estilos para las celdas de datos del grid (no headers, no checkbox)
-       * - .rdg-cell: Todas las celdas del grid
-       * - :not([role="columnheader"]): EXCLUYE las celdas de header
-       * - :not(:has(> .MuiCheckbox-root)): EXCLUYE las celdas que contienen checkbox
-       */
       '& .rdg-cell:not([role="columnheader"]):not(:has(> .MuiCheckbox-root))': {
         display: "-webkit-box !important",
         WebkitBoxOrient: "vertical !important",
@@ -556,20 +532,10 @@ const dataGridStyles = {
           }
         }
       },
-      // Esta condicion para el flujo de cabecera cuando no tiene utilidad sort
       '& .rdg-cell[role="columnheader"] [draggable="true"]': {
         fontWeight: 600
-        //Se utiliza directamente el valor porque no está tokenizado
-      },
-      "&&& [aria-selected=true]": {
-        // backgroundColor: theme.vars.palette.primary?.toneOpacity,
-        // color: theme.vars.palette.text.primary,
-        //cambia el color del contorno de cada celda selecionada
-        // outline: theme.vars.size.borderStroke.container,
-        // outlineOffset: '-1px',
-        // outlineColor: theme.vars.palette.border.main,
       },
-      // Alineaciones
+      "&&& [aria-selected=true]": {},
       "& .rdg-cell.rdg-cell-align-left": {
         textAlign: "start",
         justifyContent: "center",
@@ -578,7 +544,6 @@ const dataGridStyles = {
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             marginRight: "auto"
-            // Alinea en dirección izquierda en el contenedor de la celda cuando es un formatter diferente a texto
           }
         }
       },
@@ -588,7 +553,6 @@ const dataGridStyles = {
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             margin: "0 auto"
-            // Alinea al centro en el contenedor de la celda cuando es un formatter diferente a texto
           }
         }
       },
@@ -598,7 +562,6 @@ const dataGridStyles = {
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             marginLeft: "auto"
-            // Alinea en dirección derecha en el contenedor de la celda cuando es un formatter diferente a texto
           }
         }
       },
@@ -612,7 +575,6 @@ const dataGridStyles = {
         textAlign: "right",
         paddingRight: theme.vars.size.baseSpacings.sp3
       },
-      // Estilado de la ultima celda congelada
       "& .rdg-row .rdg-cell-frozen-last:after": {
         borderRight: `0px solid transparent`
       },
@@ -626,7 +588,6 @@ const dataGridStyles = {
         zIndex: 1,
         left: "var(--rdg-cell-left, 0)"
       },
-      // Estilado de la ultima celda (Quitar la linea divisora derecha)
       "& .rdg-row :last-child:after": {
         borderRight: `0px solid`,
         borderColor: theme.vars.palette.background.surface
@@ -643,7 +604,6 @@ const dataGridStyles = {
           zIndex: 3
         }
       },
-      // Estilado de celdas de la cabecera
       "& .rdg-header-row .rdg-cell": {
         gridTemplateColumns: "auto",
         boxShadow: "unset!important",
@@ -659,7 +619,6 @@ const dataGridStyles = {
         '& [draggable="true"]': {
           fontSize: theme.typography.body
         },
-        // Ultima celda de la cebecera frozen
         "&.rdg-cell-frozen-last": {
           borderColor: theme.vars.palette.background.default,
           boxShadow: "var(--rdg-frozen-cell-box-shadow)"
@@ -674,10 +633,8 @@ const dataGridStyles = {
             }
           }
         },
-        // Modificar el tamaño de la flecha
         "& .rdg-sort-arrow": {}
       },
-      // Estilo específico para el resize handle generado por react-data-grid
       '& [class*="r1y6ywlx"]': {
         cursor: "col-resize",
         position: "absolute",
@@ -686,19 +643,16 @@ const dataGridStyles = {
         insetBlockEnd: 0,
         inlineSize: "10px"
       },
-      // Estilado de la ultima celda Header
       "& .rdg-header-row :last-child.rdg-cell": {
         borderTopRightRadius: theme.vars.size.baseSpacings.sp0,
         "&:after": {
           borderRight: `${theme.vars.size.baseSpacings.sp0} solid transparent`
         }
       },
-      // filter
       "& .filter_cell_div": {
         paddingLeft: theme.vars.size.baseSpacings.sp2,
         paddingRight: theme.vars.size.baseSpacings.sp2
       },
-      //
       "& .rdg-header-sort-cell": {
         width: "100%",
         flexGrow: "1",
@@ -709,8 +663,7 @@ const dataGridStyles = {
     };
   },
   /**
-   * Estilos para el wrapper del CheckboxCellAdapter
-   * Aplica los mismos estilos que los checkboxes dentro de celdas rdg
+   * Estilos para el wrapper del checkbox en las celdas.
    */
   checkboxCellWrapper: ({ theme }) => ({
     "& .checkbox-checked": {
@@ -766,7 +719,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Contenedor de los cards
+   * Estilos para el contenedor de toggle de vista cards.
    */
   containerToggleCards: ({ theme }) => ({
     display: "grid",
@@ -775,7 +728,7 @@ const dataGridStyles = {
     padding: theme.vars.size.baseSpacings.sp3
   }),
   /**
-   * Botón de toggle de cards
+   * Estilos para el botón de toggle de tarjeta.
    */
   cardToggleCardButton: ({ theme, ownerState }) => ({
     display: "flex",
@@ -788,7 +741,7 @@ const dataGridStyles = {
     borderColor: ownerState?.isActive ? theme.vars.palette.primary.toneOpacity : theme.vars.palette.border.disabled
   }),
   /**
-   * Texto del botón de toggle de cards
+   * Estilos para el texto del botón de toggle.
    */
   textToggleCardButton: ({ theme, ownerState }) => ({
     "&.M4LTypography-root": {
@@ -797,7 +750,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Contenedor de los cards
+   * Estilos para el contenedor de tarjetas en CardsView.
    */
   cardsContainer: () => ({
     flexGrow: 1,
@@ -810,7 +763,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Card de la vista cards
+   * Estilos para cada tarjeta individual en CardsView.
    */
   card: ({ theme, ownerState }) => ({
     display: "flex",
@@ -821,24 +774,18 @@ const dataGridStyles = {
     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
     },
-    // Si está selected, usar el color original del Card (primary.enabled)
-    // Este tiene prioridad sobre checked
     ...ownerState?.selected && {
       borderColor: theme.vars.palette.primary.selected
     }
   }),
-  /**
-   * Contenedor del contenido de la card
-   */
   cardContentWrapper: () => ({
     width: "100%"
   }),
   /**
-   * Header de la card con checkbox y acciones
+   * Estilos para el header de la tarjeta.
    */
   cardHeader: ({ theme, ownerState }) => ({
     display: "flex",
@@ -849,14 +796,14 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings.sp2
   }),
   /**
-   * Lado izquierdo del header (checkbox)
+   * Estilos para la sección izquierda del header de tarjeta.
    */
   cardHeaderLeft: () => ({
     display: "flex",
     alignItems: "center"
   }),
   /**
-   * Lado derecho del header (botones de acción)
+   * Estilos para la sección derecha del header de tarjeta.
    */
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
@@ -864,7 +811,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Contenido de la card (body)
+   * Estilos para el contenido de la tarjeta.
    */
   cardContent: ({ theme }) => ({
     display: "flex",
@@ -873,7 +820,7 @@ const dataGridStyles = {
     padding: theme.vars.size.density.compact
   }),
   /**
-   * Contenedor de las columnas de la card
+   * Estilos para el contenedor de label y valor de columna.
    */
   containerLabelValueColumn: ({ theme, ownerState }) => ({
     display: "flex",
@@ -884,7 +831,7 @@ const dataGridStyles = {
     width: ownerState?.hasActions ? "100%" : "auto"
   }),
   /**
-   * Contenedor del contenido de la columna
+   * Estilos para el wrapper del contenido de columna.
    */
   contentWrapperColumn: ({ theme, ownerState }) => ({
     flex: ownerState?.hasActions ? 1 : "none",
@@ -894,7 +841,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Contenedor del detalle de la card
+   * Estilos para el contenedor de detalle de tarjeta.
    */
   cardDetailContainer: ({ theme }) => ({
     display: "flex",
@@ -905,15 +852,15 @@ const dataGridStyles = {
     overflow: "auto"
   }),
   /**
-   * Etiqueta de la columna
+   * Estilos para el label del header de columna.
    */
   labelHeaderColumn: () => ({}),
   /**
-   * Valor de la columna
+   * Estilos para el valor de columna.
    */
   valueColumn: () => ({}),
   /**
-   * Contenedor del editor en la card
+   * Estilos para el wrapper del editor de celda.
    */
   editorCellWrapper: ({ theme, ownerState }) => ({
     overflow: "clip",
@@ -990,7 +937,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Header de la card personalizada (avatar + nombre + email)
+   * Estilos para el header de tarjeta personalizada.
    */
   customCardHeader: ({ theme }) => ({
     display: "flex",
@@ -999,7 +946,7 @@ const dataGridStyles = {
     marginBottom: theme.vars.size.baseSpacings.sp2
   }),
   /**
-   * Avatar con iniciales
+   * Estilos para el avatar de tarjeta personalizada.
    */
   customCardAvatar: ({ theme }) => ({
     width: "32px",
@@ -1013,7 +960,7 @@ const dataGridStyles = {
     flexShrink: 0
   }),
   /**
-   * Contenedor del nombre y email
+   * Estilos para nombre y email en tarjeta personalizada.
    */
   customCardNameEmail: ({ theme }) => ({
     display: "flex",
@@ -1021,7 +968,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Campo con icono (reutilizable para phone, IP, etc)
+   * Estilos para campo con icono en tarjeta personalizada.
    */
   customCardFieldWithIcon: ({ theme }) => ({
     display: "flex",
@@ -1029,7 +976,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings.sp3
   }),
   /**
-   * Contenedor del contenido del campo (label + valor)
+   * Estilos para contenido de campo en tarjeta personalizada.
    */
   customCardFieldContent: ({ theme }) => ({
     display: "flex",
@@ -1037,7 +984,7 @@ const dataGridStyles = {
     gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
-   * Contenedor del icono con border
+   * Estilos para contenedor de icono en tarjeta personalizada.
    */
   customCardIconContainer: ({ theme }) => ({
     width: "24px",
@@ -1051,7 +998,7 @@ const dataGridStyles = {
     flexShrink: 0
   }),
   /**
-   * Estilos para el header del componente
+   * Estilos para el contenedor raíz de las cabeceras arrastrables
    */
   draggableHeaderRoot: () => ({
     cursor: "move",
@@ -1062,12 +1009,9 @@ const dataGridStyles = {
     width: "100%",
     justifyContent: "center"
   }),
-  /**
-   * Estilos para el icono de busqueda para los campos de ordenamiento en columnas
-   */
   iconSearch: {},
   /**
-   * Estilos para el contenedor del input de header
+   * Estilos para el wrapper del input en cabeceras arrastrables
    */
   draggableWrapperInputBase: ({ theme, ownerState }) => ({
     borderTop: "1px solid var(--rdg-border-color)",
@@ -1085,7 +1029,7 @@ const dataGridStyles = {
     }))
   }),
   /**
-   * Estilos de los inputs del header para el filtro
+   * Estilos base para el input del header
    */
   headerInputBase: () => ({
     width: "100%",
@@ -1093,7 +1037,7 @@ const dataGridStyles = {
     backgroundColor: "unset"
   }),
   /**
-   * Estilos para el contenedor del skeleton de los formatter
+   * Estilos para el contenedor del skeleton de carga
    */
   wrapperSkeleton: ({ theme, ownerState }) => ({
     display: "flex",
@@ -1108,7 +1052,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el contenedor del cuerpo del modal de configuración
+   * Estilos para el contenido del modal de configuración
    */
   contentModalSetting: () => ({
     "&": {
@@ -1118,7 +1062,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el contenedor del nombre de la columna y el icono de sort
+   * Estilos para el contenedor de nombre de columna con icono
    */
   nameColumnIcon: ({ theme }) => ({
     display: "flex",
@@ -1128,7 +1072,7 @@ const dataGridStyles = {
     overflow: "visible"
   }),
   /**
-   * Estilos para el contenedor del nombre de la columna
+   * Estilos para el nombre de columna con truncado de texto
    */
   nameColumn: ({ ownerState }) => ({
     display: "-webkit-box",
@@ -1141,21 +1085,18 @@ const dataGridStyles = {
     width: "100%"
   }),
   /**
-   * Estilos para el contenedor del icono de la columna
+   * Estilos para el contenedor de icono de columna
    */
   iconColumn: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1
   }),
-  /**
-   * Estilos para el popover del header actions
-   */
   headerRenderClick: () => ({
     width: "fit-content"
   }),
   /**
-   * Estilos para el menuList del header actions
+   * Estilos para la lista del menú de opciones
    */
   menuList: ({ theme }) => ({
     padding: theme.vars.size.baseSpacings.sp3,
@@ -1168,7 +1109,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el contenedor del boton de acciones del header
+   * Estilos para el botón de acciones del header
    */
   buttonHeaderActions: ({ theme }) => ({
     display: "flex",
@@ -1190,7 +1131,7 @@ const dataGridStyles = {
     }
   }),
   /**
-   * Estilos para el formatter de iconos
+   * Estilos para el formateador de iconos de columna
    */
   columnIconFormatter: ({ theme }) => ({
     display: "flex",

package/components/datagrids/components/DataGridMain/DataGridMain.d.ts

@@ -0,0 +1,28 @@
+import { DataGridProps, RowKey } from '../../types';
+/**
+ * DataGrid es un componente para mostrar datos en formato tabla o cards.
+ *
+ * Características principales:
+ * - Vista de tabla con columnas configurables
+ * - Vista de cards para visualización compacta
+ * - Paginación integrada
+ * - Filtros locales y externos
+ * - Ordenamiento de columnas
+ * - Selección de filas (checkbox/radio)
+ * - Configuración de densidad (compact/standard/confortable)
+ * - Persistencia de configuración del usuario
+ * @example
+ * ```tsx
+ * <DataGrid
+ *   id="my-grid"
+ *   rows={data}
+ *   columns={columns}
+ *   rowKeyGetter={(row) => row.id}
+ *   actionsProps={{
+ *     withPager: true,
+ *     pagerOptions: { totalRecords: 100 }
+ *   }}
+ * />
+ * ```
+ */
+export declare function DataGrid<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: DataGridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

package/components/{DataGrid/DataGrid.js → datagrids/components/DataGridMain/DataGridMain.js}

@@ -1,18 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { H as HeaderActions } from "./subcomponents/HeaderActions/index.js";
-import { F as FilterProvider } from "./contexts/FilterContext/index.js";
-import { D as DataGridProvider } from "./contexts/DataGridContext/index.js";
-import { T as TEST_PROP_COLUMNS } from "./types.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
-import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "./constants.js";
-import { D as DataGridRootStyled, C as CustomHeaderStyled } from "./slots/DataGridSlot.js";
-import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { useRef } from "react";
-import { C as ControlNavigate } from "./subcomponents/ControlNavigate/ControlNavigate.js";
 import { useModuleSkeleton } from "@m4l/core";
-import { R as RenderContent } from "./subcomponents/RenderContent/index.js";
-import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { T as TEST_PROP_COLUMNS } from "../../types.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
+import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
+import { D as DataGridRootStyled, C as CustomHeaderStyled } from "../../slots/DataGridSlot.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { D as DataGridProvider } from "../../contexts/DataGridContext/DataGridContext.js";
+import { F as FilterProvider } from "../../contexts/FilterContext/FilterContext.js";
+import { H as HeaderActions } from "../../subcomponents/HeaderActions/HeaderActions.js";
+import { R as RenderContent } from "../../views/adapters/RenderContent/RenderContent.js";
+import { C as ControlNavigate } from "../../subcomponents/ControlNavigate/ControlNavigate.js";
 function DataGrid(props) {
   const {
     id,
@@ -37,9 +37,7 @@ function DataGrid(props) {
     defaultConfig,
     onChangeConfig,
     defaultUserColumns,
-    // deprecated
     onChangeUserColumns,
-    // deprecated
     size,
     externalSortSettings,
     externalFilterSettings,
@@ -50,9 +48,7 @@ function DataGrid(props) {
   const {
     withSettings,
     settingsProps,
-    // TotalRecords
     withRowsCount,
-    // WithLocalFilters
     withLocalFilters,
     leftActions,
     rightActions,

package/components/datagrids/components/DataGridMain/index.d.ts

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

package/components/datagrids/components/index.d.ts

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

package/components/{DataGrid/contexts/DataGridContext/index.js → datagrids/contexts/DataGridContext/DataGridContext.js}

@@ -11,11 +11,11 @@ import { u as useColumnsWidth } from "../../hooks/useColumnsWidth/useColumnsWidt
 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";
+import { g as getColumnsWidth } from "../../helpers/persistence/getColumnsWidth/getColumnsWidth.js";
+import { g as getViewMode } from "../../helpers/persistence/getViewMode/getViewMode.js";
+import { g as getInitialColumnsConfig } from "../../helpers/shared/getInitialColumnsConfig/getInitialColumnsConfig.js";
+import { g as getAllViewModes } from "../../helpers/shared/getAllViewModes/getAllViewModes.js";
+import { g as getViewSpecificConfig } from "../../helpers/shared/getViewSpecificConfig/getViewSpecificConfig.js";
 const DataGridContext = createContext(null);
 function DataGridProvider(props) {
   const {

package/components/datagrids/contexts/DataGridContext/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGridProvider, DataGridContext } from './DataGridContext';
+export * from './types';

package/components/{DataGrid → datagrids}/contexts/DataGridContext/types.d.ts

@@ -3,7 +3,8 @@ import { RowKey, RowHeightVariants, GridProps, OnChangeConfig } from '../../type
 import { Maybe } from '@m4l/core';
 import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from '../../slots/DataGridEnum';
 import { SortColumn } from 'react-data-grid';
-import { IGridConfig, BaseViewConfig } from '../../types.helpers';
+import { IGridConfig } from '../../helpers/persistence/getColumnsWidth/types';
+import { BaseViewConfig } from '../../helpers/shared/getInitialColumnsConfig/types';
 /**
  * Configuración extendida genérica con propiedades originales
  * USO INTERNO: El contexto usa esto para el estado interno con propiedades de tracking

package/components/{DataGrid/contexts/FilterContext/index.d.ts → datagrids/contexts/FilterContext/FilterContext.d.ts}

@@ -8,5 +8,5 @@ type FilterProviderProps = {
 /**
  * Proveedor de contexto para los filtros de la tabla
  */
-declare function FilterProvider({ children, initialActiveFilters }: FilterProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterProvider({ children, initialActiveFilters, }: FilterProviderProps): import("react/jsx-runtime").JSX.Element;
 export { FilterProvider, FilterContext };

package/components/{DataGrid/contexts/FilterContext/index.js → datagrids/contexts/FilterContext/FilterContext.js}

@@ -6,7 +6,10 @@ const initialState = {
   setActiveFilters: voidFunction
 };
 const FilterContext = createContext(initialState);
-function FilterProvider({ children, initialActiveFilters }) {
+function FilterProvider({
+  children,
+  initialActiveFilters
+}) {
   const [filterOptions, setFilterOptions] = useState({
     activeFilters: initialActiveFilters
   });

package/components/datagrids/contexts/FilterContext/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterProvider, FilterContext } from './FilterContext';
+export * from './types';