@adaptabletools/adaptable 12.0.0-canary.2 → 12.0.0-canary.5

package/src/View/Wizard/ObjectTagsWizardSection.js

@@ -7,7 +7,7 @@ const Tabs_1 = require("../../components/Tabs");
 const TagValueSelector_1 = require("../Components/TagValueSelector");
 const OnePageAdaptableWizard_1 = require("./OnePageAdaptableWizard");
 const rebass_1 = require("rebass");
-exports.ObjectTagsWizardSection = (props) => {
+const ObjectTagsWizardSection = (props) => {
     const { onChange } = props;
     const { data } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
@@ -15,8 +15,10 @@ exports.ObjectTagsWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(TagValueSelector_1.TagValueSelector, { selectedTags: data.Tags, onChange: (selectedTags) => onChange(Object.assign(Object.assign({}, data), { Tags: selectedTags })) }))));
 };
-exports.renderObjectTagsSummary = (data) => {
+exports.ObjectTagsWizardSection = ObjectTagsWizardSection;
+const renderObjectTagsSummary = (data) => {
     var _a;
     return ((_a = data.Tags) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(rebass_1.Text, { fontSize: 2 },
         React.createElement(TagValueSelector_1.TagValueOptionsTags, { tags: data.Tags }))) : null;
 };
+exports.renderObjectTagsSummary = renderObjectTagsSummary;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -13,9 +13,12 @@ const Tabs_1 = require("../../components/Tabs");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const OnePageWizards_1 = require("./OnePageWizards");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
-exports.SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
-exports.SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
-exports.FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+const SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
+exports.SummaryTag = SummaryTag;
+const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
+exports.SummaryText = SummaryText;
+const FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+exports.FormDescriptionText = FormDescriptionText;
 exports.OnePageAdaptableWizardContext = React.createContext({
     data: null,
     sections: [],
@@ -27,7 +30,7 @@ function useOnePageAdaptableWizardContext() {
     return React.useContext(exports.OnePageAdaptableWizardContext);
 }
 exports.useOnePageAdaptableWizardContext = useOnePageAdaptableWizardContext;
-exports.OnePageAdaptableWizard = (props) => {
+const OnePageAdaptableWizard = (props) => {
     const { api } = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const saveNamedQuery = React.useCallback((namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery)), []);
@@ -70,7 +73,8 @@ exports.OnePageAdaptableWizard = (props) => {
         React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
             React.createElement(OnePageWizards_1.OnePageWizard, Object.assign({}, props, { name: name, sections: sections, onFinish: handleClickFinish })))));
 };
-exports.OnePageWizardSummary = () => {
+exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
+const OnePageWizardSummary = () => {
     const { setCurrentSection } = OnePageWizards_1.useOnePageWizardContext();
     const { sections, data, api } = useOnePageAdaptableWizardContext();
     const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
@@ -97,3 +101,4 @@ exports.OnePageWizardSummary = () => {
     })
         .filter(Boolean)));
 };
+exports.OnePageWizardSummary = OnePageWizardSummary;

package/src/View/Wizard/OnePageWizards.js

@@ -14,9 +14,12 @@ const icons_1 = require("../../components/icons");
 const ResizeObserver_1 = require("../../components/ResizeObserver");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
