ods-component-lib 1.18.102 → 1.18.103

package/dist/index.modern.js

@@ -16,7 +16,7 @@ import jsPDF from 'jspdf';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment from 'moment';
-import { GridIcon, ChevronDownIcon, UpArrow5Icon, DownArrow5Icon, Loop1Icon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Discount2Icon } from 'ods-icon/react/24/outline';
+import { GridIcon, ChevronDownIcon, UpArrow5Icon, DownArrow5Icon, Loop1Icon, KebabMenuIcon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Discount2Icon } from 'ods-icon/react/24/outline';
 import { TreeList, Lookup } from 'devextreme-react';
 
 function _extends() {
@@ -33628,27 +33628,6 @@ var queryString = {
 	stringify: stringify
 };
 
-var iconComponents = {
-  edit: EditIcon,
-  "delete": Trash1Icon,
-  copy: CopyIcon,
-  discount: DiscountIcon,
-  kebabMenu: KebabMenuIcon,
-  refresh: RefreshIcon,
-  unmap: LinkBreakIcon,
-  save: FloppyDiskIcon,
-  cancel: Loop1Icon,
-  discount2Icon: Discount2Icon
-};
-var DynamicIcon = function DynamicIcon(_ref) {
-  var iconName = _ref.iconName;
-  var IconComponent = iconComponents[iconName];
-  if (!IconComponent) {
-    return null;
-  }
-  return React.createElement(IconComponent, null);
-};
-
 var _excluded$4 = ["children", "visible"];
 function OdsDataGrdiRowButton(_ref) {
   var children = _ref.children,
@@ -33765,7 +33744,7 @@ var onCancelEditEvent = new CustomEvent("cancelEdit", {
 });
 
 var useToken$2 = theme.useToken;
-var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
+var OdsBasicDataGrid = function OdsBasicDataGrid(props) {
   var _props$axiosRequest4, _props$axiosRequest5, _props$axiosRequest6, _props$axiosRequest7, _props$axiosRequest8, _props$axiosRequest9, _props$axiosRequest10, _props$axiosRequest11, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
   var keyExpr = props.keyExpr,
     hasFastUpdate = props.hasFastUpdate,
@@ -33883,7 +33862,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     if (contentReady) checkSortingPropertyForInitilaize();
   }, [contentReady]);
   useEffect(function () {
-    var cssRules = "\n          .data-exists .dx-datagrid-borders > .dx-datagrid-filter-panel,\n          .data-exists .dx-datagrid-borders > .dx-datagrid-headers {\n            border-top: 1px solid rgba(0, 0, 0, 0.06);\n            padding-right: 0px !important;\n          }\n          \n          .data-exists .dx-datagrid-headers .dx-datagrid-content {\n            margin-bottom: -1px;\n            padding-right: 17px !important;\n          }\n        ";
+    var cssRules = "\n            .data-exists .dx-datagrid-borders > .dx-datagrid-filter-panel,\n            .data-exists .dx-datagrid-borders > .dx-datagrid-headers {\n              border-top: 1px solid rgba(0, 0, 0, 0.06);\n              padding-right: 0px !important;\n            }\n            \n            .data-exists .dx-datagrid-headers .dx-datagrid-content {\n              margin-bottom: -1px;\n              padding-right: 17px !important;\n            }\n          ";
     var styleSheet = document.createElement("style");
     styleSheet.type = "text/css";
     styleSheet.innerText = cssRules;
@@ -34304,9 +34283,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   function actionCellRender(cellData, props) {
     var kebabMenuButtons = props.actionButtonGroup && props.actionButtonGroup.length >= 2 && !props.edit ? props.actionButtonGroup.slice(2).map(function (button) {
       return {
-        icon: React.createElement(DynamicIcon, {
-          iconName: button.icon
-        }),
+        icon: button.icon,
         onClick: function onClick(event) {
           var customEvent = {
             column: cellData.column,
@@ -34335,9 +34312,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
           size: "small",
           type: "text",
           disabled: buttonItem.actionPermission === undefined ? false : !buttonItem.actionPermission,
-          icon: React.createElement(DynamicIcon, {
-            iconName: buttonItem.icon
-          }),
+          icon: buttonItem.icon,
           onClick: function onClick(event) {
             var customEvent = {
               column: cellData.column,
@@ -34367,9 +34342,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
           size: "small",
           type: "text",
           disabled: buttonItem.actionPermission === undefined ? false : !buttonItem.actionPermission,
-          icon: React.createElement(DynamicIcon, {
-            iconName: buttonItem.icon
-          }),
+          icon: buttonItem.icon,
           onClick: function onClick(event) {
             if (buttonItem.onClick) {
               var customEvent = {
@@ -34392,9 +34365,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
         menuItems: kebabMenuButtons
       }, React.createElement(OdsDataGrdiRowButton, {
         type: "text",
-        icon: React.createElement(DynamicIcon, {
-          iconName: "kebabMenu"
-        })
+        icon: React.createElement(KebabMenuIcon, null)
       })));
     }
     return React.createElement(React.Fragment, null, buttonElements);
@@ -34567,7 +34538,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   };
   var detailGrid = function detailGrid(_ref) {
     var data = _ref.data;
-    return React.createElement(OdsRemoteDataGrid, Object.assign({}, props, {
+    return React.createElement(OdsBasicDataGrid, Object.assign({}, props, {
       showMasterDetail: false,
       columns: props.detailGridColums,
       dataSource: props.detailData[data.key.ID]
@@ -34801,5 +34772,1159 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFilter, OdsFilterTagView, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
+var iconComponents = {
+  edit: EditIcon,
+  "delete": Trash1Icon,
+  copy: CopyIcon,
+  discount: DiscountIcon,
+  kebabMenu: KebabMenuIcon,
+  refresh: RefreshIcon,
+  unmap: LinkBreakIcon,
+  save: FloppyDiskIcon,
+  cancel: Loop1Icon,
+  discount2Icon: Discount2Icon
+};
+var DynamicIcon = function DynamicIcon(_ref) {
+  var iconName = _ref.iconName;
+  var IconComponent = iconComponents[iconName];
+  if (!IconComponent) {
+    return null;
+  }
+  return React.createElement(IconComponent, null);
+};
+
+var checkCellSelectionConstraints$1 = function checkCellSelectionConstraints(e) {
+  return e.rowType == "data" && e.columnIndex > -1 && e.rowIndex > -1;
+};
+var cellAlreadySelected$1 = function cellAlreadySelected(pkValue, dataField, cellInfos) {
+  return cellInfos.some(function (cell) {
+    return cell.pkValue == pkValue && cell.dataField == dataField;
+  });
+};
+var getRequestHeaders$1 = function getRequestHeaders(props) {
+  return new Headers({
+    "Content-Type": "application/json",
+    Authorization: "Bearer " + (props.axiosRequest ? props.axiosRequest.token : ""),
+    "Accept-Language": props.language != "" ? props.language : "EN"
+  });
+};
+var concatFilteredLabel$1 = function concatFilteredLabel(result, totalloaded, filteredRowCount, filterApplied, props) {
+  if (filteredRowCount > 0 && totalloaded !== filteredRowCount && filterApplied) {
+    var filteredLabel = filteredRowCount + " " + props.customSummary.summaryFilteredDataLabel + "- ";
+    result = filteredLabel + " " + result + "     ";
+  }
+  return result;
+};
+var showSummaryItems$1 = function showSummaryItems(props) {
+  var _props$customSummary, _props$customSummary2, _props$customSummary3, _props$customSummary4, _props$customSummary5;
+  return ((_props$customSummary = props.customSummary) === null || _props$customSummary === void 0 ? void 0 : _props$customSummary.showAvgInSummary) || ((_props$customSummary2 = props.customSummary) === null || _props$customSummary2 === void 0 ? void 0 : _props$customSummary2.showCountInSummary) || ((_props$customSummary3 = props.customSummary) === null || _props$customSummary3 === void 0 ? void 0 : _props$customSummary3.showMaxInSummary) || ((_props$customSummary4 = props.customSummary) === null || _props$customSummary4 === void 0 ? void 0 : _props$customSummary4.showMinInSummary) || ((_props$customSummary5 = props.customSummary) === null || _props$customSummary5 === void 0 ? void 0 : _props$customSummary5.showSumInSummary);
+};
+var getSummaryItems$1 = function getSummaryItems(props, columns, grid, isMultiLevelColumn) {
+  if (isMultiLevelColumn === void 0) {
+    isMultiLevelColumn = false;
+  }
+  var totalItems = [];
+  columns.map(function (col, _index) {
+    if (col.multiLevelColumns && col.multiLevelColumns.length > 0) {
+      totalItems = [].concat(totalItems, getSummaryItems(props, col.multiLevelColumns, grid, true));
+    } else {
+      var _props$customSummary6, _props$customSummary7, _props$customSummary8, _props$customSummary9, _props$customSummary10, _props$customSummary11, _props$customSummary12, _props$customSummary13, _props$customSummary14, _props$customSummary15;
+      var colOption = grid.columnOption(col.dataField);
+      if (!colOption) {
+        return col;
+      }
+      ((_props$customSummary6 = props.customSummary) === null || _props$customSummary6 === void 0 ? void 0 : _props$customSummary6.showAvgInSummary) && totalItems.push(getSummaryItem$1(col, colOption.visibleIndex, "avg", isMultiLevelColumn, (_props$customSummary7 = props.customSummary) === null || _props$customSummary7 === void 0 ? void 0 : _props$customSummary7.summaryAvgLabel));
+      ((_props$customSummary8 = props.customSummary) === null || _props$customSummary8 === void 0 ? void 0 : _props$customSummary8.showCountInSummary) && totalItems.push(getSummaryItem$1(col, colOption.visibleIndex, "count", isMultiLevelColumn, (_props$customSummary9 = props.customSummary) === null || _props$customSummary9 === void 0 ? void 0 : _props$customSummary9.summaryCountLabel));
+      ((_props$customSummary10 = props.customSummary) === null || _props$customSummary10 === void 0 ? void 0 : _props$customSummary10.showMaxInSummary) && totalItems.push(getSummaryItem$1(col, colOption.visibleIndex, "max", isMultiLevelColumn, (_props$customSummary11 = props.customSummary) === null || _props$customSummary11 === void 0 ? void 0 : _props$customSummary11.summaryMaxLabel));
+      ((_props$customSummary12 = props.customSummary) === null || _props$customSummary12 === void 0 ? void 0 : _props$customSummary12.showMinInSummary) && totalItems.push(getSummaryItem$1(col, colOption.visibleIndex, "min", isMultiLevelColumn, (_props$customSummary13 = props.customSummary) === null || _props$customSummary13 === void 0 ? void 0 : _props$customSummary13.summaryMinLabel));
+      ((_props$customSummary14 = props.customSummary) === null || _props$customSummary14 === void 0 ? void 0 : _props$customSummary14.showSumInSummary) && totalItems.push(getSummaryItem$1(col, colOption.visibleIndex, "sum", isMultiLevelColumn, (_props$customSummary15 = props.customSummary) === null || _props$customSummary15 === void 0 ? void 0 : _props$customSummary15.summarySumLabel));
+    }
+    return col;
+  });
+  return totalItems;
+};
+var getSummaryItem$1 = function getSummaryItem(col, visibleIndex, summaryType, isMultiLevelColumn, label) {
+  if (!isMultiLevelColumn && visibleIndex == 0) {
+    return React.createElement(TotalItem, {
+      column: col.dataField,
+      summaryType: "custom",
+      cssClass: "grid-summary-row-label",
+      customizeText: function customizeText(_itemInfo) {
+        return label;
+      }
+    });
+  }
+  if (col.dataType != "number") {
+    return React.createElement("div", null);
+  }
+  return React.createElement(TotalItem, {
+    column: col.dataField,
+    summaryType: summaryType,
+    cssClass: "grid-summary-row-data",
+    customizeText: function customizeText(itemInfo) {
+      return Number(itemInfo.value).toFixed(2);
+    }
+  });
+};
+var getMultiLevelColumns$1 = function getMultiLevelColumns(col) {
+  return col.multiLevelColumns && col.multiLevelColumns.map(function (colItem) {
+    return React.createElement(Column, Object.assign({
+      width: 80
+    }, colItem), getMultiLevelColumns(colItem));
+  });
+};
+
+var constants$1 = {
+  totalPageCount: 1,
+  loadedPageCount: 1,
+  totalRecordCount: 0,
+  exportFormats: ["xlsx"],
+  selectedCellBgColor: "#c1f9b8",
+  allowedDataTypesForMultiCellEditing: ["number"]
+};
+var onCancelEditEvent$1 = new CustomEvent("cancelEdit", {
+  bubbles: true,
+  detail: {
+    rowData: null
+  }
+});
+
+var useToken$3 = theme.useToken;
+var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
+  var _props$axiosRequest4, _props$axiosRequest5, _props$axiosRequest6, _props$axiosRequest7, _props$axiosRequest8, _props$axiosRequest9, _props$axiosRequest10, _props$axiosRequest11, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
+  var keyExpr = props.keyExpr,
+    hasFastUpdate = props.hasFastUpdate,
+    fastUpdateButtonText = props.fastUpdateButtonText,
+    fastUpdateModalTitle = props.fastUpdateModalTitle,
+    fastUpdateModalCancelText = props.fastUpdateModalCancelText,
+    fastUpdateModalSaveText = props.fastUpdateModalSaveText,
+    fastUpdateFormRequiredFieldMessage = props.fastUpdateFormRequiredFieldMessage,
+    onCellClick = props.onCellClick,
+    onCellHoverChanged = props.onCellHoverChanged,
+    onFastUpdateButtonClick = props.onFastUpdateButtonClick,
+    onFastUpdateFinish = props.onFastUpdateFinish,
+    onFastUpdateCancel = props.onFastUpdateCancel,
+    onFastUpdateFailed = props.onFastUpdateFailed;
+  var _useToken = useToken$3(),
+    token = _useToken.token;
+  var _AntForm$useForm = Form$1.useForm(),
+    fastUpdateForm = _AntForm$useForm[0];
+  var gridRef = useRef(null);
+  var filterApplied = useRef(false);
+  var pkName = keyExpr && keyExpr.toString();
+  var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
+  var _useState = useState(false),
+    render = _useState[0],
+    rerender = _useState[1];
+  var _useState2 = useState(props.columns),
+    gridColumns = _useState2[0],
+    setGridColumns = _useState2[1];
+  var _useState3 = useState(false),
+    loading = _useState3[0],
+    setLoading = _useState3[1];
+  var _useState4 = useState([]),
+    data = _useState4[0],
+    setData = _useState4[1];
+  var _useState5 = useState(0),
+    filteredRowCount = _useState5[0],
+    setFilteredRowCount = _useState5[1];
+  var _useState6 = useState(false),
+    isFastUpdateModalOpen = _useState6[0],
+    setIsFastUpdateModalOpen = _useState6[1];
+  var _useState7 = useState([]),
+    selectedCells = _useState7[0],
+    setSelectedCells = _useState7[1];
+  var _useState8 = useState([]),
+    hoveredCells = _useState8[0],
+    setHoveredCells = _useState8[1];
+  var _useState9 = useState([]),
+    ctrlSelectedCells = _useState9[0],
+    setCtrlSelectedCells = _useState9[1];
+  var _useState10 = useState(false),
+    ctrlSelection = _useState10[0],
+    setCtrlSelection = _useState10[1];
+  var _useState11 = useState(false),
+    contentReady = _useState11[0],
+    setContentReady = _useState11[1];
+  var _useState12 = useState(0),
+    scrollPosition = _useState12[0],
+    setScrollPosition = _useState12[1];
+  useEffect(function () {
+    constants$1.totalPageCount = 1;
+    constants$1.loadedPageCount = 1;
+    constants$1.totalRecordCount = 0;
+  }, [props.dataGridPageName]);
+  useEffect(function () {
+    var _props$axiosRequest, _props$axiosRequest2, _props$axiosRequest3;
+    if (props.axiosRequest !== undefined && ((_props$axiosRequest = props.axiosRequest) !== null && _props$axiosRequest !== void 0 && _props$axiosRequest.requestData && Object.keys((_props$axiosRequest2 = props.axiosRequest) === null || _props$axiosRequest2 === void 0 ? void 0 : _props$axiosRequest2.requestData).length > 0 || (_props$axiosRequest3 = props.axiosRequest) !== null && _props$axiosRequest3 !== void 0 && _props$axiosRequest3.requestQueryString)) {
+      constants$1.totalPageCount = 1;
+      constants$1.loadedPageCount = 1;
+      constants$1.totalRecordCount = 0;
+      setData([]);
+      fetchData();
+    }
+  }, [(_props$axiosRequest4 = props.axiosRequest) === null || _props$axiosRequest4 === void 0 ? void 0 : _props$axiosRequest4.requestData, (_props$axiosRequest5 = props.axiosRequest) === null || _props$axiosRequest5 === void 0 ? void 0 : _props$axiosRequest5.requestQueryString]);
+  useEffect(function () {
+    if (props.columns !== undefined && props.columns.length > 0) {
+      var newColumns = props.columns.map(function (colItem) {
+        if (colItem.tooltip !== undefined && colItem.tooltip.enable) {
+          var headerCellRenderr = function headerCellRenderr() {
+            return React.createElement("div", null, React.createElement("span", null, colItem.caption), React.createElement(Tooltip, {
+              title: colItem.tooltip.title
+            }, React.createElement(InfoCircleOutlined, {
+              style: {
+                marginLeft: 5
+              }
+            })));
+          };
+          colItem.headerCellRender = headerCellRenderr;
+        }
+        if (props.isServerSide) colItem.calculateSortValue = String("dummyFieldForPreventClientSideSorting");
+        return colItem;
+      });
+      setGridColumns(newColumns);
+    }
+  }, [props.columns]);
+  useEffect(function () {
+    rerender(!render);
+  }, [gridColumns]);
+  useEffect(function () {
+    if (Array.isArray(props.dataSource)) {
+      setData(props.dataSource);
+    }
+  }, [props.dataSource]);
+  useEffect(function () {
+    locale(localStorage.getItem("locale"));
+    loadMessages(JSON.parse(localStorage.getItem("localTranslation")));
+    if (gridRef.current) {
+      gridRef.current.instance.updateDimensions();
+    }
+    hasFastUpdate && document.addEventListener("keydown", keydownEvent);
+    return function () {
+      hasFastUpdate && document.removeEventListener("keydown", keydownEvent);
+    };
+  }, []);
+  useEffect(function () {
+    if (contentReady) checkSortingPropertyForInitilaize();
+  }, [contentReady]);
+  useEffect(function () {
+    var cssRules = "\n          .data-exists .dx-datagrid-borders > .dx-datagrid-filter-panel,\n          .data-exists .dx-datagrid-borders > .dx-datagrid-headers {\n            border-top: 1px solid rgba(0, 0, 0, 0.06);\n            padding-right: 0px !important;\n          }\n          \n          .data-exists .dx-datagrid-headers .dx-datagrid-content {\n            margin-bottom: -1px;\n            padding-right: 17px !important;\n          }\n        ";
+    var styleSheet = document.createElement("style");
+    styleSheet.type = "text/css";
+    styleSheet.innerText = cssRules;
+    document.head.appendChild(styleSheet);
+    var checkData = function checkData() {
+      if (gridRef.current) {
+        var _dataGridInstance = gridRef.current.instance;
+        var dataExists = data.length >= 15;
+        var gridElement = _dataGridInstance.element();
+        if (dataExists) {
+          gridElement.classList.add("data-exists");
+        } else {
+          gridElement.classList.remove("data-exists");
+        }
+      }
+    };
+    var dataGridInstance = gridRef.current.instance;
+    dataGridInstance.on("dataChanged", checkData);
+    checkData();
+    return function () {
+      document.head.removeChild(styleSheet);
+      dataGridInstance.off("dataChanged", checkData);
+    };
+  }, [data]);
+  var checkSortingPropertyForInitilaize = function checkSortingPropertyForInitilaize() {
+    var onOptionChanged = props.onOptionChanged;
+    if (onOptionChanged) {
+      var dataGridInstance = gridRef.current.instance;
+      var sortingState = dataGridInstance.getVisibleColumns().filter(function (p) {
+        return !p.command;
+      }).map(function (column, index) {
+        return {
+          index: index,
+          dataField: column.dataField,
+          sortOrder: column.sortOrder
+        };
+      });
+      var sortedColumn = sortingState.find(function (column) {
+        return column.sortOrder !== undefined;
+      });
+      if (sortedColumn) {
+        if (sortedColumn.sortOrder) {
+          dataGridInstance.option("columns[" + sortedColumn.index + "].sortOrder", sortedColumn.sortOrder);
+          var fullName = "columns[" + sortedColumn.index + "].sortOrder";
+          var gridEvent = {
+            component: dataGridInstance,
+            fullName: fullName,
+            name: "optionChanged",
+            value: sortedColumn.sortOrder,
+            previousValue: null,
+            element: null
+          };
+          onOptionChanged(gridEvent);
+        }
+      }
+    }
+  };
+  var checkRequestDataHasOnlySortingProperty = function checkRequestDataHasOnlySortingProperty(obj) {
+    var keys = Object.keys(obj);
+    return keys.length === 1 && keys[0] === "Sorting";
+  };
+  useEffect(function () {
+    var gridElement = gridRef.current.instance.element();
+    gridElement.scrollTop = scrollPosition;
+    document.querySelectorAll(".dx-scrollable-container").forEach(function (container) {
+      container.addEventListener("scrollend", handleScroll);
+    });
+    return function () {
+      document.querySelectorAll(".dx-scrollable-container").forEach(function (container) {
+        container.removeEventListener("scrollend", handleScroll);
+      });
+    };
+  }, [data.length]);
+  var keydownEvent = function keydownEvent(e) {
+    switch (e.key) {
+      case "Escape":
+        {
+          clearSelectedCells();
+        }
+        break;
+    }
+  };
+  var clearSelectedCells = function clearSelectedCells() {
+    setSelectedCells([]);
+  };
+  var singleSelect = function singleSelect(pkValue, dataField) {
+    runSetSelectedCells([{
+      dataField: dataField,
+      pkValue: pkValue
+    }]);
+  };
+  var multipleSelect = function multipleSelect(cells) {
+    if (cells.length == 0) {
+      return;
+    }
+    var _cells = [];
+    var _loop = function _loop() {
+      var element = cells[index];
+      if (!_cells.some(function (cell) {
+        return cell.colIndex == element.colIndex && cell.rowIndex == element.rowIndex;
+      })) {
+        _cells.push({
+          colIndex: element.colIndex,
+          rowIndex: element.rowIndex
+        });
+      }
+    };
+    for (var index = 0; index < cells.length; index++) {
+      _loop();
+    }
+    var result = [];
+    var maxColIndex = Math.max.apply(null, _cells.map(function (item) {
+      return item.colIndex;
+    }));
+    var minColIndex = Math.min.apply(null, _cells.map(function (item) {
+      return item.colIndex;
+    }));
+    var maxRowIndex = Math.max.apply(null, _cells.map(function (item) {
+      return item.rowIndex;
+    }));
+    var minRowIndex = Math.min.apply(null, _cells.map(function (item) {
+      return item.rowIndex;
+    }));
+    for (var rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {
+      var _loop2 = function _loop2() {
+        var _column = gridRef.current.instance.columnOption(colIndex);
+        if (constants$1.allowedDataTypesForMultiCellEditing.some(function (item) {
+          return item.toLocaleLowerCase() == _column.dataType.toLocaleLowerCase();
+        })) {
+          result.push({
+            dataField: _column.dataField,
+            pkValue: gridRef.current.instance.cellValue(rowIndex, pkName)
+          });
+        }
+      };
+      for (var colIndex = minColIndex; colIndex <= maxColIndex; colIndex++) {
+        _loop2();
+      }
+    }
+    runSetSelectedCells(result);
+    setHoveredCells([]);
+    setCtrlSelectedCells([]);
+  };
+  var runSetSelectedCells = function runSetSelectedCells(value) {
+    var removeDuplicates = function removeDuplicates(oldValues) {
+      var result = [];
+      var _loop3 = function _loop3() {
+        var element = value[index];
+        if (element.pkValue && !oldValues.some(function (cell) {
+          return cell.dataField == element.dataField && cell.pkValue == element.pkValue;
+        })) {
+          result.push({
+            dataField: element.dataField,
+            pkValue: element.pkValue
+          });
+        }
+      };
+      for (var index = 0; index < value.length; index++) {
+        _loop3();
+      }
+      return result;
+    };
+    setSelectedCells(function (prev) {
+      return [].concat(prev, removeDuplicates(prev));
+    });
+  };
+  var removeSelectedCell = function removeSelectedCell(rowIndex, colIndex) {
+    var dataField = gridRef.current.instance.columnOption(colIndex).dataField;
+    var pkValue = gridRef.current.instance.cellValue(rowIndex, pkName);
+    setSelectedCells(function (prev) {
+      return prev.filter(function (cell) {
+        return !(cell.dataField == dataField && cell.pkValue == pkValue);
+      });
+    });
+  };
+  var closeModal = function closeModal() {
+    setIsFastUpdateModalOpen(false);
+    clearSelectedCells();
+    fastUpdateForm.resetFields();
+  };
+  var actionButtons = useMemo(function () {
+    if (props.actionButtonGroup) {
+      if (props.actionButtonGroup.length >= 2 && !props.edit) {
+        return props.actionButtonGroup.slice(0, 2);
+      } else {
+        return props.actionButtonGroup;
+      }
+    } else {
+      return [];
+    }
+  }, [props.actionButtonGroup]);
+  var fetchData = useCallback(function () {
+    try {
+      if (props.axiosRequest == undefined) return Promise.resolve();
+      return Promise.resolve(function () {
+        if (props.isServerSide) {
+          var _props$axiosRequest$r;
+          if (props.axiosRequest.requestData && checkRequestDataHasOnlySortingProperty(props.axiosRequest.requestData)) return;
+          var apiUrl = props.axiosRequest.environmentUrl + "" + props.axiosRequest.apiUrl;
+          if (((_props$axiosRequest$r = props.axiosRequest.requestData) === null || _props$axiosRequest$r === void 0 ? void 0 : _props$axiosRequest$r.PaginatedRequest) !== undefined) {
+            props.axiosRequest.requestData.PaginatedRequest.PageNumber = constants$1.loadedPageCount;
+            props.axiosRequest.requestData.PaginatedRequest.PageSize = props.pageSize;
+          }
+          if (props.axiosRequest.requestQueryString !== undefined) {
+            props.axiosRequest.requestQueryString.maxResultCount = props.pageSize;
+            if (constants$1.loadedPageCount > 1 && constants$1.totalPageCount >= constants$1.loadedPageCount) {
+              props.axiosRequest.requestQueryString.skipCount = ((constants$1.loadedPageCount - 1) * props.pageSize).toString();
+            }
+            var query = queryString.stringify(props.axiosRequest.requestQueryString);
+            apiUrl = apiUrl + "?" + query;
+          }
+          var requestOptions = {
+            method: props.axiosRequest.requestType,
+            headers: getRequestHeaders$1(props),
+            body: JSON.stringify(props.axiosRequest.requestData)
+          };
+          var _temp = _finallyRethrows(function () {
+            return _catch(function () {
+              setLoading(true);
+              return Promise.resolve(fetch(apiUrl, requestOptions)).then(function (response) {
+                return Promise.resolve(response.json()).then(function (newData) {
+                  if (constants$1.loadedPageCount == 1) {
+                    setData(newData.Data ? newData.Data : newData);
+                    constants$1.loadedPageCount = 1;
+                  } else if (constants$1.totalPageCount >= constants$1.loadedPageCount) {
+                    var newArray = newData.Data ? newData.Data : newData;
+                    setData(function (prevData) {
+                      return [].concat(prevData, newArray);
+                    });
+                  }
+                  getTotalCount(response, newData);
+                });
+              });
+            }, function (error) {
+              console.error("Error fetching data:", error);
+              setLoading(false);
+            });
+          }, function (_wasThrown, _result) {
+            if (_wasThrown) throw _result;
+            return _result;
+          });
+          if (_temp && _temp.then) return _temp.then(function () {});
+        }
+      }());
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [(_props$axiosRequest6 = props.axiosRequest) === null || _props$axiosRequest6 === void 0 ? void 0 : _props$axiosRequest6.requestData, (_props$axiosRequest7 = props.axiosRequest) === null || _props$axiosRequest7 === void 0 ? void 0 : _props$axiosRequest7.apiUrl, (_props$axiosRequest8 = props.axiosRequest) === null || _props$axiosRequest8 === void 0 ? void 0 : _props$axiosRequest8.environmentUrl, (_props$axiosRequest9 = props.axiosRequest) === null || _props$axiosRequest9 === void 0 ? void 0 : _props$axiosRequest9.requestQueryString, (_props$axiosRequest10 = props.axiosRequest) === null || _props$axiosRequest10 === void 0 ? void 0 : _props$axiosRequest10.requestType, props.pageSize, props.isServerSide]);
+  var getTotalCount = function getTotalCount(response, data) {
+    if (data !== null && data !== void 0 && data.PageCount || data !== null && data !== void 0 && data.RowCount) {
+      constants$1.totalPageCount = data.PageCount;
+      constants$1.totalRecordCount = data.RowCount;
+    } else {
+      var totalCount;
+      if (response) totalCount = response.headers.get("x-total-count");
+      if (totalCount == null) totalCount = data === null || data === void 0 ? void 0 : data.rowCount;
+      if (totalCount == null) totalCount = data === null || data === void 0 ? void 0 : data.length;
+      constants$1.totalRecordCount = parseInt(totalCount, 10) || 0;
+      constants$1.totalPageCount = Math.ceil(constants$1.totalRecordCount / props.pageSize);
+    }
+    setLoading(false);
+  };
+  var onEditorPreparing = useCallback(function (e) {
+    if (e.row !== undefined && e.parentType === "dataRow") {
+      if (props.handleEditorPreparing) {
+        props.handleEditorPreparing(e);
+      }
+    }
+    if (e.editorOptions && e.rowType === "data" && e.parentType === "dataRow") {
+      e.editorOptions.onValueChanged = function (args) {
+        if (args.event && args.event.type === "cancel") e.cellElement.dispatchEvent(onCancelEditEvent$1);
+      };
+    }
+  }, [props.isServerSide]);
+  var getServerSide = useCallback(function (type) {
+    try {
+      return Promise.resolve(function () {
+        if (type === "reachedBottom") {
+          return function () {
+            if (constants$1.totalPageCount <= constants$1.loadedPageCount) {} else {
+              constants$1.loadedPageCount = constants$1.loadedPageCount + 1;
+              return Promise.resolve(fetchData()).then(function () {});
+            }
+          }();
+        }
+      }());
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [constants$1.totalPageCount]);
+  var onExporting = useCallback(function (e) {
+    if (e.format === "xlsx") {
+      var workbook = new Workbook();
+      if (props.filterData != null) {
+        var newColumnFromFilterData = props.filterData.map(function (filterItem) {
+          return {
+            dataField: filterItem.key,
+            caption: filterItem.key
+          };
+        });
+        var newColumns = [].concat(gridColumns, newColumnFromFilterData);
+        e.component.beginUpdate();
+        e.component.option("columns", newColumns);
+        e.component.endUpdate();
+      }
+      exportDataGrid({
+        component: e.component,
+        worksheet: workbook.addWorksheet("Main sheet"),
+        autoFilterEnabled: true,
+        customizeCell: function customizeCell(options) {
+          var gridCell = options.gridCell,
+            excelCell = options.excelCell;
+          if (gridCell.column.dataType === "datetime" && gridCell.value) {
+            var _gridCell$column$calc, _gridCell$column$meta;
+            if (((_gridCell$column$calc = gridCell.column.calculateFilterExpression) === null || _gridCell$column$calc === void 0 ? void 0 : _gridCell$column$calc.name) === "calculateFilterExpressionForColumn" && (_gridCell$column$meta = gridCell.column["meta"]) !== null && _gridCell$column$meta !== void 0 && _gridCell$column$meta.hasCustomCellRenderer) {
+              var date = moment(gridCell.value);
+              var offsetMinutes = date.utcOffset();
+              var sign = offsetMinutes >= 0 ? "+" : "-";
+              var hours = Math.floor(Math.abs(offsetMinutes) / 60);
+              var minutes = Math.abs(offsetMinutes) % 60;
+              var formattedOffset = "(UTC" + sign + hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0") + ")";
+              var formattedDate = date.format("DD.MM.YYYY HH:mm") + " " + formattedOffset;
+              excelCell.value = formattedDate;
+            }
+          }
+          if (gridCell.rowType !== "header" && props.filterData != null) {
+            var matchingItem = props.filterData.find(function (item) {
+              return item.key === gridCell.column.dataField;
+            });
+            if (matchingItem) {
+              excelCell.value = matchingItem.value;
+            }
+          }
+        }
+      }).then(function () {
+        workbook.xlsx.writeBuffer().then(function (buffer) {
+          saveAs(new Blob([buffer], {
+            type: "application/octet-stream"
+          }), fileName + ".xlsx");
+        });
+      });
+    } else {
+      var doc = new jsPDF();
+      exportDataGrid$1({
+        jsPDFDocument: doc,
+        component: e.component,
+        indent: 5
+      }).then(function () {
+        doc.save(fileName + ".pdf");
+      });
+    }
+  }, [fileName, props.filterData]);
+  var customLoad = useCallback(function () {
+    var state = JSON.parse(localStorage.getItem(props.exportFileName + "Storage"));
+    if (localStorage.getItem(props.exportFileName + "Storage")) {
+      state.selectedRowKeys = [];
+      if (props.filterEnabledShow) state.filterPanel = {
+        filterEnabled: false
+      };else state.filterPanel = {
+        filterEnabled: true
+      };
+    }
+    return state;
+  }, [props.filterEnabledShow]);
+  var customSave = useCallback(function (state) {
+    state.selectedRowKeys = [];
+    if (props.filterEnabledShow) state.filterPanel = {
+      filterEnabled: false
+    };else state.filterPanel = {
+      filterEnabled: true
+    };
+    if (data.length === 0) {
+      if (!state.filterValue && state.filterValue !== null) {
+        state.filterValue = null;
+      }
+    }
+    localStorage.setItem(props.exportFileName + "Storage", JSON.stringify(state));
+  }, [props.filterEnabledShow]);
+  var onEditorPrepared = useCallback(function (info) {
+    if (info.parentType === "filterRow" && info.editorName === "dxSelectBox" && info.dataField === "IsActive") {
+      if (info.dataSource != null && info.dataSource.length > 0) {
+        info.showAllText = info.dataSource.find(function (i) {
+          return i.value === null;
+        }).label;
+        info.trueText = info.dataSource.find(function (i) {
+          return i.value === true;
+        }).label;
+        info.falseText = info.dataSource.find(function (i) {
+          return i.value === false;
+        }).label;
+      }
+    }
+  }, []);
+  var renderTotal = useCallback(function () {
+    var _props$customSummary3;
+    var result = "";
+    var totalloaded = 0;
+    if (data.length < 50 || !props.isServerSide || constants$1.loadedPageCount == constants$1.totalPageCount) {
+      totalloaded = data.length;
+    } else {
+      totalloaded = constants$1.loadedPageCount * props.pageSize;
+    }
+    if (props.isServerSide) {
+      var _props$customSummary, _props$customSummary2;
+      result = constants$1.totalRecordCount > 0 ? totalloaded + " " + ((_props$customSummary = props.customSummary) === null || _props$customSummary === void 0 ? void 0 : _props$customSummary.summaryLoadedDataLabel) + ("- " + constants$1.totalRecordCount) + ((_props$customSummary2 = props.customSummary) === null || _props$customSummary2 === void 0 ? void 0 : _props$customSummary2.summaryTotalDataLabel) : "";
+      result = concatFilteredLabel$1(result, totalloaded, filteredRowCount, filterApplied.current, props);
+    }
+    if (((_props$customSummary3 = props.customSummary) === null || _props$customSummary3 === void 0 ? void 0 : _props$customSummary3.summaryTotalCount) !== undefined && !props.isServerSide) {
+      result = props.customSummary.summaryTotalDataLabel + " : " + props.customSummary.summaryTotalCount;
+      result = concatFilteredLabel$1(result, totalloaded, filteredRowCount, filterApplied.current, props);
+    }
+    if (constants$1.totalPageCount > 1) {
+      var _props$customSummary4;
+      result = result + " - " + ((_props$customSummary4 = props.customSummary) === null || _props$customSummary4 === void 0 ? void 0 : _props$customSummary4.summaryTotalPageCountLabel) + "  " + constants$1.loadedPageCount + " / " + constants$1.totalPageCount;
+    }
+    return result;
+  }, [data, filteredRowCount, constants$1.loadedPageCount, props.pageSize, constants$1.totalRecordCount, filterApplied.current]);
+  function actionCellRender(cellData, props) {
+    var kebabMenuButtons = props.actionButtonGroup && props.actionButtonGroup.length >= 2 && !props.edit ? props.actionButtonGroup.slice(2).map(function (button) {
+      return {
+        icon: React.createElement(DynamicIcon, {
+          iconName: button.icon
+        }),
+        onClick: function onClick(event) {
+          var customEvent = {
+            column: cellData.column,
+            component: cellData.component,
+            element: cellData.element,
+            event: event,
+            model: cellData.data,
+            row: cellData.row
+          };
+          button.onClick(customEvent);
+        }
+      };
+    }) : [];
+    var buttonElements = [];
+    {
+      !props.edit && actionButtons.forEach(function (buttonItem, index) {
+        var isVisible = typeof buttonItem.visible === "function" ? buttonItem.visible({
+          column: cellData.column,
+          component: cellData.component,
+          row: cellData.row
+        }) : buttonItem.visible;
+        buttonElements.push(React.createElement(OdsDataGrdiRowButton, {
+          key: "action-button-" + index,
+          hint: buttonItem.hint,
+          visible: isVisible,
+          size: "small",
+          type: "text",
+          disabled: buttonItem.actionPermission === undefined ? false : !buttonItem.actionPermission,
+          icon: React.createElement(DynamicIcon, {
+            iconName: buttonItem.icon
+          }),
+          onClick: function onClick(event) {
+            var customEvent = {
+              column: cellData.column,
+              component: cellData.component,
+              element: cellData.element,
+              event: event,
+              model: cellData.data,
+              row: cellData.row
+            };
+            buttonItem.onClick(customEvent);
+          }
+        }));
+      });
+    }
+    {
+      props.edit && actionButtons.forEach(function (buttonItem, index) {
+        var isVisible = typeof buttonItem.visible === "function" ? buttonItem.visible({
+          column: cellData.column,
+          component: cellData.component,
+          row: cellData.row
+        }) : buttonItem.visible;
+        buttonElements.push(React.createElement(OdsDataGrdiRowButton, {
+          key: "action-button-" + index,
+          name: buttonItem.name,
+          hint: buttonItem.hint,
+          visible: isVisible,
+          size: "small",
+          type: "text",
+          disabled: buttonItem.actionPermission === undefined ? false : !buttonItem.actionPermission,
+          icon: React.createElement(DynamicIcon, {
+            iconName: buttonItem.icon
+          }),
+          onClick: function onClick(event) {
+            if (buttonItem.onClick) {
+              var customEvent = {
+                column: cellData.column,
+                component: cellData.component,
+                element: cellData.element,
+                event: event,
+                model: cellData.data,
+                row: cellData.row
+              };
+              buttonItem.onClick(customEvent);
+            }
+          }
+        }));
+      });
+    }
+    if (kebabMenuButtons.length > 0) {
+      buttonElements.push(React.createElement(OdsDropdown, {
+        key: "dropdown-" + (cellData.rowIndex || cellData.data.ID),
+        menuItems: kebabMenuButtons
+      }, React.createElement(OdsDataGrdiRowButton, {
+        type: "text",
+        icon: React.createElement(DynamicIcon, {
+          iconName: "kebabMenu"
+        })
+      })));
+    }
+    return React.createElement(React.Fragment, null, buttonElements);
+  }
+  var onScrollEnd = useCallback(function () {
+    getServerSide("reachedBottom");
+  }, [(_props$axiosRequest11 = props.axiosRequest) === null || _props$axiosRequest11 === void 0 ? void 0 : _props$axiosRequest11.requestData, getServerSide]);
+  var handleScroll = function handleScroll(e) {
+    var run = debounce_1(function (e) {
+      var _scrollable$scrollTop, _scrollable$clientHei, _scrollable$scrollHei;
+      var scrollable = e.target;
+      var top = (_scrollable$scrollTop = scrollable === null || scrollable === void 0 ? void 0 : scrollable.scrollTop) != null ? _scrollable$scrollTop : 0;
+      var height = (_scrollable$clientHei = scrollable === null || scrollable === void 0 ? void 0 : scrollable.clientHeight) != null ? _scrollable$clientHei : 0;
+      var scrollHeight = (_scrollable$scrollHei = scrollable === null || scrollable === void 0 ? void 0 : scrollable.scrollHeight) != null ? _scrollable$scrollHei : 0;
+      var maxHeight = Math.max(top, height, scrollHeight) - 1;
+      if (scrollHeight <= height) return;
+      var reachedBottom = Math.ceil(top + height) >= maxHeight;
+      var lastScrollTop = 0;
+      if (top < lastScrollTop) return;
+      lastScrollTop = top <= 0 ? 0 : top;
+      if (reachedBottom) onScrollEnd();
+      setScrollPosition(top);
+    }, 200);
+    run(e);
+  };
+  var handleContentReady = function handleContentReady(e) {
+    var dataGridInstance = e.component;
+    var filteredDataCount = dataGridInstance.totalCount();
+    if (filterApplied.current && filteredDataCount > 0) {
+      setFilteredRowCount(filteredDataCount);
+    } else {
+      setFilteredRowCount(0);
+    }
+    if (!contentReady) setContentReady(true);
+  };
+  var onFilterValueChange = function onFilterValueChange(e) {
+    if (e !== null) filterApplied.current = true;else {
+      filterApplied.current = false;
+      setFilteredRowCount(0);
+    }
+  };
+  var onCustomCellClick = function onCustomCellClick(e) {
+    e.cellElement.style.backgroundColor = "transparent";
+    if (hasFastUpdate) {
+      if (checkCellSelectionConstraints$1(e) && constants$1.allowedDataTypesForMultiCellEditing.some(function (item) {
+        return item.toLocaleLowerCase() == e.column.dataType.toLocaleLowerCase();
+      })) {
+        if (!e.event.ctrlKey) {
+          if (cellAlreadySelected$1(e.data[pkName], e.column.dataField, selectedCells)) {
+            removeSelectedCell(e.rowIndex, e.columnIndex);
+          } else {
+            singleSelect(e.data[pkName], e.column.dataField);
+          }
+        } else {
+          var selectedCell = {
+            colIndex: e.columnIndex,
+            rowIndex: e.rowIndex
+          };
+          if (ctrlSelection) {
+            multipleSelect([].concat(ctrlSelectedCells, [selectedCell]));
+          } else {
+            setCtrlSelectedCells(function (prev) {
+              return [].concat(prev, [selectedCell]);
+            });
+          }
+          setCtrlSelection(function (prev) {
+            return !prev;
+          });
+        }
+      }
+    }
+    onCellClick && onCellClick(e);
+  };
+  var onCustomCellHoverChanged = function onCustomCellHoverChanged(e) {
+    if (hasFastUpdate) {
+      if (!e.event.ctrlKey && !ctrlSelection) {
+        if (checkCellSelectionConstraints$1(e)) {
+          if (e.event.buttons === 1) {
+            setHoveredCells(function (prev) {
+              return [].concat(prev, [{
+                colIndex: e.columnIndex,
+                rowIndex: e.rowIndex
+              }]);
+            });
+          } else {
+            multipleSelect(hoveredCells);
+          }
+        } else if (e.rowType != "data") {
+          multipleSelect(hoveredCells);
+        }
+      }
+    }
+    onCellHoverChanged && onCellHoverChanged(e);
+  };
+  var onCustomFastUpdateButtonClick = function onCustomFastUpdateButtonClick(e) {
+    if (selectedCells.length > 0) {
+      setIsFastUpdateModalOpen(true);
+    }
+    onFastUpdateButtonClick && onFastUpdateButtonClick(e);
+  };
+  var onFastUpdateModalCancel = function onFastUpdateModalCancel(_e) {
+    closeModal();
+    onFastUpdateCancel && onFastUpdateCancel();
+  };
+  var onFastUpdateFormFinish = function onFastUpdateFormFinish(values) {
+    onFastUpdateFinish && onFastUpdateFinish(values, selectedCells);
+    closeModal();
+  };
+  var onFastUpdateFormFinishFailed = function onFastUpdateFormFinishFailed(errorInfo) {
+    onFastUpdateFailed && onFastUpdateFailed(errorInfo);
+  };
+  var onClickFastUpdateFormCancel = function onClickFastUpdateFormCancel(_e) {
+    closeModal();
+    onFastUpdateCancel && onFastUpdateCancel();
+  };
+  var onCustomCellPrepared = function onCustomCellPrepared(e) {
+    var _props$edit, _props$edit2;
+    if (hasFastUpdate) {
+      if (e.rowType === "data" && e.column.allowEditing && constants$1.allowedDataTypesForMultiCellEditing.some(function (item) {
+        return item.toLocaleLowerCase() == e.column.dataType.toLocaleLowerCase();
+      })) {
+        if (selectedCells.some(function (cell) {
+          return cell.pkValue == e.data[pkName] && cell.dataField == e.column.dataField;
+        })) {
+          e.cellElement.classList.add("grid-cell-selected");
+        }
+      }
+    }
+    if (((_props$edit = props.edit) === null || _props$edit === void 0 ? void 0 : _props$edit.mode) == "cell" && (_props$edit2 = props.edit) !== null && _props$edit2 !== void 0 && _props$edit2.allowUpdating && e.rowType == "data" && !e.column.allowEditing) {
+      e.cellElement.classList.add("grid-cell-disable-colored");
+    }
+  };
+  var onToolbarPreparing = function onToolbarPreparing(e) {
+    if (props.toolbarButtonGroup && props.toolbarButtonGroup.length > 0) {
+      e.toolbarOptions.items.unshift({
+        location: "before",
+        template: function template(_, __, container) {
+          var wrapper = document.createElement("div");
+          container.appendChild(wrapper);
+          reactDom.render(React.createElement(React.StrictMode, null, props.toolbarButtonGroup && Array.isArray(props.toolbarButtonGroup) && props.toolbarButtonGroup.map(function (buttonGroupItem, index) {
+            return React.createElement(OdsButton, {
+              key: index,
+              style: {
+                marginLeft: token.margin
+              },
+              type: buttonGroupItem.type,
+              onClick: buttonGroupItem.onClick
+            }, buttonGroupItem.label);
+          })), wrapper);
+        }
+      });
+    }
+    e.toolbarOptions.items.unshift({
+      location: "before",
+      cssClass: "toolbarTitleItem",
+      template: function template(_, __, container) {
+        var wrapper = document.createElement("div");
+        container.appendChild(wrapper);
+        reactDom.render(React.createElement(React.StrictMode, null, React.createElement(OdsTitle, {
+          level: 5,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            alignSelf: "stretch",
+            margin: 0
+          }
+        }, props.pageTitle)), wrapper);
+      }
+    });
+  };
+  var detailGrid = function detailGrid(_ref) {
+    var data = _ref.data;
+    return React.createElement(OdsRemoteDataGrid, Object.assign({}, props, {
+      showMasterDetail: false,
+      columns: props.detailGridColums,
+      dataSource: props.detailData[data.key.ID]
+    }));
+  };
+  return React.createElement(React.Fragment, null, React.createElement(Modal, {
+    title: fastUpdateModalTitle != null ? fastUpdateModalTitle : "Fast Update",
+    open: isFastUpdateModalOpen,
+    onCancel: onFastUpdateModalCancel,
+    footer: [],
+    maskClosable: true,
+    width: 300
+  }, React.createElement(Form$1, {
+    key: "form-fastupdate",
+    form: fastUpdateForm,
+    style: {
+      maxWidth: "100%"
+    },
+    layout: "vertical",
+    onFinish: onFastUpdateFormFinish,
+    onFinishFailed: onFastUpdateFormFinishFailed
+  }, constants$1.allowedDataTypesForMultiCellEditing.map(function (item) {
+    switch (item) {
+      case "number":
+        return React.createElement(Form$1.Item, {
+          name: "number",
+          label: "",
+          rules: [{
+            required: true,
+            message: fastUpdateFormRequiredFieldMessage != null ? fastUpdateFormRequiredFieldMessage : "Required field"
+          }]
+        }, React.createElement(OdsInputNumber, {
+          key: "odsinputnumber-fastupdate",
+          style: {
+            width: "100%"
+          },
+          min: 0
+        }));
+      default:
+        return React.createElement("div", null);
+    }
+  }), React.createElement(Row, {
+    style: {
+      justifyContent: "end",
+      gap: token.marginSM
+    }
+  }, React.createElement(Col, null, React.createElement(OdsButton, {
+    key: "back",
+    onClick: onClickFastUpdateFormCancel
+  }, " ", fastUpdateModalCancelText != null ? fastUpdateModalCancelText : "Cancel")), React.createElement(Col, null, React.createElement(OdsButton, {
+    htmlType: "submit",
+    type: "primary"
+  }, " ", fastUpdateModalSaveText != null ? fastUpdateModalSaveText : "Save"))))), React.createElement(DataGrid$1, {
+    keyExpr: keyExpr,
+    dataSource: data,
+    showBorders: true,
+    columnAutoWidth: false,
+    ref: gridRef,
+    height: props.height == undefined ? window.innerHeight - 164 : props.height,
+    allowColumnResizing: true,
+    columnResizingMode: "nextColumn",
+    showRowLines: true,
+    allowColumnReordering: true,
+    scrolling: {
+      useNative: true
+    },
+    remoteOperations: false,
+    paging: {
+      enabled: false
+    },
+    repaintChangesOnly: true,
+    focusedRowEnabled: false,
+    filterSyncEnabled: true,
+    wordWrapEnabled: props.wordWrapEnabled ? props.wordWrapEnabled : false,
+    columnFixing: {
+      enabled: true
+    },
+    noDataText: props.noDataText,
+    onEditorPreparing: onEditorPreparing,
+    onExporting: onExporting,
+    onRowClick: props.onRowClick,
+    onEditorPrepared: onEditorPrepared,
+    onSelectionChanged: props.onSelectionChanged,
+    onSaved: props.onSaved,
+    onSaving: props.onSaving,
+    onEditCanceling: props.onEditCanceling,
+    onContentReady: handleContentReady,
+    onFilterValueChange: onFilterValueChange,
+    onCellClick: onCustomCellClick,
+    onCellHoverChanged: onCustomCellHoverChanged,
+    onCellPrepared: onCustomCellPrepared,
+    onOptionChanged: props.onOptionChanged,
+    onToolbarPreparing: props.onToolbarPreparing || onToolbarPreparing
+  }, gridColumns.map(function (col) {
+    return React.createElement(Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      minWidth: 50,
+      cssClass: col.cssClass + " " + (hasFastUpdate ? "grid-cell-disable-text-selection" : "")
+    }), col.lookUp && React.createElement(Lookup, Object.assign({}, col.lookUp)), col.dataField === "IsActive" && React.createElement(HeaderFilter, {
+      dataSource: [{
+        text: "Active",
+        value: true
+      }, {
+        text: "Passive",
+        value: false
+      }]
+    }), col.useDynamicHeaderFilter && React.createElement(HeaderFilter, {
+      allowSearch: true,
+      dataSource: [{
+        text: "(Blanks)",
+        value: null
+      }].concat(data && data.length > 0 ? data.filter(function (item) {
+        return item[col.dataField] !== null && item[col.dataField] !== undefined && item[col.dataField] !== "";
+      }).map(function (item) {
+        return {
+          text: item[col.dataField].toString(),
+          value: item[col.dataField]
+        };
+      }) : [])
+    }), getMultiLevelColumns$1(col));
+  }), props.actionColumnEnable !== undefined && props.actionColumnEnable === true && React.createElement(Column, {
+    dataField: "Actions",
+    fixed: true,
+    allowSorting: false,
+    caption: props.actionButtonGroupCaption,
+    type: "buttons",
+    showInColumnChooser: false,
+    cellRender: function cellRender(cellData) {
+      return actionCellRender(cellData, props);
+    }
+  }), props.showMasterDetail && React.createElement(MasterDetail, {
+    enabled: true,
+    component: detailGrid
+  }), props.edit && React.createElement(Editing, {
+    mode: props.edit.mode,
+    allowUpdating: props.edit.allowUpdating,
+    allowDeleting: props.edit.allowDeleting,
+    allowAdding: props.edit.allowAdding,
+    useIcons: true
+  }, props.edit.mode === "popup" && React.createElement("div", null, React.createElement(Popup, {
+    showTitle: true,
+    width: 700,
+    height: 300,
+    showCloseButton: false
+  }), React.createElement(Form, null, props.edit.formItems && props.edit.formItems.map(function (formItem) {
+    return React.createElement(Item, {
+      itemType: formItem.itemType,
+      colCount: formItem.colCount,
+      colSpan: formItem.colSpan
+    }, formItem.items.map(function (subItem) {
+      return React.createElement(Item, {
+        key: subItem.dataField,
+        dataField: subItem.dataField
+      });
+    }));
+  })))), React.createElement(Paging, {
+    defaultPageSize: props.pageSize
+  }), props.pagingEnable && React.createElement(Pager, {
+    visible: false,
+    displayMode: "full",
+    showPageSizeSelector: false,
+    showNavigationButtons: false,
+    showInfo: false
+  }), React.createElement(Scrolling, {
+    showScrollbar: "always",
+    scrollByContent: true,
+    scrollByThumb: true,
+    mode: "virtual",
+    rowRenderingMode: "virtual"
+  }), loading && React.createElement(LoadPanel, {
+    enabled: true,
+    shadingColor: "rgba(0,0,0,0.4)"
+  }), React.createElement(SearchPanel, {
+    visible: true
+  }), React.createElement(FilterRow, {
+    visible: props.isFilterRow != undefined ? props.isFilterRow : true
+  }), React.createElement(FilterPanel, {
+    visible: true
+  }), React.createElement(HeaderFilter, {
+    visible: true
+  }), React.createElement(Sorting, {
+    mode: "multiple"
+  }), React.createElement(Export, {
+    enabled: true,
+    allowExportSelectedData: true,
+    formats: constants$1.exportFormats
+  }), ((_props$selectOptions = props.selectOptions) === null || _props$selectOptions === void 0 ? void 0 : _props$selectOptions.selectEnable) && React.createElement(Selection, {
+    mode: (_props$selectOptions$ = (_props$selectOptions2 = props.selectOptions) === null || _props$selectOptions2 === void 0 ? void 0 : _props$selectOptions2.mode) != null ? _props$selectOptions$ : "multiple",
+    deferred: (_props$selectOptions$2 = (_props$selectOptions3 = props.selectOptions) === null || _props$selectOptions3 === void 0 ? void 0 : _props$selectOptions3.deferred) != null ? _props$selectOptions$2 : true
+  }), React.createElement(ColumnChooser, {
+    enabled: true,
+    mode: "select"
+  }, !props.columnChooserPositionDisabled && React.createElement(Position, {
+    my: "right top",
+    at: "right bottom",
+    of: document.querySelector("." + props.dataGridPageName) ? "." + props.dataGridPageName + " .dx-datagrid-column-chooser-button" : ".dx-datagrid-column-chooser-button"
+  }), React.createElement(ColumnChooserSearch, {
+    enabled: true,
+    editorOptions: {
+      placeholder: ""
+    }
+  }), React.createElement(ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), React.createElement(Toolbar, null, React.createElement(Item$1, {
+    name: "searchPanel"
+  }), React.createElement(Item$1, {
+    name: "columnChooserButton",
+    cssClass: "toolbarPanelItems"
+  }), React.createElement(Item$1, {
+    name: "exportButton",
+    cssClass: "toolbarPanelItems"
+  }), hasFastUpdate && React.createElement(Item$1, null, React.createElement(OdsButton, {
+    key: "odsbutton-fastupdate",
+    onClick: onCustomFastUpdateButtonClick
+  }, fastUpdateButtonText != null ? fastUpdateButtonText : "Fast Update"))), React.createElement(Summary, {
+    calculateCustomSummary: renderTotal
+  }, React.createElement(TotalItem, {
+    column: gridColumns[0].dataField,
+    summaryType: "custom",
+    displayFormat: renderTotal()
+  }), gridRef.current && showSummaryItems$1(props) && getSummaryItems$1(props, gridColumns, gridRef.current.instance).map(function (item, _index) {
+    return item;
+  })), React.createElement(StateStoring, {
+    enabled: true,
+    type: "custom",
+    customLoad: customLoad,
+    customSave: customSave
+  })));
+};
+
+export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFilter, OdsFilterTagView, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
 //# sourceMappingURL=index.modern.js.map