@m4l/components 9.1.120 → 9.1.122

package/components/DataGrid/styles.js

@@ -1,14 +1,481 @@
-import { styled } from "@mui/material/styles";
-const DataGridRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  padding: "0px",
-  inset: "0px",
-  overflow: "hidden",
-  container: "container / inline-size",
-  ...theme.components?.M4LDataGrid?.styleOverrides || {}
-}));
+import { alpha } from "@mui/material";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { f as filterHeight } from "./subcomponents/Table/subcomponents/SelectColumn.js";
+const dataGridStyles = {
+  /**
+   * ***************************************************
+   * Estilos para el contenedor principal del DataGrid.
+   * ***************************************************
+   */
+  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: theme.vars.palette.background.default,
+    boxShadow: "unset",
+    borderRadius: theme.vars.size.borderRadius.r1,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette?.border.default,
+    position: "relative",
+    gap: theme.vars.size.baseSpacings.sp1,
+    height: "100%",
+    width: "100%",
+    "& .rdg .MuiCheckbox-root": {
+      "& > svg": {
+        color: theme.vars.palette.text.secondary
+      }
+    },
+    [`&.M4LDataGrid-xs`]: {
+      "& .M4LDataGrid-actions": {
+        height: theme.vars.size.baseSpacings.sp11,
+        "& .M4LPager-labelRowsPerPageContainer": {
+          "& .M4LTypography-root": {
+            display: "none"
+          }
+        },
+        "& .M4LPager-labelDisplayRows": {
+          display: "none"
+        }
+      }
+    },
+    "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
+      top: `${theme.vars.size.baseSpacings.sp0} !important`
+    },
+    "&& .M4lclassCssSpecificity": {
+      fontWeight: 400
+      //Se utiliza directamente el valor porque no está tokenizado
+    }
+  }),
+  /**
+   * Estilos del contenedor de las acciones
+   */
+  actionsRoot: ({ theme }) => ({
+    alignItems: "center",
+    background: theme.vars.palette.background.default,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    display: "flex",
+    flexDirection: "row",
+    fontWeight: 400,
+    //Se utiliza directamente el valor porque no está tokenizado
+    gap: theme.vars.size.baseSpacings.sp2,
+    height: theme.vars.size.baseSpacings.sp8,
+    justifyContent: "space-between",
+    left: theme.vars.size.baseSpacings.sp0,
+    lineHeight: theme.vars.size.baseSpacings.sp4,
+    minHeight: theme.vars.size.baseSpacings.sp8,
+    padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
+    position: "absolute",
+    right: theme.vars.size.baseSpacings.sp0,
+    top: theme.vars.size.baseSpacings.sp0,
+    fontsize: getTypographyStyles(theme.generalSettings.isMobile, "medium", "body").fontSize,
+    "@container main (max-width: 600px)": {
+      height: theme.vars.size.baseSpacings.sp11
+    }
+  }),
+  /**
+   * container de los botones de acciones
+   */
+  actionsConfigContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings.sp2,
+    marginLeft: theme.vars.size.baseSpacings.sp3,
+    "& .M4LIconButton-root": {
+      background: theme.vars.palette.background.default
+    }
+  }),
+  /**
+   * Estilos para el contenedor principal de RowsCount
+   */
+  rowsCountRoot: ({ theme }) => ({
+    alignItems: "center",
+    display: "flex",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Estilos para el label de RowsCount
+   */
+  rowsCountLabel: ({ theme }) => ({
+    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(theme.generalSettings.isMobile, "medium", "body").fontSize
+  }),
+  /**
+   * Estilos para el valor de RowsCount
+   */
+  rowsCountValue: ({ theme }) => ({
+    background: theme.vars.palette.background.default,
+    borderRadius: theme.vars.size.baseSpacings.sp1,
+    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, "medium", "body").fontSize
+  }),
+  /**
+   * Estilos para el contenedor de las columnas
+   * de la tabla del modal de configuración de columnas.
+   */
+  columnsConfigWrapper: ({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    width: "100%"
+  }),
+  /**
+   * Estilos para la configuración
+   * de selección de las columnas en
+   * el modal de configuración de columnas.
+   */
+  columnsConfigSelColumns: ({ theme }) => ({
+    fontWeight: 600,
+    //Se utiliza directamente el valor porque no está tokenizado
+    lineHeight: theme.vars.size.typography.lineHeight.lh2,
+    color: theme.vars.palette.text.primary,
+    padding: `${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp2}`
+  }),
+  /**
+   * Estilos para el contenedor de la tabla
+   * en el modal de configuración de columnas.
+   */
+  columnsConfigDataGrid: () => ({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "auto"
+  }),
+  /**
+   * Estilos para el contenedor de los botones
+   * de acción en el modal de configuración de columnas.
+   */
+  columnsConfigActios: ({ theme }) => ({
+    paddingTop: theme.vars.size.baseSpacings.sp4,
+    paddingBottom: theme.vars.size.baseSpacings.sp2,
+    display: "flex",
+    flexDirection: "row"
+  }),
+  /**
+   * *****************************************
+   * Estilos el el input editor del DataGrid.
+   * *****************************************
+   */
+  inputTexEditor: ({ theme }) => ({
+    appearance: "none",
+    boxSizing: "border-box",
+    inlineSize: "100%",
+    blockSize: "100%",
+    paddingBlock: theme.vars.size.baseSpacings.sp0,
+    verticalAlign: "top",
+    textAlign: "right",
+    fontFamily: "inherit",
+    "&:focus": {
+      outline: "none"
+    },
+    "&::placeholder": {
+      opacity: "1"
+    }
+  }),
+  /**
+   * ****************************************
+   * Estilos para los componetes Table
+   * ****************************************
+   */
+  /**
+   * Estilos para el contenedor principal
+   * del componente Table.
+   */
+  tableContaniner: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    position: "absolute",
+    top: theme.vars.size.baseSpacings.sp8,
+    bottom: theme.vars.size.baseSpacings.sp0,
+    left: theme.vars.size.baseSpacings.sp0,
+    right: theme.vars.size.baseSpacings.sp0,
+    overflow: "hidden",
+    padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp1}`,
+    borderRadius: theme.vars.size.baseSpacings.sp1,
+    border: "none",
+    boxshadow: theme.customShadows?.z2,
+    background: theme.vars.palette.background.default,
+    ["@container main (max-width: 600px)"]: {
+      top: theme.vars.size.baseSpacings.sp11
+    }
+  }),
+  /**
+   * Estilos para el contenedor del dataGrid
+   */
+  tableWrapperDataGrid: ({ theme }) => ({
+    position: "relative",
+    height: "100%",
+    overflow: "hidden",
+    borderRadius: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp0}`,
+    "& .rdg ": {
+      border: "none",
+      background: theme.vars.palette.background.default,
+      gridColumnGap: theme.vars.size.baseSpacings.sp0,
+      gridRowGap: theme.vars.size.baseSpacings.sp0,
+      userSelect: "initial",
+      height: "100%",
+      contentVisibility: "unset",
+      overflow: "auto",
+      padding: theme.vars.size.baseSpacings.sp0,
+      "--rdg-grid-inline-size": theme.vars.size.baseSpacings.sp0,
+      "--rdg-header-background-color": theme.vars.palette.primary.opacity,
+      "--rdg-row-selected-background-color": theme.vars.palette.primary.opacity,
+      "--rdg-row-hover-background-color": theme.vars.palette.primary.opacity,
+      "--rdg-background-color": theme.vars.palette.background.default,
+      "--rdg-selection-color": theme.vars.palette.primary.focusVisible,
+      "--row-selected-hover-background-color": theme.vars.palette.primary.toneOpacity,
+      "--rdg-checkbox-color": theme.vars.palette.primary.main,
+      "--rdg-checkbox-focus-color": alpha(
+        theme.colorSchemes.finalTheme.palette.primary.main,
+        theme.colorSchemes.finalTheme.palette.action.selectedOpacity
+      ),
+      "--rdg-border-color": "none",
+      "&:last-child .rdg-cell": {
+        borderTop: "0.5px solid",
+        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.disabled
+      }
+    },
+    '& [role="columnheader"]': {
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    "& .rdg-row": {
+      '&[aria-selected="false"] .rdg-cell': {
+        backgroundColor: theme.vars.palette.background.default,
+        borderLeft: "0.5px solid",
+        borderColor: theme.vars.palette?.border.disabled
+      },
+      "&:nth-of-type(odd)": {
+        "& .rdg-cell": {
+          backgroundColor: theme.vars.palette.background.default
+        }
+      },
+      '&[aria-selected="true"] .rdg-cell': {
+        backgroundColor: theme.vars.palette.primary?.toneOpacity
+      },
+      "&:hover": {
+        "& .rdg-cell": {
+          backgroundColor: `${theme.vars.palette.default.enabled} !important`,
+          transition: "background-color 0.1s linear"
+        }
+      },
+      backgroundColor: "transparent"
+    },
+    "& .rdg-cell": {
+      transition: "background-color 0.1s linear",
+      borderBottom: `${theme.vars.size.baseSpacings.sp0} solid transparent`,
+      borderRight: `0.5px solid transparent`,
+      //Se deja el valor directamente porque no está tokenizado
+      borderColor: theme.vars.palette.background.neutral,
+      color: theme.vars.palette.text.secondary,
+      display: "inline",
+      justifyContent: "center",
+      alignItems: "center",
+      textOverflow: "inline",
+      gridTemplateColumns: "auto",
+      "& .rdg-text-editor": {
+        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,
+        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.disabled} !important`,
+        ...theme.colorSchemes.finalTheme.typography.body
+      },
+      "&.rdg-cell-frozen": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        boxShadow: "unset"
+      },
+      "&:after": {
+        content: `""`,
+        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": {
+        height: "100%"
+      }
+    },
+    '& .rdg-cell[role="gridcell"]': {
+      ...theme.colorSchemes.finalTheme.typography.body,
+      lineHeight: "var(--rdg-row-height)!important"
+    },
+    '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
+      ...theme.colorSchemes.finalTheme.typography.bodyDens,
+      //ajuste de contenido filtro del DataGrid
+      height: theme.vars.size.baseSpacings.sp7,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    // 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.primary.focusVisible
+    },
+    // Alineaciones
+    "& .rdg-cell.rdg-cell-align-left": {
+      textAlign: "start",
+      display: "inline",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    "& .rdg-cell.rdg-cell-align-center": {
+      textAlign: "center",
+      display: "flex"
+    },
+    "& .rdg-cell.rdg-cell-align-right": {
+      textAlign: "right"
+    },
+    // Estilado de la ultima celda congelada
+    "& .rdg-row .rdg-cell-frozen-last:after": {
+      borderRight: `0px solid transparent`
+    },
+    // Estilado de la ultima celda (Quitar la linea divisora derecha)
+    "& .rdg-row :last-child:after": {
+      borderRight: `0px solid`,
+      borderColor: theme.vars.palette.background.surface
+    },
+    "& .rdg-header-row": {
+      backgroundColor: theme.vars.palette.primary.toneOpacity
+    },
+    // Estilado de celdas de la cabecera
+    "& .rdg-header-row .rdg-cell": {
+      fontFamily: theme.typography.body,
+      fontWeight: theme.typography.body,
+      fontSize: theme.typography.body,
+      color: theme.vars.palette.text.primary,
+      borderRight: "0.5px solid !important",
+      boxShadow: "none",
+      gridTemplateColumns: "auto",
+      borderBottom: "0.5px solid !important",
+      borderColor: `${theme.vars.palette?.border.disabled} !important`,
+      placeContent: "center",
+      '& [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)"
+      },
+      "& .rdg-header-sort-cell": {
+        "& .rdg-header-sort-name + span": {
+          position: "absolute",
+          margin: "auto",
+          right: "5px",
+          //Este valor no está tokenizado
+          "& .rdg-sort-arrow": {
+            width: theme.vars.size.baseSpacings.sp2
+          }
+        }
+      },
+      // Modificar el tamaño de la flecha
+      "& .rdg-sort-arrow": {}
+    },
+    // 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",
+      alignItems: "center",
+      color: theme.vars.palette.text.primary
+    }
+  }),
+  /**
+   * Estilos para el header del componente
+   */
+  draggableHeaderRoot: () => ({
+    cursor: "move",
+    display: "flex",
+    flexDirection: "column",
+    lineHeight: "1",
+    height: "100%",
+    justifyContent: "center",
+    textAlign: "center"
+  }),
+  /**
+   * Estilos para el contenedor del input de header
+   */
+  draggableWrapperInputBase: () => ({
+    borderTop: "1px solid var(--rdg-border-color)",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    height: `${filterHeight}px`
+  }),
+  /**
+   * Estilos de los inputs del header para el filtro
+   */
+  headerInputBase: ({ theme }) => ({
+    width: "100%",
+    paddingBottom: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Estilos para el contenedor del skeleton de los formatter
+   */
+  wrapperSkeleton: () => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    alignItems: "center"
+  }),
+  /**
+   * Estilos para el contenedor del cuerpo del modal de configuración
+   */
+  contentModalSetting: () => ({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  })
+};
 export {
-  DataGridRoot as D
+  dataGridStyles as d
 };

package/components/DataGrid/subcomponents/Actions/index.d.ts

@@ -1,5 +1,5 @@
 import { InternalActionsProps } from './types';
 /**
- * TODO: Documentar
+ * Componente que renderiza las acciones del DataGrid
  */
 export declare function Actions(props: InternalActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/index.js

@@ -5,14 +5,14 @@ import { S as Settings } from "./subcomponents/Settings/index.js";
 import { R as RowsCount } from "./subcomponents/RowsCount/index.js";
 import { D as Density } from "./subcomponents/Density/index.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { useResponsiveContainerStore } from "@m4l/graphics";
+import { useIsMobile } from "@m4l/graphics";
 import { useModuleDictionary } from "@m4l/core";
 import { d as dictionary } from "../../dictionary.js";
-import { shallow } from "zustand/shallow";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
+import { A as ActionsRootStyled, a as ActionsConfigContainerStyled } from "../../slots/DataGridSlot.js";
 function Actions(props) {
-  const isXs = useResponsiveContainerStore((state) => state.isXs, shallow);
-  const { rowHeights, classes } = useDataGrid();
+  const isMobile = useIsMobile();
+  const { rowHeights } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const {
     withRowsCount = true,
@@ -22,8 +22,8 @@ function Actions(props) {
     settingsProps,
     withLocalFilters
   } = props;
-  return /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
-    withRowsCount && !isXs && /* @__PURE__ */ jsx(RowsCount, {}),
+  return /* @__PURE__ */ jsxs(ActionsRootStyled, { children: [
+    withRowsCount && !isMobile && /* @__PURE__ */ jsx(RowsCount, {}),
     withPager && pagerOptions && /* @__PURE__ */ jsx(
       Pager,
       {
@@ -33,7 +33,7 @@ function Actions(props) {
         labelOf: getLabel(dictionary.LABEL_OF)
       }
     ),
-    isXs ? /* @__PURE__ */ jsx(MobileMenuActions, {}) : /* @__PURE__ */ jsxs("div", { className: classes.actionsConfigContainer, children: [
+    isMobile ? /* @__PURE__ */ jsx(MobileMenuActions, {}) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { children: [
       typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
       withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps })

package/components/DataGrid/subcomponents/Actions/subcomponents/Density/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * TODO: Documentar
+ * Renderiza el componente de densidad de filas en el DataGrid
  */
 export declare function Density(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/subcomponents/Density/index.js

@@ -4,9 +4,11 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { d as dictionary } from "../../../../dictionary.js";
 function Density() {
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { rowHeights, currentRowHeightVariant, setRowHeightVariant, classes } = useDataGrid();
+  const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const menuActions = useMemo(() => {
     if (typeof rowHeights === "number") {
@@ -15,24 +17,24 @@ function Density() {
     return [
       {
         type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
         onClick: () => setRowHeightVariant("compact"),
         disabled: currentRowHeightVariant === "compact",
-        label: "data_grid.density_compact"
+        label: getLabel(dictionary.DENSITY_COMPACT)
       },
       {
         type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
         onClick: () => setRowHeightVariant("standard"),
         disabled: currentRowHeightVariant === "standard",
-        label: "data_grid.density_standard"
+        label: getLabel(dictionary.DENSITY_STANDARD)
       },
       {
         type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
         onClick: () => setRowHeightVariant("confortable"),
         disabled: currentRowHeightVariant === "confortable",
-        label: "data_grid.density_confortable"
+        label: getLabel(dictionary.DENSITY_CONFORTABLE)
       }
     ];
   }, [
@@ -45,12 +47,12 @@ function Density() {
   const theme = useTheme();
   const currenViewIcon = useMemo(() => {
     if (currentRowHeightVariant === "compact") {
-      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
+      return `${host_static_assets}/${environment_assets}/${pathIcons.compact}`;
     }
     if (currentRowHeightVariant === "standard") {
-      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
+      return `${host_static_assets}/${environment_assets}/${pathIcons.standard}`;
     }
-    return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
+    return `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`;
   }, [currentRowHeightVariant, host_static_assets, environment_assets]);
   if (menuActions.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
@@ -59,13 +61,12 @@ function Density() {
     MenuActions,
     {
       arrowType: "right-top",
-      className: classes.actionDensityPopover,
       menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "right" },
       menuActions,
       icon: currenViewIcon,
-      toolTip: getLabel("data_grid.tooltip_density")
+      toolTip: getLabel(dictionary.DENSITY_TOOLTIP)
     }
   );
 }

package/components/DataGrid/subcomponents/Actions/subcomponents/Filter/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * TODO: Documentar
+ * Componente que renderiza el icono de filtro en el DataGrid
  */
 export declare function Filter(): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/subcomponents/Filter/index.js

@@ -1,23 +1,22 @@
 import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
 import { u as useFilters } from "../../../../hooks/useFilters.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
-import { useEnvironment } from "@m4l/core";
-import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { d as dictionary } from "../../../../dictionary.js";
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useDataGrid();
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };
   return /* @__PURE__ */ jsx(
     IconButton,
     {
-      dictionaryTooltipId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
-      className: classes.actionFilter,
+      dictionaryTooltipId: activeFilters ? dictionary.TOOLTIP_FILTER_HIDE : dictionary.TOOLTIP_FILTER_SHOW,
       onClick: toggleIcon,
       "aria-label": "filter",
-      src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`
     }
   );
 }

package/components/DataGrid/subcomponents/Actions/subcomponents/MobileMenuActions/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * TODO: Documentar
+ * Renderiza las acciones cuando el dispositivo es un móvil
  */
 export declare const MobileMenuActions: () => import("react/jsx-runtime").JSX.Element;