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

package/src/View/Dashboard/CustomToolbar.js

@@ -1,8 +1,10 @@
-import * as React from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../AdaptableContext';
-import { AdaptableButtonComponent } from '../Components/AdaptableButton';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton';
 import { PanelDashboard } from '../Components/Panels/PanelDashboard';
+import { AdaptableFormComponent } from '../../components/AdaptableFormComponent/AdaptableFormComponent';
+import { getDefaultAdaptableFormData, validateAdaptableForm, } from '../../AdaptableState/Common/AdaptableForm';
 export const CustomToolbarCmp = (props) => {
     const { api } = useAdaptable();
     // dummy object which is used to force a re-render of the toolbar
@@ -13,6 +15,56 @@ export const CustomToolbarCmp = (props) => {
     const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
     const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
     const componentContainerRef = useRef(null);
+    const formContainerId = `${buttonsContainerId}-form`;
+    // Local form state for `customToolbar.toolbarForm`.
+    // Defaults are seeded from the form's field `defaultValue`s (if any) on
+    // first mount; subsequent definition swaps (different toolbar instance) are
+    // re-seeded too because the dependency includes the form definition.
+    const [toolbarFormData, setToolbarFormData] = useState(() => props.customToolbar.toolbarForm
+        ? getDefaultAdaptableFormData(props.customToolbar.toolbarForm)
+        : {});
+    // Register a reset callback so `dashboardApi.resetCustomToolbarFormData(name)`
+    // can wipe this toolbar's state back to its declared defaults without
+    // forcing a re-mount. The unregister guard inside the internal API
+    // ensures a stale unmount can't clobber a fresh registration.
+    useEffect(() => {
+        if (!props.customToolbar.toolbarForm) {
+            return;
+        }
+        const resetter = () => {
+            const next = getDefaultAdaptableFormData(props.customToolbar.toolbarForm);
+            setToolbarFormData(next);
+            // Mirror the public form-change callback so consumer code (e.g. a
+            // grid-filter helper) can rebuild itself from the cleared data
+            // without re-implementing default-seeding.
+            if (props.customToolbar.onToolbarFormChange) {
+                props.customToolbar.onToolbarFormChange(next, buildToolbarFormContext(next));
+            }
+        };
+        api.dashboardApi.internalApi.registerCustomToolbarFormResetter(props.customToolbar.name, resetter);
+        return () => {
+            api.dashboardApi.internalApi.unregisterCustomToolbarFormResetter(props.customToolbar.name, resetter);
+        };
+        // We deliberately depend on the toolbar identity + form definition so
+        // that a re-render with the same toolbar doesn't churn the registration.
+    }, [api, props.customToolbar.name, props.customToolbar.toolbarForm]);
+    const buildToolbarFormContext = (data) => {
+        const baseCtx = {
+            customToolbar: props.customToolbar,
+            dashboardState: api.dashboardApi.getDashboardState(),
+            formData: data,
+            ...api.internalApi.buildBaseContext(),
+        };
+        // Validate against the same context the consumer will see, then attach
+        // the results so button hidden/disabled/onClick callbacks can gate on
+        // form validity (e.g. a "Submit" button disabled while invalid).
+        const formErrors = props.customToolbar.toolbarForm
+            ? validateAdaptableForm(props.customToolbar.toolbarForm, data, baseCtx)
+            : {};
+        baseCtx.formErrors = formErrors;
+        baseCtx.formIsValid = Object.keys(formErrors).length === 0;
+        return baseCtx;
+    };
     useLayoutEffect(() => {
         const element = renderContentContainerRef.current;
         const adaptableApi = api;
@@ -57,43 +109,43 @@ export const CustomToolbarCmp = (props) => {
     }, []);
     const CustomReactFrameworkComponent = props.customToolbar
         .frameworkComponent;
-    return (React.createElement(React.Fragment, null,
-        props.customToolbar.render && (React.createElement("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })),
-        props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
-            const dashboardContext = {
-                customToolbar: props.customToolbar,
-                dashboardState: api.dashboardApi.getDashboardState(),
-                ...api.internalApi.buildBaseContext(),
-            };
-            const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
-            let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
-            let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
-            let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
-            if (button.hidden && button.hidden(button, dashboardContext)) {
-                return null;
-            }
-            const disabled = button.disabled && button.disabled(button, dashboardContext);
-            let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
-            let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-base-space)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
-                    button.onClick ? button.onClick(button, dashboardContext) : null;
-                    setTimeout(() => {
-                        // mutate state to force a re-rendering
-                        setComponentRevision(componentRevision + 1);
-                    }, 16);
-                } }, buttonLabel));
-        }))),
-        CustomReactFrameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }, api.gridApi.getVariant() === 'react' ? (React.createElement(CustomReactFrameworkComponent, { adaptableApi: api })) : null))));
+    return (_jsxs(_Fragment, { children: [props.customToolbar.render && (_jsx("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })), props.customToolbar.toolbarButtons && (_jsx("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, children: props.customToolbar.toolbarButtons.map((button, index) => {
+                    const dashboardContext = {
+                        customToolbar: props.customToolbar,
+                        dashboardState: api.dashboardApi.getDashboardState(),
+                        ...api.internalApi.buildBaseContext(),
+                    };
+                    return (_jsx(AdaptableButtonView, { button: button, context: dashboardContext, api: api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolbar, rerenderOnClick: false, style: { marginLeft: index ? 'var(--ab-base-space)' : 0 }, onAfterClick: () => setComponentRevision(componentRevision + 1) }, index));
+                }) })), props.customToolbar.toolbarForm && (_jsx("div", { id: formContainerId, className: `ab-CustomToolbar__form ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, children: _jsx(AdaptableFormComponent
+                // ensure the form uses the inline (toolbar-friendly) layout even
+                // if the consumer forgot to set it explicitly
+                , { 
+                    // ensure the form uses the inline (toolbar-friendly) layout even
+                    // if the consumer forgot to set it explicitly
+                    formDef: { ...props.customToolbar.toolbarForm, layout: 'inline' }, data: toolbarFormData, displayTitle: false, api: api, context: buildToolbarFormContext(toolbarFormData), focusFirstButton: false, onChange: (newData) => {
+                        setToolbarFormData(newData);
+                        if (props.customToolbar.onToolbarFormChange) {
+                            props.customToolbar.onToolbarFormChange(newData, buildToolbarFormContext(newData));
+                        }
+                    }, onButtonClick: (button) => {
+                        const ctx = buildToolbarFormContext(toolbarFormData);
+                        const formButton = button;
+                        if (formButton.onClick) {
+                            formButton.onClick(formButton, ctx);
+                        }
+                        setTimeout(() => {
+                            setComponentRevision(componentRevision + 1);
+                        }, 16);
+                    } }) })), CustomReactFrameworkComponent && (_jsx("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}`, children: api.gridApi.getVariant() === 'react' ? (_jsx(CustomReactFrameworkComponent, { adaptableApi: api })) : null }))] }));
 };
 export const CustomToolbarWrapper = (props) => {
     const { api } = useAdaptable();
-    return (React.createElement(PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'configure') !=
+    return (_jsx(PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'configure') !=
             undefined, showCloseActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'close') != undefined, onConfigure: () => {
             const customToolbarConfiguredInfo = {
                 ...api.internalApi.buildBaseContext(),
                 customToolbar: props.customToolbar,
             };
             api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
-        }, accessLevel: api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard') },
-        React.createElement(CustomToolbarCmp, { ...props })));
+        }, accessLevel: api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard'), children: _jsx(CustomToolbarCmp, { ...props }) }));
 };

