ods-component-lib 1.18.231 → 1.18.233

package/dist/index.modern.js

@@ -1,9 +1,9 @@
 import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Collapse, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, theme, Badge, ConfigProvider, Menu, Form as Form$1, Row, Col, Upload, Tooltip as Tooltip$1, Transfer, Progress, Tree, TreeSelect } from 'antd';
 import styled, { ThemeProvider } from 'styled-components';
-import React, { useState, useRef, useEffect, useCallback, Suspense, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useCallback, Suspense, useMemo, forwardRef, useImperativeHandle } from 'react';
 import Marquee from 'react-fast-marquee';
 import Card from 'antd/es/card/Card';
-import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, PlusOutlined, InfoCircleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, PlusOutlined, InfoCircleOutlined, CheckOutlined, CloseOutlined, CheckCircleFilled, LeftCircleFilled, RightCircleFilled } 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';
@@ -21,6 +21,7 @@ import { TreeList, Lookup, DataGrid as DataGrid$2, Toolbar as Toolbar$1 } from '
 import { createStyles } from 'antd-style';
 import { saveAs as saveAs$1 } from 'file-saver';
 import 'devextreme/dist/css/dx.light.css';
+import { Gantt, Toolbar as Toolbar$2, Item as Item$2, ContextMenu, Column as Column$1, Tasks } from 'devextreme-react/gantt';
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -37824,14 +37825,6 @@ var useStyles$a = createStyles(function (_ref) {
   };
 });
 
