@adaptabletools/adaptable 13.0.1 → 13.0.2

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.d.ts

@@ -5,10 +5,11 @@ export interface NocodeColumn extends Partial<ColDef> {
     type?: string | string[];
     caption?: string;
 }
-declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }: {
+declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }: {
     onValidityChange: (valid: boolean) => any;
     handle: React.MutableRefObject<any>;
     columns: NocodeColumn[];
+    theme?: string;
     onChange?: (columns: NocodeColumn[]) => void;
     onSelectionChange?: (column: any, flag: boolean) => void;
     selectedColumns?: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -58,7 +58,7 @@ const tableDOMProps = {
         minHeight: 600,
     },
 };
-const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }) => {
+const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }) => {
     const rerender = useForceRender();
     const columnsRef = (0, react_1.useRef)(cols);
     const silentSetColumns = (columns) => {
@@ -316,7 +316,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             },
         },
     };
-    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: "light" },
+    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: theme },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
             React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
                     default: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.js

@@ -8,10 +8,11 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/E
 const OnePageWizards_1 = require("../../Wizard/OnePageWizards");
 const ConfigurationWizardColumnsStep_1 = require("./ConfigurationWizardColumnsStep");
 const GridOptionsForm_1 = tslib_1.__importDefault(require("./GridOptionsForm"));
-const AdaptableOptionsForm_1 = tslib_1.__importDefault(require("./AdaptableOptionsForm"));
 const EntitlementsForm_1 = tslib_1.__importDefault(require("./EntitlementsForm"));
 const UiOptionsForm_1 = require("./UIOptions/UiOptionsForm");
 const FinanceForm_1 = require("./FinanceForm");
+const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const AdaptableOptionsForm_1 = require("./AdaptableOptionsForm");
 const ConfigurationWizard = (props) => {
     var _a, _b;
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
@@ -22,7 +23,7 @@ const ConfigurationWizard = (props) => {
                 toolPanels: ['columns', 'filters', 'adaptable'],
             },
         };
-        return Object.assign(Object.assign({}, props.adaptableOptions), { gridOptions: Object.assign(Object.assign({}, gridOptionDefaults), (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) });
+        return Object.assign(Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions), props.adaptableOptions), { gridOptions: Object.assign(Object.assign({}, gridOptionDefaults), (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) });
     });
     const [selectedColumns, setSelectedColumns] = (0, react_1.useState)(() => {
         return props.adaptableOptions.gridOptions.columnDefs.reduce((acc, col) => {
@@ -77,7 +78,7 @@ const ConfigurationWizard = (props) => {
             title: 'Adaptable Options',
             details: 'Configure Adaptable Options',
             isValid: () => (adaptableOptions.adaptableId ? true : 'Adaptable ID is required'),
-            render: () => (React.createElement(AdaptableOptionsForm_1.default, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
         },
         {
             title: 'Grid Options',

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizardColumnsStep.js

@@ -5,9 +5,14 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
 const ConfigurationWizardColumnsStep = (props) => {
-    var _a, _b;
-    return (React.createElement(ColumnsList_1.default, { handle: props.columnsHandle, onValidityChange: (valid) => {
+    var _a, _b, _c;
+    let theme = 'light';
+    if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
+        ((_a = props.adaptableOptions.predefinedConfig.Theme) === null || _a === void 0 ? void 0 : _a.CurrentTheme)) {
+        theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
+    }
+    return (React.createElement(ColumnsList_1.default, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
             props.setPrimaryKeyIsNotSelected(valid);
-        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs }));
+        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_c = (_b = props.adaptableOptions) === null || _b === void 0 ? void 0 : _b.gridOptions) === null || _c === void 0 ? void 0 : _c.columnDefs }));
 };
 exports.ConfigurationWizardColumnsStep = ConfigurationWizardColumnsStep;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Types_1 = require("../../../PredefinedConfig/Common/Types");
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -19,7 +18,7 @@ const tableDOMProps = {
     },
 };
 const EntitlementsListForm = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     let abOptions = props.adaptableOptions;
     const entitlements = (_b = (_a = abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions) === null || _a === void 0 ? void 0 : _a.moduleEntitlements) !== null && _b !== void 0 ? _b : [];
     if (typeof entitlements === 'function') {
@@ -31,28 +30,6 @@ const EntitlementsListForm = (props) => {
             return acc;
         }, {});
     }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
-    const colItems = [
-        {
-            Content: React.createElement(rebass_1.Box, { style: { textAlign: 'left' } }, "Entitlement"),
-            Size: 3,
-            key: 'name',
-        },
-        {
-            Content: 'Visible',
-            Size: 3,
-            key: 'Visible',
-        },
-        {
-            Content: 'Read Only',
-            Size: 3,
-            key: 'ReadOnly',
-        },
-        {
-            Content: 'Hidden',
-            Size: 3,
-            key: 'Hidden',
-        },
-    ];
     const handleOnChange = React.useCallback((module, accessLevel) => {
         let newEntitlements = entitlements;
         // change
@@ -73,15 +50,6 @@ const EntitlementsListForm = (props) => {
         }
         props.onChangeadAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { moduleEntitlements: newEntitlements }) }));
     }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
