@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

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' : 'play', 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' : 'play', 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';

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

@@ -1,28 +1,24 @@
-"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"));
-const useMenuItems = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { STANDALONE_MODULE_POPUPS, DEFAULT_NAVIGATION_ITEMS, } from '../../../../Utilities/Defaults/DefaultSettingsPanel';
+import { useAdaptable } from '../../../AdaptableContext';
+import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
+export const useMenuItems = () => {
+    const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    const allMenuItems = (0, 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.SettingPanelModuleMenuItems; });
+    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; });
     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];
+            navigationItems = [...DEFAULT_NAVIGATION_ITEMS];
             if (settingsPanelOptions.customSettingsPanels) {
                 navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
             }
         }
         const visibleItems = allMenuItems.filter((item) => item.module !== 'General' &&
             item.module !== 'CustomSettingsPanel' &&
-            !DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(item.module) &&
+            !STANDALONE_MODULE_POPUPS.includes(item.module) &&
             item.isVisible);
         return navigationItems
             .map((moduleName) => {
@@ -46,4 +42,3 @@ const useMenuItems = () => {
             .filter(Boolean);
     }, [allMenuItems]);
 };
-exports.useMenuItems = useMenuItems;

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

@@ -1,41 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupAlert = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const PanelWithImage_1 = require("../Panels/PanelWithImage");
-const UIHelper_1 = require("../../UIHelper");
-const rebass_1 = require("rebass");
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
-const react_1 = require("react");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
-const AdaptablePopupAlert = (props) => {
+import * as React from 'react';
+import { PanelWithImage } from '../Panels/PanelWithImage';
+import { UIHelper } from '../../UIHelper';
+import { Flex, Text, Box } from 'rebass';
+import Dialog from '../../../components/Dialog';
+import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
+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 headerColor = UIHelper_1.UIHelper.getColorByMessageType(messageType);
+    const headerColor = UIHelper.getColorByMessageType(messageType);
     let header = messageType;
-    const { api, adaptableOptions } = (0, AdaptableContext_1.useAdaptable)();
+    const { api, adaptableOptions } = useAdaptable();
     if (props.adaptableAlert.header) {
         header = `${header}: ${props.adaptableAlert.header}`;
     }
-    let glyph = UIHelper_1.UIHelper.getGlyphByMessageType(messageType);
+    let glyph = UIHelper.getGlyphByMessageType(messageType);
+    // we still need the defauld
     const defaultForm = React.useMemo(() => {
-        return {
-            fields: [],
-            Buttons: [
-                {
-                    Label: 'OK',
-                    ButtonStyle: {
-                        variant: 'raised',
-                    },
-                },
-            ],
-        };
+        return api.alertApi.internalApi.getDefaultAlertNotificationForm();
     }, []);
-    const [formData, setFormData] = (0, react_1.useState)({});
+    const [formData, setFormData] = useState({});
     const context = React.useMemo(() => {
         return {
             alert: props.adaptableAlert,
@@ -55,24 +42,24 @@ const AdaptablePopupAlert = (props) => {
         if (!icon) {
             return null;
         }
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
+        return (React.createElement(Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
             ' ',
-            React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
+            React.createElement(AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
     };
-    const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
+    const content = (React.createElement(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
         React.createElement("div", null,
-            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
+            React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" },
                 renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
                     adaptableOptions.userInterfaceOptions.applicationIcon),
                 typeof msg === 'string'
                     ? msg.split('\n').map(function (item, index) {
-                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", key: index },
-                            React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                        return (React.createElement(Flex, { flexDirection: "row", key: index },
+                            React.createElement(Text, { key: index, margin: 2 },
                                 item,
                                 React.createElement("br", null))));
                     })
                     : msg),
-            React.createElement(rebass_1.Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
+            React.createElement(Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
                     props.onClose();
                     // we want to give the current popup time to close
                     // and we reopen with a delay in case this button action causes another popup
@@ -81,10 +68,9 @@ const AdaptablePopupAlert = (props) => {
                         (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
                     }, 20);
                 } })) : null))));
-    return props.headless ? (content) : (React.createElement(Dialog_1.default, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
+    return props.headless ? (content) : (React.createElement(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
             minHeight: 'auto',
             minWidth: '20vw',
             maxWidth: '70vw',
         } }, content));
 };
-exports.AdaptablePopupAlert = AdaptablePopupAlert;

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

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupConfirmation = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const UIHelper_1 = require("../../UIHelper");
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const PanelWithImage_1 = require("../Panels/PanelWithImage");
-const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
-const react_redux_1 = require("react-redux");
-const AdaptablePopupConfirmation = (props) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
+import * as React from 'react';
+import { UIHelper } from '../../UIHelper';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import { PanelWithImage } from '../Panels/PanelWithImage';
+import { Flex, Box, Text } from 'rebass';
+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 { useDispatch } from 'react-redux';
+export const AdaptablePopupConfirmation = (props) => {
+    const dispatch = useDispatch();
     const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
     const [promptText, setPromptText] = React.useState('');
     const header = props.header;
-    const glyph = UIHelper_1.UIHelper.getGlyphByMessageType(props.messageType);
+    const glyph = UIHelper.getGlyphByMessageType(props.messageType);
     function onCancelForm() {
         setPromptText('');
         props.onCancel();
@@ -35,31 +31,30 @@ const AdaptablePopupConfirmation = (props) => {
     }
     function canConfirm() {
         if (props.showInputBox) {
-            return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(promptText);
+            return StringExtensions.IsNotNullOrEmpty(promptText);
         }
         return true;
     }
     if (!props.showPopup) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-        React.createElement(PanelWithImage_1.PanelWithImage, { header: header, icon: glyph, variant: "primary" },
+    return (React.createElement(Dialog, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(PanelWithImage, { header: header, icon: glyph, variant: "primary" },
             React.createElement("div", null,
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.messsage.split('\n').map(function (item, index) {
-                    return (React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                    return (React.createElement(Text, { key: index, margin: 2 },
                         item,
                         React.createElement("br", null)));
                 })),
-                React.createElement(rebass_1.Box, { pl: 2 },
-                    React.createElement(CheckBox_1.CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
+                React.createElement(Box, { pl: 2 },
+                    React.createElement(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
-                props.showInputBox && (React.createElement(rebass_1.Box, { padding: 2, "data-name": "body" },
+                props.showInputBox && (React.createElement(Box, { padding: 2, "data-name": "body" },
                     React.createElement("p", null, "Please enter a comment to confirm"),
-                    React.createElement(Input_1.default, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
-                React.createElement(rebass_1.Flex, { marginTop: 3, padding: 2, "data-name": "footer" },
-                    React.createElement(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText),
+                    React.createElement(Input, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
+                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_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText))))));
+                    React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText))))));
 };
-exports.AdaptablePopupConfirmation = AdaptablePopupConfirmation;