ods-component-lib 1.18.164 → 1.18.166

package/dist/index.modern.js

@@ -55,37 +55,6 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   strings.raw = raw;
   return strings;
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 
 var _templateObject;
 var StyledAlert = styled(Alert)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n //\n"])));
@@ -1090,7 +1059,9 @@ var _templateObject$l;
 var StyledtTimeline = styled(Timeline)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsTimeline(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledtTimeline, Object.assign({}, props), props.children));
+  return React.createElement(React.Fragment, null, React.createElement(StyledtTimeline, Object.assign({}, props, {
+    mode: props.mode
+  })));
 }
 
 var _templateObject$m;
@@ -33712,6 +33683,7 @@ var OdsBasicDataGrid = function OdsBasicDataGrid(props) {
       key: col.dataField
     }, col, {
       minWidth: 50,
+      width: 160,
       cssClass: col.cssClass + " " + (hasFastUpdate ? "grid-cell-disable-text-selection" : "")
     }), col.lookUp && React.createElement(Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React.createElement(HeaderFilter, {
       dataSource: [{
@@ -34509,12 +34481,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     updateTrigger = _useState4[0],
     setUpdateTrigger = _useState4[1];
   var lastPageIndexRef = useRef(null);
-  var _useState5 = useState({}),
-    filterOptions = _useState5[0],
-    setFilterOptions = _useState5[1];
-  var _useState6 = useState([]),
-    headerFilterData = _useState6[0],
-    setHeaderFilterData = _useState6[1];
   var _useStyles = useStyles$1(),
     gridStyle = _useStyles.styles;
   var renderTotal = useCallback(function () {
@@ -34538,46 +34504,12 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     var currentPageIndex = dataGridInstance.pageCount();
     var currentTotalCount = currentPageIndex == 0 ? 50 : dataGridInstance.totalCount();
     var newData = dataGridInstance === null || dataGridInstance === void 0 ? void 0 : (_dataGridInstance$get = dataGridInstance.getDataSource()) === null || _dataGridInstance$get === void 0 ? void 0 : _dataGridInstance$get.items();
+    if (filterApplied) {
+      totalFilteredCount.current = currentTotalCount;
+    } else {
+      totalUnfilteredCount.current = currentTotalCount;
+    }
     if ((!filterApplied && currentPageIndex == 1 && currentTotalCount != totalUnfilteredCount.current || lastPageIndexRef.current !== currentPageIndex) && newData && newData.length > 0) {
-      setHeaderFilterData(function (prevData) {
-        var uniqueValuesByColumn = {};
-        props.columns.forEach(function (col) {
-          uniqueValuesByColumn[col.dataField] = new Set(prevData.map(function (item) {
-            return item[col.dataField];
-          }).filter(function (val) {
-            return val !== null && val !== "";
-          }));
-        });
-        var newItems = [];
-        newData.forEach(function (item) {
-          var addItem = {};
-          props.columns.forEach(function (col) {
-            var _item$col$dataField;
-            var colValue = (_item$col$dataField = item[col.dataField]) === null || _item$col$dataField === void 0 ? void 0 : _item$col$dataField.toString();
-            if (props.applyCellRenderToHeaderFilter) {
-              try {
-                if (col.cellRender) {
-                  colValue = col.cellRender({
-                    value: colValue
-                  });
-                } else if (col.calculateCellValue) {
-                  var _q;
-                  var q = (_q = {}, _q[col.dataField] = item[col.dataField], _q);
-                  colValue = col.calculateCellValue(q);
-                }
-              } catch (error) {}
-            }
-            if (colValue && !uniqueValuesByColumn[col.dataField].has(colValue)) {
-              uniqueValuesByColumn[col.dataField].add(colValue);
-              addItem[col.dataField] = colValue;
-            }
-          });
-          if (Object.keys(addItem).length > 0) {
-            newItems.push(addItem);
-          }
-        });
-        return [].concat(prevData, newItems);
-      });
       setCurrentPage(currentPageIndex);
       setCurrentPageSize(dataGridInstance.pageSize());
       rowCount.current = currentTotalCount;
@@ -34586,16 +34518,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
       });
       lastPageIndexRef.current = currentPageIndex;
     }
-    if (currentTotalCount > 0) {
-      if (filterApplied) {
-        totalFilteredCount.current = currentTotalCount;
-      } else {
-        totalUnfilteredCount.current = currentTotalCount;
-      }
-      if (!filterApplied && totalFilteredCount.current === 0) {
-        totalFilteredCount.current = totalUnfilteredCount.current;
-      }
-    }
   }, [props.columns, filterApplied]);
   var handleOptionChanged = useCallback(function (e) {
     var dataGrid = props.dataGridRef.current.instance;
@@ -34626,45 +34548,6 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     }
   }, [props.dataGridRef]);
   useEffect(function () {}, [updateTrigger]);
-  useEffect(function () {
-    var loadFilterData = function loadFilterData() {
-      try {
-        var newFilterOptions = {};
-        var _loop = function _loop() {
-          var col = _step.value;
-          try {
-            if (headerFilterData.length > 0) {
-              var newData = headerFilterData.filter(function (item) {
-                return item[col.dataField] != null && item[col.dataField] !== "";
-              }).map(function (item) {
-                return item[col.dataField].toString();
-              });
-              var values = newData.map(function (group) {
-                return {
-                  text: group,
-                  value: group
-                };
-              });
-              newFilterOptions[col.dataField] = values;
-            }
-          } catch (error) {
-            console.error('Error loading data for header filter:', error);
-          }
-        };
-        for (var _iterator = _createForOfIteratorHelperLoose(props.columns), _step; !(_step = _iterator()).done;) {
-          _loop();
-        }
-        setFilterOptions(newFilterOptions);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-    loadFilterData();
-  }, [headerFilterData, props.columns]);
-  useEffect(function () {
-    setHeaderFilterData([]);
-  }, []);
   var actionButtons = useMemo(function () {
     if (props.actionButtonGroup) {
       if (props.actionButtonGroup.length > 3 && !props.edit) {
@@ -34803,7 +34686,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     focusedRowEnabled: false,
     onEditorPrepared: onEditorPrepared,
     onCellClick: function onCellClick(e) {
-      if (e.rowType != 'header') {
+      if (e.rowType != "header") {
         e.cellElement.style.backgroundColor = "transparent";
       }
     },
@@ -34855,7 +34738,8 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     return React.createElement(Column, Object.assign({
       key: col.dataField
     }, col, {
-      minWidth: 10
+      minWidth: 10,
+      width: 160
     }), col.lookUp && React.createElement(Lookup, Object.assign({}, col.lookUp)), col.dataField === "IsActive" && React.createElement(HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -34864,9 +34748,9 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
         text: "Passive",
         value: false
       }]
-    }), React.createElement(HeaderFilter, {
-      dataSource: [].concat(filterOptions[col.dataField] || [])
-    }), col.multiLevelColumns && col.multiLevelColumns.map(function (multiLevelColItem) {
+    }), col.headerFilter && React.createElement(HeaderFilter, Object.assign({}, col.headerFilter, {
+      visible: true
+    })), col.multiLevelColumns && col.multiLevelColumns.map(function (multiLevelColItem) {
       return React.createElement(Column, {
         dataField: multiLevelColItem.dataField,
         caption: multiLevelColItem.caption,
@@ -35018,17 +34902,17 @@ var useOnContentReadyHandler = function useOnContentReadyHandler(columns, lastPa
     var currentPageIndex = dataGridInstance.pageIndex();
     var currentTotalCount = dataGridInstance.totalCount();
     var newData = dataGridInstance === null || dataGridInstance === void 0 ? void 0 : (_dataGridInstance$get = dataGridInstance.getDataSource()) === null || _dataGridInstance$get === void 0 ? void 0 : _dataGridInstance$get.items();
+    if (filterApplied) {
+      totalFilteredCount.current = currentTotalCount;
+    } else {
+      totalUnfilteredCount.current = currentTotalCount;
+    }
+    if (!filterApplied && totalFilteredCount.current === 0) {
+      totalFilteredCount.current = totalUnfilteredCount.current;
+    }
     if (lastPageIndexRef.current !== currentPageIndex && newData && newData.length > 0) {
       setCurrentPage(currentPageIndex);
       setCurrentPageSize(dataGridInstance.pageSize());
-      if (filterApplied) {
-        totalFilteredCount.current = currentTotalCount;
-      } else {
-        totalUnfilteredCount.current = currentTotalCount;
-      }
-      if (!filterApplied && totalFilteredCount.current === 0) {
-        totalFilteredCount.current = totalUnfilteredCount.current;
-      }
       setUpdateTrigger(function (prev) {
         return !prev;
       });
@@ -35276,7 +35160,8 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
       return React.createElement(Column, Object.assign({
         key: col.dataField
       }, col, {
-        minWidth: 10
+        minWidth: 10,
+        width: 160
       }), col.lookup && React.createElement(Lookup$1, Object.assign({}, col.lookup)), col.headerFilter && React.createElement(HeaderFilter, Object.assign({}, col.headerFilter, {
         visible: true,
         allowSearch: true
@@ -35368,6 +35253,193 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
   }, React.createElement("p", null, renderTotal())));
 };
 
+var useOnActionCellRenderHandler$1 = function useOnActionCellRenderHandler(visibleActionButtons, actionButtonGroup, edit, actionButtonsTooltipType) {
+  var onActionCellRender = useCallback(function (cellData) {
+    if (!cellData || !visibleActionButtons) return null;
+    var kebabMenuButtons = actionButtonGroup && actionButtonGroup.length >= 2 && !edit ? actionButtonGroup.slice(2).map(function (button) {
+      return {
+        icon: 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 = visibleActionButtons.map(function (buttonItem) {
+      var isVisible = typeof buttonItem.visible === "function" ? buttonItem.visible({
+        column: cellData.column,
+        component: cellData.component,
+        row: cellData.row
+      }) : buttonItem.visible;
+      return React.createElement(OdsDataGrdiRowButton, Object.assign({
+        key: "action-button-" + buttonItem.name,
+        name: buttonItem.name,
+        hint: buttonItem.hint,
+        visible: isVisible,
+        size: "small",
+        type: "text",
+        disabled: buttonItem.actionPermission === undefined ? false : !buttonItem.actionPermission,
+        icon: buttonItem.icon
+      }, actionButtonsTooltipType === "styled" && {
+        tooltip: buttonItem.hint
+      }, {
+        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);
+  }, [visibleActionButtons]);
+  return onActionCellRender;
+};
+
+var useOnExportingHandler$1 = function useOnExportingHandler(exportProps, getSummary, callback) {
+  var onExporting = useCallback(function (e) {
+    if (exportProps) {
+      var _exportProps$fileName, _exportProps$activeTe, _exportProps$passiveT;
+      ExportDataGridToExcel({
+        gridComponent: e.component,
+        baseFileName: (_exportProps$fileName = exportProps.fileName) != null ? _exportProps$fileName : "DataGrid",
+        selectedText: exportProps.selectedText,
+        getSummary: getSummary,
+        selectedRowsOnly: e.selectedRowsOnly,
+        activeText: (_exportProps$activeTe = exportProps.activeText) != null ? _exportProps$activeTe : "Active",
+        passiveText: (_exportProps$passiveT = exportProps.passiveText) != null ? _exportProps$passiveT : "Passive"
+      });
+    }
+    if (callback) {
+      callback(e);
+    }
+  }, [getSummary]);
+  return onExporting;
+};
+
+var MasterDetailDataGrid = function MasterDetailDataGrid(_ref) {
+  var columns = _ref.columns,
+    dataSource = _ref.dataSource,
+    _ref$masterDetailFeat = _ref.masterDetailFeatures,
+    masterDetailFeatures = _ref$masterDetailFeat === void 0 ? {} : _ref$masterDetailFeat,
+    masterDetailData = _ref.masterDetailData;
+  var visibleActionButtons = useMemo(function () {
+    if (masterDetailFeatures.masterActionButtonGroup && masterDetailFeatures.masterActionButtonGroup.length >= 2) {
+      return masterDetailFeatures.masterActionButtonGroup.slice(0, 2);
+    }
+    return masterDetailFeatures.masterActionButtonGroup || [];
+  }, [masterDetailFeatures.masterActionButtonGroup]);
+  var onActionCellRender = useOnActionCellRenderHandler$1(visibleActionButtons, masterDetailFeatures.masterActionButtonGroup);
+  var getTotalDataCount = function getTotalDataCount() {
+    return "" + dataSource.length;
+  };
+  var handleExporting = useOnExportingHandler$1(masterDetailFeatures.exportProps, getTotalDataCount);
+  var effectiveColumns = (masterDetailData === null || masterDetailData === void 0 ? void 0 : masterDetailData.detailGridColumns) || columns || (dataSource[0] ? Object.keys(dataSource[0]).map(function (key) {
+    return {
+      dataField: key,
+      caption: key.charAt(0).toUpperCase() + key.slice(1),
+      allowFiltering: true
+    };
+  }) : []);
+  return React.createElement(DataGrid$1, {
+    style: {
+      maxHeight: masterDetailFeatures.maxHeight ? masterDetailFeatures.maxHeight + "px" : "400px",
+      overflow: "auto"
+    },
+    dataSource: dataSource,
+    showBorders: true,
+    columnAutoWidth: true,
+    allowColumnReordering: true,
+    selection: {
+      mode: masterDetailFeatures.showCheckbox ? "multiple" : "none"
+    },
+    paging: {
+      enabled: true,
+      pageSize: masterDetailFeatures.pageSize || 20
+    },
+    filterRow: {
+      visible: masterDetailFeatures.createFilter
+    },
+    onExporting: handleExporting,
+    onToolbarPreparing: masterDetailFeatures.detailToolbar
+  }, effectiveColumns.map(function (col) {
+    return React.createElement(Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      headerFilter: {
+        visible: col.allowFiltering
+      }
+    }));
+  }), React.createElement(ColumnChooser, {
+    enabled: masterDetailFeatures.columnChooser,
+    mode: "select"
+  }, 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(HeaderFilter, {
+    visible: true
+  }), React.createElement(ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), (masterDetailFeatures === null || masterDetailFeatures === void 0 ? void 0 : masterDetailFeatures.exportEnabled) && React.createElement(Export, Object.assign({}, masterDetailFeatures.exportProps)), masterDetailFeatures.actionColumnEnable && React.createElement(Column, {
+    dataField: "Actions",
+    caption: "",
+    minWidth: 10,
+    width: 160,
+    fixed: true,
+    allowSorting: false,
+    type: "buttons",
+    showInColumnChooser: false,
+    cellRender: onActionCellRender
+  }), React.createElement(FilterRow, {
+    visible: masterDetailFeatures.createFilter
+  }), React.createElement(Selection, {
+    mode: masterDetailFeatures.showCheckbox ? "multiple" : "none"
+  }), React.createElement(SearchPanel, {
+    visible: masterDetailFeatures.showSearchPanel
+  }), 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"
+  })));
+};
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -37016,5 +37088,5 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-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, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer };
+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, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, MasterDetailDataGrid as OdsMasterDetailDataGrid, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer };
 //# sourceMappingURL=index.modern.js.map