@adaptabletools/adaptable 11.2.4-canary.0 → 12.0.0-canary.0

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

@@ -10,7 +10,6 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -18,6 +17,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tabs_1 = require("../../../components/Tabs");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Tag_1 = require("../../../components/Tag");
+const AdaptableContext_1 = require("../../AdaptableContext");
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -77,26 +77,45 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-exports.getFormatColumnFormatSummaryValue = (data) => {
+exports.getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
         content = 'N/A';
     }
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-            content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
+            content = formattedColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
+            content = formattedColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
-            content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
+            content = formattedColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options);
         }
     }
     return content;
 };
-exports.renderFormatColumnFormatSummary = (data) => {
-    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data));
+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 },
+        React.createElement(CheckBox_1.CheckBox, { checked: (_c = (_b = data.DisplayFormat.Options.CustomDisplayFormats) === null || _b === void 0 ? void 0 : _b.some) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => item === customFormatter.id), onChange: (checked) => {
+                var _a, _b, _c;
+                let newCustomFormats = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Options) === null || _b === void 0 ? void 0 : _b.CustomDisplayFormats) !== null && _c !== void 0 ? _c : [];
+                if (checked) {
+                    newCustomFormats = [...newCustomFormats, customFormatter.id];
+                }
+                else {
+                    newCustomFormats = newCustomFormats.filter((item) => item !== customFormatter.id);
+                }
+                setFormatOption('CustomDisplayFormats', newCustomFormats);
+            } })));
+};
+exports.renderFormatColumnFormatSummary = (data, api) => {
+    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api.formatColumnApi));
 };
 exports.getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {
@@ -131,7 +150,7 @@ exports.getFormatDisplayTypeForScope = (scope, api) => {
     }
     return undefined;
 };
-const renderDateFormat = (data, _onChange, setFormatOption) => {
+const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
@@ -147,7 +166,8 @@ const renderDateFormat = (data, _onChange, setFormatOption) => {
                 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)))))),
+                        React.createElement("span", null, formatColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options))),
+                    customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2 },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -159,7 +179,7 @@ const renderDateFormat = (data, _onChange, setFormatOption) => {
                 DateFormatPresets.map((Pattern, index) => (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: [
                         { Content: Pattern, Size: 1 },
                         {
-                            Content: FormatHelper_1.default.DateFormatter(new Date(), { Pattern }),
+                            Content: formatColumnApi.getDateFormattedValue(new Date(), { Pattern }),
                             Size: 1,
                         },
                         {
@@ -168,7 +188,7 @@ const renderDateFormat = (data, _onChange, setFormatOption) => {
                         },
                     ] })))))));
 };
-const renderNumberFormat = (data, onChange, setFormatOption) => {
+const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -220,6 +240,7 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
         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"),
@@ -233,7 +254,8 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
                         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) }))),
+                            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(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
                             React.createElement(Input_1.default, { type: "number", min: "0", 
@@ -250,7 +272,8 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
                         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) })))))),
+                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
+                        rightCustomFormatters.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,
@@ -273,26 +296,26 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '12345.6789', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options),
+                            Content: formatColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '-12345.6789', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(-12345.6789, data.DisplayFormat.Options),
+                            Content: formatColumnApi.getNumberFormattedValue(-12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '0.123', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(0.123, data.DisplayFormat.Options),
+                            Content: formatColumnApi.getNumberFormattedValue(0.123, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] })))));
 };
-const renderStringFormat = (data, _onChange, setFormatOption) => {
+const renderStringFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'StringFormatter') {
         return null;
     }
@@ -311,7 +334,8 @@ const renderStringFormat = (data, _onChange, setFormatOption) => {
                         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) })))))),
