@m4l/components 1.0.11 → 1.0.13

package/components/DataGrid/index.68e19254.js

@@ -0,0 +1,915 @@
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.0dd5af28.js";
+import { g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.3926c835.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+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 { SvgIcon, Checkbox, InputBase, styled as styled$1, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+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.6b044e84.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.0faeade8.js";
+const DataGridRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  padding: "0px",
+  inset: "0px",
+  overflow: "hidden",
+  ...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" }) });
+}
+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" }) });
+}
+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" }) });
+}
+const CheckboxFormatter = forwardRef(
+  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
+      }
+    );
+  }
+);
+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 = [28, 32, 36],
+    rowHeaderHeights = [28, 32, 36],
+    initialRowHeightVariant = "compact",
+    checkedRows,
+    onCheckedRowsChange,
+    rowKeyGetter,
+    classes
+  } = 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(
+    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);
+  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) => {
+    onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
+  };
+  const cellFormater = SelectCellFormatter({
+    value: isRowSelected,
+    isCellSelected: props.isCellSelected,
+    onChange,
+    "aria-label": "Select Group"
+  });
+  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: DATAGRID_SELECT_COLUMN_KEY,
+  name: "",
+  width: 32,
+  minWidth: 32,
+  isDraggable: false,
+  resizable: false,
+  sortable: false,
+  frozen: true,
+  type: "boolean",
+  headerRenderer: SelectColumnHeaderRenderer,
+  formatter: SelectFormatter,
+  groupFormatter: SelectGroupFormatter
+};
+function useFocusRef(isSelected) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (!isSelected)
+      return;
+    ref.current?.focus({ preventScroll: true });
+  }, [isSelected]);
+  return {
+    ref,
+    tabIndex: isSelected ? 0 : -1
+  };
+}
+const initialState = {
+  activeFilters: false,
+  setActiveFilters: voidFunction
+};
+const FilterContext = createContext(initialState);
+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 });
+    } else {
+      newMap.delete(column.key);
+    }
+    setFilterOptions({
+      ...filterOptions,
+      filters: newMap
+    });
+  };
+  const setActiveFilters = (active) => {
+    if (active) {
+      setFilterOptions({ activeFilters: true, filters: /* @__PURE__ */ new Map() });
+    } else {
+      setFilterOptions({ activeFilters: false });
+    }
+  };
+  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 [filter, setFilter] = useState(filters?.get(column.key) || "");
+  const [{ isDragging }, drag] = useDrag({
+    type: "COLUMN_DRAG",
+    item: { key: column.key },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  });
+  const [{ isOver }, drop] = useDrop({
+    accept: "COLUMN_DRAG",
+    drop({ key }) {
+      onColumnsReorder(key, column.key);
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+  const handleChange = (e) => {
+    if (activeFilters) {
+      if (onChangeFilter)
+        onChangeFilter(column, e.target.value);
+    }
+    setFilter(e.target.value);
+  };
+  useEffect(() => {
+    if (!activeFilters)
+      setFilter("");
+  }, [activeFilters]);
+  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",
+            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 HeaderRenderer2;
+};
+const WrapperSkeleton = styled$1("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  alignItems: "center"
+}));
+function SkeletonFormatter() {
+  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);
+  let typeOrder = "string";
+  if (column) {
+    typeOrder = column.type || "string";
+  }
+  switch (typeOrder) {
+    case "number":
+      return (a, b) => {
+        try {
+          return Number(a[sortColumn]) - Number(b[sortColumn]);
+        } catch (error) {
+          return -1;
+        }
+      };
+    default:
+      return (a, b) => {
+        try {
+          return a[sortColumn].toString().localeCompare(b[sortColumn].toString());
+        } catch (error) {
+          return -1;
+        }
+      };
+  }
+}
+const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
+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;
+    return !column.hidden && visible;
+  }).sort(
+    (a, b) => getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)
+  ).map((columnSorted) => {
+    const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
+    return {
+      ...columnSorted,
+      frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : true,
+      width: typeof columnsWidths.get(columnSorted.key) === "number" ? columnsWidths.get(columnSorted.key) : columnSorted.width
+    };
+  }).sort((a, b) => {
+    const order = (a.frozen === void 0 || a.frozen === false) === (b.frozen === void 0 || b.frozen === false) ? 0 : a.frozen ? -1 : 1;
+    return order;
+  });
+  if (rowActionsGetter) {
+    filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
+  }
+  if (hasCheckedRows) {
+    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
+  }
+  return filteredSortedColumns;
+};
+const getAligByType = (columnType) => {
+  switch (columnType) {
+    case "string":
+      return "left";
+    case "date":
+    case "boolean":
+    case "custom":
+      return "center";
+    case "number":
+      return "right";
+  }
+  return "left";
+};
+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);
+    return index !== -1;
+  };
+  useEffect(() => {
+    setColumns(
+      getInOrderColumns(
+        sourceColumns,
+        !!checkedRows && !!onCheckedRowsChange,
+        columnsConfig,
+        columnsWidths,
+        rowActionsGetter
+      )
+    );
+    const finalSortedColumns = sortColumns.filter(
+      (sortColumn) => findKeyInColumns(sortColumn.columnKey, sourceColumns)
+    );
+    if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
+      setSortColumns(finalSortedColumns);
+    }
+  }, [sourceColumns, columnsConfig, rowActionsGetter]);
+  const finalColumns = useMemo(() => {
+    const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
+    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 === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
+        return newColumn;
+      }
+      if (isSkeleton) {
+        newColumn.headerRenderer = SkeletonFormatter;
+        newColumn.formatter = SkeletonFormatter;
+      }
+      if (newColumn.headerRenderer) {
+        newColumn.withinHeaderRenderer = newColumn.headerRenderer;
+      }
+      if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
+        newColumn.headerCellClass = filterColumnClassName;
+      }
+      newColumn.headerRenderer = DragAndDropHeaderRenderer;
+      return newColumn;
+    });
+  }, [isSkeleton, columns, activeFilters, onChangeColumnsOrder]);
+  const finalRows = useMemo(() => {
+    const nextRows = sourceRows.filter((r) => {
+      if (!filters || filters.size === 0)
+        return true;
+      const iterator = filters.entries();
+      let valReturn = true;
+      for (let i = 0; i < filters.size; i++) {
+        const entry = iterator.next().value;
+        const columnKey = entry[0];
+        const columnFilter = entry[1];
+        let valCell;
+        const valueMaybeString = getPropertyByString(r, columnKey);
+        let fixedValue;
+        if (typeof valueMaybeString === "string") {
+          fixedValue = valueMaybeString;
+        } else {
+          fixedValue = "";
+        }
+        try {
+          if (columnFilter.customFilter) {
+            valReturn = valReturn && columnFilter.customFilter(r, columnFilter.value);
+          } else {
+            valCell = fixedValue;
+            valReturn = valReturn && valCell.includes(columnFilter.value);
+          }
+        } catch (error) {
+          continue;
+        }
+        if (!valReturn)
+          break;
+      }
+      return valReturn;
+    });
+    if (sortColumns.length === 0) {
+      return nextRows;
+    }
+    nextRows.sort((a, b) => {
+      for (const sort of sortColumns) {
+        const comparator = getComparator(columns, sort.columnKey);
+        const compResult = comparator(a, b);
+        if (compResult !== 0) {
+          return sort.direction === "ASC" ? compResult : -compResult;
+        }
+      }
+      return 0;
+    });
+    return nextRows;
+  }, [sourceRows, sortColumns, filters]);
+  return { finalColumns, sortColumns, setSortColumns, finalRows };
+};
+function Table(props) {
+  const { 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();
+  const ref_data_grid = useRef(null);
+  const onRowClick = (row) => {
+    if (selectedRows && onSelectedRowsChange) {
+      if (selectedRows.entries().next().value) {
+        if (selectedRows.entries().next().value[1] === rowKeyGetter(row)) {
+          return;
+        }
+      }
+      const mySet = /* @__PURE__ */ new Set([rowKeyGetter(row)]);
+      onSelectedRowsChange(mySet);
+    }
+  };
+  useEffect(() => {
+    let columnIndice = 0;
+    for (const column of finalColumns) {
+      const index = sortColumns.findIndex((sortColumn) => column.key === sortColumn.columnKey);
+      if (index !== -1) {
+        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
+      } else {
+        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.removeAttribute("aria-columnsort");
+      }
+      columnIndice++;
+    }
+  }, [sortColumns, finalColumns]);
+  useEffect(() => {
+    setRowsCount(finalRows.length);
+  }, [finalRows]);
+  const onColumnResize = (idx, width) => {
+    onChangeColumnWidth(finalColumns[idx].key, width);
+  };
+  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 }
+    }
+  ) }) }) });
+}
+const dataGridClasses = generateUtilityClasses(componentName, [
+  "root",
+  "actions",
+  "withPager",
+  "withNoPager",
+  "rowsCount",
+  "rowsCountLabel",
+  "rowsCountValue",
+  "densitySkeleton",
+  "actionDensityPopover",
+  "actionFilter",
+  "actionSettings",
+  "tableContaniner",
+  "wrapperDataGridCss",
+  "columnsConfigContainer",
+  "columnsLabelSetColumns",
+  "columnsConfigContent",
+  "columnsConfigGrid",
+  "columnsConfigActions",
+  "formatterColumn",
+  "skeletonFormatter",
+  "actionsFormatter",
+  "actionsConfigContainer",
+  "booleanFormatter",
+  "withActions"
+]);
+function getDataGridUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const dataGridUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    actions: ["actions", ownerState.actionsProps.withPager ? "withPager" : "withNoPager"],
+    rowsCount: ["rowsCount"],
+    rowsCountLabel: ["rowsCountLabel"],
+    rowsCountValue: ["rowsCountValue"],
+    densitySkeleton: ["densitySkeleton"],
+    densityRoot: ["densityRoot"],
+    densityPopover: ["densityPopover"],
+    actionFilter: ["actionFilter"],
+    actionSettings: ["actionSettingsRoot"],
+    actionDensityPopover: ["actionDensityPopover"],
+    tableContaniner: ["tableContaniner", ownerState.withActions && "withActions"],
+    wrapperDataGridCss: ["wrapperDataGridCss"],
+    columnsConfigContainer: ["columnsConfigContainer"],
+    columnsLabelSetColumns: ["columnsLabelSetColumns"],
+    columnsConfigContent: ["columnsConfigContent"],
+    columnsConfigGrid: ["columnsConfigGrid"],
+    columnsConfigActions: ["columnsConfigActions"],
+    formatterColumn: ["formatterColumn"],
+    skeletonFormatter: ["skeletonFormatter"],
+    actionsFormatter: ["actionsFormatter"],
+    actionsConfigContainer: ["actionsConfigContainer"],
+    booleanFormatter: ["booleanFormatter"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getDataGridUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function getDataGridComponentsDictionary() {
+  return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
+}
+const dictionary = {
+  LABEL_ACTIONS: "actions",
+  LABEL_ROWS_PER_PAGE: "pager.rows_per_page",
+  LABEL_OF: "pager.of"
+};
+const DATAGRID_TEST_ID = "m4ldatagrid";
+const PREFIX_TEST_ATTRIBUTE = "data-testid";
+const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
+function DataGrid(props) {
+  const {
+    id,
+    withActions = true,
+    rows,
+    columns,
+    actionsProps,
+    selectedRows,
+    onSelectedRowsChange,
+    rowKeyGetter,
+    rowActionsGetter,
+    onRowsChange,
+    rowHeaderHeights,
+    rowHeights,
+    initialRowHeightVariant,
+    checkedRows,
+    onCheckedRowsChange,
+    dataTestId = ""
+  } = props;
+  const ownerState = {
+    actionsProps,
+    withActions
+  };
+  const classes = dataGridUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    DataGridRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? {
+        [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
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+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 {
+  DataGridRoot as D,
+  useFilters as a,
+  dictionary as b,
+  DataGrid as c,
+  dataGridClasses as d,
+  getDataGridRowsFromSet as e,
+  getDataGridComponentsDictionary as g,
+  useDataGrid as u
+};