@m4l/components 9.2.56-beta.2 → 9.2.57

package/components/DataGrid/styles.js

@@ -0,0 +1,484 @@
+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.sp3,
+    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
+    }
+  }),
+  customHeader: ({ ownerState }) => ({
+    display: ownerState.visibleCustomHeader ? "block" : "none"
+  }),
+  /**
+   * 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",
+    lineHeight: theme.vars.size.baseSpacings.sp4,
+    minHeight: theme.vars.size.baseSpacings.sp8,
+    padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
+    right: theme.vars.size.baseSpacings.sp0,
+    top: theme.vars.size.baseSpacings.sp0,
+    fontsize: getTypographyStyles(theme.generalSettings.isMobile, "medium", "body").fontSize,
+    '& [class*="M4LPager-root"]': {
+      flexGrow: 1
+    },
+    "@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,
+    alignItems: "center",
+    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: "relative",
+    flexGrow: 1,
+    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.enabled,
+      "--rdg-checkbox-focus-color": alpha(
+        theme.colorSchemes.finalTheme.palette.primary.enabled,
+        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: "grid",
+      alignContent: "center"
+    },
+    "& .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 {
+  dataGridStyles as d
+};

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

@@ -0,0 +1,5 @@
+import { InternalActionsProps } from './types';
+/**
+ * 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

@@ -0,0 +1,49 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { F as Filter } from "./subcomponents/Filter/index.js";
+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 { useIsMobile } from "@m4l/graphics";
+import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
+import { A as ActionsRootStyled, a as ActionsConfigContainerStyled } from "../../slots/DataGridSlot.js";
+import { P as Pager } from "../../../Pager/Pager.js";
+function Actions(props) {
+  const isMobile = useIsMobile();
+  const { rowHeights } = useDataGrid();
+  const {
+    withRowsCount = true,
+    withPager = true,
+    pagerOptions,
+    withSettings = true,
+    settingsProps,
+    withLocalFilters,
+    leftActions,
+    rightActions,
+    columns
+  } = props;
+  return /* @__PURE__ */ jsxs(ActionsRootStyled, { children: [
+    withRowsCount && !withPager && !isMobile && /* @__PURE__ */ jsx(RowsCount, {}),
+    withPager && pagerOptions && /* @__PURE__ */ jsx(
+      Pager,
+      {
+        ...pagerOptions,
+        totalRecords: pagerOptions.totalRecords
+      }
+    ),
+    isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftActions,
+      /* @__PURE__ */ jsx(MobileMenuActions, { columns }),
+      rightActions
+    ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { children: [
+      leftActions,
+      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
+      withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
+      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns }),
+      rightActions
+    ] })
+  ] });
+}
+export {
+  Actions as A
+};

package/components/DataGrid/subcomponents/{HeaderActions → Actions}/subcomponents/Density/index.js

