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

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickFilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
 const react_redux_1 = require("react-redux");
 const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
@@ -16,7 +16,7 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Ex
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const CheckBox_1 = require("../../../components/CheckBox");
-const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 class QuickFilterFormComponent extends React.Component {
@@ -106,14 +106,12 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             showQuickFilterDropdown = !hideQuickFilterDropdownFunction(this.props.currentColumn);
         }
         let showQuickFilterInput = true;
-        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterInput;
+        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }

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, isDisabled: props.isDisabled })));
+    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, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
 };

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

@@ -3,9 +3,6 @@ import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
 import { ModuleParams } from '../../SharedProps/ModuleViewPopupProps';
 import { AdaptableModule } from '../../../../PredefinedConfig/Common/Types';
 import { AdaptableApi } from '../../../../Api/AdaptableApi';
-/**
- * This is the main popup that we use - so all Module popups will appear here.
- */
 export interface AdaptablePopupProps {
     componentName?: string;
     componentModule: AdaptableModule;

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

@@ -4,100 +4,63 @@ exports.AdaptablePopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const react_redux_1 = require("react-redux");
-const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
 const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
 const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const Navigation_1 = require("./Navigation");
 const PopupContext_1 = tslib_1.__importDefault(require("./PopupContext"));
 const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
-const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
-const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
-const Utilities_1 = require("./Utilities");
 const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
+const useMenuItems_1 = require("./useMenuItems");
+const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
 exports.AdaptablePopup = (props) => {
-    var _a, _b, _c, _d, _e;
     const adaptable = AdaptableContext_1.useAdaptable();
-    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(() => {
-        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,
-                    isVisible: true,
-                    reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name, null, {
-                        isCustomSettingsPanel: true,
-                    }),
-                };
-            }
-            return customPanelMenuItem || visibleItems.find((item) => item.module === moduleName);
-        })
-            .filter(Boolean);
-    }, [allMenuItems]);
-    const isCustomSettingsPanel = (_a = props.moduleProps) === null || _a === void 0 ? void 0 : _a.isCustomSettingsPanel;
-    const customSettingsPanel = isCustomSettingsPanel &&
-        settingsPanelOptions.customSettingsPanels.find((settingsPanel) => settingsPanel.name === props.componentName);
-    let componentModule = props.componentModule;
-    // When it is opened without specifying a module
-    const firstMenuItem = (_b = menuItems.find((menuItem) => menuItem !== '-')) === null || _b === void 0 ? void 0 : _b.module;
-    if (!customSettingsPanel && !props.componentModule && firstMenuItem !== 'General') {
-        componentModule = firstMenuItem;
-    }
-    const accessLevel = props.api.internalApi
-        .getEntitlementService()
-        .getEntitlementAccessLevelForModule(componentModule);
-    const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
-    const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
-    // action popups + non-primary module popups
-    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.popupType) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    const menuItems = useMenuItems_1.useMenuItems();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
-    let style = { maxWidth: 1400, maxHeight: 1200 };
-    if (isWindowModal) {
-        style = { height: '100%' };
+    let friendlyName = null;
+    let isActionModule = false;
+    let moduleViewContent = null;
+    let activeItem = null;
+    let accessLevel = 'Full';
+    const firstMenuItem = menuItems.find((menuItem) => menuItem !== '-');
+    const firstMenuModule = firstMenuItem === null || firstMenuItem === void 0 ? void 0 : firstMenuItem.module;
+    let componentModule = props.componentModule;
+    let componentName = props.componentName;
+    // ts forces to check for General, there is no menu item General
+    const useFirstItem = !props.componentModule;
+    if (useFirstItem && firstMenuModule !== 'General') {
+        componentModule = firstMenuModule;
     }
-    else if (isActionModule) {
-        style = { maxWidth: 800, maxHeight: 450 };
+    const isCustomSettingsPanel = componentModule === 'CustomSettingsPanelModule';
+    if (isCustomSettingsPanel) {
+        if (useFirstItem) {
+            componentName = firstMenuItem.label;
+        }
+        const customSettingsPanel = settingsPanelOptions.customSettingsPanels.find((settingsPanel) => settingsPanel.name === componentName);
+        friendlyName = customSettingsPanel.name;
+        activeItem = customSettingsPanel.name;
+        moduleViewContent = React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
     }
-    const settingsKey = isActionModule ? `action-${moduleInfo.FriendlyName}` : 'settings';
-    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[settingsKey]; });
-    if (!popupSettings) {
-        const size = isActionModule
-            ? Utilities_1.getActionPanelSize()
-            : (_d = settingsPanelOptions.size) !== null && _d !== void 0 ? _d : Utilities_1.getSettingsPanelSize();
-        popupSettings = {
-            size: size,
-            position: (_e = settingsPanelOptions.position) !== null && _e !== void 0 ? _e : Utilities_1.getMiddlePosition(size),
-        };
+    else {
+        const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
+        const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
+        accessLevel = props.api.internalApi
+            .getEntitlementService()
+            .getEntitlementAccessLevelForModule(componentModule);
+        friendlyName = moduleInfo.FriendlyName;
+        isActionModule =
+            moduleInfo &&
+                (DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+                    (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
+        activeItem = moduleInfo.ModuleName;
+        moduleViewContent = (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
-    const handleWindowSettings = (settings) => {
-        dispatch(SystemRedux_1.SystemSettingsPanelSet(settingsKey, settings));
-    };
+    const baseClassName = 'ab-Adaptable-Popup';
+    const className = join_1.default(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
     return (React.createElement(PopupContext_1.default.Provider, { value: {
             hidePopup: () => {
                 if (props.onHide) {
@@ -105,16 +68,9 @@ exports.AdaptablePopup = (props) => {
                 }
             },
         } },
-        React.createElement(Dialog_1.default, Object.assign({ windowModal: isWindowModal, fixed: false, windowModalProps: {
-                handleSelector: isActionModule
-                    ? `.${baseClassName} .ab-Panel__header`
-                    : '.ab-Adaptable-Popup__TopBar',
-                size: popupSettings.size,
-                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),
+        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isActionModule, isWindowModal: isWindowModal, onHide: props.onHide },
             !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 })))))));
+                !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
+                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare const AdaptablePopupDialog: React.FunctionComponent<{
+    baseClassName: string;
+    className: string;
+    friendlyName: string;
+    isActionModule: boolean;
+    isWindowModal: boolean;
+    onHide: () => void;
+    style?: React.CSSProperties;
+}>;

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

@@ -0,0 +1,54 @@
+"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_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, } = props;
+    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,21 +32,20 @@ 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", { className: `${baseClassName}__Button`, onClick: () => {
+                React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);
                     } },
                     menuItem.icon && (React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: menuItem.icon })),

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/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;

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,9 +79,9 @@ 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;
@@ -88,8 +89,7 @@ class ToolPanelPopupComponent extends React.Component {
         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/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',