@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.0

package/src/View/Components/Panels/PanelWithButton.js

@@ -4,24 +4,18 @@ import Panel from '../../../components/Panel';
 import { Flex, Box } from 'rebass';
 import { allIcons } from '../../../components/icons';
 import { ButtonInfo } from '../Buttons/ButtonInfo';
-//We cannot destructure this.props using the react way in typescript which is a real pain as you
-//need to transfer props individually as a consequence
-//let { buttonContent, ...other } = this.props
-export class PanelWithButton extends React.Component {
-    render() {
-        let { buttonContent } = this.props;
-        const IconCmp = allIcons[this.props.glyphicon];
-        let header = (React.createElement(Flex, { alignItems: "center", width: "100%" },
-            React.createElement(Flex, { alignItems: "center" },
-                this.props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
-                React.createElement(Box, { marginRight: 2, "data-name": "space-before" }),
-                this.props.headerText,
-                React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
-                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                    ) }))),
-            React.createElement(Box, { style: { flex: 1 } }),
-            buttonContent ? (React.createElement(SimpleButton, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,
-            this.props.button ? React.cloneElement(this.props.button) : null));
-        return (React.createElement(Panel, { flex: 1, className: this.props.className, bodyScroll: this.props.bodyScroll != null ? this.props.bodyScroll : true, bodyProps: this.props.bodyProps, variant: this.props.variant || 'primary', header: header, headerProps: this.props.headerProps, style: this.props.style, borderRadius: (this.props.borderRadius || 'none'), border: (this.props.border || 'none') }, this.props.children));
-    }
-}
+export const PanelWithButton = (props) => {
+    const { buttonContent } = props;
+    const IconCmp = allIcons[props.glyphicon];
+    const header = (React.createElement(Flex, { alignItems: "center", width: "100%" },
+        React.createElement(Flex, { alignItems: "center" },
+            props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
+            React.createElement(Box, { marginRight: 2, "data-name": "space-before" }),
+            props.headerText,
+            React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
+            props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))),
+        React.createElement(Box, { style: { flex: 1 } }),
+        buttonContent ? (React.createElement(SimpleButton, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null) }, buttonContent)) : null,
+        props.button ? React.cloneElement(props.button) : null));
+    return (React.createElement(Panel, { flex: 1, className: props.className, bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style, borderRadius: (props.borderRadius || 'none'), border: (props.border || 'none') }, props.children));
+};

package/src/View/Components/Panels/PanelWithImage.js

@@ -9,7 +9,6 @@ import { ButtonInfo } from '../Buttons/ButtonInfo';
 //let { buttonContent, ...other } = this.props
 class PanelWithImageCmp extends React.Component {
     render() {
-        var _a;
         const IconCmp = allIcons[(this.props.icon || this.props.glyphicon)];
         const headerStyle = {};
         if (this.props.headerColor) {
@@ -20,13 +19,17 @@ class PanelWithImageCmp extends React.Component {
             React.createElement(Flex, { alignItems: "center" },
                 React.createElement(Flex, { minHeight: 15, alignItems: "center", style: headerStyle },
                     IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(Box, { marginRight: 2 }), (_a = this.props.header) !== null && _a !== void 0 ? _a : '',
+                    React.createElement(Box, { marginRight: 2 }),
+                    this.props.header ?? '',
                     React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
                     this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
                 React.createElement(Box, { flex: 1 }),
                 this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(NewPanel, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
+        return (React.createElement(NewPanel, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: {
+                padding: 0,
+                ...this.props.bodyProps,
+            } }, this.props.children));
     }
 }
 // apparently it's very hard to type `withTheme()` result in typescript

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

@@ -6,5 +6,5 @@ export interface PanelWithRowProps extends PanelProps {
     headerAlign?: string;
 }
 export declare class PanelWithRow extends React.Component<PanelWithRowProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -8,5 +8,5 @@ export interface PanelWithTwoButtonsProps extends PanelProps {
     headerText: string;
 }
 export declare class PanelWithTwoButtons extends React.Component<PanelWithTwoButtonsProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/Components/Panels/PanelWithTwoButtons.js

@@ -10,6 +10,6 @@ export class PanelWithTwoButtons extends React.Component {
             React.createElement(Flex, { flex: 1 }, this.props.headerText),
             this.props.secondButton,
             this.props.firstButton));
-        return (React.createElement(Panel, Object.assign({}, this.props, { header: header }), this.props.children));
+        return (React.createElement(Panel, { ...this.props, header: header }, this.props.children));
     }
 }

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

@@ -4,5 +4,5 @@ export interface ToolPanelSettingsPanelProps extends PanelProps {
     button: React.ReactElement<any>;
 }
 export declare class ToolPanelSettingsPanel extends React.Component<ToolPanelSettingsPanelProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface IAdaptableLoadingScreenProps {
     showLoadingScreen: boolean;
     loadingScreenDelay?: number;
@@ -6,4 +6,4 @@ export interface IAdaptableLoadingScreenProps {
     loadingScreenText?: string;
     onClose?: () => {};
 }
-export declare function AdaptableLoadingScreen(props: IAdaptableLoadingScreenProps): JSX.Element;
+export declare function AdaptableLoadingScreen(props: IAdaptableLoadingScreenProps): React.JSX.Element;

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

@@ -18,6 +18,6 @@ export function AdaptableLoadingScreen(props) {
             minHeight: 'auto',
         } },
         React.createElement(Box, { padding: 3 },
-            React.createElement("h4", null, loadingScreenTitle !== null && loadingScreenTitle !== void 0 ? loadingScreenTitle : 'Initialising Grid'),
-            React.createElement("p", null, loadingScreenText !== null && loadingScreenText !== void 0 ? loadingScreenText : 'Retrieving your settings and setting up the grid...'))));
+            React.createElement("h4", null, loadingScreenTitle ?? 'Initialising Grid'),
+            React.createElement("p", null, loadingScreenText ?? 'Retrieving your settings and setting up the grid...'))));
 }

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

