@adaptabletools/adaptable 11.0.0-canary.2 → 11.0.0-canary.6

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

@@ -0,0 +1,78 @@
+"use strict";
+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");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const Utilities_1 = require("./Utilities");
+const WindowDialog = (props) => {
+    var _a, _b;
+    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide } = props, dialogProps = tslib_1.__rest(props, ["onChange", "style", "baseClassName", "className", "isActionModule", "settingsPanelOptionsKey", "onHide"]);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    let popupSettings = react_redux_1.useSelector((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsPanelOptionsKey]; });
+    const handleWindowSettings = (settings) => {
+        dispatch(SystemRedux_1.SystemSettingsPanelSet(settingsPanelOptionsKey, settings));
+    };
+    if (!popupSettings) {
+        const size = isActionModule
+            ? Utilities_1.getActionPanelSize()
+            : (_a = settingsPanelOptions.size) !== null && _a !== void 0 ? _a : Utilities_1.getSettingsPanelSize();
+        popupSettings = {
+            size: size,
+            position: (_b = settingsPanelOptions.position) !== null && _b !== void 0 ? _b : Utilities_1.getMiddlePosition(size),
+        };
+    }
+    const windowModalProps = {
+        handleSelector: isActionModule
+            ? `.${baseClassName} .ab-Panel__header`
+            : '.ab-Adaptable-Popup__TopBar',
+        size: popupSettings.size,
+        position: popupSettings.position,
+        onChange: handleWindowSettings,
+    };
+    return (React.createElement(Dialog_1.default, Object.assign({ windowModal: true, fixed: false, windowModalProps: windowModalProps, style: Object.assign(Object.assign({}, props.style), { height: '100%' }), padding: 0, className: className, onDismiss: onHide, isOpen: true, showCloseButton: true }, dialogProps)));
+};
+const PopupDialog = (props) => {
+    const { style, className, onHide, children } = props, dialogProps = tslib_1.__rest(props, ["style", "className", "onHide", "children"]);
+    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, 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));
+    }
+    else {
+        const modalStyle = Object.assign(Object.assign({}, style), (isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }));
+        return (React.createElement(PopupDialog, { onHide: onHide, style: modalStyle, className: className }, children));
+    }
+};

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

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { AccessLevel, AdaptableApi } from '../../../../../types';
 import { IModule } from '../../../../Strategy/Interface/IModule';
-export interface AdaptablePopupModuleViewProps {
+import { ModuleParams, ModuleViewPopupProps } from '../../SharedProps/ModuleViewPopupProps';
+export interface AdaptablePopupModuleViewProps extends ModuleViewPopupProps<typeof AdaptablePopupModuleView> {
     module: IModule;
     api: AdaptableApi;
     accessLevel: AccessLevel;
+    popupParams?: ModuleParams;
 }
 export declare const AdaptablePopupModuleView: React.FunctionComponent<AdaptablePopupModuleViewProps>;

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

@@ -11,18 +11,27 @@ const AdaptableObjectList_1 = require("../../AdaptableObjectList");
 const ButtonNew_1 = require("../../Buttons/ButtonNew");
 const PopupPanel_1 = require("./PopupPanel");
 exports.AdaptablePopupModuleView = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     /**
      * This triggers an render for each redux change.
      * Not sure yet how to trigger this component to render when an item is edited.
      */
     react_redux_1.useSelector((state) => state);
-    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
+    const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
+        var _a, _b;
+        return ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit';
+    });
+    React.useEffect(() => {
+        var _a, _b;
+        if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit') {
+            setIsWizardOpen(true);
+        }
+    }, [(_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action]);
     const [abObjectType, setAbObjectType] = React.useState(null);
     const moduleInfo = props.module.moduleInfo;
-    const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
+    const items = (_b = props.module) === null || _b === void 0 ? void 0 : _b.toViewAll();
     const moduleViewProperties = props.module.getViewProperties();