-exports.SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
-exports.SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
-exports.FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+const SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
+exports.SummaryTag = SummaryTag;
+const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
+exports.SummaryText = SummaryText;
+const FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+exports.FormDescriptionText = FormDescriptionText;
 exports.OnePageWizardContext = React.createContext({
     data: null,
     sections: [],
@@ -26,7 +29,7 @@ function useOnePageWizardContext() {
     return React.useContext(exports.OnePageWizardContext);
 }
 exports.useOnePageWizardContext = useOnePageWizardContext;
-exports.OnePageWizard = (props) => {
+const OnePageWizard = (props) => {
     var _a, _b;
     let defaultCurrentIndex = 0;
     if (props.defaultCurrentSectionName) {
@@ -185,3 +188,4 @@ exports.OnePageWizard = (props) => {
                             } }, firstErrorMessage),
                         React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish")))))));
 };
+exports.OnePageWizard = OnePageWizard;

package/src/View/Wizard/useKeyboardNavigation.js

@@ -4,7 +4,7 @@ exports.useKeyboardNavigation = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const useGlobalEvent_1 = require("../../components/utils/useGlobalEvent");
-exports.useKeyboardNavigation = (setCurrentSection, sections) => {
+const useKeyboardNavigation = (setCurrentSection, sections) => {
     const handleKeyPress = React.useCallback((event) => {
         if ((event.ctrlKey || event.metaKey) &&
             (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
@@ -33,3 +33,4 @@ exports.useKeyboardNavigation = (setCurrentSection, sections) => {
     }, [sections, setCurrentSection]);
     useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
 };
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/src/View/renderWithAdaptableContext.js

@@ -7,8 +7,9 @@ const react_redux_1 = require("react-redux");
 const styled_components_1 = require("styled-components");
 const theme_1 = tslib_1.__importDefault(require("../theme"));
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
-exports.renderWithAdaptableContext = (children, adaptable) => {
+const renderWithAdaptableContext = (children, adaptable) => {
     return (React.createElement(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore },
         React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             React.createElement(AdaptableContext_1.default.Provider, { value: adaptable }, children))));
 };
+exports.renderWithAdaptableContext = renderWithAdaptableContext;

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -1,5 +1,5 @@
 import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/all-modules';
-import { ActionColumn } from '../AdaptableOptions/UserInterfaceOptions';
+import { ActionColumn } from '../AdaptableOptions/ActionOptions';
 interface ActionColumnCellRendererParams extends ICellRendererParams {
     actionColumn?: ActionColumn;
 }

package/src/agGrid/ActionColumnRenderer.js

@@ -13,7 +13,7 @@ class ActionColumnRenderer {
         const adaptable = params.api.__adaptable;
         const actionCol = params.actionColumn
             ? params.actionColumn
-            : (_a = adaptable.api.userInterfaceApi
+            : (_a = adaptable.api.actionApi
                 .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)

package/src/agGrid/Adaptable.js

@@ -345,7 +345,7 @@ class Adaptable {
         }
         this.emitter = new Emitter_1.default();
         // we create AdaptableOptions by merging the values provided by the user with the defaults (where no value has been set)
-        this.adaptableOptions = AdaptableHelper_1.default.assignadaptableOptions(adaptableOptions);
+        this.adaptableOptions = AdaptableHelper_1.default.assignAdaptableOptions(adaptableOptions);
         if (this.hasAutogeneratedPrimaryKey()) {
             LoggingHelper_1.LogAdaptableWarning(`Autogenerated primary key (adaptableOptions.autogeneratedPrimaryKey = TRUE) should be used only as a last resort,
       when no unique column is available, as it limits some Adaptable functionalities!
@@ -354,7 +354,6 @@ class Adaptable {
             this.adaptableOptions.primaryKey = GeneralConstants_1.AUTOGENERATED_PK_COLUMN;
         }
         Adaptable.collectInstance(this);
-        AdaptableHelper_1.default.checkAdaptableOptions(this.adaptableOptions);
         this.runtimeConfig = runtimeConfig || {};
         this.agGridModules = this.runtimeConfig.modules || [];
         this.gridOptions = this.adaptableOptions.gridOptions;
@@ -420,6 +419,8 @@ class Adaptable {
         if (this.gridOptions.columnTypes.abColDefDate.cellEditor === undefined) {
             this.gridOptions.columnTypes.abColDefDate.cellEditor = AdaptableDateEditor_1.AdaptableDateEditor;
         }
+        // validate the provided AdaptableOptions
+        this.MetamodelService.validateAdaptableOptionsValues();
         return this.initializeAgGrid().then((initialized) => {
             if (!initialized) {
                 // we have no grid, we can't do anything
@@ -976,14 +977,16 @@ class Adaptable {
         const alert = this.getActiveAlertWithHighlightCell(col, params);
         const highlightCell = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightCell;
         return typeof highlightCell === 'object' && (highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName)
-            ? highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName : null;
+            ? highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName
+            : null;
     }
     getAlertRowClass(params) {
         var _a, _b;
         const alert = this.getActiveAlertWithHighlightRow(params);
         const highlightRow = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightRow;
         return typeof highlightRow === 'object' && (highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName)
-            ? highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName : null;
+            ? highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName
+            : null;
     }
     getAlertRowStyle(params) {
         var _a, _b;
@@ -1023,9 +1026,12 @@ class Adaptable {
             return;
         }
         return flashingCell.direction === 'up'
-            ? (_a = flashingCell.flashingCellDefinition.UpChangeStyle) === null || _a === void 0 ? void 0 : _a.ClassName : flashingCell.direction === 'down'
-            ? (_b = flashingCell.flashingCellDefinition.DownChangeStyle) === null || _b === void 0 ? void 0 : _b.ClassName : flashingCell.direction === 'neutral'
-            ? (_c = flashingCell.flashingCellDefinition.NeutralChangeStyle) === null || _c === void 0 ? void 0 : _c.ClassName : undefined;
+            ? (_a = flashingCell.flashingCellDefinition.UpChangeStyle) === null || _a === void 0 ? void 0 : _a.ClassName
+            : flashingCell.direction === 'down'
+                ? (_b = flashingCell.flashingCellDefinition.DownChangeStyle) === null || _b === void 0 ? void 0 : _b.ClassName
+                : flashingCell.direction === 'neutral'
+                    ? (_c = flashingCell.flashingCellDefinition.NeutralChangeStyle) === null || _c === void 0 ? void 0 : _c.ClassName
+                    : undefined;
     }
     getCellHighlightStyle(col, params) {
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
@@ -1325,16 +1331,12 @@ class Adaptable {
                 newColState.aggFunc =
                     aggregationFunctionsColumnsMap[colId] === true
                         ? // if we have true, it means - take the default aggFunc from colDef
-                         (_e = (_d = (_c = 
-                        // NOTE: colState gives us the current aggFunc, which can be null,
-                        // while the colDef gives us the initially configured aggFunc for that column
-                        colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef === null || 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef === void 0 ? void 0 : 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef.defaultAggFunc) !== null && _e !== void 0 ? _e : 'sum' : aggregationFunctionsColumnsMap[colId];
+                            // NOTE: colState gives us the current aggFunc, which can be null,
+                            // while the colDef gives us the initially configured aggFunc for that column
+                            (_e = (_d = (_c = colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 
+                            // @ts-ignore available only wth ag-Grid v27.3.x
+                            colDef === null || colDef === void 0 ? void 0 : colDef.defaultAggFunc) !== null && _e !== void 0 ? _e : 'sum'
+                        : aggregationFunctionsColumnsMap[colId];
             }
             if (sortModelMap[colId]) {
                 newColState.sort = sortModelMap[colId].sort;
@@ -1667,7 +1669,8 @@ class Adaptable {
         let returnValues = [];
         // this function does NOT look up for server values but actually it should...
         // that is currently commented out in the column api function (previously in filter form)
-        permittedValues = permittedValues !== null && permittedValues !== void 0 ? permittedValues : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
+        permittedValues =
+            permittedValues !== null && permittedValues !== void 0 ? permittedValues : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
         if (ArrayExtensions_1.ArrayExtensions.IsNotNull(permittedValues)) {
             returnValues = permittedValues.map((pv) => {
                 return {
@@ -2184,7 +2187,7 @@ class Adaptable {
         }
     }
     getColDefsForRowEditColumns() {
-        const actionRowButtons = this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtons;
+        const actionRowButtons = this.adaptableOptions.actionOptions.actionRowButtons;
         if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
@@ -2197,7 +2200,7 @@ class Adaptable {
                     label,
                     tooltip: 'Create',
                     onClick: () => {
-                        this.api.gridApi.openCreateRowForm();
+                        this.api.actionApi.displayCreateActionRow();
                     },
                 };
             }
@@ -2208,7 +2211,7 @@ class Adaptable {
                     label,
                     tooltip: 'Edit',
                     onClick: (button, context) => {
-                        this.api.gridApi.openEditRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2219,7 +2222,7 @@ class Adaptable {
                     label,
                     tooltip: 'Clone',
                     onClick: (button, context) => {
-                        this.api.gridApi.openCloneRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2236,8 +2239,8 @@ class Adaptable {
                             rowNode: context.rowNode,
                             adaptableApi: context.adaptableApi,
                         };
-                        this.api.eventApi.emit('RowFormSubmitted', eventInfo);
-                        (_b = (_a = this.adaptableOptions.editOptions.rowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                        this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
+                        (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
                     },
                 };
             }
@@ -2256,7 +2259,8 @@ class Adaptable {
                 colId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 hide: false,
                 editable: false,
-                width: editButtons.length * 42,
+                // 17px is the icon widht + left&right padding
+                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 17) + 3,
                 resizable: false,
                 lockVisible: true,
                 suppressColumnsToolPanel: true,
@@ -2266,8 +2270,7 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                pinned: this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtonsPosition ===
-                    'pinnedRight'
+                pinned: this.adaptableOptions.actionOptions.actionRowButtonsPosition === 'pinnedRight'
                     ? 'right'
                     : 'left',
                 cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
@@ -2285,7 +2288,7 @@ class Adaptable {
             suppressMenu: false,
             suppressMovable: false,
         };
-        return this.api.userInterfaceApi.getAllActionColumn().map((actionColumn) => {
+        return this.api.actionApi.getAllActionColumn().map((actionColumn) => {
             const actionColumnSettings = Object.assign(Object.assign({}, defaultActionColumnSettings), actionColumn.actionColumnSettings);
             const newColDef = {
                 headerName: actionColumn.friendlyName ? actionColumn.friendlyName : actionColumn.columnId,

package/src/agGrid/CheckboxRenderer.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxEditor = exports.getCheckboxRendererForColumn = void 0;
-exports.getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
+const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     const CheckboxRenderer = function () {
         return '';
     };
@@ -54,6 +54,7 @@ exports.getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     };
     return CheckboxRenderer;
 };
+exports.getCheckboxRendererForColumn = getCheckboxRendererForColumn;
 // this is just a stub editor instance, we just need the `isCancelBeforeStart()` hook
 class CheckboxEditor {
     isCancelBeforeStart() {

package/src/agGrid/FilterWrapper.js

@@ -4,7 +4,7 @@ exports.FilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
-exports.FilterWrapperFactory = (adaptable) => {
+let FilterWrapperFactory = (adaptable) => {
     return class FilterWrapper {
         init(params) {
             this.params = params;
@@ -52,3 +52,4 @@ exports.FilterWrapperFactory = (adaptable) => {
         }
     };
 };
+exports.FilterWrapperFactory = FilterWrapperFactory;

package/src/agGrid/FloatingFilterWrapper.js

@@ -4,7 +4,7 @@ exports.FloatingFilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
-exports.FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
+const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
     onParentModelChanged(parentModel, filterChangedEvent) {
         // todo?
     }
@@ -41,3 +41,4 @@ exports.FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrappe
         this.filterContainer = null;
     }
 };
+exports.FloatingFilterWrapperFactory = FloatingFilterWrapperFactory;

package/src/agGrid/PercentBarRenderer.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
-exports.getPercentBarRendererForColumn = (formatColumn, api) => {
+const getPercentBarRendererForColumn = (formatColumn, api) => {
     var _a;
     if (!((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle)) {
         return;
@@ -82,3 +82,4 @@ exports.getPercentBarRendererForColumn = (formatColumn, api) => {
         }
     };
 };
+exports.getPercentBarRendererForColumn = getPercentBarRendererForColumn;

package/src/agGrid/agGridHelper.js

@@ -162,7 +162,8 @@ class agGridHelper {
         const customFriendlyName = typeof columnFriendlyName === 'function'
             ? columnFriendlyName({ colId: colId, agColumn: agGridColumn })
             : null;
-        const FriendlyName = (customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : isActionRowButtonColumn) ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
+        const FriendlyName = (customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : isActionRowButtonColumn)
+            ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
             : this.gridOptions.columnApi.getDisplayNameForColumn(agGridColumn, 'header');
         if (!this.initialAgGridColDefs[colId]) {
             this.initialAgGridColDefs[colId] = Object.assign({}, agGridColumn.getUserProvidedColDef());
@@ -220,6 +221,7 @@ class agGridHelper {
             iconKey: 'menu',
             width: UIHelper_1.default.getAdaptableToolPanelWidth(),
             minWidth: UIHelper_1.default.getAdaptableToolPanelWidth(),
+            // maxWidth = undefined,
         };
     }
     isSideBarDefObject(sidebarDef) {

package/src/agGrid/agGridMenuHelper.js

@@ -107,9 +107,7 @@ class agGridMenuHelper {
                 ? x.onClick
                 : () => this.adaptable.api.internalApi.dispatchReduxAction(x.reduxAction),
             icon: icons_1.iconToString(x.icon, {
-                style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                },
+                fill: 'var(--ab-color-text-on-primary)',
             }),
         };
     }
@@ -127,9 +125,7 @@ class agGridMenuHelper {
                     ? () => this.adaptable.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
                     : undefined,
             icon: icons_1.iconToString(adaptableMenuItem.icon, {
-                style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                },
+                fill: 'var(--ab-color-text-on-primary)',
             }),
             subMenu: subMenuItems,
         };
@@ -140,7 +136,9 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: menuItem.icon,
+            icon: icons_1.iconToString(menuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
             disabled: disabled,
             subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
                 ? undefined
@@ -155,7 +153,9 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserContextMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: menuItem.icon,
+            icon: icons_1.iconToString(menuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
             disabled: disabled,
             subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
                 ? undefined
@@ -188,7 +188,9 @@ class agGridMenuHelper {
                 label: groupedCols.length == 1 ? 'Ungroup Column' : 'Ungroup All',
                 onClick: () => this.gridOptions.columnApi.setRowGroupColumns([]),
                 isVisible: true,
-                icon: 'undo',
+                icon: {
+                    name: 'undo',
+                },
             };
             let menuItem = this.createAgGridMenuDefFromAdaptableMenu(ungroupMenuItem);
             return menuItem;
@@ -367,7 +369,8 @@ class agGridMenuHelper {
         });
     }
     buildStandaloneColumnHeader(adaptableColumn) {
-        let menuContext = this.createColumnMenuContextObject(adaptableColumn, null);
+        const agGridColumn = this.adaptable.api.columnApi.getAgGridColumnForAdaptableColumn(adaptableColumn.columnId);
+        let menuContext = this.createColumnMenuContextObject(adaptableColumn, agGridColumn);
         let returnMenuItems = [];
         returnMenuItems.push(...this.getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext));
         let userColumnMenuItems = this.getUserMenuItemsColumnHeader(menuContext);

package/src/agGrid/createAgStatusPanelComponent.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
-exports.createAgStatusPanelComponent = (component, adaptable, context) => {
+const createAgStatusPanelComponent = (component, adaptable, context) => {
     return class StatusBarRenderer {
         init(params) {
             this.params = params;
@@ -30,3 +30,4 @@ exports.createAgStatusPanelComponent = (component, adaptable, context) => {
         }
     };
 };
+exports.createAgStatusPanelComponent = createAgStatusPanelComponent;

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -39,11 +39,14 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         const newData = Object.assign(Object.assign({}, data), { [key]: value });
         onChange(newData);
     };
-    const disabledButtons = react_1.useMemo(() => { var _a, _b; return (_b = (_a = formDef.buttons) === null || _a === void 0 ? void 0 : _a.map((button) => {
-        // defensive programming: conventionally context should ALWAYS be present for validating buttons
-        const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
-        return !isValid;
-    })) !== null && _b !== void 0 ? _b : []; }, [data]);
+    const disabledButtons = react_1.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = formDef.buttons) === null || _a === void 0 ? void 0 : _a.map((button) => {
+            // defensive programming: conventionally context should ALWAYS be present for validating buttons
+            const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
+            return !isValid;
+        })) !== null && _b !== void 0 ? _b : [];
+    }, [data]);
     const renderLabel = (field) => {
         return (React.createElement(rebass_1.Box, { className: 'ab-FormLayout_column--label', style: { textAlign: 'end' } }, field.label));
     };

package/src/components/AdaptableIconComponent/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AdaptableExternalIcon, AdaptableIcon, AdaptableInternalIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+export interface AdaptableIconComponentProps {
+    icon: AdaptableIcon;
+    iconClassName?: string;
+}
+export declare const AdaptableIconComponent: (props: AdaptableIconComponentProps) => JSX.Element;
+export declare const isAdaptableInternalIcon: (icon: unknown) => icon is AdaptableInternalIcon;
+export declare const isAdaptableExternalIcon: (icon: unknown) => icon is AdaptableExternalIcon;
+export declare const isAdaptableIcon: (icon: unknown) => icon is AdaptableIcon;

package/src/components/AdaptableIconComponent/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAdaptableIcon = exports.isAdaptableExternalIcon = exports.isAdaptableInternalIcon = exports.AdaptableIconComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("../icons");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const AdaptableIconComponent = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { icon, iconClassName } = props;
+    if (!icon) {
+        return null;
+    }
+    const className = join_1.default(icon.className, iconClassName);
+    if (exports.isAdaptableInternalIcon(icon)) {
+        return React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className });
+    }
+    if (exports.isAdaptableExternalIcon(icon)) {
+        let width = (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'var(--ab-cmp-icon__width)';
+        let height = (_d = (_c = icon.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'var(--ab-cmp-icon__height)';
+        const iconStyle = (_e = icon.style) !== null && _e !== void 0 ? _e : {};
+        return React.createElement("img", { src: icon.src, className: className, style: Object.assign({ height, width }, iconStyle) });
+    }
+    return null;
+};
+exports.AdaptableIconComponent = AdaptableIconComponent;
+const isAdaptableInternalIcon = (icon) => {
+    var _a;
+    return typeof ((_a = icon) === null || _a === void 0 ? void 0 : _a.name) === 'string';
+};
+exports.isAdaptableInternalIcon = isAdaptableInternalIcon;
+const isAdaptableExternalIcon = (icon) => {
+    var _a;
+    return typeof ((_a = icon) === null || _a === void 0 ? void 0 : _a.src) === 'string';
+};
+exports.isAdaptableExternalIcon = isAdaptableExternalIcon;
+const isAdaptableIcon = (icon) => {
+    return exports.isAdaptableInternalIcon(icon) || exports.isAdaptableExternalIcon(icon);
+};
+exports.isAdaptableIcon = isAdaptableIcon;

package/src/components/CheckBox/index.js

@@ -55,7 +55,8 @@ const CheckBox = (_a) => {
         after));
 };
 exports.CheckBox = CheckBox;
-exports.CheckBoxGroup = (props) => {
+const CheckBoxGroup = (props) => {
     const { orientation } = props, flexProps = tslib_1.__rest(props, ["orientation"]);
     return (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps)));
 };
+exports.CheckBoxGroup = CheckBoxGroup;

package/src/components/CodeBlock/index.js

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 exports.baseClassName = 'ab-CodeBlock';
-exports.CodeBlock = (props) => {
+const CodeBlock = (props) => {
     return React.createElement(rebass_1.Box, Object.assign({ as: "code" }, props, { className: join_1.default(props.className, exports.baseClassName) }));
 };
+exports.CodeBlock = CodeBlock;

package/src/components/Dashboard/DashboardManager.js

@@ -13,6 +13,6 @@ const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled
         const preparedTabs = tabs.map((tab) => (Object.assign(Object.assign({}, tab), { Toolbars: tab.Items })));
         onTabsChange(preparedTabs);
     }, []);
-    return (React.createElement(ModuleManager_1.ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: preparedTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars' }));
+    return (React.createElement(ModuleManager_1.ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: preparedTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars', dragItemText: "Drag into a Tab below" }));
 };
 exports.default = DashboardManager;

package/src/components/Datepicker/Caption.js

@@ -14,7 +14,7 @@ const react_day_picker_1 = require("react-day-picker");
 function Caption(props) {
     const { displayMonth } = props;
     const context = react_day_picker_1.useDayPicker();
-    const { classNames, numberOfMonths, disableNavigation, styles, onMonthChange, dir, } = context;
+    const { classNames, disableNavigation, styles, onMonthChange, dir } = context;
     const { goToMonth, displayMonths } = react_day_picker_1.useNavigation();
     const handlePreviousClick = () => {
         handleMonthChange(add_1.default(displayMonth, { months: -1 }));

package/src/components/Datepicker/DatepickerContext.js

@@ -7,6 +7,7 @@ exports.DatepickerContext = React.createContext({
     onShow: () => { },
     onHide: () => { },
 });
-exports.useDatepickerContext = () => {
+const useDatepickerContext = () => {
     return React.useContext(exports.DatepickerContext);
 };
+exports.useDatepickerContext = useDatepickerContext;