ods-component-lib 1.18.242 → 1.18.244

package/dist/components/devextreme/OdsMergeCellDataGrid/OdsMergeCellDataGrid.Types.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { ButtonType } from "antd/es/button/buttonHelpers";
 import { IButtonProps, IDataGridOptions, IEditingProps, ISelectionProps, ISummaryProps } from "devextreme-react/data-grid";
-import { ITooltipType } from "../../../utils/customTypes";
+import { ISortedColumn, ITooltipType } from "../../../utils/customTypes";
 import { IColumnOptions, IMasterDetailDatas, IMasterDetailFeatures } from "../OdsMasterDetailDataGrid/types";
 export declare type SummaryTypes = "avg" | "count" | "custom" | "max" | "min" | "sum";
 interface IExportProps {
@@ -47,6 +47,7 @@ export interface IOdsDataGridProps extends IDataGridOptions {
     masterDetailFeatures?: IMasterDetailFeatures;
     DetailGridComponent?: React.FC<any>;
     mergeDataFields: string[];
+    onSortingChanged?(sortedColumns: ISortedColumn[], headerCellProps?: any): void;
 }
 export interface ISummaryRowOptions {
     summaryLoadedDataLabel?: string;

package/dist/components/devextreme/OdsMergeCellDataGrid/OdsMergeCellDataGrid.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "./OdsMergeCellDataGrid.css";
 import { IOdsDataGridProps } from "./OdsMergeCellDataGrid.Types";
-declare const OdsMergeCellDataGrid: (props: IOdsDataGridProps) => React.JSX.Element;
+declare const OdsMergeCellDataGrid: React.ForwardRefExoticComponent<IOdsDataGridProps & React.RefAttributes<unknown>>;
 export default OdsMergeCellDataGrid;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Style.d.ts

@@ -12,4 +12,6 @@ export declare const useStyles: (props?: {
     columnChooserHeader: import("antd-style").SerializedStyles;
     columnChooserCloseButton: import("antd-style").SerializedStyles;
     columnChooserDivider: import("antd-style").SerializedStyles;
+    columnChooserCheckbox: import("antd-style").SerializedStyles;
+    columnChooserSearchbox: import("antd-style").SerializedStyles;
 }>;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IColumnProps, IGanttOptions, IItemProps } from "devextreme-react/gantt";
-import { ExportDocumentType, ITooltipType, SortingProcessType, SortingType } from "../../../utils/customTypes";
+import { ExportDocumentType, ISortedColumn, ITooltipType, SortingProcessType } from "../../../utils/customTypes";
 import { IButtonProps } from "devextreme-react/data-grid";
 import { ButtonType } from "antd/es/button/buttonHelpers";
 export declare type SortingMode = "single" | "multiple" | "none";
@@ -98,6 +98,7 @@ export interface IButtonGroup extends Omit<IButtonProps, "icon"> {
     onclick?: React.MouseEventHandler<HTMLElement>;
 }
 export interface IOdsTimelineTableColumnProps extends IColumnProps {
+    name: string;
     isMinimized?: boolean;
     isStatusColumn?: boolean;
     isCheckboxColumn?: boolean;
@@ -110,12 +111,6 @@ export interface IOdsTimelineTableStatusColumnProps extends IOdsTimelineTableCol
 export interface IOdsTimelineCheckboxColumnProps extends IOdsTimelineTableColumnProps {
     onCheckboxColumnChange(e: ICheckboxColumnChange): void;
 }
-export interface ISortedColumn {
-    sortingFieldName: string;
-    sortType: SortingType;
-    sortIndex: number;
-    sortingText: string;
-}
 export interface IOdsTimelineTableToolbarSettings {
     visible?: boolean;
     location?: "before" | "after";
@@ -134,6 +129,8 @@ export interface IOdsTimelineTableToolbarSettings {
     columnChooser?: {
         visible?: boolean;
         title?: string;
+        selectAllText: string;
+        onSelection?(items: string[], isSelected: boolean): void;
     };
     dateFilterVisible?: boolean;
     zoomVisible?: boolean;
@@ -157,6 +154,12 @@ export interface ITranslationValue {
 }
 export interface IOdsTimelineTableColumnChooserProps {
     title: string;
-    items: string[];
-    onSelection?(selectedItems: string[], selectedItem?: string, deselectedItem?: string): void;
+    selectAllText: string;
+    items: IOdsTimelineTableColumnChooserItemProps[];
+    onSelection?(items: string[], isSelected: boolean): void;
+}
+export interface IOdsTimelineTableColumnChooserItemProps {
+    columnName: string;
+    columnCaption: string;
+    visible: boolean;
 }

package/dist/index.css

@@ -223,6 +223,22 @@ tr._2CvVM._3Xrp3._19iuB._3udtX {
     pointer-events: none;
     background-color: #f0f0f0;
 }
+._1Y6Xh:has(._1XPxo) {
+  width: 100%;
+}
+
+._1XPxo {
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+._17w-X {
+  flex: 1;
+  align-content: center;
+}
+
 ._3lbve {
   writing-mode: vertical-lr;
 }

package/dist/index.js

@@ -38049,7 +38049,7 @@ OdsMergeCellDataGridHelper.getInstance = function () {
 };
 
 var useToken$2 = antd.theme.useToken;
-var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
+var OdsMergeCellDataGrid = React.forwardRef(function (props, ref) {
   var _props$columnResizing, _props$className, _props$selection, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
   var refGrid = props.refGrid,
     keyExpr = props.keyExpr,
@@ -38069,6 +38069,12 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _useState4 = React.useState([]),
     mergedCellInfo = _useState4[0],
     setMergedCellInfo = _useState4[1];
+  var _useState5 = React.useState({
+      sortedColumns: [],
+      columnHeaderProps: null
+    }),
+    sortingChangeEventProps = _useState5[0],
+    setSortingChangeEventProps = _useState5[1];
   var _useStyles = useStyles$a(),
     gridStyle = _useStyles.styles;
   React.useEffect(function () {
@@ -38114,6 +38120,11 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       refGrid.current.instance.updateDimensions();
     }
   }, []);
+  React.useEffect(function () {
+    if (sortingChangeEventProps.columnHeaderProps !== null) {
+      props.onSortingChanged && props.onSortingChanged(sortingChangeEventProps.sortedColumns, sortingChangeEventProps.columnHeaderProps);
+    }
+  }, [sortingChangeEventProps]);
   var actionButtons = React.useMemo(function () {
     if (props.actionButtonGroup) {
       if (props.actionButtonGroup.length > 3 && !props.edit) {
@@ -38375,6 +38386,112 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var checkIsPropArray = function checkIsPropArray(prop) {
     return prop && Array.isArray(prop);
   };
+  var customClearSorting = function customClearSorting() {
+    setSortingChangeEventProps(function (prev) {
+      return _extends({}, prev, {
+        sortedColumns: []
+      });
+    });
+    props.onSortingChanged && props.onSortingChanged([], undefined);
+  };
+  var getSortedColumns = function getSortedColumns() {
+    return sortingChangeEventProps.sortedColumns;
+  };
+  var customHeaderCellComponent = function customHeaderCellComponent(props) {
+    if (props.data.column.allowSorting) {
+      return React__default.createElement("div", {
+        className: "sortingHeaderCell",
+        onClick: function onClick(e) {
+          if (Boolean(props.data.column.allowSorting)) {
+            if (e.shiftKey === true && e.ctrlKey === false) {
+              onSorting(props.data, 2);
+            } else if (e.shiftKey === false && e.ctrlKey === false) {
+              onSorting(props.data, 1);
+            } else if (e.shiftKey === false && e.ctrlKey === true) {
+              onRemoveSorting(props.data);
+            }
+          }
+        }
+      }, React__default.createElement("span", {
+        className: "headerCaption"
+      }, props.data.column.caption), getSortIcon(props.data.column));
+    }
+    return React__default.createElement("div", null, props.data.column.caption);
+  };
+  var getSortIcon = function getSortIcon(column) {
+    var sortingFieldName = getSortingFieldName(column);
+    var sortedColumn = sortingChangeEventProps.sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn) {
+      return sortedColumn.sortType === "ASC" ? React__default.createElement(outline.UpArrow2Icon, null) : React__default.createElement(outline.DownArrow2Icon, null);
+    }
+    return undefined;
+  };
+  var getSortingFieldName = function getSortingFieldName(column) {
+    var _column$sortingFieldN;
+    return (_column$sortingFieldN = column.sortingFieldName) != null ? _column$sortingFieldN : column.dataField;
+  };
+  var onSorting = function onSorting(headerCellProps, sortingMode) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortingChangeEventProps.sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    var prevSortIndex = sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sortIndex;
+    var newSortedColumn = {
+      sortingFieldName: sortingFieldName,
+      sortType: "ASC",
+      sortIndex: sortingMode == 2 ? sortedColumn === undefined ? sortingChangeEventProps.sortedColumns.length : sortingChangeEventProps.sortedColumns.length - 1 : 0,
+      sortingText: sortingFieldName + " ASC"
+    };
+    if (sortedColumn) {
+      newSortedColumn.sortType = sortedColumn.sortType == "ASC" ? "DESC" : "ASC";
+      newSortedColumn.sortingText = sortingFieldName + " " + newSortedColumn.sortType;
+    }
+    var newSortedColumns = sortingMode == 2 ? [].concat(sortingChangeEventProps.sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }), [newSortedColumn]) : [newSortedColumn];
+    if (sortingMode == 2 && sortedColumn !== undefined) {
+      newSortedColumns = newSortedColumns.map(function (item) {
+        if (item.sortingFieldName != sortingFieldName && item.sortIndex > prevSortIndex) {
+          item.sortIndex = item.sortIndex - 1;
+        }
+        return item;
+      });
+    }
+    setSortingChangeEventProps({
+      sortedColumns: newSortedColumns,
+      columnHeaderProps: headerCellProps
+    });
+  };
+  var onRemoveSorting = function onRemoveSorting(headerCellProps) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortingChangeEventProps.sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn === undefined) {
+      return;
+    }
+    var prevSortIndex = sortedColumn.sortIndex;
+    var newSortedColumns = sortingChangeEventProps.sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }).map(function (item) {
+      if (item.sortIndex > prevSortIndex) {
+        item.sortIndex = item.sortIndex - 1;
+      }
+      return item;
+    });
+    setSortingChangeEventProps({
+      sortedColumns: newSortedColumns,
+      columnHeaderProps: headerCellProps
+    });
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      getSortedColumns: getSortedColumns,
+      customClearSorting: customClearSorting
+    };
+  });
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(DataGrid__default, Object.assign({
     keyExpr: keyExpr,
     dataSource: data,
@@ -38386,9 +38503,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     columnResizingMode: (_props$columnResizing = props.columnResizingMode) != null ? _props$columnResizing : "widget",
     showRowLines: true,
     allowColumnReordering: true,
-    remoteOperations: {
-      sorting: true
-    },
     paging: {
       enabled: false
     },
@@ -38427,7 +38541,8 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }, col, {
       minWidth: 50,
       width: props.isColumnWidthFixed === true ? 160 : undefined,
-      cssClass: col.cssClass
+      cssClass: col.cssClass,
+      headerCellComponent: customHeaderCellComponent
     }), col.lookUp && React__default.createElement(devextremeReact.Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React__default.createElement(DataGrid.HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -38475,7 +38590,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   }), React__default.createElement(DataGrid.HeaderFilter, {
     visible: true
   }), React__default.createElement(DataGrid.Sorting, {
-    mode: "multiple"
+    mode: "none"
   }), !props.closeGridHeader && React__default.createElement(DataGrid.Export, {
     enabled: true,
     allowExportSelectedData: true,
@@ -38513,20 +38628,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     customLoad: customLoad,
     customSave: customSave
   })));
