@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.0

package/src/View/Components/PermittedValuesSelector/PermitedValuesSelector.js

@@ -1,27 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PermitedValuesSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
-const PermitedValuesSelector = (props) => {
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import OverlayTrigger from '../../../components/OverlayTrigger';
+import SimpleButton from '../../../components/SimpleButton';
+import { useAdaptable } from '../../AdaptableContext';
+import { ListBoxFilterForm } from '../FilterForm/ListBoxFilterForm';
+export const PermitedValuesSelector = (props) => {
     var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const columnId = props.columnId;
     const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
     const distinctValues = ((_a = adaptable.api.gridApi.internalApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => { var _a; return ({ value: value, label: (value === null || value === void 0 ? void 0 : value.toString) ? (_a = value.toString) === null || _a === void 0 ? void 0 : _a.call(value) : value }); });
     const predicateInputs = (_b = props.predicate.Inputs) !== null && _b !== void 0 ? _b : [];
     const isClearDisabled = ((_c = predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.filter) === null || _c === void 0 ? void 0 : _c.call(predicateInputs, (item) => item !== undefined || item !== null || item !== '').length) === 0;
-    const popupContent = (React.createElement(rebass_1.Flex, { className: "ab-PermitedValuesSelector__PopupContent", padding: 1, flexDirection: "column" },
-        React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { currentColumn: column, columns: [], columnDistinctValues: distinctValues, dataType: column.dataType, uiSelectedColumnValues: props.predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => props.onPredicateValuesChange(list) })));
-    return (React.createElement(rebass_1.Box, { className: "ab-PermitedValuesSelector", mt: 2 },
-        React.createElement(rebass_1.Box, { flex: 1 },
-            React.createElement(OverlayTrigger_1.default, { render: () => popupContent },
-                React.createElement(SimpleButton_1.default, { width: "100%", mb: 2 }, (predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.join(', ')) || 'No Selected values'))),
-        React.createElement(SimpleButton_1.default, { disabled: isClearDisabled, onClick: () => props.onPredicateValuesChange([]) }, "Clear Values")));
+    const popupContent = (React.createElement(Flex, { className: "ab-PermitedValuesSelector__PopupContent", padding: 1, flexDirection: "column" },
+        React.createElement(ListBoxFilterForm, { currentColumn: column, columns: [], columnDistinctValues: distinctValues, dataType: column.dataType, uiSelectedColumnValues: props.predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => props.onPredicateValuesChange(list) })));
+    return (React.createElement(Box, { className: "ab-PermitedValuesSelector", mt: 2 },
+        React.createElement(Box, { flex: 1 },
+            React.createElement(OverlayTrigger, { render: () => popupContent },
+                React.createElement(SimpleButton, { width: "100%", mb: 2 }, (predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.join(', ')) || 'No Selected values'))),
+        React.createElement(SimpleButton, { disabled: isClearDisabled, onClick: () => props.onPredicateValuesChange([]) }, "Clear Values")));
 };
-exports.PermitedValuesSelector = PermitedValuesSelector;

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

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PermitedValuesSelector = void 0;
-var PermitedValuesSelector_1 = require("./PermitedValuesSelector");
-Object.defineProperty(exports, "PermitedValuesSelector", { enumerable: true, get: function () { return PermitedValuesSelector_1.PermitedValuesSelector; } });
+export { PermitedValuesSelector } from './PermitedValuesSelector';

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

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableLoadingScreen = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const rebass_1 = require("rebass");
-class AdaptableLoadingScreen extends React.Component {
+import * as React from 'react';
+import Dialog from '../../../components/Dialog';
+import { Box } from 'rebass';
+export class AdaptableLoadingScreen extends React.Component {
     render() {
-        return (React.createElement(Dialog_1.default, { modal: true, isOpen: this.props.showLoadingScreen, onDismiss: this.props.onClose, showCloseButton: false, style: {
+        return (React.createElement(Dialog, { modal: true, isOpen: this.props.showLoadingScreen, onDismiss: this.props.onClose, showCloseButton: false, style: {
                 minHeight: 'auto',
             } },
-            React.createElement(rebass_1.Box, { padding: 3 },
+            React.createElement(Box, { padding: 3 },
                 React.createElement("h4", null, "Initialising Grid"),
                 React.createElement("p", null, "Retrieving your settings and setting up the grid..."))));
     }
 }
-exports.AdaptableLoadingScreen = AdaptableLoadingScreen;

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

@@ -1,26 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-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 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");
-const AdaptablePopup = (props) => {
+import * as React from 'react';
+import { Flex } from 'rebass';
+import * as GeneralConstants from '../../../../Utilities/Constants/GeneralConstants';
+import TopBar from './TopBar';
+import join from '../../../../components/utils/join';
+import { Navigation } from './Navigation';
+import PopupContext from './PopupContext';
+import { AdaptablePopupBody } from './AdaptablePopupBody';
+import { STANDALONE_MODULE_POPUPS } from '../../../../Utilities/Defaults/DefaultSettingsPanel';
+import { useAdaptable } from '../../../AdaptableContext';
+import { CustomSettingsPanelView } from './CustomSettingsPanelView';
+import { useMenuItems } from './useMenuItems';
+import { AdaptablePopupDialog } from './AdaptablePopupDialog';
+export const AdaptablePopup = (props) => {
     var _a, _b, _c;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
-    const menuItems = (0, useMenuItems_1.useMenuItems)();
+    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;
     let friendlyName = null;
@@ -46,7 +42,7 @@ const AdaptablePopup = (props) => {
     if (customSettingsPanel) {
         friendlyName = customSettingsPanel.name;
         activeItem = customSettingsPanel.name;
-        moduleViewContent = React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
+        moduleViewContent = React.createElement(CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
     }
     else {
         const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
@@ -57,24 +53,23 @@ const AdaptablePopup = (props) => {
         friendlyName = moduleInfo.FriendlyName;
         isStandalone =
             moduleInfo &&
-                (DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+                (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)));
         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 }));
+        moduleViewContent = (React.createElement(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
     const baseClassName = 'ab-Adaptable-Popup';
-    const className = (0, join_1.default)(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
-    return (React.createElement(PopupContext_1.default.Provider, { value: {
+    const className = join(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    return (React.createElement(PopupContext.Provider, { value: {
             hidePopup: () => {
                 if (props.onHide) {
                     props.onHide();
                 }
             },
         } },
-        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
-            !isStandalone && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
-                !isStandalone && (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)))));
+        React.createElement(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
+            !isStandalone && React.createElement(TopBar, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
+            React.createElement(Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+                !isStandalone && (React.createElement(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
+                React.createElement(Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };
-exports.AdaptablePopup = AdaptablePopup;

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

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupBody = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const UIHelper_1 = require("../../../UIHelper");
-const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
-const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
-const AdaptablePopupBody = (props) => {
+import * as React from 'react';
+import { UIHelper } from '../../../UIHelper';
+import { AdaptableViewFactory } from '../../../AdaptableViewFactory';
+import { AdaptablePopupModuleView } from './AdaptablePopupModuleView';
+export const AdaptablePopupBody = (props) => {
     var _a;
-    const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
+    const modalContainer = UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
     const moduleName = props.module.moduleInfo.ModuleName;
     const accessLevel = props.api.internalApi
         .getEntitlementService()
@@ -30,9 +26,8 @@ const AdaptablePopupBody = (props) => {
         api: props.api,
         moduleInfo,
     };
-    const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
+    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;
     // 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));
 };
-exports.AdaptablePopupBody = AdaptablePopupBody;

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

@@ -1,31 +1,28 @@
-"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");
+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 { 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 = tslib_1.__rest(props, ["onChange", "style", "baseClassName", "className", "isActionModule", "settingsPanelOptionsKey", "onHide"]);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const dispatch = (0, react_redux_1.useDispatch)();
+    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide } = props, dialogProps = __rest(props, ["onChange", "style", "baseClassName", "className", "isActionModule", "settingsPanelOptionsKey", "onHide"]);
+    const adaptable = useAdaptable();
+    const dispatch = useDispatch();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    let popupSettings = (0, 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]; });
+    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]; });
     const handleWindowSettings = (settings) => {
-        dispatch((0, SystemRedux_1.SystemSettingsPanelSet)(settingsPanelOptionsKey, settings));
+        dispatch(SystemSettingsPanelSet(settingsPanelOptionsKey, settings));
     };
     if (!popupSettings) {
         const size = isActionModule
-            ? (0, Utilities_1.getActionPanelSize)()
-            : (_a = settingsPanelOptions.size) !== null && _a !== void 0 ? _a : (0, Utilities_1.getSettingsPanelSize)();
+            ? getActionPanelSize()
+            : (_a = settingsPanelOptions.size) !== null && _a !== void 0 ? _a : getSettingsPanelSize();
         popupSettings = {
             size: size,
-            position: (_b = settingsPanelOptions.position) !== null && _b !== void 0 ? _b : (0, Utilities_1.getMiddlePosition)(size),
+            position: (_b = settingsPanelOptions.position) !== null && _b !== void 0 ? _b : getMiddlePosition(size),
         };
     }
     const windowModalProps = {
@@ -38,13 +35,13 @@ const WindowDialog = (props) => {
         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)));
+    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)));
 };
 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));
+    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 AdaptablePopupDialog = (props) => {
+export const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
     if (modalContainer) {
         let ref = null;
@@ -54,7 +51,7 @@ const AdaptablePopupDialog = (props) => {
         else {
             ref = modalContainer;
         }
-        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return createPortal(React.createElement(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
@@ -65,4 +62,3 @@ const AdaptablePopupDialog = (props) => {
         return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
     }
 };
-exports.AdaptablePopupDialog = AdaptablePopupDialog;

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

@@ -1,26 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupModuleView = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const EmptyContent_1 = tslib_1.__importDefault(require("../../../../components/EmptyContent"));
-const icons_1 = require("../../../../components/icons");
-const AdaptableObjectList_1 = require("../../AdaptableObjectList");
-const ButtonNew_1 = require("../../Buttons/ButtonNew");
-const PopupPanel_1 = require("./PopupPanel");
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../../components/CheckBox");
-const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const AdaptablePopupModuleView = (props) => {
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import DropdownButton from '../../../../components/DropdownButton';
+import EmptyContent from '../../../../components/EmptyContent';
+import { Icon } from '../../../../components/icons';
+import { AdaptableObjectList } from '../../AdaptableObjectList';
+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 SimpleButton from '../../../../components/SimpleButton';
+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.
      */
-    (0, react_redux_1.useSelector)((state) => state);
+    useSelector((state) => state);
     const [abObjectType, setAbObjectType] = React.useState(null);
     const moduleInfo = props.module.moduleInfo;
     const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
@@ -74,13 +70,13 @@ const AdaptablePopupModuleView = (props) => {
                 label: (_a = abObjectType.label) !== null && _a !== void 0 ? _a : abObjectType.name,
             };
         });
-        newButton = (React.createElement(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText },
-            React.createElement(icons_1.Icon, { name: "plus" }),
+        newButton = (React.createElement(DropdownButton, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText },
+            React.createElement(Icon, { name: "plus" }),
             " New"));
     }
     else if (!moduleViewProperties.hideNewButton &&
         (EditWizard || moduleViewProperties.onOpenEditPopup)) {
-        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
+        newButton = (React.createElement(ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
     }
     let suspendButton = null;
     if (items.length &&
@@ -97,7 +93,7 @@ const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = (React.createElement(SimpleButton_1.default, { mr: 2, onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
+        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;
@@ -110,8 +106,8 @@ const AdaptablePopupModuleView = (props) => {
     const adaptableModule = props.api.internalApi
         .getModuleService()
         .getModuleById(props.module.moduleInfo.ModuleName);
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const showLayoutNotAssociatedObjects = (0, react_redux_1.useSelector)((state) => state.System.ShowLayoutNotAssociatedObjects);
+    const dispatch = useDispatch();
+    const showLayoutNotAssociatedObjects = useSelector((state) => state.System.ShowLayoutNotAssociatedObjects);
     const toggleButtonShowLayoutAssociatedObjects = () => {
         if (!(adaptableModule === null || adaptableModule === void 0 ? void 0 : adaptableModule.canBeAssociatedWithLayouts())) {
             return;
@@ -119,19 +115,18 @@ const AdaptablePopupModuleView = (props) => {
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
-        return (React.createElement(rebass_1.Flex, { justifyContent: "flex-start" },
-            React.createElement(CheckBox_1.CheckBox, { padding: 0, margin: 0, checked: showLayoutNotAssociatedObjects, onChange: (checked) => dispatch((0, SystemRedux_1.SystemLayoutShowNotAssociatedObjects)(checked)) },
+        return (React.createElement(Flex, { justifyContent: "flex-start" },
+            React.createElement(CheckBox, { padding: 0, margin: 0, checked: showLayoutNotAssociatedObjects, onChange: (checked) => dispatch(SystemLayoutShowNotAssociatedObjects(checked)) },
                 "Show ",
                 moduleInfo.FriendlyName,
                 "s not available in current Layout")));
     };
-    return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: React.createElement(React.Fragment, null,
+    return (React.createElement(PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: React.createElement(React.Fragment, null,
             suspendButton,
             " ",
             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_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}`)),
+        (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}`)),
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };
-exports.AdaptablePopupModuleView = AdaptablePopupModuleView;

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

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomSettingsPanelView = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ExternalRenderer_1 = require("../../ExternalRenderer");
-const CustomSettingsPanelView = (props) => {
-    return (React.createElement(ExternalRenderer_1.ExternalRenderer, { render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }));
+import * as React from 'react';
+import { ExternalRenderer } from '../../ExternalRenderer';
+export const CustomSettingsPanelView = (props) => {
+    return (React.createElement(ExternalRenderer, { render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }));
 };
-exports.CustomSettingsPanelView = CustomSettingsPanelView;

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

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Navigation = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
-const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
-const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
-const Navigation = (props) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+import join from '../../../../components/utils/join';
+import { useGlobalEvent } from '../../../../components/utils/useGlobalEvent';
+import { AdaptableIconComponent } from '../../AdaptableIconComponent';
+export const Navigation = (props) => {
+    const dispatch = useDispatch();
     const handleKeyPress = React.useCallback((event) => {
         if ((event.ctrlKey || event.metaKey) &&
             (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
@@ -32,7 +28,7 @@ const Navigation = (props) => {
             }
         }
     }, [props.activeItem, props.menuItems]);
-    (0, useGlobalEvent_1.useGlobalEvent)('keydown', handleKeyPress);
+    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;
@@ -41,7 +37,7 @@ const Navigation = (props) => {
                 return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
             }
             const isActive = props.activeItem === menuItem.module || menuItem.label === props.activeItem;
-            const className = (0, join_1.default)(baseClassName, isActive && `${baseClassName}--active`);
+            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'
                 ? `CSP-${menuItem.label}`
@@ -50,9 +46,8 @@ const Navigation = (props) => {
                 React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);
                     }, "data-name": dataName },
-                    menuItem.icon && (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
-                    customIcon && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }),
+                    menuItem.icon && (React.createElement(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
+                    customIcon && React.createElement(AdaptableIconComponent, { icon: customIcon }),
                     menuItem.label)));
         }))));
 };
-exports.Navigation = Navigation;

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

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePopupContext = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+import * as React from 'react';
 const PopupContext = React.createContext({
     hidePopup: () => { },
 });
-const usePopupContext = () => {
+export const usePopupContext = () => {
     return React.useContext(PopupContext);
 };
-exports.usePopupContext = usePopupContext;
-exports.default = PopupContext;
+export default PopupContext;

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

@@ -1,24 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
-const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
+import * as React from 'react';
+import { Flex, Box } from 'rebass';
+import join from '../../../../components/utils/join';
+import { ButtonInfo } from '../../Buttons/ButtonInfo';
 const Noop = () => React.createElement(React.Fragment, null);
-const PopupPanel = (props) => {
+export const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: (0, join_1.default)(props.className, baseClassName) },
+    return (React.createElement(Flex, { flexDirection: "column", flex: "1 1 0", className: join(props.className, baseClassName) },
         React.createElement("div", { className: `${baseClassName}__Header` },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(Box, { marginRight: 0, "data-name": "space-before" }),
                 React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
-                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
+                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
-            React.createElement(rebass_1.Box, { style: { flex: 1 } }),
+            React.createElement(Box, { style: { flex: 1 } }),
             props.button),
-        React.createElement(rebass_1.Box, { className: `${baseClassName}__Body`, width: "100%", height: "100%", flex: 1 }, props.children)));
+        React.createElement(Box, { className: `${baseClassName}__Body`, width: "100%", height: "100%", flex: 1 }, props.children)));
 };
-exports.PopupPanel = PopupPanel;

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

@@ -1,30 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopBar = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
-const TopBar = (props) => {
+import * as React from 'react';
+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 = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const applicationIcon = (_a = adaptable.api.optionsApi.getUserInterfaceOptions()) === 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(AdaptableIconComponent_1.AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
+        icon = React.createElement(AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
     }
     else if (props.icon === 'ApplicationIcon' && applicationIcon) {
-        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });
+        icon = React.createElement(AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });
     }
     else if (typeof props.icon === 'object') {
-        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
+        icon = React.createElement(AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
     }
-    return (React.createElement(rebass_1.Flex, { flex: 0, className: baseClassName },
+    return (React.createElement(Flex, { flex: 0, className: baseClassName },
         icon,
-        React.createElement(rebass_1.Text, { className: `${baseClassName}__Title` }, props.children)));
+        React.createElement(Text, { className: `${baseClassName}__Title` }, props.children)));
 };
-exports.TopBar = TopBar;
-exports.default = exports.TopBar;
+export default TopBar;

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

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopup = void 0;
-var AdaptablePopup_1 = require("./AdaptablePopup");
-Object.defineProperty(exports, "AdaptablePopup", { enumerable: true, get: function () { return AdaptablePopup_1.AdaptablePopup; } });
+export { AdaptablePopup } from './AdaptablePopup';