ods-component-lib 1.18.238 → 1.18.239

package/dist/index.modern.js

@@ -38494,267 +38494,12 @@ 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 mapCustomTask = function mapCustomTask(item) {
-  return _extends({
-    isSelected: false
-  }, item);
-};
-var mapSelectedKeys = function mapSelectedKeys(datasource, key, selectedKeys) {
-  if (key && key != "" && selectedKeys && selectedKeys.length > 0) {
-    return datasource.map(function (x) {
-      x.isSelected = selectedKeys.some(function (y) {
-        return y == x[key];
-      });
-      return x;
-    });
-  } else {
-    return datasource;
-  }
-};
-var getTranslatedValue = function getTranslatedValue(value, translations) {
-  var _translations$find$tr, _translations$find;
-  if (translations === undefined || translations.length == 0 || isDate(value)) {
-    return value;
-  }
-  return (_translations$find$tr = (_translations$find = translations.find(function (item) {
-    return item.originalValue === value;
-  })) === null || _translations$find === void 0 ? void 0 : _translations$find.translatedValue) != null ? _translations$find$tr : value;
-};
-var getStaticColumnWidth = function getStaticColumnWidth(props) {
-  switch (props.dataType) {
-    case "boolean":
-      return 100;
-    case "date":
-    case "datetime":
-      return 150;
-    default:
-      {
-        if (props.isCheckboxColumn || props.isStatusColumn) {
-          return 100;
-        }
-        return props.width;
-      }
-  }
-};
-var findMaxDataLength = function findMaxDataLength(data, dataField) {
-  var dataLengthList = data.map(function (item) {
-    return item[dataField].length;
-  });
-  return Math.max.apply(Math, dataLengthList);
-};
-
-var OdsTimelineTableDateFilter = function OdsTimelineTableDateFilter(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",
-    allowExporting: false,
-    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, _templateObject4$5, _templateObject5$4;
-var useStyles$b = createStyles(function (_ref, props) {
-  var _props$taskWidth, _props$progressPerc, _props$progressColor;
-  var css = _ref.css;
-  var _taskWidth = (_props$taskWidth = props === null || props === void 0 ? void 0 : props.taskWidth) != null ? _props$taskWidth : 0;
-  var _progressPerc = (_props$progressPerc = props === null || props === void 0 ? void 0 : props.progressPerc) != null ? _props$progressPerc : 100;
-  var _progressColor = (_props$progressColor = props === null || props === void 0 ? void 0 : props.progressColor) != null ? _props$progressColor : "unset";
-  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      "])), _taskWidth != null ? _taskWidth : 0),
-    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      "])), _progressPerc, _progressColor, _progressColor),
-    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "]))),
-    searchBoxIcon: css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        color: #999;\n        font-size: 17px;\n        line-height: 18px;\n      "]))),
-    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        padding-left: 5px;\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 OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
-  var _props$value;
-  var _useStyles = useStyles$b(),
-    timelineTableStyles = _useStyles.styles;
-  var _useState = useState(true),
-    initialLoad = _useState[0],
-    setInitialLoad = _useState[1];
-  var _useState2 = useState((_props$value = props.value) != null ? _props$value : ""),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
-  useEffect(function () {
-    var _props$timeoutDuratio;
-    if (initialLoad) {
-      setInitialLoad(false);
-      return function () {};
-    }
-    var timeoutSearch = setTimeout(function () {
-      props.onSearch && props.onSearch(searchValue);
-    }, (_props$timeoutDuratio = props.timeoutDuration) != null ? _props$timeoutDuratio : 2000);
-    return function () {
-      return clearTimeout(timeoutSearch);
-    };
-  }, [searchValue]);
-  return React.createElement(React.Fragment, null, React.createElement(OdsInput, {
-    key: "OdsTimelineTableSearchBox_OdsSearch",
-    value: searchValue,
-    prefix: React.createElement("span", {
-      className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
-    }),
-    placeholder: props.placeholder,
-    className: timelineTableStyles.searchBox,
-    onChange: function onChange(e) {
-      return setSearchValue(e.target.value);
-    }
-  }));
+var actionColumnProps = {
+  dataField: "Actions",
+  allowExporting: false,
+  allowFiltering: false,
+  allowSorting: false,
+  dataType: "object"
 };
 
 var lodash = createCommonjsModule(function (module, exports) {
@@ -55856,96 +55601,420 @@ var lodash = createCommonjsModule(function (module, exports) {
             isUnwrapped = retUnwrapped && !chainAll,
             onlyLazy = isLazy && !isHybrid;
 
-        if (!retUnwrapped && useLazy) {
-          value = onlyLazy ? value : new LazyWrapper(this);
-          var result = func.apply(value, args);
-          result.__actions__.push({ 'func': thru, 'args': [interceptor], 'thisArg': undefined$1 });
-          return new LodashWrapper(result, chainAll);
-        }
-        if (isUnwrapped && onlyLazy) {
-          return func.apply(this, args);
-        }
-        result = this.thru(interceptor);
-        return isUnwrapped ? (isTaker ? result.value()[0] : result.value()) : result;
-      };
+        if (!retUnwrapped && useLazy) {
+          value = onlyLazy ? value : new LazyWrapper(this);
+          var result = func.apply(value, args);
+          result.__actions__.push({ 'func': thru, 'args': [interceptor], 'thisArg': undefined$1 });
+          return new LodashWrapper(result, chainAll);
+        }
+        if (isUnwrapped && onlyLazy) {
+          return func.apply(this, args);
+        }
+        result = this.thru(interceptor);
+        return isUnwrapped ? (isTaker ? result.value()[0] : result.value()) : result;
+      };
+    });
+
+    // Add `Array` methods to `lodash.prototype`.
+    arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function(methodName) {
+      var func = arrayProto[methodName],
+          chainName = /^(?:push|sort|unshift)$/.test(methodName) ? 'tap' : 'thru',
+          retUnwrapped = /^(?:pop|shift)$/.test(methodName);
+
+      lodash.prototype[methodName] = function() {
+        var args = arguments;
+        if (retUnwrapped && !this.__chain__) {
+          var value = this.value();
+          return func.apply(isArray(value) ? value : [], args);
+        }
+        return this[chainName](function(value) {
+          return func.apply(isArray(value) ? value : [], args);
+        });
+      };
+    });
+
+    // Map minified method names to their real names.
+    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
+      var lodashFunc = lodash[methodName];
+      if (lodashFunc) {
+        var key = lodashFunc.name + '';
+        if (!hasOwnProperty.call(realNames, key)) {
+          realNames[key] = [];
+        }
+        realNames[key].push({ 'name': methodName, 'func': lodashFunc });
+      }
+    });
+
+    realNames[createHybrid(undefined$1, WRAP_BIND_KEY_FLAG).name] = [{
+      'name': 'wrapper',
+      'func': undefined$1
+    }];
+
+    // Add methods to `LazyWrapper`.
+    LazyWrapper.prototype.clone = lazyClone;
+    LazyWrapper.prototype.reverse = lazyReverse;
+    LazyWrapper.prototype.value = lazyValue;
+
+    // Add chain sequence methods to the `lodash` wrapper.
+    lodash.prototype.at = wrapperAt;
+    lodash.prototype.chain = wrapperChain;
+    lodash.prototype.commit = wrapperCommit;
+    lodash.prototype.next = wrapperNext;
+    lodash.prototype.plant = wrapperPlant;
+    lodash.prototype.reverse = wrapperReverse;
+    lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = wrapperValue;
+
+    // Add lazy aliases.
+    lodash.prototype.first = lodash.prototype.head;
+
+    if (symIterator) {
+      lodash.prototype[symIterator] = wrapperToIterator;
+    }
+    return lodash;
+  });
+
+  /*--------------------------------------------------------------------------*/
+
+  // Export lodash.
+  var _ = runInContext();
+
+  // Some AMD build optimizers, like r.js, check for condition patterns like:
+  if (freeModule) {
+    // Export for Node.js.
+    (freeModule.exports = _)._ = _;
+    // Export for CommonJS support.
+    freeExports._ = _;
+  }
+  else {
+    // Export to the global object.
+    root._ = _;
+  }
+}.call(commonjsGlobal));
+});
+
+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 mapCustomTask = function mapCustomTask(item) {
+  return _extends({
+    isSelected: false
+  }, item);
+};
+var mapSelectedKeys = function mapSelectedKeys(datasource, key, selectedKeys) {
+  if (key && key != "" && selectedKeys && selectedKeys.length > 0) {
+    return datasource.map(function (x) {
+      x.isSelected = selectedKeys.some(function (y) {
+        return y == x[key];
+      });
+      return x;
+    });
+  } else {
+    return datasource;
+  }
+};
+var getTranslatedValue = function getTranslatedValue(value, translations) {
+  var _translations$find$tr, _translations$find;
+  if (translations === undefined || translations.length == 0 || isDate(value)) {
+    return value;
+  }
+  return (_translations$find$tr = (_translations$find = translations.find(function (item) {
+    return item.originalValue === value;
+  })) === null || _translations$find === void 0 ? void 0 : _translations$find.translatedValue) != null ? _translations$find$tr : value;
+};
+var getStaticColumnWidth = function getStaticColumnWidth(props) {
+  switch (props.dataType) {
+    case "boolean":
+      return 100;
+    case "date":
+    case "datetime":
+      return 150;
+    default:
+      {
+        if (props.isCheckboxColumn || props.isStatusColumn) {
+          return 100;
+        }
+        return props.width;
+      }
+  }
+};
+var findMaxDataLength = function findMaxDataLength(data, dataField) {
+  var dataLengthList = data.map(function (item) {
+    return item[dataField].length;
+  });
+  return Math.max.apply(Math, dataLengthList);
+};
+var actionCellRender = function actionCellRender(cellData, props, actionButtons) {
+  var _props$actionColumnSe = props.actionColumnSettings,
+    actionButtonGroup = _props$actionColumnSe.actionButtonGroup,
+    actionButtonsTooltipType = _props$actionColumnSe.actionButtonsTooltipType;
+  var kebabMenuButtons = actionButtonGroup && actionButtonGroup.length > 3 ? 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 = [];
+  lodash.forEach(actionButtons, function (buttonItem, index) {
+    var isVisible = typeof buttonItem.visible === "function" ? buttonItem.visible({
+      column: cellData.column,
+      component: cellData.component,
+      row: cellData.row
+    }) : buttonItem.visible;
+    buttonElements.push(React.createElement(OdsDataGrdiRowButton, Object.assign({
+      key: "action-button-" + index,
+      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) {
+        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(KebabMenuIcon, null)
+    })));
+  }
+  return React.createElement(React.Fragment, null, buttonElements);
+};
+
+var OdsTimelineTableDateFilter = function OdsTimelineTableDateFilter(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))));
+};
 