-    const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
+    const EditWizard = (_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(moduleViewProperties);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -34,7 +43,7 @@ exports.AdaptablePopupModuleView = (props) => {
     // Some modules do not have new button
     // e.g. filter
     let newButton = null;
-    if ((_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _c === void 0 ? void 0 : _c.length) {
+    if ((_d = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _d === void 0 ? void 0 : _d.length) {
         const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjctType) => {
             var _a;
             return {
@@ -58,10 +67,14 @@ exports.AdaptablePopupModuleView = (props) => {
             } }));
     }
     const handleWizardClose = () => {
+        var _a;
         setAbObjectType(null);
         setIsWizardOpen(false);
+        if (['Toolbar', 'ContextMenu', 'ColumnMenu'].includes((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.source)) {
+            props.onClosePopup();
+        }
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton },
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
-        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };

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

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { AdaptableApi, AdaptableMenuItem } from '../../../../../types';
 import { CustomSettingsPanel } from '../../../../AdaptableOptions/SettingsPanelOptions';
-import { ModuleInfo } from '../../../../Strategy/Interface/IModule';
 interface NavigationProps {
     api: AdaptableApi;
     menuItems: (AdaptableMenuItem | '-')[];
-    moduleInfo?: ModuleInfo;
-    activeCustomSettingPanel?: CustomSettingsPanel;
+    activeItem: string;
     customSettingsPanels?: CustomSettingsPanel[];
 }
 export declare const Navigation: React.FunctionComponent<NavigationProps>;

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

@@ -9,19 +9,12 @@ const icons_1 = require("../../../../components/icons");
 const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
 exports.Navigation = (props) => {
-    var _a;
     const dispatch = react_redux_1.useDispatch();
     const handleKeyPress = React.useCallback((event) => {
         if ((event.ctrlKey || event.metaKey) &&
             (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
             const isKeyUp = event.code === 'ArrowUp';
-            const currentIndex = props.menuItems.findIndex((item) => {
-                var _a, _b;
-                return item !== '-' &&
-                    (item.module === ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) ||
-                        // in case of custom panel
-                        item.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name));
-            });
+            const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.module === props.activeItem || item.label === props.activeItem));
             let nextMenuItem = null;
             if (isKeyUp) {
                 let candidate = props.menuItems[currentIndex - 1] !== '-'
@@ -39,19 +32,18 @@ exports.Navigation = (props) => {
                 dispatch(nextMenuItem.reduxAction);
             }
         }
-    }, [(_a = props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName, props.menuItems]);
+    }, [props.activeItem, props.menuItems]);
     useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
     return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
         React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
             if (menuItem === '-') {
                 return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
             }
-            const isActive = ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) === menuItem.module ||
-                menuItem.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name);
+            const isActive = props.activeItem === menuItem.module || menuItem.label === props.activeItem;
             const className = join_1.default(baseClassName, isActive && `${baseClassName}--active`);
