@m4l/components 0.1.31 → 0.1.32

package/components/DataGrid/{index.fc1ace65.js → index.b6a45f67.js}

@@ -1,14 +1,14 @@
 import { styled, alpha } from "@mui/material/styles";
-import { forwardRef, useRef, useLayoutEffect, createContext, useState, useContext, useEffect, useMemo, useCallback } from "react";
-import { S as SELECT_COLUMN_KEY, a as SelectCellFormatter, u as useRowSelection, H as HeaderRenderer, D as DataGrid$1 } from "../../react-data-grid.d46d625e.js";
+import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect } 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 { jsx, jsxs } from "react/jsx-runtime";
-import { voidFunction, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { A as ActionsColumn, a as Actions } from "../CommonActions/components/Actions/index.c87086ac.js";
-import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.6bec80b1.js";
-import { g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.66593ad3.js";
+import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString } from "@m4l/core";
+import { A as ActionsColumn, a as Actions } from "../CommonActions/components/Actions/index.545d7067.js";
+import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.81b8e093.js";
+import { g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.a98c43cc.js";
 const WrapperGrid = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -202,25 +202,208 @@ const CheckboxFormatter = forwardRef(
     });
   }
 );
-const filterColumnClassName = "filter-cell";
-const filterHeight = 35;
-function SelectFormatter(props) {
-  const [isRowSelected, onRowSelectionChange] = useRowSelection();
-  const onChange = (checked, isShiftClick) => {
-    onRowSelectionChange({
-      row: props.row,
-      checked,
-      isShiftClick
-    });
+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];
+};
+function getColumnsConfig(id, columns, remoteConfig = void 0) {
+  let columnsConfig;
+  if (remoteConfig) {
+    columnsConfig = remoteConfig.columnsConfig;
+  } else {
+    try {
+      const item = window.localStorage.getItem(`${id}_columns_config`);
+      columnsConfig = item !== null ? JSON.parse(item) : [];
+    } catch (e) {
+      columnsConfig = [];
+    }
+  }
+  return columns.map((column, index) => {
+    const [columnConfig = {
+      ...column
+    }, columnConfigIndex] = getColumnConfigByKey(column.key, columnsConfig);
+    return {
+      key: column.key,
+      name: column.name,
+      hidden: column.hidden === void 0 ? false : column.hidden,
+      index: columnConfigIndex > -1 ? columnConfigIndex : index,
+      visible: columnConfig.visible === void 0 ? true : columnConfig.visible,
+      frozen: columnConfig.frozen === void 0 ? false : columnConfig.frozen,
+      orginalIndex: index,
+      originalVisible: column.visible === void 0 ? true : column.visible,
+      originalFrozen: column.frozen === void 0 ? false : column.frozen
+    };
+  }).sort((a, b) => a.index - b.index);
+}
+function getColumnsWidth(id, columns, remoteConfig) {
+  const newMap = /* @__PURE__ */ new Map();
+  let storeColumnsWidth;
+  try {
+    const item = window.localStorage.getItem(`${id}_columns_width`);
+    storeColumnsWidth = item !== null ? new Map(JSON.parse(item)) : /* @__PURE__ */ new Map();
+  } catch (e) {
+    storeColumnsWidth = /* @__PURE__ */ new Map();
+  }
+  for (let i = 0; i < columns.length; i++) {
+    let width;
+    if (remoteConfig) {
+      try {
+        width = remoteConfig.columnsWidths.get(columns[i].key);
+      } catch (error) {
+      }
+    }
+    if (width === void 0) {
+      const storeWidth = storeColumnsWidth.get(columns[i].key);
+      if (typeof storeWidth === "number") {
+        width = storeWidth;
+      }
+    }
+    if (width !== void 0) {
+      newMap.set(columns[i].key, width);
+    }
+  }
+  return newMap;
+}
+function saveColumnsWidth(id, storeColumnsWidth) {
+  localStorage.setItem(`${id}_columns_width`, JSON.stringify([...storeColumnsWidth]));
+}
+function saveColumnsConfig(id, columnsConfig) {
+  localStorage.setItem(`${id}_columns_config`, JSON.stringify(columnsConfig));
+}
+function getIndexRowHeightVariant(variant) {
+  if (variant === "compact") {
+    return 0;
+  }
+  if (variant === "standard") {
+    return 1;
+  }
+  return 2;
+}
+function DataGridProvider(props) {
+  const {
+    id,
+    children,
+    columns,
+    remoteConfig,
+    rows,
+    rowsCount,
+    rowActionsGetter,
+    rowHeights = [36, 52, 67],
+    rowHeaderHeights = [44, 63, 75],
+    initialRowHeightVariant = "compact",
+    checkedRows,
+    onCheckedRowsChange,
+    rowKeyGetter
+  } = props;
+  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) {
+      throw new Error("Must be same type rowheights and rowHeaderTypes");
+    }
+    if (typeof rowHeights === "number" && typeof rowHeaderHeights === "number") {
+      return {
+        rowHVariant: "compact",
+        rowHeight: rowHeights,
+        rowHeaderHeight: rowHeaderHeights
+      };
+    }
+    if (typeof rowHeights !== "number" && rowHeights.length !== 3) {
+      throw new Error("Must be 3 heights");
+    }
+    if (typeof rowHeaderHeights !== "number" && rowHeaderHeights.length !== 3) {
+      throw new Error("Must be 3 HeaderHeights");
+    }
+    return {
+      rowHVariant: initialRowHeightVariant,
+      rowHeight: typeof rowHeights !== "number" ? rowHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeights,
+      rowHeaderHeight: typeof rowHeaderHeights !== "number" ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeaderHeights
+    };
+  });
+  const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
+  let timerSaveColumns;
+  useEffect(() => {
+  }, [columnsConfig]);
+  useEffect(() => {
+    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 onChangeColumnWidth = (columnKey, width) => {
+    columnsWidths.set(columnKey, Math.round(width));
+    if (timerSaveColumns) {
+      clearTimeout(timerSaveColumns);
+    }
+    timerSaveColumns = setTimeout(() => {
+      saveColumnsWidth(id, columnsWidths);
+    }, 500);
   };
-  const cellFormater = SelectCellFormatter({
-    value: isRowSelected,
-    isCellSelected: props.isCellSelected,
-    onChange,
-    "aria-label": "Select"
+  useEffect(() => {
+    setColumnsConfigOptions(getColumnsConfig(id, columns));
+  }, [columns]);
+  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,
+      onChangeColumnsConfig,
+      onChangeColumnsOrder,
+      onChangeColumnWidth,
+      rowsCount: rowsFilterCount,
+      setRowsCount: setRowFilterCountInternal,
+      rowActionsGetter,
+      currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
+      currentRowHeight: currentRowHeightVariant.rowHeight,
+      currentRowHeaderHeight: currentRowHeightVariant.rowHeaderHeight,
+      rowHeights: finalRowHeights,
+      setRowHeightVariant: setCurrentRowHeightInternal,
+      rows,
+      checkedRows,
+      onCheckedRowsChange,
+      rowKeyGetter
+    },
+    children
   });
-  return cellFormater;
 }