+                            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(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Example"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -323,14 +347,18 @@ const renderStringFormat = (data, _onChange, setFormatOption) => {
                         { Content: '"Hello World "', Size: 1 },
                         {
                             Content: '"' +
-                                FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options) +
+                                formatColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options) +
                                 '"',
                             Size: 1,
                         },
                     ] })))));
 };
 exports.FormatColumnFormatWizardSection = (props) => {
+    var _a, _b, _c;
     const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const formatColumnApi = adaptable.api.formatColumnApi;
+    const customDisplayFormatters = (_c = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.userInterfaceOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters) !== null && _c !== void 0 ? _c : [];
     const update = (updated) => {
         props.onChange(Object.assign(Object.assign({}, data), updated));
     };
@@ -341,14 +369,15 @@ exports.FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
+    const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
     if (Type === 'NumberFormatter') {
-        return renderNumberFormat(data, update, setFormatOption);
+        return renderNumberFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     if (Type === 'DateFormatter') {
-        return renderDateFormat(data, update, setFormatOption);
+        return renderDateFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     if (Type === 'StringFormatter') {
-        return renderStringFormat(data, update, setFormatOption);
+        return renderStringFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
         "Setting a Display Format is only available if ",

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

@@ -125,7 +125,7 @@ function FormatColumnWizard(props) {
             },
             {
                 title: 'Display Format',
-                renderSummary: FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary,
+                renderSummary: (data) => FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary(data, api),
                 render: () => {
                     return React.createElement(FormatColumnFormatWizardSection_1.FormatColumnFormatWizardSection, { onChange: setFormatColumn });
                 },

package/src/View/GridInfo/GridInfoPopup.js

@@ -57,7 +57,7 @@ exports.GridInfoPopup = (props) => {
         const freeTextColumns = props.api.freeTextColumnApi
             .getAllFreeTextColumn()
             .map((c) => c.ColumnId);
-        const columnFilterDescription = props.api.filterApi.columnFiltersToString(props.api.filterApi.getAllColumnFilter());
+        const columnFilterDescription = props.api.layoutApi.columnFiltersToString(props.api.layoutApi.getAllColumnFilter());
         const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
             ? props.api.gridApi.getColumnSorts().map((gs) => {
                 return props.api.columnApi.getFriendlyNameFromColumnId(gs.ColumnId) + ': ' + gs.SortOrder;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -3,32 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutStatusBarSubPanelPopover = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const SelectList_1 = require("../../components/SelectList");
 const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const PanelWithRow_1 = require("../Components/Panels/PanelWithRow");
-const LayoutRadioSelector_1 = require("./LayoutRadioSelector");
-const colItems = [
-    { Content: 'Current', Size: 2 },
-    { Content: 'Layout Name', Size: 4 },
-];
 exports.LayoutStatusBarSubPanelPopover = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
-    const accessLevel = adaptable.EntitlementService.getEntitlementAccessLevelForModule(ModuleConstants.LayoutModuleId);
     const layouts = adaptable.api.layoutApi.getAllLayout();
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-        React.createElement(PanelWithRow_1.PanelWithRow, { colItems: colItems }),
-        layouts.map((layout) => {
-            return (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: layout.Name, colItems: [
-                    {
-                        Content: (React.createElement(LayoutRadioSelector_1.LayoutRadioSelector, { accessLevel: accessLevel, id: layout.Name, data: layout })),
-                        Size: 1,
-                    },
-                    {
-                        Content: (React.createElement("label", { style: { cursor: 'pointer' }, htmlFor: layout.Name }, layout.Name)),
-                        Size: 4,
-                    },
-                ] }));
-        })));
+    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Uuid }));
+    const handleChange = (option) => {
+        adaptable.api.layoutApi.setLayout(option.label);
+    };
+    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleChange });
 };

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -223,7 +223,7 @@ exports.LayoutEditor = React.memo((props) => {
                         // JW: Not sure we do - why not just make it always visible as we ignore if if not required.
                         const aggregateEnabled = true;
                         const customHeader = headerColumnsMap[c.columnId];
-                        const initialHeader = api.internalApi.getUserDefinedHeaderName(c.columnId);
+                        const initialHeader = api.columnApi.getFriendlyNameFromColumnId(c.columnId);
                         return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "stretch", "data-name": "drag-item", "data-col-id": c.columnId },
                             React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "secondary", color: "text-on-secondary" },
                                 React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center" },

