@adaptabletools/adaptable 10.0.4-canary.5 → 11.0.0-canary.0

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -2,6 +2,7 @@
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 declare type AlertRulesWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
+    module: 'alert' | 'flashingCell';
 };
 export declare const AlertRulesWizardSection: (props: AlertRulesWizardSectionProps) => JSX.Element;
 export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;

package/src/View/Alert/Wizard/AlertWizard.js

@@ -60,16 +60,16 @@ exports.AlertWizard = (props) => {
                     React.createElement("b", null, "when"),
                     " the Alert should trigger")),
                 isValid: isValidAlertRules_1.isValidAlertRules,
-                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: setAlertDefinition }),
+                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: setAlertDefinition, module: "alert" }),
                 renderSummary: AlertRulesWizardSection_1.renderAlertRulesSummary,
-                title: 'Condition',
+                title: 'Rule',
             },
             {
                 details: "Select the Alert's Message Type and Notification option",
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
                     React.createElement(AlertDisplayWizardSection_1.AlertDisplayWizardSection, { onChange: setAlertDefinition }))),
                 renderSummary: AlertDisplayWizardSection_1.renderAlertDisplaySummary,
-                title: 'Type and Display',
+                title: 'Type & Display',
             },
             {
                 details: 'Configure behaviour for the Alert',

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.d.ts

@@ -3,6 +3,7 @@ import { AlertDefinition } from '../../../types';
 import { FlashingCellDefinition } from '../../../../types';
 export interface BaseAlertRulesWizardSectionProps<T> {
     onChange: (data: T) => void;
+    module: 'alert' | 'flashingCell';
     wholeRowScope?: boolean;
     children?: React.ReactNode;
 }

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.js

@@ -8,7 +8,10 @@ const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.BaseAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     const wholeRowScope = props.wholeRowScope != null ? props.wholeRowScope : api.scopeApi.scopeIsAll(data.Scope);
-    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: api.alertApi.getAlertPredicateDefsForScope(data.Scope), onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {
+    const predicateDefs = props.module == 'alert'
+        ? api.alertApi.getAlertPredicateDefsForScope(data.Scope)
+        : api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {
             selectPredicate: 'Select an Alert Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingTags.js

@@ -11,7 +11,6 @@ exports.getCalculatedColumnSettingTags = (settings) => {
         Resizable ? 'Resizable' : null,
         Groupable ? 'Groupable' : null,
         Sortable ? 'Sortable' : null,
-        Pivotable ? 'Pivotable' : null,
         Aggregatable ? 'Aggregatable' : null,
     ].filter(Boolean);
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.d.ts

@@ -3,6 +3,7 @@ import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
 export declare type CalculatedColumnSettingsWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
+    isEdit: boolean;
 };
 export declare const renderCalculatedColumnSettingsSummary: (data: CalculatedColumn) => JSX.Element;
 export declare const isValidCalculatedColumnSettings: (data: CalculatedColumn, api: AdaptableApi) => true | string;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -59,7 +59,7 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
         const aggregatable = dataType == 'Number' ? (_a = data.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.Aggregatable : false;
         props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Aggregatable: aggregatable }) }));
     };
-    const inEdit = !!data.Uuid;
+    const inEdit = props.isEdit;
     const validCheck = exports.isValidCalculatedColumnSettings(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
     let options = [

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -20,6 +20,7 @@ exports.CalculatedColumnWizard = (props) => {
             : ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns);
     });
     const dispatch = react_redux_1.useDispatch();