+function useDataGrid() {
+  const context = useContext(DataGridContext);
+  if (!context)
+    throw new Error("useDataGrid context must be use inside DataGridContext");
+  return context;
+}
+const filterColumnClassName = "filter-cell";
+const filterHeight = 35;
 function SelectGroupFormatter(props) {
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
   const onChange = (checked) => {
@@ -238,6 +421,52 @@ function SelectGroupFormatter(props) {
   });
   return cellFormater;
 }
+function SelectFormatter(props) {
+  const {
+    checkedRows,
+    onCheckedRowsChange,
+    rowKeyGetter
+  } = useDataGrid();
+  const onChange = (checked, _isShiftClick) => {
+    const newCheckedRows = new Set(checkedRows);
+    if (checked) {
+      newCheckedRows.add(rowKeyGetter(props.row));
+    } else {
+      newCheckedRows.delete(rowKeyGetter(props.row));
+    }
+    onCheckedRowsChange && onCheckedRowsChange(newCheckedRows);
+  };
+  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 onAllRowsCheckedChange = (checked) => {
+    if (!onCheckedRowsChange)
+      return;
+    if (checked) {
+      onCheckedRowsChange(new Set(rows.map((r) => rowKeyGetter(r))));
+    } else {
+      onCheckedRowsChange(/* @__PURE__ */ new Set());
+    }
+  };
+  const allRowsChecked = rows.length === checkedRows?.size;
+  return SelectCellFormatter({
+    "aria-label": "Select All",
+    isCellSelected: props.isCellSelected,
+    value: allRowsChecked,
+    onChange: onAllRowsCheckedChange
+  });
+};
 const SelectColumn = {
   key: SELECT_COLUMN_KEY,
   name: "",
@@ -246,13 +475,8 @@ const SelectColumn = {
   resizable: false,
   sortable: false,
   frozen: true,
-  type: "number",
-  headerRenderer: (props) => SelectCellFormatter({
-    "aria-label": "Select All",
-    isCellSelected: props.isCellSelected,
-    value: props.allRowsSelected,
-    onChange: props.onAllRowsSelectionChange
-  }),
+  type: "boolean",
+  headerRenderer: SelectColumnHeaderRenderer,
   formatter: SelectFormatter,
   groupFormatter: SelectGroupFormatter
 };
@@ -268,11 +492,11 @@ function useFocusRef(isSelected) {
     tabIndex: isSelected ? 0 : -1
   };
 }
