@m4l/components 0.2.8 → 0.2.10

package/components/DataGrid/{index.fbda09b5.js → index.35e65d9b.js}

@@ -1,20 +1,103 @@
-import { SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.89e26413.js";
-import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.5629e82b.js";
 import { styled } from "@mui/material/styles";
-import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } from "react";
+import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect, useImperativeHandle } from "react";
 import { u as useRowSelection, S as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.c5377916.js";
 import { useDrag, useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.a3282769.js";
+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.69ac3618.js";
+import { g as getPagerComponentsDictionary, P as Pager } from "../mui_extended/Pager/index.78dea971.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.e295aa1f.js";
 import { unstable_composeClasses } from "@mui/base";
+import { u as useModal } from "../../hooks/useModal/index.8741e50f.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.5606420f.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.f85266eb.js";
+import "../../react-draggable.ee21cb7e.js";
+import "../Resizeable/index.6478d7d8.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import "../modal/index.e956af6b.js";
+import "../animate/index.4e9774a6.js";
+import "framer-motion";
+import "react-router-dom";
+import "../animate/LoadingScreen/index.1d0c4307.js";
+import "../animate/PropagateLoader/index.7fab43c8.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.32bf901d.js";
+import "../areas/components/AreasAdmin/index.3b2795c4.js";
+import "zustand/shallow";
+import "../ScrollBar/index.010f1b9d.js";
+import "../mui_extended/Accordion/index.d28e2432.js";
+import "../Icon/index.29065051.js";
+import "clsx";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.f538e360.js";
+import "../mui_extended/CheckBox.38abccd8.js";
+import "../mui_extended/Badge/index.b09524fe.js";
+import "../Image/index.cf640615.js";
+import "@mui/lab";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/Stack/index.0e53197c.js";
+import "../mui_extended/Tab/index.51a68bcd.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import "../areas/components/AreasViewer/index.26f5cb46.js";
+import "../LinearProgressIndeterminate/index.a0ad2d9e.js";
+import "../LoadingError/index.209dc4ff.js";
+import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "zustand/middleware/immer";
+import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
+import "react-hook-form";
+import "../hook-form/RHFAutocomplete/index.b2e17b00.js";
+import "../HelperText/index.207eea15.js";
+import "../../node_modules.56dca1cf.js";
+import "lodash-es/debounce";
+import "lodash-es/each";
+import "../hook-form/RHFColorPicker/index.7170bbf9.js";
+import "lodash/debounce";
+import "../hook-form/RHFAutocompleteAsync/index.4cd318d2.js";
+import "../hook-form/RHFCheckbox/index.f6b8a161.js";
+import "@mui/x-date-pickers";
+import "../hook-form/RHFDateTime/index.082312da.js";
+import "../hook-form/RHFTextField/index.11acfb14.js";
+import "../hook-form/RHFPeriod/index.fcf1fadc.js";
+import "../Period/index.08e6f781.js";
+import { A as Actions$1 } from "../CommonActions/components/Actions/index.9bf6a051.js";
+import "lodash/isString";
+import "react-dropzone";
+import "../hook-form/RHFUpload/index.426af663.js";
+import { C as ConcatenatedFormatter } from "../formatters/index.57f0da1b.js";
+import "../DynamicFilter/index.e1ad0e47.js";
+import "yup";
+import "../../contexts/RHFormContext/index.7769076a.js";
+import "../GridLayout/subcomponents/Griditem/index.8e4af155.js";
+import "../GridLayout/index.68093cfb.js";
+import "fast-equals";
+import "lodash";
+import "../PrintingSystem/index.73dd98b3.js";
+import "../LanguagePopover/index.df17bd3b.js";
+import "../MFLoader/index.7e274375.js";
+import "../NavLink/index.35759d66.js";
+import "../NoItemSelected/index.50d06852.js";
+import "../ObjectLogs/index.5c07c159.js";
+import "../../react-json-view.5636414a.js";
+import "../PaperForm/index.6859d4e8.js";
+import "../PDFViewer/index.5e4d01af.js";
+import "../Page/index.5aefe8f7.js";
+import "../PropertyValue/index.c1d519a2.js";
+import "../SplitLayout/index.30fd5861.js";
+import "../../react-splitter-layout.c5d98bf7.js";
+import "../ToastContainer/index.f67795cb.js";
+import "../SideBar/index.f322ee0b.js";
+import "../AppBar/index.0821efbc.js";
+import "../AccountPopover/index.bfacb05d.js";
+import { W as WindowBase } from "../modal/WindowBase.07af6541.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.2b93a5df.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../vendor.c026edad.js";
-import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.4f3cbdce.js";
+import { g as getNameDataTestId } from "../../vendor.2b182abe.js";
+import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.64ed2d71.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
-import { C as ConcatenatedFormatter } from "../formatters/index.4ca6946d.js";
 const DataGridRoot = styled("div")(({
   theme
 }) => ({
@@ -272,6 +355,9 @@ function useDataGrid() {
     throw new Error("useDataGrid context must be use inside DataGridContext");
   return context;
 }
+const DATAGRID_PREFIX_NAME = "M4LDataGrid";
+const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
+const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {
@@ -338,7 +424,7 @@ const SelectColumnHeaderRenderer = (props) => {
   });
 };
 const SelectColumn = {
-  key: "M4LDataGrid-CheckedColumn",
+  key: DATAGRID_SELECT_COLUMN_KEY,
   name: "",
   width: 60,
   maxWidth: 60,
@@ -528,6 +614,48 @@ const getDragHeaderRenderer = (handleColumnsReorder) => {
   }
   return HeaderRenderer2;
 };
+function ActionsFormatter(props) {
+  const {
+    rowActionsGetter,
+    classes
+  } = useDataGrid();
+  const theme = useTheme();
+  if (rowActionsGetter === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx(MenuActions, {
+    arrowType: "top-left",
+    objItem: props.row,
+    menuActions: rowActionsGetter,
+    className: classes.actionsFormatter,
+    menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
+    marginTop: 1,
+    marginLeft: "-11px",
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    }
+  });
+}
+const ActionsColumn = {
+  key: DATAGRID_ACTIONS_COLUMN_KEY,
+  name: getActionLabel(),
+  width: 60,
+  isDraggable: false,
+  withFilter: false,
+  resizable: true,
+  sortable: false,
+  frozen: true,
+  type: "custom",
+  formatter: ActionsFormatter
+};
+function getActionLabel() {
+  return "";
+}
 const WrapperSkeleton = styled("div")(() => ({
   display: "flex",
   width: "100%",
@@ -597,7 +725,6 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
   if (hasCheckedRows) {
     filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
   }
-  console.log("filteredSortedColumns", filteredSortedColumns);
   return filteredSortedColumns;
 };
 const getAligByType = (columnType) => {
@@ -649,13 +776,12 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
   }, [sourceColumns, columnsConfig, rowActionsGetter]);
   const finalColumns = useMemo(() => {
     const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
-    console.log("*****####finalColumns", columns);
     return columns.map((c) => {
       const newColumn = {
         ...c,
         cellClass: c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`
       };
-      if (newColumn.key === "M4LDataGrid-CheckedColumn" || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
+      if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
         return newColumn;
       }
       if (isSkeleton) {
@@ -780,7 +906,6 @@ function Table(props) {
   const onChangeSort = (newSortColumns) => {
     setSortColumns(newSortColumns);
   };
-  console.log("Table render", finalColumns);
   return /* @__PURE__ */ jsx("div", {
     className: classes.tableContaniner,
     id: "WrapperTable",
@@ -817,6 +942,72 @@ function Table(props) {
     })
   });
 }
+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,
+    onClick: toggleIcon,
+    "aria-label": "filter",
+    src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
+  });
+}
+const WrapperColumnsConfig = styled("div")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+styled("div")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontSize: theme.typography.h4.fontSize
+}));
+const DivSelColumns = styled("div")(({ theme }) => ({
+  ...theme.typography.bodyDens,
+  color: theme.palette.text.primary,
+  padding: `16px 8px`
+}));
+const WrapperDataGrid = styled("div")(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  overflow: "auto"
+}));
+styled("div")(() => ({
+  display: "flex",
+  flexDirection: "row"
+}));
+const ColumnActions = styled("div")(() => ({
+  paddingTop: "16px",
+  paddingBottom: "8px",
+  display: "flex",
+  flexDirection: "row"
+}));
+styled("div")(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
 const componentName = "M4LDataGrid";
 const dataGridClasses = generateUtilityClasses(componentName, [
   "root",
@@ -898,6 +1089,434 @@ function ColumnInteractiveCheckFormatterColumn(props) {
     className: dataGridClasses.formatterColumn
   });
 }
+function getRowsFromColumnsConfig(columnsConfig) {
+  return columnsConfig.filter((column) => !column.hidden).map((column) => ({
+    key: column.key,
+    name: column.name,
+    visible: column.visible === void 0 ? true : column.visible,
+    frozen: column.frozen === void 0 ? false : column.frozen,
+    originalIndex: column.orginalIndex,
+    originalFrozen: column.originalFrozen,
+    originalVisible: column.originalVisible
+  }));
+}
+const ColumnsConfig = forwardRef((props, ref) => {
+  const refdata_grid = useRef(null);
+  const {
+    onCloseSettings,
+    columnsConfig,
+    onChangeColumnsConfig,
+    classes
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [isInit, setIsInit] = useState(true);
+  const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
+  const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
+  const divRef = useRef(null);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  useImperativeHandle(ref, () => ({
+    onClickIntro: handleIntro,
+    current: divRef.current
+  }));
+  const columnsdata_grid = useMemo(() => [{
+    key: "name",
+    name: getLabel("data_grid.settings_column_name"),
+    width: 200,
+    resizable: true,
+    type: "string"
+  }, {
+    key: "originalIndex",
+    name: getLabel("data_grid.settings_column_position"),
+    width: 50,
+    type: "number",
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "visible",
+    name: getLabel("data_grid.settings_column_visible"),
+    width: 80,
+    type: "boolean",
+    formatter: ColumnInteractiveCheckFormatterColumn,
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "frozen",
+    name: getLabel("data_grid.settings_column_frozen"),
+    width: 80,
+    type: "boolean",
+    formatter: ColumnInteractiveCheckFormatterColumn,
+    cellClass: "rdg-cell-align-center"
+  }], [getLabel]);
+  const checkAll = () => {
+    setRows(rows.map((row) => ({
+      ...row,
+      visible: true
+    })));
+  };
+  const unCheckAll = () => {
+    setRows(rows.map((row) => ({
+      ...row,
+      visible: false
+    })));
+  };
+  const restoreAll = () => {
+    setRows(rows.map((row) => ({
+      ...row,
+      visible: row.originalVisible,
+      frozen: row.originalFrozen,
+      index: row.originalIndex
+    })).sort((a, b) => a.index - b.index));
+  };
+  useEffect(() => {
+    if (isInit === false) {
+      setRows(getRowsFromColumnsConfig(columnsConfig));
+    }
+    setIsInit(false);
+  }, [columnsConfig]);
+  const rowSelectedIndex = useMemo(() => {
+    let rowIndex = -1;
+    if (selRows.size !== 1)
+      return rowIndex;
+    const iterator = selRows.entries();
+    const entry = iterator.next().value[1];
+    rowIndex = rows.findIndex((row) => row.key === entry);
+    return rowIndex;
+  }, [rows, selRows]);
+  const handleMoveFirst = () => {
+    if (rowSelectedIndex === -1)
+      return -1;
+    const newRows = [...rows];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(0, 0, rows[rowSelectedIndex]);
+    refdata_grid.current?.selectCell({
+      idx: 0,
+      rowIdx: 0
+    });
+    setRows(newRows);
+  };
+  const handleMoveLast = () => {
+    if (rowSelectedIndex === -1)
+      return -1;
+    const newRows = [...rows];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
+    refdata_grid.current?.selectCell({
+      idx: 0,
+      rowIdx: newRows.length - 1
+    });
+    setRows(newRows);
+  };
+  const handleMoveUpDownd = (position) => {
+    if (rowSelectedIndex === -1)
+      return -1;
+    const newRows = [...rows];
+    const element = newRows[rowSelectedIndex];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(rowSelectedIndex + position, 0, element);
+    refdata_grid.current?.selectCell({
+      idx: 0,
+      rowIdx: rowSelectedIndex + position
+    });
+    setRows(newRows);
+  };
+  const getColumnConfigByKey2 = (key) => {
+    const rowIndexFinded = rows.findIndex((row) => row.key === key);
+    if (rowIndexFinded > -1) {
+      return {
+        visible: rows[rowIndexFinded].visible,
+        frozen: rows[rowIndexFinded].frozen
+      };
+    }
+    return void 0;
+  };
+  const getRowIndex = (column) => {
+    const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
+    if (rowIndexFinded > -1) {
+      return rowIndexFinded;
+    }
+    return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
+  };
+  const handleIntro = () => {
+    const newColumnsConfig = columnsConfig.map((columnConfig) => {
+      const newColumnConfig = {
+        ...columnConfig
+      };
+      if (!columnConfig.hidden) {
+        const columnConfigRow = getColumnConfigByKey2(columnConfig.key);
+        if (columnConfigRow) {
+          newColumnConfig.visible = columnConfigRow.visible;
+          newColumnConfig.frozen = columnConfigRow.frozen;
+        }
+      }
+      return newColumnConfig;
+    }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
+    onChangeColumnsConfig(newColumnsConfig);
+    onCloseSettings();
+  };
+  const onInternalSelectedRowsChange = () => {
+  };
+  const onInternalRowsChange = (newRows) => {
+    setRows(newRows);
+  };
+  const onRowClick = (row) => {
+    if (selRows.has(row.key))
+      return;
+    const mySet = /* @__PURE__ */ new Set([row.key]);
+    setSelRows(mySet);
+  };
+  return /* @__PURE__ */ jsxs(WrapperColumnsConfig, {
+    ref: divRef,
+    className: classes.columnsConfigContainer,
+    children: [/* @__PURE__ */ jsx(DivSelColumns, {
+      className: classes.columnsLabelSetColumns,
+      children: getLabel("data_grid.settings_sel_columns")
+    }), /* @__PURE__ */ jsx(WrapperDataGrid, {
+      className: classes.columnsConfigContent,
+      children: /* @__PURE__ */ jsx("div", {
+        className: classes.wrapperDataGridCss,
+        children: /* @__PURE__ */ jsx(DataGrid$1, {
+          className: classes.columnsConfigGrid,
+          ref: refdata_grid,
+          columns: columnsdata_grid,
+          rows,
+          onRowsChange: onInternalRowsChange,
+          selectedRows: selRows,
+          onSelectedRowsChange: onInternalSelectedRowsChange,
+          onRowClick,
+          rowKeyGetter: (row) => row.key,
+          cellNavigationMode: "CHANGE_ROW",
+          defaultColumnOptions: {
+            resizable: true,
+            sortable: true
+          }
+        })
+      })
+    }), /* @__PURE__ */ jsxs(ColumnActions, {
+      className: classes.columnsConfigActions,
+      children: [/* @__PURE__ */ jsx(IconButton, {
+        tooltip: getLabel("data_grid.settings_move_first"),
+        onClick: handleMoveFirst,
+        "aria-label": "move first place",
+        disabled: rowSelectedIndex < 1,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton, {
+        tooltip: getLabel("data_grid.settings_move_up"),
+        dictionaryTooltipId: "data_grid.settings_move_up",
+        onClick: () => handleMoveUpDownd(-1),
+        "aria-label": "move up place",
+        disabled: rowSelectedIndex < 1,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton, {
+        tooltip: getLabel("data_grid.settings_move_last"),
+        onClick: handleMoveLast,
+        "aria-label": "move last place",
+        disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton, {
+        tooltip: getLabel("data_grid.settings_move_down"),
+        onClick: () => handleMoveUpDownd(1),
+        "aria-label": "move down place",
+        disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton, {
+        tooltip: getLabel("data_grid.settings_visible_all"),
+        onClick: checkAll,
+        "aria-label": "check visible all",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
+      }), /* @__PURE__ */ jsx(IconButton, {
+        tooltip: getLabel("data_grid.settings_no_visible_all"),
+        onClick: unCheckAll,
+        "aria-label": "un check all",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
+      }), /* @__PURE__ */ jsx(IconButton, {
+        tooltip: getLabel("data_grid.settings_restore"),
+        onClick: restoreAll,
+        "aria-label": "Restore columns",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
+      })]
+    })]
+  });
+});
+ColumnsConfig.displayName = "ColumnsConfig";
+function Settings() {
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    columnsConfig,
+    onChangeColumnsConfig
+  } = useDataGrid();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const {
+    classes
+  } = useDataGrid();
+  const ref = useRef(null);
+  const onCloseSettings = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const onClickIntro = useCallback(() => {
+    if (ref.current?.onClickIntro) {
+      ref.current?.onClickIntro();
+    }
+  }, []);
+  const onClickSettings = useCallback(() => {
+    openModal({
+      initialWidth: 500,
+      initialHeigth: 680,
+      fullScreen: !isDesktop ? true : false,
+      window: /* @__PURE__ */ jsxs(WindowBase, {
+        title: getLabel("data_grid.settings_title"),
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
+        children: [/* @__PURE__ */ jsx(DataGridRoot, {
+          className: classes.root,
+          children: /* @__PURE__ */ jsx("div", {
+            className: classes.tableContaniner,
+            style: {
+              inset: "0"
+            },
+            children: /* @__PURE__ */ jsx("div", {
+              className: classes.wrapperDataGridCss,
+              children: /* @__PURE__ */ jsx(ColumnsConfig, {
+                ref,
+                columnsConfig,
+                onChangeColumnsConfig,
+                onCloseSettings,
+                classes
+              })
+            })
+          })
+        }), /* @__PURE__ */ jsxs(Actions$1, {
+          children: [/* @__PURE__ */ jsx(ActionCancel, {
+            onClick: closeModal
+          }), /* @__PURE__ */ jsx(ActionIntro, {
+            onClick: onClickIntro
+          })]
+        })]
+      })
+    });
+  }, [closeModal, columnsConfig, getLabel, onChangeColumnsConfig, onCloseSettings, openModal, onClickIntro]);
+  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`
+  });
+}
+function RowsCount() {
+  const {
+    rowsCount,
+    classes
+  } = useDataGrid();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  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("div", {
+        className: classes.rowsCountValue,
+        children: /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "20px",
+          height: "16px"
+        })
+      })]
+    })
+  });
+}
+function Density() {
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    rowHeights,
+    currentRowHeightVariant,
+    setRowHeightVariant,
+    classes
+  } = useDataGrid();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const menuActions = useMemo(() => {
+    if (typeof rowHeights === "number") {
+      return [];
+    }
+    return [{
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
+      onClick: () => setRowHeightVariant("compact"),
+      disabled: currentRowHeightVariant === "compact",
+      dictionaryField: "data_grid.density_compact"
+    }, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
+      onClick: () => setRowHeightVariant("standard"),
+      disabled: currentRowHeightVariant === "standard",
+      dictionaryField: "data_grid.density_standard"
+    }, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
+      onClick: () => setRowHeightVariant("confortable"),
+      disabled: currentRowHeightVariant === "confortable",
+      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`;
+    }
+    if (currentRowHeightVariant === "standard") {
+      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
+    }
+    return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
+  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
+  if (menuActions.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  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")
+  });
+}
 function getDataGridComponentsDictionary() {
   return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
 }
@@ -906,10 +1525,44 @@ const dictionary = {
   LABEL_ROWS_PER_PAGE: "pager.rows_per_page",
   LABEL_OF: "pager.of"
 };
+function Actions(props) {
+  const isDesktop = useResponsiveDesktop();
+  const {
+    rowHeights,
+    classes
+  } = useDataGrid();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    withRowsCount = true,
+    withPager = true,
+    pagerOptions,
+    withSettings = true,
+    settingsProps,
+    withLocalFilters
+  } = props;
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.actions,
+    children: [withRowsCount && isDesktop && /* @__PURE__ */ jsx(RowsCount, {}), withPager && pagerOptions && /* @__PURE__ */ jsx(Pager, {
+      ...pagerOptions,
+      totalRecords: pagerOptions.totalRecords,
+      isSkeleton,
+      isDesktop,
+      labelRows: getLabel(dictionary.LABEL_ROWS_PER_PAGE),
+      labelOf: getLabel(dictionary.LABEL_OF)
+    }), /* @__PURE__ */ jsxs("div", {
+      className: classes.actionsConfigContainer,
+      children: [typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}), withLocalFilters && /* @__PURE__ */ jsx(Filter, {}), withSettings && /* @__PURE__ */ jsx(Settings, {
+        ...settingsProps
+      })]
+    })]
+  });
+}
 const DATAGRID_TEST_ID = "m4ldatagrid";
 const PREFIX_TEST_ATTRIBUTE = "data-testid";
 const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
-const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 function DataGrid(props) {
   const {
     id,
@@ -1038,6 +1691,64 @@ function columnConcatenatedValuesFormatter(props) {
     });
   };
 }
+const Input = styled("input")(() => ({
+  appearance: "none",
+  boxSizing: "border-box",
+  inlineSize: "100%",
+  blockSize: "100%",
+  paddingBlock: "0",
+  verticalAlign: "top",
+  textAlign: "right",
+  color: "var(--rdg-color)",
+  backgroundColor: "var(--rdg-background-color)",
+  fontFamily: "inherit",
+  "&:focus": {
+    outline: "none"
+  },
+  "&::placeholder": {
+    color: "#999",
+    opacity: "1"
+  }
+}));
+function autoFocusAndSelect(input) {
+  input?.focus();
+  input?.select();
+}
+function TextEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Input, {
+    className: "rdg-text-editor",
+    ref: autoFocusAndSelect,
+    value: row[column.key],
+    onChange: (event) => onRowChange({
+      ...row,
+      [column.key]: event.target.value
+    }),
+    onBlur: () => onClose(true)
+  });
+}
+function NumberEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Input, {
+    className: "rdg-text-editor",
+    ref: autoFocusAndSelect,
+    type: "number",
+    value: row[column.key],
+    onChange: (event) => onRowChange({
+      ...row,
+      [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
+    }),
+    onBlur: () => onClose(true)
+  });
+}
 const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
   const rowsFinded = [];
   if (set) {
@@ -1056,15 +1767,12 @@ const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
   return rowsFinded;
 };
 export {
-  ColumnInteractiveCheckFormatterColumn as C,
-  DataGridRoot as D,
-  useFilters as a,
-  DataGrid as b,
-  getDataGridRowsFromSet as c,
-  dictionary as d,
-  columnBooleanFormatter as e,
-  columnDateFormatter as f,
-  getDataGridComponentsDictionary as g,
-  columnConcatenatedValuesFormatter as h,
-  useDataGrid as u
+  DataGrid as D,
+  NumberEditor as N,
+  TextEditor as T,
+  getDataGridRowsFromSet as a,
+  columnDateFormatter as b,
+  columnBooleanFormatter as c,
+  columnConcatenatedValuesFormatter as d,
+  getDataGridComponentsDictionary as g
 };