-    // Add `Array` methods to `lodash.prototype`.
-    arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function(methodName) {
-      var func = arrayProto[methodName],
-          chainName = /^(?:push|sort|unshift)$/.test(methodName) ? 'tap' : 'thru',
-          retUnwrapped = /^(?:pop|shift)$/.test(methodName);
-
-      lodash.prototype[methodName] = function() {
-        var args = arguments;
-        if (retUnwrapped && !this.__chain__) {
-          var value = this.value();
-          return func.apply(isArray(value) ? value : [], args);
-        }
-        return this[chainName](function(value) {
-          return func.apply(isArray(value) ? value : [], args);
+var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEvent) {
+  var selectionColumn = {
+    caption: "",
+    minWidth: 50,
+    width: 50,
+    dataField: "isSelected",
+    allowExporting: false,
+    cellComponent: function cellComponent(props) {
+      var onChange = function onChange(e) {
+        selectionEvent && selectionEvent({
+          data: props.data.data,
+          isSelected: e.target.checked
         });
       };
-    });
-
-    // Map minified method names to their real names.
-    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
-      var lodashFunc = lodash[methodName];
-      if (lodashFunc) {
-        var key = lodashFunc.name + '';
-        if (!hasOwnProperty.call(realNames, key)) {
-          realNames[key] = [];
-        }
-        realNames[key].push({ 'name': methodName, 'func': lodashFunc });
-      }
-    });
-
-    realNames[createHybrid(undefined$1, WRAP_BIND_KEY_FLAG).name] = [{
-      'name': 'wrapper',
-      'func': undefined$1
-    }];
-
-    // Add methods to `LazyWrapper`.
-    LazyWrapper.prototype.clone = lazyClone;
-    LazyWrapper.prototype.reverse = lazyReverse;
-    LazyWrapper.prototype.value = lazyValue;
-
-    // Add chain sequence methods to the `lodash` wrapper.
-    lodash.prototype.at = wrapperAt;
-    lodash.prototype.chain = wrapperChain;
-    lodash.prototype.commit = wrapperCommit;
-    lodash.prototype.next = wrapperNext;
-    lodash.prototype.plant = wrapperPlant;
-    lodash.prototype.reverse = wrapperReverse;
-    lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = wrapperValue;
-
-    // Add lazy aliases.
-    lodash.prototype.first = lodash.prototype.head;
-
-    if (symIterator) {
-      lodash.prototype[symIterator] = wrapperToIterator;
+      return React.createElement(OdsCheckbox, {
+        key: "odstimeline-selection-" + props.data.name,
+        style: {
+          height: "32px"
+        },
+        defaultChecked: props.data.value,
+        onChange: onChange
+      });
     }
-    return lodash;
-  });
+  };
+  return selectionColumn;
+};
 