+    const isEdit = Boolean(props.data);
     const handleFinish = () => {
         if (props.data) {
             dispatch(CalculatedColumnRedux.CalculatedColumnEdit(calculatedColumn));
@@ -46,7 +47,7 @@ exports.CalculatedColumnWizard = (props) => {
                 renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
                 render: () => {
                     return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { onChange: setCalculatedColumn })));
+                        React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
             '-',

package/src/View/Components/ModuleValueSelector/index.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { ValueSelectorProps } from '../ValueSelector';
 import { AdaptableModule } from '../../../PredefinedConfig/Common/Types';
-export declare type ModuleValueSelectorProps = Omit<ValueSelectorProps<AdaptableModule, AdaptableModule>, 'allowReorder' | 'toIdentifier' | 'toLabel'>;
+export interface ModuleValueSelectorProps extends Omit<ValueSelectorProps<AdaptableModule, AdaptableModule>, 'allowReorder' | 'toIdentifier' | 'toLabel'> {
+    isDisabled?: (module: AdaptableModule) => boolean;
+}
 export declare const ModuleValueSelector: (props: ModuleValueSelectorProps) => JSX.Element;

package/src/View/Components/ModuleValueSelector/index.js

@@ -30,5 +30,5 @@ exports.ModuleValueSelector = (props) => {
     const sortedOptions = react_1.useMemo(() => {
         return sortWithOrder_1.sortWithOrderArray(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition })));
+    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isDisabled: props.isDisabled })));
 };

package/src/View/Components/NewScopeComponent.js

@@ -132,7 +132,7 @@ exports.NewScopeComponent = (props) => {
         React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
             React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Columns")),
         React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "DataTypes")),
+            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types")),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
             React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, props.descriptions.rowScope))),
         React.createElement(Tabs_1.Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },

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

@@ -21,8 +21,9 @@ const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 exports.AdaptablePopup = (props) => {
     var _a, _b, _c, _d, _e;
     const adaptable = AdaptableContext_1.useAdaptable();
-    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const dispatch = react_redux_1.useDispatch();
+    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
     // Navigation
     const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; });
     const menuItems = React.useMemo(() => {
@@ -74,8 +75,8 @@ exports.AdaptablePopup = (props) => {
     const isActionModule = DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
         (props.componentName && props.componentName !== moduleInfo.Popup);
     const baseClassName = 'ab-Adaptable-Popup';
-    const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.type) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
-    const isWindowModal = settingsPanelOptions.type === 'window';
+    const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.popupType) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    const isWindowModal = settingsPanelOptions.popupType === 'window';
     let style = { maxWidth: 1400, maxHeight: 1200 };
     if (isWindowModal) {
         style = { height: '100%' };
@@ -112,7 +113,7 @@ exports.AdaptablePopup = (props) => {
                 position: popupSettings.position,
                 onChange: handleWindowSettings,
             }, style: style, padding: 0, height: isWindowModal ? null : '90vh', width: isWindowModal ? null : '90vw', className: className, onDismiss: props.onHide, isOpen: true, showCloseButton: true }, props.moduleProps),
-            !isActionModule && (React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelOptions.title)),
+            !isActionModule && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
             React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
                 !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, moduleInfo: moduleInfo, activeCustomSettingPanel: customSettingsPanel, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, isCustomSettingsPanel ? (React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel })) : (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide })))))));

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

@@ -25,12 +25,12 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
     var _a;
-    const functionsGlyph = React.createElement(icons_1.Icon, { name: 'home' });
-    const colsGlyph = React.createElement(icons_1.Icon, { name: 'list' });
     const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
     const entitlementService = props.api.internalApi.getEntitlementService();
     const moduleService = props.api.internalApi.getModuleService();
-    const toolPanelOptions = props.api.internalApi.getAdaptableOptions().toolPanelOptions;
+    const adaptableOptions = props.api.internalApi.getAdaptableOptions();
+    const toolPanelOptions = adaptableOptions.toolPanelOptions;
+    const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
     if (entitlementService.isModuleHiddenEntitlement('ToolPanel')) {
         // do NOT show any toolPanel content if the required entitlements are missing
         return (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
@@ -80,19 +80,6 @@ const AdaptableToolPanelComponent = (props) => {
             return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
         }
     });
-    const renderModuleDropdowns = () => {
-        if (!toolPanelOptions.showModulesDropdown) {
-            return;
-        }
-        let menuItems = availableModuleItems.map((menuItem) => {
-            return {
-                onClick: () => props.onClick(menuItem.reduxAction),
-                icon: React.createElement(icons_1.Icon, { name: menuItem.icon }),
-                label: menuItem.label,
-            };
-        });
-        return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", items: menuItems, tooltip: "Adaptable Modules", className: "ab-ToolPanel__modules", key: 'dropdown-modules', id: 'dropdown-modules' }, functionsGlyph));
-    };
     const renderToolPanelDropdowns = () => {
         if (!toolPanelOptions.showToolPanelsDropdown) {
             return;
@@ -139,76 +126,55 @@ const AdaptableToolPanelComponent = (props) => {
         });
         return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
     };