package/src/View/Layout/Wizard/LayoutEditorWizard.d.ts

@@ -27,6 +27,7 @@ export declare class LayoutEditorWizard extends React.Component<LayoutEditorWiza
             [columnId: string]: number;
         };
         ColumnSorts?: import("../../../types").ColumnSort[];
+        ColumnFilters?: import("../../../types").ColumnFilter[];
         RowGroupedColumns?: string[];
         ExpandedRowGroupValues?: any[];
         AggregationColumns?: Record<string, string | true>;
@@ -43,7 +44,7 @@ export declare class LayoutEditorWizard extends React.Component<LayoutEditorWiza
         Uuid?: string;
         Source?: "Config" | "User";
         IsReadOnly?: boolean;
-        Tags?: import("../../../types").AdaptableObjectTag[];
+        Tags?: string[];
     };
     canNext(): boolean;
     canBack(): boolean;

package/src/View/SmartEdit/SmartEditPopup.d.ts

@@ -3,7 +3,7 @@ import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
 import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
-import { SmartEditOperation } from '../../AdaptableOptions/SmartEdit';
+import { SmartEditOperation } from '../../AdaptableOptions/EditOptions';
 interface SmartEditPopupProps extends ModuleViewPopupProps<SmartEditPopupComponent> {
     SmartEditValue: number;
     SmartEditOperation: SmartEditOperation;

package/src/View/SmartEdit/SmartEditPopup.js

@@ -27,7 +27,6 @@ class SmartEditPopupComponent extends React.Component {
         this.props.onSmartEditCheckSelectedCells();
     }
     render() {
-        var _a, _b, _c;
         let col;
         if (this.props.PreviewInfo) {
             col = this.props.PreviewInfo.column;
@@ -43,12 +42,12 @@ class SmartEditPopupComponent extends React.Component {
                 },
             };
         });
