@adaptabletools/adaptable 11.2.4 → 12.0.0-canary.1

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

@@ -102,14 +102,14 @@ function splitArrayInTwo(arr) {
 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.Id === customFormatter.id), onChange: (checked) => {
+        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, { Id: customFormatter.id }];
+                    newCustomFormats = [...newCustomFormats, customFormatter.id];
                 }
                 else {
-                    newCustomFormats = newCustomFormats.filter((item) => item.Id !== customFormatter.id);
+                    newCustomFormats = newCustomFormats.filter((item) => item !== customFormatter.id);
                 }
                 setFormatOption('CustomDisplayFormats', newCustomFormats);
             } })));
@@ -358,7 +358,7 @@ exports.FormatColumnFormatWizardSection = (props) => {
     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.formatColumnOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters) !== null && _c !== void 0 ? _c : [];
+    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));
     };
@@ -369,16 +369,14 @@ 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') {
-        const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => displayFormatter.type === 'Number');
         return renderNumberFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     if (Type === 'DateFormatter') {
-        const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => displayFormatter.type === 'Date');
         return renderDateFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     if (Type === 'StringFormatter') {
-        const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => displayFormatter.type === 'String');
         return renderStringFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -8,7 +8,6 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -19,10 +18,10 @@ const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const Tag_1 = require("../../../components/Tag");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const options = [
-    { value: Enums_1.DataType.Number, label: Enums_1.DataType.Number },
-    { value: Enums_1.DataType.String, label: Enums_1.DataType.String },
-    { value: Enums_1.DataType.Date, label: Enums_1.DataType.Date },
-    { value: Enums_1.DataType.Boolean, label: Enums_1.DataType.Boolean },
+    { value: 'Number', label: 'Number' },
+    { value: 'String', label: 'String' },
+    { value: 'Date', label: 'Date' },
+    { value: 'Boolean', label: 'Boolean' },
 ];
 exports.renderFreeTextColumnSummary = (data) => {
     var _a;

package/src/View/GridInfo/ColumnInfoComponent.js

@@ -125,7 +125,7 @@ class ColumnInfoComponent extends React.Component {
                     React.createElement(FreeTextColumnSummary_1.FreeTextColumnSummary, { key: ModuleConstants.FreeTextColumnModuleId, summarisedColumn: this.state.SelectedColumn, teamSharingActivated: this.props.teamSharingActivated, accessLevel: this.getAccessLevel(ModuleConstants.FreeTextColumnModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.FreeTextColumnModuleId) })));
             }
             if (this.isModuleAvailable(ModuleConstants.PlusMinusModuleId) &&
-                this.state.SelectedColumn.dataType == Enums_1.DataType.Number) {
+                this.state.SelectedColumn.dataType == 'Number') {
                 summaries.push(React.createElement("div", { key: ModuleConstants.PlusMinusModuleId, className: this.isModuleReadOnly(ModuleConstants.PlusMinusModuleId)
                         ? GeneralConstants.READ_ONLY_STYLE
                         : '' },

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.filterApi.columnFiltersToString(props.api.filterApi.getColumnFilters());
         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");
@@ -109,26 +109,26 @@ function getEmptyConfigState() {
 exports.getEmptyConfigState = getEmptyConfigState;
 function getDescriptionForDataType(dataType) {
     switch (dataType) {
-        case Enums_1.DataType.String:
+        case 'String':
             return 'string';
-        case Enums_1.DataType.Number:
+        case 'Number':
             return 'number';
-        case Enums_1.DataType.Date:
+        case 'Date':
             return 'date';
     }
 }
 exports.getDescriptionForDataType = getDescriptionForDataType;
-function getPlaceHolderforDataType(dataType) {
+function getPlaceholderForDataType(dataType) {
     switch (dataType) {
-        case Enums_1.DataType.String:
+        case 'String':
             return 'Enter Value';
-        case Enums_1.DataType.Number:
+        case 'Number':
             return 'Enter Number';
-        case Enums_1.DataType.Date:
+        case 'Date':
             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));
                 })));
             };

package/src/agGrid/Adaptable.d.ts

@@ -18,6 +18,7 @@ import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
+import { AdaptableColumnType } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -36,6 +37,7 @@ import { ColumnSetupInfo } from './ColumnSetupInfo';
 import { CustomSort } from '../PredefinedConfig/CustomSortState';
 import { ColumnValuesComparer } from '../AdaptableOptions/GeneralOptions';
 import { IMetamodelService } from '../Utilities/Services/Interface/IMetamodelService';
+import { IRowEditService } from '../Utilities/Services/Interface/IRowEditService';
 declare type RuntimeConfig = {
     waitForAgGrid?: boolean;
     modules?: Module[];
@@ -55,10 +57,12 @@ export declare class Adaptable implements IAdaptable {
     AlertService: IAlertService;
     TeamSharingService: ITeamSharingService;
     MetamodelService: IMetamodelService;
+    RowEditService: IRowEditService;
     private LicenseService;
     embedColumnMenu: boolean;
     gridOptions: GridOptions;
     isInitialised: boolean;
+    hasAdaptableToolPanel: boolean;
     private useRowNodeLookUp;
     private abContainerElement;
     private gridContainerElement;
@@ -117,6 +121,7 @@ export declare class Adaptable implements IAdaptable {
     private initializeAgGrid;
     private isAgGridReady;
     private initAgGridContainerFromInitializedAgGrid;
+    private createAdaptableSideBarDef;
     private createStatusBars;
     getAgGridStatusPanels(): import("@ag-grid-community/all-modules").StatusPanelDef[];
     debouncedSetColumnIntoStore: import("lodash").DebouncedFunc<() => void>;
@@ -236,13 +241,14 @@ export declare class Adaptable implements IAdaptable {
         suppressMovable: boolean;
         headerTooltip: string;
         cellEditor: string | typeof AdaptableNumberEditor | typeof AdaptableDateEditor;
-        type: string[];
+        type: AdaptableColumnType[];
         valueSetter: (params: ValueSetterParams) => any;
         cellRenderer: import("@ag-grid-community/all-modules").ICellRendererFunc;
         valueGetter: (params: ValueGetterParams) => any;
     }[];
     setupColumnValueGetter({ col }: ColumnSetupInfo): void;
     setupColumnAggFunc({ col }: ColumnSetupInfo): void;
+    private getColDefsForRowEditColumns;
     getColDefsForActionColumns(): ColDef[];
     updateColDefsForSpecialColumns(): void;
     private cleanupFloatingFilters_WORKAROUND;
@@ -278,7 +284,6 @@ export declare class Adaptable implements IAdaptable {
     setupColumnCellRenderer({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnTooltipValueGetter({ col, colId }: ColumnSetupInfo): void;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
-    getUserDefinedHeaderName(columnId: string): string;
     setupColumnFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnFloatingFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnValueFormatter({ col, abColumn }: ColumnSetupInfo): void;