-};
-
-var currentYear = new Date().getFullYear();
-var Constants = {
-  timelineDefaultStartDate: new Date(currentYear, 0, 1),
-  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
-};
-var actionColumnProps = {
-  dataField: "Actions",
-  allowExporting: false,
-  allowFiltering: false,
-  allowSorting: false,
-  dataType: "object"
-};
+});
 
 var lodash = createCommonjsModule(function (module, exports) {
 (function() {
@@ -55718,6 +55820,23 @@ var lodash = createCommonjsModule(function (module, exports) {
 }.call(commonjsGlobal));
 });
 
+var uniqueRecords = function uniqueRecords(value, index, array) {
+  return array.indexOf(value) === index;
+};
+
+var currentYear = new Date().getFullYear();
+var Constants = {
+  timelineDefaultStartDate: new Date(currentYear, 0, 1),
+  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
+};
+var actionColumnProps = {
+  dataField: "Actions",
+  allowExporting: false,
+  allowFiltering: false,
+  allowSorting: false,
+  dataType: "object"
+};
+
 var checkboxCellComponent = function checkboxCellComponent(props) {
   var isChecked = props.data.value;
   var onChange = function onChange(e) {
@@ -55950,6 +56069,7 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
     minWidth: 50,
     width: 50,
     dataField: "isSelected",
+    name: "selection",
     allowExporting: false,
     cellComponent: function cellComponent(props) {
       var onChange = function onChange(e) {
@@ -55971,23 +56091,26 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
   return selectionColumn;
 };
 
-var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3;
+var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$3;
 var useStyles$b = antdStyle.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";
+  var searchBox = "\n      padding-left: 5px;\n    ";
   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      "]))),
+    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), searchBox),
     columnChooserPopup: css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n        min-width: 250px;\n      "]))),
     columnChooserHeader: css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        align-items: center;\n      "]))),
-    columnChooserCloseButton: css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        flex: 1;\n        text-align: end;\n        cursor: pointer;\n      "]))),
-    columnChooserDivider: css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 10px;\n        margin-bottom: 10px;\n      "])))
+    columnChooserCloseButton: css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        flex: 1;\n        text-align: end;\n      "]))),
+    columnChooserDivider: css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 10px;\n        margin-bottom: 10px;\n      "]))),
+    columnChooserCheckbox: css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 4px;\n        margin-bottom: 4px;\n      "]))),
+    columnChooserSearchbox: css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        ", "\n        margin-top: 4px;\n        margin-bottom: 4px;\n      "])), searchBox)
   };
 });
 
