ods-component-lib 1.18.39 → 1.18.41

package/dist/index.modern.js

@@ -1,14 +1,14 @@
-import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, Form, theme, Tooltip } from 'antd';
+import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, theme, Tooltip } from 'antd';
 import styled, { ThemeProvider } from 'styled-components';
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import Marquee from 'react-fast-marquee';
 import Card from 'antd/es/card/Card';
-import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, UserOutlined, LockOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import 'react-phone-input-2/lib/style.css';
 import PhoneInput from 'react-phone-input-2';
 import Parser from 'html-react-parser';
 import { locale, loadMessages } from 'devextreme/localization';
-import DataGrid$1, { DataGrid, LoadPanel, Paging, Pager, SearchPanel, FilterRow, FilterPanel, HeaderFilter, ColumnChooser, Position, ColumnChooserSearch, ColumnChooserSelection, Selection, Editing, Popup, Form as Form$1, Scrolling, Export, Column, RequiredRule, Button as Button$1, Toolbar, Item as Item$1, Summary, TotalItem, StateStoring, Sorting } from 'devextreme-react/data-grid';
+import DataGrid$1, { DataGrid, LoadPanel, Paging, Pager, SearchPanel, FilterRow, FilterPanel, HeaderFilter, ColumnChooser, Position, ColumnChooserSearch, ColumnChooserSelection, Selection, Editing, Popup, Form, Scrolling, Export, Column, RequiredRule, Button as Button$1, Toolbar, Item as Item$1, Summary, TotalItem, StateStoring, Sorting } from 'devextreme-react/data-grid';
 import { Item } from 'devextreme-react/form';
 import { exportDataGrid as exportDataGrid$1 } from 'devextreme/pdf_exporter';
 import { exportDataGrid } from 'devextreme/excel_exporter';
@@ -17,7 +17,7 @@ import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment from 'moment';
 import { GridIcon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon } from 'ods-icon/react/24/outline';
-import { CheckBox, Lookup, TreeList, DropDownButton } from 'devextreme-react';
+import { TreeList, DropDownButton, Lookup } from 'devextreme-react';
 import { TreeView } from 'devextreme-react/tree-view';
 
 function _extends() {
@@ -415,28 +415,10 @@ function OdsButton(props) {
   }, React.createElement(StyledButton, Object.assign({}, props), props.children)));
 }
 
-var onMenuClick = function onMenuClick(e) {
-  console.log('click', e);
-};
-var items = [{
-  key: '1',
-  label: '1st item'
-}, {
-  key: '2',
-  label: '2nd item'
-}, {
-  key: '3',
-  label: '3rd item'
-}];
 function OdsDropdownButton(props) {
   return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
     theme: lightTheme
-  }, React.createElement(Dropdown.Button, {
-    menu: {
-      items: items,
-      onClick: onMenuClick
-    }
-  }, props.children)));
+  }, React.createElement(Dropdown.Button, Object.assign({}, props), props.children)));
 }
 
 var _templateObject$3;
@@ -940,40 +922,81 @@ function OdsRate(props) {
 }
 
 var _templateObject$e;
