@adaptabletools/adaptable 10.0.0-canary.3 → 10.0.3

package/src/agGrid/Adaptable.js

@@ -416,7 +416,7 @@ class Adaptable {
                 this.isInitialised = true;
             });
             if (this.abContainerElement == null) {
-                this.abContainerElement = this.getadaptableContainerElement();
+                this.abContainerElement = this.getAdaptableContainerElement();
             }
             if (this.abContainerElement != null) {
                 this.abContainerElement.innerHTML = '';
@@ -484,17 +484,19 @@ class Adaptable {
         });
     }
     performAudit(action, oldState, newState) {
-        const adaptableStateChangedInfo = {
-            actionName: action.type,
-            clientTimestamp: new Date(),
-            userName: this.adaptableOptions.userName,
-            adaptableId: this.adaptableOptions.adaptableId,
-            adaptableStateKey: this.adaptableOptions.adaptableStateKey,
-            action: action,
-            oldState: oldState,
-            newState: newState,
-        };
-        this.api.eventApi.emit('AdaptableStateChanged', adaptableStateChangedInfo);
+        if (this.isInitialised) {
+            const adaptableStateChangedInfo = {
+                actionName: action.type,
+                clientTimestamp: new Date(),
+                userName: this.adaptableOptions.userName,
+                adaptableId: this.adaptableOptions.adaptableId,
+                adaptableStateKey: this.adaptableOptions.adaptableStateKey,
+                action: action,
+                oldState: oldState,
+                newState: newState,
+            };
+            this.api.eventApi.emit('AdaptableStateChanged', adaptableStateChangedInfo);
+        }
     }
     initializeAgGrid() {
         var _a;
@@ -950,6 +952,26 @@ class Adaptable {
             .join(' ');
         return classNames;
     }
+    getEditableCellClass(abColumn, params) {
+        const editableCellStyle = this.api.userInterfaceApi.getEditableCellStyle();
+        if (!(editableCellStyle === null || editableCellStyle === void 0 ? void 0 : editableCellStyle.ClassName)) {
+            return null;
+        }
+        const isCellEditable = this.api.gridApi.areCellsEditable([
+            this.getGridCellFromRowNode(params.node, abColumn.ColumnId),
+        ]);
+        return isCellEditable ? editableCellStyle.ClassName : null;
+    }
+    getReadonlyCellClass(abColumn, params) {
+        const readonlyCellStyle = this.api.userInterfaceApi.getReadOnlyCellStyle();
+        if (!(readonlyCellStyle === null || readonlyCellStyle === void 0 ? void 0 : readonlyCellStyle.ClassName)) {
+            return null;
+        }
+        const isCellReadonly = !this.api.gridApi.areCellsEditable([
+            this.getGridCellFromRowNode(params.node, abColumn.ColumnId),
+        ]);
+        return isCellReadonly ? readonlyCellStyle.ClassName : null;
+    }
     isQuickSearchActive(abColumn, params) {
         if (abColumn.IsExcludedFromQuickSearch) {
             return false;
@@ -1023,7 +1045,7 @@ class Adaptable {
     }
     setColumnOrder(VisibleColumnList) {
         const newColumnState = this.getSortedColumnStateForVisibleColumns(VisibleColumnList);
-        this.gridOptions.columnApi.setColumnState(newColumnState);
+        this.gridOptions.columnApi.applyColumnState({ state: newColumnState, applyOrder: true });
         this.updateColumnsIntoStore();
     }
     persistLayout(layout) {
@@ -1177,7 +1199,7 @@ class Adaptable {
             if (shouldUpdatePivoted) {
                 this.gridOptions.columnApi.setPivotMode(pivoted);
             }
-            this.gridOptions.columnApi.setColumnState(newColState);
+            this.gridOptions.columnApi.applyColumnState({ state: newColState, applyOrder: true });
             this.api.gridApi.setColumnSorts(layout.ColumnSorts);
             this.gridOptions.columnApi.setPivotColumns(layout.PivotColumns || []);
             // aggrid 25.1.0 introduced a bug such that a layout that has a grouped column, if the column has enableRowGroup: true but not rowGroup: true
@@ -1365,7 +1387,9 @@ class Adaptable {
                     isMaster: !!(node.master != null && node.master == true),
                     isExpanded: !!(node.expanded != null && node.expanded == true),
                     isGroup: !!(node.group != null && node.group == true),
-                    level: node.level,
+                    isSelected: true,
+                    isDisplayed: node.displayed == true,
+                    rowGroupLevel: node.level,
                 };
                 const gridRow = {
                     primaryKeyValue: this.getPrimaryKeyValueFromRowNode(node),
@@ -1419,11 +1443,11 @@ class Adaptable {
     cancelEdit() {
         this.gridOptions.api.stopEditing(true);
     }
-    getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode) {
+    getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode, permittedValues) {
         let returnValues = [];
         // this function does NOT look up for server values but actually it should...
         // that is currently commented out in the column api function (previously in filter form)
-        const permittedValues = this.api.userInterfaceApi.getPermittedValuesForColumn(column);
+        permittedValues = permittedValues !== null && permittedValues !== void 0 ? permittedValues : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
         if (ArrayExtensions_1.ArrayExtensions.IsNotNull(permittedValues)) {
             returnValues = permittedValues.map((pv) => {
                 return {
@@ -1456,6 +1480,46 @@ class Adaptable {
         const uniqueVals = uniqBy_1.default(returnValues, 'displayValue');
         return uniqueVals.slice(0, this.adaptableOptions.filterOptions.maxFilterValuesToDisplay);
     }
+    async getDistinctFilterValuesForColumn(column, visibleRowsOnly, filter, skipRowNode) {
+        var _a;
+        const permittedValues = (_a = this.api.userInterfaceApi.getFilterPermittedValuesForColumn(column)) !== null && _a !== void 0 ? _a : {
+            suppressClientSideFiltering: false,
+            values: () => undefined,
+        };
+        let preparedPermittedValues = undefined;
+        try {
+            preparedPermittedValues = await (permittedValues === null || permittedValues === void 0 ? void 0 : permittedValues.values(column, filter));
+        }
+        catch (error) {
+            LoggingHelper_1.ConsoleLogError(`Failed to load filter permitted values`, column, filter, error);
+        }
+        return {
+            suppressClientSideFilter: permittedValues.suppressClientSideFiltering,
+            gridCells: this.getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode, preparedPermittedValues),
+        };
+    }
+    async getDistinctCustomSortValuesForColumn(column, visibleRowsOnly, skipRowNode) {
+        const permittedValues = await this.api.userInterfaceApi.getCustomSortPermittedValuesForColumn(column);
+        let preparedPermittedValues = undefined;
+        try {
+            preparedPermittedValues = await (permittedValues === null || permittedValues === void 0 ? void 0 : permittedValues.values(column));
+        }
+        catch (error) {
+            LoggingHelper_1.ConsoleLogError(`Failed to load custom sort permitted values`, column, error);
+        }
+        return this.getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode, preparedPermittedValues);
+    }
+    async getDistinctBulkUpdateValuesForColumn(column, visibleRowsOnly, selectedGridCells, skipRowNode) {
+        const permittedValues = await this.api.userInterfaceApi.getBulkUpdatePermittedValuesForColumn(column);
+        let preparedPermittedValues = undefined;
+        try {
+            preparedPermittedValues = await (permittedValues === null || permittedValues === void 0 ? void 0 : permittedValues.values(column, selectedGridCells));
+        }
+        catch (error) {
+            LoggingHelper_1.ConsoleLogError(`Failed to load bulk permitted values`, error, column, selectedGridCells);
+        }
+        return this.getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode, preparedPermittedValues);
+    }
     getColumnValueDisplayValuePairList(columnId, visibleRowsOnly, onlyIncludeIds) {
         const returnArray = [];
         let permittedMap = new Map();
@@ -1794,9 +1858,12 @@ class Adaptable {
         ];
     }
     getColDefsForFreeTextColumns() {
-        let filterable = this.api.internalApi.getAdaptableOptions().filterOptions
+        const specialColumnsAreFilterable = this.api.internalApi.getAdaptableOptions().filterOptions
             .enableFilterOnSpecialColumns;
+        const defaultFreeTextColumnSettings = ObjectFactory_1.CreateEmptyFreeTextColumn(specialColumnsAreFilterable)
+            .FreeTextColumnSettings;
         return this.api.freeTextColumnApi.getAllFreeTextColumn().map((freeTextColumn) => {
+            const freeTextColumnSettings = Object.assign(Object.assign({}, defaultFreeTextColumnSettings), freeTextColumn.FreeTextColumnSettings);
             const dataTypeEditor = freeTextColumn.DataType === 'Number'
                 ? AdaptableNumberEditor_1.AdaptableNumberEditor
                 : freeTextColumn.DataType === 'Date'
@@ -1808,10 +1875,16 @@ class Adaptable {
                 colId: freeTextColumn.ColumnId,
                 editable: true,
                 hide: true,
-                filter: filterable,
-                sortable: true,
-                resizable: true,
-                enableRowGroup: true,
+                width: freeTextColumnSettings.Width,
+                enableValue: freeTextColumnSettings.Aggregatable,
+                filter: freeTextColumnSettings.Filterable,
+                floatingFilter: freeTextColumnSettings.Filterable,
+                resizable: freeTextColumnSettings.Resizable,
+                enableRowGroup: freeTextColumnSettings.Groupable,
+                sortable: freeTextColumnSettings.Sortable,
+                enablePivot: freeTextColumnSettings.Pivotable,
+                suppressMenu: freeTextColumnSettings.SuppressMenu,
+                suppressMovable: freeTextColumnSettings.SuppressMovable,
                 cellEditor: dataTypeEditor !== null && dataTypeEditor !== void 0 ? dataTypeEditor : (freeTextColumn.TextEditor && freeTextColumn.TextEditor == 'Large'
                     ? 'agLargeTextCellEditor'
                     : 'agTextCellEditor'),
@@ -1846,15 +1919,24 @@ class Adaptable {
         }
     }
     getColDefsForActionColumns() {
+        const defaultActionColumnSettings = {
+            resizable: true,
+            suppressMenu: false,
+            suppressMovable: false,
+        };
         return this.api.userInterfaceApi.getAllActionColumn().map((actionColumn) => {
+            const actionColumnSettings = Object.assign(Object.assign({}, defaultActionColumnSettings), actionColumn.actionColumnSettings);
             const newColDef = {
                 headerName: actionColumn.friendlyName ? actionColumn.friendlyName : actionColumn.columnId,
                 colId: actionColumn.columnId,
-                editable: false,
                 hide: false,
+                editable: false,
+                width: actionColumnSettings.width,
+                resizable: actionColumnSettings.resizable,
+                suppressMenu: actionColumnSettings.suppressMenu,
+                suppressMovable: actionColumnSettings.suppressMovable,
                 filter: false,
                 sortable: false,
-                resizable: true,
                 enableRowGroup: false,
                 cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
                 type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
@@ -1881,16 +1963,17 @@ class Adaptable {
         this.setLayout();
     }
     getColDefsForCalculatedColumns() {
+        const specialColumnsAreFilterable = this.adaptableOptions.filterOptions
+            .enableFilterOnSpecialColumns
+            ? this.adaptableOptions.filterOptions.enableFilterOnSpecialColumns
+            : true;
+        const defaultCalculatedColumnSettings = ObjectFactory_1.CreateEmptyCalculatedColumn(specialColumnsAreFilterable)
+            .CalculatedColumnSettings;
         return this.api.calculatedColumnApi.getAllCalculatedColumn().map((calculatedColumn) => {
             var _a;
-            if (!calculatedColumn.CalculatedColumnSettings) {
-                let filterable = this.adaptableOptions.filterOptions.enableFilterOnSpecialColumns
-                    ? this.adaptableOptions.filterOptions.enableFilterOnSpecialColumns
-                    : true;
-                calculatedColumn.CalculatedColumnSettings = ObjectFactory_1.CreateEmptyCalculatedColumn(filterable).CalculatedColumnSettings;
-            }
-            if (!calculatedColumn.CalculatedColumnSettings.DataType) {
-                calculatedColumn.CalculatedColumnSettings.DataType = this.CalculatedColumnExpressionService.GetCalculatedColumnDataType((_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression);
+            const calculatedColumnSettings = Object.assign(Object.assign({}, defaultCalculatedColumnSettings), calculatedColumn.CalculatedColumnSettings);
+            if (!calculatedColumnSettings.DataType) {
+                calculatedColumnSettings.DataType = this.CalculatedColumnExpressionService.GetCalculatedColumnDataType((_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression);
             }
             const newColDef = {
                 headerName: calculatedColumn.FriendlyName
@@ -1899,25 +1982,27 @@ class Adaptable {
                 colId: calculatedColumn.ColumnId,
                 hide: true,
                 editable: false,
-                width: calculatedColumn.CalculatedColumnSettings.Width,
-                enableValue: calculatedColumn.CalculatedColumnSettings.Aggregatable,
-                filter: calculatedColumn.CalculatedColumnSettings.Filterable,
-                floatingFilter: calculatedColumn.CalculatedColumnSettings.Filterable,
-                resizable: calculatedColumn.CalculatedColumnSettings.Resizable,
-                enableRowGroup: calculatedColumn.CalculatedColumnSettings.Groupable,
-                sortable: calculatedColumn.CalculatedColumnSettings.Sortable,
-                enablePivot: calculatedColumn.CalculatedColumnSettings.Pivotable,
+                width: calculatedColumnSettings.Width,
+                enableValue: calculatedColumnSettings.Aggregatable,
+                filter: calculatedColumnSettings.Filterable,
+                floatingFilter: calculatedColumnSettings.Filterable,
+                resizable: calculatedColumnSettings.Resizable,
+                enableRowGroup: calculatedColumnSettings.Groupable,
+                sortable: calculatedColumnSettings.Sortable,
+                enablePivot: calculatedColumnSettings.Pivotable,
+                suppressMenu: calculatedColumnSettings.SuppressMenu,
+                suppressMovable: calculatedColumnSettings.SuppressMovable,
                 type: [
                     GeneralConstants_1.AB_SPECIAL_COLUMN,
-                    this.agGridHelper.getAgGridDataType(calculatedColumn.CalculatedColumnSettings.DataType),
+                    this.agGridHelper.getAgGridDataType(calculatedColumnSettings.DataType),
                 ],
                 valueGetter: (params) => {
                     var _a;
                     return this.CalculatedColumnExpressionService.ComputeExpressionValue((_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression, params.node);
                 },
             };
-            if (calculatedColumn.CalculatedColumnSettings.ShowToolTip != null &&
-                calculatedColumn.CalculatedColumnSettings.ShowToolTip == true) {
+            if (calculatedColumnSettings.ShowToolTip != null &&
+                calculatedColumnSettings.ShowToolTip == true) {
                 newColDef.tooltipValueGetter = () => {
                     var _a;
                     return (_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression;
@@ -1967,7 +2052,7 @@ class Adaptable {
         return rowNode;
     }
     destroy(config) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (this.gridOptions && this.gridOptions.api) {
             this.gridOptions.api.__adaptable = null;
             this.gridOptions.api.setColumnDefs = GridApi_setColumnDefs;
@@ -1986,7 +2071,7 @@ class Adaptable {
         this.emitter = null;
         this._adaptableReady = false;
         Adaptable.dismissInstance(this);
-        const abContainerElement = this.getadaptableContainerElement();
+        const abContainerElement = this.getAdaptableContainerElement();
         if (config && !config.unmount) {
             return;
         }
@@ -1999,6 +2084,11 @@ class Adaptable {
         (_d = this.ReportService) === null || _d === void 0 ? void 0 : _d.destroy();
         (_e = this.ModuleService) === null || _e === void 0 ? void 0 : _e.destroy();
         (_f = this.ValidationService) === null || _f === void 0 ? void 0 : _f.destroy();
+        (_g = this.QueryLanguageService) === null || _g === void 0 ? void 0 : _g.destroy();
+        (_h = this.AlertService) === null || _h === void 0 ? void 0 : _h.destroy();
+        (_j = this.TeamSharingService) === null || _j === void 0 ? void 0 : _j.destroy();
+        (_k = this.MetamodelService) === null || _k === void 0 ? void 0 : _k.destroy();
+        (_l = this.LicenseService) === null || _l === void 0 ? void 0 : _l.destroy();
     }
     // really really need to do this properly but as a temp fix lets create a default style for when no data
     getDefaultIPPStyle() {
@@ -2043,7 +2133,7 @@ class Adaptable {
     getCurrentIPPStyle() {
         return this.agGridHelper.getCurrentIPPStyle();
     }
-    getadaptableContainerElement() {
+    getAdaptableContainerElement() {
         if (!this.abContainerElement) {
             let containerOptionsContainer = this.adaptableOptions.containerOptions.adaptableContainer;
             this.abContainerElement =
@@ -2079,7 +2169,7 @@ class Adaptable {
     initInternalGridLogic() {
         LoggingHelper_1.LogAdaptableInfo(`Initializing InternalGridLogic...`);
         if (this.abContainerElement == null) {
-            this.abContainerElement = this.getadaptableContainerElement();
+            this.abContainerElement = this.getAdaptableContainerElement();
         }
         if (this.abContainerElement == null) {
             if (typeof this.adaptableOptions.containerOptions.adaptableContainer === 'string') {
@@ -2310,11 +2400,21 @@ class Adaptable {
         RowNodeProto.dispatchLocalEvent = function (event) {
             const node = event.node;
             const result = RowNode_dispatchLocalEvent.apply(this, arguments);
+            const extractGridApiFromRowNode = (rowNode) => {
+                var _a, _b, _c, _d;
+                // starting with AG Grid 26.1.0 the gridApi is wrapped in a Beans property
+                // while older versions than 26.1.0 had a direct property
+                const rowNodeApi = (_c = (_b = (_a = rowNode) === null || _a === void 0 ? void 0 : _a.beans) === null || _b === void 0 ? void 0 : _b.gridApi) !== null && _c !== void 0 ? _c : (_d = rowNode) === null || _d === void 0 ? void 0 : _d.gridApi;
+                if (!rowNodeApi) {
+                    LoggingHelper_1.LogAdaptableWarning(`No GridAPI found in passed RowNode, this should never happen!`, rowNode);
+                }
+                return rowNodeApi;
+            };
             // we don't know from which instance of aggrid this is coming,
             // as this fn is shared by all instances
             if (node) {
                 Adaptable.forEachAdaptable((adaptable) => {
-                    if (node.gridApi !== adaptable.gridOptions.api) {
+                    if (extractGridApiFromRowNode(node) !== adaptable.gridOptions.api) {
                         // the event is coming from another aggrid instance
                         // so IGNORE IT
                         return;
@@ -2556,6 +2656,8 @@ class Adaptable {
             const cellClass = (params) => {
                 const isQuickSearchActive = hasQuickSearchStyleClassName && this.isQuickSearchActive(abColumn, params);
                 const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+                const editableClassName = this.getEditableCellClass(abColumn, params);
+                const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
                 let returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
@@ -2564,6 +2666,8 @@ class Adaptable {
                         ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
                         : null,
                     isQuickSearchActive ? quickSearchStyleClassName : null,
+                    editableClassName,
+                    readonlyClassName,
                 ]
                     .filter((x) => !!x)
                     .join(' ');
@@ -2576,7 +2680,8 @@ class Adaptable {
         return `--excel-cell-${colId}-${primaryKeyValue}`;
     }
     setupColumnCellEditor({ colId, col }) {
-        const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(colId);
+        const adaptableColumn = this.api.columnApi.getColumnFromId(colId);
+        const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(adaptableColumn);
         this.setColDefProperty(col, 'cellEditor', () => {
             if (editLookUpItem) {
                 return this.isModulePresent('rich-select')
@@ -2584,10 +2689,12 @@ class Adaptable {
                     : 'agSelectCellEditor';
             }
         });
-        this.setColDefProperty(col, 'cellEditorParams', () => {
+        this.setColDefProperty(col, 'cellEditorParams', (params) => {
             if (editLookUpItem) {
-                return {
-                    values: this.api.userInterfaceApi.getEditLookUpValuesForEditLookUpItem(editLookUpItem, colId),
+                return (params) => {
+                    return {
+                        values: this.api.userInterfaceApi.getEditLookUpValuesForEditLookUpItem(editLookUpItem, colId, params === null || params === void 0 ? void 0 : params.data),
+                    };
                 };
             }
         });
@@ -3220,7 +3327,7 @@ class Adaptable {
             }
             return state;
         });
-        this.gridOptions.columnApi.setColumnState(newColumnState);
+        this.gridOptions.columnApi.applyColumnState({ state: newColumnState, applyOrder: true });
         this.gridOptions.api.onSortChanged();
     }
     clearColumnSort() {
@@ -3235,6 +3342,26 @@ class Adaptable {
         }
         this.gridOptions.api.setRowData(dataSource);
     }
+    getGridData() {
+        var _a;
+        const data = [];
+        (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.api.forEachNode((rowNode) => {
+            if (!this.isGroupRowNode(rowNode)) {
+                data.push(rowNode.data);
+            }
+        });
+        return data;
+    }
+    getFilteredData() {
+        var _a;
+        const data = [];
+        (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.api.forEachNodeAfterFilter((rowNode) => {
+            if (!this.isGroupRowNode(rowNode)) {
+                data.push(rowNode.data);
+            }
+        });
+        return data;
+    }
     loadDataSource(dataSource) {
         if (this.hasAutogeneratedPrimaryKey()) {
             this.addSyntheticPrimaryKey(dataSource);
@@ -3258,11 +3385,15 @@ class Adaptable {
             this.addSyntheticPrimaryKey(dataRows);
         }
         dataUpdateConfig = dataUpdateConfig || {};
+        const newData = { add: dataRows };
+        if (dataUpdateConfig.addIndex !== undefined) {
+            newData.addIndex = dataUpdateConfig.addIndex;
+        }
         if (dataUpdateConfig.runAsync) {
-            this.gridOptions.api.applyTransactionAsync({ add: dataRows }, dataUpdateConfig.callback);
+            this.gridOptions.api.applyTransactionAsync(newData, dataUpdateConfig.callback);
         }
         else {
-            this.gridOptions.api.applyTransaction({ add: dataRows });
+            this.gridOptions.api.applyTransaction(newData);
         }
     }
     deleteRows(dataRows, dataUpdateConfig) {

package/src/components/Dashboard/Dashboard.js

@@ -44,7 +44,7 @@ function Dashboard(props) {
             return null;
         }
         const activeTabTitle = (_c = (_b = (_a = children === null || children === void 0 ? void 0 : children[activeTabIndex]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : 'Select Toolbar';
-        return (React.createElement(DropdownButton_1.default, { ml: 1, items: React.Children.map(children, (child, index) => ({
+        return (React.createElement(DropdownButton_1.default, { ml: 1, columns: ['label'], items: React.Children.map(children, (child, index) => ({
                 value: String(index),
                 label: child.props.title,
                 onClick: () => setActiveTabIndex(index),

package/src/components/DropdownButton/index.js

@@ -17,7 +17,7 @@ const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
 };
 const DropdownButton = React.forwardRef((props, ref) => {
-    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps } = props, domProps = tslib_1.__rest(props, ["columns", "overlayProps", "listOffset", "collapseOnItemClick", "focusOnClear", "idProperty", "isItemDisabled", "items", "children", "listMinWidth", "listStyle", "listItemStyle", "listItemClassName", "constrainTo", "showClearButton", "onClear", "clearButtonProps"]);
+    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse } = props, domProps = tslib_1.__rest(props, ["columns", "overlayProps", "listOffset", "collapseOnItemClick", "focusOnClear", "idProperty", "isItemDisabled", "items", "children", "listMinWidth", "listStyle", "listItemStyle", "listItemClassName", "constrainTo", "showClearButton", "onClear", "clearButtonProps", "onExpand", "onCollapse"]);
     isItemDisabled = isItemDisabled || ((item) => item.disabled);
     if (!columns) {
         columns = ['icon', 'label'];

package/src/components/ExpressionEditor/index.js

@@ -23,6 +23,7 @@ const ButtonInfo_1 = require("../../View/Components/Buttons/ButtonInfo");
 const CodeBlock_1 = require("../CodeBlock");
 const NamedQueryContext_1 = require("./NamedQueryContext");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
 function ExpressionEditor(props) {
     var _a;
     const { type, module } = props;
@@ -60,7 +61,7 @@ function ExpressionEditor(props) {
                     cursor: 'grab',
                     marginRight: 'var(--ab-space-1)',
                 }, data: `[${column.ColumnId}]`, "data-name": "column", icon: "drag" },
-                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, showColumnIds ? `[${column.ColumnId}]` : column.FriendlyName)) }, column.DataType === 'Number' ? (React.createElement(Input_1.default, { type: "number", "data-name": "column-input", value: data[column.ColumnId], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [column.ColumnId]: Number(e.target.value) })), width: "100%", disabled: column.ReadOnly })) : column.DataType === 'String' ? (React.createElement(Input_1.default, { type: "text", "data-name": "column-input", value: data[column.ColumnId], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [column.ColumnId]: e.target.value })), width: "100%", disabled: column.ReadOnly })) : column.DataType === 'Date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": "column-input", value: data[column.ColumnId]
+                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, showColumnIds ? `[${column.ColumnId}]` : column.FriendlyName)) }, column.DataType === 'Number' ? (React.createElement(Input_1.default, { type: "number", "data-name": "column-input", value: data[column.ColumnId], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [column.ColumnId]: Number(e.target.value) })), width: "100%", disabled: column.ReadOnly })) : column.DataType === 'String' ? (React.createElement(Input_1.default, { type: "text", "data-name": "column-input", value: data[column.ColumnId], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [column.ColumnId]: e.target.value })), width: "100%", disabled: column.ReadOnly })) : column.DataType === 'Date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": "column-input", value: data[column.ColumnId] && DateHelper_1.isValueValidDate(data[column.ColumnId])
                 ? new Date(data[column.ColumnId]).toISOString().substr(0, 10)
                 : '', onChange: (e) => {
                 setData(Object.assign(Object.assign({}, data), { [column.ColumnId]: new Date(e.target.value) }));

package/src/components/Loader/Loader.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const LoaderSpinner: React.FunctionComponent<{
+    style?: React.CSSProperties;
+}>;
+export declare const Loader: React.FunctionComponent<{
+    style?: React.CSSProperties;
+}>;

package/src/components/Loader/Loader.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = exports.LoaderSpinner = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+exports.LoaderSpinner = (props) => {
+    return React.createElement("div", { style: props.style, className: "ab-Loader__Spinner" });
+};
+exports.Loader = (props) => {
+    return (React.createElement("div", { style: props.style, className: "ab-Loader" },
+        React.createElement(exports.LoaderSpinner, null),
+        React.createElement("span", { className: "ab-Loader__text" }, props.children)));
+};

package/src/components/Loader/index.d.ts

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export { LoaderSpinner } from './Loader';

package/src/components/Loader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoaderSpinner = exports.Loader = void 0;
+var Loader_1 = require("./Loader");
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_1.Loader; } });
+var Loader_2 = require("./Loader");
+Object.defineProperty(exports, "LoaderSpinner", { enumerable: true, get: function () { return Loader_2.LoaderSpinner; } });

package/src/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ProgressIndicator: React.FunctionComponent;

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressIndicator = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const react_1 = require("react");
+const Loader_1 = require("../Loader");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+exports.ProgressIndicator = () => {
+    const { active, label } = react_redux_1.useSelector((state) => state.System.ProgressIndicator);
+    const [visible, setVisible] = react_1.useState(false);
+    const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = react_1.useState({
+        top: 0,
+        left: 0,
+        height: 0,
+        width: 0,
+    });
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const adaptableContainerRef = react_1.useRef(adaptable.getAdaptableContainerElement());
+    const gridContainerRef = react_1.useRef(adaptable.getGridContainerElement());
+    const disableAdaptableGrid = (elemRef, disabled) => {
+        const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
+        if (!elemRef.current) {
+            return;
+        }
+        if (disabled) {
+            elemRef.current.classList.add(DISABLING_CSS_CLASS);
+        }
+        else {
+            elemRef.current.classList.remove(DISABLING_CSS_CLASS);
+        }
+    };
+    const updateGridContainerCoordinates = () => {
+        if (!gridContainerRef.current) {
+            return;
+        }
+        const { top, left, height, width } = gridContainerRef.current.getBoundingClientRect();
+        setProgressIndicatorCoordinates({ top, left, height, width });
+    };
+    react_1.useEffect(() => {
+        disableAdaptableGrid(adaptableContainerRef, active);
+        disableAdaptableGrid(gridContainerRef, active);
+        updateGridContainerCoordinates();
+        // without RAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
+        requestAnimationFrame(() => {
+            setVisible(active);
+        });
+    }, [active]);
+    return (React.createElement(React.Fragment, null, active && (React.createElement("div", { className: `ab-progress-indicator-wrapper ${visible ? 'ab-progress-indicator-wrapper--visible' : ''}`, style: progressIndicatorCoordinates },
+        React.createElement("div", { className: "ab-progress-indicator-body" },
+            React.createElement(Loader_1.LoaderSpinner, null),
+            React.createElement("span", { style: { marginLeft: 'var(--ab-space-2)' } }, label))))));
+};