@m4l/components 0.2.34 → 0.2.36

package/components/DataGrid/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DataGridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,595 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.d92ed0d6.js";
+import { u as useDataGrid, a as useFilters, D as DataGridRoot, b as dictionary } from "../../index.304437ee.js";
+import { useTheme, styled, Skeleton } from "@mui/material";
+import { b as DATAGRID_ACTIONS_COLUMN_KEY } from "../../constants.e334cd50.js";
+import { P as Pager } from "../../../mui_extended/Pager/index.1ba2d52b.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.b0ee4965.js";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { useIsMobile, useResponsiveContainerStore } from "@m4l/graphics";
+import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect, useCallback } from "react";
+import { D as DataGrid$1 } from "../../../../react-data-grid.c5377916.js";
+import { C as ColumnInteractiveCheckFormatter } from "../../formatters/ColumnInteractiveCheckFormatter/index.c064bb07.js";
+import { u as useModal } from "../../../../hooks/useModal/index.30674bb7.js";
+import { W as WindowBase } from "../../../modal/WindowBase.2414cd02.js";
+import { A as Actions$1 } from "../../../CommonActions/components/Actions/index.273645af.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.46f636e9.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.7406bd47.js";
+import { shallow } from "zustand/shallow";
+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: 32,
+  minWidth: 32,
+  isDraggable: false,
+  withFilter: false,
+  resizable: true,
+  sortable: false,
+  frozen: true,
+  type: "custom",
+  formatter: ActionsFormatter
+};
+function getActionLabel() {
+  return "";
+}
+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"
+  }
+}));
+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: ColumnInteractiveCheckFormatter,
+        cellClass: "rdg-cell-align-center"
+      },
+      {
+        key: "frozen",
+        name: getLabel("data_grid.settings_column_frozen"),
+        width: 80,
+        type: "boolean",
+        formatter: ColumnInteractiveCheckFormatter,
+        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 getColumnConfigByKey = (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 = getColumnConfigByKey(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";
+const useModalSettings = () => {
+  const { openModal, closeModal } = useModal();
+  const { columnsConfig, onChangeColumnsConfig } = useDataGrid();
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const { classes } = useDataGrid();
+  const ref = useRef(null);
+  const onCloseSettings = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const onClickIntro = useCallback(() => {
+    if (ref.current?.onClickIntro) {
+      ref.current.onClickIntro();
+    }
+  }, []);
+  const onClickSettings = () => {
+    openModal({
+      initialWidth: 500,
+      initialHeigth: 680,
+      fullScreen: isMobile,
+      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 })
+            ] })
+          ]
+        }
+      )
+    });
+  };
+  return onClickSettings;
+};
+const useModalSettings$1 = useModalSettings;
+function Settings() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { classes } = useDataGrid();
+  const modalSettings = useModalSettings$1();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      className: classes.actionSettings,
+      dictionaryTooltipId: "data_grid.tooltip_settings",
+      onClick: modalSettings,
+      "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")
+    }
+  );
+}
+const MobileMenuActions = () => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
+  const { activeFilters, setActiveFilters } = useFilters();
+  const modalSettings = useModalSettings$1();
+  const toggleIcon = () => {
+    setActiveFilters(!activeFilters);
+  };
+  const menuActions = [
+    {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
+      onClick: () => setRowHeightVariant("compact"),
+      disabled: currentRowHeightVariant === "compact",
+      dictionaryId: "data_grid.density_compact"
+    },
+    {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
+      onClick: () => setRowHeightVariant("standard"),
+      disabled: currentRowHeightVariant === "standard",
+      dictionaryId: "data_grid.density_standard"
+    },
+    {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
+      onClick: () => setRowHeightVariant("confortable"),
+      disabled: currentRowHeightVariant === "confortable",
+      dictionaryId: "data_grid.density_confortable"
+    },
+    {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`,
+      onClick: () => toggleIcon(),
+      dictionaryId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show"
+    },
+    {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
+      onClick: () => modalSettings(),
+      dictionaryId: "data_grid.tooltip_settings"
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    MenuActions,
+    {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/menu.svg`,
+      arrowType: "no-arrow",
+      marginTop: "12px",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
+      menuActions
+    }
+  );
+};
+function Actions(props) {
+  const isXs = useResponsiveContainerStore((state) => state.isXs, shallow);
+  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 && !isXs && /* @__PURE__ */ jsx(RowsCount, {}),
+    withPager && pagerOptions && /* @__PURE__ */ jsx(
+      Pager,
+      {
+        ...pagerOptions,
+        totalRecords: pagerOptions.totalRecords,
+        isSkeleton,
+        isXs,
+        labelRows: getLabel(dictionary.LABEL_ROWS_PER_PAGE),
+        labelOf: getLabel(dictionary.LABEL_OF)
+      }
+    ),
+    isXs ? /* @__PURE__ */ jsx(MobileMenuActions, {}) : /* @__PURE__ */ jsxs("div", { className: classes.actionsConfigContainer, children: [
+      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
+      withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
+      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps })
+    ] })
+  ] });
+}
+export {
+  ActionsColumn as A,
+  Actions as a
+};

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const WrapperColumnsConfig: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivAll: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivSelColumns: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperDataGrid: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivColumn: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DialogActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperSkeleton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;