-            let customIcon = (_f = (_e = (_d = (_c = props.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find) === null || _d === void 0 ? void 0 : _d.call(_c, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _e === void 0 ? void 0 : _e.icon) !== null && _f !== void 0 ? _f : null;
+            let customIcon = (_d = (_c = (_b = (_a = props.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : null;
             return (React.createElement("li", { className: className, key: menuItem.label },
                 React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);

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/AdaptablePopup/useMenuItems.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableMenuItem } from '../../../../../types';
+export declare const useMenuItems: () => (AdaptableMenuItem | '-')[];

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuItems = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
+exports.useMenuItems = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    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; });
+    return React.useMemo(() => {
+        var _a;
+        let navigationItems = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.navigation) === null || _a === void 0 ? void 0 : _a.items;
+        if (!navigationItems) {
+            navigationItems = [...DefaultSettingsPanel_1.DEFAULT_NAVIGATION_ITEMS];
+            if (settingsPanelOptions.customSettingsPanels) {
+                navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
+            }
+        }
+        const visibleItems = allMenuItems.filter((item) => item.module !== 'General' && !DefaultSettingsPanel_1.ACTION_POPUPS.includes(item.module) && item.isVisible);
+        return navigationItems
+            .map((moduleName) => {
+            var _a, _b;
+            if (moduleName === '-') {
+                return moduleName;
+            }
+            const customSettingsPanel = (_b = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (panel) => panel.name === moduleName);
+            let customPanelMenuItem = null;
+            if (customSettingsPanel) {
+                customPanelMenuItem = {
+                    label: customSettingsPanel.name,
+                    module: 'CustomSettingsPanelModule',
+                    isVisible: true,
+                    reduxAction: PopupRedux.PopupShowScreen('CustomSettingsPanelModule', customSettingsPanel.name),
+                };
+            }
+            return customPanelMenuItem || visibleItems.find((item) => item.module === moduleName);
+        })
+            .filter(Boolean);
+    }, [allMenuItems]);
+};

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/SharedProps/ModuleViewPopupProps.d.ts

@@ -4,7 +4,7 @@ import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColum
 import { ModuleInfo } from '../../../Strategy/Interface/IModule';
 import { AdaptableObject } from '../../../types';
 export interface ModuleViewPopupProps<View> extends BaseProps<View> {
-    popupParams: ModuleParams;
+    popupParams?: ModuleParams;
     onClearPopupParams: () => PopupRedux.PopupClearParamAction;
     teamSharingActivated: boolean;
     onClosePopup: () => void;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableToolPanelAgGridComponent = exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const react_redux_1 = require("react-redux");

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

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const uuid_1 = require("../../../components/utils/uuid");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 exports.CustomToolPanelContent = (props) => {
     var _a;
     const { customToolPanel } = props;
@@ -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

@@ -64,6 +64,7 @@ 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 isToolPanelReadOnly = entitlementService.isModuleReadOnlyEntitlement('ToolPanel');
         const isModuleCheckboxDisabled = (module) => {
             if (module === 'SettingsPanel') {
                 return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
@@ -78,18 +79,19 @@ class ToolPanelPopupComponent extends React.Component {
                 React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
                     React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
                 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(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
                 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:`, isDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
     }
     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;
+        const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
         // try to return the pre-existing definition (to maintain the previous collapsed state)
         // otherwise select the new toolPanel with the default 'collapsed' state
         let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {

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/Components/ValueSelector/index.d.ts

@@ -15,7 +15,8 @@ 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;
+    isOptionDisabled?: (option: OPTION_TYPE) => boolean;
+    disabled?: 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, isDisabled, } = props;
+    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = 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, disabled: isDisabled ? isDisabled(option) : false, onChange: (checked) => {
+                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
                             if (checked) {
                                 selectedMap.set(identifier, option);
                             }
@@ -91,13 +91,13 @@ function ValueSelector(props) {
     };
     const renderSelectionSection = () => {
         const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2, style: { whiteSpace: 'nowrap', flex: 'none' } }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
-            !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
+            !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
                     options.forEach((option) => {
                         selectedMap.set(toIdentifier(option), option);
                     });
                     notifyChange();
                 } }, "Select all")) : null)) : (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
+            React.createElement(SimpleButton_1.default, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
                     selectedMap.clear();
                     notifyChange();
                 } }, clearSelectionLabel !== null && clearSelectionLabel !== void 0 ? clearSelectionLabel : 'Clear selection.'),
@@ -106,7 +106,7 @@ function ValueSelector(props) {
                 : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
         return (React.createElement(rebass_1.Box, { mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
             selectionBox,
-            React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange })));
+            React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange, readOnly: disabled })));
     };
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, className: "ab-ValueSelector", style: {
             overflow: 'hidden',

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

@@ -34,9 +34,9 @@ function ConditionalStyleRuleWizardSection(props) {
                     React.createElement("i", null, "Scope"),
                     " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
                 useAggregationQuery: (React.createElement(React.Fragment, null,
-                    "Use an AggregationQuery if ",
+                    "Use an AggregatedBooleanQuery if ",
                     React.createElement("i", null, "Scope"),
-                    " is 'Whole Row' - so any data change may be evaluated in a complex AggregationExpression")),
+                    " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
             } })));
 }
 exports.ConditionalStyleRuleWizardSection = ConditionalStyleRuleWizardSection;

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 {};