-    const items = ALL_ENTITLEMENTS_MODULES.map((module) => {
-        const cItems = colItems.map((item) => (Object.assign({}, item)));
-        const accessLevel = entitlementsMap[module];
-        cItems[0].Content = React.createElement(rebass_1.Box, { style: { textAlign: 'left' } }, ModuleConstants_1.ADAPTABLE_MODULE_MAP[module]);
-        cItems[1].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Full'), checked: accessLevel === 'Full' }));
-        cItems[2].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'ReadOnly'), checked: accessLevel === 'ReadOnly' }));
-        cItems[3].Content = (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, 'Hidden'), checked: accessLevel === 'Hidden' }));
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: module, colItems: cItems, style: { cursor: 'pointer' } });
-    });
     if (typeof entitlements === 'function') {
         return (React.createElement(HelpBlock_1.default, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
@@ -119,7 +87,12 @@ const EntitlementsListForm = (props) => {
         },
     };
     const data = ALL_ENTITLEMENTS_MODULES.map((module) => ({ name: ModuleConstants_1.ADAPTABLE_MODULE_MAP[module] }));
-    return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: "light" },
+    let theme = 'light';
+    if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
+        ((_c = props.adaptableOptions.predefinedConfig.Theme) === null || _c === void 0 ? void 0 : _c.CurrentTheme)) {
+        theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
+    }
+    return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: theme },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
             React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
                     default: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/FinanceForm.js

@@ -71,11 +71,11 @@ const FDC3InstrumentColumnBuilder = (props) => {
     return (React.createElement(rebass_1.Flex, null,
         React.createElement(FormLayout_1.default, { mr: 2 }, fields.slice(0, 4).map((field) => {
             var _a;
-            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
         })),
         React.createElement(FormLayout_1.default, null, fields.slice(4).map((field) => {
             var _a;
-            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
         })),
         React.createElement(rebass_1.Flex, { ml: 3, flexDirection: "column" }, fdc3ColumnDefinitions.instrumentColumns.intents.map((intent) => {
             var _a, _b;
@@ -89,7 +89,7 @@ const FDC3BaseColumnBuilder = (props) => {
         React.createElement(FormLayout_1.default, null,
             fields.map((field) => {
                 var _a, _b;
-                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { columnOptions: props.columnOptions, onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), value: (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a[field.id]) !== null && _b !== void 0 ? _b : '' })));
+                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, columnOptions: props.columnOptions, onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), value: (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a[field.id]) !== null && _b !== void 0 ? _b : '' })));
             }),
             React.createElement(FormLayout_1.FormRow, { label: "" },
                 React.createElement(rebass_1.Flex, { flexDirection: "column" }, intents.map((intent) => {
@@ -132,7 +132,7 @@ const FDC3ColumnBuilder = (props) => {
         props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { broadcastContextMenuLabel: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
     }, [props.fdc3Column]);
     return (React.createElement(FormBox_1.NocodeWizardFormBox, null,
-        React.createElement(rebass_1.Flex, null,
+        React.createElement(rebass_1.Flex, { flexWrap: "wrap" },
             React.createElement(FormLayout_1.default, { mr: 3, mb: 3 },
                 props.beforeContent,
                 React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
@@ -210,7 +210,7 @@ const FDC3ColumnCreator = (props) => {
     }
     return (React.createElement(FDC3ColumnBuilder, { disabled: fieldsDisabled, columnOptions: props.columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (newFDC3Column) => setFDC3Column(newFDC3Column), beforeContent: typeSelector, footer: React.createElement(rebass_1.Flex, null,
             React.createElement(rebass_1.Box, { flex: 1 }),
-            React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { ml: 2 }, error)))),
+            React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { key: error, ml: 2 }, error)))),
             React.createElement(SimpleButton_1.default, { disabled: fieldsDisabled || !fdc3Column.columnId, onClick: handleOnNew, icon: "plus", variant: "raised" }, "Add FDC3 Column")) }));
 };
 const FinanceFormSectionTitle = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { mb: 2 }),
