@m4l/components 0.0.2 → 0.0.5

package/dist/components/DataGrid/index.js

@@ -0,0 +1,1623 @@
+import { styled, alpha } from "@mui/material/styles";
+import { forwardRef, useRef, useLayoutEffect, createContext, useState, useContext, useEffect, useMemo, useCallback, useImperativeHandle } 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.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, useEnvironment } from "@m4l/core";
+import { MenuActions } from "@mui_extended";
+import { P as Pager } from "../mui_extended/Pager/index.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.js";
+import { u as useModal } from "../../hooks/useModal/index.js";
+import { M as MenuActions$1 } from "../mui_extended/MenuActions/index.js";
+import { u as useResponsiveDesktop } from "../../vendor.js";
+import { format } from "date-fns";
+const WrapperGrid$1 = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  padding: "0px",
+  inset: "0px",
+  overflow: "hidden"
+}));
+const OriginalGridWrapperStyled = 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%"
+    }
+  },
+  "& .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 filterColumnClassName = "filter-cell";
+const filterHeight = 35;
+function SelectFormatter(props) {
+  const [isRowSelected, onRowSelectionChange] = useRowSelection();
+  const onChange = (checked, isShiftClick) => {
+    onRowSelectionChange({
+      row: props.row,
+      checked,
+      isShiftClick
+    });
+  };
+  const cellFormater = SelectCellFormatter({
+    value: isRowSelected,
+    isCellSelected: props.isCellSelected,
+    onChange,
+    "aria-label": "Select"
+  });
+  return cellFormater;
+}
+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;
+}
+const SelectColumn = {
+  key: SELECT_COLUMN_KEY,
+  name: "",
+  width: 60,
+  maxWidth: 60,
+  resizable: false,
+  sortable: false,
+  frozen: true,
+  type: "number",
+  headerRenderer: (props) => SelectCellFormatter({
+    "aria-label": "Select All",
+    isCellSelected: props.isCellSelected,
+    value: props.allRowsSelected,
+    onChange: props.onAllRowsSelectionChange
+  }),
+  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$1 = {
+  activeFilters: false,
+  setActiveFilters: voidFunction
+};
+const FilterContext = createContext(initialState$1);
+function FilterProvider({
+  children,
+  initialActiveFilters
+}) {
+  const [filterOptions, setFilterOptions] = useState({
+    activeFilters: initialActiveFilters
+  });
+  const onChangeFilter = (columnkey, value) => {
+    const newMap = filterOptions.filters ? new Map(filterOptions.filters) : /* @__PURE__ */ new Map();
+    if (value !== "") {
+      newMap.set(columnkey, value);
+    } else {
+      newMap.delete(columnkey);
+    }
+    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.key, 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("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 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) => {
+    console.log("New 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 ACTIONS_COLUMN_KEY = "actions-row";
+function ActionsFormatter(props) {
+  const {
+    rowActionsGetter
+  } = useBase();
+  if (rowActionsGetter === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx(MenuActions, {
+    arrow: "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 = "text";
+  if (column) {
+    typeOrder = column.type || "text";
+  }
+  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, isMultipleRows, 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 (isMultipleRows) {
+    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
+  }
+  return filteredSortedColumns;
+};
+const getAligByType = (columnType) => {
+  switch (columnType) {
+    case "text":
+      return "left";
+    case "date":
+    case "boolean":
+    case "custom":
+      return "center";
+    case "number":
+      return "right";
+  }
+  return "left";
+};
+const useSortColumnsRows = (sourceColumns, sourceRows, isMultipleRows) => {
+  const { columnsConfig, columnsWidths, onChangeColumnsOrder, rowActionsGetter, isSkeleton } = useBase();
+  const [columns, setColumns] = useState(() => []);
+  const [sortColumns, setSortColumns] = useState([]);
+  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, isMultipleRows, 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(() => {
+    console.log("useMemo useSortColumnsRows [finalColumns]", isSkeleton);
+    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 key = entry[0];
+        const value = `${entry[1]}`;
+        let valRow;
+        try {
+          valRow = `${r[key]}`;
+        } catch (error) {
+          continue;
+        }
+        valReturn = valReturn && valRow.includes(value);
+        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 {
+    isMultipleSelect = false,
+    columns,
+    rows,
+    withActions
+  } = props;
+  const {
+    finalColumns,
+    sortColumns,
+    setSortColumns,
+    finalRows
+  } = useSortColumnsRows(columns, rows, isMultipleSelect);
+  const {
+    activeFilters
+  } = useFilters();
+  const {
+    onChangeColumnWidth,
+    setRowsCount,
+    currentRowHeight,
+    currentRowHeaderHeight
+  } = useBase();
+  const [selectedRows, setSelectedRows] = useState(() => new Set(props.selectedRows));
+  useEffect(() => {
+    setSelectedRows(new Set(props.selectedRows));
+  }, [props.selectedRows]);
+  const refGrid = 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) {
+      const mySet = /* @__PURE__ */ new Set([props.rowKeyGetter(row)]);
+      setSelectedRows(mySet);
+      updateExternal(mySet);
+    }
+  };
+  useEffect(() => {
+    let columnIndice = 0;
+    for (const column of finalColumns) {
+      const index = sortColumns.findIndex((sortColumn) => column.key === sortColumn.columnKey);
+      if (index !== -1) {
+        refGrid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
+      } else {
+        refGrid.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(OriginalGridWrapperStyled, {
+      id: "OriginalGridWrapperStyled",
+      children: /* @__PURE__ */ jsx(DndProvider, {
+        backend: HTML5Backend,
+        children: /* @__PURE__ */ jsx(DataGrid$1, {
+          className: "fill-grid rdg-light",
+          ref: refGrid,
+          headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
+          columns: finalColumns,
+          sortColumns,
+          onSortColumnsChange: onChangeSort,
+          onColumnResize,
+          rows: finalRows,
+          selectedRows,
+          onSelectedRowsChange: onInternalSelectedRowsChange,
+          onRowClick,
+          rowHeight: currentRowHeight,
+          rowKeyGetter: props.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
+  } = useBase();
+  const {
+    activeFilters,
+    setActiveFilters
+  } = useFilters();
+  const {
+    host_static_assets,
+    environment
+  } = 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 ? "grid.filter_hide" : "grid.filter_show",
+    onClick: toggleIcon,
+    "aria-label": "filter",
+    src: `${host_static_assets}/${environment}/frontend/components/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 WrapperGrid = 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 refGrid = 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);
+  useImperativeHandle(ref, () => ({
+    onClickIntro: handleIntro,
+    current: divRef.current
+  }));
+  const columnsGrid = useMemo(() => [{
+    key: "name",
+    name: getLabel("grid.settings_column_name"),
+    width: 200,
+    resizable: true,
+    type: "text"
+  }, {
+    key: "originalIndex",
+    name: getLabel("grid.settings_column_position"),
+    width: 50,
+    type: "number",
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "visible",
+    name: getLabel("grid.settings_column_visible"),
+    width: 80,
+    type: "boolean",
+    formatter: FormatterColumn,
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "frozen",
+    name: getLabel("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]);
+    refGrid.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]);
+    refGrid.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);
+    refGrid.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("grid.settings_sel_columns")
+    }), /* @__PURE__ */ jsx(WrapperGrid, {
+      id: "WrapperGrid",
+      children: /* @__PURE__ */ jsx(OriginalGridWrapperStyled, {
+        id: "OriginalGridWrapperStyled",
+        children: /* @__PURE__ */ jsx(DataGrid$1, {
+          className: "fill-grid  rdg-light",
+          ref: refGrid,
+          columns: columnsGrid,
+          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: "grid.settings_move_first",
+        onClick: handleMoveFirst,
+        "aria-label": "move first place",
+        disabled: rowSelectedIndex < 1,
+        src: "components/grid/assets/icons/move_first_place.svg"
+      }), /* @__PURE__ */ jsx(IconButton, {
+        dictionaryTooltip: "grid.settings_move_up",
+        onClick: () => handleMoveUpDownd(-1),
+        "aria-label": "move up place",
+        disabled: rowSelectedIndex < 1,
+        src: "components/grid/assets/icons/move_up_place.svg"
+      }), /* @__PURE__ */ jsx(IconButton, {
+        dictionaryTooltip: "grid.settings_move_last",
+        onClick: handleMoveLast,
+        "aria-label": "move last place",
+        disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+        src: "components/grid/assets/icons/move_last_place.svg"
+      }), /* @__PURE__ */ jsx(IconButton, {
+        dictionaryTooltip: "grid.settings_move_down",
+        onClick: () => handleMoveUpDownd(1),
+        "aria-label": "move down place",
+        disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+        src: "components/grid/assets/icons/move_down_place.svg"
+      }), /* @__PURE__ */ jsx(IconButton, {
+        dictionaryTooltip: "grid.settings_visible_all",
+        onClick: checkAll,
+        "aria-label": "check visible all",
+        src: "components/grid/assets/icons/check_all.svg"
+      }), /* @__PURE__ */ jsx(IconButton, {
+        dictionaryTooltip: "grid.settings_no_visible_all",
+        onClick: unCheckAll,
+        "aria-label": "un check all",
+        src: "components/grid/assets/icons/uncheck_all.svg"
+      }), /* @__PURE__ */ jsx(IconButton, {
+        dictionaryTooltip: "grid.settings_restore",
+        onClick: restoreAll,
+        "aria-label": "Restore columns",
+        src: "components/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,
+    isSkeleton
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const ref = useRef(null);
+  const onCloseSettings = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const onClickIntro = useCallback(() => {
+    if (ref.current?.onClickIntro) {
+      ref.current?.onClickIntro();
+    }
+  }, []);
+  const onClickSettings = useCallback(() => {
+    openModal({
+      onQueryClose: () => closeModal(),
+      title: "grid.settings_tooltip",
+      initialWidth: 500,
+      initialHeigth: 680,
+      contentComponent: /* @__PURE__ */ jsx(ColumnsConfig, {
+        ref,
+        columnsConfig,
+        onChangeColumnsConfig,
+        onCloseSettings
+      }),
+      actionComponents: void 0,
+      standardActions: {
+        withCancel: true,
+        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: "grid.settings_tooltip",
+    onClick: onClickSettings,
+    "aria-label": "settings",
+    src: `${host_static_assets}/${environment}/frontend/components/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,
+    isSkeleton
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  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("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
+  } = useEnvironment();
+  const {
+    rowHeights,
+    currentRowHeightVariant,
+    setRowHeightVariant,
+    isSkeleton
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const menuActions = useMemo(() => {
+    if (typeof rowHeights === "number") {
+      return [];
+    }
+    return [{
+      urlIcon: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/compact.svg`,
+      onClick: () => setRowHeightVariant("compact"),
+      disabled: currentRowHeightVariant === "compact",
+      dictionaryField: "grid.density_compact"
+    }, {
+      urlIcon: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/standard.svg`,
+      onClick: () => setRowHeightVariant("standard"),
+      disabled: currentRowHeightVariant === "standard",
+      dictionaryField: "grid.density_standard"
+    }, {
+      urlIcon: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/confortable.svg`,
+      onClick: () => setRowHeightVariant("confortable"),
+      disabled: currentRowHeightVariant === "confortable",
+      dictionaryField: "grid.density_confortable"
+    }];
+  }, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment]);
+  const currenViewIcon = useMemo(() => {
+    if (currentRowHeightVariant === "compact") {
+      return `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/compact.svg`;
+    }
+    if (currentRowHeightVariant === "standard") {
+      return `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/standard.svg`;
+    }
+    return `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/confortable.svg`;
+  }, [currentRowHeightVariant, host_static_assets, environment]);
+  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$1, {
+      arrow: "right-top",
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions,
+      urlIcon: currenViewIcon,
+      toolTip: getLabel("grid.density_tooltip")
+    })
+  });
+}
+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,
+    isSkeleton
+  } = useBase();
+  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
+    }), typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}), withSettings && /* @__PURE__ */ jsx(Settings, {
+      ...settingsProps
+    }), withLocalFilters && /* @__PURE__ */ jsx(Filter, {})]
+  });
+}
+function DataGrid(props) {
+  const {
+    isSkeleton = false,
+    withActions = true,
+    rows,
+    columns,
+    actionsProps,
+    rowActionsGetter,
+    rowHeaderHeights = [44, 63, 75],
+    rowHeights = [36, 52, 67],
+    initialRowHeightVariant = "compact"
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperGrid$1, {
+    id: `WrapperGrid_${props.id}`,
+    children: /* @__PURE__ */ jsx(BaseProvider, {
+      id: props.id,
+      isSkeleton,
+      columns: props.columns,
+      rowHeights,
+      rowHeaderHeights,
+      initialRowHeightVariant,
+      rowsCount: rows.length,
+      rowActionsGetter,
+      children: /* @__PURE__ */ jsxs(FilterProvider, {
+        initialActiveFilters: false,
+        children: [withActions && actionsProps && /* @__PURE__ */ jsx(Actions, {
+          ...actionsProps
+        }), /* @__PURE__ */ jsx(Table, {
+          id: props.id,
+          withActions,
+          columns,
+          rows,
+          isMultipleSelect: props.isMultipleSelect,
+          selectedRows: props.selectedRows,
+          rowKeyGetter: props.rowKeyGetter,
+          onRowsSelectedChange: props.onRowsSelectedChange
+        })]
+      })
+    })
+  });
+}
+function DateFormatter(props) {
+  const {
+    presentationType,
+    dateTime,
+    formatDate
+  } = props;
+  let finalFormat = formatDate || "yyyy-MM-dd HH:mm:ss";
+  let result;
+  let resultDate;
+  if (presentationType === "date") {
+    finalFormat = formatDate || "yyyy-MM-dd";
+  } else if (presentationType === "time") {
+    finalFormat = formatDate || "HH:mm:ss";
+  }
+  try {
+    if (typeof dateTime === "number") {
+      resultDate = new Date(dateTime);
+    } else if (typeof dateTime === "string") {
+      resultDate = new Date(Date.parse(dateTime));
+    } else {
+      resultDate = dateTime;
+    }
+    result = format(resultDate, finalFormat);
+  } catch (e) {
+    result = "err_typing";
+  }
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: result
+  });
+}
+const initialPagerState = {
+  page: 0,
+  rowsPerPage: 25,
+  totalRecords: 0
+};
+export { DateFormatter as D, DataGrid as a, initialPagerState as i };