-const initialState$1 = {
+const initialState = {
   activeFilters: false,
   setActiveFilters: voidFunction
 };
-const FilterContext = createContext(initialState$1);
+const FilterContext = createContext(initialState);
 function FilterProvider({
   children,
   initialActiveFilters
@@ -280,12 +504,15 @@ function FilterProvider({
   const [filterOptions, setFilterOptions] = useState({
     activeFilters: initialActiveFilters
   });
-  const onChangeFilter = (columnkey, value) => {
+  const onChangeFilter = (column, value) => {
     const newMap = filterOptions.filters ? new Map(filterOptions.filters) : /* @__PURE__ */ new Map();
     if (value !== "") {
-      newMap.set(columnkey, value);
+      newMap.set(column.key, {
+        value,
+        customFilter: column.customFilter
+      });
     } else {
-      newMap.delete(columnkey);
+      newMap.delete(column.key);
     }
     setFilterOptions({
       ...filterOptions,
@@ -362,7 +589,7 @@ function DraggableHeaderRenderer(props) {
   const handleChange = (e) => {
     if (activeFilters) {
       if (onChangeFilter)
-        onChangeFilter(column.key, e.target.value);
+        onChangeFilter(column, e.target.value);
     }
     setFilter(e.target.value);
   };
@@ -430,220 +657,6 @@ const getDragHeaderRenderer = (handleColumnsReorder) => {
   }
   return HeaderRenderer2;
 };
-const initialState = {
-  columnsWidths: /* @__PURE__ */ new Map(),
-  onChangeColumnsConfig: voidFunction,
-  onChangeColumnsOrder: voidFunction,
-  onChangeColumnWidth: voidFunction,
-  columnsConfig: [{
-    key: "string",
-    visible: true,
-    hidden: false,
-    index: 0,
-    frozen: true,
-    name: "string;",
-    orginalIndex: 0,
-    originalVisible: true,
-    originalFrozen: false
-  }],
-  isSkeleton: false,
-  rowsCount: 0,
-  setRowsCount: voidFunction,
-  rowHeights: 36,
-  currentRowHeight: 36,
-  currentRowHeaderHeight: 40,
-  currentRowHeightVariant: "compact",
-  setRowHeightVariant: voidFunction
-};
-const BaseContext = createContext(initialState);
-const getColumnConfigByKey = (key, storeColumnsConfig) => {
-  let indexFind = -1;
-  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;
-  if (remoteConfig) {
-    columnsConfig = remoteConfig.columnsConfig;
-  } else {
-    try {
-      const item = window.localStorage.getItem(`${id}_columns_config`);
-      columnsConfig = item !== null ? JSON.parse(item) : [];
-    } catch (e) {
-      columnsConfig = [];
-    }
-  }
-  return columns.map((column, index) => {
-    const [columnConfig = {
-      ...column
-    }, columnConfigIndex] = getColumnConfigByKey(column.key, columnsConfig);
-    return {
-      key: column.key,
-      name: column.name,
-      hidden: column.hidden === void 0 ? false : column.hidden,
-      index: columnConfigIndex > -1 ? columnConfigIndex : index,
-      visible: columnConfig.visible === void 0 ? true : columnConfig.visible,
-      frozen: columnConfig.frozen === void 0 ? false : columnConfig.frozen,
-      orginalIndex: index,
-      originalVisible: column.visible === void 0 ? true : column.visible,
-      originalFrozen: column.frozen === void 0 ? false : column.frozen
-    };
-  }).sort((a, b) => a.index - b.index);
-}
-function getColumnsWidth(id, columns, remoteConfig) {
-  const newMap = /* @__PURE__ */ new Map();
-  let storeColumnsWidth;
-  try {
-    const item = window.localStorage.getItem(`${id}_columns_width`);
-    storeColumnsWidth = item !== null ? new Map(JSON.parse(item)) : /* @__PURE__ */ new Map();
-  } catch (e) {
-    storeColumnsWidth = /* @__PURE__ */ new Map();
-  }
-  for (let i = 0; i < columns.length; i++) {
-    let width;
-    if (remoteConfig) {
-      try {
-        width = remoteConfig.columnsWidths.get(columns[i].key);
-      } catch (error) {
-      }
-    }
-    if (width === void 0) {
-      const storeWidth = storeColumnsWidth.get(columns[i].key);
-      if (typeof storeWidth === "number") {
-        width = storeWidth;
-      }
-    }
-    if (width !== void 0) {
-      newMap.set(columns[i].key, width);
-    }
-  }
-  return newMap;
-}
-function saveColumnsWidth(id, storeColumnsWidth) {
-  localStorage.setItem(`${id}_columns_width`, JSON.stringify([...storeColumnsWidth]));
-}
-function saveColumnsConfig(id, columnsConfig) {
-  localStorage.setItem(`${id}_columns_config`, JSON.stringify(columnsConfig));
-}
-function getIndexRowHeightVariant(variant) {
-  if (variant === "compact") {
-    return 0;
-  }
-  if (variant === "standard") {
-    return 1;
-  }
-  return 2;
-}
-function BaseProvider(props) {
-  const {
-    id,
-    children,
-    isSkeleton,
-    columns,
-    remoteConfig,
-    rowsCount,
-    rowActionsGetter,
-    rowHeights,
-    rowHeaderHeights,
-    initialRowHeightVariant
-  } = props;
-  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) {
-      throw new Error("Must be same type rowheights and rowHeaderTypes");
-    }
-    if (typeof rowHeights === "number" && typeof rowHeaderHeights === "number") {
-      return {
-        rowHVariant: "compact",
-        rowHeight: rowHeights,
-        rowHeaderHeight: rowHeaderHeights
-      };
-    }
-    if (typeof rowHeights !== "number" && rowHeights.length !== 3) {
-      throw new Error("Must be 3 heights");
-    }
-    if (typeof rowHeaderHeights !== "number" && rowHeaderHeights.length !== 3) {
-      throw new Error("Must be 3 HeaderHeights");
-    }
-    return {
-      rowHVariant: initialRowHeightVariant,
-      rowHeight: typeof rowHeights !== "number" ? rowHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeights,
-      rowHeaderHeight: typeof rowHeaderHeights !== "number" ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeaderHeights
-    };
-  });
-  const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
-  let timerSaveColumns;
-  useEffect(() => {
-  }, [columnsConfig]);
-  useEffect(() => {
-    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 onChangeColumnWidth = (columnKey, width) => {
-    columnsWidths.set(columnKey, Math.round(width));
-    if (timerSaveColumns) {
-      clearTimeout(timerSaveColumns);
-    }
-    timerSaveColumns = setTimeout(() => {
-      saveColumnsWidth(id, columnsWidths);
-    }, 500);
-  };
-  useEffect(() => {
-    setColumnsConfigOptions(getColumnsConfig(id, columns));
-  }, [columns]);
-  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(BaseContext.Provider, {
-    value: {
-      isSkeleton,
-      columnsConfig,
-      columnsWidths,
-      onChangeColumnsConfig,
-      onChangeColumnsOrder,
-      onChangeColumnWidth,
-      rowsCount: rowsFilterCount,
-      setRowsCount: setRowFilterCountInternal,
-      rowActionsGetter,
-      currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
-      currentRowHeight: currentRowHeightVariant.rowHeight,
-      currentRowHeaderHeight: currentRowHeightVariant.rowHeaderHeight,
-      rowHeights: finalRowHeights,
-      setRowHeightVariant: setCurrentRowHeightInternal
-    },
-    children
-  });
-}
-const useBase = () => useContext(BaseContext);
 const WrapperSkeleton = styled("div")(() => ({
   display: "flex",
   width: "100%",
@@ -685,7 +698,7 @@ function getComparator(columns, sortColumn) {
   }
 }
 const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const getInOrderColumns = (columns, isMultipleRows, columnsConfig, columnsWidths, rowActionsGetter) => {
+const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths, rowActionsGetter) => {
   let filteredSortedColumns = columns.filter((column) => {
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
@@ -706,7 +719,7 @@ const getInOrderColumns = (columns, isMultipleRows, columnsConfig, columnsWidths
   if (rowActionsGetter) {
     filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
   }
-  if (isMultipleRows) {
+  if (hasCheckedRows) {
     filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
   }
   return filteredSortedColumns;
@@ -724,12 +737,18 @@ const getAligByType = (columnType) => {
   }
   return "left";
 };
-const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
-  const { columnsConfig, columnsWidths, onChangeColumnsOrder, rowActionsGetter, isSkeleton } = useBase();
-  const [columns, setColumns] = useState(
-    () => []
-  );
+const useSortColumnsRows = (sourceColumns, sourceRows) => {
+  const {
+    columnsConfig,
+    columnsWidths,
+    onChangeColumnsOrder,
+    rowActionsGetter,
+    checkedRows,
+    onCheckedRowsChange
+  } = useDataGrid();
+  const [columns, setColumns] = useState(() => []);
   const [sortColumns, setSortColumns] = useState([]);
+  const isSkeleton = useModuleSkeleton();
   const { activeFilters, filters } = useFilters();
   const findKeyInColumns = (key, cols) => {
     const index = cols.findIndex((column) => key === column.key && column.hidden === false);
@@ -739,7 +758,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
     setColumns(
       getInOrderColumns(
         sourceColumns,
-        isMultipleRows,
+        !!checkedRows && !!onCheckedRowsChange,
         columnsConfig,
         columnsWidths,
         rowActionsGetter
@@ -783,15 +802,19 @@ const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
       let valReturn = true;
       for (let i = 0; i < filters.size; i++) {
         const entry = iterator.next().value;
-        const key = entry[0];
-        const value = `${entry[1]}`;
-        let valRow;
+        const columnKey = entry[0];
+        const columnFilter = entry[1];
+        let valCell;
         try {
-          valRow = `${r[key]}`;
+          if (columnFilter.customFilter) {
+            valReturn = valReturn && columnFilter.customFilter(r, columnFilter.value);
+          } else {
+            valCell = getPropertyByString(r, columnKey) || "";
+            valReturn = valReturn && valCell.includes(columnFilter.value);
+          }
         } catch (error) {
           continue;
         }
-        valReturn = valReturn && valRow.includes(value);
         if (!valReturn)
           break;
       }
@@ -816,18 +839,20 @@ const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
 };
 function Table(props) {
   const {
-    isMultipleSelect = false,
     columns,
     rows,
     withActions,
-    onRowsChange
+    onRowsChange,
+    rowKeyGetter,
+    selectedRows,
+    onSelectedRowsChange
   } = props;
   const {
     finalColumns,
     sortColumns,
     setSortColumns,
     finalRows
-  } = useSortColumnsRows(columns, rows, isMultipleSelect);
+  } = useSortColumnsRows(columns, rows);
   const {
     activeFilters
   } = useFilters();
@@ -836,43 +861,17 @@ function Table(props) {
     setRowsCount,
     currentRowHeight,
     currentRowHeaderHeight
-  } = useBase();
-  const [selectedRows, setSelectedRows] = useState(() => new Set(props.selectedRows));
-  useEffect(() => {
-    setSelectedRows(new Set(props.selectedRows));
-  }, [props.selectedRows]);
+  } = useDataGrid();
   const ref_data_grid = useRef(null);
-  const updateExternal = (mapRowsSelected) => {
-    if (props.onRowsSelectedChange) {
-      const rawRowsSelected = [];
-      if (mapRowsSelected.size > 0) {
-        const iterator = mapRowsSelected.entries();
-        for (let i = 0; i < mapRowsSelected.size; i++) {
-          const entry = iterator.next().value;
-          const key = entry[1];
-          const row = finalRows.find((frow) => props.rowKeyGetter(frow) === key);
-          if (row) {
-            rawRowsSelected.push(row);
-          }
-        }
-      }
-      props.onRowsSelectedChange(mapRowsSelected, rawRowsSelected);
-    }
-  };
-  const onInternalSelectedRowsChange = (mapRowsSelected) => {
-    setSelectedRows(mapRowsSelected);
-    updateExternal(mapRowsSelected);
-  };
   const onRowClick = (row) => {
-    if (!isMultipleSelect) {
+    if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.entries().next().value) {
-        if (selectedRows.entries().next().value[1] === props.rowKeyGetter(row)) {
+        if (selectedRows.entries().next().value[1] === rowKeyGetter(row)) {
           return;
         }
       }
-      const mySet = /* @__PURE__ */ new Set([props.rowKeyGetter(row)]);
-      setSelectedRows(mySet);
-      updateExternal(mySet);
+      const mySet = /* @__PURE__ */ new Set([rowKeyGetter(row)]);
+      onSelectedRowsChange(mySet);
     }
   };
   useEffect(() => {
@@ -914,10 +913,10 @@ function Table(props) {
           rows: finalRows,
           onRowsChange,
           selectedRows,
-          onSelectedRowsChange: onInternalSelectedRowsChange,
+          onSelectedRowsChange,
           onRowClick,
           rowHeight: currentRowHeight,
-          rowKeyGetter: props.rowKeyGetter,
+          rowKeyGetter,
           cellNavigationMode: "LOOP_OVER_ROW",
           components: {
             checkboxFormatter: CheckboxFormatter
@@ -933,42 +932,49 @@ function Table(props) {
 }
 function DataGrid(props) {
   const {
+    id,
     withActions = true,
     rows,
     columns,
     actionsProps,
+    selectedRows,
+    onSelectedRowsChange,
+    rowKeyGetter,
     rowActionsGetter,
     onRowsChange,
-    rowHeaderHeights = [44, 63, 75],
-    rowHeights = [36, 52, 67],
-    initialRowHeightVariant = "compact"
+    rowHeaderHeights,
+    rowHeights,
+    initialRowHeightVariant,
+    checkedRows,
+    onCheckedRowsChange
   } = props;
-  const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(WrapperGrid, {
     id: `WrapperGrid_${props.id}`,
-    children: /* @__PURE__ */ jsx(BaseProvider, {
+    children: /* @__PURE__ */ jsx(DataGridProvider, {
       id: props.id,
-      isSkeleton,
       columns: props.columns,
       rowHeights,
       rowHeaderHeights,
       initialRowHeightVariant,
       rowsCount: rows.length,
       rowActionsGetter,
+      checkedRows,
+      onCheckedRowsChange,
+      rowKeyGetter,
+      rows,
       children: /* @__PURE__ */ jsxs(FilterProvider, {
         initialActiveFilters: false,
         children: [withActions && actionsProps && /* @__PURE__ */ jsx(Actions, {
           ...actionsProps
         }), /* @__PURE__ */ jsx(Table, {
-          id: props.id,
+          id,
           withActions,
           columns,
           rows,
-          isMultipleSelect: props.isMultipleSelect,
-          selectedRows: props.selectedRows,
-          rowKeyGetter: props.rowKeyGetter,
-          onRowsChange,
-          onRowsSelectedChange: props.onRowsSelectedChange
+          selectedRows,
+          onSelectedRowsChange,
+          rowKeyGetter,
+          onRowsChange
         })]
       })
     })
@@ -1064,12 +1070,30 @@ function NumberEditor({
     onBlur: () => onClose(true)
   });
 }
+const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
+  const rowsFinded = [];
+  if (set) {
+    if (set.size > 0) {
+      const iterator = set.entries();
+      for (let i = 0; i < set.size; i++) {
+        const entry = iterator.next().value;
+        const key = entry[1];
+        const row = rows.find((frow) => rowKeyGetter(frow) === key);
+        if (row) {
+          rowsFinded.push(row);
+        }
+      }
+    }
+  }
+  return rowsFinded;
+};
 export {
   DataGrid as D,
   NumberEditor as N,
   OriginalDataGridWrapperStyled as O,
   TextEditor as T,
   useFilters as a,
+  getDataGridRowsFromSet as b,
   getDataGridComponentsDictionary as g,
-  useBase as u
+  useDataGrid as u
 };