-var StyledSelect = styled(Select)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var StyledSelect = styled(Select)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 
-function OdsCustomMultiSelect(props) {
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
+var OdsMultiSelect = function OdsMultiSelect(props) {
+  var options = props.options,
+    selectAllEnabled = props.selectAllEnabled,
+    selectAllText = props.selectAllText,
+    closeButtonText = props.closeButtonText;
+  var _useState = useState([]),
+    value = _useState[0],
+    setValue = _useState[1];
+  var _useState2 = useState(false),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var selectAllValue = "OdsMultiSelectOptionAll";
+  var newOptions = selectAllEnabled ? [{
+    value: selectAllValue,
+    label: selectAllText
+  }].concat(options) : options;
+  var handleChange = function handleChange(newValues) {
+    if (newValues && newValues.length && newValues.includes(selectAllValue)) {
+      if (newValues.length === options.length + 1) {
+        setValue([]);
+        return;
+      }
+      setValue(options.map(function (item) {
+        return item.value;
+      }));
+      return;
+    }
+    setValue(newValues);
+    return;
+  };
+  var dropdownRender = function dropdownRender(menu) {
+    return React.createElement(React.Fragment, null, menu, React.createElement(OdsDivider, {
+      style: {
+        margin: "8px 0"
+      }
+    }), React.createElement(Space, {
+      style: {
+        padding: "0 8px 4px"
+      }
+    }, React.createElement(OdsButton, {
+      style: {
+        width: "100%"
+      },
+      type: "primary",
+      onClick: function onClick() {
+        return setOpen(false);
+      }
+    }, closeButtonText != null ? closeButtonText : "Close")));
+  };
+  var optionRender = function optionRender(option, __info) {
+    return React.createElement("div", null, option.data.label, option.data.value == selectAllValue ? React.createElement(OdsDivider, {
+      style: {
+        margin: "8px 0px 0px 0px"
+      }
+    }) : "");
+  };
   return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
     theme: lightTheme
-  }, React.createElement(StyledSelect, Object.assign({}, props, {
+  }, React.createElement(StyledSelect, Object.assign({
+    mode: "multiple",
+    allowClear: true,
+    value: value,
     open: open,
+    onChange: handleChange,
+    optionRender: optionRender,
+    dropdownRender: dropdownRender,
     onDropdownVisibleChange: function onDropdownVisibleChange(visible) {
       return setOpen(visible);
-    },
-    dropdownRender: function dropdownRender(menu) {
-      return React.createElement(React.Fragment, null, menu, React.createElement(OdsDivider, {
-        style: {
-          margin: '8px 0'
-        }
-      }), React.createElement(Space, {
-        style: {
-          padding: '0 8px 4px'
-        }
-      }, React.createElement(OdsButton, {
-        style: {
-          width: "100%"
-        },
-        type: "primary",
-        onClick: function onClick() {
-          return setOpen(false);
-        }
-      }, props.buttonLabel)));
     }
+  }, props, {
+    options: newOptions
   }))));
-}
+};
 
 function OdsSelect(props) {
   return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
@@ -1008,7 +1031,7 @@ var StyledTabs = styled(Tabs)(_templateObject$h || (_templateObject$h = _taggedT
 var onChange = function onChange(key) {
   console.log(key);
 };
-var items$1 = [{
+var items = [{
   key: '1',
   label: "Tab 1",
   children: "Content of Tab Pane 1",
@@ -1037,7 +1060,7 @@ function OdsTab(props) {
     tabPosition: tabPosition,
     size: size,
     defaultActiveKey: "1",
-    items: items$1,
+    items: items,
     onChange: onChange
   }), props.children)));
 }
@@ -1137,45 +1160,6 @@ function OdsTitle(props) {
   }, React.createElement(StyledtTypography.Title, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
 }
 
-function OdsLogin(props) {
-  return React.createElement(React.Fragment, null, React.createElement(Form, {
-    name: "login-form",
-    initialValues: {
-      remember: true
-    },
-    onFinish: props.onFinish,
-    onFinishFailed: props.onFinishFailed
-  }, React.createElement(Form.Item, {
-    label: "Username",
-    name: "username",
-    rules: [{
-      required: true,
-      message: 'Please input your username!'
-    }]
-  }, React.createElement(OdsInput, {
-    prefix: React.createElement(UserOutlined, {
-      className: "site-form-item-icon"
-    }),
-    placeholder: "Username"
-  })), React.createElement(Form.Item, {
-    label: "Password",
-    name: "password",
-    rules: [{
-      required: true,
-      message: 'Please input your password!'
-    }]
-  }, React.createElement(OdsPassword, {
-    prefix: React.createElement(LockOutlined, {
-      className: "site-form-item-icon"
-    }),
-    placeholder: "Password"
-  })), React.createElement(Form.Item, null, React.createElement(OdsButton, {
-    type: "primary",
-    htmlType: "submit",
-    loading: props.loading
-  }, "Log in"))));
-}
-
 var useToken = theme.useToken;
 var exportFormats = ['xlsx'];
 var renderMenuItem = function renderMenuItem() {
@@ -1354,7 +1338,7 @@ function OdsDataGrid(props) {
     width: 700,
     height: 300,
     showCloseButton: false
-  }), React.createElement(Form$1, null, props.formItems.map(function (formItem) {
+  }), React.createElement(Form, null, props.formItems.map(function (formItem) {
     return React.createElement(Item, {
       itemType: formItem.itemType,
       colCount: formItem.colCount,
@@ -1588,267 +1572,6 @@ function grid(props) {
   }))));
 }
 
-var exportFormats$2 = ['xlsx', 'pdf'];
-var searchEditorOptions = {
-  placeholder: 'Search column'
-};
-var renderMenuItem$1 = function renderMenuItem() {
-  return React.createElement(Export, {
-    enabled: true,
-    allowExportSelectedData: true,
-    formats: exportFormats$2
-  });
-};
-var customizeBooleanColumnRender = function customizeBooleanColumnRender(e) {
-  var tagColor = e.value ? 'green' : 'gold';
-  return React.createElement(Tag, {
-    color: tagColor
-  }, e.value ? 'Active' : 'Passive');
-};
-function OdsProfDataGrid(props) {
-  var _useState = useState(true),
-    showPageSizeSelector = _useState[0],
-    setShowPageSizeSelector = _useState[1];
-  var _useState2 = useState(true),
-    enablePaging = _useState2[0],
-    setEnablePaging = _useState2[1];
-  var _useState3 = useState('standard'),
-    scrollingType = _useState3[0],
-    setScrollingType = _useState3[1];
-  var _useState4 = useState(true),
-    loadPanelEnabled = _useState4[0],
-    setLoadPanelEnabled = _useState4[1];
-  var dataGridRef = useRef(null);
-  var headerCellRender = function headerCellRender(colProperties) {
-    return React.createElement("th", {
-      className: "dx-datagrid-headers"
-    }, colProperties.column.caption);
-  };
-  var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
-  var onExporting = function onExporting(e) {
-    if (e.format === 'excel') {
-      var workbook = new Workbook();
-      exportDataGrid({
-        component: e.component,
-        worksheet: workbook.addWorksheet('Main sheet'),
-        autoFilterEnabled: true
-      }).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');
-      });
-    }
-  };
-  var onEnablePagingChange = function onEnablePagingChange(value) {
-    setEnablePaging(value);
-    refreshGrid();
-  };
-  var handleScrollingTypeChange = function handleScrollingTypeChange(newScrollingType) {
-    setScrollingType(newScrollingType);
-    console.log(newScrollingType);
-    debugger;
-    refreshGrid();
-  };
-  var onContentReady = function onContentReady() {
-    setLoadPanelEnabled(false);
-  };
-  var refreshGrid = function refreshGrid() {
-    if (dataGridRef.current) {
-      dataGridRef.current.instance.refresh();
-    }
-  };
-  var handleCheckboxChange = function handleCheckboxChange(e) {
-    setShowPageSizeSelector(e);
-  };
-  return React.createElement(React.Fragment, null, React.createElement("div", {
-    className: "odsDatagrid",
-    style: {
-      width: "100%",
-      overflowX: 'auto'
-    }
-  }, React.createElement(DataGrid, {
-    dataSource: props.dataSource,
-    keyExpr: props.keyExpr,
-    allowColumnResizing: true,
-    columnResizingMode: "widget",
-    onRowInserted: props.onRowInserted,
-    onRowUpdated: props.onRowUpdated,
-    onRowRemoved: props.onRowRemoved,
-    onSaving: props.onSaving,
-    allowColumnReordering: true,
-    showRowLines: true,
-    showBorders: true,
-    ref: dataGridRef,
-    columnAutoWidth: false,
-    onEditCanceling: props.onEditCanceling,
-    onExporting: onExporting,
-    onContentReady: onContentReady
-  }, React.createElement(Paging, {
-    enabled: true,
-    defaultPageSize: props.pageSize
-  }), enablePaging && React.createElement(Pager, {
-    visible: true,
-    displayMode: "full",
-    showPageSizeSelector: showPageSizeSelector,
-    showNavigationButtons: true,
-    showInfo: true
-  }), props.searchEnable && React.createElement(SearchPanel, {
-    visible: true
-  }), props.filterEnable && React.createElement(FilterRow, {
-    visible: true
-  }), props.headerFilterEnable && React.createElement(HeaderFilter, {
-    visible: true
-  }), React.createElement(ColumnChooser, {
-    enabled: true,
-    mode: "select"
-  }, React.createElement(Position, {
-    my: "right top",
-    at: "right bottom",
-    of: ".dx-datagrid-column-chooser-button"
-  }), React.createElement(ColumnChooserSearch, {
-    enabled: true,
-    editorOptions: searchEditorOptions
-  }), React.createElement(ColumnChooserSelection, {
-    allowSelectAll: true,
-    selectByClick: true,
-    recursive: true
-  })), props.selectEnable && React.createElement(Selection, {
-    mode: "multiple",
-    deferred: true
-  }), React.createElement(Scrolling, {
-    mode: props.scrollingMode
-  }), React.createElement(LoadPanel, {
-    enabled: loadPanelEnabled
-  }), props.editEnable === true && 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(Popup, {
-    title: props.popupTitle,
-    showTitle: true,
-    width: 700,
-    height: 300,
-    showCloseButton: false
-  }), React.createElement(Form$1, null, props.formItems && props.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
-      });
-    }));
-  }))), props.exportEnable === true && React.createElement(Export, {
-    enabled: true,
-    allowExportSelectedData: true,
-    formats: exportFormats$2
-  }), props.columns.map(function (col) {
-    return React.createElement(Column, Object.assign({
-      key: col.dataField
-    }, col, {
-      headerCellRender: headerCellRender,
-      cellRender: col.dataField === 'IsActive' || col.dataField === 'Status' ? customizeBooleanColumnRender : ""
-    }), col.required && React.createElement(RequiredRule, {
-      message: col.requiredMessage
-    }), col.dataField === 'IsActive' && React.createElement(HeaderFilter, {
-      dataSource: [{
-        text: 'All',
-        value: null
-      }, {
-        text: 'Active',
-        value: true
-      }, {
-        text: 'Passive',
-        value: false
-      }]
-    }));
-  }), function () {
-    if (props.customPopup !== undefined) {
-      return React.createElement(Column, {
-        type: "buttons",
-        width: 110
-      }, props.edit.allowUpdating && React.createElement(Button$1, {
-        hint: "Edit",
-        visible: true,
-        disabled: false,
-        icon: "edit",
-        onClick: props.editButtonClick
-      }), props.edit.allowDeleting && React.createElement(Button$1, {
-        hint: "Delete",
-        visible: true,
-        disabled: false,
-        icon: "trash",
-        onClick: props.deleteButtonClick
-      }));
-    } else {
-      return React.createElement(Column, {
-        type: "buttons",
-        width: 110
-      }, React.createElement(React.Fragment, null, props.edit.allowUpdating && React.createElement(Button$1, {
-        name: "edit"
-      }), props.edit.allowDeleting && React.createElement(Button$1, {
-        name: "delete"
-      })));
-    }
-  }(), React.createElement(Toolbar, null, React.createElement(Item$1, {
-    location: "after"
-  }, React.createElement(Button$1, {
-    onClick: props.onAddButton
-  }, "Add New")), React.createElement(Item$1, {
-    location: "after"
-  }, React.createElement(CheckBox, {
-    id: 'showPageSizes',
-    text: 'Show Page Size',
-    value: showPageSizeSelector,
-    onValueChanged: handleCheckboxChange
-  })), React.createElement(Item$1, {
-    location: "after"
-  }, React.createElement(CheckBox, {
-    id: 'showPages',
-    text: 'Enable Paging',
-    value: enablePaging,
-    onValueChanged: onEnablePagingChange
-  })), React.createElement(Item$1, {
-    location: "after"
-  }, React.createElement(Lookup, {
-    value: scrollingType,
-    dataSource: [{
-      value: "standard",
-      label: "standard"
-    }, {
-      value: "virtual",
-      label: "Active"
-    }, {
-      value: "infinite",
-      label: "infinite"
-    }],
-    onValueChange: handleScrollingTypeChange
-  })), React.createElement(Item$1, {
-    name: "columnChooserButton"
-  }), React.createElement(Item$1, {
-    name: "searchPanel"
-  }), React.createElement(Item$1, {
-    name: "exportButton"
-  }), React.createElement(Item$1, {
-    menuItemRender: renderMenuItem$1
-  })))));
-}
-
 var DxTreeList = function DxTreeList(props) {
   var _useState = useState(props.dataSource),
     dataSource = _useState[0];
@@ -1921,22 +1644,37 @@ var DxTreeView = function DxTreeView(props) {
   }));
 };
 
