@adaptabletools/adaptable-cjs 18.0.0-canary.21 → 18.0.0-canary.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "version": "18.0.0-canary.21",
+  "version": "18.0.0-canary.22",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableOptions/CommentOptions.d.ts

@@ -16,6 +16,12 @@ export interface CommentOptions<TData = any> {
      * @param commentThreads
      */
     persistCommentThreads?(commentThreads: CommentThread[]): void;
+    /**
+     * Format string for formatting in the Comments Popup
+     *
+     * @defaultValue 'dd-MM-yyyy HH:mm:ss'
+     */
+    dateFormat?: string;
 }
 /**
  * Context used when determining if a cell can show Comments

package/src/AdaptableOptions/GroupingOptions.d.ts

@@ -4,10 +4,6 @@ import { KeyCreatorParams } from '@ag-grid-community/core';
  * Options for managing Row and Column Groups in AdapTable
  */
 export interface GroupingOptions<TData = any> {
-    /**
-    * Value to use for 'Balanced Groups' (string columns only)
-    */
-    balancedGroupsKey?: string | ((context: BalancedGroupsKeyContext<TData>) => string);
     /**
      * Places ungrouped columns at pre-grouping indexed position
      * @defaultValue false

package/src/AdaptableOptions/NoteOptions.d.ts

@@ -7,13 +7,19 @@ export interface NoteOptions<TData = any> {
      * Whether a cell can contain Notes
      */
     isCellNotable?: (context: NotableCellContext) => boolean;
+    /**
+     * Format string for formatting in the Notes Popup
+     *
+     * @defaultValue 'dd-MM-yyyy HH:mm:ss'
+     */
+    dateFormat?: string;
 }
 /**
  * Context used when determining if a Note can be added to a Cell
  */
 export interface NotableCellContext extends BaseContext {
     /**
-      * Grid Cell in AdapTable which has been clicked
-      */
+     * Grid Cell in AdapTable which has been clicked
+     */
     gridCell: GridCell;
 }

package/src/Api/ColumnApi.d.ts

@@ -266,4 +266,9 @@ export interface ColumnApi {
      * Returns available columns types defined under columnOptions.columnTypes
      */
     getColumnTypes(): string[];
+    /**
+     * Returns all columns of a given columnType
+     * @param columnType the columnType to filter by
+     */
+    getColumnsByColumnType(columnType: string): AdaptableColumn[];
 }

package/src/Api/Implementation/ColumnApiImpl.d.ts

@@ -3,6 +3,8 @@ import { AdaptableColumn, AdaptableColumnDataType } from '../../PredefinedConfig
 import { ColumnApi } from '../ColumnApi';
 import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 import { ColumnInternalApi } from '../Internal/ColumnInternalApi';
+export declare function isAutoRowGroupColumn(columnId: string): boolean;
+export declare function isAutoPivotColumn(columnId: string): boolean;
 export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     internalApi: ColumnInternalApi;
     constructor(adaptable: IAdaptable);
@@ -64,4 +66,5 @@ export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     isSpecialColumn(columnId: string): boolean;
     openColumnInfoSettingsPanel(): void;
     getColumnTypes(): string[];
+    getColumnsByColumnType(columnType: string): AdaptableColumn[];
 }

package/src/Api/Implementation/ColumnApiImpl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnApiImpl = void 0;
+exports.ColumnApiImpl = exports.isAutoPivotColumn = exports.isAutoRowGroupColumn = void 0;
 const tslib_1 = require("tslib");
 const ApiBase_1 = require("./ApiBase");
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
@@ -8,6 +8,18 @@ const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const ColumnInternalApi_1 = require("../Internal/ColumnInternalApi");
 const ObjectFactory_1 = require("../../Utilities/ObjectFactory");
