@m4l/components 0.1.39 → 0.1.40

package/dist/components/DataGrid/index.67260455.js

@@ -1,1782 +0,0 @@
-import { styled, alpha } from "@mui/material/styles";
-import { forwardRef, createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, useLayoutEffect, useImperativeHandle } 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, Fragment } from "react/jsx-runtime";
-import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString, useEnvironment } from "@m4l/core";
-import { M as MenuActions } from "../mui_extended/MenuActions/index.ee17bddd.js";
-import { P as Pager, g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.74d3f5fc.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.82f16572.js";
-import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.9230c57b.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a0a341c7.js";
-import "../../react-draggable.84d6b038.js";
-import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.a684827f.js";
-import "../Resizeable/index.c96c0f09.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
-import { A as Actions$1 } from "../CommonActions/components/Actions/index.d3e1f36e.js";
-import "react-hook-form";
-import "@mui/material/Button";
-import "@mui/lab";
-import "../modal/WindowConfirm.0b8a6818.js";
-import "../Icon/index.8d754623.js";
-import { W as WindowBase } from "../modal/WindowBase.04439b8e.js";
-import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.3a9b16c8.js";
-import { D as DateFormatter } from "../formatters/DateFormatter/index.80522f69.js";
-const WrapperGrid = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  padding: "0px",
-  inset: "0px",
-  overflow: "hidden"
-}));
-const OriginalDataGridWrapperStyled = styled("div")(({
-  theme
-}) => ({
-  position: "absolute",
-  bottom: "0px",
-  top: "0px",
-  left: "0px",
-  right: "0px",
-  "& .rdg ": {
-    userSelect: "initial",
-    height: "100%",
-    contentVisibility: "unset",
-    overflow: "scroll",
-    borderRadius: "5px",
-    "--rdg-grid-inline-size": "0px",
-    "--rdg-header-background-color": theme.palette.grid?.sectionHeader,
-    "--rdg-row-selected-background-color": theme.palette.mode === "light" ? theme.palette.primary.LightSelected : theme.palette.primary.DarkSelected,
-    "--rdg-row-hover-background-color": theme.palette.grid?.rowHover,
-    "--rdg-background-color": theme.palette.background.default,
-    "--rdg-selection-color": theme.palette.primary.main,
-    "--row-selected-hover-background-color": theme.palette.mode === "light" ? theme.palette.primary.LightSelectedHover : theme.palette.primary.DarkSelectedHover,
-    "--rdg-checkbox-color": theme.palette.primary.main,
-    "--rdg-checkbox-focus-color": alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-    "--rdg-border-color": theme.palette.divider
-  },
-  "& .rdg::-webkit-scrollbar": {
-    width: "6px",
-    height: "6px",
-    borderRadius: "3px",
-    backgroundColor: "transparent"
-  },
-  "& .rdg::-webkit-scrollbar-track": {
-    backgroundColor: "transparent",
-    border: "0px solid transparent"
-  },
-  "& .rdg::-webkit-scrollbar-corner": {
-    backgroundColor: "transparent"
-  },
-  "& ::-webkit-scrollbar-thumb": {
-    borderRadius: "10px",
-    backgroundColor: theme.palette.divider,
-    border: "0px solid transparent"
-  },
-  '& [role="columnheader"]': {
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  "& .rdg-cell": {
-    fontFamily: theme.typography.body2.fontFamily,
-    fontWeight: theme.typography.body2.fontWeight,
-    fontSize: theme.typography.body2.fontSize,
-    color: theme.palette.text.secondary,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    borderRight: `0px solid transparent`,
-    position: "relative",
-    "&.rdg-cell-frozen": {
-      position: "sticky"
-    },
-    "&:after": {
-      content: `""`,
-      borderRight: `1px solid ${theme.palette.divider}`,
-      position: "absolute",
-      right: "0px",
-      top: "25%",
-      bottom: "25%"
-    },
-    "& .m4l_icon": {
-      height: "100%"
-    }
-  },
-  "& .rdg-cell.rdg-cell-align-left": {
-    textAlign: "left"
-  },
-  "& .rdg-cell.rdg-cell-align-center": {
-    textAlign: "center"
-  },
-  "& .rdg-cell.rdg-cell-align-right": {
-    textAlign: "right"
-  },
-  "& .rdg-row .rdg-cell-frozen-last:after": {
-    borderRight: `0px solid transparent`,
-    boxShadow: "none"
-  },
-  "& .rdg-row :last-child:after": {
-    borderRight: `0px solid transparent`
-  },
-  "& .rdg-header-row .rdg-cell": {
-    fontFamily: theme.typography.subtitle2.fontFamily,
-    fontWeight: theme.typography.subtitle2.fontWeight,
-    fontSize: theme.typography.subtitle2.fontSize,
-    color: theme.palette.text.primary,
-    borderRight: `0px solid transparent`,
-    boxShadow: "none",
-    "&.rdg-cell-frozen-last": {
-      "&:after": {
-        borderRight: `0px solid transparent`
-      },
-      boxShadow: "var(--rdg-frozen-cell-box-shadow)"
-    },
-    "& .rdg-sort-arrow": {
-      width: theme.spacing(1),
-      margin: `0 ${theme.spacing(0.5)}`
-    }
-  },
-  "& .rdg-header-row :last-child.rdg-cell": {
-    borderTopRightRadius: "5px",
-    "&:after": {
-      borderRight: `0px solid transparent`
-    }
-  },
-  "& .filter_cell_div": {
-    paddingLeft: theme.spacing(0.5),
-    paddingRight: theme.spacing(0.5)
-  },
-  "& .rdg-header-sort-cell": {
-    width: "100%",
-    flexGrow: "1",
-    alignItems: "center"
-  },
-  '& [aria-columnsort="ASC"]': {
-    borderTop: `2px solid ${theme.palette.primary.main}`
-  },
-  '& [aria-columnsort="DESC"]': {
-    borderBottom: `2px solid ${theme.palette.primary.main}`
-  }
-}));
-const WrapperTable = styled("div", {
-  shouldForwardProp: (prop) => prop !== "withActions"
-})(({
-  withActions,
-  theme
-}) => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  top: withActions ? theme.spacing(5.5) : "0px",
-  bottom: "0px",
-  left: "0px",
-  right: "0px",
-  overflow: "hidden"
-}));
-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 = [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);
-  };
-  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
-  });
-}
-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: SELECT_COLUMN_KEY,
-  name: "",
-  width: 60,
-  maxWidth: 60,
-  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 ACTIONS_COLUMN_KEY = "actions-row";
-function ActionsFormatter(props) {
-  const {
-    rowActionsGetter
-  } = useDataGrid();
-  if (rowActionsGetter === void 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(MenuActions, {
-    arrowType: "top-left",
-    objItem: props.row,
-    menuActions: rowActionsGetter,
-    marginTop: 1,
-    marginLeft: "-11px",
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "left"
-    },
-    transformOrigin: {
-      vertical: "top",
-      horizontal: "left"
-    }
-  });
-}
-const ActionsColumn = {
-  key: ACTIONS_COLUMN_KEY,
-  name: "Actions",
-  width: 60,
-  withFilter: false,
-  resizable: true,
-  sortable: false,
-  frozen: true,
-  type: "custom",
-  formatter: ActionsFormatter
-};
-const WrapperSkeleton = styled("div")(() => ({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  alignItems: "center"
-}));
-function SkeletonFormatter() {
-  return /* @__PURE__ */ jsx(WrapperSkeleton, {
-    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 === 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;
-        try {
-          if (columnFilter.customFilter) {
-            valReturn = valReturn && columnFilter.customFilter(r, columnFilter.value);
-          } else {
-            valCell = getPropertyByString(r, columnKey) || "";
-            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,
-    withActions,
-    onRowsChange,
-    rowKeyGetter,
-    selectedRows,
-    onSelectedRowsChange
-  } = props;
-  const {
-    finalColumns,
-    sortColumns,
-    setSortColumns,
-    finalRows
-  } = useSortColumnsRows(columns, rows);
-  const {
-    activeFilters
-  } = useFilters();
-  const {
-    onChangeColumnWidth,
-    setRowsCount,
-    currentRowHeight,
-    currentRowHeaderHeight
-  } = 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(WrapperTable, {
-    id: "WrapperTable",
-    withActions,
-    children: /* @__PURE__ */ jsx(OriginalDataGridWrapperStyled, {
-      id: "OriginalGridWrapperStyled",
-      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 SKTWrapperFilter = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
-function Filter() {
-  const isSkeleton = useModuleSkeleton();
-  const {
-    activeFilters,
-    setActiveFilters
-  } = useFilters();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperFilter, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        height: 20
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(IconButton, {
-    dictionaryTooltip: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
-    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.subtitle2,
-  color: theme.palette.text.primary,
-  padding: `${theme.spacing(3)} ${theme.spacing(1)}`
-}));
-const WrapperDataGrid = styled("div")(() => ({
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: 1
-}));
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "row"
-}));
-const ColumnActions = styled("div")(({ theme }) => ({
-  paddingTop: theme.spacing(3),
-  display: "flex",
-  flexDirection: "row"
-}));
-styled("div")(({ theme }) => ({
-  paddingTop: theme.spacing(3),
-  display: "flex",
-  flexDirection: "row",
-  justifyContent: "flex-end",
-  "& > button": {
-    marginLeft: "10px"
-  }
-}));
-function FormatterColumn({
-  row,
-  onRowChange,
-  column
-}) {
-  const handleChange = () => {
-    const newRow = {
-      ...row
-    };
-    newRow[column.key] = !row[column.key];
-    onRowChange(newRow);
-  };
-  return /* @__PURE__ */ jsx(Checkbox, {
-    size: "small",
-    checked: row[column.key],
-    onChange: handleChange
-  });
-}
-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
-  } = 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: FormatterColumn,
-    cellClass: "rdg-cell-align-center"
-  }, {
-    key: "frozen",
-    name: getLabel("data_grid.settings_column_frozen"),
-    width: 80,
-    type: "boolean",
-    formatter: FormatterColumn,
-    cellClass: "rdg-cell-align-center"
-  }], [getLabel]);
-  const checkAll = () => {
-    setRows(rows.map((row) => ({
-      ...row,
-      visible: true
-    })));
-  };
-  const unCheckAll = () => {
-    setRows(rows.map((row) => ({
-      ...row,
-      visible: false
-    })));
-  };
-  const restoreAll = () => {
-    setRows(rows.map((row) => ({
-      ...row,
-      visible: row.originalVisible,
-      frozen: row.originalFrozen,
-      index: row.originalIndex
-    })).sort((a, b) => a.index - b.index));
-  };
-  useEffect(() => {
-    if (isInit === false) {
-      setRows(getRowsFromColumnsConfig(columnsConfig));
-    }
-    setIsInit(false);
-  }, [columnsConfig]);
-  const rowSelectedIndex = useMemo(() => {
-    let rowIndex = -1;
-    if (selRows.size !== 1)
-      return rowIndex;
-    const iterator = selRows.entries();
-    const entry = iterator.next().value[1];
-    rowIndex = rows.findIndex((row) => row.key === entry);
-    return rowIndex;
-  }, [rows, selRows]);
-  const handleMoveFirst = () => {
-    if (rowSelectedIndex === -1)
-      return -1;
-    const newRows = [...rows];
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(0, 0, rows[rowSelectedIndex]);
-    refdata_grid.current?.selectCell({
-      idx: 0,
-      rowIdx: 0
-    });
-    setRows(newRows);
-  };
-  const handleMoveLast = () => {
-    if (rowSelectedIndex === -1)
-      return -1;
-    const newRows = [...rows];
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
-    refdata_grid.current?.selectCell({
-      idx: 0,
-      rowIdx: newRows.length - 1
-    });
-    setRows(newRows);
-  };
-  const handleMoveUpDownd = (position) => {
-    if (rowSelectedIndex === -1)
-      return -1;
-    const newRows = [...rows];
-    const element = newRows[rowSelectedIndex];
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(rowSelectedIndex + position, 0, element);
-    refdata_grid.current?.selectCell({
-      idx: 0,
-      rowIdx: rowSelectedIndex + position
-    });
-    setRows(newRows);
-  };
-  const getColumnConfigByKey2 = (key) => {
-    const rowIndexFinded = rows.findIndex((row) => row.key === key);
-    if (rowIndexFinded > -1) {
-      return {
-        visible: rows[rowIndexFinded].visible,
-        frozen: rows[rowIndexFinded].frozen
-      };
-    }
-    return void 0;
-  };
-  const getRowIndex = (column) => {
-    const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
-    if (rowIndexFinded > -1) {
-      return rowIndexFinded;
-    }
-    return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
-  };
-  const handleIntro = () => {
-    const newColumnsConfig = columnsConfig.map((columnConfig) => {
-      const newColumnConfig = {
-        ...columnConfig
-      };
-      if (!columnConfig.hidden) {
-        const columnConfigRow = getColumnConfigByKey2(columnConfig.key);
-        if (columnConfigRow) {
-          newColumnConfig.visible = columnConfigRow.visible;
-          newColumnConfig.frozen = columnConfigRow.frozen;
-        }
-      }
-      return newColumnConfig;
-    }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
-    onChangeColumnsConfig(newColumnsConfig);
-    onCloseSettings();
-  };
-  const onInternalSelectedRowsChange = () => {
-  };
-  const onInternalRowsChange = (newRows) => {
-    setRows(newRows);
-  };
-  const onRowClick = (row) => {
-    if (selRows.has(row.key))
-      return;
-    const mySet = /* @__PURE__ */ new Set([row.key]);
-    setSelRows(mySet);
-  };
-  return /* @__PURE__ */ jsxs(WrapperColumnsConfig, {
-    id: "WrapperColumnsConfig",
-    ref: divRef,
-    children: [/* @__PURE__ */ jsx(DivSelColumns, {
-      id: "divInfo",
-      children: getLabel("data_grid.settings_sel_columns")
-    }), /* @__PURE__ */ jsx(WrapperDataGrid, {
-      id: "WrapperDataGrid",
-      children: /* @__PURE__ */ jsx(OriginalDataGridWrapperStyled, {
-        id: "Originaldata_gridWrapperStyled",
-        children: /* @__PURE__ */ jsx(DataGrid$1, {
-          className: "fill-data_grid  rdg-light",
-          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, {
-      children: [/* @__PURE__ */ jsx(IconButton, {
-        dictionaryTooltip: "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, {
-        dictionaryTooltip: "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, {
-        dictionaryTooltip: "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, {
-        dictionaryTooltip: "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, {
-        dictionaryTooltip: "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, {
-        dictionaryTooltip: "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, {
-        dictionaryTooltip: "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 SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
-function Settings() {
-  const {
-    openModal,
-    closeModal
-  } = useModal();
-  const {
-    columnsConfig,
-    onChangeColumnsConfig
-  } = useDataGrid();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const isSkeleton = useModuleSkeleton();
-  const ref = useRef(null);
-  const onCloseSettings = useCallback(() => {
-    closeModal();
-  }, [closeModal]);
-  const onClickIntro = useCallback(() => {
-    if (ref.current?.onClickIntro) {
-      ref.current?.onClickIntro();
-    }
-  }, []);
-  const onClickSettings = useCallback(() => {
-    openModal({
-      initialWidth: 500,
-      initialHeigth: 680,
-      window: /* @__PURE__ */ jsxs(WindowBase, {
-        title: getLabel("data_grid.settings_title"),
-        children: [/* @__PURE__ */ jsx(ColumnsConfig, {
-          ref,
-          columnsConfig,
-          onChangeColumnsConfig,
-          onCloseSettings
-        }), /* @__PURE__ */ jsxs(Actions$1, {
-          children: [/* @__PURE__ */ jsx(ActionCancel, {
-            onClick: closeModal
-          }), /* @__PURE__ */ jsx(ActionIntro, {
-            onClick: onClickIntro
-          })]
-        })]
-      })
-    });
-  }, [closeModal, columnsConfig, getLabel, onChangeColumnsConfig, onCloseSettings, openModal, onClickIntro]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperColumnsSettings, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        height: 20
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(IconButton, {
-    dictionaryTooltip: "data_grid.tooltip_settings",
-    onClick: onClickSettings,
-    "aria-label": "settings",
-    src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
-  });
-}
-const Container = styled("div")(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-const RowsLabel = styled("span")(() => ({}));
-const InsetLabel = styled("span")(({ theme }) => ({
-  marginLeft: theme.spacing(2),
-  paddingTop: "2px",
-  paddingBottom: "2px",
-  paddingLeft: "4px",
-  paddingRight: "4px",
-  border: `1px solid ${theme.palette.divider}`
-}));
-function RowsCount() {
-  const {
-    rowsCount
-  } = useDataGrid();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsxs(Container, {
-      children: [/* @__PURE__ */ jsx(RowsLabel, {
-        children: /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "40px",
-          height: "16px"
-        })
-      }), /* @__PURE__ */ jsx(InsetLabel, {
-        children: /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: "20px",
-          height: "16px"
-        })
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsxs(Container, {
-    className: "rows-count",
-    id: "RowsCount",
-    children: [/* @__PURE__ */ jsx(RowsLabel, {
-      children: getLabel("data_grid.rows")
-    }), /* @__PURE__ */ jsx(InsetLabel, {
-      children: rowsCount
-    })]
-  });
-}
-const WrapperDensity = styled("div")(({ theme }) => ({
-  marginLeft: 0,
-  [theme.breakpoints.up("sm")]: {
-    marginLeft: theme.spacing(3)
-  }
-}));
-const SKTWrapperDensity = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
-function Density() {
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    rowHeights,
-    currentRowHeightVariant,
-    setRowHeightVariant
-  } = useDataGrid();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  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 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, {});
-  }
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperDensity, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "20px",
-        height: "20px"
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(WrapperDensity, {
-    id: "WrapperDensity",
-    children: /* @__PURE__ */ jsx(MenuActions, {
-      arrowType: "right-top",
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions,
-      url_icon: currenViewIcon,
-      toolTip: getLabel("data_grid.tooltip_density")
-    })
-  });
-}
-const WrapperActions = styled("div")(({ theme }) => ({
-  ...theme.typography.caption,
-  position: "absolute",
-  left: "0px",
-  right: "0px",
-  top: "0px",
-  height: theme.spacing(5.5),
-  padding: 0,
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  [theme.breakpoints.up("sm")]: {
-    padding: theme.spacing(0, 1.5)
-  },
-  "&.with-no-pager .rows-count": {
-    flexGrow: 1
-  },
-  "& .MuiTablePagination-root": {
-    flexGrow: 1,
-    display: "flex",
-    justifyContent: "center",
-    overflow: "hidden"
-  }
-}));
-function Actions(props) {
-  const isDesktop = useResponsiveDesktop();
-  const {
-    rowHeights
-  } = useDataGrid();
-  const isSkeleton = useModuleSkeleton();
-  const {
-    withRowsCount = true,
-    withPager = true,
-    pagerOptions,
-    withSettings = true,
-    settingsProps,
-    withLocalFilters
-  } = props;
-  return /* @__PURE__ */ jsxs(WrapperActions, {
-    id: "WrapperActions",
-    className: withPager && pagerOptions ? "with-pager" : "with-no-pager",
-    children: [withRowsCount && isDesktop && /* @__PURE__ */ jsx(RowsCount, {}), withPager && pagerOptions && /* @__PURE__ */ jsx(Pager, {
-      ...pagerOptions,
-      totalRecords: pagerOptions.totalRecords,
-      isSkeleton,
-      isDesktop
-    }), typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}), withLocalFilters && /* @__PURE__ */ jsx(Filter, {}), withSettings && /* @__PURE__ */ jsx(Settings, {
-      ...settingsProps
-    })]
-  });
-}
-function DataGrid(props) {
-  const {
-    id,
-    withActions = true,
-    rows,
-    columns,
-    actionsProps,
-    selectedRows,
-    onSelectedRowsChange,
-    rowKeyGetter,
-    rowActionsGetter,
-    onRowsChange,
-    rowHeaderHeights,
-    rowHeights,
-    initialRowHeightVariant,
-    checkedRows,
-    onCheckedRowsChange
-  } = props;
-  return /* @__PURE__ */ jsx(WrapperGrid, {
-    id: `WrapperGrid_${props.id}`,
-    children: /* @__PURE__ */ jsx(DataGridProvider, {
-      id: props.id,
-      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,
-          withActions,
-          columns,
-          rows,
-          selectedRows,
-          onSelectedRowsChange,
-          rowKeyGetter,
-          onRowsChange
-        })]
-      })
-    })
-  });
-}
-function columnBooleanFormatter(props) {
-  const {
-    fieldValue,
-    presentationType,
-    Component
-  } = props;
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(BooleanFormatter, {
-      presentationType,
-      value: getPropertyByString(obProps, fieldValue),
-      Component
-    });
-  };
-}
-function columnDateFormatter(props) {
-  const {
-    fieldValue,
-    presentationType,
-    Component
-  } = props;
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(DateFormatter, {
-      presentationType,
-      value: getPropertyByString(obProps, fieldValue),
-      Component
-    });
-  };
-}
-function getDataGridComponentsDictionary() {
-  return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
-}
-({
-  grid: {
-    actions: "Actions",
-    settings_tooltip: "Settings",
-    settings_sel_columns: "Select columns",
-    settings_column_name: "Name",
-    settings_column_position: "Position",
-    settings_column_visible: "Visible",
-    settings_column_frozen: "Frozen",
-    settings_move_first: "Move first",
-    settings_move_up: "Move up",
-    settings_move_last: "Move first",
-    settings_move_down: "Move down",
-    settings_visible_all: "Visible all",
-    settings_no_visible_all: "Invisible all",
-    settings_restore: "Restore",
-    density_tooltip: "Density",
-    density_compact: "Compact",
-    density_standard: "Standard",
-    density_confortable: "Confortable",
-    filter_holder: "Filter",
-    filter_show: "Show filters",
-    filter_hide: "Hide filters",
-    rows: "Rows",
-    rows_per_page: "Rows per page"
-  },
-  ...defaultPagerDictionary,
-  ...defaultModalDialogDictionary
-});
-const Input = styled("input")(() => ({
-  appearance: "none",
-  boxSizing: "border-box",
-  inlineSize: "100%",
-  blockSize: "100%",
-  paddingBlock: "0",
-  verticalAlign: "top",
-  textAlign: "right",
-  color: "var(--rdg-color)",
-  backgroundColor: "var(--rdg-background-color)",
-  fontFamily: "inherit",
-  "&:focus": {
-    outline: "none"
-  },
-  "&::placeholder": {
-    color: "#999",
-    opacity: "1"
-  }
-}));
-function autoFocusAndSelect(input) {
-  input?.focus();
-  input?.select();
-}
-function TextEditor({
-  row,
-  column,
-  onRowChange,
-  onClose
-}) {
-  return /* @__PURE__ */ jsx(Input, {
-    className: "rdg-text-editor",
-    ref: autoFocusAndSelect,
-    value: row[column.key],
-    onChange: (event) => onRowChange({
-      ...row,
-      [column.key]: event.target.value
-    }),
-    onBlur: () => onClose(true)
-  });
-}
-function NumberEditor({
-  row,
-  column,
-  onRowChange,
-  onClose
-}) {
-  return /* @__PURE__ */ jsx(Input, {
-    className: "rdg-text-editor",
-    ref: autoFocusAndSelect,
-    type: "number",
-    value: row[column.key],
-    onChange: (event) => onRowChange({
-      ...row,
-      [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
-    }),
-    onBlur: () => onClose(true)
-  });
-}
-const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
-  const rowsFinded = [];
-  if (set) {
-    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,
-  TextEditor as T,
-  getDataGridRowsFromSet as a,
-  columnDateFormatter as b,
-  columnBooleanFormatter as c,
-  getDataGridComponentsDictionary as g
-};