@@ -238,8 +238,8 @@ const FinanceForm = (props) => {
         props.onChangeadAptableOptions(Object.assign(Object.assign({}, props.adaptableOptions), { plugins: [...props.adaptableOptions.plugins] }));
     };
     const renderEditor = (fdc3ColumnType, fdc3ColumnsItems) => {
-        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { mb: 3 },
-            React.createElement(FDC3ColumnEditor, { key: currentFDCColumnId, columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
+        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { key: currentFDCColumnId, mb: 3 },
+            React.createElement(FDC3ColumnEditor, { columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
                     const newFDC3Columns = fdc3ColumnsItems.map((fdc3Column, index) => {
                         if (index === currentFDCColumnId) {
                             return editedFDC3Column;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -6,11 +6,12 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const CheckBox_1 = require("../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const rebass_1 = require("rebass");
 const GridOptionsForm = (props) => {
     var _a;
     let abOptions = props.adaptableOptions;
     const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(rebass_1.Box, { p: 2 },
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIElementsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
 const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
 const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
 const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
 const UIElementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(rebass_1.Box, { p: 2 },
         React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
         React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
         React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })));

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -210,8 +210,8 @@ class QuickFilterFormComponent extends React.Component {
                         e.nativeEvent.stopPropagation();
                         this.clearFilter();
                     }
-                }, flex: 1, style: {
-                    minWidth: 0,
+                }, style: {
+                    width: '100%',
                     padding: 'var(--ab-space-1)',
                     borderRadius: 0,
                     borderLeftWidth: 0,

package/src/agGrid/ActionColumnRenderer.js

@@ -70,6 +70,7 @@ const ReactActionColumnRenderer = (props) => {
         primaryKeyValue: pkValue,
         rowNode: props.node,
         adaptableApi: adaptable.api,
+        data: props.data,
     };
     return (React.createElement("div", { className: "ab-ActionColumn" }, renderActionButtons(actionButtons, adaptable.api, buttonContext, rerender)));
 };
@@ -96,6 +97,7 @@ class ActionColumnRenderer {
             primaryKeyValue: pkValue,
             rowNode: params.node,
             adaptableApi: adaptable.api,
+            data: params.data,
         };
         const eGui = this.eGui;
         const doRender = () => {

package/src/agGrid/Adaptable.d.ts

@@ -233,6 +233,7 @@ export declare class Adaptable implements IAdaptable {
     redrawRow(rowNode: RowNode): void;
     redrawRows(rowNodes: RowNode[]): void;
     refreshCells(rowNodes: RowNode[], columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
+    refreshColumns(columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
     jumpToRow(rowNode: RowNode): void;
     jumpToColumn(columnId: string): void;
     jumpToCell(columnId: string, rowNode: RowNode): void;
@@ -305,6 +306,7 @@ export declare class Adaptable implements IAdaptable {
     private getExpressionStylesChanges;
     private getStyledColumnComparisonChanges;
     private checkChangedCellCurrentlySelected;
+    refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos: CellDataChangedInfo[]): void;
     private getColumnSorts;
     private onSortChanged;
     expandAllRowGroups(): void;

package/src/agGrid/Adaptable.js

@@ -2157,6 +2157,9 @@ class Adaptable {
         };
         api.refreshCells(refreshCellParams);
     }
+    refreshColumns(columns, forceUpdate, suppressFlash) {
+        this.refreshCells(null, columns, forceUpdate, suppressFlash);
+    }
     jumpToRow(rowNode) {
         this.gridOptions.api.ensureNodeVisible(rowNode, 'middle');
     }
@@ -2247,57 +2250,64 @@ class Adaptable {
         if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
+        const defaultEditButtonConfiguration = {
+            create: {
+                icon: {
+                    name: 'add-row',
+                },
+                tooltip: 'Create',
+                onClick: () => {
+                    this.api.actionApi.displayCreateActionRow();
+                },
+            },
+            edit: {
+                icon: {
+                    name: 'edit',
+                },
+                tooltip: 'Edit',
+                onClick: (button, context) => {
+                    this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
+                },
+            },
+            clone: {
+                icon: {
+                    name: 'clone',
+                },
+                tooltip: 'Clone',
+                onClick: (button, context) => {
+                    this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
+                },
+            },
+            delete: {
+                icon: {
+                    name: 'delete',
+                },
+                tooltip: 'Delete',
+                onClick: (button, context) => {
+                    var _a, _b;
+                    const eventInfo = {
+                        type: 'rowDeleted',
+                        rowNode: context.rowNode,
+                        adaptableApi: context.adaptableApi,
+                    };
+                    this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
+                    (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                },
+            },
+        };
         const editButtons = actionRowButtons
-            .map((buttonName) => {
-            const button = buttonName === 'create'
-                ? {
-                    icon: {
-                        name: 'add-row',
-                    },
-                    tooltip: 'Create',
-                    onClick: () => {
-                        this.api.actionApi.displayCreateActionRow();
-                    },
-                }
-                : buttonName === 'edit'
-                    ? {
-                        icon: {
-                            name: 'edit',
-                        },
-                        tooltip: 'Edit',
-                        onClick: (button, context) => {
-                            this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
-                        },
-                    }
-                    : buttonName === 'clone'
-                        ? {
-                            icon: {
-                                name: 'clone',
-                            },
-                            tooltip: 'Clone',
-                            onClick: (button, context) => {
-                                this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
-                            },
-                        }
-                        : buttonName === 'delete'
-                            ? {
-                                icon: {
-                                    name: 'delete',
-                                },
-                                tooltip: 'Delete',
-                                onClick: (button, context) => {
-                                    var _a, _b;
-                                    const eventInfo = {
-                                        type: 'rowDeleted',
-                                        rowNode: context.rowNode,
-                                        adaptableApi: context.adaptableApi,
-                                    };
-                                    this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
-                                    (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
-                                },
-                            }
-                            : undefined;
-            return button;
+            .map((actionRowButtonType) => {
+            var _a, _b;
+            const defaultButtonConfig = defaultEditButtonConfiguration[actionRowButtonType];
+            if (!defaultButtonConfig) {
+                // should NOT happen unless the user sent some invalid button type in the predefined config
+                return;
+            }
+            const customButtonConfig = (_b = (_a = this.adaptableOptions.actionOptions).actionRowButtonCustomConfiguration) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                adaptableApi: this.api,
+                actionRowButtonType,
+            });
+            return Object.assign(Object.assign({}, defaultButtonConfig), customButtonConfig);
         })
             .filter(Boolean);
         if (!editButtons.length) {
@@ -2313,8 +2323,8 @@ class Adaptable {
                 colId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 hide: false,
                 editable: false,
-                // 17px is the icon widht + left&right padding
-                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 17) + 3,
+                // 15px is the icon width + left&right padding + left&right border
+                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 15) + 2,
                 resizable: false,
                 lockVisible: true,
                 suppressColumnsToolPanel: true,
@@ -3678,6 +3688,7 @@ class Adaptable {
                 }
             }
         }
+        this.refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos);
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
@@ -3742,6 +3753,19 @@ class Adaptable {
             }
         }
     }
+    refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos) {
+        const columnIdMap = new Set();
+        cellDataChangedInfos.forEach((cellDataChangeInfo) => {
+            const styledColumn = this.api.styledColumnApi.getActiveStyledColumnForColumn(cellDataChangeInfo.column);
+            if (styledColumn && this.api.styledColumnApi.hasStyledColumnRelativeCellRange(styledColumn)) {
+                columnIdMap.add(styledColumn.ColumnId);
+            }
+        });
+        const columnIdsToUpdate = [...columnIdMap];
+        if (columnIdsToUpdate.length) {
+            this.refreshColumns(columnIdsToUpdate, true);
+        }
+    }
     getColumnSorts() {
         const columnSorts = [];
         const columnState = this.gridOptions.columnApi.getColumnState();