-    const renderColumnsDropdown = () => {
-        if (!toolPanelOptions.showColumnsDropdown) {
-            return;
-        }
-        let colItems = [
-            {
-                clickable: false,
-                label: (React.createElement("div", { key: "colTitle" },
-                    ' ',
-                    "\u00A0\u00A0",
-                    React.createElement("b", null, 'Columns'))),
-            },
-        ];
-        props.Columns.forEach((col, index) => {
-            colItems.push({
-                id: col.columnId,
-                onClick: () => {
-                    onSetColumnVisibility(col.columnId);
-                },
-                label: (React.createElement(CheckBox_1.CheckBox, { as: "div", className: "ab-dd-checkbox", variant: "agGrid", my: 0, value: col.columnId, key: col.columnId, checked: col.visible, onMouseDown: preventDefault }, col.friendlyName)),
-            });
-        });
-        return (React.createElement(DropdownButton_1.default, { listMinWidth: 150, variant: "text", tone: "none", collapseOnItemClick: false, items: colItems, columns: ['label'], className: "ab-Toolpanel__columns", key: 'dropdown-cols', id: 'dropdown-cols', tooltip: "Select Columns" }, colsGlyph));
-    };
     const renderToolPanelButtons = () => {
-        var _a;
         const toolPanelButtons = [];
-        // 1. process custom buttons
-        if (props.api.toolPanelApi.getCustomToolPanelButtons().length) {
-            toolPanelButtons.push(props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
-                // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-                // with the next opportunity we should abstract it
-                // the default size of AdapTable SVG ModuleButtons
-                const defaultIconProps = {
-                    style: {
-                        height: 'var(--ab-cmp-simple-button__height)',
-                        width: 'var(--ab-cmp-simple-button__width)',
-                    },
-                };
-                const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
-                const toolPanelContext = {
-                    adaptableApi: props.api,
-                    toolPanelState: props.api.toolPanelApi.getToolPanelState(),
-                };
-                let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
-                let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
-                let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
-                if (button.hidden && button.hidden(button, toolPanelContext)) {
-                    return null;
-                }
-                const disabled = button.disabled && button.disabled(button, toolPanelContext);
-                const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
-                const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-                const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-                return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                    button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
-            }));
+        let moduleButtons = props.ModuleButtons;
+        const shouldAddSettingsPanel = settingsPanelOptions.alwaysShowInToolPanel &&
+            !props.api.internalApi.getEntitlementService().isModuleHiddenEntitlement('SettingsPanel');
+        if (shouldAddSettingsPanel && !moduleButtons.includes('SettingsPanel')) {
+            moduleButtons = ['SettingsPanel', ...moduleButtons];
         }
