@adaptabletools/adaptable 18.0.0-canary.0 → 18.0.0-canary.10

package/src/Utilities/Services/AggregatedScalarLiveValue.js

@@ -8,18 +8,18 @@ const logOnce = (message, loggingFn) => {
     doOnceFlags[message] = true;
 };
 export class AggregatedScalarLiveValue {
-    constructor(source, requestingModule, adaptableApi) {
+    constructor(source, requestingModule, adaptableApi, getRowNodes) {
         this.source = source;
         this.requestingModule = requestingModule;
         this.adaptableApi = adaptableApi;
+        this.getRowNodes = getRowNodes;
         if (source.aggregatedScalarExpression) {
             this.aggregatedScalarExpression = source.aggregatedScalarExpression;
         }
         this.expressionEvaluation = source.aggregatedScalarExpression
             ? this.adaptableApi.internalApi
                 .getQueryLanguageService()
-                .evaluateAggregatedScalarExpression(source.aggregatedScalarExpression, requestingModule)
-                .value
+                .evaluateAggregatedScalarExpression(source.aggregatedScalarExpression, requestingModule, getRowNodes).value
             : source.aggregatedScalarExpressionEvaluation;
         // currently we support only one reducer
         this.aggregationReducerName = Object.keys(this.expressionEvaluation.aggregationParams.reducers)[0];
@@ -29,7 +29,7 @@ export class AggregatedScalarLiveValue {
         if (this.aggregatedScalarExpression) {
             this.expressionEvaluation = this.adaptableApi.internalApi
                 .getQueryLanguageService()
-                .evaluateAggregatedScalarExpression(this.aggregatedScalarExpression, this.requestingModule).value;
+                .evaluateAggregatedScalarExpression(this.aggregatedScalarExpression, this.requestingModule, this.getRowNodes).value;
         }
         // currently we support only one reducer
         this.aggregationReducerName = Object.keys(this.expressionEvaluation.aggregationParams.reducers)[0];
@@ -38,7 +38,9 @@ export class AggregatedScalarLiveValue {
     getAggregatedValueForRow(rowNode) {
         const aggregationValue = this.getAggregationValue(rowNode);
         if (aggregationValue == undefined) {
-            logOnce(`${this.aggregatedScalarExpression} :: aggregation value is NOT available!`, this.adaptableApi.logWarn);
+            logOnce(`${this.aggregatedScalarExpression} :: aggregation value is NOT available!`, (message) => {
+                this.adaptableApi.internalApi.getAdaptableInstance().logger.warn(message);
+            });
             return;
         }
         if (this.expressionEvaluation.rowValueGetter) {
@@ -68,9 +70,11 @@ export class AggregatedScalarLiveValue {
     }
     computeAggregatedValue(expressionEvaluation) {
         var _a;
-        const gridRowNodes = this.adaptableApi.gridApi.getAllRowNodes({
-            filterFn: expressionEvaluation.rowFilterFn,
-        });
+        const gridRowNodes = expressionEvaluation.getRowNodes
+            ? expressionEvaluation.getRowNodes()
+            : this.adaptableApi.gridApi.getAllRowNodes({
+                filterFn: expressionEvaluation.rowFilterFn,
+            });
         // we iterate over the RowNode list (we need this to handle complex column values (nested values, valueGetters etc)
         // so we will map the fieldNames to RowNode.data
         const mapReducerValueGetter = (fieldName) => {
@@ -106,6 +110,7 @@ export class AggregatedScalarLiveValue {
                 return 0;
             });
         }
-        return aggregate(expressionEvaluation.aggregationParams, aggregatedRowNodes);
+        const result = aggregate(expressionEvaluation.aggregationParams, aggregatedRowNodes);
+        return result;
     }
 }

package/src/Utilities/Services/CellPopupService.js

@@ -6,7 +6,6 @@ export class CellPopupService {
     constructor(api) {
         this.api = api;
         this.adaptable = api.internalApi.getAdaptableInstance();
-        this.adaptable = api.internalApi.getAdaptableInstance();
         this.adaptable.api.eventApi.on('AdaptableReady', () => this.handleAdaptableReady());
     }
     getAdaptableState() {

package/src/Utilities/Services/Interface/IQueryLanguageService.d.ts

@@ -15,7 +15,7 @@ export interface IQueryLanguageService extends IAdaptableService {
     evaluateScalarExpression(expression: string, module: AdaptableModule, rowNode: IRowNode): any;
     evaluateObservableExpression(expression: string, module: AdaptableModule): Observable<CellDataChangedInfo | GridDataChangedInfo>;
     evaluateAggregatedBooleanExpression(expression: string, module: AdaptableModule): BooleanAggregationParameter;
-    evaluateAggregatedScalarExpression(expression: string, module: AdaptableModule): ScalarAggregationParameter;
+    evaluateAggregatedScalarExpression(expression: string, module: AdaptableModule, getRowNodes?: () => IRowNode[]): ScalarAggregationParameter;
     validateBoolean(expression: string, module: AdaptableModule, config?: {
         force?: boolean;
     }): {

package/src/Utilities/Services/LicenseService/index.d.ts

@@ -13,9 +13,12 @@ export declare enum LicenseValidityType {
 }
 export declare class LicenseService implements ILicenseService {
     private adaptable;
+    private licenseKey;
+    private packageDetails;
     constructor(adaptable: IAdaptable, licenseKey: string | undefined, packageDetails: {
         publishedAt: number | Date;
     });
+    init(): void;
     getValidityType(details: LicenseDetails | Error | null, packageDetails: {
         publishedAt: number | Date;
     }): LicenseValidityType;

package/src/Utilities/Services/LicenseService/index.js

@@ -22,34 +22,46 @@ export var LicenseValidityType;
 const SANDPACK_REGEX = /(https):\/\/\d+\-\d+\-\d+\-(sandpack\.codesandbox\.io)/g;
 const SANDBOX_REGEX = /(https):\/\/\S+(\.csb\.app)/g;
 const DEMO_REGEX = /(https):\/\/\S+(\.adaptabletools\.com)/g;
-const origin = typeof window !== 'undefined' ? window.location.origin : '';
+const getOrigin = () => {
+    return typeof window !== 'undefined' ? window.location.origin : '';
+};
 const isInsideSandpack = () => {
-    const [_fullUrl, protocol, sandpackUrl] = Array.from(SANDPACK_REGEX.exec(origin) || []);
+    const [_fullUrl, protocol, sandpackUrl] = Array.from(SANDPACK_REGEX.exec(getOrigin()) || []);
     return protocol === 'https' && sandpackUrl === 'sandpack.codesandbox.io';
 };
 const isInsideSandbox = () => {
-    const [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
+    const [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(getOrigin()) || []);
     return protocol === 'https' && sandboxUrl === '.csb.app';
 };
 const isDemoApp = () => {
-    const [_fullUrl, protocol, demoAppUrl] = Array.from(DEMO_REGEX.exec(origin) || []);
+    const [_fullUrl, protocol, demoAppUrl] = Array.from(DEMO_REGEX.exec(getOrigin()) || []);
     return protocol === 'https' && demoAppUrl === '.adaptabletools.com';
 };
 export class LicenseService {
     constructor(adaptable, licenseKey, packageDetails) {
         this.adaptable = adaptable;
+        this.licenseKey = licenseKey;
+        this.packageDetails = packageDetails;
         this.adaptable = adaptable;
+        this.adaptable.api.eventApi.on('AdaptableReady', () => {
+            requestAnimationFrame(() => {
+                // using a rAF because we want to make sure that the window.location.origin is available (Master/Detail is fidgity sometimes)
+                this.init();
+            });
+        });
+    }
+    init() {
         let details = null;
-        if (licenseKey) {
+        if (this.licenseKey) {
             try {
-                details = decodeLicense(licenseKey);
+                details = decodeLicense(this.licenseKey);
             }
             catch (error) {
                 details = error;
             }
         }
         if (!isInsideSandpack() && !isInsideSandbox() && !isDemoApp()) {
-            this.handleLicenseValidation(details, this.getValidityType(details, packageDetails));
+            this.handleLicenseValidation(details, this.getValidityType(details, this.packageDetails));
         }
     }
     getValidityType(details, packageDetails) {

package/src/Utilities/Services/MetamodelService.d.ts

@@ -3,7 +3,7 @@ import { AdaptableOptions } from '../../../types';
 export declare class MetamodelService implements IMetamodelService {
     private gridInfoOptions;
     getAdaptableOptions: () => AdaptableOptions;
-    constructor(getAdaptableOptions: () => AdaptableOptions);
+    constructor(getAdaptableOptions: () => AdaptableOptions, validateOptions?: boolean);
     getGridInfoOptions(): GridInfoOptions;
     getGridInfoNoCodeOptions(): GridInfoOptions;
     validateAdaptableOptionsValues(): void;

package/src/Utilities/Services/MetamodelService.js

@@ -1,15 +1,18 @@
 import { ADAPTABLE_METAMODEL } from '../../metamodel/adaptable.metamodel';
-import { DefaultAdaptableOptions } from '../Defaults/DefaultAdaptableOptions';
 import { AdaptableOptionsDocsLink } from '../Constants/DocumentationLinkConstants';
 import StringExtensions from '../Extensions/StringExtensions';
 import { AdaptableLogger } from '../../agGrid/AdaptableLogger';
+import { getDefaultAdaptableOptions } from '../../agGrid/defaultAdaptableOptions';
 const supportedMetamodelTypes = ['s', 'n', 'b', 'a', 'f', 'R'];
 export class MetamodelService {
-    constructor(getAdaptableOptions) {
+    constructor(getAdaptableOptions, validateOptions) {
         this.gridInfoOptions = new Map();
         this.getAdaptableOptions = () => null;
         this.getAdaptableOptions = getAdaptableOptions;
         this.gridInfoOptions = this.buildGridInfoOptions();
+        if (validateOptions) {
+            this.validateAdaptableOptionsValues();
+        }
     }
     getGridInfoOptions() {
         return this.gridInfoOptions;
@@ -140,7 +143,7 @@ export class MetamodelService {
         });
     }
     getAdaptableOptionsDefaultValues() {
-        return DefaultAdaptableOptions;
+        return getDefaultAdaptableOptions();
     }
     getAdaptableMetamodel() {
         return ADAPTABLE_METAMODEL;

package/src/Utilities/Services/QueryLanguageService.d.ts

@@ -16,7 +16,7 @@ export declare class QueryLanguageService implements IQueryLanguageService {
     constructor(adaptableApi: AdaptableApi);
     evaluateBooleanExpression(expression: string, module: AdaptableModule, rowNode: any): any;
     evaluateScalarExpression(expression: string, module: AdaptableModule, rowNode: IRowNode): any;
-    evaluateAggregatedScalarExpression(expression: string, module: AdaptableModule): ScalarAggregationParameter;
+    evaluateAggregatedScalarExpression(expression: string, module: AdaptableModule, getRowNodes?: () => IRowNode[]): ScalarAggregationParameter;
     evaluateObservableExpression(reactiveExpression: string, module: AdaptableModule): Observable<CellDataChangedInfo | GridDataChangedInfo>;
     evaluateAggregatedBooleanExpression(aggregationExpression: string, module: AdaptableModule): BooleanAggregationParameter;
     validateBoolean(expressionInput: string, module: AdaptableModule, config?: {

package/src/Utilities/Services/QueryLanguageService.js

@@ -32,7 +32,7 @@ export class QueryLanguageService {
         // currently scalar and boolean expressions are evaluated the same
         return this.evaluateBooleanExpression(expression, module, rowNode);
     }
-    evaluateAggregatedScalarExpression(expression, module) {
+    evaluateAggregatedScalarExpression(expression, module, getRowNodes) {
         const aggregatedScalarFunctions = this.getModuleExpressionFunctionsMap(module).aggregatedScalarFunctions;
         return parser.evaluate(expression, {
             node: null,
@@ -41,6 +41,7 @@ export class QueryLanguageService {
             adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
             functions: aggregatedScalarFunctions,
             evaluateCustomQueryVariable: this.evaluateCustomQueryVariable,
+            getRowNodes,
         });
     }
     evaluateObservableExpression(reactiveExpression, module) {

package/src/Utilities/Services/RowEditService.d.ts

@@ -1,7 +1,8 @@
-import { IRowEditService } from './Interface/IRowEditService';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-export declare class RowEditService implements IRowEditService {
+import { IAdaptableService } from './Interface/IAdaptableService';
+export declare class RowEditService implements IAdaptableService {
     private adaptableApi;
     constructor(adaptableApi: AdaptableApi);
     private autoHandleActionRowButtons;
+    destroy(): void;
 }

package/src/Utilities/Services/RowEditService.js

@@ -1,4 +1,3 @@
-// @ts-ignore
 export class RowEditService {
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
@@ -37,4 +36,7 @@ export class RowEditService {
             adaptableApi.gridApi.addGridData([newRowData], config);
         }
     }
+    destroy() {
+        // nothing yet
+    }
 }

package/src/Utilities/Services/SummaryService.d.ts

@@ -0,0 +1,19 @@
+import { IRowNode } from '@ag-grid-community/core';
+import { AggregatedScalarLiveValue } from './AggregatedScalarLiveValue';
+import { AdaptableApi, AdaptableModule } from '../../types';
+export declare const summarySupportedExpressions: readonly ["SUM", "AVG", "MIN", "MAX", "COUNT", "MEDIAN", "MODE", "DISTINCT", "ONLY", "STD_DEVIATION"];
+export type SummarySupportedExpression = (typeof summarySupportedExpressions)[number];
+export type SumaryConfig = {
+    expression: {
+        function: SummarySupportedExpression;
+    };
+    columnId: string;
+    getRowNodes?: () => IRowNode[];
+};
+export declare class SummaryService {
+    private adaptableApi;
+    constructor(adaptableApi: AdaptableApi);
+    evaluateExpressionValue(config: SumaryConfig, moduleId: AdaptableModule): any;
+    evaluateScalarLiveValue(config: SumaryConfig, moduleId: AdaptableModule): AggregatedScalarLiveValue;
+    destroy(): void;
+}

package/src/Utilities/Services/SummaryService.js

@@ -0,0 +1,29 @@
+import { AggregatedScalarLiveValue } from './AggregatedScalarLiveValue';
+export const summarySupportedExpressions = [
+    'SUM',
+    'AVG',
+    'MIN',
+    'MAX',
+    'COUNT',
+    'MEDIAN',
+    'MODE',
+    'DISTINCT',
+    'ONLY',
+    'STD_DEVIATION',
+];
+export class SummaryService {
+    constructor(adaptableApi) {
+        this.adaptableApi = adaptableApi;
+    }
+    evaluateExpressionValue(config, moduleId) {
+        return this.evaluateScalarLiveValue(config, moduleId).getGlobalAggregatedValue();
+    }
+    evaluateScalarLiveValue(config, moduleId) {
+        return new AggregatedScalarLiveValue({
+            aggregatedScalarExpression: `${config.expression.function}([${config.columnId}])`,
+        }, moduleId, this.adaptableApi, config.getRowNodes);
+    }
+    destroy() {
+        this.adaptableApi = null;
+    }
+}

package/src/View/AdaptableView.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import { ProgressIndicator } from '../components/ProgressIndicator/ProgressIndicator';
 import { ToastContainer } from '../components/Toastify';
 import * as PopupRedux from '../Redux/ActionsReducers/PopupRedux';
-import { AdaptableLoadingScreen } from './Components/Popups/AdaptableLoadingScreen';
 import { AdaptablePopup } from './Components/Popups/AdaptablePopup';
 import { AdaptablePopupConfirmation } from './Components/Popups/AdaptablePopupConfirmation';
 import { AdaptablePopupPrompt } from './Components/Popups/AdaptablePopupPrompt';
@@ -23,7 +22,6 @@ class AdaptableView extends React.Component {
             React.createElement(GridCellPopup, null),
             React.createElement(QuickSearchDrawer, null),
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard, { api: this.props.AdaptableApi })),
-            this.props.AdaptableApi.optionsApi.getUserInterfaceOptions().showLoadingScreen && (React.createElement(AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup })),
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             Boolean(this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup) && (React.createElement(AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi })),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
@@ -33,7 +31,7 @@ class AdaptableView extends React.Component {
             , { 
                 // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
                 // instance is destroyed and re-created many times
-                containerId: adaptableOptions.adaptableId, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
+                containerId: `Toastify-${adaptableOptions.adaptableId}`, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(WindowPopups, null),
             React.createElement(FormPopups, null),

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.js

@@ -7,7 +7,7 @@ import GridOptionsForm from './GridOptionsForm';
 import EntitlementsForm from './EntitlementsForm';
 import { UIElementsForm } from './UIOptions/UiOptionsForm';
 import { AdaptableOptionsForm } from './AdaptableOptionsForm';
-import AdaptableHelper from '../../../Utilities/Helpers/AdaptableHelper';
+import { applyDefaultAdaptableOptions } from '../../../agGrid/defaultAdaptableOptions';
 export const ConfigurationWizard = (props) => {
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
     const [adaptableConfig, setAdaptableConfig] = useState(() => {
@@ -17,7 +17,7 @@ export const ConfigurationWizard = (props) => {
             },
         };
         const gridOptions = Object.assign(Object.assign({}, gridOptionDefaults), props.adaptableConfig.gridOptions);
-        const adaptableOptions = AdaptableHelper.assignAdaptableOptions(props.adaptableConfig.adaptableOptions);
+        const adaptableOptions = applyDefaultAdaptableOptions(props.adaptableConfig.adaptableOptions);
         return { gridOptions, adaptableOptions };
     });
     const [selectedColumns, setSelectedColumns] = useState(() => {

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -51,7 +51,7 @@ class BulkUpdatePopupComponent extends React.Component {
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();
                         }, variant: "raised", tone: "accent" }, "Apply to Grid")))) : (React.createElement(React.Fragment, null,
-                React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, "Select an existing column value from the dropdown, or enter a new value"),
+                React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, "Select an existing Column value from the dropdown, or enter a new value"),
                 React.createElement(Flex, { marginTop: 2, flexDirection: "row", alignItems: "center" },
                     React.createElement(Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
                         React.createElement(ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), style: { width: '100%', maxWidth: 'inherit' } })),

package/src/View/CalculatedColumn/utils.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableApi, CalculatedColumn } from '../../types';
-export declare const getExpressionType: (calculatedColumn: CalculatedColumn, api: AdaptableApi) => "ScalarExpression" | "AggregatedScalarExpression" | "CumulativeAggregatedExpression" | "QuantileAggregatedExpression";
+export declare const getExpressionType: (calculatedColumn: CalculatedColumn, api: AdaptableApi) => "AggregatedScalarExpression" | "ScalarExpression" | "CumulativeAggregatedExpression" | "QuantileAggregatedExpression";

package/src/View/CellSummary/CellSummaryPopup.js

@@ -11,7 +11,7 @@ class CellSummaryPopupComponent extends React.Component {
             // afterwards, we will go on with the cell summary logic, as that will evaluate the current(column) cell selection
             this.props.api.columnApi.selectColumn((_c = this.props.popupParams) === null || _c === void 0 ? void 0 : _c.column.columnId);
             // we also need to update the internal state of the selected cells
-            this.props.api.internalApi.getAdaptableInstance().setSelectedCells();
+            this.props.api.internalApi.getAdaptableInstance().refreshSelectedCellsState();
         }
         this.props.onCreateCellSummary();
     }

package/src/View/Comments/CommentsPopup.js

@@ -29,8 +29,8 @@ const CellComments = (props) => {
                     return formatDate(params.data.Timestamp, 'MM.DD.YYYY HH:mm');
                 },
             },
-            message: {
-                header: 'Message',
+            text: {
+                header: 'Text',
                 field: 'Value',
                 defaultFlex: 3,
             },
@@ -38,15 +38,19 @@ const CellComments = (props) => {
         return columns;
     }, []);
     const cellValue = adaptable.api.gridApi.getCellDisplayValue(props.commentThread.PrimaryKeyValue, props.commentThread.ColumnId);
+    const primaryKeyHeader = React.useMemo(() => {
+        const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+        return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
+    }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
     return (React.createElement(Panel, { mb: 2, header: React.createElement(Flex, { width: "100%", alignItems: "center" },
             React.createElement(Box, { mr: 2 },
                 "Cell Value: ",
                 cellValue),
             React.createElement(Box, { mr: 2 },
-                "Primary Key: [",
-                props.commentThread.PrimaryKeyValue,
-                "]"),
+                primaryKeyHeader,
+                ": ",
+                props.commentThread.PrimaryKeyValue),
             React.createElement(Box, null,
                 "Column: ",
                 columnFriendlyName),
@@ -72,11 +76,11 @@ const CellComments = (props) => {
                 }, rowHeight: 30, columnHeaderHeight: 30, domProps: tableDOMProps, columns: columnsMap }))));
 };
 export const CommentsPopup = (props) => {
-    const cellComments = useSelector((state) => {
+    const commentThreads = useSelector((state) => {
         return state.Comment.CommentThreads;
     });
-    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (cellComments !== null && cellComments !== void 0 ? cellComments : []).map((cellComments, index) => {
+    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads !== null && commentThreads !== void 0 ? commentThreads : []).map((commentThread, index) => {
         var _a;
-        return React.createElement(CellComments, { key: (_a = cellComments === null || cellComments === void 0 ? void 0 : cellComments.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: cellComments });
+        return React.createElement(CellComments, { key: (_a = commentThread === null || commentThread === void 0 ? void 0 : commentThread.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: commentThread });
     })));
 };

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/NewScopeComponent.js

@@ -56,6 +56,7 @@ export const renderScopeSummary = (scope, labels) => {
 };
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 export const NewScopeComponent = (props) => {
+    var _a, _b;
     const { api } = useAdaptable();
     const { scopeApi, columnApi } = api;
     const [columnsSearchText, setColumnsSearchText] = useState('');
@@ -79,6 +80,9 @@ export const NewScopeComponent = (props) => {
         if (scopeApi.scopeHasDataType(props.scope)) {
             return 'DataType';
         }
+        if (scopeApi.scopeHasColumnType(props.scope)) {
+            return 'ColumnType';
+        }
         return undefined;
     };
     const onScopeSelectChanged = (value) => {
@@ -93,6 +97,11 @@ export const NewScopeComponent = (props) => {
                 DataTypes: [],
             };
         }
+        else if (value == 'ColumnType') {
+            newScope = {
+                ColumnTypes: [],
+            };
+        }
         else {
             newScope = {
                 All: true,
@@ -128,6 +137,10 @@ export const NewScopeComponent = (props) => {
     if (Array.isArray(props.availableDataTypes)) {
         dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
     }
+    const hasColumnTypes = React.useMemo(() => {
+        var _a;
+        return ((_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }, []);
     return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
             React.createElement(Radio, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
@@ -135,6 +148,8 @@ export const NewScopeComponent = (props) => {
             React.createElement(Radio, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
         !props.disableDataTypes && (React.createElement(Tabs.Tab, { value: "DataType" },
             React.createElement(Radio, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
+        hasColumnTypes && (React.createElement(Tabs.Tab, { value: "ColumnType" },
+            React.createElement(Radio, { margin: 0, value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
         props.hideWholeRow ? null : (React.createElement(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
             React.createElement(Text, { padding: 2, pl: 0, fontSize: 2 }, props.descriptions.rowScope))),
         !props.disableColumns && (React.createElement(Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
@@ -147,5 +162,23 @@ export const NewScopeComponent = (props) => {
         !props.disableDataTypes && (React.createElement(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
             React.createElement(Box, null,
                 props.descriptions.dataTypeScope && (React.createElement(Text, { p: 2, pl: 0, mb: 2, fontSize: 2 }, props.descriptions.dataTypeScope)),
-                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label)))))))));
+                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
+        hasColumnTypes && (React.createElement(Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
+            React.createElement(Box, null,
+                React.createElement(Flex, { flexDirection: "column" }, (_b = (_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
+                    var _a;
+                    return (React.createElement(CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && ((_a = props.scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.includes(columnType)), onChange: (checked) => {
+                            let columnTypes = [].concat(props.scope.ColumnTypes);
+                            if (checked) {
+                                columnTypes.push(columnType);
+                            }
+                            else {
+                                columnTypes = columnTypes.filter((ct) => ct !== columnType);
+                            }
+                            let newScope = {
+                                ColumnTypes: columnTypes,
+                            };
+                            props.updateScope(newScope);
+                        } }, columnType));
+                })))))));
 };

package/src/View/Components/Popups/AdaptableLoadingScreen.d.ts

@@ -1,8 +1,9 @@
-import * as React from 'react';
-export interface IAdaptableLoadingScreenProps extends React.ClassAttributes<AdaptableLoadingScreen> {
+/// <reference types="react" />
+export interface IAdaptableLoadingScreenProps {
     showLoadingScreen: boolean;
+    loadingScreenDelay?: number;
+    loadingScreenTitle?: string;
+    loadingScreenText?: string;
     onClose?: () => {};
 }
-export declare class AdaptableLoadingScreen extends React.Component<IAdaptableLoadingScreenProps, {}> {
-    render(): JSX.Element;
-}
+export declare function AdaptableLoadingScreen(props: IAdaptableLoadingScreenProps): JSX.Element;

package/src/View/Components/Popups/AdaptableLoadingScreen.js

@@ -1,13 +1,23 @@
 import * as React from 'react';
 import Dialog from '../../../components/Dialog';
 import { Box } from 'rebass';
-export class AdaptableLoadingScreen extends React.Component {
-    render() {
-        return (React.createElement(Dialog, { modal: true, isOpen: this.props.showLoadingScreen, onDismiss: this.props.onClose, showCloseButton: false, style: {
-                minHeight: 'auto',
-            } },
-            React.createElement(Box, { padding: 3 },
-                React.createElement("h4", null, "Initialising Grid"),
-                React.createElement("p", null, "Retrieving your settings and setting up the grid..."))));
-    }
+export function AdaptableLoadingScreen(props) {
+    const { showLoadingScreen, loadingScreenDelay, loadingScreenTitle, loadingScreenText } = props;
+    const [delayElapsed, setDelayElapsed] = React.useState(typeof loadingScreenDelay === 'number' ? false : showLoadingScreen);
+    React.useEffect(() => {
+        if (typeof loadingScreenDelay === 'number') {
+            const timeoutId = setTimeout(() => {
+                setDelayElapsed(true);
+            }, loadingScreenDelay);
+            return () => {
+                clearTimeout(timeoutId);
+            };
+        }
+    }, [loadingScreenDelay]);
+    return (React.createElement(Dialog, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen", style: {
+            minHeight: 'auto',
+        } },
+        React.createElement(Box, { padding: 3 },
+            React.createElement("h4", null, loadingScreenTitle !== null && loadingScreenTitle !== void 0 ? loadingScreenTitle : 'Initialising Grid'),
+            React.createElement("p", null, loadingScreenText !== null && loadingScreenText !== void 0 ? loadingScreenText : 'Retrieving your settings and setting up the grid...'))));
 }

package/src/View/Components/Popups/AdaptableToaster.js

@@ -12,7 +12,7 @@ export const showToast = (props) => {
     });
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
     const toastProps = ObjectFactory.CreateToastOptions(adaptableOptions.notificationsOptions, {
-        containerId: adaptableOptions.adaptableId,
+        containerId: `Toastify-${adaptableOptions.adaptableId}`,
         onClose: () => {
             off();
         },