@@ -56046,85 +56169,140 @@ var OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
   }));
 };
 
-var uniqueRecords = function uniqueRecords(value, index, array) {
-  return array.indexOf(value) === index;
-};
-
 var OdsTimelineTableColumnChooser = function OdsTimelineTableColumnChooser(props) {
   var _useStyles = useStyles$b(),
     timelineTableStyles = _useStyles.styles;
+  var initialSelectedColumns = props.items.filter(function (item) {
+    return item.visible !== false;
+  });
   var _useState = React.useState(false),
     open = _useState[0],
     setOpen = _useState[1];
   var _useState2 = React.useState(props.items),
     columns = _useState2[0],
     setColumns = _useState2[1];
-  var _useState3 = React.useState(props.items),
+  var _useState3 = React.useState(initialSelectedColumns),
     selectedColumns = _useState3[0],
     setSelectedColumns = _useState3[1];
   var filterColumns = function filterColumns(searchValue) {
+    var _columns = [];
     if (searchValue !== undefined && searchValue !== null && searchValue !== "") {
-      setColumns(function (prev) {
-        return prev.filter(function (item) {
-          return item.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
-        });
+      _columns = columns.filter(function (item) {
+        return item.columnCaption.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
       });
     } else {
-      setColumns(props.items);
+      _columns = props.items;
     }
+    setColumns(_columns);
+    updateSelectAll({
+      columnList: _columns
+    });
   };
   var selectAllChanged = function selectAllChanged(isSelected) {
+    setSelectAll(isSelected);
+    var newSelectedColumns = [];
     if (isSelected) {
-      setSelectedColumns(function (prev) {
-        return [].concat(prev, columns).filter(uniqueRecords);
-      });
+      newSelectedColumns = [].concat(selectedColumns, columns).filter(uniqueRecords);
     } else {
-      setSelectedColumns(function (prev) {
-        return prev.filter(function (item) {
-          return !columns.some(function (x) {
-            return x === item;
-          });
+      newSelectedColumns = selectedColumns.filter(function (item) {
+        return !columns.some(function (x) {
+          return x.columnName === item.columnName;
         });
       });
     }
+    setSelectedColumns(newSelectedColumns);
+    props.onSelection && props.onSelection(columns.map(function (item) {
+      return item.columnName;
+    }), isSelected);
+  };
+  var selectChanged = function selectChanged(isSelected, column) {
+    var newSelectedColumns = [];
+    if (isSelected) {
+      newSelectedColumns = [].concat(selectedColumns, [column]).filter(uniqueRecords);
+    } else {
+      newSelectedColumns = selectedColumns.filter(function (item) {
+        return item.columnName !== column.columnName;
+      });
+    }
+    setSelectedColumns(newSelectedColumns);
+    updateSelectAll({
+      selectedColumnList: newSelectedColumns
+    });
+    props.onSelection && props.onSelection([column.columnName], isSelected);
+  };
+  var updateSelectAll = function updateSelectAll(params) {
+    var columnList = params.columnList,
+      selectedColumnList = params.selectedColumnList;
+    setSelectAll(isAllSelected({
+      columnList: columnList,
+      selectedColumnList: selectedColumnList
+    }));
   };
-  var selectChanged = function selectChanged(_isSelected, _columnName) {};
   var isSelected = function isSelected(columnName) {
-    return selectedColumns.some(columnName);
+    return selectedColumns.some(function (item) {
+      return item.columnName === columnName;
+    });
   };
+  var isAllSelected = function isAllSelected(params) {
+    var _params$columnList, _params$selectedColum;
+    var _columns = (_params$columnList = params === null || params === void 0 ? void 0 : params.columnList) != null ? _params$columnList : columns;
+    var _selectedColumns = (_params$selectedColum = params === null || params === void 0 ? void 0 : params.selectedColumnList) != null ? _params$selectedColum : selectedColumns;
+    var _result = true;
+    lodash.forEach(_columns, function (_column) {
+      if (!_selectedColumns.some(function (_selectedColumn) {
+        return _selectedColumn.columnName === _column.columnName;
+      })) {
+        _result = false;
+        return;
+      }
+    });
+    return _result;
+  };
+  var _useState4 = React.useState(isAllSelected({
+      columnList: props.items,
+      selectedColumnList: initialSelectedColumns
+    })),
+    selectAll = _useState4[0],
+    setSelectAll = _useState4[1];
   var content = React__default.createElement("div", {
     className: timelineTableStyles.columnChooserPopup
   }, React__default.createElement("div", {
     className: timelineTableStyles.columnChooserHeader
   }, React__default.createElement("span", null, props.title), React__default.createElement("span", {
-    className: timelineTableStyles.columnChooserCloseButton,
+    className: timelineTableStyles.columnChooserCloseButton
+  }, React__default.createElement(outline.CrossIcon, {
+    style: {
+      cursor: "pointer"
+    },
     onClick: function onClick() {
       return setOpen(false);
     }
-  }, React__default.createElement(outline.CrossIcon, null))), React__default.createElement(OdsInput, {
+  }))), React__default.createElement(OdsInput, {
     key: "OdsTimelineTableColumnChooser_OdsSearch",
     prefix: React__default.createElement("span", {
       className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
     }),
-    className: timelineTableStyles.searchBox,
+    className: timelineTableStyles.columnChooserSearchbox,
     onChange: function onChange(e) {
       return filterColumns(e.target.value);
     }
   }), React__default.createElement(OdsCheckbox, {
-    defaultChecked: true,
+    className: timelineTableStyles.columnChooserCheckbox,
+    checked: selectAll,
     onChange: function onChange(e) {
-      return selectAllChanged(e.target.value);
+      return selectAllChanged(e.target.checked);
     }
-  }), React__default.createElement(antd.Divider, {
+  }, props.selectAllText), React__default.createElement(antd.Divider, {
     className: timelineTableStyles.columnChooserDivider
-  }), columns.map(function (columnName, index) {
-    return React__default.createElement(OdsCheckbox, {
+  }), columns.map(function (_column, index) {
+    return React__default.createElement("div", null, React__default.createElement(OdsCheckbox, {
       key: "OdsTimelineTableColumnChooser_OdsCheckbox_" + index,
-      value: isSelected(columnName),
+      className: timelineTableStyles.columnChooserCheckbox,
+      checked: isSelected(_column.columnName),
       onChange: function onChange(e) {
-        return selectChanged();
+        return selectChanged(e.target.checked, _column);
       }
-    });
+    }, _column.columnCaption));
   }));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Popover, {
     open: open,
@@ -56180,6 +56358,15 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     }),
     sortingChangeEventProps = _useState7[0],
     setSortingChangeEventProps = _useState7[1];
+  var _useState8 = React.useState(customColumns),
+    columnList = _useState8[0],
+    setColumnList = _useState8[1];
+  var _useState9 = React.useState(customColumns.filter(function (item) {
+      return item.visible === false;
+    }).map(function (item) {
+      return item.name;
+    })),
+    unvisibleColumnNames = _useState9[0];
   var originalSortingMode = sorting.mode === undefined || sorting.mode === "" ? "none" : sorting.mode;
   var sortingMode = sortingProcess == "ServerSideSorting" ? "none" : originalSortingMode;
   var showSortIndexes = sortingProcess == "ServerSideSorting" ? false : sorting.showSortIndexes;
@@ -56260,7 +56447,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     updateSelectionData(e.data[props.customTaskKey].toString(), e.isSelected);
     onCustomSelectionChanged && onCustomSelectionChanged(e);
   };
-  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
+  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(columnList) : columnList;
   var minimalHeaderCellComponent = function minimalHeaderCellComponent(data) {
     return customHeaderCellComponent(data, true);
   };
@@ -56365,6 +56552,33 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       endDate: e.endDate
     });
   };
+  var onColumnChooserSelection = function onColumnChooserSelection(items, isSelected) {
+    var _props$toolbarSetting, _props$toolbarSetting2, _props$toolbarSetting3, _props$toolbarSetting4;
+    var _visibleColumns = columnList.filter(function (item) {
+      return item.visible !== false;
+    });
+    if (isSelected) {
+      _visibleColumns = [].concat(_visibleColumns, customColumns.filter(function (item) {
+        return items.includes(item.name);
+      })).filter(uniqueRecords);
+    } else {
+      _visibleColumns = _visibleColumns.filter(function (item) {
+        return !items.includes(item.name);
+      });
+    }
+    _visibleColumns = _visibleColumns.filter(function (x) {
+      return !unvisibleColumnNames.includes(x.name);
+    });
+    setColumnList(function (prev) {
+      return prev.map(function (item) {
+        item.visible = _visibleColumns.some(function (x) {
+          return x.name === item.name;
+        });
+        return item;
+      });
+    });
+    ((_props$toolbarSetting = props.toolbarSettings) === null || _props$toolbarSetting === void 0 ? void 0 : (_props$toolbarSetting2 = _props$toolbarSetting.columnChooser) === null || _props$toolbarSetting2 === void 0 ? void 0 : _props$toolbarSetting2.onSelection) && ((_props$toolbarSetting3 = props.toolbarSettings) === null || _props$toolbarSetting3 === void 0 ? void 0 : (_props$toolbarSetting4 = _props$toolbarSetting3.columnChooser) === null || _props$toolbarSetting4 === void 0 ? void 0 : _props$toolbarSetting4.onSelection(items, isSelected));
+  };
   var searchBoxComponent = function searchBoxComponent(props) {
     var _toolbarSettings$sear4;
     var filterInAllFields = function filterInAllFields(item, searchValue) {
@@ -56419,13 +56633,13 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   var getExportFileName = function getExportFileName() {
     var _toolbarSettings$expo4, _toolbarSettings$expo5;
     var now = new Date();
-    var datePart = ('0' + now.getDate()).slice(-2) + "-" + ('0' + (now.getMonth() + 1)).slice(-2) + "-" + now.getFullYear();
-    var timePart = ('0' + now.getHours()).slice(-2) + ":" + ('0' + now.getMinutes()).slice(-2);
+    var datePart = ("0" + now.getDate()).slice(-2) + "-" + ("0" + (now.getMonth() + 1)).slice(-2) + "-" + now.getFullYear();
+    var timePart = ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2);
     return ((_toolbarSettings$expo4 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo5 = toolbarSettings["export"]) === null || _toolbarSettings$expo5 === void 0 ? void 0 : _toolbarSettings$expo5.fileName) != null ? _toolbarSettings$expo4 : "Timeline") + "-" + datePart + "-" + timePart + ".pdf";
   };
   var exportedColumns = React.useMemo(function () {
     var newExportedColumns = [];
-    var exportableColumns = customColumns.filter(function (item) {
+    var exportableColumns = columnList.filter(function (item) {
       return item.visible != false && item.allowExporting != false;
     });
     var isResizableColumn = function isResizableColumn(item) {
@@ -56446,7 +56660,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       newExportedColumns.push(col);
     });
     return newExportedColumns;
-  }, [exportableTasks]);
+  }, [exportableTasks, columnList]);
   React.useImperativeHandle(ref, function () {
     return {
       getSelectedRowsData: getSelectedRowsData,
@@ -56510,12 +56724,20 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu = toolbarSettings.columnChooser) === null || _toolbarSettings$colu === void 0 ? void 0 : _toolbarSettings$colu.visible,
     location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
     component: function component(props) {
-      var _toolbarSettings$colu2, _toolbarSettings$colu3;
+      var _toolbarSettings$colu2, _toolbarSettings$colu3, _toolbarSettings$colu4, _toolbarSettings$colu5;
       return OdsTimelineTableColumnChooser(_extends({}, props, {
         title: (_toolbarSettings$colu2 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu3 = toolbarSettings.columnChooser) === null || _toolbarSettings$colu3 === void 0 ? void 0 : _toolbarSettings$colu3.title) != null ? _toolbarSettings$colu2 : "Column Chooser",
-        items: customColumns.map(function (item) {
-          return item.caption;
-        })
+        selectAllText: (_toolbarSettings$colu4 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu5 = toolbarSettings.columnChooser) === null || _toolbarSettings$colu5 === void 0 ? void 0 : _toolbarSettings$colu5.selectAllText) != null ? _toolbarSettings$colu4 : "Select All",
+        items: columnList.filter(function (item) {
+          return item.caption !== undefined && item.caption !== "";
+        }).map(function (item) {
+          return {
+            columnCaption: item.caption,
+            columnName: item.name,
+            visible: item.visible
+          };
+        }),
+        onSelection: onColumnChooserSelection
       }));
     }
   })) : "", React__default.createElement(gantt.ContextMenu, {