@@ -11,13 +11,12 @@ import { CustomSettingsPanelView } from './CustomSettingsPanelView';
 import { useMenuItems } from './useMenuItems';
 import { AdaptablePopupDialog } from './AdaptablePopupDialog';
 export const AdaptablePopup = (props) => {
-    var _a, _b, _c;
     const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
+    const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = 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;
+    const modalContainer = adaptable.adaptableOptions?.containerOptions?.modalContainer;
     let friendlyName = null;
     /**
      * This means that it is not rendered in the context of Settings Panel
@@ -29,7 +28,7 @@ export const AdaptablePopup = (props) => {
     let activeItem = null;
     let accessLevel = 'Full';
     const firstMenuItem = menuItems.find((menuItem) => menuItem !== '-');
-    const firstMenuModule = firstMenuItem === null || firstMenuItem === void 0 ? void 0 : firstMenuItem.module;
+    const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
     let componentName = props.componentName;
     // ts forces to check for General, there is no menu item General
@@ -40,7 +39,7 @@ export const AdaptablePopup = (props) => {
         firstMenuModule !== 'Group') {
         componentModule = firstMenuModule;
     }
-    const customSettingsPanel = (_c = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find((customPanel) => useFirstItem ? customPanel.name === firstMenuItem.label : customPanel.name === componentName);
+    const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find((customPanel) => useFirstItem ? customPanel.name === firstMenuItem.label : customPanel.name === componentName);
     if (customSettingsPanel) {
         friendlyName = customSettingsPanel.name;
         activeItem = customSettingsPanel.name;
@@ -48,13 +47,13 @@ export const AdaptablePopup = (props) => {
     }
     else {
         const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
-        const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
+        const moduleInfo = module?.moduleInfo;
         accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(componentModule);
         friendlyName = moduleInfo.FriendlyName;
         isStandalone =
             moduleInfo &&
-                (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
-                    (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
+                (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo?.ModuleName) ||
+                    (props.componentName && props.componentName !== moduleInfo?.Popup));
         activeItem = moduleInfo.ModuleName;
         moduleViewContent = (React.createElement(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }

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

@@ -3,7 +3,6 @@ import { UIHelper } from '../../../UIHelper';
 import { AdaptableViewFactory } from '../../../AdaptableViewFactory';
 import { AdaptablePopupModuleView } from './AdaptablePopupModuleView';
 export const AdaptablePopupBody = (props) => {
-    var _a;
     const modalContainer = UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
     const moduleName = props.module.moduleInfo.ModuleName;
     const accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(moduleName);
@@ -24,8 +23,8 @@ export const AdaptablePopupBody = (props) => {
         api: props.api,
         moduleInfo,
     };
-    const BodyComponent = (AdaptableViewFactory === null || AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView;
+    const BodyComponent = AdaptableViewFactory?.[props?.componentName ?? moduleInfo.Popup] || AdaptablePopupModuleView;
     // key is to make sure state is reset between views
     // most of the views use the `AdaptablePopupModuleView` component
-    return React.createElement(BodyComponent, Object.assign({ key: props === null || props === void 0 ? void 0 : props.componentName, module: props.module }, moduleProps));
+    return React.createElement(BodyComponent, { key: props?.componentName, module: props.module, ...moduleProps });
 };

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

@@ -1,28 +1,26 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Dialog from '../../../../components/Dialog';
-import { SystemSettingsPanelSet } from '../../../../Redux/ActionsReducers/SystemRedux';
+import { SettingsPanelSet } from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { getActionPanelSize, getMiddlePosition, getSettingsPanelSize } from '../Utilities';
 const WindowDialog = (props) => {
-    var _a, _b;
-    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide } = props, dialogProps = __rest(props, ["onChange", "style", "baseClassName", "className", "isActionModule", "settingsPanelOptionsKey", "onHide"]);
+    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    let popupSettings = 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]; });
+    let popupSettings = useSelector((state) => state?.Internal?.SettingsPanel?.[settingsPanelOptionsKey]);
     const handleWindowSettings = (settings) => {
-        dispatch(SystemSettingsPanelSet(settingsPanelOptionsKey, settings));
+        dispatch(SettingsPanelSet(settingsPanelOptionsKey, settings));
     };
     if (!popupSettings) {
         const size = isActionModule
             ? getActionPanelSize()
-            : (_a = settingsPanelOptions.size) !== null && _a !== void 0 ? _a : getSettingsPanelSize();
+            : settingsPanelOptions.size ?? getSettingsPanelSize();
         popupSettings = {
             size: size,
-            position: (_b = settingsPanelOptions.position) !== null && _b !== void 0 ? _b : getMiddlePosition(size),
+            position: settingsPanelOptions.position ?? getMiddlePosition(size),
         };
     }
     const windowModalProps = {
@@ -35,11 +33,11 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return (React.createElement(Dialog, 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)));
+    return (React.createElement(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: { ...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 = __rest(props, ["style", "className", "onHide", "children"]);
-    return (React.createElement(Dialog, Object.assign({ fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true }, dialogProps), children));
+    const { style, className, onHide, children, ...dialogProps } = props;
+    return (React.createElement(Dialog, { fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
 };
 export const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
@@ -58,7 +56,10 @@ export const AdaptablePopupDialog = (props) => {
         return (React.createElement(WindowDialog, { dataName: props.dataName, 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 }));
+        const modalStyle = {
+            ...style,
+            ...(isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }),
+        };
         return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
     }
 };

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

@@ -8,25 +8,30 @@ import { ButtonNew } from '../../Buttons/ButtonNew';
 import { PopupPanel } from './PopupPanel';
 import { Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
-import { SystemLayoutShowNotAssociatedObjects } from '../../../../Redux/ActionsReducers/SystemRedux';
+import { LayoutShowNotAssociatedObjects } from '../../../../Redux/ActionsReducers/InternalRedux';
 import SimpleButton from '../../../../components/SimpleButton';
+import { useAdaptable } from '../../../AdaptableContext';
+import { useEffect } from 'react';
+import { useRerender } from '../../../../components/utils/useRerender';
 export const AdaptablePopupModuleView = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     /**
-     * This triggers a render for each redux change.
-     * Not sure yet how to trigger this component to render when an item is edited.
+     * This triggers a render for each state change.
+     * NOT sure this is still needed... It is here for historical reasons.
      */
-    useSelector((state) => state);
+    const adaptable = useAdaptable();
+    const rerender = useRerender();
+    useEffect(() => {
+        return adaptable.api.eventApi.on('AdaptableStateChanged', rerender);
+    }, [adaptable]);
     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 moduleViewProperties = (_d = (_c = (_b = props.module) === null || _b === void 0 ? void 0 : _b.getViewProperties) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : {};
-    const EditWizard = (_e = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _e === void 0 ? void 0 : _e.call(moduleViewProperties);
+    const items = props.module?.toViewAll();
+    const moduleViewProperties = props.module?.getViewProperties?.() ?? {};
+    const EditWizard = moduleViewProperties?.getEditWizard?.();
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
-        var _a, _b, _c;
-        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' ||
-            ((_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.action) === 'Clone');
+        return (props.popupParams?.action === 'New' ||
+            props.popupParams?.action === 'Edit' ||
+            props.popupParams?.action === 'Clone');
     });
     const handleOpenEditPopup = React.useCallback(() => {
         if (EditWizard) {
@@ -37,15 +42,15 @@ export const AdaptablePopupModuleView = (props) => {
         }
     }, []);
     React.useEffect(() => {
-        var _a;
-        (_a = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.onMount) === null || _a === void 0 ? void 0 : _a.call(moduleViewProperties);
+        moduleViewProperties?.onMount?.();
     }, []);
     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') {
+        if (props.popupParams?.action === 'New' ||
+            props.popupParams?.action === 'Edit' ||
+            props.popupParams?.action === 'Clone') {
             handleOpenEditPopup();
         }
-    }, [(_f = props.popupParams) === null || _f === void 0 ? void 0 : _f.action]);
+    }, [props.popupParams?.action]);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -54,20 +59,19 @@ export const AdaptablePopupModuleView = (props) => {
     else if (typeof emptyView === 'string') {
         emptyContent = emptyView;
     }
-    const toolTipText = (_g = moduleViewProperties.newTooltipText) !== null && _g !== void 0 ? _g : `Create ${moduleInfo.FriendlyName}`;
+    const toolTipText = moduleViewProperties.newTooltipText ?? `Create ${moduleInfo.FriendlyName}`;
     // Some modules do not have new button
     // e.g. filter
     let newButton = null;
-    if ((_h = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _h === void 0 ? void 0 : _h.length) {
-        const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjectType) => {
-            var _a;
+    if (moduleViewProperties?.abObjectTypes?.length) {
+        const items = moduleViewProperties?.abObjectTypes.map((abObjectType) => {
             return {
-                disabled: (abObjectType === null || abObjectType === void 0 ? void 0 : abObjectType.accessLevel) === 'ReadOnly',
+                disabled: abObjectType?.accessLevel === 'ReadOnly',
                 onClick: () => {
                     setAbObjectType(abObjectType);
                     handleOpenEditPopup();
                 },
-                label: (_a = abObjectType.label) !== null && _a !== void 0 ? _a : abObjectType.name,
+                label: abObjectType.label ?? abObjectType.name,
             };
         });
         newButton = (React.createElement(DropdownButton, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText },
@@ -79,13 +83,12 @@ export const AdaptablePopupModuleView = (props) => {
         newButton = (React.createElement(ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
     }
     let suspendButton = null;
-    const editableObjects = (items).filter(item => !item.abObject.IsReadOnly);
+    const editableObjects = items.filter((item) => !item.abObject.IsReadOnly);
     if (editableObjects.length &&
-        (moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getSuspendAllAction) &&
-        (moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getUnSuspendAllAction)) {
+        moduleViewProperties?.getSuspendAllAction &&
+        moduleViewProperties?.getUnSuspendAllAction) {
         const isAtLeastOneAbObjectActive = editableObjects.some((item) => {
-            var _a;
-            return !((_a = item.abObject) === null || _a === void 0 ? void 0 : _a.IsSuspended);
+            return !item.abObject?.IsSuspended;
         });
         const handleSuspendUnsuspendAll = () => {
             if (isAtLeastOneAbObjectActive) {
@@ -100,10 +103,9 @@ export const AdaptablePopupModuleView = (props) => {
         suspendButton = (React.createElement(SimpleButton, { mr: 2, onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
     }
     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)) {
+        if (['Toolbar', 'ContextMenu', 'ColumnMenu'].includes(props?.popupParams?.source)) {
             props.onClosePopup();
         }
     };
@@ -111,16 +113,16 @@ export const AdaptablePopupModuleView = (props) => {
         .getModuleService()
         .getModuleById(props.module.moduleInfo.ModuleName);
     const dispatch = useDispatch();
-    const showLayoutNotAssociatedObjects = useSelector((state) => state.System.ShowLayoutNotAssociatedObjects);
+    const showLayoutNotAssociatedObjects = useSelector((state) => state.Internal.Layout.ShowLayoutNotAssociatedObjects);
     const toggleButtonShowLayoutAssociatedObjects = () => {
-        if (!(adaptableModule === null || adaptableModule === void 0 ? void 0 : adaptableModule.canBeAssociatedWithLayouts())) {
+        if (!adaptableModule?.canBeAssociatedWithLayouts()) {
             return;
         }
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
         return (React.createElement(Flex, { justifyContent: "flex-start" },
-            React.createElement(CheckBox, { padding: 0, margin: 0, checked: showLayoutNotAssociatedObjects, onChange: (checked) => dispatch(SystemLayoutShowNotAssociatedObjects(checked)) },
+            React.createElement(CheckBox, { padding: 0, margin: 0, checked: showLayoutNotAssociatedObjects, onChange: (checked) => dispatch(LayoutShowNotAssociatedObjects(checked)) },
                 "Show ",
                 moduleInfo.FriendlyName,
                 "s not available in current Layout")));
@@ -131,6 +133,6 @@ export const AdaptablePopupModuleView = (props) => {
             newButton), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
         toggleButtonShowLayoutAssociatedObjects(),
-        (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
+        items?.length ? (React.createElement(AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent, null, emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
         isWizardOpen && EditWizard && (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.js

@@ -9,7 +9,7 @@ export const Navigation = (props) => {
         if ((event.ctrlKey || event.metaKey) &&
             (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
             const isKeyUp = event.code === 'ArrowUp';
-            const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.module === props.activeItem || item.label === props.activeItem));
+            const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.category === props.activeItem || item.label === props.activeItem));
             let nextMenuItem = null;
             if (isKeyUp) {
                 let candidate = props.menuItems[currentIndex - 1] !== '-'
@@ -31,22 +31,22 @@ export const Navigation = (props) => {
     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;
             const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
             if (menuItem === '-') {
                 return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
             }
-            const isActive = props.activeItem === menuItem.module || menuItem.label === props.activeItem;
+            const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
             const className = join(baseClassName, isActive && `${baseClassName}--active`);
-            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;
-            const dataName = menuItem.module === 'CustomSettingsPanel'
+            let customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
+            const dataName = menuItem.category === 'CustomSettingsPanel'
                 ? `CSP-${menuItem.label}`
-                : (_e = menuItem.module) !== null && _e !== void 0 ? _e : menuItem.label;
+                : menuItem.category ?? menuItem.label;
             return (React.createElement("li", { className: className, key: menuItem.label },
                 React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);
                     }, "data-name": dataName },
-                    props.api.optionsApi.getSettingsPanelOptions().showModuleIcons && menuItem.icon && (React.createElement(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
+                    props.api.optionsApi.getSettingsPanelOptions().showModuleIcons &&
+                        menuItem.icon && (React.createElement(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
                     customIcon && React.createElement(AdaptableIconComponent, { icon: customIcon }),
                     menuItem.label)));
         }))));

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

@@ -3,10 +3,9 @@ import { Flex, Text } from 'rebass';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptableIconComponent } from '../../AdaptableIconComponent';
 export const TopBar = (props) => {
-    var _a;
     const baseClassName = 'ab-Adaptable-Popup__TopBar';
     const adaptable = useAdaptable();
-    const applicationIcon = (_a = adaptable.api.optionsApi.getUserInterfaceOptions()) === null || _a === void 0 ? void 0 : _a.applicationIcon;
+    const applicationIcon = adaptable.api.optionsApi.getUserInterfaceOptions()?.applicationIcon;
     let icon = React.createElement(React.Fragment, null);
     const iconClassName = `${baseClassName}__Icon`;
     if (props.icon === 'ConfigurationIcon') {

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

@@ -7,39 +7,37 @@ import { STANDALONE_MODULE_POPUPS } from '../../../../Utilities/Constants/Genera
 export const useMenuItems = () => {
     const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    const allMenuItems = useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.SettingPanelModuleMenuItems; });
+    const allMenuItems = useSelector((state) => state?.Internal?.SettingsPanelModuleEntries);
     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;
+        let navigationItems = settingsPanelOptions?.navigation?.items;
         if (!navigationItems) {
             navigationItems = [...DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS];
             if (settingsPanelOptions.customSettingsPanels) {
                 navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
             }
         }
-        const visibleItems = allMenuItems.filter((item) => item.module !== 'General' &&
-            item.module !== 'CustomSettingsPanel' &&
-            item.module !== 'Group' &&
-            !STANDALONE_MODULE_POPUPS.includes(item.module) &&
+        const visibleItems = allMenuItems.filter((item) => item.category !== 'General' &&
+            item.category !== 'CustomSettingsPanel' &&
+            item.category !== 'Group' &&
+            !STANDALONE_MODULE_POPUPS.includes(item.category) &&
             item.isVisible);
         let navItems = 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);
+            const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find?.((panel) => panel.name === moduleName);
             let customPanelMenuItem = null;
             if (customSettingsPanel) {
                 // @ts-ignore
                 customPanelMenuItem = {
-                    module: 'CustomSettingsPanel',
+                    category: 'CustomSettingsPanel',
                     label: customSettingsPanel.name,
                     isVisible: true,
                     reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name),
                 };
             }
-            return customPanelMenuItem || visibleItems.find((item) => item.module === moduleName);
+            return customPanelMenuItem || visibleItems.find((item) => item.category === moduleName);
         })
             .filter(Boolean);
         // remove sequential '-' items

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
 export interface AdaptablePopupAlertProps {
     onClose: () => void;
@@ -6,4 +6,4 @@ export interface AdaptablePopupAlertProps {
     headless?: boolean;
     focusFirstButton?: boolean;
 }
-export declare const AdaptablePopupAlert: (props: AdaptablePopupAlertProps) => JSX.Element;
+export declare const AdaptablePopupAlert: (props: AdaptablePopupAlertProps) => React.JSX.Element;

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

@@ -8,9 +8,8 @@ import { useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
 export const AdaptablePopupAlert = (props) => {
-    var _a;
     const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';
-    const msg = (_a = props.adaptableAlert.message) !== null && _a !== void 0 ? _a : '';
+    const msg = props.adaptableAlert.message ?? '';
     const headerColor = UIHelper.getColorByMessageType(messageType);
     let header = messageType;
     const { api, adaptableOptions } = useAdaptable();
@@ -24,7 +23,11 @@ export const AdaptablePopupAlert = (props) => {
     }, []);
     const [formData, setFormData] = useState({});
     const context = React.useMemo(() => {
-        return Object.assign(Object.assign({ alert: props.adaptableAlert }, api.internalApi.buildBaseContext()), { formData: formData });
+        return {
+            alert: props.adaptableAlert,
+            ...api.internalApi.buildBaseContext(),
+            formData: formData,
+        };
     }, [JSON.stringify(formData), props.adaptableAlert]);
     const adaptableForm = React.useMemo(() => {
         if (api.isDestroyed()) {
@@ -58,8 +61,7 @@ export const AdaptablePopupAlert = (props) => {
                     // we want to give the current popup time to close
                     // and we reopen with a delay in case this button action causes another popup
                     setTimeout(() => {
-                        var _a;
-                        (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
+                        button.onClick?.(button, context);
                     }, 20);
                 } })) : null))));
     return props.headless ? (content) : (React.createElement(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {

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

@@ -7,7 +7,7 @@ import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import Dialog from '../../../components/Dialog';
 import { CheckBox } from '../../../components/CheckBox';
-import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
+import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
 import { useDispatch } from 'react-redux';
 export const AdaptablePopupConfirmation = (props) => {
     const dispatch = useDispatch();
@@ -23,7 +23,7 @@ export const AdaptablePopupConfirmation = (props) => {
         props.onConfirm(promptText);
         setPromptText('');
         if (disableDeleteConfirmation) {
-            dispatch(SystemRedux.SystemDisableDeleteConfirmation());
+            dispatch(InternalRedux.DisableDeleteConfirmation());
         }
     }
     function changeContent(e) {
@@ -56,5 +56,5 @@ export const AdaptablePopupConfirmation = (props) => {
                 React.createElement(Flex, { marginTop: 3, padding: 2, "data-name": "footer" },
                     React.createElement(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText),
                     React.createElement("div", { style: { flex: 1 } }),
-                    React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText))))));
+                    props.cancelButtonText != null ? (React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : null)))));
 };

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

@@ -6,9 +6,8 @@ import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import { useDispatch } from 'react-redux';
 export const AdaptablePopupPrompt = (props) => {
-    var _a;
     const dispatch = useDispatch();
-    const [promptText, setPromptText] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : '');
+    const [promptText, setPromptText] = React.useState(props.defaultValue ?? '');
     const onCloseForm = () => {
         setPromptText('');
         props.onClose();