@m4l/components 0.2.35 → 0.2.36

package/components/DataGrid/{index.abe0f9b9.js → index.304437ee.js}

@@ -1,22 +1,20 @@
-import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.78c9650a.js";
-import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.ea2a4f3e.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.42349189.js";
+import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.1ba2d52b.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { styled, SvgIcon, Checkbox, InputBase, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } 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 { jsx, jsxs } from "react/jsx-runtime";
 import { D as DATAGRID_SELECT_COLUMN_KEY, c as componentName, a as DATAGRID_PREFIX_NAME } from "./constants.e334cd50.js";
 import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.4f2071ee.js";
+import { A as ActionsColumn, a as Actions } from "./subcomponents/Actions/index.f14590d2.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";
+import { g as getNameDataTestId } from "../../test/getNameDataTestId.0faeade8.js";
 import { shallow } from "zustand/shallow";
 import { useResponsiveContainerStore } from "@m4l/graphics";
-const DataGridRoot = styled("div")(({
-  theme
-}) => ({
+const DataGridRoot = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   position: "absolute",
@@ -26,58 +24,45 @@ const DataGridRoot = styled("div")(({
   ...theme.components?.M4LDataGrid?.styleOverrides
 }));
 function CheckboxIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, {
-    ...props,
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z"
-    })
-  });
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" }) });
 }
 function CheckboxCheckedIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, {
-    ...props,
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z"
-    })
-  });
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" }) });
 }
 function CheckboxIndeterminateIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, {
-    ...props,
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z"
-    })
-  });
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
 }
 const CheckboxFormatter = forwardRef(
-  function CheckboxFormatter2({
-    onChange,
-    checked,
-    ...props
-  }, _ref) {
+  function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
     function handleChange(e) {
       onChange(e.target.checked, e.nativeEvent.shiftKey);
     }
-    return /* @__PURE__ */ jsx(Checkbox, {
-      checked,
-      size: "small",
-      icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-      checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
-      indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
-      onChange: handleChange,
-      ...props
-    });
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked,
+        size: "small",
+        icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+        checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
+        indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
+        onChange: handleChange,
+        ...props
+      }
+    );
   }
 );
 const DataGridContext = createContext(null);
 const getColumnConfigByKey = (key, storeColumnsConfig) => {
   let indexFind = -1;
-  return [storeColumnsConfig.find((column, index) => {
-    if (column.key === key) {
-      indexFind = index;
-    }
-    return column.key === key;
-  }), indexFind];
+  return [
+    storeColumnsConfig.find((column, index) => {
+      if (column.key === key) {
+        indexFind = index;
+      }
+      return column.key === key;
+    }),
+    indexFind
+  ];
 };
 function getColumnsConfig(id, columns, remoteConfig = void 0) {
   let columnsConfig;
@@ -92,9 +77,10 @@ function getColumnsConfig(id, columns, remoteConfig = void 0) {
     }
   }
   return columns.map((column, index) => {
-    const [columnConfig = {
-      ...column
-    }, columnConfigIndex] = getColumnConfigByKey(column.key, columnsConfig);
+    const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(
+      column.key,
+      columnsConfig
+    );
     return {
       key: column.key,
       name: column.name,
@@ -169,8 +155,12 @@ function DataGridProvider(props) {
     rowKeyGetter,
     classes
   } = props;
-  const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
-  const [columnsConfig, setColumnsConfigOptions] = useState(() => []);
+  const [columnsWidths, setColumnsWidths] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [columnsConfig, setColumnsConfigOptions] = useState(
+    () => []
+  );
   const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
   const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState(() => {
     if (typeof rowHeights !== typeof rowHeaderHeights) {
@@ -203,19 +193,29 @@ function DataGridProvider(props) {
     setColumnsWidths(getColumnsWidth(id, columns, remoteConfig));
     setColumnsConfigOptions(getColumnsConfig(id, columns, remoteConfig));
   }, [columns, id, remoteConfig]);
-  const onChangeColumnsConfig = useCallback((newColumnsConfig) => {
-    saveColumnsConfig(id, newColumnsConfig);
-    setColumnsConfigOptions(newColumnsConfig);
-  }, [setColumnsConfigOptions, id]);
-  const onChangeColumnsOrder = useCallback((sourceKey, targetKey) => {
-    if (sourceKey === targetKey)
-      return;
-    const sourceColumnIndex = columnsConfig.findIndex((c) => c.key === sourceKey);
-    const targetColumnIndex = columnsConfig.findIndex((c) => c.key === targetKey);
-    const reorderedColumnsConfig = [...columnsConfig];
-    reorderedColumnsConfig.splice(targetColumnIndex, 0, reorderedColumnsConfig.splice(sourceColumnIndex, 1)[0]);
-    onChangeColumnsConfig(reorderedColumnsConfig);
-  }, [columnsConfig, onChangeColumnsConfig]);
+  const onChangeColumnsConfig = useCallback(
+    (newColumnsConfig) => {
+      saveColumnsConfig(id, newColumnsConfig);
+      setColumnsConfigOptions(newColumnsConfig);
+    },
+    [setColumnsConfigOptions, id]
+  );
+  const onChangeColumnsOrder = useCallback(
+    (sourceKey, targetKey) => {
+      if (sourceKey === targetKey)
+        return;
+      const sourceColumnIndex = columnsConfig.findIndex((c) => c.key === sourceKey);
+      const targetColumnIndex = columnsConfig.findIndex((c) => c.key === targetKey);
+      const reorderedColumnsConfig = [...columnsConfig];
+      reorderedColumnsConfig.splice(
+        targetColumnIndex,
+        0,
+        reorderedColumnsConfig.splice(sourceColumnIndex, 1)[0]
+      );
+      onChangeColumnsConfig(reorderedColumnsConfig);
+    },
+    [columnsConfig, onChangeColumnsConfig]
+  );
   const onChangeColumnWidth = (columnKey, width) => {
     columnsWidths.set(columnKey, Math.round(width));
     if (timerSaveColumns) {
@@ -231,39 +231,45 @@ function DataGridProvider(props) {
   const setRowFilterCountInternal = (newRowsCount) => {
     setRowFilterCount(newRowsCount);
   };
-  const setCurrentRowHeightInternal = useCallback((newVariant) => {
-    if (typeof rowHeights === "number" || typeof rowHeaderHeights === "number") {
-      throw new Error("Only use setCurrentRowHeight with vector rowHeights");
-    }
-    setCurrentRowHeightVariant({
-      rowHVariant: newVariant,
-      rowHeight: rowHeights[getIndexRowHeightVariant(newVariant)],
-      rowHeaderHeight: rowHeaderHeights[getIndexRowHeightVariant(newVariant)]
-    });
-  }, [setCurrentRowHeightVariant, rowHeights, rowHeaderHeights]);
-  return /* @__PURE__ */ jsx(DataGridContext.Provider, {
-    value: {
-      columnsConfig,
-      columnsWidths,
-      rowsCount: rowsFilterCount,
-      currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
-      currentRowHeight: currentRowHeightVariant.rowHeight,
-      currentRowHeaderHeight: currentRowHeightVariant.rowHeaderHeight,
-      rows,
-      rowHeights: finalRowHeights,
-      checkedRows,
-      onChangeColumnsConfig,
-      onChangeColumnsOrder,
-      onChangeColumnWidth,
-      setRowsCount: setRowFilterCountInternal,
-      rowActionsGetter,
-      classes,
-      setRowHeightVariant: setCurrentRowHeightInternal,
-      onCheckedRowsChange,
-      rowKeyGetter
+  const setCurrentRowHeightInternal = useCallback(
+    (newVariant) => {
+      if (typeof rowHeights === "number" || typeof rowHeaderHeights === "number") {
+        throw new Error("Only use setCurrentRowHeight with vector rowHeights");
+      }
+      setCurrentRowHeightVariant({
+        rowHVariant: newVariant,
+        rowHeight: rowHeights[getIndexRowHeightVariant(newVariant)],
+        rowHeaderHeight: rowHeaderHeights[getIndexRowHeightVariant(newVariant)]
+      });
     },
-    children
-  });
+    [setCurrentRowHeightVariant, rowHeights, rowHeaderHeights]
+  );
+  return /* @__PURE__ */ jsx(
+    DataGridContext.Provider,
+    {
+      value: {
+        columnsConfig,
+        columnsWidths,
+        rowsCount: rowsFilterCount,
+        currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
+        currentRowHeight: currentRowHeightVariant.rowHeight,
+        currentRowHeaderHeight: currentRowHeightVariant.rowHeaderHeight,
+        rows,
+        rowHeights: finalRowHeights,
+        checkedRows,
+        onChangeColumnsConfig,
+        onChangeColumnsOrder,
+        onChangeColumnWidth,
+        setRowsCount: setRowFilterCountInternal,
+        rowActionsGetter,
+        classes,
+        setRowHeightVariant: setCurrentRowHeightInternal,
+        onCheckedRowsChange,
+        rowKeyGetter
+      },
+      children
+    }
+  );
 }
 function useDataGrid() {
   const context = useContext(DataGridContext);
@@ -276,11 +282,7 @@ const filterHeight = 35;
 function SelectGroupFormatter(props) {
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
   const onChange = (checked) => {
-    onRowSelectionChange({
-      row: props.row,
-      checked,
-      isShiftClick: false
-    });
+    onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
   };
   const cellFormater = SelectCellFormatter({
     value: isRowSelected,
@@ -291,11 +293,7 @@ function SelectGroupFormatter(props) {
   return cellFormater;
 }
 function SelectFormatter(props) {
-  const {
-    checkedRows,
-    onCheckedRowsChange,
-    rowKeyGetter
-  } = useDataGrid();
+  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
   const onChange = (checked, _isShiftClick) => {
     const newCheckedRows = new Set(checkedRows);
     if (checked) {
@@ -305,20 +303,18 @@ function SelectFormatter(props) {
     }
     onCheckedRowsChange && onCheckedRowsChange(newCheckedRows);
   };
-  return /* @__PURE__ */ jsx(SelectCellFormatter, {
-    value: checkedRows?.has(rowKeyGetter(props.row)) || false,
-    isCellSelected: props.isCellSelected,
-    onChange,
-    "aria-label": "Select"
-  });
+  return /* @__PURE__ */ jsx(
+    SelectCellFormatter,
+    {
+      value: checkedRows?.has(rowKeyGetter(props.row)) || false,
+      isCellSelected: props.isCellSelected,
+      onChange,
+      "aria-label": "Select"
+    }
+  );
 }
 const SelectColumnHeaderRenderer = (props) => {
-  const {
-    rows,
-    rowKeyGetter,
-    onCheckedRowsChange,
-    checkedRows
-  } = useDataGrid();
+  const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid();
   const onAllRowsCheckedChange = (checked) => {
     if (!onCheckedRowsChange)
       return;
@@ -367,20 +363,14 @@ const initialState = {
   setActiveFilters: voidFunction
 };
 const FilterContext = createContext(initialState);
-function FilterProvider({
-  children,
-  initialActiveFilters
-}) {
+function FilterProvider({ children, initialActiveFilters }) {
   const [filterOptions, setFilterOptions] = useState({
     activeFilters: initialActiveFilters
   });
   const onChangeFilter = (column, value) => {
     const newMap = filterOptions.filters ? new Map(filterOptions.filters) : /* @__PURE__ */ new Map();
     if (value !== "") {
-      newMap.set(column.key, {
-        value,
-        customFilter: column.customFilter
-      });
+      newMap.set(column.key, { value, customFilter: column.customFilter });
     } else {
       newMap.delete(column.key);
     }
@@ -391,64 +381,40 @@ function FilterProvider({
   };
   const setActiveFilters = (active) => {
     if (active) {
-      setFilterOptions({
-        activeFilters: true,
-        filters: /* @__PURE__ */ new Map()
-      });
+      setFilterOptions({ activeFilters: true, filters: /* @__PURE__ */ new Map() });
     } else {
-      setFilterOptions({
-        activeFilters: false
-      });
+      setFilterOptions({ activeFilters: false });
     }
   };
-  return /* @__PURE__ */ jsx(FilterContext.Provider, {
-    value: {
-      ...filterOptions,
-      onChangeFilter,
-      setActiveFilters
-    },
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    FilterContext.Provider,
+    {
+      value: {
+        ...filterOptions,
+        onChangeFilter,
+        setActiveFilters
+      },
+      children
+    }
+  );
 }
 const useFilters = () => useContext(FilterContext);
 function DraggableHeaderRenderer(props) {
-  const {
-    onColumnsReorder,
-    column,
-    isCellSelected,
-    ...others
-  } = props;
-  const {
-    ref,
-    tabIndex
-  } = useFocusRef(isCellSelected);
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    activeFilters,
-    filters,
-    onChangeFilter
-  } = useFilters();
+  const { onColumnsReorder, column, isCellSelected, ...others } = props;
+  const { ref, tabIndex } = useFocusRef(isCellSelected);
+  const { getLabel } = useModuleDictionary();
+  const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
-  const [{
-    isDragging
-  }, drag] = useDrag({
+  const [{ isDragging }, drag] = useDrag({
     type: "COLUMN_DRAG",
-    item: {
-      key: column.key
-    },
+    item: { key: column.key },
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
     })
   });
-  const [{
-    isOver
-  }, drop] = useDrop({
+  const [{ isOver }, drop] = useDrop({
     accept: "COLUMN_DRAG",
-    drop({
-      key
-    }) {
+    drop({ key }) {
       onColumnsReorder(key, column.key);
     },
     collect: (monitor) => ({
@@ -467,63 +433,66 @@ function DraggableHeaderRenderer(props) {
     if (!activeFilters)
       setFilter("");
   }, [activeFilters]);
-  const newColumn = {
-    ...column
-  };
+  const newColumn = { ...column };
   if (newColumn.withinHeaderRenderer) {
     newColumn.name = newColumn.withinHeaderRenderer(props);
   }
-  return /* @__PURE__ */ jsxs("div", {
-    ref: (newRef) => {
-      drag(newRef);
-      drop(newRef);
-    },
-    style: {
-      opacity: isDragging ? 0.5 : 1,
-      backgroundColor: isOver ? "#ececec" : void 0,
-      cursor: "move",
-      display: "flex",
-      flexDirection: "column",
-      lineHeight: "1",
-      height: "100%",
-      justifyContent: "center",
-      textAlign: "center"
-    },
-    children: [/* @__PURE__ */ jsx(HeaderRenderer, {
-      column: newColumn,
-      isCellSelected,
-      ...others
-    }), activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx("div", {
-      className: "filter_cell_div",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (newRef) => {
+        drag(newRef);
+        drop(newRef);
+      },
       style: {
-        borderTop: "1px solid var(--rdg-border-color)",
-        width: "100%",
+        opacity: isDragging ? 0.5 : 1,
+        backgroundColor: isOver ? "#ececec" : void 0,
+        cursor: "move",
         display: "flex",
-        alignItems: "center",
-        height: `${filterHeight}px`
+        flexDirection: "column",
+        lineHeight: "1",
+        height: "100%",
+        justifyContent: "center",
+        textAlign: "center"
       },
-      children: /* @__PURE__ */ jsx(InputBase, {
-        inputRef: ref,
-        placeholder: getLabel("data_grid.filter_holder"),
-        style: {
-          width: "100%",
-          paddingBottom: "2px",
-          border: "1px solid var(--rdg-border-color)"
-        },
-        tabIndex,
-        type: "text",
-        onChange: handleChange,
-        value: filter
-      })
-    })]
-  });
+      children: [
+        /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
+        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "filter_cell_div",
+            style: {
+              borderTop: "1px solid var(--rdg-border-color)",
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              height: `${filterHeight}px`
+            },
+            children: /* @__PURE__ */ jsx(
+              InputBase,
+              {
+                inputRef: ref,
+                placeholder: getLabel("data_grid.filter_holder"),
+                style: {
+                  width: "100%",
+                  paddingBottom: "2px",
+                  border: "1px solid var(--rdg-border-color)"
+                },
+                tabIndex,
+                type: "text",
+                onChange: handleChange,
+                value: filter
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 const getDragHeaderRenderer = (handleColumnsReorder) => {
   function HeaderRenderer2(props) {
-    return /* @__PURE__ */ jsx(DraggableHeaderRenderer, {
-      ...props,
-      onColumnsReorder: handleColumnsReorder
-    });
+    return /* @__PURE__ */ jsx(DraggableHeaderRenderer, { ...props, onColumnsReorder: handleColumnsReorder });
   }
   return HeaderRenderer2;
 };
@@ -534,17 +503,8 @@ 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%",
-      height: "12px"
-    })
-  });
+  const { classes } = useDataGrid();
+  return /* @__PURE__ */ jsx(WrapperSkeleton, { className: classes.skeletonFormatter, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "12px" }) });
 }
 function getComparator(columns, sortColumn) {
   const column = columns.find((d) => d.key === sortColumn);
@@ -720,30 +680,13 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
   return { finalColumns, sortColumns, setSortColumns, finalRows };
 };
 function Table(props) {
-  const {
+  const { columns, rows, onRowsChange, rowKeyGetter, selectedRows, onSelectedRowsChange } = props;
+  const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
     columns,
-    rows,
-    onRowsChange,
-    rowKeyGetter,
-    selectedRows,
-    onSelectedRowsChange
-  } = props;
-  const {
-    finalColumns,
-    sortColumns,
-    setSortColumns,
-    finalRows
-  } = useSortColumnsRows(columns, rows);
-  const {
-    activeFilters
-  } = useFilters();
-  const {
-    onChangeColumnWidth,
-    setRowsCount,
-    currentRowHeight,
-    currentRowHeaderHeight,
-    classes
-  } = useDataGrid();
+    rows
+  );
+  const { activeFilters } = useFilters();
+  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, classes } = useDataGrid();
   const ref_data_grid = useRef(null);
   const onRowClick = (row) => {
     if (selectedRows && onSelectedRowsChange) {
@@ -777,41 +720,28 @@ function Table(props) {
   const onChangeSort = (newSortColumns) => {
     setSortColumns(newSortColumns);
   };
-  return /* @__PURE__ */ jsx("div", {
-    className: classes.tableContaniner,
-    id: "WrapperTable",
-    children: /* @__PURE__ */ jsx("div", {
-      className: classes.wrapperDataGridCss,
-      children: /* @__PURE__ */ jsx(DndProvider, {
-        backend: HTML5Backend,
-        context: window,
-        children: /* @__PURE__ */ jsx(DataGrid$1, {
-          className: "fill-grid rdg-light",
-          ref: ref_data_grid,
-          headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-          columns: finalColumns,
-          sortColumns,
-          onSortColumnsChange: onChangeSort,
-          onColumnResize,
-          rows: finalRows,
-          onRowsChange,
-          selectedRows,
-          onSelectedRowsChange,
-          onRowClick,
-          rowHeight: currentRowHeight,
-          rowKeyGetter,
-          cellNavigationMode: "LOOP_OVER_ROW",
-          components: {
-            checkboxFormatter: CheckboxFormatter
-          },
-          defaultColumnOptions: {
-            resizable: true,
-            sortable: true
-          }
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx("div", { className: classes.tableContaniner, id: "WrapperTable", children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+    DataGrid$1,
+    {
+      className: "fill-grid rdg-light",
+      ref: ref_data_grid,
+      headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
+      columns: finalColumns,
+      sortColumns,
+      onSortColumnsChange: onChangeSort,
+      onColumnResize,
+      rows: finalRows,
+      onRowsChange,
+      selectedRows,
+      onSelectedRowsChange,
+      onRowClick,
+      rowHeight: currentRowHeight,
+      rowKeyGetter,
+      cellNavigationMode: "LOOP_OVER_ROW",
+      components: { checkboxFormatter: CheckboxFormatter },
+      defaultColumnOptions: { resizable: true, sortable: true }
+    }
+  ) }) }) });
 }
 const dataGridClasses = generateUtilityClasses(componentName, [
   "root",
@@ -903,8 +833,7 @@ function DataGrid(props) {
     onCheckedRowsChange,
     dataTestId = ""
   } = props;
-  const isUpSm = useResponsiveContainerStore((state) => state.isUpSm, shallow);
-  console.log("isUpSm", isUpSm);
+  useResponsiveContainerStore((state) => state.isUpSm, shallow);
   const ownerState = {
     actionsProps,
     withActions
@@ -918,35 +847,44 @@ function DataGrid(props) {
         [TEST_PROP_COLUMNS]: JSON.stringify(columns),
         [TEST_PROP_ID]: getNameDataTestId(DATAGRID_PREFIX_NAME, "root", dataTestId)
       } : {},
-      children: /* @__PURE__ */ jsx(DataGridProvider, {
-        id: props.id,
-        columns: props.columns,
-        rowHeights,
-        rowHeaderHeights,
-        initialRowHeightVariant,
-        rowsCount: rows.length,
-        checkedRows,
-        rowActionsGetter,
-        onCheckedRowsChange,
-        rowKeyGetter,
-        rows,
-        classes,
-        children: /* @__PURE__ */ jsxs(FilterProvider, {
-          initialActiveFilters: false,
-          children: [withActions && actionsProps && /* @__PURE__ */ jsx(Actions, {
-            ...actionsProps
-          }), /* @__PURE__ */ jsx(Table, {
-            id,
-            withActions,
-            columns,
-            rows,
-            selectedRows,
-            onSelectedRowsChange,
-            rowKeyGetter,
-            onRowsChange
-          })]
-        })
-      })
+      children: /* @__PURE__ */ jsx(
+        DataGridProvider,
+        {
+          id: props.id,
+          columns: props.columns,
+          rowHeights,
+          rowHeaderHeights,
+          initialRowHeightVariant,
+          rowsCount: rows.length,
+          checkedRows,
+          rowActionsGetter,
+          onCheckedRowsChange,
+          rowKeyGetter,
+          rows,
+          classes,
+          children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
+            withActions && actionsProps && /* @__PURE__ */ jsx(
+              Actions,
+              {
+                ...actionsProps
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Table,
+              {
+                id,
+                withActions,
+                columns,
+                rows,
+                selectedRows,
+                onSelectedRowsChange,
+                rowKeyGetter,
+                onRowsChange
+              }
+            )
+          ] })
+        }
+      )
     }
   );
 }