+function isAutoRowGroupColumn(columnId) {
+    // put this here as there might be other indicators we are not aware of
+    // perhaps with non auto groups ?
+    //https://www.ag-grid.com/javascript-grid-grouping/
+    return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_GROUPED_COLUMN);
+}
+exports.isAutoRowGroupColumn = isAutoRowGroupColumn;
+function isAutoPivotColumn(columnId) {
+    // put this here as there might be other indicators we are not aware of?
+    return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_PIVOT_COLUMN);
+}
+exports.isAutoPivotColumn = isAutoPivotColumn;
 class ColumnApiImpl extends ApiBase_1.ApiBase {
     constructor(adaptable) {
         super(adaptable);
@@ -56,14 +68,10 @@ class ColumnApiImpl extends ApiBase_1.ApiBase {
         this.adaptable.showColumn(columnId);
     }
     isAutoRowGroupColumn(columnId) {
-        // put this here as there might be other indicators we are not aware of
-        // perhaps with non auto groups ?
-        //https://www.ag-grid.com/javascript-grid-grouping/
-        return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_GROUPED_COLUMN);
+        return isAutoRowGroupColumn(columnId);
     }
     isAutoPivotColumn(columnId) {
-        // put this here as there might be other indicators we are not aware of?
-        return columnId === null || columnId === void 0 ? void 0 : columnId.startsWith(GeneralConstants.AG_GRID_PIVOT_COLUMN);
+        return isAutoPivotColumn(columnId);
     }
     isCalculatedColumn(columnId) {
         return (this.adaptable.api.calculatedColumnApi
@@ -347,5 +355,12 @@ class ColumnApiImpl extends ApiBase_1.ApiBase {
             return columnTypes;
         }
     }
+    getColumnsByColumnType(columnType) {
+        const abColumns = this.getColumns();
+        return abColumns.filter((c) => {
+            var _a;
+            return ((_a = c.columnTypes) !== null && _a !== void 0 ? _a : []).includes(columnType);
+        });
+    }
 }
 exports.ColumnApiImpl = ColumnApiImpl;

package/src/Api/Implementation/ScopeApiImpl.js

@@ -47,7 +47,9 @@ class ScopeApiImpl extends ApiBase_1.ApiBase {
             return 'Columns: All';
         }
         if ('ColumnTypes' in scope) {
-            return ((scope.ColumnTypes.length > 0 ? 'ColumnTypes' : 'ColumnType') + ': ' + scope.ColumnTypes.join(', '));
+            return ((scope.ColumnTypes.length > 0 ? 'ColumnTypes' : 'ColumnType') +
+                ': ' +
+                scope.ColumnTypes.join(', '));
         }
         if ('DataTypes' in scope) {
             return ((scope.DataTypes.length > 0 ? 'DataTypes' : 'DataType') + ': ' + scope.DataTypes.join(', '));
@@ -164,6 +166,7 @@ class ScopeApiImpl extends ApiBase_1.ApiBase {
         return undefined;
     }
     isColumnInNumericScope(column, scope) {
+        var _a, _b;
         // if column is not even numeric then return false
         if (column == null || column == undefined || column.dataType !== 'Number') {
             return false;
@@ -180,9 +183,14 @@ class ScopeApiImpl extends ApiBase_1.ApiBase {
         if ('DataTypes' in scope && scope.DataTypes.includes('Number')) {
             return true;
         }
+        if ('ColumnTypes' in scope &&
+            ((_b = (_a = scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.some) === null || _b === void 0 ? void 0 : _b.call(_a, (scopeColumnType) => { var _a, _b; return (_b = (_a = column.columnTypes) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, scopeColumnType); }))) {
+            return true;
+        }
         return false;
     }
     isColumnInStringsScope(column, scope) {
+        var _a, _b;
         // if column is not even string then return false
         if (column == null || column == undefined || column.dataType !== 'String') {
             return false;
@@ -199,9 +207,14 @@ class ScopeApiImpl extends ApiBase_1.ApiBase {
         if ('DataTypes' in scope && scope.DataTypes.includes('String')) {
             return true;
         }
+        if ('ColumnTypes' in scope &&
+            ((_b = (_a = scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.some) === null || _b === void 0 ? void 0 : _b.call(_a, (scopeColumnType) => { var _a, _b; return (_b = (_a = column.columnTypes) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, scopeColumnType); }))) {
+            return true;
+        }
         return false;
     }
     isColumnInDateScope(column, scope) {
+        var _a, _b;
         // if column is not even numeric then return false
         if (column == null || column == undefined || column.dataType !== 'Date') {
             return false;
@@ -218,6 +231,10 @@ class ScopeApiImpl extends ApiBase_1.ApiBase {
         if ('DataTypes' in scope && scope.DataTypes.includes('Date')) {
             return true;
         }
+        if ('ColumnTypes' in scope &&
+            ((_b = (_a = scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.some) === null || _b === void 0 ? void 0 : _b.call(_a, (scopeColumnType) => { var _a, _b; return (_b = (_a = column.columnTypes) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, scopeColumnType); }))) {
+            return true;
+        }
         return false;
     }
     isScopeInScope(a, b) {
@@ -244,6 +261,22 @@ class ScopeApiImpl extends ApiBase_1.ApiBase {
             })) {
             return true;
         }
+        if ('ColumnTypes' in a &&
+            'ColumnTypes' in b &&
+            a.ColumnTypes.every((columnType) => b.ColumnTypes.includes(columnType))) {
+            return true;
+        }
+        // check if each colum in a has column types in b
+        if ('ColumnIds' in a && 'ColumnTypes' in b) {
+            const inScope = a.ColumnIds.every((columnId) => {
+                const column = this.adaptable.api.columnApi.getColumnWithColumnId(columnId);
+                // check if at least one column-type is in scope
+                return column.columnTypes.some((columnColumnType) => b.ColumnTypes.includes(columnColumnType));
+            });
+            if (inScope) {
+                return true;
+            }
+        }
         return false;
     }
     createCellColorRangesForScope(scope) {

package/src/Api/Internal/ColumnInternalApi.d.ts

@@ -2,6 +2,7 @@ import { ApiBase } from '../Implementation/ApiBase';
 import { Column, IRowNode } from '@ag-grid-community/core';
 import { CustomSort } from '../../PredefinedConfig/CustomSortState';
 import { ColumnValuesComparer } from '../../AdaptableOptions/CustomSortOptions';
+export declare function getAutoRowGroupColumnIdFor(columnId: string): string;
 export declare class ColumnInternalApi extends ApiBase {
     /**
      * Retrieves 'ColumnType' property for a given Column
@@ -15,6 +16,7 @@ export declare class ColumnInternalApi extends ApiBase {
      * Retrieves a list providing the Friendly Name / Caption for all columns
      */
     getAllColumnFriendlyNames(): string[];
+    getAutoRowGroupColumnIdFor(columnId: string): string;
     /**
      * Retrieves AG Grid's field property for the column
      * @param columnId columnId to look up

package/src/Api/Internal/ColumnInternalApi.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnInternalApi = void 0;
+exports.ColumnInternalApi = exports.getAutoRowGroupColumnIdFor = void 0;
 const ApiBase_1 = require("../Implementation/ApiBase");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+function getAutoRowGroupColumnIdFor(columnId) {
+    return `${GeneralConstants_1.AG_GRID_GROUPED_COLUMN}-${columnId}`;
+}
+exports.getAutoRowGroupColumnIdFor = getAutoRowGroupColumnIdFor;
 class ColumnInternalApi extends ApiBase_1.ApiBase {
     /**
      * Retrieves 'ColumnType' property for a given Column
@@ -24,6 +28,9 @@ class ColumnInternalApi extends ApiBase_1.ApiBase {
             return c.friendlyName;
         });
     }
+    getAutoRowGroupColumnIdFor(columnId) {
+        return getAutoRowGroupColumnIdFor(columnId);
+    }
     /**
      * Retrieves AG Grid's field property for the column
      * @param columnId columnId to look up

package/src/Utilities/Constants/GeneralConstants.d.ts

@@ -35,6 +35,7 @@ export declare const ADAPTABLE_ROW_ACTION_BUTTONS = "adaptableRowActionButtons";
 export declare const ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = "(ActionRowButtons)";
 export declare const ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = "(FDC3ActionColumn)";
 export declare const DEFAULT_DATE_FORMAT_PATTERN = "dd-MM-yyyy";
+export declare const DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME = "dd-MM-yyyy HH:mm:ss";
 export declare const BLANK_DISTINCT_COLUMN_VALUE = "[BLANKS]";
 export declare const DEFAULT_STRING_DISPLAY_VALUE = "Hello World";
 export declare const DEFAULT_INTEGER_DISPLAY_VALUE = 12345;

package/src/Utilities/Constants/GeneralConstants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALERT_DEFAULT_SHOW_POPUP = exports.ALERT_DEFAULT_MESSAGE_TYPE = exports.PLUS_MINUS_DEFAULT_NUDGE_VALUE = exports.SERVER_VALIDATION_MESSAGE_TYPE = exports.SERVER_VALIDATION_HEADER = exports.DEFAULT_LIVE_REPORT_THROTTLE_TIME = exports.THEME_DEFAULT_CURRENT_THEME = exports.SYSTEM_DEFAULT_SYSTEM_STATUS_TYPE = exports.CELL_SUMMARY_DEFAULT_OPERATION = exports.QUICK_SEARCH_DEBOUNCE_TIME = exports.QUICK_SEARCH_DEFAULT_FORE_COLOR = exports.QUICK_SEARCH_DEFAULT_BACK_COLOR = exports.SYSTEM_STATUS_DEFAULT_MAX_MESSAGES_IN_STORE = exports.DEFAULT_DOUBLE_DISPLAY_VALUE = exports.DEFAULT_INTEGER_DISPLAY_VALUE = exports.DEFAULT_STRING_DISPLAY_VALUE = exports.BLANK_DISTINCT_COLUMN_VALUE = exports.DEFAULT_DATE_FORMAT_PATTERN = exports.ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = exports.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = exports.ADAPTABLE_ROW_ACTION_BUTTONS = exports.AG_GRID_CHART_WINDOW = exports.AG_GRID_PIVOT_COLUMN = exports.AG_GRID_GROUPED_COLUMN = exports.GROUP_PATH_SEPARATOR = exports.HALF_SECOND = exports.AB_FDC3_COLUMN = exports.AB_ROW_ACTIONS_COLUMN = exports.AB_SPECIAL_COLUMN = exports.EMPTY_ARRAY = exports.EMPTY_STRING = exports.FILTER_THROTTLE = exports.FILTER_NEVER = exports.FILTER_ALWAYS = exports.ALL_COLUMN_VALUES = exports.READ_ONLY_STYLE = exports.MENU_PREFIX = exports.AGGRID_TOOLPANEL_COLUMNS = exports.AGGRID_TOOLPANEL_FILTERS = exports.ADAPTABLE_TOOLPANEL_COMPONENT = exports.ADAPTABLE_TOOLPANEL_ID = exports.ADAPTABLE = exports.ADAPTABLE_ID = exports.USER_NAME = exports.OS_THEME = exports.DARK_THEME = exports.LIGHT_THEME = exports.DEFAULT_LAYOUT = exports.MISSING_COLUMN = exports.AUTOGENERATED_PK_COLUMN = void 0;
-exports.THEME_STYLE = exports.SELECTED_ROWS_REPORT = exports.SELECTED_CELLS_REPORT = exports.CURRENT_DATA_REPORT = exports.ALL_DATA_REPORT = exports.VISUAL_DATA_REPORT = exports.SYSTEM_THEMES = exports.SMART_EDIT_MATH_OPERATION_STATE_PROPERTY = exports.SMART_EDIT_VALUE_STATE_PROPERTY = exports.QUICK_SEARCH_STYLE_STATE_PROPERTY = exports.QUICK_SEARCH_TEXT_STATE_PROPERTY = exports.CURRENT_THEME_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DURATION_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DOWN_COLOR_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_UP_COLOR_STATE_PROPERTY = exports.CURRENT_REPORT_STATE_PROPERTY = exports.CURRENT_LAYOUT_STATE_PROPERTY = exports.SUMMARY_OPERATION_STATE_PROPERTY = void 0;
+exports.ALERT_DEFAULT_MESSAGE_TYPE = exports.PLUS_MINUS_DEFAULT_NUDGE_VALUE = exports.SERVER_VALIDATION_MESSAGE_TYPE = exports.SERVER_VALIDATION_HEADER = exports.DEFAULT_LIVE_REPORT_THROTTLE_TIME = exports.THEME_DEFAULT_CURRENT_THEME = exports.SYSTEM_DEFAULT_SYSTEM_STATUS_TYPE = exports.CELL_SUMMARY_DEFAULT_OPERATION = exports.QUICK_SEARCH_DEBOUNCE_TIME = exports.QUICK_SEARCH_DEFAULT_FORE_COLOR = exports.QUICK_SEARCH_DEFAULT_BACK_COLOR = exports.SYSTEM_STATUS_DEFAULT_MAX_MESSAGES_IN_STORE = exports.DEFAULT_DOUBLE_DISPLAY_VALUE = exports.DEFAULT_INTEGER_DISPLAY_VALUE = exports.DEFAULT_STRING_DISPLAY_VALUE = exports.BLANK_DISTINCT_COLUMN_VALUE = exports.DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME = exports.DEFAULT_DATE_FORMAT_PATTERN = exports.ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = exports.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = exports.ADAPTABLE_ROW_ACTION_BUTTONS = exports.AG_GRID_CHART_WINDOW = exports.AG_GRID_PIVOT_COLUMN = exports.AG_GRID_GROUPED_COLUMN = exports.GROUP_PATH_SEPARATOR = exports.HALF_SECOND = exports.AB_FDC3_COLUMN = exports.AB_ROW_ACTIONS_COLUMN = exports.AB_SPECIAL_COLUMN = exports.EMPTY_ARRAY = exports.EMPTY_STRING = exports.FILTER_THROTTLE = exports.FILTER_NEVER = exports.FILTER_ALWAYS = exports.ALL_COLUMN_VALUES = exports.READ_ONLY_STYLE = exports.MENU_PREFIX = exports.AGGRID_TOOLPANEL_COLUMNS = exports.AGGRID_TOOLPANEL_FILTERS = exports.ADAPTABLE_TOOLPANEL_COMPONENT = exports.ADAPTABLE_TOOLPANEL_ID = exports.ADAPTABLE = exports.ADAPTABLE_ID = exports.USER_NAME = exports.OS_THEME = exports.DARK_THEME = exports.LIGHT_THEME = exports.DEFAULT_LAYOUT = exports.MISSING_COLUMN = exports.AUTOGENERATED_PK_COLUMN = void 0;
+exports.THEME_STYLE = exports.SELECTED_ROWS_REPORT = exports.SELECTED_CELLS_REPORT = exports.CURRENT_DATA_REPORT = exports.ALL_DATA_REPORT = exports.VISUAL_DATA_REPORT = exports.SYSTEM_THEMES = exports.SMART_EDIT_MATH_OPERATION_STATE_PROPERTY = exports.SMART_EDIT_VALUE_STATE_PROPERTY = exports.QUICK_SEARCH_STYLE_STATE_PROPERTY = exports.QUICK_SEARCH_TEXT_STATE_PROPERTY = exports.CURRENT_THEME_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DURATION_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DOWN_COLOR_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_UP_COLOR_STATE_PROPERTY = exports.CURRENT_REPORT_STATE_PROPERTY = exports.CURRENT_LAYOUT_STATE_PROPERTY = exports.SUMMARY_OPERATION_STATE_PROPERTY = exports.ALERT_DEFAULT_SHOW_POPUP = void 0;
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const UIHelper_1 = require("../../View/UIHelper");
 exports.AUTOGENERATED_PK_COLUMN = '__ADAPTABLE_PK__';
@@ -38,6 +38,7 @@ exports.ADAPTABLE_ROW_ACTION_BUTTONS = 'adaptableRowActionButtons';
 exports.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = '(ActionRowButtons)';
 exports.ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME = '(FDC3ActionColumn)';
 exports.DEFAULT_DATE_FORMAT_PATTERN = 'dd-MM-yyyy';
+exports.DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME = 'dd-MM-yyyy HH:mm:ss';
 exports.BLANK_DISTINCT_COLUMN_VALUE = '[BLANKS]';
 exports.DEFAULT_STRING_DISPLAY_VALUE = 'Hello World';
 exports.DEFAULT_INTEGER_DISPLAY_VALUE = 12345;

package/src/View/Comments/CommentsPopup.js

@@ -7,10 +7,11 @@ const react_redux_1 = require("react-redux");
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const rebass_1 = require("rebass");
-const dateUtils_1 = require("../../Utilities/ExpressionFunctions/dateUtils");
+const format_1 = tslib_1.__importDefault(require("date-fns/format"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const tableDOMProps = {
     style: {
         minHeight: 160,
@@ -18,7 +19,9 @@ const tableDOMProps = {
     },
 };
 const CellComments = (props) => {
+    var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dateFormat = (_a = adaptable.api.optionsApi.getCommentOptions().dateFormat) !== null && _a !== void 0 ? _a : GeneralConstants_1.DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME;
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
         const columns = {
@@ -31,7 +34,7 @@ const CellComments = (props) => {
                 field: 'Timestamp',
                 maxWidth: 150,
                 valueGetter: (params) => {
-                    return (0, dateUtils_1.formatDate)(params.data.Timestamp, 'MM.DD.YYYY HH:mm');
+                    return (0, format_1.default)(params.data.Timestamp, dateFormat);
                 },
             },
             text: {

package/src/View/Components/CellPopup/index.js

@@ -17,7 +17,7 @@ const ensurePortalElement = (className) => {
     }
     portalElement = document.createElement('div');
     portalElement.style.position = 'absolute';
-    portalElement.style.zIndex = '999';
+    portalElement.style.zIndex = '4'; // under the context menu
     portalElement.style.top = '0px';
     portalElement.style.left = '0px';
     if (className) {

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -136,7 +136,7 @@ const DataImportWizard = (props) => {
         return [...userDefinedHandlers, ...systemFileHandlers_1.systemFileHandlers];
     }, []);
     const supportedFileFormats = React.useMemo(() => {
-        return fileHandlers.map((h) => h.fileExtension).join(', ');
+        return [...new Set(fileHandlers.map((h) => h.fileExtension)).values()].join(', ');
     }, [fileHandlers]);
     const readFile = React.useCallback(async (file) => {
         var _a, _b;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -149,6 +149,19 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'String') {
         return 'String';
     }
+    if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
+        // need to check if all column with this column type has the same data type and return that particular one
+        const columns = scope.ColumnTypes.flatMap((columnType) => {
+            return api.columnApi.getColumnsByColumnType(columnType);
+        });
+        // check if all have the same type
+        if (columns.length &&
+            columns.every((column) => column.dataType === columns[0].dataType) &&
+            // supported data types
+            ['Number', 'Date', 'String'].includes(columns[0].dataType)) {
+            return columns[0].dataType;
+        }
+    }
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
@@ -196,7 +209,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -255,13 +268,13 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(rebass_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, { mr: 3 },
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
-                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_c = data.DisplayFormat.Options.Prefix) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_d = data.DisplayFormat.Options.Suffix) !== null && _d !== void 0 ? _d : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Ceiling" },
@@ -286,7 +299,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Input_1.default, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -11,11 +11,6 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
 const Toggle_1 = require("../../../components/Toggle/Toggle");
-let alignmentOptions = [
-    { value: 'Left', label: 'Left' },
-    { value: 'Right', label: 'Right' },
-    { value: 'Center', label: 'Center' },
-];
 const renderFormatColumnSettingsSummary = (data) => {
     var _a;
     return (React.createElement(rebass_1.Box, { padding: 2 },

package/src/View/Note/NotePopup.js

@@ -6,9 +6,11 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const NoteRedux_1 = require("../../Redux/ActionsReducers/NoteRedux");
+const format_1 = tslib_1.__importDefault(require("date-fns/format"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -17,8 +19,10 @@ const tableDOMProps = {
     },
 };
 const NotePopup = (props) => {
+    var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const primaryKeyHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId);
+    const dateFormat = (_a = adaptable.api.optionsApi.getNoteOptions().dateFormat) !== null && _a !== void 0 ? _a : GeneralConstants_1.DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME;
     const allNotes = (0, react_redux_1.useSelector)((state) => (0, NoteRedux_1.GetAllNotesSelector)(state.Note));
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
@@ -43,8 +47,7 @@ const NotePopup = (props) => {
             timestamp: {
                 field: 'Timestamp',
                 valueGetter: (params) => {
-                    var _a;
-                    return (_a = new Date(params.data.Timestamp)) === null || _a === void 0 ? void 0 : _a.toDateString();
+                    return (0, format_1.default)(params.data.Timestamp, dateFormat);
                 },
             },
             delete: {

package/src/agGrid/AdaptableAgGrid.js

@@ -100,6 +100,7 @@ const Modal_1 = require("../components/Modal");
 const AdaptableLoadingScreen_1 = require("../View/Components/Popups/AdaptableLoadingScreen");
 const react_1 = require("react");
 const AdaptableHelper_1 = require("../Utilities/Helpers/AdaptableHelper");
+const buildSortedColumnStateForLayout_1 = require("./buildSortedColumnStateForLayout");
 const RowNodeProto = core_1.RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 /**
@@ -2207,53 +2208,20 @@ class AdaptableAgGrid {
         });
         this.deriveAdaptableColumnStateFromAgGrid();
     }
-    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, isPivot) {
+    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, layout) {
+        layout = layout || this.api.layoutApi.getCurrentLayout();
+        visibleColumnList = visibleColumnList || layout.Columns;
         columnState = columnState || this.agGridAdapter.getAgGridApi().getColumnState();
-        const pivotMode = isPivot !== null && isPivot !== void 0 ? isPivot : this.api.layoutApi.isCurrentLayoutPivot();
-        const NewVisibleColumnIdsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const columnsStateIndexes = columnState.reduce((acc, colState, index) => {
-            acc[colState.colId] = index;
-            return acc;
-        }, {});
-        const newVisibleColumnsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const result = [...columnState]
-            .sort((colState1, colState2) => {
-            const colId1 = colState1.colId;
-            const colId2 = colState2.colId;
-            const originalIndex1 = columnsStateIndexes[colId1];
-            const originalIndex2 = columnsStateIndexes[colId2];
-            if (pivotMode) {
-                const isRowGroup1 = this.api.columnApi.isAutoRowGroupColumn(colId1);
-                const isRowGroup2 = this.api.columnApi.isAutoRowGroupColumn(colId2);
-                if (isRowGroup1 && isRowGroup2) {
-                    return 1;
-                }
-                if (isRowGroup1) {
-                    return -1;
-                }
-                if (isRowGroup2) {
-                    return 1;
-                }
-            }
-            if (newVisibleColumnsMap[colId1] != null && newVisibleColumnsMap[colId2] == null) {
-                return -1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] != null) {
-                return 1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] == null) {
-                return originalIndex1 - originalIndex2;
-            }
-            return newVisibleColumnsMap[colState1.colId] - newVisibleColumnsMap[colState2.colId];
-        })
-            .map((colState) => (Object.assign(Object.assign({}, colState), { hide: NewVisibleColumnIdsMap[colState.colId] == null })));
-        return result;
+        return (0, buildSortedColumnStateForLayout_1.buildSortedColumnStateForLayout)({
+            columnState: columnState.map((colState) => {
+                return {
+                    colId: colState.colId,
+                    hide: colState.hide,
+                };
+            }),
+            layout: Object.assign(Object.assign({}, layout), { Columns: visibleColumnList }),
+            gridOptions: this.agGridAdapter.getLiveGridOptions(),
+        });
     }
     getDistinctValuesForColumn(column, distinctValuesParams) {
         let gridCells = this.getGridCellsForPermittedValues(column, distinctValuesParams);
@@ -3194,10 +3162,6 @@ class AdaptableAgGrid {
             layout.PinnedColumnsMap = layout.PinnedColumnsMap || {};
             layout.PinnedColumnsMap[actionRowColumn.colId] = actionRowColumn.pinned;
         }
-        const layoutColumnsMap = layout.Columns.reduce((acc, colId) => {
-            acc[colId] = true;
-            return acc;
-        }, {});
         const columnsState = this.agGridAdapter.getAgGridApi().getColumnState();
         const columnsStateIndexes = {};
         const columnsStateMap = columnsState.reduce((acc, colState, index) => {
@@ -3229,20 +3193,19 @@ class AdaptableAgGrid {
                 .getPivotResultColumns()) === null || _b === void 0 ? void 0 : _b.map((column) => column.getColId())) || [];
         let isChanged = false;
         const colsToAutoSize = {};
-        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, !!layout.EnablePivot);
+        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, layout);
         newColumnsState = newColumnsState
             .map((colState) => {
             var _a, _b, _c;
             const { colId } = colState;
             const oldColState = columnsStateMap[colId];
-            const hide = this.api.columnApi.isAutoPivotColumn(colId)
-                ? colState.hide
-                : !layoutColumnsMap[colId];
-            const newColState = Object.assign(Object.assign({}, oldColState), { hide });
+            // it's important to have width here, so it's not inherited from the existing colState
+            // which could be from a different layout
+            const newColState = Object.assign(Object.assign(Object.assign({}, oldColState), { width: null }), colState);
             if (layout.ColumnWidthMap && layout.ColumnWidthMap[colId] != null) {
                 newColState.width = layout.ColumnWidthMap[colId];
             }
-            else if (!hide) {
+            else if (!colState.hide) {
                 // autosize only the columns which are part of the selected layout
                 colsToAutoSize[colId] = true;
             }
@@ -3251,11 +3214,7 @@ class AdaptableAgGrid {
             }
             newColState.rowGroupIndex =
                 groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
-            const previousRowGroup = newColState.rowGroup;
             newColState.rowGroup = newColState.rowGroupIndex != null;
-            if (!previousRowGroup && newColState.rowGroup) {
-                this.agGridColumnAdapter.triggerSetupColumnKeyCreator(colId);
-            }
             const normalizePinned = (pinnedValue) => {
                 if (typeof pinnedValue === 'string') {
                     return pinnedValue;

package/src/agGrid/AgGridAdapter.d.ts

@@ -24,6 +24,7 @@ export declare class AgGridAdapter {
     grabAgGridApiOnTheFly(args: unknown): void;
     getLiveGridOptions(): GridOptions | undefined;
     updateGridOptions(options: ManagedGridOptions): void;
+    getGridOption<Key extends keyof GridOptions>(key: Key): GridOptions[Key];
     setGridOption<Key extends ManagedGridOptionKey>(key: Key, value: GridOptions[Key]): void;
     getUserGridOptionsProperty<T extends keyof GridOptions>(propertyName: T): GridOptions[T];
     updateColumnFilterActiveState(): void;

package/src/agGrid/AgGridAdapter.js

@@ -64,6 +64,10 @@ class AgGridAdapter {
         var _a;
         (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.updateGridOptions(options);
     }
+    getGridOption(key) {
+        var _a;
+        return (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.getGridOption(key);
+    }
     setGridOption(key, value) {
         var _a;
         (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.setGridOption(key, value);

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -12,7 +12,6 @@ export declare class AgGridColumnAdapter {
     setColDefProperty<T extends keyof ColDef>(col: Column, propertyName: T, propertyGetter: (userPropertyValue: ColDef[T]) => ColDef[T] | undefined): void;
     getUserColDefProperty<T extends keyof ColDef>(columnId: string, propertyName: T): ColDef[T] | undefined;
     setupColumns(): void;
-    triggerSetupColumnKeyCreator(colId: string): void;
     private setupColumnValueGetter;
     private setupColumnCellClass;
     private setupColumnCellStyle;
@@ -21,7 +20,6 @@ export declare class AgGridColumnAdapter {
     private setupColumnTooltipValueGetter;
     private setupColumnQuickFilerText;
     private setupColumnAllowedAggFuncs;
-    private setupColumnKeyCreator;
     private setupColumnCellDataType;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
     private setupColumnFilter;