-  /*--------------------------------------------------------------------------*/
+var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4;
+var useStyles$b = createStyles(function (_ref, props) {
+  var _props$taskWidth, _props$progressPerc, _props$progressColor;
+  var css = _ref.css;
+  var _taskWidth = (_props$taskWidth = props === null || props === void 0 ? void 0 : props.taskWidth) != null ? _props$taskWidth : 0;
+  var _progressPerc = (_props$progressPerc = props === null || props === void 0 ? void 0 : props.progressPerc) != null ? _props$progressPerc : 100;
+  var _progressColor = (_props$progressColor = props === null || props === void 0 ? void 0 : props.progressColor) != null ? _props$progressColor : "unset";
+  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      "])), _taskWidth != null ? _taskWidth : 0),
+    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      "])), _progressPerc, _progressColor, _progressColor),
+    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "]))),
+    searchBoxIcon: css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        color: #999;\n        font-size: 17px;\n        line-height: 18px;\n      "]))),
+    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        padding-left: 5px;\n      "])))
+  };
+});
 
-  // Export lodash.
-  var _ = runInContext();
+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
+  }));
+};
 
-  // Some AMD build optimizers, like r.js, check for condition patterns like:
-  if (freeModule) {
-    // Export for Node.js.
-    (freeModule.exports = _)._ = _;
-    // Export for CommonJS support.
-    freeExports._ = _;
-  }
-  else {
-    // Export to the global object.
-    root._ = _;
-  }
-}.call(commonjsGlobal));
-});
+var OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
+  var _props$value;
+  var _useStyles = useStyles$b(),
+    timelineTableStyles = _useStyles.styles;
+  var _useState = useState(true),
+    initialLoad = _useState[0],
+    setInitialLoad = _useState[1];
+  var _useState2 = useState((_props$value = props.value) != null ? _props$value : ""),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  useEffect(function () {
+    var _props$timeoutDuratio;
+    if (initialLoad) {
+      setInitialLoad(false);
+      return function () {};
+    }
+    var timeoutSearch = setTimeout(function () {
+      props.onSearch && props.onSearch(searchValue);
+    }, (_props$timeoutDuratio = props.timeoutDuration) != null ? _props$timeoutDuratio : 2000);
+    return function () {
+      return clearTimeout(timeoutSearch);
+    };
+  }, [searchValue]);
+  return React.createElement(React.Fragment, null, React.createElement(OdsInput, {
+    key: "OdsTimelineTableSearchBox_OdsSearch",
+    value: searchValue,
+    prefix: React.createElement("span", {
+      className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
+    }),
+    placeholder: props.placeholder,
+    className: timelineTableStyles.searchBox,
+    onChange: function onChange(e) {
+      return setSearchValue(e.target.value);
+    }
+  }));
+};
 
 var OdsTimelineTable = forwardRef(function (props, ref) {
   var _toolbarSettings$sear, _toolbarSettings$sear5, _toolbarSettings$expo6, _toolbarSettings$expo7;
@@ -55960,6 +56029,7 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     sorting = props.sorting,
     sortingProcess = props.sortingProcess,
     toolbarSettings = props.toolbarSettings,
+    actionColumnSettings = props.actionColumnSettings,
     onCustomSelectionChanged = props.onCustomSelectionChanged,
     onDateRangeChange = props.onDateRangeChange,
     onSortingChanged = props.onSortingChanged;
@@ -55996,6 +56066,17 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
   useEffect(function () {
     updateExportableTasks();
   }, [timelineTasks]);
+  var actionButtons = useMemo(function () {
+    if (actionColumnSettings.actionButtonGroup) {
+      if (actionColumnSettings.actionButtonGroup.length > 3) {
+        return actionColumnSettings.actionButtonGroup.slice(0, 2);
+      } else {
+        return actionColumnSettings.actionButtonGroup;
+      }
+    } else {
+      return [];
+    }
+  }, [actionColumnSettings.actionButtonGroup]);
   var updateExportableTasks = function updateExportableTasks() {
     var result = [];
     lodash.forEach(timelineTasks, function (item) {
@@ -56214,6 +56295,9 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
       return exportableTasks.length > 0 && item.width === undefined && item.dataType != "boolean" && item.dataType != "date" && item.dataType != "datetime" && !item.isCheckboxColumn && !item.isStatusColumn;
     };
     var getNewWidth = function getNewWidth(item) {
+      if (item.dataField === undefined || item.dataField == "") {
+        return item.width;
+      }
       var maxLength = findMaxDataLength(exportableTasks, item.dataField);
       return maxLength <= 10 ? 100 : maxLength * 10;
     };
@@ -56311,7 +56395,13 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
         }
       }, columnProps));
     }
-  }), React.createElement(Tasks, {
+  }), actionColumnSettings.actionColumnEnable != false ? React.createElement(Column$1, Object.assign({}, actionColumnProps, {
+    caption: actionColumnSettings.actionButtonGroupCaption,
+    cssClass: "actionButtonGroupCell",
+    cellRender: function cellRender(cellData) {
+      return actionCellRender(cellData, props, actionButtons);
+    }
+  })) : "", React.createElement(Tasks, {
     dataSource: timelineTasks
   }), children, React.createElement(Sorting$1, {
     mode: sortingMode,