@adaptabletools/adaptable 11.1.7 → 11.1.10

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -89,13 +89,8 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     type?: string;
     min?: string | number;
     rows?: number;
-    download?: any;
-    value?: string | number | readonly string[];
-    checked?: boolean;
-    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
     name?: string;
-    colSpan?: number;
-    rowSpan?: number;
+    value?: string | number | readonly string[];
     className?: string;
     id?: string;
     lang?: string;
@@ -240,6 +235,7 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     onWaitingCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
     onAuxClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
     onAuxClickCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
     onClickCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
     onContextMenu?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
     onContextMenuCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
@@ -358,6 +354,7 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     kind?: string;
     src?: string;
     srcLang?: string;
+    download?: any;
     alt?: string;
     coords?: string;
     shape?: string;
@@ -392,6 +389,7 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     srcSet?: string;
     accept?: string;
     capture?: boolean | "environment" | "user";
+    checked?: boolean;
     maxLength?: number;
     minLength?: number;
     readOnly?: boolean;
@@ -404,7 +402,9 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     scoped?: boolean;
     cellPadding?: string | number;
     cellSpacing?: string | number;
+    colSpan?: number;
     headers?: string;
+    rowSpan?: number;
     scope?: string;
     cols?: number;
     poster?: string;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -11,7 +11,7 @@ const AdaptableObjectList_1 = require("../../AdaptableObjectList");
 const ButtonNew_1 = require("../../Buttons/ButtonNew");
 const PopupPanel_1 = require("./PopupPanel");
 exports.AdaptablePopupModuleView = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     /**
      * This triggers an render for each redux change.
      * Not sure yet how to trigger this component to render when an item is edited.
@@ -48,10 +48,11 @@ exports.AdaptablePopupModuleView = (props) => {
     else if (typeof emptyView === 'string') {
         emptyContent = emptyView;
     }
+    const toolTipText = (_d = moduleViewProperties.newTooltipText) !== null && _d !== void 0 ? _d : `Create ${moduleInfo.FriendlyName}`;
     // Some modules do not have new button
     // e.g. filter
     let newButton = null;
-    if ((_d = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _d === void 0 ? void 0 : _d.length) {
+    if ((_e = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _e === void 0 ? void 0 : _e.length) {
         const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjectType) => {
             var _a;
             return {
@@ -63,12 +64,12 @@ exports.AdaptablePopupModuleView = (props) => {
                 label: (_a = abObjectType.label) !== null && _a !== void 0 ? _a : abObjectType.name,
             };
         });
-        newButton = (React.createElement(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: 'Create ' + moduleInfo.FriendlyName },
+        newButton = (React.createElement(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText },
             React.createElement(icons_1.Icon, { name: "plus" }),
             " New"));
     }
     else if (EditWizard || moduleViewProperties.onOpenEditPopup) {
-        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: 'Create ' + moduleInfo.FriendlyName, accessLevel: props.accessLevel, style: {
+        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel, style: {
                 color: 'var(--ab-color-text-on-add)',
                 fill: 'var(--ab-color-text-on-add)',
                 background: 'var(--ab-color-action-add)',

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -10,7 +10,7 @@ const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReduce
 exports.useMenuItems = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; });
+    const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.SettingPanelModuleMenuItems; });
     return React.useMemo(() => {
         var _a;
         let navigationItems = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.navigation) === null || _a === void 0 ? void 0 : _a.items;

package/src/View/Components/RangesComponent.js

@@ -74,7 +74,11 @@ class RangesComponent extends React.Component {
                 React.createElement(Tabs_1.Tabs.Tab, null, "Column Comparison"),
                 React.createElement(Tabs_1.Tabs.Content, null,
                     React.createElement(rebass_1.Flex, { flexDirection: "column", key: 'cc', "data-name": "percent-bar-column-comparison" },
-                        React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, "Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a Colour for the Bar."),
+                        React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 },
+                            "Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a",
+                            ' ',
+                            this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
+                            " for the Bar."),
                         React.createElement(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
                             React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMinValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMinValue(e);
@@ -83,7 +87,7 @@ class RangesComponent extends React.Component {
                             React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMaxValue(e);
                                     } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
-                            React.createElement(FormLayout_1.FormRow, { label: "Bar Colour:", first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (color) => {
+                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }

package/src/View/Components/StyleComponent.js

@@ -34,6 +34,8 @@ class StyleComponent extends React.Component {
                 'data-name': 'style-component',
             };
         const styleClassNames = this.props.api.userInterfaceApi.getStyleClassNames();
+        const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
+        const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
         return (React.createElement(Cmp, Object.assign({}, cmpProps),
             ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
                 React.createElement(Radio_1.default, { value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
@@ -41,8 +43,8 @@ class StyleComponent extends React.Component {
                 React.createElement(Radio_1.default, { marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
                 ' ')),
             this.state.ShowClassName ? (React.createElement("div", null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Choose a style name from the dropdown.'),
-                React.createElement(DropdownButton_1.default, { margin: 3, placeholder: "Select", variant: "outlined", tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
+                React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
+                React.createElement(DropdownButton_1.default, { margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
                         minWidth: '15rem',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
@@ -55,16 +57,26 @@ class StyleComponent extends React.Component {
                 React.createElement(rebass_1.Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(rebass_1.Flex, { flexDirection: "column" },
                 React.createElement(rebass_1.Flex, { flex: 1 },
                     React.createElement("div", null,
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set colours by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing colours"),
+                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 },
+                            "Set ",
+                            coloursSpellingVariant,
+                            " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
+                            coloursSpellingVariant),
                         React.createElement(FormLayout_1.default, { columns: [1, 2] },
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) }, "Set Back Colour"),
+                                React.createElement(CheckBox_1.CheckBox, { value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
+                                    "Set Back ",
+                                    colourSpellingVariant),
                                 this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) }, "Set Fore Colour"),
+                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
+                                    "Set Fore ",
+                                    colourSpellingVariant),
                                 this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) }, "Set Border Colour"),
+                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
+                                    "Set Border ",
+                                    colourSpellingVariant),
                                 this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
                         React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
                         React.createElement(FormLayout_1.default, { columns: [1] },

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -216,7 +216,7 @@ function mapStateToProps(state) {
     return {
         ToolPanels: state.ToolPanel.ToolPanels,
         ModuleButtons: state.ToolPanel.ModuleButtons,
-        MainMenuItems: state.Grid.ModuleDropdownMenuItems,
+        MainMenuItems: state.Grid.SettingPanelModuleMenuItems,
         Columns: state.Grid.Columns,
     };
 }

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -32,15 +32,15 @@ class ToolPanelPopupComponent extends React.Component {
         const selectedModuleButtons = [];
         if (ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
             this.props.ToolPanelState.ModuleButtons.forEach((module) => {
-                let menuItem = this.props.GridState.ModuleDropdownMenuItems.find((m) => m.module == module);
+                let menuItem = this.props.GridState.SettingPanelModuleMenuItems.find((m) => m.module == module);
                 if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.isVisible) {
                     selectedModuleButtons.push(module);
                 }
             });
         }
-        const allModuleButtons = this.props.GridState.ModuleDropdownMenuItems.map((x) => x.module);
+        const allModuleButtons = this.props.GridState.SettingPanelModuleMenuItems.map((x) => x.module);
         // 2. process tool panels
-        const availableModules = this.props.GridState.ModuleDropdownMenuItems.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.module);
+        const availableModules = this.props.GridState.SettingPanelModuleMenuItems.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.module);
         // 'Dashboard' is a special case because it's not available in the dashboard menu items, s we have to add it manually
         if (!entitlementService.isModuleHiddenEntitlement('Dashboard')) {
             availableModules.push('Dashboard');

package/src/View/Dashboard/DashboardPopup.js

@@ -51,12 +51,12 @@ class DashboardPopupComponent extends React.Component {
         });
         let selectedModuleButtons = [];
         this.props.DashboardState.ModuleButtons.forEach((x) => {
-            let menuItem = this.props.GridState.ModuleDropdownMenuItems.find((m) => m.module == x);
+            let menuItem = this.props.GridState.SettingPanelModuleMenuItems.find((m) => m.module == x);
             if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.isVisible) {
                 selectedModuleButtons.push(x);
             }
         });
-        const allModuleButtons = this.props.GridState.ModuleDropdownMenuItems.map((x) => x.module);
+        const allModuleButtons = this.props.GridState.SettingPanelModuleMenuItems.map((x) => x.module);
         const baseClassName = 'ab-Dashboard-Popup';
         const dashboardAccessLevel = this.props.api.internalApi
             .getEntitlementService()

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -103,6 +103,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                     columnId: 'undoActionColumn',
                     friendlyName: ' ',
                     includeGroupedRows: true,
+                    actionColumnSettings: { suppressMenu: true, suppressMovable: true },
                     actionColumnButton: {
                         label: (button, context) => {
                             if (context.adaptableApi.gridApi.isGroupRowNode(context.rowNode)) {
@@ -213,12 +214,10 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
             lockPinned: true,
             // default set to true to pass this to the action column
             suppressAutoSize: true,
-            suppressMenu: true,
             menuTabs: ['generalMenuTab', 'filterMenuTab'],
         },
         autoGroupColumnDef: {
             sortable: true,
-            suppressMenu: false,
         },
         columnDefs: [
             {
@@ -231,43 +230,38 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
                 field: 'changeInfo.primaryKeyValue',
                 type: ['abColDefString'],
                 suppressAutoSize: false,
-                suppressMenu: false,
                 flex: 3,
                 initialFlex: 3,
             },
             {
-                headerName: 'Changed Column',
+                headerName: 'Column',
                 field: 'changedColumnLabel',
                 type: ['abColDefString'],
                 suppressAutoSize: false,
-                suppressMenu: false,
                 flex: 3,
                 initialFlex: 3,
             },
             {
-                headerName: 'Previous Value',
+                headerName: 'Previous',
                 field: 'changeInfo.oldValue',
                 type: ['abColDefString'],
                 suppressAutoSize: false,
-                suppressMenu: false,
                 flex: 3,
                 initialFlex: 3,
             },
             {
-                headerName: 'New Value',
+                headerName: 'New',
                 field: 'changeInfo.newValue',
                 type: ['abColDefString'],
                 suppressAutoSize: false,
-                suppressMenu: false,
                 flex: 3,
                 initialFlex: 3,
             },
             {
-                headerName: 'Changed at',
+                headerName: 'Changed',
                 field: 'changeInfo.changedAt',
                 type: ['abColDefDate'],
                 suppressAutoSize: false,
-                suppressMenu: false,
                 flex: 3,
                 initialFlex: 3,
             },
@@ -276,7 +270,6 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
                 field: 'changeTriggerLabel',
                 type: ['abColDefString'],
                 suppressAutoSize: false,
-                suppressMenu: false,
                 flex: 2,
                 initialFlex: 2,
             },
@@ -285,7 +278,6 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
         enableRangeSelection: true,
         suppressColumnVirtualisation: false,
         sideBar: false,
-        suppressMenuHide: true,
         rowSelection: 'multiple',
         skipHeaderOnAutoSize: true,
     };

package/src/View/DataChangeHistory/DataChangeHistoryStatusBarContent.d.ts

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

package/src/View/DataChangeHistory/DataChangeHistoryStatusBarContent.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataChangeHistoryStatusBarContent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DataChangeHistoryViewPanel_1 = require("./DataChangeHistoryViewPanel");
+exports.DataChangeHistoryStatusBarContent = () => {
+    return React.createElement(DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
+};

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.d.ts

@@ -1,19 +1,7 @@
 import * as React from 'react';
-import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import { SystemDataChangeHistoryDisableAction, SystemDataChangeHistoryEnableAction, SystemDataChangeHistoryResumeAction, SystemDataChangeHistorySuspendAction } from '../../Redux/ActionsReducers/SystemRedux';
-import { DataChangeHistoryMode } from '../../PredefinedConfig/SystemState';
-export interface DataChangeHistoryViewPanelProps extends ViewPanelProps {
-    changeHistoryMode: DataChangeHistoryMode;
-    activationTime: Date;
-    suspensionTime: Date;
-    onChangeHistoryEnable: () => SystemDataChangeHistoryEnableAction;
-    onChangeHistoryDisable: () => SystemDataChangeHistoryDisableAction;
-    onChangeHistorySuspend: () => SystemDataChangeHistorySuspendAction;
-    onChangeHistoryResume: () => SystemDataChangeHistoryResumeAction;
+interface DataChangeHistoryViewPanelControlProps {
+    gap?: number;
+    buttonsPaddingY?: number;
 }
-declare class DataChangeHistoryViewPanelComponent extends React.Component<DataChangeHistoryViewPanelProps, {}> {
-    constructor(props: DataChangeHistoryViewPanelProps);
-    render(): JSX.Element;
-}
-export declare let DataChangeHistoryViewPanelControl: import("react-redux").ConnectedComponent<typeof DataChangeHistoryViewPanelComponent, Pick<React.ClassAttributes<DataChangeHistoryViewPanelComponent> & DataChangeHistoryViewPanelProps, "ref" | "key">>;
+export declare const DataChangeHistoryViewPanelControl: React.FunctionComponent<DataChangeHistoryViewPanelControlProps>;
 export {};

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -11,46 +11,38 @@ const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
 const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
 const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
 const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
-class DataChangeHistoryViewPanelComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
-        const enabled = changeHistoryMode === 'ACTIVE';
-        const disabled = changeHistoryMode === 'INACTIVE';
-        const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: 2, style: { gap: 'var(--ab-space-1)' } },
-            disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
-            suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
-            enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
-            (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
-        const dateFormat = `${this.props.api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions
-            .dateFormat} HH:mm:ss`;
-        const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
-            enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${FormatHelper_1.DateFormatter(activationTime, { Pattern: dateFormat })}` },
-                React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
-            suspended && (React.createElement(Tooltip_1.default, { label: !!suspensionTime && `since ${FormatHelper_1.DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
-                React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
-            disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate data tracking"))));
-        return (React.createElement(rebass_1.Flex, { flexDirection: 'row' },
-            buttonPanel,
-            statusPanel));
-    }
-}
-function mapStateToProps(state) {
-    return {
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.DataChangeHistoryViewPanelControl = (props) => {
+    var _a, _b;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const onChangeHistoryEnable = React.useCallback(() => dispatch(SystemRedux_1.SystemDataChangeHistoryEnable()), []);
+    const onChangeHistoryDisable = React.useCallback(() => dispatch(SystemRedux_1.SystemDataChangeHistoryDisable()), []);
+    const onChangeHistorySuspend = React.useCallback(() => dispatch(SystemRedux_1.SystemDataChangeHistorySuspend()), []);
+    const onChangeHistoryResume = React.useCallback(() => dispatch(SystemRedux_1.SystemDataChangeHistoryResume()), []);
+    const { changeHistoryMode, activationTime, suspensionTime } = react_redux_1.useSelector((state) => ({
         changeHistoryMode: state.System.DataChangeHistory.currentMode,
         activationTime: state.System.DataChangeHistory.enableTime,
         suspensionTime: state.System.DataChangeHistory.suspendTime,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onChangeHistoryEnable: () => dispatch(SystemRedux_1.SystemDataChangeHistoryEnable()),
-        onChangeHistoryDisable: () => dispatch(SystemRedux_1.SystemDataChangeHistoryDisable()),
-        onChangeHistorySuspend: () => dispatch(SystemRedux_1.SystemDataChangeHistorySuspend()),
-        onChangeHistoryResume: () => dispatch(SystemRedux_1.SystemDataChangeHistoryResume()),
-    };
-}
-exports.DataChangeHistoryViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(DataChangeHistoryViewPanelComponent);
+    }));
+    const enabled = changeHistoryMode === 'ACTIVE';
+    const disabled = changeHistoryMode === 'INACTIVE';
+    const suspended = changeHistoryMode === 'SUSPENDED';
+    const gap = (_a = props.gap) !== null && _a !== void 0 ? _a : 'var(--ab-space-1)';
+    const buttonsPaddingY = (_b = props.buttonsPaddingY) !== null && _b !== void 0 ? _b : 2;
+    const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
+        disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
+        suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
+        enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
+        (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
+    const dateFormat = `${adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions.dateFormat} HH:mm:ss`;
+    const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
+        enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${FormatHelper_1.DateFormatter(activationTime, { Pattern: dateFormat })}` },
+            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
+        suspended && (React.createElement(Tooltip_1.default, { label: !!suspensionTime && `since ${FormatHelper_1.DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
+            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
+        disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate data tracking"))));
+    return (React.createElement(rebass_1.Flex, { flexDirection: 'row' },
+        buttonPanel,
+        statusPanel));
+};

package/src/View/Filter/ActiveFiltersPanel.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { ColumnFilter } from '../../PredefinedConfig/FilterState';
 import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
 export interface ActiveFiltersPanelProps extends React.ClassAttributes<ActiveFiltersPanel> {
     columnFilters: ColumnFilter[];
-    columns: AdaptableColumn[];
     api: AdaptableApi;
     accessLevel: AccessLevel;
     onClear: (columnFilter: ColumnFilter) => void;

package/src/View/Filter/FilterStatusBarSubPanelPopover.d.ts

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

package/src/View/Filter/FilterStatusBarSubPanelPopover.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterStatusBarSubPanelPopover = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
+exports.FilterStatusBarSubPanelPopover = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const columnFilters = react_redux_1.useSelector((state) => state.Filter.ColumnFilters);
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(ModuleConstants.FilterModuleId);
+    const handleClear = React.useCallback((columnFilter) => adaptable.api.filterApi.clearColumnFilterByColumn(columnFilter.ColumnId), []);
+    return (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columnFilters: columnFilters, api: adaptable.api, accessLevel: accessLevel, onClear: handleClear }));
+};

package/src/View/Filter/FilterViewPanel.js

@@ -16,7 +16,7 @@ class FilterViewPanelComponent extends React.Component {
         super(props);
     }
     render() {
-        const activeFiltersPanel = (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columns: this.props.Columns, columnFilters: this.props.ColumnFilters, api: this.props.api, accessLevel: this.props.accessLevel, onClear: (columnFilter) => this.onClearColumnFilter(columnFilter) }));
+        const activeFiltersPanel = (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columnFilters: this.props.ColumnFilters, api: this.props.api, accessLevel: this.props.accessLevel, onClear: (columnFilter) => this.onClearColumnFilter(columnFilter) }));
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null, ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(React.Fragment, null,

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

@@ -317,7 +317,7 @@ function FormatColumnStyleWizardSection(props) {
                             "Percent Value",
                             ' '),
                         ' '),
-                    React.createElement(FormLayout_1.FormRow, { label: "Back Colour:" },
+                    React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { checked: !!((_2 = (_1 = data.ColumnStyle) === null || _1 === void 0 ? void 0 : _1.PercentBarStyle) === null || _2 === void 0 ? void 0 : _2.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
                             ((_4 = (_3 = data.ColumnStyle) === null || _3 === void 0 ? void 0 : _3.PercentBarStyle) === null || _4 === void 0 ? void 0 : _4.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_6 = (_5 = data.ColumnStyle) === null || _5 === void 0 ? void 0 : _5.PercentBarStyle) === null || _6 === void 0 ? void 0 : _6.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))),

package/src/View/GridInfo/GridInfoPopup.js

@@ -46,6 +46,7 @@ exports.GridInfoPopup = (props) => {
         });
     };
     const CreateGridSummaries = (colItems) => {
+        var _a;
         const returnRows = [];
         const calcColumns = props.api.calculatedColumnApi
             .getAllCalculatedColumn()
@@ -63,7 +64,9 @@ exports.GridInfoPopup = (props) => {
             })
             : null;
         const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
-        returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
+        if ((_a = props.api.internalApi.getAdaptableOptions().userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
+            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
+        }
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));

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

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

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditCurrentLayoutButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.EditCurrentLayoutButton = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const handleClick = React.useCallback(() => {
+        adaptable.api.layoutApi.showLayoutEditor();
+    }, []);
+    return React.createElement(SimpleButton_1.default, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
+};

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

@@ -28,5 +28,5 @@ declare class LayoutPopupComponent extends React.Component<LayoutPopupProps, Edi
     canFinishWizard(): boolean;
     private getCurrentLayout;
 }
-export declare let LayoutPopup: import("react-redux").ConnectedComponent<typeof LayoutPopupComponent, Pick<React.ClassAttributes<LayoutPopupComponent> & LayoutPopupProps, never> & LayoutPopupProps>;
+export declare let LayoutPopup: import("react-redux").ConnectedComponent<typeof LayoutPopupComponent, Pick<React.ClassAttributes<LayoutPopupComponent> & LayoutPopupProps, never>>;
 export {};

package/src/View/Layout/LayoutPopup.js

@@ -66,7 +66,7 @@ class LayoutPopupComponent extends React.Component {
             { Content: 'Details', Size: 7 },
             { Content: '', Size: 2 },
         ];
-        let layoutRows = this.props.Layouts.map((layout, index) => {
+        let layoutRows = this.props.Layouts.map((layout) => {
             let accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(layout, this.props.accessLevel);
             return (React.createElement(LayoutEntityRow_1.LayoutEntityRow, { key: layout.Uuid, colItems: colItems, api: this.props.api, IsCurrentLayout: layout.Name == this.props.CurrentLayoutName, moduleInfo: this.props.moduleInfo, adaptableObject: layout, onEdit: () => this.onEdit(layout), onClone: () => this.onClone(layout), onShare: (config) => this.props.onShare(layout, config), teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: LayoutRedux.LayoutDelete(layout), canDelete: this.props.Layouts.length > 1, onSelect: () => this.props.onSelectLayout(layout.Name), accessLevel: accessLevel, cloneAccessLevel: this.props.accessLevel }));
         });
@@ -128,14 +128,14 @@ class LayoutPopupComponent extends React.Component {
         return this.props.Layouts.find((layout) => layout.Name == this.props.CurrentLayoutName);
     }
 }
-function mapStateToProps(state, ownProps) {
+function mapStateToProps(state) {
     return {
         Layouts: state.Layout.Layouts,
         CurrentLayoutName: state.Layout.CurrentLayout,
         CurrentLayoutDraft: state.Grid.CurrentLayout,
     };
 }
-function mapDispatchToProps(dispatch, ownProps) {
+function mapDispatchToProps(dispatch) {
     return {
         onSaveLayout: (layout) => {
             // SAVE it when user clicks FINISH, even if autoSave: false

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

@@ -2,4 +2,5 @@ import * as React from 'react';
 import { Layout } from '../../../types';
 export declare const LayoutRadioSelector: React.FunctionComponent<{
     data: Layout;
+    id?: string;
 }>;

package/src/View/Layout/LayoutRadioSelector.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const AdaptableContext_1 = require("../AdaptableContext");
-exports.LayoutRadioSelector = ({ data }) => {
+exports.LayoutRadioSelector = ({ data, }) => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
     const layouts = adaptable.api.layoutApi.getAllLayout();
@@ -14,5 +14,5 @@ exports.LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return React.createElement(Radio_1.default, { disabled: isDisabled, checked: isSelected, onClick: handleToggle });
+    return React.createElement(Radio_1.default, { id: data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle });
 };

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

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