@adaptabletools/adaptable 12.0.3 → 12.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1656962682750;
+declare const _default: 1657113089379;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1656962682750;
+exports.default = 1657113089379;

package/src/Api/Events/SearchChanged.d.ts

@@ -7,7 +7,7 @@ import { ColumnFilter, DataSet } from '../../types';
  */
 export interface SearchChangedInfo extends BaseEventInfo {
     /**
-     * What search-related change caused the event to fire
+     * How Search was changed: 'CurrentQuery', 'Filter', 'DataChange' or 'Sort'
      */
     searchChangedTrigger: 'CurrentQuery' | 'Filter' | 'DataChange' | 'Sort';
     /**

package/src/Api/FormatColumnApi.d.ts

@@ -199,4 +199,9 @@ export interface FormatColumnApi {
      * @param options formatter options
      */
     getDateFormattedValue(value: any, node: RowNode, abColumn: AdaptableColumn, options: AdaptableFormat['Options']): string;
+    /**
+     * Checks if a Format Column contains a Custom Display Formatter
+     * @param formatColumn Format Column
+     */
+    hasCustomDisplayFormatter(formatColumn: FormatColumn): boolean;
 }

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

@@ -48,4 +48,5 @@ export declare class FormatColumnApiImpl extends ApiBase implements FormatColumn
     getNumberFormattedValue(value: any, node: RowNode, abColumn: AdaptableColumn, options: AdaptableFormat['Options']): string;
     getStringFormattedValue(value: any, node: RowNode, abColumn: AdaptableColumn, options: AdaptableFormat['Options']): string;
     getDateFormattedValue(value: any, node: RowNode, abColumn: AdaptableColumn, options: AdaptableFormat['Options']): string;
+    hasCustomDisplayFormatter(formatColumn: FormatColumn): boolean;
 }

package/src/Api/Implementation/FormatColumnApiImpl.js

@@ -293,6 +293,9 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
         }, customDisplayFormatterContext);
     }
     getNumberFormattedValue(value, node, abColumn, options) {
+        if (!value) {
+            return undefined;
+        }
         const preparedValue = this.applyCustomFormatters(value, node, abColumn, options);
         return FormatHelper_1.default.NumberFormatter(preparedValue, options);
     }
@@ -301,8 +304,27 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
         return FormatHelper_1.default.StringFormatter(preparedValue, options);
     }
     getDateFormattedValue(value, node, abColumn, options) {
+        if (!value) {
+            return undefined;
+        }
         const preparedValue = this.applyCustomFormatters(value, node, abColumn, options);
-        return FormatHelper_1.default.DateFormatter(preparedValue, options);
+        const dateFormatterOptions = options;
+        // only use DateFormatter if we have a pattern
+        return dateFormatterOptions.Pattern
+            ? FormatHelper_1.default.DateFormatter(preparedValue, options)
+            : preparedValue;
+    }
+    hasCustomDisplayFormatter(formatColumn) {
+        var _a;
+        if (!formatColumn || !formatColumn.DisplayFormat || !formatColumn.DisplayFormat.Options) {
+            return false;
+        }
+        const options = formatColumn.DisplayFormat.Options;
+        const columnCustomFormatters = (_a = options === null || options === void 0 ? void 0 : options.CustomDisplayFormats) !== null && _a !== void 0 ? _a : [];
+        if (!(columnCustomFormatters === null || columnCustomFormatters === void 0 ? void 0 : columnCustomFormatters.length)) {
+            return false;
+        }
+        return true;
     }
 }
 exports.FormatColumnApiImpl = FormatColumnApiImpl;

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