-var iconComponents = {
-  edit: EditIcon,
-  "delete": Trash1Icon,
-  copy: CopyIcon,
-  discount: DiscountIcon,
-  kebabMenu: KebabMenuIcon,
-  refresh: RefreshIcon
-};
-var DynamicIcon = function DynamicIcon(_ref) {
-  var iconName = _ref.iconName;
-  var IconComponent = iconComponents[iconName];
-  if (!IconComponent) {
-    return null;
-  }
-  return React.createElement(IconComponent, null);
-};
+// A type of promise-like that resolves synchronously and supports only one observer
+
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
+
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
+
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
 
 function l(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return "Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}
 var p=Object.prototype.hasOwnProperty,fa=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,ha={},ia={};
@@ -16152,314 +15890,6 @@ var server_browser = {
 	renderToReadableStream: renderToReadableStream$1
 };
 
-function OdsDataGridNew(props) {
-  var _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
-  var dataGridRef = useRef(null);
-  var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
-  var renderMenuItem = function renderMenuItem() {
-    return React.createElement(Export, {
-      enabled: true,
-      allowExportSelectedData: true,
-      formats: props.exportFormats !== undefined ? props.exportFormats : ['xlsx']
-    });
-  };
-  var onExporting = function onExporting(e) {
-    if (e.format === 'xlsx') {
-      var workbook = new Workbook();
-      exportDataGrid({
-        component: e.component,
-        worksheet: workbook.addWorksheet('Main sheet'),
-        autoFilterEnabled: true
-      }).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');
-      });
-    }
-  };
-  var customLoad = function customLoad() {
-    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;
-  };
-  var customSave = function customSave(state) {
-    state.selectedRowKeys = [];
-    if (props.filterEnabledShow) state.filterPanel = {
-      filterEnabled: false
-    };else state.filterPanel = {
-      filterEnabled: true
-    };
-    localStorage.setItem(props.exportFileName + "Storage", JSON.stringify(state));
-  };
-  useEffect(function () {
-    locale(localStorage.getItem("locale"));
-    loadMessages(JSON.parse(localStorage.getItem("localTranslation")));
-  }, []);
-  return React.createElement(React.Fragment, null, React.createElement("div", {
-    className: "odsDatagrid",
-    style: {
-      width: "100%",
-      overflowX: 'hidden',
-      overflowY: "hidden"
-    }
-  }, React.createElement(DataGrid, Object.assign({
-    dataSource: props.dataSource,
-    keyExpr: props.keyExpr,
-    allowColumnResizing: props.allowColumnResizing ? props.allowColumnResizing : true,
-    columnResizingMode: "nextColumn",
-    onContentReady: props.onContentReady,
-    onRowInserted: props.onRowInserted,
-    onRowUpdated: props.onRowUpdated,
-    onRowRemoved: props.onRowRemoved,
-    onEditorPreparing: props.onEditorPreparing,
-    onSaving: props.onSaving,
-    allowColumnReordering: props.allowColumnReordering ? props.allowColumnReordering : true,
-    showRowLines: props.showRowLines ? props.showRowLines : true,
-    showBorders: props.showBorders ? props.showBorders : true,
-    columnAutoWidth: props.columnAutoWidth == undefined ? false : props.columnAutoWidth,
-    focusedRowEnabled: props.focusedRowEnabled ? props.focusedRowEnabled : false,
-    wordWrapEnabled: props.wordWrapEnabled == undefined ? false : props.wordWrapEnabled,
-    onEditCanceling: props.onEditCanceling,
-    onExporting: onExporting,
-    filterSyncEnabled: props.filterSyncEnabled ? props.filterSyncEnabled : true,
-    scrolling: {
-      useNative: props.scrolUseNative == undefined ? false : props.scrolUseNative
-    },
-    height: props.height == undefined ? window.innerHeight - 164 : props.height,
-    repaintChangesOnly: props.repaintChangesOnly ? props.repaintChangesOnly : true,
-    remoteOperations: props.remoteOperations ? props.remoteOperations : false,
-    ref: dataGridRef,
-    selectedRowKeys: props.selectedRowKeys,
-    onSelectionChanged: props.onSelectionChanged
-  }, props), React.createElement(LoadPanel, {
-    enabled: true
-  }), React.createElement(Paging, {
-    defaultPageSize: props.pageSize
-  }), props.pagingEnable && React.createElement(Pager, {
-    visible: false,
-    displayMode: "full",
-    showPageSizeSelector: false,
-    showNavigationButtons: false,
-    showInfo: false
-  }), props.searchEnable && React.createElement(SearchPanel, {
-    visible: true
-  }), props.filterEnable && React.createElement(FilterRow, {
-    visible: true
-  }), React.createElement(FilterPanel, {
-    visible: true
-  }), props.headerFilterEnable && React.createElement(HeaderFilter, {
-    visible: true
-  }), React.createElement(ColumnChooser, {
-    enabled: true,
-    mode: "select"
-  }, !props.columnChooserPositionDisabled && React.createElement(Position, {
-    my: "right top",
-    at: "right bottom",
-    of: ".dx-datagrid-column-chooser-button"
-  }), React.createElement(ColumnChooserSearch, {
-    enabled: true
-  }), React.createElement(ColumnChooserSelection, {
-    allowSelectAll: true,
-    selectByClick: true,
-    recursive: true
-  })), props.editEnable === true && 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(Popup, {
-    title: props.popupTitle,
-    showTitle: true,
-    width: 700,
-    height: 300,
-    showCloseButton: false
-  }), React.createElement(Form$1, null, props.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(Scrolling, {
-    mode: props.scroll.mode,
-    showScrollbar: props.scroll.showScrollbar,
-    scrollByContent: props.scroll.scrollByContent,
-    scrollByThumb: props.scroll.scrollByThumb
-  }), ((_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
-  }), props.exportEnable === true && React.createElement(Export, {
-    enabled: true,
-    allowExportSelectedData: true,
-    formats: props.exportFormats
-  }), props.columns.map(function (col) {
-    return React.createElement(Column, Object.assign({
-      key: col.dataField
-    }, col), col.required && React.createElement(RequiredRule, {
-      message: col.requiredMessage
-    }), col.dataField === 'IsActive' && React.createElement(HeaderFilter, {
-      dataSource: [{
-        text: 'All',
-        value: null
-      }, {
-        text: 'Active',
-        value: true
-      }, {
-        text: 'Passive',
-        value: false
-      }]
-    }));
-  }), React.createElement(Column, {
-    dataField: "Actions",
-    fixed: true,
-    allowSorting: false,
-    caption: props.actionColumnCaption,
-    type: "buttons",
-    showInColumnChooser: false
-  }, props.edit.allowUpdating && React.createElement(Button$1, {
-    hint: props.hintForEditButton,
-    visible: true,
-    disabled: props.actionPermission == undefined ? false : !props.actionPermission,
-    icon: "edit",
-    onClick: props.editButtonClick
-  }), props.edit.allowDeleting && React.createElement(Button$1, {
-    hint: props.hintForDeleteButton,
-    visible: true,
-    disabled: props.actionPermission == undefined ? false : !props.actionPermission,
-    icon: "trash",
-    onClick: props.deleteButtonClick
-  }), props.actionColumnEnable !== undefined && props.actionColumnEnable === true && React.createElement(Column, {
-    dataField: "Actions",
-    fixed: true,
-    allowSorting: false,
-    caption: props.actionColumnCaption,
-    type: "buttons",
-    showInColumnChooser: false
-  }, props.actionButtonGroup && Array.isArray(props.actionButtonGroup) && props.actionButtonGroup.map(function (buttonItem) {
-    return React.createElement(Button$1, {
-      hint: buttonItem.hint,
-      visible: buttonItem.visible,
-      disabled: buttonItem.actionPermission == undefined ? false : !buttonItem.actionPermission,
-      icon: server_browser.renderToString(React.createElement(DynamicIcon, {
-        iconName: buttonItem.icon
-      })),
-      onClick: buttonItem.onClick
-    });
-  }))), 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$1, 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(Toolbar, null, props.pageTitle && React.createElement(Item$1, {
-    location: "before"
-  }, React.createElement(Typography.Title, {
-    level: 5,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      alignSelf: "stretch"
-    }
-  }, props.pageTitle)), props.toolbarButtonGroup.map(function (buttonGroupItem) {
-    return React.createElement(Item$1, {
-      location: "before"
-    }, React.createElement(OdsButton, {
-      type: buttonGroupItem.type,
-      disabled: buttonGroupItem.actionPermission == undefined ? false : !buttonGroupItem.actionPermission,
-      onClick: buttonGroupItem.onclick
-    }, buttonGroupItem.label));
-  }), React.createElement(Item$1, {
-    name: "searchPanel"
-  }), React.createElement(Item$1, {
-    name: "columnChooserButton"
-  }), React.createElement(Item$1, {
-    name: "exportButton"
-  }), React.createElement(Item$1, {
-    menuItemRender: renderMenuItem
-  })), React.createElement(Summary, null, React.createElement(TotalItem, {
-    column: props.summaryTotalColumnName == undefined ? "Id" : props.summaryTotalColumnName,
-    summaryType: "count",
-    displayFormat: props.summaryTotalDataDisplayLabel + " : " + (props.summaryTotalDataCount == undefined ? "{0}" : props.summaryTotalDataCount + " / " + props.summaryTotalPagesize)
-  })), props.storeState && React.createElement(StateStoring, {
-    enabled: true,
-    type: "custom",
-    customLoad: customLoad,
-    customSave: customSave
-  }))));
-}
-
-// A type of promise-like that resolves synchronously and supports only one observer
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously call a function and send errors to recovery continuation
-function _catch(body, recover) {
-	try {
-		var result = body();
-	} catch(e) {
-		return recover(e);
-	}
-	if (result && result.then) {
-		return result.then(void 0, recover);
-	}
-	return result;
-}
-
-// Asynchronously await a promise and pass the result to a finally continuation
-function _finallyRethrows(body, finalizer) {
-	try {
-		var result = body();
-	} catch (e) {
-		return finalizer(true, e);
-	}
-	if (result && result.then) {
-		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
-	}
-	return finalizer(false, result);
-}
-
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -17036,7 +16466,24 @@ function throttle(func, wait, options) {
 
 var throttle_1 = throttle;
 
-var exportFormats$3 = ['xlsx'];
+var iconComponents = {
+  edit: EditIcon,
+  "delete": Trash1Icon,
+  copy: CopyIcon,
+  discount: DiscountIcon,
+  kebabMenu: KebabMenuIcon,
+  refresh: RefreshIcon
+};
+var DynamicIcon = function DynamicIcon(_ref) {
+  var iconName = _ref.iconName;
+  var IconComponent = iconComponents[iconName];
+  if (!IconComponent) {
+    return null;
+  }
+  return React.createElement(IconComponent, null);
+};
+
+var exportFormats$2 = ['xlsx'];
 var totalPageCount = 1;
 var loadedPageCount = 1;
 var totalRecordCount = 0;
@@ -17171,7 +16618,12 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
                     loadedPageCount = 1;
                   } else if (totalPageCount >= loadedPageCount) {
                     setData(function (prevData) {
-                      return [].concat(prevData, newData.Data);
+                      var uniqueData = newData.Data.filter(function (newItem) {
+                        return !prevData.some(function (prevItem) {
+                          return prevItem.Id === newItem.Id;
+                        });
+                      });
+                      return [].concat(prevData, uniqueData);
                     });
                   }
                   totalPageCount = newData.PageCount;