package/src/View/Dashboard/Dashboard.d.ts

@@ -17,7 +17,6 @@ interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     onSetActiveTabIndex: (ActiveTabIndex: number | null) => DashboardRedux.DashboardSetActiveTabIndexAction;
     onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
     onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
-    onSetIsInline: (IsInline: boolean) => DashboardRedux.DashboardSetIsInlineAction;
     onSetFloatingPosition: (FloatingPosition: AdaptableCoordinate) => DashboardRedux.DashboardSetFloatingPositionAction;
     onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
     onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;

package/src/View/Dashboard/Dashboard.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import kebabCase from '../../Utilities/utils/kebabCase';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
-import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
@@ -28,8 +28,7 @@ const DashboardComponent = (props) => {
             let customToolbar = customToolbars && customToolbars.find((ct) => ct.name == visibleToolbarName);
             if (customToolbar) {
                 if (dashboardAccessLevel != ACCESS_LEVEL_HIDDEN) {
-                    return (React.createElement(Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
-                        React.createElement(CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
+                    return (_jsx(Box, { className: `ab-Dashboard__container ab-Dashboard__container--customToolbar`, children: _jsx(CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision }) }, customToolbar.name));
                 }
             }
             else {
@@ -40,9 +39,7 @@ const DashboardComponent = (props) => {
                         let moduleInfo = props.api.internalApi
                             .getModuleService()
                             .getModuleInfoByModule(moduleToolbarName);
-                        return (React.createElement(Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
-                            React.createElement(ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
-                                React.createElement(DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
+                        return (_jsx(Box, { className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}`, children: _jsx(ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel, children: _jsx(DashboardToolbarFactory, { toolbarName: moduleToolbarName }) }) }, moduleToolbarName));
                     }
                     else {
                         props.api.logError('Cannot find Dashboard Control for ' + visibleToolbarName);
@@ -64,13 +61,13 @@ const DashboardComponent = (props) => {
             shortcuts = shortcutsArray.map((x, index) => {
                 let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
+                    return (_jsx(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
                             ? {
                                 ...UIHelper.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
                                     'Success'),
                                 border: 0,
                             }
-                            : {} }));
+                            : {} }, menuItem.label));
                 }
             });
         }
@@ -82,13 +79,12 @@ const DashboardComponent = (props) => {
             .filter(Boolean);
         let customDashboardButtons = null;
         if (dashboardButtonsArray?.length) {
-            customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
+            customDashboardButtons = dashboardButtonsArray.map((button, index) => (_jsx(CustomDashboardButton, { button: button, api: props.api, accessLevel: props.accessLevel }, `${button.label}-${index}`)));
         }
         return customDashboardButtons;
     };
     const renderQuickSearch = () => {
-        return (React.createElement(Box, { className: "twa:ml-2" },
-            React.createElement(QuickSearchInput, { className: "ab-DashboardToolbar__QuickSearch__text", inputClassName: "twa:w-[7rem]" })));
+        return (_jsx(Box, { className: "twa:ml-2", children: _jsx(QuickSearchInput, { className: "ab-DashboardToolbar__QuickSearch__text", inputClassName: "twa:w-[7rem]" }) }));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();
@@ -96,16 +92,14 @@ const DashboardComponent = (props) => {
         props.api.internalApi.getModuleService().isAdapTableModulePresent(QuickSearchModuleId);
     const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
     if (props.DashboardState.IsHidden) {
-        return React.createElement("div", null);
+        return _jsx("div", {});
     }
-    return (React.createElement(DashboardUI, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: React.createElement(PinnedDashboard, null), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
+    return (_jsx(DashboardUI, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: _jsx(PinnedDashboard, {}), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
             props.onSetActiveTabIndex(ActiveTabIndex);
         }, collapsed: props.DashboardState.IsCollapsed, onCollapsedChange: (IsCollapsed) => {
             props.onSetIsCollapsed(IsCollapsed);
         }, floating: props.DashboardState.IsFloating, onFloatingChange: (IsFloating) => {
             props.onSetIsFloating(IsFloating);
-        }, inline: props.DashboardState.IsInline, onInlineChange: (IsInline) => {
-            props.onSetIsInline(IsInline);
         }, position: props.DashboardState.FloatingPosition, onPositionChange: (FloatingPositionCallback) => {
             if (typeof FloatingPositionCallback === 'function') {
                 const FloatingPosition = FloatingPositionCallback(props.DashboardState.FloatingPosition);
@@ -114,14 +108,8 @@ const DashboardComponent = (props) => {
             else {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
-        }, left: React.createElement(React.Fragment, null,
-            React.createElement(AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }),
-            dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(),
-            dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()), right: React.createElement(React.Fragment, null,
-            dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(),
-            dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),
-            shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
-        props.DashboardState.Tabs.map((tab, index) => (React.createElement(DashboardTabUI, { key: index, title: tab.Name }, renderTab(tab))))));
+        }, left: _jsxs(_Fragment, { children: [_jsx(AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }), dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(), dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()] }), right: _jsxs(_Fragment, { children: [dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(), dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(), shouldRenderQuickSearchHeader && renderQuickSearch()] }), onShowDashboardPopup: props.onShowDashboardPopup, children: props.DashboardState.Tabs &&
+            props.DashboardState.Tabs.map((tab, index) => (_jsx(DashboardTabUI, { title: tab.Name, children: renderTab(tab) }, index))) }));
 };
 function mapStateToProps(state, ownProps) {
     return {

package/src/View/Dashboard/DashboardPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
@@ -66,29 +67,7 @@ class DashboardPopupComponent extends React.Component {
             return false;
         };
         const contentCls = '';
-        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
-                areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
-                    React.createElement(Card, null,
-                        React.createElement(Card.Title, { gap: 8 }, "Display Settings"),
-                        React.createElement(Card.Body, { gap: 2, className: "twa:p-2" },
-                            React.createElement("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3" },
-                                React.createElement(ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible'),
-                                this.props.DashboardState.Tabs?.length > 0 ? (React.createElement(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded')) : null,
-                                this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null))))),
-                React.createElement(Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
-                    React.createElement(Card.Title, null, "Contents"),
-                    React.createElement(Card.Body, { className: "twa:p-2" },
-                        React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
-                            React.createElement(Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
-                            React.createElement(Tabs.Tab, { value: "tabbed-toolbars" }, "Tabs & Toolbars"),
-                            React.createElement(Tabs.Tab, { value: "buttons" }, "Buttons"),
-                            React.createElement(Tabs.Content, { value: "pinned-toolbars", className: contentCls },
-                                React.createElement(PinnedToolbarsSelector, null)),
-                            React.createElement(Tabs.Content, { value: "tabbed-toolbars", className: contentCls },
-                                React.createElement(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                            React.createElement(Tabs.Content, { value: "buttons", className: contentCls },
-                                React.createElement(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))))));
+        return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [areDashboardSettingsVisible && (_jsx(_Fragment, { children: _jsxs(Card, { children: [_jsx(Card.Title, { gap: 8, children: "Display Settings" }), _jsx(Card.Body, { gap: 2, className: "twa:p-2", children: _jsxs("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3", children: [_jsx(ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility", children: this.props.IsHidden ? 'Hidden' : 'Visible' }), this.props.DashboardState.Tabs?.length > 0 ? (_jsx(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state", children: this.props.IsCollapsed ? 'Collapsed' : 'Expanded' })) : null, this.props.api.optionsApi.getDashboardOptions().canFloat ? (_jsx(ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating", children: this.props.IsFloating ? 'Floating' : 'Pinned' })) : null] }) })] }) })), _jsxs(Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0, children: [_jsx(Card.Title, { children: "Contents" }), _jsx(Card.Body, { className: "twa:p-2", children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "pinned-toolbars", children: "Pinned Toolbars" }), _jsx(Tabs.Tab, { value: "tabbed-toolbars", children: "Tabs & Toolbars" }), _jsx(Tabs.Tab, { value: "buttons", children: "Buttons" }), _jsx(Tabs.Content, { value: "pinned-toolbars", className: contentCls, children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(Tabs.Content, { value: "tabbed-toolbars", className: contentCls, children: _jsx(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api }) }), _jsx(Tabs.Content, { value: "buttons", className: contentCls, children: _jsx(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }) })] }) })] })] }) }));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { ALL_MODULES } from '../../AdaptableState/Common/Types';
@@ -12,7 +13,7 @@ const SystemDashboardToolbarFactory = (props) => {
     const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.toolbarName);
     const moduleToolbarView = AdaptableViewPanelFactory.get(props.toolbarName);
     if (!moduleToolbarView) {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
     const moduleToolbarElement = React.createElement(moduleToolbarView, {
         viewType: 'Toolbar',
@@ -28,15 +29,15 @@ const CustomDashboardToolbarFactory = (props) => {
     const customToolbars = adaptable.api.dashboardApi.getCustomToolbars();
     const customToolbar = customToolbars && customToolbars.find((ct) => ct.name == props.toolbarName);
     if (customToolbar) {
-        return React.createElement(CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
+        return _jsx(CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
     }
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };
 export const DashboardToolbarFactory = (props) => {
     if (ALL_MODULES.includes(props.toolbarName)) {
-        return React.createElement(SystemDashboardToolbarFactory, { toolbarName: props.toolbarName });
+        return _jsx(SystemDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
     else {
-        return React.createElement(CustomDashboardToolbarFactory, { toolbarName: props.toolbarName });
+        return _jsx(CustomDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
 };

package/src/View/Dashboard/DashboardViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import * as React from 'react';
 import { CheckBox } from '../../components/CheckBox';
@@ -10,13 +11,7 @@ class DashboardViewPanelComponent extends React.Component {
     }
     render() {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            ' ',
-            ArrayExtensions.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse")),
-            '',
-            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
-            ' ',
-            React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
+        return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [' ', ArrayExtensions.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (_jsx(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked), children: "Collapse" })), '', this.props.api.optionsApi.getDashboardOptions().canFloat && (_jsx(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked), children: "Float" })), ' ', _jsx(CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked), children: "Hidden" })] }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Dashboard/ModuleToolbarWrapper.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PanelDashboard } from '../Components/Panels/PanelDashboard';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
@@ -8,11 +8,11 @@ export const ModuleToolbarWrapper = (props) => {
     const moduleFriendlyName = props.moduleInfo.FriendlyName;
     const { api } = useAdaptable();
     const isConfigurable = moduleName !== 'OpenFin' && moduleName !== 'IPushPull';
-    return (React.createElement(PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureActionButton: isConfigurable, onConfigure: () => {
+    return (_jsx(PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureActionButton: isConfigurable, onConfigure: () => {
             const maxWidth = api.internalApi.getModuleService().getPopupMaxWidth(moduleName);
             const popupParams = maxWidth
                 ? { maxWidth, source: 'Toolbar' }
                 : { source: 'Toolbar' };
             api.internalApi.dispatchReduxAction(PopupRedux.PopupShowScreen(moduleName, props.moduleInfo.Popup, popupParams));
-        }, onClose: () => api.internalApi.dispatchReduxAction(DashboardRedux.DashboardCloseToolbar(moduleName)), accessLevel: props.accessLevel }, props.children));
+        }, onClose: () => api.internalApi.dispatchReduxAction(DashboardRedux.DashboardCloseToolbar(moduleName)), accessLevel: props.accessLevel, children: props.children }));
 };

package/src/View/Dashboard/PinnedDashboard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
 import { useAdaptable } from '../AdaptableContext';
 import { DashboardToolbarFactory } from './DashboardToolbarFactory';
@@ -9,11 +9,9 @@ export const PinnedDashboard = (props) => {
     const pinnedToolbars = (dashboardState.PinnedToolbars ?? []).filter((tb) => adaptable.api.dashboardApi.internalApi.isToolbarCustom(tb) ||
         adaptable.api.internalApi.getModuleService().isAdapTableModulePresent(tb));
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
-    return (React.createElement(Flex, { className: "ab-Dashboard__pinned twa:p-1" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(Box, { key: index, className: `twa:mr-1 twa:mb-1 ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
-            React.createElement(Box, { className: "ab-Dashboard__toolbar-content" },
-                React.createElement(DashboardToolbarFactory, { toolbarName: toolbar }))));
-    })));
+    return (_jsx(Flex, { className: "ab-Dashboard__pinned twa:p-1", children: pinnedToolbars.map((toolbar, index) => {
+            return (_jsx(Box, { className: `twa:mr-1 twa:mb-1 ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}`, children: _jsx(Box, { className: "ab-Dashboard__toolbar-content", children: _jsx(DashboardToolbarFactory, { toolbarName: toolbar }) }) }, index));
+        }) }));
 };

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ModuleManager } from '../../components/DragAndDropContext/ModuleManager';
@@ -31,7 +32,7 @@ export const PinnedToolbarsSelector = (props) => {
             },
         ];
     }, [pinnedToolbars]);