-        const customOperations = (_c = (_b = (_a = this.props.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.editOptions) === null || _b === void 0 ? void 0 : _b.smartEdit) === null || _c === void 0 ? void 0 : _c.customOperations;
+        const customOperations = this.props.api.smartEditApi.getSmartEditCustomOperations();
         if (customOperations === null || customOperations === void 0 ? void 0 : customOperations.length) {
             operationMenuItems.push(...customOperations.map((operation) => {
                 return {
                     onClick: () => this.props.onSmartEditOperationChange(operation),
-                    label: operation.Name,
+                    label: operation.name,
                 };
             }));
         }
@@ -61,7 +60,7 @@ class SmartEditPopupComponent extends React.Component {
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
                 React.createElement(DropdownButton_1.default, { items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
-                    ? this.props.SmartEditOperation.Name
+                    ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
                 React.createElement(Input_1.default, { value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
                 React.createElement(SimpleButton_1.default, { tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||

package/src/View/SmartEdit/SmartEditViewPanel.d.ts

@@ -3,7 +3,7 @@ import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
 import * as React from 'react';
-import { SmartEditOperation } from '../../AdaptableOptions/SmartEdit';
+import { SmartEditOperation } from '../../AdaptableOptions/EditOptions';
 export interface SmartEditViewPanelComponentProps extends ViewPanelProps {
     SmartEditValue: number | undefined;
     SmartEditOperation: SmartEditOperation | undefined;

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -39,7 +39,6 @@ class SmartEditViewPanelComponent extends React.Component {
         (_a = this.cleanupEvent) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     render() {
-        var _a, _b, _c;
         let statusColour = this.getStatusColour();
         let selectedColumn = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.state.SelectedColumnId)
             ? this.props.api.columnApi.getColumnFromId(this.state.SelectedColumnId)
@@ -51,12 +50,12 @@ class SmartEditViewPanelComponent extends React.Component {
                 label: mathOperation,
             };
         });
-        const customOperations = (_c = (_b = (_a = this.props.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.editOptions) === null || _b === void 0 ? void 0 : _b.smartEdit) === null || _c === void 0 ? void 0 : _c.customOperations;
+        const customOperations = this.props.api.smartEditApi.getSmartEditCustomOperations();
         if (customOperations === null || customOperations === void 0 ? void 0 : customOperations.length) {
             operationMenuItems.push(...customOperations.map((operation) => {
                 return {
                     onClick: () => this.props.onSmartEditOperationChange(operation),
-                    label: operation.Name,
+                    label: operation.name,
                 };
             }));
         }
@@ -71,7 +70,7 @@ class SmartEditViewPanelComponent extends React.Component {
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
                 React.createElement(DropdownButton_1.default, { className: `ab-${elementType}__SmartEdit__select`, marginRight: 2, items: operationMenuItems, style: { fontSize: 'small' }, columns: ['label'], disabled: shouldDisable, variant: "outlined" }, typeof this.props.SmartEditOperation === 'object'
-                    ? this.props.SmartEditOperation.Name
+                    ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
                 React.createElement(Input_1.default, { style: {
                         width: '5rem',

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -12,7 +12,7 @@ const AdaptableContext_1 = require("./AdaptableContext");
 exports.SpecialColumnSettingsWizardStep = (props) => {
     var _a, _b;
     const adaptable = AdaptableContext_1.useAdaptable();
-    const possibleColumnTypes = adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions.columnTypes;
+    const possibleColumnTypes = adaptable.api.internalApi.getAdaptableOptions().columnOptions.columnTypes;
     const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = (_a = props.settings) !== null && _a !== void 0 ? _a : {};
     const handleColumnTypeChange = (columnType, checked) => {
         var _a, _b, _c;

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -39,6 +39,6 @@ exports.AdaptableStatusBar = (props) => {
                 dispatch(menuItem.reduxAction);
             }
         });
-        return (React.createElement(StatusBarPanel_1.StatusBarPanel, Object.assign({ "data-name": subPanel }, statusBarPanelProps, { onAction: onAction, icon: (_f = statusBarPanelProps.icon) !== null && _f !== void 0 ? _f : moduleInfo.Glyph, key: subPanel })));
+        return (React.createElement(StatusBarPanel_1.StatusBarPanel, Object.assign({ "data-name": subPanel }, statusBarPanelProps, { tooltip: moduleInfo.FriendlyName, onAction: onAction, icon: (_f = statusBarPanelProps.icon) !== null && _f !== void 0 ? _f : moduleInfo.Glyph, key: subPanel })));
     })));
 };

package/src/View/StatusBar/StatusBarPanel.d.ts

@@ -32,6 +32,7 @@ export interface StatusBarPanelProps extends Omit<FlexProps, 'content'> {
     view?: React.FunctionComponent;
     onAction?: () => void;
     extraActions?: React.FunctionComponent[];
+    tooltip?: string;
 }
 /**
  * Statusbar sub panel are similar to vs code:

package/src/View/StatusBar/StatusBarPanel.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 /**
  * Statusbar sub panel are similar to vs code:
@@ -14,7 +15,7 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
  */
 exports.StatusBarPanel = (props) => {
     var _a;
-    const { icon, content, popover, popoverMinWidth, view, onAction, extraActions, triggerActionOnWrapperClick = true } = props, flexProps = tslib_1.__rest(props, ["icon", "content", "popover", "popoverMinWidth", "view", "onAction", "extraActions", "triggerActionOnWrapperClick"]);
+    const { icon, content, popover, popoverMinWidth, view, onAction, extraActions, triggerActionOnWrapperClick = true, tooltip } = props, flexProps = tslib_1.__rest(props, ["icon", "content", "popover", "popoverMinWidth", "view", "onAction", "extraActions", "triggerActionOnWrapperClick", "tooltip"]);
     const handleAction = () => onAction();
     if (view) {
         const View = view;
@@ -39,7 +40,7 @@ exports.StatusBarPanel = (props) => {
         ? React.createElement(content)
         : content;
     return (React.createElement(rebass_1.Flex, Object.assign({}, flexProps, { alignItems: "center", justifyContent: "center", as: shouldTriggerActionOnWrapperClick ? 'button' : 'div', className: baseClassName, onClick: handleWrapperClick }),
-        props.icon && (React.createElement(SimpleButton_1.default, { color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
-        popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent), (_a = extraActions === null || extraActions === void 0 ? void 0 : extraActions.map) === null || _a === void 0 ? void 0 :
-        _a.call(extraActions, (action, index) => React.createElement(action, { key: index }))));
+        props.icon && (React.createElement(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
+        popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent),
+        ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && (React.createElement(rebass_1.Box, { ml: 1 }, (_a = extraActions === null || extraActions === void 0 ? void 0 : extraActions.map) === null || _a === void 0 ? void 0 : _a.call(extraActions, (action, index) => React.createElement(action, { key: index }))))));
 };

package/src/View/Theme/ThemeStatusPanelPopover.js

@@ -3,34 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeStatusPanelPopover = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const SelectList_1 = require("../../components/SelectList");
 const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const PanelWithRow_1 = require("../Components/Panels/PanelWithRow");
-const colItems = [
-    { Content: 'Current', Size: 2 },
-    { Content: 'Theme Name', Size: 4 },
-];
 exports.ThemeStatusPanelPopover = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const themes = adaptable.api.themeApi.getAllTheme();
-    const currentTheme = adaptable.api.themeApi.getCurrentTheme();
-    const handleThemeChange = React.useCallback((theme) => {
-        adaptable.api.themeApi.loadTheme(theme.Name);
+    const handleThemeChange = React.useCallback((option) => {
+        adaptable.api.themeApi.loadTheme(option.label);
     }, []);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-        React.createElement(PanelWithRow_1.PanelWithRow, { colItems: colItems }),
-        themes.map((theme) => {
-            return (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: theme.Name, colItems: [
-                    {
-                        Content: (React.createElement(Radio_1.default, { onClick: () => handleThemeChange(theme), id: theme.Name, checked: currentTheme === theme.Name })),
-                        Size: 1,
-                    },
-                    {
-                        Content: (React.createElement("label", { style: { cursor: 'pointer' }, htmlFor: theme.Name }, theme.Name)),
-                        Size: 4,
-                    },
-                ] }));
-        })));
+    const options = themes.map((theme) => ({ label: theme.Name, value: theme.Uuid }));
+    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleThemeChange });
 };

package/src/View/UIHelper.d.ts

@@ -3,7 +3,7 @@ import { EditableConfigEntityState } from './Components/SharedProps/EditableConf
 import { StatusColour } from '../PredefinedConfig/Common/Enums';
 import { AdaptableStyle } from '../PredefinedConfig/Common/AdaptableStyle';
 import { Schedule, Weekday } from '../PredefinedConfig/Common/Schedule';
-import { AdaptableOptions } from '../types';
+import { AdaptableColumnDataType, AdaptableOptions } from '../types';
 import { AdaptableAlert } from '../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../PredefinedConfig/Common/AdaptableMessageType';
 export declare const BLACK: string;
@@ -29,8 +29,8 @@ export declare const ORANGE: string;
 export declare function getHexForName(name: string): string;
 export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
-export declare function getDescriptionForDataType(dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown'): "string" | "number" | "date";
-export declare function getPlaceHolderforDataType(dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown'): "Enter Value" | "Enter Number" | "Enter Date";
+export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "string" | "number" | "date";
+export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
 export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
 export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
@@ -58,7 +58,7 @@ export declare const UIHelper: {
     getDefaultColors: typeof getDefaultColors;
     getEmptyConfigState: typeof getEmptyConfigState;
     getDescriptionForDataType: typeof getDescriptionForDataType;
-    getPlaceHolderforDataType: typeof getPlaceHolderforDataType;
+    getPlaceHolderforDataType: typeof getPlaceholderForDataType;
     getModalContainer: typeof getModalContainer;
     IsEmptyStyle: typeof IsEmptyStyle;
     IsNotEmptyStyle: typeof IsNotEmptyStyle;

package/src/View/UIHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getWeekDayByIndex = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.getModalContainer = exports.getPlaceHolderforDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
+exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getWeekDayByIndex = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.getModalContainer = exports.getPlaceholderForDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
 const tslib_1 = require("tslib");
 const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
@@ -118,7 +118,7 @@ function getDescriptionForDataType(dataType) {
     }
 }
 exports.getDescriptionForDataType = getDescriptionForDataType;
-function getPlaceHolderforDataType(dataType) {
+function getPlaceholderForDataType(dataType) {
     switch (dataType) {
         case Enums_1.DataType.String:
             return 'Enter Value';
@@ -128,7 +128,7 @@ function getPlaceHolderforDataType(dataType) {
             return 'Enter Date';
     }
 }
-exports.getPlaceHolderforDataType = getPlaceHolderforDataType;
+exports.getPlaceholderForDataType = getPlaceholderForDataType;
 function getModalContainer(adaptableOptions, document) {
     let modalContainer;
     if (adaptableOptions.containerOptions.modalContainer) {
@@ -466,7 +466,7 @@ exports.UIHelper = {
     getDefaultColors,
     getEmptyConfigState,
     getDescriptionForDataType,
-    getPlaceHolderforDataType,
+    getPlaceHolderforDataType: getPlaceholderForDataType,
     getModalContainer,
     IsEmptyStyle,
     IsNotEmptyStyle,

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -1,10 +1,15 @@
 import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/all-modules';
+import { ActionColumn } from '../AdaptableOptions/UserInterfaceOptions';
+interface ActionColumnCellRendererParams extends ICellRendererParams {
+    actionColumn?: ActionColumn;
+}
 export declare class ActionColumnRenderer implements ICellRendererComp {
     private eGui;
     private eventListener;
-    init(params: ICellRendererParams): void;
+    init(params: ActionColumnCellRendererParams): void;
     render(): void;
     getGui(): HTMLElement;
     refresh(params: ICellRendererParams): boolean;
     destroy(): void;
 }
+export {};

package/src/agGrid/ActionColumnRenderer.js

@@ -11,8 +11,10 @@ class ActionColumnRenderer {
     init(params) {
         var _a;
         const adaptable = params.api.__adaptable;
-        const actionCol = (_a = adaptable.api.userInterfaceApi
-            .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
+        const actionCol = params.actionColumn
+            ? params.actionColumn
+            : (_a = adaptable.api.userInterfaceApi
+                .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
         if (actionCol && actionCol.actionColumnButton) {
             let actionButtons = Array.isArray(actionCol.actionColumnButton)
                 ? actionCol.actionColumnButton
@@ -38,7 +40,7 @@ class ActionColumnRenderer {
                 adaptableApi: adaptable.api,
             };
             const renderActionButtons = (buttons, adaptableApi, context) => {
-                return (React.createElement(React.Fragment, null, buttons.map((button) => {
+                return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
                     var _a, _b;
                     if (button.hidden && button.hidden(button, context)) {
                         return;
@@ -49,7 +51,8 @@ class ActionColumnRenderer {
                             width: 15,
                         },
                     };
-                    const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
+                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context);
+                    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
                     const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
                     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
                     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
@@ -63,8 +66,8 @@ class ActionColumnRenderer {
                         }, 16);
                     };
                     const disabled = button.disabled && button.disabled(button, context);
-                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
-                        button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
+                        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                         buttonLabel));
                 })));
             };