@adaptabletools/adaptable 11.0.0-canary.4 → 11.0.0-canary.5

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

@@ -94,7 +94,11 @@ exports.AlertButtonsEditor = (props) => {
                                     ' ',
                                     StringExtensions_1.default.CapitaliseFirstLetter((_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'raised'))),
                             React.createElement(DropdownButton_1.default, { columns: ['label'], marginLeft: 2, style: { minWidth: 120 }, items: [
-                                    { label: 'Use Alert Tone', value: 'text', onClick: () => setTone(null) },
+                                    {
+                                        label: 'Use Alert Tone',
+                                        value: 'text',
+                                        onClick: () => setTone(null),
+                                    },
                                     ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
                                         return {
                                             label: StringExtensions_1.default.CapitaliseFirstLetter(tone),

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -38,8 +38,7 @@ class CellSummaryViewPanelComponent extends React.Component {
                 onClick: () => this.props.onCellSummaryOperationChange(summaryOperation),
             };
         });
-        const cellSummaryOperationDefinitions = this.props.api.internalApi.getAdaptableOptions()
-            .generalOptions.cellSummaryOperations;
+        const cellSummaryOperationDefinitions = this.props.api.internalApi.getAdaptableOptions().generalOptions.cellSummaryOperations;
         const operationDefinitions = ArrayExtensions_1.default.IsNullOrEmpty(cellSummaryOperationDefinitions)
             ? []
             : cellSummaryOperationDefinitions.map((operationDefinition) => {

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -45,13 +45,16 @@ exports.AdaptableObjectListItem = (props) => {
     };
     const hasSuspend = Boolean(viewOptions.getSuspendAction);
     const actions = (_e = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.call(_d, (component, index) => {
-        return React.createElement(component, { data: props.data.abObject, key: index });
+        return React.createElement(component, {
+            data: props.data.abObject,
+            key: index,
+        });
     });
     const iconSize = 26;
     return (React.createElement(rebass_1.Flex, { as: "li", mb: 3, className: itemClassName },
         React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_f = props.data.items) === null || _f === void 0 ? void 0 : _f.map((tag, index) => {
             var _a;
-            return (React.createElement(rebass_1.Flex, { key: index, mb: 2, className: `${baseClassName}__row` },
+            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${baseClassName}__row` },
                 React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
                     tag.label || tag.name,
                     EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {

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

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
-const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
 const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
 const ButtonClose_1 = require("../Buttons/ButtonClose");
@@ -276,7 +275,6 @@ function mapDispatchToProps(dispatch) {
         onAddColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterAdd(columnFilter)),
         onEditColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterEdit(columnFilter)),
         onSetColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterSet(columnFilter)),
-        onShowPrompt: (prompt) => dispatch(PopupRedux.PopupShowPrompt(prompt)),
         onHideFilterForm: () => dispatch(FilterRedux.FilterFormHide()),
     };
 }

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

@@ -130,7 +130,10 @@ class QuickFilterFormComponent extends React.Component {
                     predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton_1.default, { style: { borderRadius: 0, borderColor: 'var(--ab-color-primarydark)' } }, this.renderPredicateIcon(activePredicateDef)))),
+                React.createElement(SimpleButton_1.default, { style: {
+                        borderRadius: 0,
+                        borderColor: 'var(--ab-color-primarydark)',
+                    } }, this.renderPredicateIcon(activePredicateDef)))),
             showQuickFilterInput && this.renderLabel(filter, activePredicateDef),
             showQuickFilterInput && this.renderPredicateInput(activePredicateDef, filter)));
     }

package/src/View/Components/FilterForm/getDefaultColumnFilterPredicate.d.ts

@@ -1,3 +1,3 @@
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
 import { SystemFilterPredicateId } from '../../../PredefinedConfig/FilterState';
-export declare const getDefaultColumnFilterPredicate: (column: AdaptableColumn, defaultColumnFilter: "After" | "Before" | "Today" | "Yesterday" | "Tomorrow" | "Values" | "Blanks" | "NonBlanks" | "GreaterThan" | "LessThan" | "Positive" | "Negative" | "Zero" | "Equals" | "NotEquals" | "Between" | "NotBetween" | "Is" | "IsNot" | "Contains" | "NotContains" | "StartsWith" | "EndsWith" | "Regex" | "ThisWeek" | "ThisMonth" | "ThisQuarter" | "ThisYear" | "InPast" | "InFuture" | "On" | "NotOn" | "NextWorkDay" | "LastWorkDay" | "InRange" | "True" | "False" | "BooleanToggle" | ((column: AdaptableColumn) => SystemFilterPredicateId)) => SystemFilterPredicateId;
+export declare const getDefaultColumnFilterPredicate: (column: AdaptableColumn, defaultColumnFilter: "Before" | "After" | "Today" | "Yesterday" | "Tomorrow" | "Values" | "Blanks" | "NonBlanks" | "GreaterThan" | "LessThan" | "Positive" | "Negative" | "Zero" | "Equals" | "NotEquals" | "Between" | "NotBetween" | "Is" | "IsNot" | "Contains" | "NotContains" | "StartsWith" | "EndsWith" | "Regex" | "ThisWeek" | "ThisMonth" | "ThisQuarter" | "ThisYear" | "InPast" | "InFuture" | "On" | "NotOn" | "NextWorkDay" | "LastWorkDay" | "InRange" | "True" | "False" | "BooleanToggle" | ((column: AdaptableColumn) => SystemFilterPredicateId)) => SystemFilterPredicateId;

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -148,7 +148,7 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     'aria-rowspan'?: number;
     'aria-selected'?: boolean | "false" | "true";
     'aria-setsize'?: number;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-sort'?: "none" | "other" | "ascending" | "descending";
     'aria-valuemax'?: number;
     'aria-valuemin'?: number;
     'aria-valuenow'?: number;

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

@@ -16,11 +16,13 @@ const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 const useMenuItems_1 = require("./useMenuItems");
 const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
 exports.AdaptablePopup = (props) => {
+    var _a, _b;
     const adaptable = AdaptableContext_1.useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
     const menuItems = useMenuItems_1.useMenuItems();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
+    const modalContainer = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.containerOptions) === null || _b === void 0 ? void 0 : _b.modalContainer;
     let friendlyName = null;
     let isActionModule = false;
     let moduleViewContent = null;
@@ -68,7 +70,7 @@ exports.AdaptablePopup = (props) => {
                 }
             },
         } },
-        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isActionModule, isWindowModal: isWindowModal, onHide: props.onHide },
+        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isActionModule, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !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, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.d.ts

@@ -7,4 +7,5 @@ export declare const AdaptablePopupDialog: React.FunctionComponent<{
     isWindowModal: boolean;
     onHide: () => void;
     style?: React.CSSProperties;
+    modalContainer?: string | HTMLElement;
 }>;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupDialog = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
@@ -42,7 +43,30 @@ const PopupDialog = (props) => {
     return (React.createElement(Dialog_1.default, Object.assign({ fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true }, dialogProps), children));
 };
 exports.AdaptablePopupDialog = (props) => {
-    const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, } = props;
+    const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
+    const elementRef = React.useMemo(() => {
+        if (!modalContainer) {
+            return null;
+        }
+        let ref = null;
+        if (typeof modalContainer === 'string') {
+            ref = globalThis.document.querySelector(modalContainer);
+        }
+        else {
+            ref = modalContainer;
+        }
+        return ref;
+    }, [modalContainer]);
+    if (modalContainer) {
+        let ref = null;
+        if (typeof modalContainer === 'string') {
+            ref = globalThis.document.querySelector(modalContainer);
+        }
+        else {
+            ref = modalContainer;
+        }
+        return react_dom_1.createPortal(React.createElement(Dialog_1.default, { modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+    }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
         return (React.createElement(WindowDialog, { settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));

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

@@ -13,17 +13,18 @@ exports.TopBar = (props) => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const applicationIcon = (_a = adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.applicationIcon;
     let icon = React.createElement(React.Fragment, null);
+    const iconClassName = `${baseClassName}__Icon`;
     if (props.icon === 'ConfigurationIcon') {
-        icon = React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: "settings" });
+        icon = React.createElement(icons_1.Icon, { className: iconClassName, name: "settings" });
     }
     else if (props.icon === 'ApplicationIcon' && applicationIcon) {
-        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: applicationIcon });
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { className: iconClassName, icon: applicationIcon });
     }
     else if (typeof props.icon === 'object' && props.icon.src) {
-        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.icon });
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { className: iconClassName, icon: props.icon });
     }
     return (React.createElement(rebass_1.Flex, { flex: 0, className: baseClassName },
         icon,
-        React.createElement(rebass_1.Text, null, props.children)));
+        React.createElement(rebass_1.Text, { className: `${baseClassName}__Title` }, props.children)));
 };
 exports.default = exports.TopBar;

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

@@ -14,7 +14,9 @@ class AdaptablePopupConfirmation extends React.Component {
     constructor(props) {
         super(props);
         this.changeContent = (e) => {
-            this.setState({ PromptText: e.target.value });
+            this.setState({
+                PromptText: e.target.value,
+            });
         };
         this.state = { PromptText: '' };
     }

package/src/View/Components/Popups/AdaptablePopupPrompt.d.ts

@@ -1,18 +1,11 @@
 import * as React from 'react';
-export interface AdaptablePopupPromptProps extends React.ClassAttributes<AdaptablePopupPrompt> {
-    showPopup: boolean;
+import { Action } from 'redux';
+export interface AdaptablePopupPromptProps {
     header: string;
     message: string;
     onClose: () => void;
     onConfirm: Function;
+    onConfirmActionCreator?: (inputText: string) => Action;
+    defaultValue?: string;
 }
-export interface AdaptablePopupPromptState {
-    promptText: string;
-}
-export declare class AdaptablePopupPrompt extends React.Component<AdaptablePopupPromptProps, AdaptablePopupPromptState> {
-    constructor(props: AdaptablePopupPromptProps);
-    render(): JSX.Element;
-    onCloseForm(): void;
-    onConfirmmForm(): void;
-    changeContent: (e: any) => void;
-}
+export declare const AdaptablePopupPrompt: React.FunctionComponent<AdaptablePopupPromptProps>;

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

@@ -8,40 +8,41 @@ const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
 const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-class AdaptablePopupPrompt extends React.Component {
-    constructor(props) {
-        super(props);
-        this.changeContent = (e) => {
-            this.setState({ promptText: e.target.value });
-        };
-        this.state = { promptText: '' };
-    }
-    render() {
-        return (this.props.showPopup && (React.createElement(Dialog_1.default, { modal: true, "data-name": `prompt-popup`, isOpen: this.props.showPopup, onDismiss: this.props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-            React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 }, this.props.header),
-                StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.message) && (React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 },
-                    ' ',
-                    React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, this.props.message.split('\n').map(function (item, index) {
-                        return (React.createElement("span", { key: index },
-                            item,
-                            React.createElement("br", null)));
-                    })))),
-                React.createElement(Input_1.default, { autoFocus: true, marginTop: 3, mx: 3, value: this.state.promptText, type: "string", placeholder: "Enter text", onChange: (e) => this.changeContent(e) }),
-                React.createElement(rebass_1.Box, { marginTop: 3 },
-                    React.createElement(rebass_1.Flex, { padding: 2 },
-                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.state.promptText), onClick: () => this.onConfirmmForm() }, "OK"),
-                        React.createElement("div", { style: { flex: 1 } }),
-                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => this.onCloseForm(), "data-name": "cancel" }, "Cancel")))))));
-    }
-    onCloseForm() {
-        this.setState({ promptText: '' });
-        this.props.onClose();
-    }
-    onConfirmmForm() {
-        let promptText = this.state.promptText;
-        this.setState({ promptText: '' });
-        this.props.onConfirm(promptText);
-    }
-}
-exports.AdaptablePopupPrompt = AdaptablePopupPrompt;
+const react_redux_1 = require("react-redux");
+exports.AdaptablePopupPrompt = (props) => {
+    var _a;
+    const dispatch = react_redux_1.useDispatch();
+    const [promptText, setPromptText] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : '');
+    const onCloseForm = () => {
+        setPromptText('');
+        props.onClose();
+    };
+    const onConfirmForm = () => {
+        props.onConfirm(promptText);
+        const confirmationAction = typeof props.onConfirmActionCreator === 'function' &&
+            props.onConfirmActionCreator(promptText);
+        if (confirmationAction) {
+            dispatch(confirmationAction);
+        }
+        setPromptText('');
+    };
+    const changeContent = (e) => {
+        setPromptText(e.target.value);
+    };
+    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+            React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 }, props.header),
+            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 },
+                ' ',
+                React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.message.split('\n').map(function (item, index) {
+                    return (React.createElement("span", { key: index },
+                        item,
+                        React.createElement("br", null)));
+                })))),
+            React.createElement(Input_1.default, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
+            React.createElement(rebass_1.Box, { marginTop: 3 },
+                React.createElement(rebass_1.Flex, { padding: 2 },
+                    React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"),
+                    React.createElement("div", { style: { flex: 1 } }),
+                    React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"))))));
+};

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

@@ -14,7 +14,10 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 exports.AdaptablePopupTeamSharing = (props) => {
     const { showPopup, onClose, onConfirm, header } = props;
-    const [config, setConfig] = react_1.useState({ description: '', type: 'Snapshot' });
+    const [config, setConfig] = react_1.useState({
+        description: '',
+        type: 'Snapshot',
+    });
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog_1.default, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
             React.createElement(rebass_1.Flex, { flexDirection: "column" },

package/src/View/Components/ScopeComponent.js

@@ -99,7 +99,10 @@ class ScopeComponent extends React.Component {
             };
             newScopeChoice = 'All';
         }
-        this.setState({ ScopeChoice: newScopeChoice, componentScope: newScope }, () => this.forceUpdate());
+        this.setState({
+            ScopeChoice: newScopeChoice,
+            componentScope: newScope,
+        }, () => this.forceUpdate());
         this.props.updateScope(newScope);
     }
     onColumnsSelectedChanged(columnFriendlyNames) {

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

@@ -19,7 +19,11 @@ exports.CustomToolPanelContent = (props) => {
     react_1.useLayoutEffect(() => {
         const node = contentsDivDomRef.current;
         if (hasCustomRenderFn(customToolPanel)) {
-            const html = customToolPanel.render({ visible: true, node, adaptableApi: api });
+            const html = customToolPanel.render({
+                visible: true,
+                node,
+                adaptableApi: api,
+            });
             setContentsHTML(html);
         }
         else if (hasCustomFrameworkComponent(customToolPanel)) {

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

@@ -86,7 +86,9 @@ class ToolPanelPopupComponent extends React.Component {
     onShowGridPropertiesChanged(event) {
         let e = event.target;
         let ToolPanelConfigView = e.value;
-        this.setState({ ToolPanelConfigView: ToolPanelConfigView });
+        this.setState({
+            ToolPanelConfigView: ToolPanelConfigView,
+        });
     }
     onToolPanelToolPanelsChanged(selectedValues) {
         const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;

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

@@ -40,7 +40,7 @@ exports.ToolPanelWrapper = (props) => {
             ];
         }
     };
-    const [toolPanelName, toolPanelHeader, toolPanelContent, moduleInfo,] = getToolPanelConfiguration();
+    const [toolPanelName, toolPanelHeader, toolPanelContent, moduleInfo] = getToolPanelConfiguration();
     const isMinimised = visibilityMode === 'collapsed';
     const isConfigurable = 
     // only module toolPanels are configurable

package/src/View/ConditionalStyle/Wizard/ConditionalStyleSettingsWizardSettings.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ConditionalStyle } from '../../../../types';
+export declare const renderConditionalStyleSettingsSummary: (data: ConditionalStyle) => JSX.Element;
+interface ConditionalStyleSettingsWizardSettingsProps {
+    onChange: (data: ConditionalStyle) => void;
+}
+export declare const ConditionalStyleSettingsWizardSettings: React.FunctionComponent<ConditionalStyleSettingsWizardSettingsProps>;
+export {};

package/src/View/ConditionalStyle/Wizard/ConditionalStyleSettingsWizardSettings.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalStyleSettingsWizardSettings = exports.renderConditionalStyleSettingsSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../components/CheckBox");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Tabs_1 = require("../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+exports.renderConditionalStyleSettingsSummary = (data) => (React.createElement(rebass_1.Box, { padding: 2 },
+    React.createElement(rebass_1.Text, null, "Include grouped rows"),
+    React.createElement(rebass_1.Text, { mt: 3 }, data.IncludeGroupedRows ? 'Yes' : 'No')));
+exports.ConditionalStyleSettingsWizardSettings = (props) => {
+    const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const onIncludeGroupedRowsChanged = (checked) => {
+        props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows: checked }));
+    };
+    return (React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
+                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox_1.CheckBox, { checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+};

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.js

@@ -17,6 +17,7 @@ const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const react_redux_1 = require("react-redux");
 const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ConditionalStyleRedux"));
+const ConditionalStyleSettingsWizardSettings_1 = require("./ConditionalStyleSettingsWizardSettings");
 exports.ConditionalStyleWizard = (props) => {
     var _a;
     const data = (_a = props.data) !== null && _a !== void 0 ? _a : props.popupParams.value;
@@ -84,6 +85,12 @@ exports.ConditionalStyleWizard = (props) => {
                 },
                 renderSummary: ConditionalStyleRuleWizardSection_1.renderConditionalStyleRuleSummary,
             },
+            {
+                title: 'Settings',
+                renderSummary: ConditionalStyleSettingsWizardSettings_1.renderConditionalStyleSettingsSummary,
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(ConditionalStyleSettingsWizardSettings_1.ConditionalStyleSettingsWizardSettings, { onChange: setConditionalStyle }))),
+            },
             '-',
             {
                 details: 'Review the Conditional Style',

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -55,7 +55,9 @@ exports.CustomSortValuesWizardSection = (props) => {
         return sortedValuesMap.has(option);
     }, [sortedValuesMap]);
     const options = react_1.useMemo(() => {
-        return sortWithOrder_1.sortWithOrderArray(distinctValues, data.SortedValues, { sortUnorderedItems: false });
+        return sortWithOrder_1.sortWithOrderArray(distinctValues, data.SortedValues, {
+            sortUnorderedItems: false,
+        });
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
     const className = join_1.default(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -17,7 +17,11 @@ exports.CustomToolbarWrapper = (props) => {
         const node = contentsDivRef.current;
         const adaptableApi = api;
         if (props.customToolbar.render) {
-            const html = props.customToolbar.render({ visible: true, node, adaptableApi });
+            const html = props.customToolbar.render({
+                visible: true,
+                node,
+                adaptableApi,
+            });
             setContentsHTML(html);
         }
         else if (props.customToolbar.frameworkComponent) {

package/src/View/Dashboard/Dashboard.js

@@ -150,7 +150,7 @@ const DashboardComponent = (props) => {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
         }, left: React.createElement(React.Fragment, null,
-            React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon }),
+            React.createElement(ApplicationIcon_1.ApplicationIcon, { className: "ab-Dashboard__application-icon", icon: props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon }),
             dashboardOptions.buttonsLocation === 'left' && renderModuleButtons()), right: React.createElement(React.Fragment, null,
             renderDashboardButtons(),
             dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),

package/src/View/Dashboard/DashboardPopup.js

@@ -90,7 +90,9 @@ class DashboardPopupComponent extends React.Component {
     onDashboardConfigViewChanged(event) {
         let e = event.target;
         let dashboardConfigView = e.value;
-        this.setState({ DashboardConfigView: dashboardConfigView });
+        this.setState({
+            DashboardConfigView: dashboardConfigView,
+        });
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -189,7 +189,8 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         const layoutColumns = options.predefinedConfig.Layout.Layouts[0].Columns;
         if (layoutColumns.includes('undoActionColumn')) {
             // remove action column from layout
-            options.predefinedConfig.Layout.Layouts[0].Columns = layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
+            options.predefinedConfig.Layout.Layouts[0].Columns =
+                layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
         }
     }
     return options;

package/src/View/Export/Wizard/ReportColumnTypeWizard.js

@@ -44,7 +44,9 @@ class ReportColumnTypeWizard extends React.Component {
             }, () => this.props.updateGoBackState());
         }
         else {
-            this.setState({ ReportColumnScope: Enums_1.ReportColumnScope.ScopeColumns }, () => this.props.updateGoBackState());
+            this.setState({
+                ReportColumnScope: Enums_1.ReportColumnScope.ScopeColumns,
+            }, () => this.props.updateGoBackState());
         }
     }
     canNext() {

package/src/View/Export/Wizard/ReportRowTypeWizard.js

@@ -44,7 +44,9 @@ class ReportRowTypeWizard extends React.Component {
             }, () => this.props.updateGoBackState());
         }
         else {
-            this.setState({ ReportRowScope: Enums_1.ReportRowScope.ExpressionRows }, () => this.props.updateGoBackState());
+            this.setState({
+                ReportRowScope: Enums_1.ReportRowScope.ExpressionRows,
+            }, () => this.props.updateGoBackState());
         }
     }
     canNext() {

package/src/View/Filter/FilterViewPanel.d.ts

@@ -1,13 +1,10 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import { UIPrompt } from '../../Utilities/Interface/MessagePopups';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as FilterRedux from '../../Redux/ActionsReducers/FilterRedux';
 import { ColumnFilter } from '../../PredefinedConfig/FilterState';
 import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
 import { Entitlement } from '../../PredefinedConfig/Common/Entitlement';
 import * as React from 'react';
 export interface FilterViewPanelComponentProps extends ViewPanelProps {
-    onShowPrompt: (prompt: UIPrompt) => PopupRedux.PopupShowPromptAction;
     onHideQuickFilterBar: () => FilterRedux.QuickFilterBarHideAction;
     onShowQuickFilterBar: () => FilterRedux.QuickFilterBarShowAction;
     ColumnFilters: ColumnFilter[];
@@ -21,5 +18,5 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
     private onClearFilters;
     private onClearColumnFilter;
 }
-export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, any>;
+export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, Pick<React.ClassAttributes<FilterViewPanelComponent> & FilterViewPanelComponentProps, "ref" | "key">>;
 export {};

package/src/View/Filter/FilterViewPanel.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterViewPanelControl = void 0;
 const tslib_1 = require("tslib");
-const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const FilterRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/FilterRedux"));
 const React = tslib_1.__importStar(require("react"));
 const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
@@ -37,7 +36,7 @@ class FilterViewPanelComponent extends React.Component {
         this.props.api.filterApi.clearColumnFilterByColumn(columnFilter.ColumnId);
     }
 }
-function mapStateToProps(state, ownProps) {
+function mapStateToProps(state) {
     return {
         ColumnFilters: state.Filter.ColumnFilters,
         IsQuickFilterVisible: state.Filter.IsQuickFilterVisible,
@@ -45,7 +44,6 @@ function mapStateToProps(state, ownProps) {
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onShowPrompt: (prompt) => dispatch(PopupRedux.PopupShowPrompt(prompt)),
         onHideQuickFilterBar: () => dispatch(FilterRedux.QuickFilterBarHide()),
         onShowQuickFilterBar: () => dispatch(FilterRedux.QuickFilterBarShow()),
     };

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -49,8 +49,7 @@ class FreeTextColumnSummaryComponent extends React.Component {
             this.state.editedAdaptableObject && (React.createElement(FreeTextColumnWizard_1.FreeTextColumnWizard, { moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.FreeTextColumns, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }
     onNew() {
-        const specialColumnsAreFilterable = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.enableFilterOnSpecialColumns;
+        const specialColumnsAreFilterable = this.props.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns;
         let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyFreeTextColumn(specialColumnsAreFilterable);
         configEntity.ColumnId = this.props.summarisedColumn.columnId;
         this.setState({

package/src/View/GridInfo/AdaptableOptionsComponent.js

@@ -92,7 +92,10 @@ const OptionContainerComponent = (props) => {
     const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
     return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `options-container-${name}`, variant: "default", headerText: label, headerProps: {
             fontSize: 3,
-            style: { fontWeight: viewMode === 'expanded' ? 800 : 400, cursor: 'pointer' },
+            style: {
+                fontWeight: viewMode === 'expanded' ? 800 : 400,
+                cursor: 'pointer',
+            },
             'data-name': `options-container-header-${name}`,
             onClick: () => requestViewModeChange(),
         }, button: panelButton, style: { marginBottom: 3 } }, viewMode === 'expanded' && children));

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

@@ -21,7 +21,11 @@ const PivotList_1 = require("./PivotList");
 const ButtonInfo_1 = require("../../../Components/Buttons/ButtonInfo");
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
-const verticalPanelStyle = { minHeight: 150, flex: '1 0 auto', overflow: 'auto' };
+const verticalPanelStyle = {
+    minHeight: 150,
+    flex: '1 0 auto',
+    overflow: 'auto',
+};
 const ListPanel = (props) => (React.createElement(Panel_1.default, Object.assign({ variant: "modern", bodyProps: { padding: 0 }, style: Object.assign(Object.assign({}, verticalPanelStyle), props.style) }, props)));
 const ColumnLabels = (props) => {
     const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);