@@ -5,7 +5,7 @@ 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";
+import { D as DICTIONARY } from "../../../../dictionary.js";
 function Density() {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { rowHeights, currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
@@ -20,21 +20,21 @@ function Density() {
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.compact}`,
         onClick: () => setRowHeightVariant("compact"),
         disabled: currentRowHeightVariant === "compact",
-        label: getLabel(dictionary.DENSITY_COMPACT)
+        label: getLabel(DICTIONARY.DENSITY_COMPACT)
       },
       {
         type: "menuItem",
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.standard}`,
         onClick: () => setRowHeightVariant("standard"),
         disabled: currentRowHeightVariant === "standard",
-        label: getLabel(dictionary.DENSITY_STANDARD)
+        label: getLabel(DICTIONARY.DENSITY_STANDARD)
       },
       {
         type: "menuItem",
         startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.confortable}`,
         onClick: () => setRowHeightVariant("confortable"),
         disabled: currentRowHeightVariant === "confortable",
-        label: getLabel(dictionary.DENSITY_CONFORTABLE)
+        label: getLabel(DICTIONARY.DENSITY_CONFORTABLE)
       }
     ];
   }, [
@@ -62,12 +62,11 @@ function Density() {
     {
       arrowType: "right-top",
       menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
       menuActions,
       icon: currenViewIcon,
-      toolTip: getLabel(dictionary.DENSITY_TOOLTIP),
-      paperProps: { style: { marginTop: "5px" } }
+      toolTip: getLabel(DICTIONARY.DENSITY_TOOLTIP)
     }
   );
 }

package/components/DataGrid/subcomponents/{HeaderActions → Actions}/subcomponents/Filter/index.js

@@ -3,7 +3,7 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { u as useFilters } from "../../../../hooks/useFilters.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../icons.js";
-import { d as dictionary } from "../../../../dictionary.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -14,7 +14,7 @@ function Filter() {
   return /* @__PURE__ */ jsx(
     IconButton,
     {
-      tooltip: activeFilters ? getLabel(dictionary.TOOLTIP_FILTER_HIDE) : getLabel(dictionary.TOOLTIP_FILTER_SHOW),
+      tooltip: activeFilters ? getLabel(DICTIONARY.TOOLTIP_FILTER_HIDE) : getLabel(DICTIONARY.TOOLTIP_FILTER_SHOW),
       onClick: toggleIcon,
       "aria-label": "filter",
       icon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`

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

@@ -0,0 +1,7 @@
+import { Column } from 'react-data-grid';
+/**
+ * Renderiza las acciones cuando el dispositivo es un móvil
+ */
+export declare const MobileMenuActions: (props: {
+    columns: readonly Column<any, any>[];
+}) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/{HeaderActions → Actions}/subcomponents/MobileMenuActions/index.js

@@ -5,12 +5,13 @@ import { u as useFilters } from "../../../../hooks/useFilters.js";
 import { u as useModalSettings } from "../hooks/useModalSettings/index.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-const MobileMenuActions = () => {
+const MobileMenuActions = (props) => {
+  const { columns } = props;
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentRowHeightVariant, setRowHeightVariant, size } = useDataGrid();
+  const { currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
   const { activeFilters, setActiveFilters } = useFilters();
-  const modalSettings = useModalSettings(size);
+  const modalSettings = useModalSettings(columns);
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };
@@ -52,7 +53,6 @@ const MobileMenuActions = () => {
   return /* @__PURE__ */ jsx(
     MenuActions,
     {
-      className: "mobile-menu-actions",
       icon: `${host_static_assets}/${environment_assets}/${pathIcons.menu}`,
       arrowType: "no-arrow",
       anchorOrigin: { vertical: "bottom", horizontal: "right" },

package/components/DataGrid/subcomponents/{HeaderActions → Actions}/subcomponents/RowsCount/index.js

@@ -2,14 +2,14 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, e as RowsCountLabelStyled, f as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, b as RowsCountLabelStyled, c as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
-  const { rowsCount, size } = useDataGrid();
+  const { rowsCount } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(RowsCountRootStyled, { children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RowsCountLabelStyled, { ownerState: { size }, children: getLabel("data_grid.rows") }),
-    /* @__PURE__ */ jsx(RowsCountValueStyled, { ownerState: { size }, children: rowsCount })
+    /* @__PURE__ */ jsx(RowsCountLabelStyled, { children: getLabel("data_grid.rows") }),
+    /* @__PURE__ */ jsx(RowsCountValueStyled, { children: rowsCount })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(RowsCountLabelStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40px", height: "16px" }) }),
     /* @__PURE__ */ jsx(RowsCountValueStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "20px", height: "16px" }) })

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

@@ -0,0 +1,5 @@
+import { SettingsProps } from './types';
+/**
+ * Componente que renderiza el icono de configuración en el DataGrid
+ */
+export declare function Settings(props: SettingsProps): import("react/jsx-runtime").JSX.Element;