-    return (React.createElement(ModuleManager, { className: "twa:flex-1", permittedActions: {
+    return (_jsx(ModuleManager, { className: "twa:flex-1", permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../AdaptableContext';
 import usePrevious from '../../components/utils/usePrevious';
@@ -72,7 +72,7 @@ export const DataChangeHistoryGrid = (props) => {
             remove: removedRows,
         });
     }, [changeHistoryLog]);
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };
 const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow) => {
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
@@ -22,26 +23,9 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2" },
-            disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
-            suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
-            enabled && (React.createElement(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
-            (enabled || suspended) && (React.createElement(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
+        const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume(), children: "Resume" })), enabled && (_jsx(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend(), children: "Suspend" })), (enabled || suspended) && (_jsx(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable(), children: "Deactivate" }))] }));
         const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-        const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center' },
-            enabled && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold" }, "Active"),
-                !!activationTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
-                    "(since ",
-                    DateFormatter(activationTime, { Pattern: dateFormat }),
-                    ")")))),
-            suspended && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold" }, "Suspended"),
-                !!suspensionTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
-                    "(since ",
-                    DateFormatter(suspensionTime, { Pattern: dateFormat }),
-                    ")")))),
-            disabled && React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })));
+        const statusPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && _jsx(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })] }));
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = this.props.changeHistoryLog[changeKey];
             if (changeToBeUndone) {
@@ -58,19 +42,10 @@ class DataChangeHistoryPopupComponent extends React.Component {
             .getAdaptableInstance()
             .agGridThemeAdapter.getAgGridThemeMode();
         const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
-        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column" },
-                React.createElement(Flex, { style: {
-                        color: 'var(--ab-dashboard__color)',
-                        background: 'var(--ab-dashboard__background)',
-                    } },
-                    React.createElement(Flex, { flexDirection: 'row' },
-                        buttonPanel,
-                        statusPanel)),
-                React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column' },
-                    React.createElement("div", { id: adaptableContainerId }),
-                    React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }),
-                    React.createElement(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));
+        return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsxs(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column", children: [_jsx(Flex, { style: {
+                            color: 'var(--ab-dashboard__color)',
+                            background: 'var(--ab-dashboard__background)',
+                        }, children: _jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), _jsxs(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: [_jsx("div", { id: adaptableContainerId }), _jsx("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }), _jsx(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })] })] }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/DataChangeHistory/DataChangeHistoryStatusBarContent.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DataChangeHistoryViewPanelControl } from './DataChangeHistoryViewPanel';
 export const DataChangeHistoryStatusBarContent = () => {
-    return React.createElement(DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
+    return _jsx(DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
 };

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
@@ -29,23 +30,8 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const suspended = changeHistoryMode === 'SUSPENDED';
     const gap = props.gap ?? 'var(--ab-base-space)';
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
-    const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
-        disabled && (React.createElement(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
-        suspended && (React.createElement(ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
-        enabled && (React.createElement(ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
-        (enabled || suspended) && (React.createElement(ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
+    const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY }, children: [disabled && (_jsx(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })), suspended && (_jsx(ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })), enabled && (_jsx(ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })), (enabled || suspended) && (_jsx(ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))] }));
     const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-    const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
-        enabled && (React.createElement(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}` },
-            React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success" }, "Active"))),
-        suspended && (React.createElement(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
-            React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn" }, "Suspended"))),
-        disabled && (React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2" }, "Activate Data Tracking"))));
-    return (React.createElement(Flex, { flexDirection: 'row' },
-        buttonPanel,
-        statusPanel,
-        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-            React.createElement(SimpleButton, { onClick: handleOpenPopup, variant: "text" },
-                React.createElement(Icon, { name: "open-in-new" }),
-                React.createElement(Box, { className: "twa:ml-1" }, "Show")))));
+    const statusPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap }, children: [enabled && (_jsx(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}`, children: _jsx(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success", children: "Active" }) })), suspended && (_jsx(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}`, children: _jsx(Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn", children: "Suspended" }) })), disabled && (_jsx(Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2", children: "Activate Data Tracking" }))] }));
+    return (_jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel, _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsxs(SimpleButton, { onClick: handleOpenPopup, variant: "text", children: [_jsx(Icon, { name: "open-in-new" }), _jsx(Box, { className: "twa:ml-1", children: "Show" })] }) })] }));
 };

