@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.0

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopup = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
 const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
@@ -49,7 +49,7 @@ const AdaptablePopup = (props) => {
     if (customSettingsPanel) {
         friendlyName = customSettingsPanel.name;
         activeItem = customSettingsPanel.name;
-        moduleViewContent = React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
+        moduleViewContent = (0, jsx_runtime_1.jsx)(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
     }
     else {
         const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
@@ -61,23 +61,18 @@ const AdaptablePopup = (props) => {
                 (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo?.ModuleName) ||
                     (props.componentName && props.componentName !== 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 = ((0, jsx_runtime_1.jsx)(AdaptablePopupBody_1.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: {
+    return ((0, jsx_runtime_1.jsx)(PopupContext_1.default.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(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-text-on-defaultbackground', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
-                    ? GeneralConstants.READ_ONLY_STYLE
-                    : '') },
-                !isStandalone && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
-                React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', !isStandalone && 'twa:*:p-3') }, moduleViewContent)))));
+        }, children: (0, jsx_runtime_1.jsxs)(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && (0, jsx_runtime_1.jsx)(TopBar_1.default, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                        ? GeneralConstants.READ_ONLY_STYLE
+                        : ''), children: [!isStandalone && ((0, jsx_runtime_1.jsx)(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', 'twa:rounded-br-standard', !isStandalone && 'twa:*:p-3'), children: moduleViewContent })] })] }) }));
 };
 exports.AdaptablePopup = AdaptablePopup;

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

@@ -1,8 +1,7 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 const UIHelper_1 = require("../../../UIHelper");
 const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
 const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
@@ -30,6 +29,6 @@ const AdaptablePopupBody = (props) => {
     const BodyComponent = AdaptableViewFactory_1.AdaptableViewFactory?.[props?.componentName ?? moduleInfo.Popup] || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
     // key is to make sure state is reset between views
     // most of the views use the `AdaptablePopupModuleView` component
-    return React.createElement(BodyComponent, { key: props?.componentName, module: props.module, ...moduleProps });
+    return (0, jsx_runtime_1.jsx)(BodyComponent, { module: props.module, ...moduleProps }, props?.componentName);
 };
 exports.AdaptablePopupBody = AdaptablePopupBody;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupDialog = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = require("react-dom");
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
@@ -38,31 +38,31 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return (React.createElement(Dialog_1.default, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: (0, clsx_1.default)('twa:p-0 twa:h-full', className) }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: (0, clsx_1.default)('twa:p-0 twa:h-full', className) }));
 };
 const PopupDialog = (props) => {
     const { style, className, onHide, children, ...dialogProps } = props;
-    return (React.createElement(Dialog_1.default, { fixed: false, style: props.style, className: (0, clsx_1.default)('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { fixed: false, style: props.style, className: (0, clsx_1.default)('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, children: children }));
 };
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
     if (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), modalContainer);
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className, children: children }), modalContainer);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
-        return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
+        return ((0, jsx_runtime_1.jsx)(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className, children: children }));
     }
     else {
         if (isActionModule) {
-            return (React.createElement(Dialog_1.default, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: (0, clsx_1.default)('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true }, children));
+            return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: (0, clsx_1.default)('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, children: children }));
         }
         const modalStyle = {
             ...style,
             maxWidth: 1200,
             maxHeight: 1000,
         };
-        return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
+        return ((0, jsx_runtime_1.jsx)(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className, children: children }));
     }
 };
 exports.AdaptablePopupDialog = AdaptablePopupDialog;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupModuleView = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
@@ -18,6 +19,8 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const react_1 = require("react");
 const useRerender_1 = require("../../../../components/utils/useRerender");
 const Flex_1 = require("../../../../components/Flex");
+const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
+const Tabs_1 = require("../../../../components/Tabs");
 const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -35,6 +38,7 @@ const AdaptablePopupModuleView = (props) => {
     const EditWizard = moduleViewProperties?.getEditWizard?.();
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
         return (props.popupParams?.action === 'New' ||
+            props.popupParams?.action === 'NewSchedule' ||
             props.popupParams?.action === 'Edit' ||
             props.popupParams?.action === 'Clone');
     });
@@ -51,6 +55,7 @@ const AdaptablePopupModuleView = (props) => {
     }, []);
     React.useEffect(() => {
         if (props.popupParams?.action === 'New' ||
+            props.popupParams?.action === 'NewSchedule' ||
             props.popupParams?.action === 'Edit' ||
             props.popupParams?.action === 'Clone') {
             handleOpenEditPopup();
@@ -79,13 +84,11 @@ const AdaptablePopupModuleView = (props) => {
                 label: abObjectType.label ?? 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" }),
-            " New"));
+        newButton = ((0, jsx_runtime_1.jsxs)(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText, children: [(0, jsx_runtime_1.jsx)(icons_1.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 = ((0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
     }
     let suspendButton = null;
     const editableObjects = items.filter((item) => !item.abObject.IsReadOnly);
@@ -105,7 +108,7 @@ const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = (React.createElement(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
+        suspendButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' }));
     }
     const handleWizardClose = () => {
         setAbObjectType(null);
@@ -126,19 +129,17 @@ const AdaptablePopupModuleView = (props) => {
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
-        return (React.createElement(Flex_1.Flex, { className: "twa:justify-start" },
-            React.createElement(CheckBox_1.CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch((0, InternalRedux_1.LayoutShowNonExtendedObjects)(checked)) },
-                "Show ",
-                moduleInfo.FriendlyName,
-                "s not available in current Layout")));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-start", children: (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch((0, InternalRedux_1.LayoutShowNonExtendedObjects)(checked)), children: ["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,
-            suspendButton,
-            " ",
-            newButton), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
-        toggleButtonShowLayoutExtensionObjects(),
-        items?.length ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, 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 }))));
+    const renderModuleObjectList = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [moduleViewProperties.HeaderComponent && (0, jsx_runtime_1.jsx)(moduleViewProperties.HeaderComponent, {}), toggleButtonShowLayoutExtensionObjects(), items?.length ? ((0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : ((0, jsx_runtime_1.jsx)(EmptyContent_1.default, { children: emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}` }))] }));
+    const settingsPanelTabs = moduleViewProperties.settingsPanelTabs?.filter((tab) => !tab.isVisible || tab.isVisible(props.api)) ?? [];
+    const useTabbedSettingsPanel = settingsPanelTabs.length > 1;
+    const renderTabbedBody = () => {
+        if (!useTabbedSettingsPanel) {
+            return renderModuleObjectList();
+        }
+        return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0", children: [settingsPanelTabs.map((tab) => ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: tab.label }, tab.label))), settingsPanelTabs.map((tab) => ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:min-h-0 twa:overflow-auto twa:pt-2", children: tab.render ? React.createElement(tab.render) : renderModuleObjectList() }) }, tab.label)))] }) }) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, scrollable: !useTabbedSettingsPanel, button: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suspendButton, " ", newButton] }), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [renderTabbedBody(), isWizardOpen && EditWizard && ((0, jsx_runtime_1.jsx)(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,9 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 const ExternalRenderer_1 = require("../../ExternalRenderer");
 const CustomSettingsPanelView = (props) => {
-    return (React.createElement(ExternalRenderer_1.ExternalRenderer, { key: props.settingsPanel.name, render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }));
+    return ((0, jsx_runtime_1.jsx)(ExternalRenderer_1.ExternalRenderer, { render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }, props.settingsPanel.name));
 };
 exports.CustomSettingsPanelView = CustomSettingsPanelView;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navigation = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
@@ -17,19 +18,15 @@ const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, sh
             ref.current?.focus();
         }
     }, [isActive]);
-    return (React.createElement("li", { className: (0, clsx_1.default)(navigationItemClassName, {
+    return ((0, jsx_runtime_1.jsx)("li", { className: (0, clsx_1.default)(navigationItemClassName, {
             [`${navigationItemClassName}--active`]: isActive,
-        }) },
-        React.createElement("button", { ref: ref, type: "button", className: (0, clsx_1.default)(`${navigationItemClassName}__Button ${twUtils_1.targetOwn.focusOutline}`, {
+        }), children: (0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", className: (0, clsx_1.default)(`${navigationItemClassName}__Button ${twUtils_1.targetOwn.focusOutline}`, {
                 'twa:flex twa:flex-row twa:items-center twa:gap-2': 'layout flex',
                 [`twa:bg-transparent`]: !isActive,
                 'twa:bg-accent twa:text-accentlight': isActive,
                 'twa:px-2 twa:py-1.5': true,
                 'twa:rounded-standard': true,
-            }), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1 },
-            showModuleIcons && menuItem.icon && (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })),
-            customIcon ? React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }) : null,
-            menuItem.label)));
+            }), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1, children: [showModuleIcons && menuItem.icon && ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })), customIcon ? (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }) : null, menuItem.label] }) }));
 };
 const Navigation = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -74,17 +71,16 @@ const Navigation = (props) => {
             }
         }
     }, [props.activeItem, props.menuItems]);
-    return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1 },
-        React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col", onKeyDown: handleKeyPress }, props.menuItems.map((menuItem, index) => {
-            if (menuItem === '-') {
-                return (React.createElement("li", { key: `separator-${index}`, className: `${navigationItemClassName}__Separator` }));
-            }
-            const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
-            let customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
-            const dataName = menuItem.category === 'CustomSettingsPanel'
-                ? `CSP-${menuItem.label}`
-                : menuItem.category ?? menuItem.label;
-            return (React.createElement(NavigationItem, { key: menuItem.label, menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }));
-        }))));
+    return ((0, jsx_runtime_1.jsx)("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1, children: (0, jsx_runtime_1.jsx)("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col", onKeyDown: handleKeyPress, children: props.menuItems.map((menuItem, index) => {
+                if (menuItem === '-') {
+                    return ((0, jsx_runtime_1.jsx)("li", { className: `${navigationItemClassName}__Separator` }, `separator-${index}`));
+                }
+                const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
+                let customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
+                const dataName = menuItem.category === 'CustomSettingsPanel'
+                    ? `CSP-${menuItem.label}`
+                    : menuItem.category ?? menuItem.label;
+                return ((0, jsx_runtime_1.jsx)(NavigationItem, { menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }, menuItem.label));
+            }) }) }));
 };
 exports.Navigation = Navigation;

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

@@ -2,22 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupPanel = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
 const Flex_1 = require("../../../../components/Flex");
 const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto') },
-        React.createElement("div", { className: `${baseClassName}__Header twa:flex` },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(Flex_1.Box, { className: "twa:mr-0", "data-name": "space-before" }),
-                React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
-                React.createElement(Flex_1.Box, { className: "twa:mr-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(Flex_1.Box, { className: "twa:flex-1" }),
-            props.button),
-        React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName) }, props.children)));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${baseClassName}__Header twa:flex`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-0", "data-name": "space-before" }), (0, jsx_runtime_1.jsx)("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                                ) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), props.button] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
 };
 exports.PopupPanel = PopupPanel;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopBar = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
@@ -11,20 +11,18 @@ const baseClassName = 'ab-Adaptable-Popup__TopBar';
 const TopBar = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const applicationIcon = adaptable.api.optionsApi.getUserInterfaceOptions()?.applicationIcon;
-    let icon = React.createElement(React.Fragment, null);
+    let icon = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     const iconClassName = `${baseClassName}__Icon`;
     if (props.icon === 'ConfigurationIcon') {
-        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
+        icon = (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
     }
     else if (props.icon === 'ApplicationIcon' && applicationIcon) {
-        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });
+        icon = (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });
     }
     else if (typeof props.icon === 'object') {
-        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
+        icon = (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
     }
-    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, 'twa:font-medium twa:p-3', 'twa:flex twa:flex-row twa:items-center twa:flex-0 twa:gap-2', 'twa:bg-(--ab-dashboard-header__background) twa:text-(--ab-dashboard-header__color)') },
-        icon,
-        React.createElement(Flex_1.Box, { className: `${baseClassName}__Title` }, props.children)));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, 'twa:font-medium twa:p-3', 'twa:flex twa:flex-row twa:items-center twa:flex-0 twa:gap-2', 'twa:bg-(--ab-dashboard-header__background) twa:text-(--ab-dashboard-header__color)', 'twa:rounded-tl-standard twa:rounded-tr-standard'), children: [icon, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Title`, children: props.children })] }));
 };
 exports.TopBar = TopBar;
 exports.default = exports.TopBar;

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

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupAlert = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const PanelWithImage_1 = require("../Panels/PanelWithImage");
 const UIHelper_1 = require("../../UIHelper");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
+const alertFormHelper_1 = require("../../../Utilities/Helpers/alertFormHelper");
 const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -33,40 +35,32 @@ const AdaptablePopupAlert = (props) => {
             formData: formData,
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);
+    const alertForm = React.useMemo(() => (0, alertFormHelper_1.resolveAlertFormForDefinition)(props.adaptableAlert.alertDefinition, defaultForm), [props.adaptableAlert.alertDefinition, defaultForm]);
     const adaptableForm = React.useMemo(() => {
         if (api.isDestroyed()) {
             return null;
         }
-        return api.alertApi.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
-    }, [props.adaptableAlert.alertDefinition.AlertForm, defaultForm, messageType, context]);
+        return api.alertApi.internalApi.getAdaptableFormFromAlertForm(alertForm, context, messageType);
+    }, [alertForm, messageType, context]);
     const renderApplicationIcon = (icon) => {
         if (!icon) {
             return null;
         }
-        return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:self-end", alignItems: "end" },
-            React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:self-end", alignItems: "end", children: (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' }) }));
     };
-    const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' } },
-        React.createElement("div", null,
-            React.createElement(Flex_1.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(Flex_1.Flex, { flexDirection: "row", key: index },
-                            React.createElement(Flex_1.Box, { key: index, className: "twa:m-2" },
-                                item,
-                                React.createElement("br", null))));
-                    })
-                    : msg),
-            React.createElement(Flex_1.Box, { className: "twa:m-2" }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.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
-                    setTimeout(() => {
-                        button.onClick?.(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, className: "twa:min-h-auto twa:min-w-[20vw] twa:max-w-[70vw]" }, content));
+    const content = ((0, jsx_runtime_1.jsx)(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' }, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", children: [renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
+                            adaptableOptions.userInterfaceOptions.applicationIcon), typeof msg === 'string'
+                            ? msg.split('\n').map(function (item, index) {
+                                return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:m-2", children: [item, (0, jsx_runtime_1.jsx)("br", {})] }, index) }, index));
+                            })
+                            : msg] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:m-2", children: adaptableForm ? ((0, jsx_runtime_1.jsx)(AdaptableFormComponent_1.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
+                            setTimeout(() => {
+                                button.onClick?.(button, context);
+                            }, 20);
+                        } })) : null })] }) }));
+    return props.headless ? (content) : ((0, jsx_runtime_1.jsx)(Dialog_1.default, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, className: "twa:min-h-auto twa:min-w-[20vw] twa:max-w-[70vw]", children: content }));
 };
 exports.AdaptablePopupAlert = AdaptablePopupAlert;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupConfirmation = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const UIHelper_1 = require("../../UIHelper");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
@@ -40,25 +41,12 @@ const AdaptablePopupConfirmation = (props) => {
         return true;
     }
     if (!props.showPopup) {
-        return React.createElement(React.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    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" },
-            React.createElement("div", null,
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.messsage.split('\n').map(function (item, index) {
-                    return (React.createElement(Flex_1.Box, { key: index, className: "twa:m-2" },
-                        item,
-                        React.createElement("br", null)));
-                })),
-                React.createElement(Flex_1.Box, { className: "twa:pl-2" },
-                    React.createElement(CheckBox_1.CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
-                            setDisableDeleteConfirmation(!disableDeleteConfirmation);
-                        } }, "Do not show this again")),
-                props.showInputBox && (React.createElement(Flex_1.Box, { className: "twa:p-2", "data-name": "body" },
-                    React.createElement("p", null, "Please enter a comment to confirm."),
-                    React.createElement(Input_1.default, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
-                React.createElement(Flex_1.Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
-                    props.cancelButtonText != null ? (React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),
-                    React.createElement(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText))))));
+    return ((0, jsx_runtime_1.jsx)(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%' }, children: (0, jsx_runtime_1.jsx)(PanelWithImage_1.PanelWithImage, { header: header, icon: glyph, variant: "primary", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center' }, children: props.messsage.split('\n').map(function (item, index) {
+                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:m-2", children: [item, (0, jsx_runtime_1.jsx)("br", {})] }, index));
+                        }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pl-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
+                                setDisableDeleteConfirmation(!disableDeleteConfirmation);
+                            }, children: "Do not show this again" }) }), props.showInputBox && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", "data-name": "body", children: [(0, jsx_runtime_1.jsx)("p", { children: "Please enter a comment to confirm." }), (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) })] })), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between", children: [props.cancelButtonText != null ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm(), children: props.cancelButtonText })) : ((0, jsx_runtime_1.jsx)("div", {})), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm(), children: props.confirmButtonText })] })] }) }) }));
 };
 exports.AdaptablePopupConfirmation = AdaptablePopupConfirmation;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupPrompt = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
@@ -28,20 +29,8 @@ const AdaptablePopupPrompt = (props) => {
     const changeContent = (e) => {
         setPromptText(e.target.value);
     };
-    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2" },
-        React.createElement(Flex_1.Flex, { flexDirection: "column" },
-            React.createElement(Flex_1.Box, { className: "twa:mt-3 twa:mx-2" }, props.header),
-            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Flex_1.Box, { className: "twa:mt-3 twa:mx-2" },
-                ' ',
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.message.split('\n').map(function (item, index) {
-                    return (React.createElement("span", { key: index },
-                        item,
-                        React.createElement("br", null)));
-                })))),
-            React.createElement(Input_1.default, { autoFocus: true, className: "twa:mt-3 twa:mx-3", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
-            React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-                React.createElement(Flex_1.Flex, { className: "twa:p-2", "data-name": "footer", justifyContent: "space-between" },
-                    React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"),
-                    React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"))))));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-3 twa:mx-2", children: props.header }), StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.message) && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3 twa:mx-2", children: [' ', (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center' }, children: props.message.split('\n').map(function (item, index) {
+                                return ((0, jsx_runtime_1.jsxs)("span", { children: [item, (0, jsx_runtime_1.jsx)("br", {})] }, index));
+                            }) })] })), (0, jsx_runtime_1.jsx)(Input_1.default, { autoFocus: true, className: "twa:mt-3 twa:mx-3", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-3", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:p-2", "data-name": "footer", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel", children: "Cancel" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm(), children: "OK" })] }) })] }) }));
 };
 exports.AdaptablePopupPrompt = AdaptablePopupPrompt;

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupTeamSharing = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const react_1 = require("react");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -18,31 +18,6 @@ const AdaptablePopupTeamSharing = (props) => {
         description: '',
         type: 'Snapshot',
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog_1.default, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2" },
-            React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock_1.default, { "data-name": "teamsharing-popup-description", className: "twa:m-2 twa:mb-2 twa:p-2 twa:text-3" },
-                    "Create a ",
-                    header,
-                    " which may be either:",
-                    React.createElement("ul", null,
-                        React.createElement("li", null,
-                            React.createElement("strong", null, "Snapshot"),
-                            ": a one-off share of an exact copy of the current object"),
-                        React.createElement("li", null,
-                            React.createElement("strong", null, "Active"),
-                            ": a \"live\" share that is automatically updated with every local change"))),
-                React.createElement(FormLayout_1.default, { className: "twa:p-2" },
-                    React.createElement(FormLayout_1.FormRow, { label: "Name: " },
-                        React.createElement(Input_1.default, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", className: "twa:w-[300px]", placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Share: " },
-                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }) }, "Snapshot"),
-                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", className: "twa:ml-3", checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active")))),
-                React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-                    React.createElement(Flex_1.Flex, { className: "twa:p-2" },
-                        React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
-                        React.createElement("div", { className: "twa:flex-1" }),
-                        React.createElement(SimpleButton_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Dialog_1.default, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "teamsharing-popup-description", className: "twa:m-2 twa:mb-2 twa:p-2 twa:text-3", children: ["Create a ", header, " which may be either:", (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Snapshot" }), ": a one-off share of an exact copy of the current object"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Active" }), ": a \"live\" share that is automatically updated with every local change"] })] })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name: ", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", className: "twa:w-[300px]", placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Share: ", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }), children: "Snapshot" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "teamsharing-entity-type-active", className: "twa:ml-3", checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }), children: "Active" })] }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-3", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose(), children: "Cancel" }), (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config), children: "OK" })] }) })] }) }) }));
 };
 exports.AdaptablePopupTeamSharing = AdaptablePopupTeamSharing;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.showToast = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
 const Toastify_1 = require("../../../components/Toastify");
@@ -23,7 +23,7 @@ const showToast = (props) => {
     }, {
         duration: props.adaptableAlert.alertDefinition.AlertProperties.NotificationDuration,
     });
-    const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
+    const content = ((0, jsx_runtime_1.jsx)(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
             Toastify_1.toast.dismiss(toastId);
         } }));
     let toastId;