-        // 2. process module buttons
-        if ((_a = props.ModuleButtons) === null || _a === void 0 ? void 0 : _a.length) {
-            toolPanelButtons.push(props.ModuleButtons.map((x) => {
+        if (moduleButtons === null || moduleButtons === void 0 ? void 0 : moduleButtons.length) {
+            toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.module == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton_1.default, { key: menuItem.label, icon: menuItem.icon, variant: "text", className: `ab-ToolPanel__Home__${kebabCase_1.default(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton_1.default, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase_1.default(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
                 }
             }));
         }
         return toolPanelButtons;
     };
+    const renderCustomToolPanelButtons = () => {
+        return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
+            // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
+            // with the next opportunity we should abstract it
+            // the default size of AdapTable SVG ModuleButtons
+            const defaultIconProps = {
+                style: {
+                    height: 'var(--ab-cmp-simple-button__height)',
+                    width: 'var(--ab-cmp-simple-button__width)',
+                },
+            };
+            const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
+            const toolPanelContext = {
+                adaptableApi: props.api,
+                toolPanelState: props.api.toolPanelApi.getToolPanelState(),
+            };
+            let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
+            let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
+            let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
+            if (button.hidden && button.hidden(button, toolPanelContext)) {
+                return null;
+            }
+            const disabled = button.disabled && button.disabled(button, toolPanelContext);
+            const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
+            const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
+            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
+                button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                buttonLabel));
+        });
+    };
     const onSetColumnVisibility = (name) => {
         let changedColumn = props.api.columnApi.getColumnFromId(name);
         let columns = [].concat(props.Columns);
@@ -239,12 +205,11 @@ const AdaptableToolPanelComponent = (props) => {
     return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
             width: '100%',
         } },
-        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, style: { width: '100%' } },
-            renderModuleDropdowns(),
+        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
             isToolPanelModuleConfigurable && renderToolPanelDropdowns(),
-            renderColumnsDropdown(),
+            toolPanelButtons,
             isToolPanelModuleConfigurable && renderToolPanelConfigureButton()),
-        ArrayExtensions_1.default.IsNotNullOrEmpty(toolPanelButtons) ? (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, toolPanelButtons)) : null,
+        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
         visibleToolPanelControls));
 };
 function mapStateToProps(state) {

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

@@ -64,6 +64,13 @@ class ToolPanelPopupComponent extends React.Component {
         const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
             // ensure that the visible state has only valid tool panels
             .filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
+        const isModuleCheckboxDisabled = (module) => {
+            if (module === 'SettingsPanel') {
+                return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+                    .alwaysShowInDashboard;
+            }
+            return false;
+        };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "ToolPanel Configuration", glyphicon: this.props.moduleInfo.Glyph },
             React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
                 React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
@@ -73,7 +80,7 @@ class ToolPanelPopupComponent extends React.Component {
                 React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
                     React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues) })),
                 React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;

package/src/View/Components/ValueSelector/index.d.ts

@@ -15,6 +15,7 @@ export declare type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | str
     xSelectedLabel?: (count: number) => ReactNode;
     selectionBoxPosition?: 'top' | 'bottom';
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
+    isDisabled?: (option: OPTION_TYPE) => boolean;
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): JSX.Element;
 export declare namespace ValueSelector {

package/src/View/Components/ValueSelector/index.js

@@ -38,7 +38,7 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     return { selectedMap: result, optionsMap };
 }
 function ValueSelector(props) {
-    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, } = props;
+    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isDisabled, } = props;
     const [selectedOnly, doSetSelectedOnly] = react_1.useState(false);
     const setSelectedOnly = react_1.useCallback((selectedOnly) => {
         doSetSelectedOnly(selectedOnly);
@@ -74,7 +74,7 @@ function ValueSelector(props) {
                                 selectedMap.delete(identifier);
                             }
                             notifyChange();
-                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, onChange: (checked) => {
+                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, disabled: isDisabled ? isDisabled(option) : false, onChange: (checked) => {
                             if (checked) {
                                 selectedMap.set(identifier, option);
                             }

package/src/View/Dashboard/Dashboard.js

@@ -14,19 +14,15 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const rebass_1 = require("rebass");
 const Dashboard_1 = require("../../components/Dashboard");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
-const icons_1 = require("../../components/icons");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFormControlTextClear");
 const useQuickSearchDebounced_1 = require("../QuickSearch/useQuickSearchDebounced");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const CustomToolbarWrapper_1 = require("./CustomToolbarWrapper");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-const DefaultSettingsPanel_1 = require("../../Utilities/Defaults/DefaultSettingsPanel");
 const ApplicationIcon_1 = require("../../components/ApplicationIcon");
 const DashboardComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced_1.useQuickSearchDebounced(props);
-    const dispatch = react_redux_1.useDispatch();
     const dashboardAccessLevel = props.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule('Dashboard');
@@ -73,6 +69,13 @@ const DashboardComponent = (props) => {
     const renderModuleButtons = () => {
         let shortcutsArray = props.DashboardState.ModuleButtons;
         let shortcuts = null;
+        const alwaysShowInDashboard = props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+            .alwaysShowInDashboard;
+        const shouldAddSettingsPanel = alwaysShowInDashboard &&
+            !props.api.internalApi.getEntitlementService().isModuleHiddenEntitlement('SettingsPanel');
+        if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
+            shortcutsArray.push('SettingsPanel');
+        }
         if (shortcutsArray) {
             shortcuts = shortcutsArray.map((x, index) => {
                 var _a, _b, _c;
@@ -122,34 +125,8 @@ const DashboardComponent = (props) => {
         }
         return customDashboardButtons;
     };
-    const renderDashboardIcon = (icon) => {
-        return React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: icon });
-    };
-    const actionModuleMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; })
-        .filter((menuItem) => menuItem.module !== 'General' && DefaultSettingsPanel_1.ACTION_POPUPS.includes(menuItem.module))
-        .map((menuItem) => ({
-        disabled: props.accessLevel == 'Hidden',
-        onClick: () => props.dispatch(menuItem.reduxAction),
-        icon: React.createElement(icons_1.Icon, { name: menuItem.icon }),
-        label: menuItem.label,
-    }));
-    const renderModulesDropdown = () => {
-        let moduleService = props.api.internalApi.getModuleService();
-        let moduleInfo = moduleService.getModuleInfoByModule(ModuleConstants.DashboardModuleId);
-        // JW 23/1/22: we should check the SettingsPanel entitlement here...
-        const handleOpenPopup = () => {
-            dispatch(PopupRedux.PopupShowScreen());
-        };
-        return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { className: "ab-SettingsButton", onClick: handleOpenPopup, variant: "text", tone: "none", icon: "settings" }),
-            React.createElement(DropdownButton_1.default, { icon: "edit", variant: "text", tone: "none", items: actionModuleMenuItems, className: "ab-DashboardToolbar__Home__functions", key: 'dropdown-functions', id: 'dropdown-functions', showToggleIcon: false })));
-    };
     const renderQuickSearch = () => {
-        let moduleInfo = props.api.internalApi
-            .getModuleService()
-            .getModuleInfoByModule('QuickSearch');
-        return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { icon: "quick-search", variant: "text", tone: "none", onClick: props.onShowQuickSearchPopup, tooltip: moduleInfo.FriendlyName, mr: 2 }),
+        return (React.createElement(rebass_1.Box, { ml: 2 },
             React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
     let instanceName = props.api.internalApi.setToolbarTitle();
@@ -173,10 +150,10 @@ const DashboardComponent = (props) => {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
         }, left: React.createElement(React.Fragment, null,
-            renderDashboardIcon(props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon),
-            dashboardOptions.showSettingsPanel && renderModulesDropdown()), right: React.createElement(React.Fragment, null,
+            React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon }),
+            dashboardOptions.buttonsLocation === 'left' && renderModuleButtons()), right: React.createElement(React.Fragment, null,
             renderDashboardButtons(),
-            renderModuleButtons(),
+            dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),
             shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
         props.DashboardState.Tabs.map((tab, index) => (React.createElement(Dashboard_1.DashboardTab, { key: index, title: tab.Name }, renderTab(tab))))));
 };

package/src/View/Dashboard/DashboardPopup.js

@@ -63,21 +63,29 @@ class DashboardPopupComponent extends React.Component {
             .getEntitlementService()
             .getEntitlementAccessLevelForModule('Dashboard');
         const areDashboardSettingsEnabled = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
+        const isModuleCheckboxDisabled = (module) => {
+            if (module === 'SettingsPanel') {
+                return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+                    .alwaysShowInDashboard;
+            }
+            return false;
+        };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph },
-            areDashboardSettingsEnabled && (React.createElement(Panel_1.default, { header: 'Dashboard Settings', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
-                React.createElement(rebass_1.Flex, null,
-                    React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
-                    ' ',
-                    this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
-                    ' ',
-                    React.createElement(CheckBox_1.CheckBox, { className: `${baseClassName}__Checkbox__hidden-check`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")))),
-            React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
-                React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select", style: { borderBottom: '1px solid var(--ab-color-primary)' } },
-                    React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
-                    React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
-                React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, style: { overflow: 'auto', flex: 1 }, padding: 2 },
-                    this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                    this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))));
+            React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
+                areDashboardSettingsEnabled && (React.createElement(Panel_1.default, { header: 'Dashboard Settings', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
+                    React.createElement(rebass_1.Flex, null,
+                        React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+                        ' ',
+                        this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                        ' ',
+                        React.createElement(CheckBox_1.CheckBox, { className: `${baseClassName}__Checkbox__hidden-check`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")))),
+                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select" },
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
+                        this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
+                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -64,7 +64,7 @@ exports.DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.internalApi.getAdaptableOptions().agGridOptions.api.applyTransactionAsync({
+        adaptableApi.internalApi.getAdaptableOptions().gridOptions.api.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });
@@ -81,7 +81,8 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         changeKey && onUndoChange(changeKey);
     };
     const options = {
-        agGridOptions: Object.assign(Object.assign({}, gridOptions), { modules: [...all_modules_1.AllCommunityModules] }),
+        gridOptions: gridOptions,
+        modules: [...all_modules_1.AllCommunityModules],
         primaryKey: 'primaryKey',
         licenseKey: mainAdaptableOptions.licenseKey,
         userName: `${mainAdaptableOptions.userName}`,

package/src/View/FlashingCell/Wizard/FlashingCellDurationWizardSection.js

@@ -24,7 +24,7 @@ exports.FlashingAlertDurationWizardSection = (props) => {
     let { data: flashingAlert } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     flashingAlert = flashingAlert !== null && flashingAlert !== void 0 ? flashingAlert : props.flashingAlert;
     const setDuration = (FlashDuration) => {
-        props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashDuration }));
+        props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashDuration: FlashDuration }));
     };
     const duration = (_a = flashingAlert.FlashDuration) !== null && _a !== void 0 ? _a : 500;
     const numberDuration = React.useRef(typeof duration === 'number' ? duration : 500);

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -34,20 +34,20 @@ exports.renderFlashingAlertRulesSummary = (flashingAlert) => {
 exports.FlashingAlertRulesWizardSection = (props) => {
     var _a;
     const { data: flashingAlert, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : api.flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
-    return (React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, { onChange: props.onChange, wholeRowScope: false },
+    const flashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : api.flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
+    return (React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, { onChange: props.onChange, wholeRowScope: false, module: "flashingCell" },
         React.createElement(rebass_1.Text, { fontSize: 2, mb: 2, pl: 2, pt: 2 }, "Flash target"),
-        React.createElement(Tabs_1.Tabs, { value: FlashTarget !== null && FlashTarget !== void 0 ? FlashTarget : 'row', pl: 2, onValueChange: (FlashTarget) => {
-                props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashTarget }));
+        React.createElement(Tabs_1.Tabs, { value: flashTarget !== null && flashTarget !== void 0 ? flashTarget : 'row', pl: 2, onValueChange: (flashTarget) => {
+                props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashTarget: flashTarget }));
             } },
             React.createElement(Tabs_1.Tabs.Tab, { value: "row" },
-                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: FlashTarget === 'row' }, "Row")),
+                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: flashTarget === 'row' }, "Row")),
             React.createElement(Tabs_1.Tabs.Content, { value: "row" },
                 React.createElement(rebass_1.Text, { fontSize: 2 },
                     "Flash the whole ",
                     React.createElement("b", null, "row"))),
             React.createElement(Tabs_1.Tabs.Tab, { value: "cell" },
-                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: FlashTarget === 'cell' }, "Cell")),
+                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: flashTarget === 'cell' }, "Cell")),
             React.createElement(Tabs_1.Tabs.Content, { value: "cell" },
                 React.createElement(rebass_1.Text, { fontSize: 2 },
                     "Flash the updated ",

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -21,12 +21,10 @@ const FlashingCellRedux = tslib_1.__importStar(require("../../../Redux/ActionsRe
 exports.FlashingCellWizard = (props) => {
     const { api } = AdaptableContext_1.useAdaptable();
     const [flashingCell, setFlashingCell] = react_1.useState(() => {
-        var _a;
-        const defaults = (_a = api.internalApi.getAdaptableOptions().notificationsOptions.flashingCellDefaultProperties) !== null && _a !== void 0 ? _a : {};
         let flashingCell = props.data
             ? Helper_1.cloneObject(props.data)
             : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
-        flashingCell = Object.assign(Object.assign({ FlashDuration: 500 }, defaults), flashingCell);
+        flashingCell = api.flashingCellApi.mergeFlashingCellDefinitionWithDefaults(flashingCell);
         if (!flashingCell.Rule.BooleanExpression && !flashingCell.Rule.Predicate) {
             flashingCell.Rule.BooleanExpression = '';
         }