package/src/View/DataImport/DataImportPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import HelpBlock from '../../components/HelpBlock';
 import SimpleButton from '../../components/SimpleButton';
@@ -12,16 +13,11 @@ export const DataImportPopup = (props) => {
             setIsWizardOpen(true);
         }
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
-            React.createElement(Box, null,
-                React.createElement(HelpBlock, { className: "twa:mb-2 twa:text-3" }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
-                React.createElement(SimpleButton, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
-        isWizardOpen && (React.createElement(DataImportWizard, { onClose: () => {
-                setIsWizardOpen(false);
-                if (props?.popupParams == undefined ||
-                    ['Toolbar', 'ContextMenu', 'ColumnMenu', 'ModuleButton'].includes(props?.popupParams?.source)) {
-                    props.onClosePopup();
-                }
-            } }))));
+    return (_jsxs(_Fragment, { children: [_jsx(PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage, children: _jsxs(Box, { children: [_jsx(HelpBlock, { className: "twa:mb-2 twa:text-3", children: "Click the 'Import Data' button to Insert or Update data into AdapTable" }), _jsx(SimpleButton, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true), children: "Import Data" })] }) }), isWizardOpen && (_jsx(DataImportWizard, { onClose: () => {
+                    setIsWizardOpen(false);
+                    if (props?.popupParams == undefined ||
+                        ['Toolbar', 'ContextMenu', 'ColumnMenu', 'ModuleButton'].includes(props?.popupParams?.source)) {
+                        props.onClosePopup();
+                    }
+                } }))] }));
 };