@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
@@ -13,19 +14,15 @@ const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, sh
             ref.current?.focus();
         }
     }, [isActive]);
-    return (React.createElement("li", { className: clsx(navigationItemClassName, {
+    return (_jsx("li", { className: clsx(navigationItemClassName, {
             [`${navigationItemClassName}--active`]: isActive,
-        }) },
-        React.createElement("button", { ref: ref, type: "button", className: clsx(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
+        }), children: _jsxs("button", { ref: ref, type: "button", className: clsx(`${navigationItemClassName}__Button ${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, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })),
-            customIcon ? React.createElement(AdaptableIconComponent, { icon: customIcon }) : null,
-            menuItem.label)));
+            }), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1, children: [showModuleIcons && menuItem.icon && (_jsx(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })), customIcon ? _jsx(AdaptableIconComponent, { icon: customIcon }) : null, menuItem.label] }) }));
 };
 export const Navigation = (props) => {
     const { api } = useAdaptable();
@@ -70,16 +67,15 @@ export 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 (_jsx("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1, children: _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 (_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 (_jsx(NavigationItem, { menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }, menuItem.label));
+            }) }) }));
 };

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

@@ -1,18 +1,9 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { ButtonInfo } from '../../Buttons/ButtonInfo';
 import { Box, Flex } from '../../../../components/Flex';
 export const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (React.createElement(Box, { className: clsx('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, { alignItems: "center" },
-                React.createElement(Box, { className: "twa:mr-0", "data-name": "space-before" }),
-                React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
-                React.createElement(Box, { className: "twa:mr-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(Box, { className: "twa:flex-1" }),
-            props.button),
-        React.createElement(Box, { className: clsx('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName) }, props.children)));
+    return (_jsxs(Box, { className: clsx('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: [_jsxs("div", { className: `${baseClassName}__Header twa:flex`, children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-0", "data-name": "space-before" }), _jsx("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                                ) }))] }), _jsx(Box, { className: "twa:flex-1" }), props.button] }), _jsx(Box, { className: clsx('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptableIconComponent } from '../../AdaptableIconComponent';
@@ -7,19 +7,17 @@ const baseClassName = 'ab-Adaptable-Popup__TopBar';
 export const TopBar = (props) => {
     const adaptable = useAdaptable();
     const applicationIcon = adaptable.api.optionsApi.getUserInterfaceOptions()?.applicationIcon;
-    let icon = React.createElement(React.Fragment, null);
+    let icon = _jsx(_Fragment, {});
     const iconClassName = `${baseClassName}__Icon`;
     if (props.icon === 'ConfigurationIcon') {
-        icon = React.createElement(AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
+        icon = _jsx(AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
     }
     else if (props.icon === 'ApplicationIcon' && applicationIcon) {
-        icon = React.createElement(AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });
+        icon = _jsx(AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });
     }
     else if (typeof props.icon === 'object') {
-        icon = React.createElement(AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
+        icon = _jsx(AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
     }
-    return (React.createElement(Box, { className: clsx(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(Box, { className: `${baseClassName}__Title` }, props.children)));
+    return (_jsxs(Box, { className: clsx(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, _jsx(Box, { className: `${baseClassName}__Title`, children: props.children })] }));
 };
 export default TopBar;

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

@@ -1,7 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { PanelWithImage } from '../Panels/PanelWithImage';
 import { UIHelper } from '../../UIHelper';
 import Dialog from '../../../components/Dialog';
+import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/alertFormHelper';
 import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
 import { useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
@@ -29,39 +31,31 @@ export const AdaptablePopupAlert = (props) => {
             formData: formData,
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);
+    const alertForm = React.useMemo(() => 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, { flexDirection: "column", className: "twa:self-end", alignItems: "end" },
-            React.createElement(AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
+        return (_jsx(Flex, { flexDirection: "column", className: "twa:self-end", alignItems: "end", children: _jsx(AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' }) }));
     };
-    const content = (React.createElement(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' } },
-        React.createElement("div", null,
-            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(Flex, { flexDirection: "row", key: index },
-                            React.createElement(Box, { key: index, className: "twa:m-2" },
-                                item,
-                                React.createElement("br", null))));
-                    })
-                    : msg),
-            React.createElement(Box, { className: "twa:m-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
-                    setTimeout(() => {
-                        button.onClick?.(button, context);
-                    }, 20);
-                } })) : null))));
-    return props.headless ? (content) : (React.createElement(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, className: "twa:min-h-auto twa:min-w-[20vw] twa:max-w-[70vw]" }, content));
+    const content = (_jsx(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' }, children: _jsxs("div", { children: [_jsxs(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 (_jsx(Flex, { flexDirection: "row", children: _jsxs(Box, { className: "twa:m-2", children: [item, _jsx("br", {})] }, index) }, index));
+                            })
+                            : msg] }), _jsx(Box, { className: "twa:m-2", children: adaptableForm ? (_jsx(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) : (_jsx(Dialog, { "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 }));
 };

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

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { UIHelper } from '../../UIHelper';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
@@ -36,24 +37,11 @@ export const AdaptablePopupConfirmation = (props) => {
         return true;
     }
     if (!props.showPopup) {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
-    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(Box, { key: index, className: "twa:m-2" },
-                        item,
-                        React.createElement("br", null)));
-                })),
-                React.createElement(Box, { className: "twa:pl-2" },
-                    React.createElement(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
-                            setDisableDeleteConfirmation(!disableDeleteConfirmation);
-                        } }, "Do not show this again")),
-                props.showInputBox && (React.createElement(Box, { className: "twa:p-2", "data-name": "body" },
-                    React.createElement("p", null, "Please enter a comment to confirm."),
-                    React.createElement(Input, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
-                React.createElement(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
-                    props.cancelButtonText != null ? (React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),
-                    React.createElement(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText))))));
+    return (_jsx(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%' }, children: _jsx(PanelWithImage, { header: header, icon: glyph, variant: "primary", children: _jsxs("div", { children: [_jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: props.messsage.split('\n').map(function (item, index) {
+                            return (_jsxs(Box, { className: "twa:m-2", children: [item, _jsx("br", {})] }, index));
+                        }) }), _jsx(Box, { className: "twa:pl-2", children: _jsx(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
+                                setDisableDeleteConfirmation(!disableDeleteConfirmation);
+                            }, children: "Do not show this again" }) }), props.showInputBox && (_jsxs(Box, { className: "twa:p-2", "data-name": "body", children: [_jsx("p", { children: "Please enter a comment to confirm." }), _jsx(Input, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) })] })), _jsxs(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between", children: [props.cancelButtonText != null ? (_jsx(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm(), children: props.cancelButtonText })) : (_jsx("div", {})), _jsx(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm(), children: props.confirmButtonText })] })] }) }) }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import Dialog from '../../../components/Dialog';
@@ -24,19 +25,7 @@ export const AdaptablePopupPrompt = (props) => {
     const changeContent = (e) => {
         setPromptText(e.target.value);
     };
-    return (React.createElement(Dialog, { 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, { flexDirection: "column" },
-            React.createElement(Box, { className: "twa:mt-3 twa:mx-2" }, props.header),
-            StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(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, { autoFocus: true, className: "twa:mt-3 twa:mx-3", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
-            React.createElement(Box, { className: "twa:mt-3" },
-                React.createElement(Flex, { className: "twa:p-2", "data-name": "footer", justifyContent: "space-between" },
-                    React.createElement(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"),
-                    React.createElement(SimpleButton, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"))))));
+    return (_jsx(Dialog, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2", children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Box, { className: "twa:mt-3 twa:mx-2", children: props.header }), StringExtensions.IsNotNullOrEmpty(props.message) && (_jsxs(Box, { className: "twa:mt-3 twa:mx-2", children: [' ', _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: props.message.split('\n').map(function (item, index) {
+                                return (_jsxs("span", { children: [item, _jsx("br", {})] }, index));
+                            }) })] })), _jsx(Input, { autoFocus: true, className: "twa:mt-3 twa:mx-3", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }), _jsx(Box, { className: "twa:mt-3", children: _jsxs(Flex, { className: "twa:p-2", "data-name": "footer", justifyContent: "space-between", children: [_jsx(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel", children: "Cancel" }), _jsx(SimpleButton, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm(), children: "OK" })] }) })] }) }));
 };

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

@@ -1,9 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Dialog from '../../../components/Dialog';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import Input from '../../../components/Input';
 import { useState } from 'react';
 import SimpleButton from '../../../components/SimpleButton';
-import * as React from 'react';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import HelpBlock from '../../../components/HelpBlock';
 import Radio from '../../../components/Radio';
@@ -14,30 +14,5 @@ export const AdaptablePopupTeamSharing = (props) => {
         description: '',
         type: 'Snapshot',
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { 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, { flexDirection: "column" },
-                React.createElement(HelpBlock, { "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, { className: "twa:p-2" },
-                    React.createElement(FormRow, { label: "Name: " },
-                        React.createElement(Input, { "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(FormRow, { label: "Share: " },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }) }, "Snapshot"),
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", className: "twa:ml-3", checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active")))),
-                React.createElement(Box, { className: "twa:mt-3" },
-                    React.createElement(Flex, { className: "twa:p-2" },
-                        React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
-                        React.createElement("div", { className: "twa:flex-1" }),
-                        React.createElement(SimpleButton, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
+    return (_jsx(_Fragment, { children: _jsx(Dialog, { 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: _jsxs(Flex, { flexDirection: "column", children: [_jsxs(HelpBlock, { "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:", _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Snapshot" }), ": a one-off share of an exact copy of the current object"] }), _jsxs("li", { children: [_jsx("strong", { children: "Active" }), ": a \"live\" share that is automatically updated with every local change"] })] })] }), _jsxs(FormLayout, { className: "twa:p-2", children: [_jsx(FormRow, { label: "Name: ", children: _jsx(Input, { "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 }) }) }), _jsx(FormRow, { label: "Share: ", children: _jsxs(Flex, { flexDirection: "row", children: [_jsx(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }), children: "Snapshot" }), _jsx(Radio, { "data-name": "teamsharing-entity-type-active", className: "twa:ml-3", checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }), children: "Active" })] }) })] }), _jsx(Box, { className: "twa:mt-3", children: _jsxs(Flex, { className: "twa:p-2", children: [_jsx(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose(), children: "Cancel" }), _jsx("div", { className: "twa:flex-1" }), _jsx(SimpleButton, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config), children: "OK" })] }) })] }) }) }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { AdaptablePopupAlert } from './AdaptablePopupAlert';
 import { toast } from '../../../components/Toastify';
@@ -19,7 +19,7 @@ export const showToast = (props) => {
     }, {
         duration: props.adaptableAlert.alertDefinition.AlertProperties.NotificationDuration,
     });
-    const content = (React.createElement(AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
+    const content = (_jsx(AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
             toast.dismiss(toastId);
         } }));
     let toastId;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AdaptableFormComponent } from '../../../../components/AdaptableFormComponent';
@@ -20,17 +21,15 @@ export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
         formData: data,
         ...formProps,
     };
-    return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, className: "twa:min-h-auto twa:min-w-[400px] twa:max-h-[80vh]", onDismiss: handleDismiss },
-        React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", className: "twa:p-4 twa:h-full" },
-            React.createElement(AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
+    return (_jsx(Dialog, { isOpen: true, showCloseButton: false, className: "twa:min-h-auto twa:min-w-[400px] twa:max-h-[80vh]", onDismiss: handleDismiss, children: _jsx(Flex, { flexDirection: 'column', "data-name": "form-dialog", className: "twa:p-4 twa:h-full", children: _jsx(AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     handleDismiss();
                     const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;
                     button.onClick?.(button, preparedContext);
-                } }))));
+                } }) }) }));
 };
 export const FormPopups = () => {
     const forms = useSelector((state) => state.Popup.FormPopup.FormList);
-    return (React.createElement(React.Fragment, null, forms.map((form) => {
-        return (React.createElement(FormDialog, { key: form.Id, prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }));
-    })));
+    return (_jsx(_Fragment, { children: forms.map((form) => {
+            return (_jsx(FormDialog, { prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }, form.Id));
+        }) }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { GetNoteSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
@@ -19,8 +20,7 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
     const handleNoteChange = React.useCallback((value) => {
         api.noteApi.updateNoteText(value, note);
     }, [note]);
-    return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup" },
-        React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note?.Uuid, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) })));
+    return (_jsx(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup", children: _jsx(NoteEditor, { isReadonly: isReadonly, editMode: editMode, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) }, note?.Uuid) }));
 };
 export const GridCellPopup = (props) => {
     const { api } = useAdaptable();
@@ -39,20 +39,18 @@ export const GridCellPopup = (props) => {
         cellPopupRef?.current?.refreshContent?.();
     }, [focusedEntity]);
     if (!cellAddress) {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
-    const noteEditor = React.createElement(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
-    const commentEditor = (React.createElement(CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
-    return (React.createElement(CellPopup, { ref: cellPopupRef, key: `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId }, (() => {
-        switch (focusedEntity) {
-            case 'Note':
-                return noteEditor;
-            case 'Comment':
-                return commentEditor;
-            default:
-                return (React.createElement(React.Fragment, null,
-                    noteEditor,
-                    commentEditor));
-        }
-    })()));
+    const noteEditor = _jsx(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
+    const commentEditor = (_jsx(CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
+    return (_jsx(CellPopup, { ref: cellPopupRef, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId, children: (() => {
+            switch (focusedEntity) {
+                case 'Note':
+                    return noteEditor;
+                case 'Comment':
+                    return commentEditor;
+                default:
+                    return (_jsxs(_Fragment, { children: [noteEditor, commentEditor] }));
+            }
+        })() }, `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`));
 };

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

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,7 +11,7 @@ import { PanelWithImage } from '../../Panels/PanelWithImage';
 import { getMiddlePosition, getWindowPopupSize } from '../Utilities';
 import { WINDOW_SHOW_TRANSPOSED_VIEW, windowFactory } from './windowFactory';
 const NoopComponent = () => {
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };
 export const CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
 /**
@@ -44,46 +45,45 @@ export const WindowPopups = () => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const windowItems = useSelector((state) => state.Popup.WindowPopup.PopupList);
-    return (React.createElement(React.Fragment, null, windowItems?.map((windowItem) => {
-        let Component = windowFactory[windowItem.FactoryId] ?? null;
-        const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
-        const handleDismiss = () => {
-            dispatch(PopupHideWindow(windowItem.Id));
-        };
-        const size = windowModalSettings?.[windowItem.Id]?.size ??
-            windowItem?.PopupProps?.size ??
-            getWindowPopupSize();
-        const position = windowModalSettings?.[windowItem.Id]?.position ??
-            windowItem?.PopupProps?.position ??
-            getMiddlePosition(size);
-        let componentNode = null;
-        if (!Component &&
-            (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
-            componentNode = (React.createElement(ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
-        }
-        else {
-            Component = Component ?? NoopComponent;
-            componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
-        }
-        // Transposed View: portal into custom container if configured
-        if (windowItem.FactoryId === WINDOW_SHOW_TRANSPOSED_VIEW) {
-            const transposedContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
-            if (transposedContainer) {
-                return (React.createElement(ContainerPortal, { key: windowItem.Id, container: transposedContainer, onContainerRemoved: handleDismiss }, componentNode));
+    return (_jsx(_Fragment, { children: windowItems?.map((windowItem) => {
+            let Component = windowFactory[windowItem.FactoryId] ?? null;
+            const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
+            const handleDismiss = () => {
+                dispatch(PopupHideWindow(windowItem.Id));
+            };
+            const size = windowModalSettings?.[windowItem.Id]?.size ??
+                windowItem?.PopupProps?.size ??
+                getWindowPopupSize();
+            const position = windowModalSettings?.[windowItem.Id]?.position ??
+                windowItem?.PopupProps?.position ??
+                getMiddlePosition(size);
+            let componentNode = null;
+            if (!Component &&
+                (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
+                componentNode = (_jsx(ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
             }
-        }
-        return (React.createElement(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
-                ...windowModalProps,
-                onChange: (settings) => {
-                    setWindowModalSettings((settingsMap) => ({
-                        ...settingsMap,
-                        [windowItem.Id]: settings,
-                    }));
-                },
-                handleSelector: '.ab-Window-Modal .ab-Panel__header',
-                size: size,
-                position: position,
-            }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
-    })));
+            else {
+                Component = Component ?? NoopComponent;
+                componentNode = (_jsx(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
+            }
+            // Transposed View: portal into custom container if configured
+            if (windowItem.FactoryId === WINDOW_SHOW_TRANSPOSED_VIEW) {
+                const transposedContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
+                if (transposedContainer) {
+                    return (_jsx(ContainerPortal, { container: transposedContainer, onContainerRemoved: handleDismiss, children: componentNode }, windowItem.Id));
+                }
+            }
+            return (_jsx(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", windowModal: true, windowModalProps: {
+                    ...windowModalProps,
+                    onChange: (settings) => {
+                        setWindowModalSettings((settingsMap) => ({
+                            ...settingsMap,
+                            [windowItem.Id]: settings,
+                        }));
+                    },
+                    handleSelector: '.ab-Window-Modal .ab-Panel__header',
+                    size: size,
+                    position: position,
+                }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true, children: _jsx(PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary", children: componentNode }) }, windowItem.Id));
+        }) }));
 };

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,6 +1,5 @@
 import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup';
 import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
-import { ThemeEditorWindow } from '../../../Theme/ThemeEditorWindow';
 import { TransposedPopup } from '../../../Layout/TransposedPopup';
 import { ColumnFilterWindow } from '../../ColumnFilter/ColumnFilterWindow';
 export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
@@ -11,7 +10,6 @@ export const COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 export const windowFactory = {
     [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
     [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
-    [SHOW_THEME_EDITOR]: ThemeEditorWindow,
     [WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup,
     [COLUMN_FILTER_WINDOW]: ColumnFilterWindow,
 };

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -1,15 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { isAdaptableSystemIcon } from '../../../components/Icon';
 import HelpBlock from '../../../components/HelpBlock';
 import { Tag } from '../../../components/Tag';
 import AdaptableInput from '../AdaptableInput';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
-import { Select } from '../../../components/Select';
 import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
 import { useAdaptable } from '../../AdaptableContext';
 import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
 import { useEffect } from 'react';
 import { Box, Flex } from '../../../components/Flex';
+import { SingleSelect } from '../../../components/NewSelect';
 export const PredicateEditor = (props) => {
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
@@ -36,10 +37,10 @@ export const PredicateEditor = (props) => {
     let icon = null;
     if (currentPredicateDef) {
         if (isAdaptableSystemIcon(currentPredicateDef?.icon)) {
-            icon = React.createElement(AdaptableIconComponent, { icon: currentPredicateDef.icon });
+            icon = _jsx(AdaptableIconComponent, { icon: currentPredicateDef.icon });
         }
         else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
-            icon = React.createElement("span", null, currentPredicateDef.icon.text);
+            icon = _jsx("span", { children: currentPredicateDef.icon.text });
         }
     }
     const adaptable = useAdaptable();
@@ -64,25 +65,15 @@ export const PredicateEditor = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
-    return (React.createElement(Box, { className: baseClassName },
-        React.createElement(Flex, { alignItems: "center", className: "twa:justify-stretch" },
-            icon && React.createElement(Tag, { className: "twa:mr-2" }, icon),
-            React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
-                    const option = predicateDefsOptions.find((x) => x.value === value);
-                    props.onChange({
-                        ...props.predicate,
-                        PredicateId: option?.value,
-                        Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
-                    });
-                } })),
-        React.createElement(Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
-            index > 0 && React.createElement(HelpBlock, { className: "twa:m-2" }, "AND"),
-            React.createElement(Flex, { key: index, className: "twa:flex-1", flexDirection: "column" },
-                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
-        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { className: "twa:mt-2" },
-            React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
-                    onMenuOpen,
-                    onInputChange,
-                    skipDefaultFiltering: skipDefaultSearch,
-                }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
+    return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onValueChange: (value) => {
+                            const option = predicateDefsOptions.find((x) => x.value === value);
+                            props.onChange({
+                                ...props.predicate,
+                                PredicateId: option?.value,
+                                Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
+                            });
+                        } })] }), _jsx(Flex, { children: currentPredicateDef?.inputs?.map((predicateDefInput, index) => (_jsxs(_Fragment, { children: [index > 0 && _jsx(HelpBlock, { className: "twa:m-2", children: "AND" }), _jsx(Flex, { className: "twa:flex-1", flexDirection: "column", children: _jsx(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) }) }, index)] }))) }), adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (_jsx(Box, { className: "twa:mt-2", children: _jsx(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, onMenuOpen: onMenuOpen, selectProps: {
+                        onInputValueChange: onInputChange,
+                        filter: skipDefaultSearch ? null : undefined,
+                    }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange }) }))] }));
 };