-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 getMultiLevelColumns$1 = function getMultiLevelColumns(col) {
   return col.multiLevelColumns && col.multiLevelColumns.map(function (colItem) {
     return React.createElement(Column, Object.assign({
@@ -38030,31 +38023,12 @@ OdsMergeCellDataGridHelper.getInstance = function () {
 var useToken$2 = theme.useToken;
 var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _props$columnResizing, _props$className, _props$selection, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
-  var ref = props.ref,
+  var refGrid = props.refGrid,
     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,
-    onCellPrepared = props.onCellPrepared,
-    detailGridColumns = props.detailGridColumns,
-    detailData = props.detailData,
-    masterDetailFeatures = props.masterDetailFeatures;
+    onCellPrepared = props.onCellPrepared;
   var _useToken = useToken$2(),
     token = _useToken.token;
-  var _AntForm$useForm = Form$1.useForm(),
-    fastUpdateForm = _AntForm$useForm[0];
-  var gridRef = ref != null ? ref : useRef(null);
   var helper = OdsMergeCellDataGridHelper.getInstance();
-  var pkName = keyExpr && keyExpr.toString();
   var _useState = useState(false),
     render = _useState[0],
     rerender = _useState[1];
@@ -38064,24 +38038,9 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _useState3 = useState([]),
     data = _useState3[0],
     setData = _useState3[1];
-  var _useState4 = useState(false),
-    isFastUpdateModalOpen = _useState4[0],
-    setIsFastUpdateModalOpen = _useState4[1];
-  var _useState5 = useState([]),
-    selectedCells = _useState5[0],
-    setSelectedCells = _useState5[1];
-  var _useState6 = useState([]),
-    hoveredCells = _useState6[0],
-    setHoveredCells = _useState6[1];
-  var _useState7 = useState([]),
-    ctrlSelectedCells = _useState7[0],
-    setCtrlSelectedCells = _useState7[1];
-  var _useState8 = useState(false),
-    ctrlSelection = _useState8[0],
-    setCtrlSelection = _useState8[1];
-  var _useState9 = useState([]),
-    mergedCellInfo = _useState9[0],
-    setMergedCellInfo = _useState9[1];
+  var _useState4 = useState([]),
+    mergedCellInfo = _useState4[0],
+    setMergedCellInfo = _useState4[1];
   var _useStyles = useStyles$a(),
     gridStyle = _useStyles.styles;
   useEffect(function () {
@@ -38124,121 +38083,10 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   useEffect(function () {
     locale(localStorage.getItem("locale"));
     loadMessages(JSON.parse(localStorage.getItem("localTranslation")));
-    if (gridRef.current) {
-      gridRef.current.instance.updateDimensions();
+    if (refGrid !== null && refGrid !== void 0 && refGrid.current) {
+      refGrid.current.instance.updateDimensions();
     }
-    hasFastUpdate && document.addEventListener("keydown", keydownEvent);
-    return function () {
-      hasFastUpdate && document.removeEventListener("keydown", keydownEvent);
-    };
   }, []);
-  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$2.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 > 3 && !props.edit) {
@@ -38250,18 +38098,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       return [];
     }
   }, [props.actionButtonGroup]);
-  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 customLoad = useCallback(function () {
     var state = JSON.parse(localStorage.getItem(props.exportFileName + "Storage"));
     if (localStorage.getItem(props.exportFileName + "Storage")) {
@@ -38288,21 +38124,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }
     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" || 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;
-      }
-    }
-  }, []);
   function actionCellRender(cellData, props) {
     var kebabMenuButtons = props.actionButtonGroup && props.actionButtonGroup.length > 3 && !props.edit ? props.actionButtonGroup.slice(2).map(function (button) {
       return {
@@ -38399,95 +38220,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }
     return React.createElement(React.Fragment, null, buttonElements);
   }
-  var onCustomCellClick = function onCustomCellClick(e) {
-    if (hasFastUpdate) {
-      if (checkCellSelectionConstraints$1(e) && constants$2.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$2.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 isDifferentDataField = e.column.type == "selection" || e.column.dataField == dataFieldNameActions;
     if (e.rowType === "data" && e.columnIndex >= 0 && e.rowIndex >= 0 && (props.mergeDataFields.some(function (x) {
       return x == e.column.dataField;
@@ -38612,81 +38345,23 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       });
     }
   };
-  var renderMasterDetailGrid = useCallback(function (_ref) {
-    var _dataSource$data;
-    var dataSource = _ref.data;
-    var detailID = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$data = dataSource.data) === null || _dataSource$data === void 0 ? void 0 : _dataSource$data.ID;
-    if (!detailID || !(detailData !== null && detailData !== void 0 && detailData[detailID])) {
-      return null;
-    }
-    return React.createElement(MasterDetailDataGrid, {
-      columns: detailGridColumns,
-      dataSource: detailData[detailID],
-      masterDetailFeatures: masterDetailFeatures
-    });
-  }, [detailGridColumns, detailData, masterDetailFeatures]);
   var checkIsPropArray = function checkIsPropArray(prop) {
     return prop && Array.isArray(prop);
   };
-  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$2.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, Object.assign({
+  return React.createElement(React.Fragment, null, React.createElement(DataGrid$1, Object.assign({
     keyExpr: keyExpr,
     dataSource: data,
     showBorders: true,
     columnAutoWidth: false,
-    ref: gridRef,
+    ref: refGrid,
     height: props.height == undefined ? window.innerHeight - 164 : props.height,
     allowColumnResizing: true,
     columnResizingMode: (_props$columnResizing = props.columnResizingMode) != null ? _props$columnResizing : "widget",
     showRowLines: true,
     allowColumnReordering: true,
-    remoteOperations: false,
+    remoteOperations: {
+      sorting: true
+    },
     paging: {
       enabled: false
     },
@@ -38707,18 +38382,13 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       mode: "multiple",
       selectAllMode: "page"
     },
-    sorting: {
-      mode: "none"
-    },
-    onEditorPreparing: onEditorPreparing,
     onExporting: handleExporting,
     onRowClick: props.onRowClick,
-    onEditorPrepared: onEditorPrepared,
     onSaved: props.onSaved,
     onSaving: props.onSaving,
     onEditCanceling: props.onEditCanceling,
-    onCellClick: onCustomCellClick,
-    onCellHoverChanged: onCustomCellHoverChanged,
+    onCellClick: props.onCellClick,
+    onCellHoverChanged: props.onCellHoverChanged,
     onCellPrepared: onCustomCellPrepared,
     onOptionChanged: props.onOptionChanged,
     onToolbarPreparing: !props.closeGridHeader && (props.onToolbarPreparing || onToolbarPreparing),
@@ -38729,7 +38399,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }, col, {
       minWidth: 50,
       width: props.isColumnWidthFixed === true ? 160 : undefined,
-      cssClass: col.cssClass + " " + (hasFastUpdate ? "grid-cell-disable-text-selection" : "")
+      cssClass: col.cssClass
     }), col.lookUp && React.createElement(Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React.createElement(HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -38762,32 +38432,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     cellRender: function cellRender(cellData) {
       return actionCellRender(cellData, props);
     }
-  }), props.showMasterDetail && React.createElement(MasterDetail, {
-    enabled: true,
-    component: renderMasterDetailGrid
-  }), 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, {
+  }), React.createElement(Paging, {
     enabled: false
   }), React.createElement(Pager, {
     visible: false
@@ -38802,7 +38447,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   }), React.createElement(HeaderFilter, {
     visible: true
   }), React.createElement(Sorting, {
-    mode: "none"
+    mode: "multiple"
   }), !props.closeGridHeader && React.createElement(Export, {
     enabled: true,
     allowExportSelectedData: true,
@@ -38834,10 +38479,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   }), 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(StateStoring, {
+  })), React.createElement(StateStoring, {
     enabled: true,
     type: "custom",
     customLoad: customLoad,
@@ -38845,6 +38487,316 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   })));
 };
 
+var currentYear = new Date().getFullYear();
+var Constants = {
+  timelineDefaultStartDate: new Date(currentYear, 0, 1),
+  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
+};
+
+var checkboxCellComponent = function checkboxCellComponent(props) {
+  var isChecked = props.data.value;
+  var onChange = function onChange(e) {
+    props.data.column.onCheckboxColumnChange({
+      data: props.data.data,
+      dataField: props.data.column.dataField,
+      isChecked: e.target.checked
+    });
+  };
+  return React.createElement(OdsCheckbox, {
+    key: "odstimeline-checkboxcolumn-" + props.data.name,
+    style: {
+      height: "32px"
+    },
+    defaultChecked: isChecked,
+    onChange: onChange
+  });
+};
+var statusCellComponent = function statusCellComponent(props) {
+  var isActive = props.data.value;
+  var _onClick = function onClick(value) {
+    props.data.column.onStatusColumnChange({
+      data: props.data.data,
+      dataField: props.data.column.dataField,
+      status: value
+    });
+  };
+  return isActive ? React.createElement(CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#568B6B"
+    },
+    onClick: function onClick() {
+      return _onClick(false);
+    }
+  }) : React.createElement(CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#EDEDED"
+    },
+    onClick: function onClick() {
+      return _onClick(true);
+    }
+  });
+};
+var minimalHeaderCellComponent = function minimalHeaderCellComponent(data, __el) {
+  return React.createElement("div", {
+    className: "minimalHeaderCell"
+  }, data.data.column.caption);
+};
+var mapCustomTask = function mapCustomTask(item) {
+  return _extends({
+    isSelected: false
+  }, item);
+};
+var setSelectedKeys = function setSelectedKeys(datasource, key, selectedKeys) {
+  if (key && key != "" && selectedKeys && selectedKeys.length > 0) {
+    return datasource.map(function (x) {
+      if (selectedKeys.some(function (y) {
+        return y == x[key];
+      })) {
+        x.isSelected = true;
+      }
+      return x;
+    });
+  } else {
+    return datasource;
+  }
+};
+
+var OdsTimelineDateFilter = function OdsTimelineDateFilter(props) {
+  var defaultStartDate = props.defaultStartDate,
+    defaultEndDate = props.defaultEndDate,
+    backText = props.backText,
+    nextText = props.nextText,
+    onFilterRangeChange = props.onFilterRangeChange;
+  var _useState = useState([dayjs_min(defaultStartDate), dayjs_min(defaultEndDate)]),
+    dateRange = _useState[0],
+    setDateRange = _useState[1];
+  var startDate = dateRange[0].toDate();
+  var endDate = dateRange[1].toDate();
+  var onPickerValueChange = function onPickerValueChange(date) {
+    var newStartDate = date[0].toDate(),
+      newEndDate = date[1].toDate();
+    (newStartDate != startDate || newEndDate != endDate) && onFilterRangeChange({
+      startDate: newStartDate,
+      endDate: newEndDate
+    });
+    setDateRange(date);
+  };
+  var buttonClick = function buttonClick(monthDirection) {
+    var newStartDate = startDate,
+      newEndDate = endDate,
+      currentStartYear = startDate.getFullYear(),
+      currentStartMonth = startDate.getMonth(),
+      currentEndYear = endDate.getFullYear(),
+      currentEndMonth = endDate.getMonth();
+    switch (monthDirection) {
+      case "previousMonth":
+        newStartDate.setMonth(currentStartMonth == 0 ? 11 : currentStartMonth - 1);
+        newStartDate.setFullYear(currentStartMonth == 0 ? currentStartYear - 1 : currentStartYear);
+        break;
+      case "nextMonth":
+        newEndDate.setMonth(currentEndMonth == 11 ? 0 : currentEndMonth + 1);
+        newEndDate.setFullYear(currentEndMonth == 11 ? currentEndYear + 1 : currentEndYear);
+        break;
+    }
+    setDateRange([dayjs_min(newStartDate), dayjs_min(newEndDate)]);
+    onFilterRangeChange({
+      startDate: newStartDate,
+      endDate: newEndDate
+    });
+  };
+  return React.createElement(React.Fragment, null, React.createElement(Space, null, React.createElement(OdsButton, {
+    key: "odsbutton-back",
+    onClick: function onClick(_e) {
+      buttonClick("previousMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, React.createElement(LeftCircleFilled, null), backText != null ? backText : "Back"), React.createElement(OdsDateRangePicker, {
+    defaultValue: [dayjs_min(defaultStartDate), dayjs_min(defaultEndDate)],
+    value: dateRange,
+    onPickerValueChange: onPickerValueChange
+  }), React.createElement(OdsButton, {
+    key: "odsbutton-next",
+    onClick: function onClick(_e) {
+      buttonClick("nextMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, nextText != null ? nextText : "Next", React.createElement(RightCircleFilled, null))));
+};
+
+var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEvent) {
+  var selectionColumn = {
+    caption: "",
+    minWidth: 50,
+    width: 50,
+    dataField: "isSelected",
+    cellComponent: function cellComponent(props) {
+      var onChange = function onChange(e) {
+        selectionEvent && selectionEvent({
+          data: props.data.data,
+          isSelected: e.target.checked
+        });
+      };
+      return React.createElement(OdsCheckbox, {
+        key: "odstimeline-selection-" + props.data.name,
+        style: {
+          height: "32px"
+        },
+        defaultChecked: props.data.value,
+        onChange: onChange
+      });
+    }
+  };
+  return selectionColumn;
+};
+
+var _templateObject$B, _templateObject2$9, _templateObject3$6;
+var useStyles$b = createStyles(function (_ref, props) {
+  var css = _ref.css;
+  return {
+    taskBar: css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n        min-height: 22px;\n        display: block;\n        overflow: hidden;\n        width: ", "px;\n        border: 1px solid #f0f0f0;\n        border-radius: 5px;\n        background-color: #f0f0f0;\n      "])), props.taskWidth),
+    taskProgress: css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: ", "%;\n        border: 1px solid ", ";\n        border-radius: 5px;\n        background-color: ", ";\n      "])), props.progressPerc, props.progressColor, props.progressColor),
+    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "])))
+  };
+});
+
+var OdsTimelineTableTaskTemplate = function OdsTimelineTableTaskTemplate(_ref) {
+  var taskData = _ref.taskData,
+    taskSize = _ref.taskSize;
+  var _useStyles = useStyles$b({
+      progressColor: taskData.color,
+      progressPerc: taskData.progress,
+      taskWidth: taskSize.width
+    }),
+    timelineTableStyles = _useStyles.styles;
+  return React.createElement("div", {
+    className: timelineTableStyles.taskBar
+  }, React.createElement("span", {
+    className: timelineTableStyles.taskBarTitle
+  }, taskData.title), React.createElement("div", {
+    className: timelineTableStyles.taskProgress
+  }));
+};
+
+var OdsTimelineTable = forwardRef(function (props, ref) {
+  var customColumns = props.customColumns,
+    customTasks = props.customTasks,
+    customTaskKey = props.customTaskKey,
+    customSelectedKeys = props.customSelectedKeys,
+    children = props.children,
+    startDateRange = props.startDateRange,
+    endDateRange = props.endDateRange,
+    multiSelectionEnabled = props.multiSelectionEnabled,
+    toolbarVisible = props.toolbarVisible,
+    showDateFilter = props.showDateFilter,
+    onCustomSelectionChanged = props.onCustomSelectionChanged,
+    onDateRangeChange = props.onDateRangeChange;
+  var _useState = useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
+    startDate = _useState[0],
+    setStartDate = _useState[1];
+  var _useState2 = useState(endDateRange != null ? endDateRange : Constants.timelineDefaultEndDate),
+    endDate = _useState2[0],
+    setEndDate = _useState2[1];
+  var _useState3 = useState([]),
+    timelineTasks = _useState3[0],
+    setTimelineTasks = _useState3[1];
+  useEffect(function () {
+    setTimelineTasks(multiSelectionEnabled ? setSelectedKeys(customTasks.map(mapCustomTask), customTaskKey, customSelectedKeys) : customTasks);
+  }, [customTasks]);
+  var getSelectedRowsData = function getSelectedRowsData() {
+    return timelineTasks.filter(function (item) {
+      return item.isSelected == true;
+    });
+  };
+  var updateSelectionData = function updateSelectionData(keyValue, isSelected) {
+    setTimelineTasks(function (prev) {
+      return prev.map(function (item) {
+        if (item[props.customTaskKey] == keyValue) {
+          item.isSelected = isSelected;
+        }
+        return item;
+      });
+    });
+  };
+  var onTimelineDateRangeChange = function onTimelineDateRangeChange(e) {
+    setStartDate(e.startDate);
+    setEndDate(e.endDate);
+    onDateRangeChange && onDateRangeChange({
+      startDate: e.startDate,
+      endDate: e.endDate
+    });
+  };
+  var onTimelineCheckboxSelectionChange = function onTimelineCheckboxSelectionChange(e) {
+    updateSelectionData(e.data[props.customTaskKey], e.isSelected);
+    onCustomSelectionChanged && onCustomSelectionChanged(e);
+  };
+  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
+  useImperativeHandle(ref, function () {
+    return {
+      getSelectedRowsData: getSelectedRowsData
+    };
+  });
+  return React.createElement(React.Fragment, null, React.createElement(Gantt, Object.assign({
+    width: "100%",
+    height: 500,
+    startDateRange: startDate,
+    endDateRange: endDate,
+    taskContentRender: function taskContentRender(params) {
+      return React.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
+    }
+  }, props), toolbarVisible ? React.createElement(Toolbar$2, null, showDateFilter ? React.createElement(Item$2, {
+    key: "OdsTimelineTable_ToolbarItem_DateFilter",
+    component: function component(props) {
+      return OdsTimelineDateFilter(_extends({}, props, {
+        defaultStartDate: startDate,
+        defaultEndDate: endDate,
+        onFilterRangeChange: onTimelineDateRangeChange
+      }));
+    }
+  }) : "", React.createElement(Item$2, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomIn",
+    name: "zoomIn"
+  }), React.createElement(Item$2, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomOut",
+    name: "zoomOut"
+  })) : "", React.createElement(ContextMenu, {
+    enabled: false
+  }), timelineColumns === null || timelineColumns === void 0 ? void 0 : timelineColumns.map(function (columnProps) {
+    if (columnProps.isStatusColumn) {
+      return React.createElement(Column$1, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: statusCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else if (columnProps.isCheckboxColumn) {
+      return React.createElement(Column$1, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: checkboxCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else {
+      return React.createElement(Column$1, Object.assign({
+        headerCellComponent: columnProps.isMinimized && minimalHeaderCellComponent
+      }, columnProps));
+    }
+  }), React.createElement(Tasks, {
+    dataSource: timelineTasks
+  }), children));
+});
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -39354,10 +39306,10 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-var checkCellSelectionConstraints$2 = function checkCellSelectionConstraints(e) {
+var checkCellSelectionConstraints$1 = function checkCellSelectionConstraints(e) {
   return e.rowType == "data" && e.columnIndex > -1 && e.rowIndex > -1;
 };
-var cellAlreadySelected$2 = function cellAlreadySelected(pkValue, dataField, cellInfos) {
+var cellAlreadySelected$1 = function cellAlreadySelected(pkValue, dataField, cellInfos) {
   return cellInfos.some(function (cell) {
     return cell.pkValue == pkValue && cell.dataField == dataField;
   });
@@ -40139,11 +40091,11 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var onCustomCellClick = function onCustomCellClick(e) {
     e.cellElement.style.backgroundColor = "transparent";
     if (hasFastUpdate) {
-      if (checkCellSelectionConstraints$2(e) && constants$3.allowedDataTypesForMultiCellEditing.some(function (item) {
+      if (checkCellSelectionConstraints$1(e) && constants$3.allowedDataTypesForMultiCellEditing.some(function (item) {
         return item.toLocaleLowerCase() == e.column.dataType.toLocaleLowerCase();
       })) {
         if (!e.event.ctrlKey) {
-          if (cellAlreadySelected$2(e.data[pkName], e.column.dataField, selectedCells)) {
+          if (cellAlreadySelected$1(e.data[pkName], e.column.dataField, selectedCells)) {
             removeSelectedCell(e.rowIndex, e.columnIndex);
           } else {
             singleSelect(e.data[pkName], e.column.dataField);
@@ -40171,7 +40123,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var onCustomCellHoverChanged = function onCustomCellHoverChanged(e) {
     if (hasFastUpdate) {
       if (!e.event.ctrlKey && !ctrlSelection) {
-        if (checkCellSelectionConstraints$2(e)) {
+        if (checkCellSelectionConstraints$1(e)) {
           if (e.event.buttons === 1) {
             setHoveredCells(function (prev) {
               return [].concat(prev, [{
@@ -40501,5 +40453,5 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, CabinGrid as OdsCabinGrid, OdsCalendar, OdsCard, OdsChange$1 as OdsChange, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsCurrencyInput, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFileUploadv2, OdsFilter, OdsFilterPlus, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, MasterDetailDataGrid as OdsMasterDetailDataGrid, OdsMergeCellDataGrid, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProgress, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer, OdsTreeListMenu, OdsTreeSelect };
+export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, CabinGrid as OdsCabinGrid, OdsCalendar, OdsCard, OdsChange$1 as OdsChange, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsCurrencyInput, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFileUploadv2, OdsFilter, OdsFilterPlus, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, MasterDetailDataGrid as OdsMasterDetailDataGrid, OdsMergeCellDataGrid, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProgress, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimelineTable, OdsTimepicker, OdsTitle, OdsTransfer, OdsTreeListMenu, OdsTreeSelect };
 //# sourceMappingURL=index.modern.js.map