@m4l/components 0.1.78 → 0.1.80

package/components/DataGrid/{index.9fb3e6a1.js → index.2f175eba.js}

@@ -1,199 +1,63 @@
-import { styled, alpha } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect, useImperativeHandle } from "react";
 import { S as SELECT_COLUMN_KEY, u as useRowSelection, a as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.d46d625e.js";
 import { useDrag, useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { SvgIcon, Checkbox, InputBase, Skeleton } from "@mui/material";
+import { SvgIcon, Checkbox, InputBase, useTheme, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString, useEnvironment } from "@m4l/core";
 import { M as MenuActions } from "../mui_extended/MenuActions/index.43a2e1ae.js";
-import { g as getPagerComponentsDictionary, P as Pager } from "../mui_extended/Pager/index.2f6d6d7d.js";
+import { g as getPagerComponentsDictionary, P as Pager } from "../mui_extended/Pager/index.82e89328.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.12f1a3c3.js";
-import { u as useModal } from "../../hooks/useModal/index.8e85f7ae.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.d536ccfa.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.aa1648eb.js";
+import { unstable_composeClasses } from "@mui/base";
+import { u as useModal } from "../../hooks/useModal/index.e1c5c31e.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.1051a117.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.bfe3256c.js";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import "../Icon/index.9fcd1476.js";
 import "clsx";
-import "../modal/index.00efea85.js";
-import { A as Actions$1 } from "../CommonActions/components/Actions/index.52125041.js";
+import "../modal/index.b0a7236c.js";
+import { A as Actions$1 } from "../CommonActions/components/Actions/index.19d67bc6.js";
 import "react-hook-form";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.4288f9fc.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.02c4e7be.js";
-import "../areas/components/AreasAdmin/index.43ecd998.js";
+import "../areas/contexts/AreasContext/index.0a08a08b.js";
+import "../areas/components/AreasAdmin/index.7a0dabbe.js";
 import "zustand/shallow";
 import "../ScrollBar/index.bbe48f4d.js";
-import "../mui_extended/Accordion/index.9877f7bf.js";
+import "../mui_extended/Accordion/index.a6447bf8.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
-import "../mui_extended/Badge/index.8c2b8b66.js";
+import "../mui_extended/CheckBox.5f6c78b0.js";
+import "../mui_extended/Badge/index.cad260fe.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Tab/index.7c82e43d.js";
+import "../mui_extended/Tab/index.c39a6681.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
-import "../areas/components/AreasViewer/index.14e62059.js";
+import "../areas/components/AreasViewer/index.fd49f06c.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
-import { W as WindowBase } from "../modal/WindowBase.a0c0b322.js";
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.d9937d46.js";
+import { W as WindowBase } from "../modal/WindowBase.7e19843e.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.fbc4cd71.js";
 import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.e8de8e4c.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { C as ConcatenatedFormatter } from "../formatters/index.67aeb049.js";
-const WrapperGrid = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  padding: "0px",
-  inset: "0px",
-  overflow: "hidden"
-}));
-const OriginalDataGridWrapperStyled = styled("div")(({
-  theme
-}) => ({
-  position: "absolute",
-  bottom: "0px",
-  top: "0px",
-  left: "0px",
-  right: "0px",
-  "& .rdg ": {
-    userSelect: "initial",
-    height: "100%",
-    contentVisibility: "unset",
-    overflow: "scroll",
-    borderRadius: "5px",
-    "--rdg-grid-inline-size": "0px",
-    "--rdg-header-background-color": theme.palette.grid?.sectionHeader,
-    "--rdg-row-selected-background-color": theme.palette.mode === "light" ? theme.palette.primary.LightSelected : theme.palette.primary.DarkSelected,
-    "--rdg-row-hover-background-color": theme.palette.grid?.rowHover,
-    "--rdg-background-color": theme.palette.background.default,
-    "--rdg-selection-color": theme.palette.primary.main,
-    "--row-selected-hover-background-color": theme.palette.mode === "light" ? theme.palette.primary.LightSelectedHover : theme.palette.primary.DarkSelectedHover,
-    "--rdg-checkbox-color": theme.palette.primary.main,
-    "--rdg-checkbox-focus-color": alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-    "--rdg-border-color": theme.palette.divider
-  },
-  "& .rdg::-webkit-scrollbar": {
-    width: "6px",
-    height: "6px",
-    borderRadius: "3px",
-    backgroundColor: "transparent"
-  },
-  "& .rdg::-webkit-scrollbar-track": {
-    backgroundColor: "transparent",
-    border: "0px solid transparent"
-  },
-  "& .rdg::-webkit-scrollbar-corner": {
-    backgroundColor: "transparent"
-  },
-  "& ::-webkit-scrollbar-thumb": {
-    borderRadius: "10px",
-    backgroundColor: theme.palette.divider,
-    border: "0px solid transparent"
-  },
-  '& [role="columnheader"]': {
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  "& .rdg-cell": {
-    fontFamily: theme.typography.body2.fontFamily,
-    fontWeight: theme.typography.body2.fontWeight,
-    fontSize: theme.typography.body2.fontSize,
-    color: theme.palette.text.secondary,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    borderRight: `0px solid transparent`,
-    position: "relative",
-    "&.rdg-cell-frozen": {
-      position: "sticky"
-    },
-    "&:after": {
-      content: `""`,
-      borderRight: `1px solid ${theme.palette.divider}`,
-      position: "absolute",
-      right: "0px",
-      top: "25%",
-      bottom: "25%"
-    },
-    "& .m4l_icon": {
-      height: "100%"
-    }
-  },
-  "& .rdg-cell.rdg-cell-align-left": {
-    textAlign: "left"
-  },
-  "& .rdg-cell.rdg-cell-align-center": {
-    textAlign: "center"
-  },
-  "& .rdg-cell.rdg-cell-align-right": {
-    textAlign: "right"
-  },
-  "& .rdg-row .rdg-cell-frozen-last:after": {
-    borderRight: `0px solid transparent`,
-    boxShadow: "none"
-  },
-  "& .rdg-row :last-child:after": {
-    borderRight: `0px solid transparent`
-  },
-  "& .rdg-header-row .rdg-cell": {
-    fontFamily: theme.typography.subtitle2.fontFamily,
-    fontWeight: theme.typography.subtitle2.fontWeight,
-    fontSize: theme.typography.subtitle2.fontSize,
-    color: theme.palette.text.primary,
-    borderRight: `0px solid transparent`,
-    boxShadow: "none",
-    "&.rdg-cell-frozen-last": {
-      "&:after": {
-        borderRight: `0px solid transparent`
-      },
-      boxShadow: "var(--rdg-frozen-cell-box-shadow)"
-    },
-    "& .rdg-sort-arrow": {
-      width: theme.spacing(1),
-      margin: `0 ${theme.spacing(0.5)}`
-    }
-  },
-  "& .rdg-header-row :last-child.rdg-cell": {
-    borderTopRightRadius: "5px",
-    "&:after": {
-      borderRight: `0px solid transparent`
-    }
-  },
-  "& .filter_cell_div": {
-    paddingLeft: theme.spacing(0.5),
-    paddingRight: theme.spacing(0.5)
-  },
-  "& .rdg-header-sort-cell": {
-    width: "100%",
-    flexGrow: "1",
-    alignItems: "center"
-  },
-  '& [aria-columnsort="ASC"]': {
-    borderTop: `2px solid ${theme.palette.primary.main}`
-  },
-  '& [aria-columnsort="DESC"]': {
-    borderBottom: `2px solid ${theme.palette.primary.main}`
-  }
-}));
-const WrapperTable = styled("div", {
-  shouldForwardProp: (prop) => prop !== "withActions"
-})(({
-  withActions,
+const DataGridRoot = styled("div")(({
   theme
 }) => ({
   display: "flex",
   flexDirection: "column",
   position: "absolute",
-  top: withActions ? theme.spacing(5.5) : "0px",
-  bottom: "0px",
-  left: "0px",
-  right: "0px",
-  overflow: "hidden"
+  padding: "0px",
+  inset: "0px",
+  overflow: "hidden",
+  ...theme.components?.M4LDataGrid?.styleOverrides
 }));
 function CheckboxIcon(props) {
   return /* @__PURE__ */ jsx(SvgIcon, {
@@ -336,7 +200,8 @@ function DataGridProvider(props) {
     initialRowHeightVariant = "compact",
     checkedRows,
     onCheckedRowsChange,
-    rowKeyGetter
+    rowKeyGetter,
+    classes
   } = props;
   const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
   const [columnsConfig, setColumnsConfigOptions] = useState(() => []);
@@ -426,6 +291,7 @@ function DataGridProvider(props) {
       onChangeColumnWidth,
       setRowsCount: setRowFilterCountInternal,
       rowActionsGetter,
+      classes,
       setRowHeightVariant: setCurrentRowHeightInternal,
       onCheckedRowsChange,
       rowKeyGetter
@@ -697,8 +563,10 @@ const getDragHeaderRenderer = (handleColumnsReorder) => {
 const ACTIONS_COLUMN_KEY = "actions-row";
 function ActionsFormatter(props) {
   const {
-    rowActionsGetter
+    rowActionsGetter,
+    classes
   } = useDataGrid();
+  const theme = useTheme();
   if (rowActionsGetter === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
@@ -706,6 +574,8 @@ function ActionsFormatter(props) {
     arrowType: "top-left",
     objItem: props.row,
     menuActions: rowActionsGetter,
+    className: classes.actionsFormatter,
+    menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
     marginTop: 1,
     marginLeft: "-11px",
     anchorOrigin: {
@@ -739,7 +609,11 @@ const WrapperSkeleton = styled("div")(() => ({
   alignItems: "center"
 }));
 function SkeletonFormatter() {
+  const {
+    classes
+  } = useDataGrid();
   return /* @__PURE__ */ jsx(WrapperSkeleton, {
+    className: classes.skeletonFormatter,
     children: /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
       width: "100%",
@@ -916,7 +790,6 @@ function Table(props) {
   const {
     columns,
     rows,
-    withActions,
     onRowsChange,
     rowKeyGetter,
     selectedRows,
@@ -935,7 +808,8 @@ function Table(props) {
     onChangeColumnWidth,
     setRowsCount,
     currentRowHeight,
-    currentRowHeaderHeight
+    currentRowHeaderHeight,
+    classes
   } = useDataGrid();
   const ref_data_grid = useRef(null);
   const onRowClick = (row) => {
@@ -970,11 +844,10 @@ function Table(props) {
   const onChangeSort = (newSortColumns) => {
     setSortColumns(newSortColumns);
   };
-  return /* @__PURE__ */ jsx(WrapperTable, {
-    id: "WrapperTable",
-    withActions,
-    children: /* @__PURE__ */ jsx(OriginalDataGridWrapperStyled, {
-      id: "OriginalGridWrapperStyled",
+  return /* @__PURE__ */ jsx("div", {
+    className: classes.tableContaniner,
+    children: /* @__PURE__ */ jsx("div", {
+      className: classes.wrapperDataGridCss,
       children: /* @__PURE__ */ jsx(DndProvider, {
         backend: HTML5Backend,
         context: window,
@@ -1006,17 +879,7 @@ function Table(props) {
     })
   });
 }
-const SKTWrapperFilter = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
 function Filter() {
-  const isSkeleton = useModuleSkeleton();
   const {
     activeFilters,
     setActiveFilters
@@ -1025,20 +888,15 @@ function Filter() {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  const {
+    classes
+  } = useDataGrid();
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperFilter, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        height: 20
-      })
-    });
-  }
   return /* @__PURE__ */ jsx(IconButton, {
     dictionaryTooltipId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
+    className: classes.actionFilter,
     onClick: toggleIcon,
     "aria-label": "filter",
     src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
@@ -1085,11 +943,69 @@ styled("div")(({ theme }) => ({
     marginLeft: "10px"
   }
 }));
-function FormatterColumn({
-  row,
-  onRowChange,
-  column
-}) {
+const componentName = "M4LDataGrid";
+const dataGridClasses = generateUtilityClasses(componentName, [
+  "root",
+  "actions",
+  "withPager",
+  "withNoPager",
+  "rowsCount",
+  "rowsCountLabel",
+  "rowsCountValue",
+  "densitySkeleton",
+  "actionDensityPopover",
+  "actionFilter",
+  "actionSettings",
+  "tableContaniner",
+  "wrapperDataGridCss",
+  "columnsConfigContainer",
+  "columnsLabelSetColumns",
+  "columnsConfigContent",
+  "columnsConfigGrid",
+  "columnsConfigActions",
+  "formatterColumn",
+  "skeletonFormatter",
+  "actionsFormatter",
+  "withActions"
+]);
+function getDataGridUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const dataGridUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    actions: ["actions", ownerState.actionsProps.withPager ? "withPager" : "withNoPager"],
+    rowsCount: ["rowsCount"],
+    rowsCountLabel: ["rowsCountLabel"],
+    rowsCountValue: ["rowsCountValue"],
+    densitySkeleton: ["densitySkeleton"],
+    densityRoot: ["densityRoot"],
+    densityPopover: ["densityPopover"],
+    actionFilter: ["actionFilter"],
+    actionSettings: ["actionSettingsRoot"],
+    actionDensityPopover: ["actionDensityPopover"],
+    tableContaniner: ["tableContaniner", ownerState.withActions && "withActions"],
+    wrapperDataGridCss: ["wrapperDataGridCss"],
+    columnsConfigContainer: ["columnsConfigContainer"],
+    columnsLabelSetColumns: ["columnsLabelSetColumns"],
+    columnsConfigContent: ["columnsConfigContent"],
+    columnsConfigGrid: ["columnsConfigGrid"],
+    columnsConfigActions: ["columnsConfigActions"],
+    formatterColumn: ["formatterColumn"],
+    skeletonFormatter: ["skeletonFormatter"],
+    actionsFormatter: ["actionsFormatter"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getDataGridUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function FormatterColumn(props) {
+  const {
+    row,
+    onRowChange,
+    column
+  } = props;
   const handleChange = () => {
     const newRow = {
       ...row
@@ -1100,7 +1016,8 @@ function FormatterColumn({
   return /* @__PURE__ */ jsx(Checkbox, {
     size: "small",
     checked: row[column.key],
-    onChange: handleChange
+    onChange: handleChange,
+    className: dataGridClasses.formatterColumn
   });
 }
 function getRowsFromColumnsConfig(columnsConfig) {
@@ -1119,7 +1036,8 @@ const ColumnsConfig = forwardRef((props, ref) => {
   const {
     onCloseSettings,
     columnsConfig,
-    onChangeColumnsConfig
+    onChangeColumnsConfig,
+    classes
   } = props;
   const {
     getLabel
@@ -1281,17 +1199,17 @@ const ColumnsConfig = forwardRef((props, ref) => {
     setSelRows(mySet);
   };
   return /* @__PURE__ */ jsxs(WrapperColumnsConfig, {
-    id: "WrapperColumnsConfig",
     ref: divRef,
+    className: classes.columnsConfigContainer,
     children: [/* @__PURE__ */ jsx(DivSelColumns, {
-      id: "divInfo",
+      className: classes.columnsLabelSetColumns,
       children: getLabel("data_grid.settings_sel_columns")
     }), /* @__PURE__ */ jsx(WrapperDataGrid, {
-      id: "WrapperDataGrid",
-      children: /* @__PURE__ */ jsx(OriginalDataGridWrapperStyled, {
-        id: "Originaldata_gridWrapperStyled",
+      className: classes.columnsConfigContent,
+      children: /* @__PURE__ */ jsx("div", {
+        className: classes.wrapperDataGridCss,
         children: /* @__PURE__ */ jsx(DataGrid$1, {
-          className: "fill-data_grid  rdg-light",
+          className: classes.columnsConfigGrid,
           ref: refdata_grid,
           columns: columnsdata_grid,
           rows,
@@ -1308,6 +1226,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         })
       })
     }), /* @__PURE__ */ jsxs(ColumnActions, {
+      className: classes.columnsConfigActions,
       children: [/* @__PURE__ */ jsx(IconButton, {
         dictionaryTooltipId: "data_grid.settings_move_first",
         onClick: handleMoveFirst,
@@ -1352,13 +1271,6 @@ const ColumnsConfig = forwardRef((props, ref) => {
   });
 });
 ColumnsConfig.displayName = "ColumnsConfig";
-const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
 function Settings() {
   const {
     openModal,
@@ -1375,7 +1287,9 @@ function Settings() {
     host_static_assets,
     environment_assets
   } = useEnvironment();
-  const isSkeleton = useModuleSkeleton();
+  const {
+    classes
+  } = useDataGrid();
   const ref = useRef(null);
   const onCloseSettings = useCallback(() => {
     closeModal();
@@ -1395,7 +1309,8 @@ function Settings() {
           ref,
           columnsConfig,
           onChangeColumnsConfig,
-          onCloseSettings
+          onCloseSettings,
+          classes
         }), /* @__PURE__ */ jsxs(Actions$1, {
           children: [/* @__PURE__ */ jsx(ActionCancel, {
             onClick: closeModal
@@ -1406,83 +1321,52 @@ function Settings() {
       })
     });
   }, [closeModal, columnsConfig, getLabel, onChangeColumnsConfig, onCloseSettings, openModal, onClickIntro]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperColumnsSettings, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        height: 20
-      })
-    });
-  }
   return /* @__PURE__ */ jsx(IconButton, {
+    className: classes.actionSettings,
     dictionaryTooltipId: "data_grid.tooltip_settings",
     onClick: onClickSettings,
     "aria-label": "settings",
     src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
   });
 }
-const Container = styled("div")(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-const RowsLabel = styled("span")(() => ({}));
-const InsetLabel = styled("span")(({ theme }) => ({
-  marginLeft: theme.spacing(2),
-  paddingTop: "2px",
-  paddingBottom: "2px",
-  paddingLeft: "4px",
-  paddingRight: "4px",
-  border: `1px solid ${theme.palette.divider}`
-}));
 function RowsCount() {
   const {
-    rowsCount
+    rowsCount,
+    classes
   } = useDataGrid();
   const {
     getLabel
   } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsxs(Container, {
-      children: [/* @__PURE__ */ jsx(RowsLabel, {
+  return /* @__PURE__ */ jsx("div", {
+    className: classes.rowsCount,
+    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("div", {
+        className: classes.rowsCountLabel,
+        children: getLabel("data_grid.rows")
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.rowsCountValue,
+        children: rowsCount
+      })]
+    }) : /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("div", {
+        className: classes.rowsCountLabel,
         children: /* @__PURE__ */ jsx(Skeleton, {
           variant: "text",
           width: "40px",
           height: "16px"
         })
-      }), /* @__PURE__ */ jsx(InsetLabel, {
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.rowsCountValue,
         children: /* @__PURE__ */ jsx(Skeleton, {
           variant: "text",
           width: "20px",
           height: "16px"
         })
       })]
-    });
-  }
-  return /* @__PURE__ */ jsxs(Container, {
-    className: "rows-count",
-    id: "RowsCount",
-    children: [/* @__PURE__ */ jsx(RowsLabel, {
-      children: getLabel("data_grid.rows")
-    }), /* @__PURE__ */ jsx(InsetLabel, {
-      children: rowsCount
-    })]
+    })
   });
 }
-const WrapperDensity = styled("div")(({ theme }) => ({
-  marginLeft: 0,
-  [theme.breakpoints.up("sm")]: {
-    marginLeft: theme.spacing(3)
-  }
-}));
-const SKTWrapperDensity = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
 function Density() {
   const {
     host_static_assets,
@@ -1491,12 +1375,12 @@ function Density() {
   const {
     rowHeights,
     currentRowHeightVariant,
-    setRowHeightVariant
+    setRowHeightVariant,
+    classes
   } = useDataGrid();
   const {
     getLabel
   } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
   const menuActions = useMemo(() => {
     if (typeof rowHeights === "number") {
       return [];
@@ -1518,6 +1402,7 @@ function Density() {
       dictionaryField: "data_grid.density_confortable"
     }];
   }, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment_assets]);
+  const theme = useTheme();
   const currenViewIcon = useMemo(() => {
     if (currentRowHeightVariant === "compact") {
       return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
@@ -1530,58 +1415,23 @@ function Density() {
   if (menuActions.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperDensity, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "20px",
-        height: "20px"
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(WrapperDensity, {
-    id: "WrapperDensity",
-    children: /* @__PURE__ */ jsx(MenuActions, {
-      arrowType: "right-top",
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions,
-      urlIcon: currenViewIcon,
-      toolTip: getLabel("data_grid.tooltip_density")
-    })
+  return /* @__PURE__ */ jsx(MenuActions, {
+    arrowType: "right-top",
+    className: classes.actionDensityPopover,
+    menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
+    anchorOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    menuActions,
+    urlIcon: currenViewIcon,
+    toolTip: getLabel("data_grid.tooltip_density")
   });
 }
-const WrapperActions = styled("div")(({ theme }) => ({
-  ...theme.typography.caption,
-  position: "absolute",
-  left: "0px",
-  right: "0px",
-  top: "0px",
-  height: theme.spacing(5.5),
-  padding: 0,
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  [theme.breakpoints.up("sm")]: {
-    padding: theme.spacing(0, 1.5)
-  },
-  "&.with-no-pager .rows-count": {
-    flexGrow: 1
-  },
-  "& .MuiTablePagination-root": {
-    flexGrow: 1,
-    display: "flex",
-    justifyContent: "center",
-    overflow: "hidden"
-  }
-}));
 function getDataGridComponentsDictionary() {
   return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
 }
@@ -1593,7 +1443,8 @@ const dictionary = {
 function Actions(props) {
   const isDesktop = useResponsiveDesktop();
   const {
-    rowHeights
+    rowHeights,
+    classes
   } = useDataGrid();
   const isSkeleton = useModuleSkeleton();
   const {
@@ -1607,9 +1458,8 @@ function Actions(props) {
     settingsProps,
     withLocalFilters
   } = props;
-  return /* @__PURE__ */ jsxs(WrapperActions, {
-    id: "WrapperActions",
-    className: withPager && pagerOptions ? "with-pager" : "with-no-pager",
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.actions,
     children: [withRowsCount && isDesktop && /* @__PURE__ */ jsx(RowsCount, {}), withPager && pagerOptions && /* @__PURE__ */ jsx(Pager, {
       ...pagerOptions,
       totalRecords: pagerOptions.totalRecords,
@@ -1644,8 +1494,14 @@ function DataGrid(props) {
     onCheckedRowsChange,
     dataTestId
   } = props;
-  return /* @__PURE__ */ jsx(WrapperGrid, {
+  const ownerState = {
+    actionsProps,
+    withActions
+  };
+  const classes = dataGridUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(DataGridRoot, {
     id: `WrapperGrid_${props.id}`,
+    className: classes.root,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_COLUMNS]: JSON.stringify(columns),
       [PREFIX_TEST_ATTRIBUTE]: `m4ldatagrid-${dataTestId}`
@@ -1662,6 +1518,7 @@ function DataGrid(props) {
       onCheckedRowsChange,
       rowKeyGetter,
       rows,
+      classes,
       children: /* @__PURE__ */ jsxs(FilterProvider, {
         initialActiveFilters: false,
         children: [withActions && actionsProps && /* @__PURE__ */ jsx(Actions, {