@@ -17322,21 +16774,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     }
   }, []);
   var renderTotal = useCallback(function () {
-    var totalloaded = 0;
-    if (data.length < 50 || !props.isServerSide || loadedPageCount == totalPageCount) {
-      totalloaded = data.length;
-    } else {
-      totalloaded = loadedPageCount * props.pageSize;
-    }
-    var result = "";
-    if (filteredRowCount > 0) {
-      result = "" + totalloaded + props.customSummary.summaryFilteredDataLabel + (totalRecordCount > 0 ? totalloaded + " " + props.customSummary.summaryLoadedDataLabel + ("- " + totalRecordCount) + props.customSummary.summaryTotalDataLabel : " ");
-    } else if (!props.isServerSide && totalloaded > 0) {
-      result = totalloaded + " " + props.customSummary.summaryLoadedDataLabel + ("- " + totalloaded) + props.customSummary.summaryTotalDataLabel;
-    } else {
-      result = totalRecordCount > 0 ? totalloaded + " " + props.customSummary.summaryLoadedDataLabel + ("- " + totalRecordCount) + props.customSummary.summaryTotalDataLabel : "";
-    }
-    return result;
+    return totalRecordCount > 0 ? props.customSummary.summaryTotalDataLabel + " : " + totalRecordCount : "";
   }, [data, filteredRowCount, loadedPageCount, props.pageSize, totalRecordCount]);
   var renderTotalPaging = useCallback(function () {
     var result = "";
@@ -17486,7 +16924,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     width: 700,
     height: 300,
     showCloseButton: false
-  }), React.createElement(Form$1, null, props.edit.formItems && props.edit.formItems.map(function (formItem) {
+  }), React.createElement(Form, null, props.edit.formItems && props.edit.formItems.map(function (formItem) {
     return React.createElement(Item, {
       itemType: formItem.itemType,
       colCount: formItem.colCount,
@@ -17526,7 +16964,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   }), React.createElement(Export, {
     enabled: true,
     allowExportSelectedData: true,
-    formats: exportFormats$3
+    formats: exportFormats$2
   }), ((_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
@@ -17593,5 +17031,5 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-export { DxTreeList, DxTreeView, OdsAlert, OdsAutoComplete, OdsBannerAlert, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsCustomMultiSelect, OdsDataGrid, OdsDataGridNew, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsCollapse as OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsLogin, OdsModal, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProfDataGrid, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
+export { DxTreeList, DxTreeView, OdsAlert, OdsAutoComplete, OdsBannerAlert, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsCollapse as OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, 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