@@ -14,6 +14,7 @@ export declare class LayoutApiImpl extends ApiBase implements LayoutApi {
     fireLayoutChangedEvent(trigger: string, oldSate: LayoutState, newState: LayoutState): void;
     getCurrentLayout(): Layout;
     getCurrentLayoutColumnSort(columnId: string): ColumnSort['SortOrder'] | null;
+    areDraftAndCurrentLayoutEqual(): boolean;
     getCurrentLayoutName(): string;
     getLayoutByName(layoutName: string): Layout | null;
     getAllLayout(): Layout[];

package/src/Api/Implementation/LayoutApiImpl.js

@@ -76,6 +76,12 @@ class LayoutApiImpl extends ApiBase_1.ApiBase {
         const currentLayout = this.getCurrentLayout();
         return ((_d = (_c = (_b = (_a = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.ColumnSorts) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (sort) => sort.ColumnId === columnId)) === null || _c === void 0 ? void 0 : _c.SortOrder) !== null && _d !== void 0 ? _d : null);
     }
+    areDraftAndCurrentLayoutEqual() {
+        const state = this.getAdaptableState();
+        const currentLayout = this.getLayoutByName(state.Layout.CurrentLayout);
+        const draftLayout = state.Grid.CurrentLayout;
+        return this.areLayoutsEqual(currentLayout, draftLayout);
+    }
     getCurrentLayoutName() {
         return this.getAdaptableState().Layout.CurrentLayout;
     }

package/src/Api/LayoutApi.d.ts

@@ -198,4 +198,9 @@ export interface LayoutApi {
      * @param layoutName layout from which to remove Column
      */
     removeColumnFromLayout(columnId: string, layoutName: string): void;
+    /**
+     * Checks if the draft layout and the current layout are the same.
+     * Useful when `autoSaveLayouts=true`
+     */
+    areDraftAndCurrentLayoutEqual(): boolean;
 }

package/src/PredefinedConfig/ChartingState.d.ts

@@ -10,7 +10,7 @@ export interface ChartDefinition {
     model: ChartModel;
 }
 /**
- * Predefined Configuration for Quick Search Module
+ * Used for persisting AG Grids in Adaptable State
  */
 export interface ChartingState extends ConfigState {
     /**

package/src/Redux/Store/AdaptableStore.js

@@ -682,12 +682,18 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                     if (adaptable.adaptableOptions.searchOptions.filterResultsAfterQuickSearch) {
                         const actionTyped = action;
                         const searchText = actionTyped.quickSearchText;
+                        //  const gridOptions = adaptable.api.gridApi.getAgGridInstance();
                         if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(searchText)) {
+                            // Currently using this but any searchable would allow us to limit the cols checked
                             const queryText = 'ANY_CONTAINS("' + searchText + '") ';
+                            // const queryText = 'ANY_SEARCHABLE_CONTAINS("' + searchText + '") ';
                             adaptable.api.queryApi.setCurrentQuery(queryText);
+                            // Better still would be to use ag grid if that is possible?
+                            //    gridOptions.api.setQuickFilter(searchText);
                         }
                         else {
                             adaptable.api.queryApi.clearCurrentQuery();
+                            //  gridOptions.api.setQuickFilter('');
                         }
                     }
                     return returnAction;

package/src/Strategy/FormatColumnModule.js

@@ -247,7 +247,7 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 },
                 {
                     name: 'Display Format',
-                    values: [FormatColumnFormatWizardSection_1.getFormatColumnFormatSummaryValue(formatColumn, this.api.formatColumnApi)],
+                    values: [FormatColumnFormatWizardSection_1.getFormatColumnFormatSummaryValue(formatColumn, this.api)],
                 },
                 getFormatColumnSettingsViewItems_1.getFormatColumnSettingsViewItems(formatColumn),
                 getObjectTagsViewItems_1.getObjectTagsViewItems(formatColumn, this.api),

package/src/Strategy/LayoutModule.js

@@ -10,6 +10,7 @@ const LayoutRadioSelector_1 = require("../View/Layout/LayoutRadioSelector");
 const LayoutStatusBarSubPanelPopover_1 = require("../View/Layout/LayoutStatusBarSubPanelPopover");
 const EditCurrentLayoutButton_1 = require("../View/Layout/EditCurrentLayoutButton");
 const LayoutCloneButton_1 = require("../View/Layout/LayoutCloneButton");
+const SaveLayoutButton_1 = require("../View/Layout/SaveLayoutButton");
 class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.LayoutModuleId, 'Layout', 'layout', 'LayoutPopup', 'Named sets of column visibility, order, groupings, aggregation, pivots etc.', api);
@@ -293,7 +294,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     content: text,
                     popover: popover,
                     popoverMinWidth: 150,
-                    extraActions: [EditCurrentLayoutButton_1.EditCurrentLayoutButton],
+                    extraActions: [EditCurrentLayoutButton_1.EditCurrentLayoutButton, SaveLayoutButton_1.SaveLayoutButton],
                 };
             },
         };

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

@@ -28,6 +28,7 @@ export declare const AG_GRID_GROUPED_COLUMN: string;
 export declare const AG_GRID_PIVOT_COLUMN: string;
 export declare const ADAPTABLE_ROW_ACTION_BUTTONS = "adaptableRowActionButtons";
 export declare const ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = "(ActionRowButtons)";
+export declare const DEFAULT_DATE_FORMAT_PATTERN = "dd-MM-yyyy";
 export declare const SYSTEM_STATUS_DEFAULT_MAX_MESSAGES_IN_STORE: number;
 export declare const QUICK_SEARCH_DEFAULT_BACK_COLOR: string;
 export declare const QUICK_SEARCH_DEFAULT_FORE_COLOR: string;

package/src/Utilities/Constants/GeneralConstants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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 = exports.ALERT_DEFAULT_MESSAGE_TYPE = exports.PLUS_MINUS_DEFAULT_NUDGE_VALUE = 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.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = exports.ADAPTABLE_ROW_ACTION_BUTTONS = exports.AG_GRID_PIVOT_COLUMN = exports.AG_GRID_GROUPED_COLUMN = exports.HALF_SECOND = 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.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 = void 0;
+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 = exports.ALERT_DEFAULT_MESSAGE_TYPE = exports.PLUS_MINUS_DEFAULT_NUDGE_VALUE = 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_DATE_FORMAT_PATTERN = exports.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = exports.ADAPTABLE_ROW_ACTION_BUTTONS = exports.AG_GRID_PIVOT_COLUMN = exports.AG_GRID_GROUPED_COLUMN = exports.HALF_SECOND = 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.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 = void 0;
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const UIHelper_1 = require("../../View/UIHelper");
 exports.AUTOGENERATED_PK_COLUMN = '__ADAPTABLE_PK__';
@@ -31,6 +31,7 @@ exports.AG_GRID_GROUPED_COLUMN = 'ag-Grid-AutoColumn';
 exports.AG_GRID_PIVOT_COLUMN = 'pivot_';
 exports.ADAPTABLE_ROW_ACTION_BUTTONS = 'adaptableRowActionButtons';
 exports.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME = '(ActionRowButtons)';
+exports.DEFAULT_DATE_FORMAT_PATTERN = 'dd-MM-yyyy';
 /*
 Redux / State Defaults
 Try to put all our Redux / State defaults here and ONLY reference from here - avoid magic numbers / strings.

package/src/Utilities/ExpressionFunctions/booleanExpressionFunctions.js

@@ -233,10 +233,32 @@ exports.booleanExpressionFunctions = {
             });
         },
         isPredicate: true,
-        description: 'Returns true if any column contains input',
+        description: 'Returns true if any Column contains input',
         signatures: ['ANY_CONTAINS(value)'],
         examples: ['ANY_CONTAINS("abc")'],
     },
+    /*
+    ANY_SEARCHABLE_CONTAINS: {
+      handler(args, context) {
+        const searchTerm = getStringValue(context, String(args[0]));
+        return context.api?.columnApi
+          .getVisibleColumns()
+          .filter((c) => !c.isExcludedFromQuickSearch)
+          .some((column) => {
+            const value = context.api?.gridApi.getDisplayValueFromRowNode(
+              context.node,
+              column.columnId
+            );
+            const columnValue = getStringValue(context, String(value));
+            return columnValue.indexOf(searchTerm) !== -1;
+          });
+      },
+      isPredicate: true,
+      description: 'Returns true if any Searchable Column contains input',
+      signatures: ['ANY_SEARCHABLE_CONTAINS(value)'],
+      examples: ['ANY_SEARCHABLE_CONTAINS("abc")'],
+    },
+  */
     QUERY: {
         handler(args, context) {
             var _a, _b;

package/src/Utilities/Helpers/FormatHelper.js

@@ -6,6 +6,7 @@ const tslib_1 = require("tslib");
 // import dateFnsFormat from 'date-fns/format';
 const format_1 = tslib_1.__importDefault(require("date-fns/format"));
 const sentence_case_1 = require("sentence-case");
+const GeneralConstants_1 = require("../Constants/GeneralConstants");
 function Format(input, format) {
     if (format.Formatter === 'NumberFormatter') {
         return NumberFormatter(input, format.Options);
@@ -79,7 +80,7 @@ function DateFormatter(input, options) {
         if (typeof input === 'string') {
             input = new Date(input);
         }
-        return format_1.default(input, options.Pattern || '');
+        return format_1.default(input, (options === null || options === void 0 ? void 0 : options.Pattern) || GeneralConstants_1.DEFAULT_DATE_FORMAT_PATTERN);
     }
     catch (error) {
         return input;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -3,7 +3,6 @@ import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableFormat } from '../../../PredefinedConfig/Common/AdaptableFormat';
 import { AdaptableScope } from '../../../PredefinedConfig/Common/AdaptableScope';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { FormatColumnApi } from '../../../types';
 export declare type FormatColumnFormatWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
@@ -11,7 +10,7 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn, formattedColumnApi: FormatColumnApi) => string;
+export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn, api: AdaptableApi) => string;
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn, api: AdaptableApi) => JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: AdaptableScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => JSX.Element;

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

@@ -78,7 +78,7 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-const getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
+const getFormatColumnFormatSummaryValue = (data, api) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
         content = 'N/A';
@@ -86,24 +86,17 @@ const getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
             content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
-            //formattedColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
-            //formattedColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options);
+            content = FormatHelper_1.default.DateFormatter(new Date(2022, 0, 1), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
             content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
-            //formattedColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options);
         }
     }
     return content;
 };
 exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
-function splitArrayInTwo(arr) {
-    const half = Math.floor(arr.length - 1 / 2);
-    return [arr.slice(0, half), arr.slice(half)];
-}
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     var _a, _b, _c;
     return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: (_a = customFormatter.label) !== null && _a !== void 0 ? _a : customFormatter.id },
@@ -120,7 +113,7 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } })));
 };
 const renderFormatColumnFormatSummary = (data, api) => {
-    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api.formatColumnApi));
+    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api));
 };
 exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
 const getFormatDisplayTypeForScope = (scope, api) => {
@@ -157,7 +150,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
-const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
@@ -173,9 +166,12 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
                         React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
-                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options))),
-                    customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2 },
+                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options)))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+        React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
@@ -195,7 +191,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                         },
                     ] })))))));
 };
-const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -247,7 +243,6 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
         data.DisplayFormat.Options.Multiplier === MILLION_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, MILLION_OPTIONS);
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
-    const [leftCustomFormatters, rightCustomFormatters] = splitArrayInTwo(customFormatters);
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -261,8 +256,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        leftCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }))),
                     React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
                             React.createElement(Input_1.default, { type: "number", min: "0", 
@@ -279,8 +273,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        rightCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -322,10 +320,11 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         },
                     ] })))));
 };
-const renderStringFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'StringFormatter') {
         return null;
     }
+    console.log('formatters', scopedCustomFormatters);
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -341,8 +340,12 @@ const renderStringFormat = (data, _onChange, setFormatOption, customFormatters,
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout_1.default, { mr: 3 }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Example"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -376,15 +379,15 @@ const FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
-    const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
+    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
     if (Type === 'NumberFormatter') {
-        return renderNumberFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     if (Type === 'DateFormatter') {
-        return renderDateFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderDateFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     if (Type === 'StringFormatter') {
-        return renderStringFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderStringFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
         "Setting a Display Format is only available if ",

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import { Layout } from '../../PredefinedConfig/LayoutState';
-import * as React from 'react';
+import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;

package/src/View/Layout/LayoutViewPanel.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
-const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
@@ -13,9 +13,9 @@ const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const react_redux_1 = require("react-redux");
 const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
 const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {
@@ -55,8 +55,7 @@ function mapStateToProps(state, ownProps) {
         CurrentLayoutName,
         CurrentDraftLayout: state.Grid.CurrentLayout || selectedLayout,
         Layouts,
-        CanSave: state.Grid.CurrentLayout &&
-            !api.layoutApi.areLayoutsEqual(selectedLayout, state.Grid.CurrentLayout),
+        CanSave: state.Grid.CurrentLayout && !api.layoutApi.areDraftAndCurrentLayoutEqual(),
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/View/Layout/SaveLayoutButton.d.ts

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

package/src/View/Layout/SaveLayoutButton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SaveLayoutButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const SaveLayoutButton = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(ModuleConstants.LayoutModuleId);
+    const dispatch = react_redux_1.useDispatch();
+    const currentDraftLayout = react_redux_1.useSelector((state) => state.Grid.CurrentLayout);
+    const isManualSaveLayout = !adaptable.api.layoutApi.shouldAutoSaveLayout(currentDraftLayout);
+    const handleSave = React.useCallback((layout) => {
+        dispatch(LayoutRedux.LayoutSave(layout));
+        dispatch(GridRedux.LayoutUpdateCurrentDraft(null));
+    }, []);
+    const isSaveEnabled = currentDraftLayout && !adaptable.api.layoutApi.areDraftAndCurrentLayoutEqual();
+    if (!isManualSaveLayout) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(ButtonSave_1.ButtonSave, { ml: 1, variant: "text", iconSize: 15, onClick: () => handleSave(currentDraftLayout), tooltip: "Save Changes to Current Layout", disabled: !isSaveEnabled, accessLevel: accessLevel }));
+};
+exports.SaveLayoutButton = SaveLayoutButton;

package/src/agGrid/Adaptable.js

@@ -2760,7 +2760,7 @@ class Adaptable {
             all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
             all_modules_1.Events.EVENT_COLUMN_VALUE_CHANGED,
         ];
-        // no need to add filter event, it is handled by AdaptableStore side-effects
+        // ADD filter event
         this.gridOptions.api.addGlobalListener((this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = (type) => {
             if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
                 this.debouncedSaveGridLayout();