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

package/src/View/Dashboard/CustomToolbar.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomToolbarWrapper = exports.CustomToolbarCmp = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
 const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
+const AdaptableFormComponent_1 = require("../../components/AdaptableFormComponent/AdaptableFormComponent");
+const AdaptableForm_1 = require("../../AdaptableState/Common/AdaptableForm");
 const CustomToolbarCmp = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     // dummy object which is used to force a re-render of the toolbar
@@ -17,6 +18,56 @@ const CustomToolbarCmp = (props) => {
     const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
     const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
     const componentContainerRef = (0, react_1.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] = (0, react_1.useState)(() => props.customToolbar.toolbarForm
+        ? (0, AdaptableForm_1.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.
+    (0, react_1.useEffect)(() => {
+        if (!props.customToolbar.toolbarForm) {
+            return;
+        }
+        const resetter = () => {
+            const next = (0, AdaptableForm_1.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
+            ? (0, AdaptableForm_1.validateAdaptableForm)(props.customToolbar.toolbarForm, data, baseCtx)
+            : {};
+        baseCtx.formErrors = formErrors;
+        baseCtx.formIsValid = Object.keys(formErrors).length === 0;
+        return baseCtx;
+    };
     (0, react_1.useLayoutEffect)(() => {
         const element = renderContentContainerRef.current;
         const adaptableApi = api;
@@ -61,45 +112,45 @@ 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(AdaptableButton_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.customToolbar.render && ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: dashboardContext, api: api, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolbar, rerenderOnClick: false, style: { marginLeft: index ? 'var(--ab-base-space)' : 0 }, onAfterClick: () => setComponentRevision(componentRevision + 1) }, index));
+                }) })), props.customToolbar.toolbarForm && ((0, jsx_runtime_1.jsx)("div", { id: formContainerId, className: `ab-CustomToolbar__form ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, children: (0, jsx_runtime_1.jsx)(AdaptableFormComponent_1.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 && ((0, jsx_runtime_1.jsx)("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}`, children: api.gridApi.getVariant() === 'react' ? ((0, jsx_runtime_1.jsx)(CustomReactFrameworkComponent, { adaptableApi: api })) : null }))] }));
 };
 exports.CustomToolbarCmp = CustomToolbarCmp;
 const CustomToolbarWrapper = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    return (React.createElement(PanelDashboard_1.PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'configure') !=
+    return ((0, jsx_runtime_1.jsx)(PanelDashboard_1.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(exports.CustomToolbarCmp, { ...props })));
+        }, accessLevel: api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard'), children: (0, jsx_runtime_1.jsx)(exports.CustomToolbarCmp, { ...props }) }));
 };
 exports.CustomToolbarWrapper = CustomToolbarWrapper;

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dashboard = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kebabCase_1 = tslib_1.__importDefault(require("../../Utilities/utils/kebabCase"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
-const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const Dashboard_1 = require("../../components/Dashboard");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
@@ -32,8 +32,7 @@ const DashboardComponent = (props) => {
             let customToolbar = customToolbars && customToolbars.find((ct) => ct.name == visibleToolbarName);
             if (customToolbar) {
                 if (dashboardAccessLevel != GeneralConstants_1.ACCESS_LEVEL_HIDDEN) {
-                    return (React.createElement(Flex_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
-                        React.createElement(CustomToolbar_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `ab-Dashboard__container ab-Dashboard__container--customToolbar`, children: (0, jsx_runtime_1.jsx)(CustomToolbar_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision }) }, customToolbar.name));
                 }
             }
             else {
@@ -44,9 +43,7 @@ const DashboardComponent = (props) => {
                         let moduleInfo = props.api.internalApi
                             .getModuleService()
                             .getModuleInfoByModule(moduleToolbarName);
-                        return (React.createElement(Flex_1.Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
-                            React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
-                                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
+                        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}`, children: (0, jsx_runtime_1.jsx)(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel, children: (0, jsx_runtime_1.jsx)(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: moduleToolbarName }) }) }, moduleToolbarName));
                     }
                     else {
                         props.api.logError('Cannot find Dashboard Control for ' + visibleToolbarName);
@@ -68,13 +65,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(AdaptableButton_1.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__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
+                    return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.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__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
                             ? {
                                 ...UIHelper_1.default.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
                                     'Success'),
                                 border: 0,
                             }
-                            : {} }));
+                            : {} }, menuItem.label));
                 }
             });
         }
@@ -86,13 +83,12 @@ const DashboardComponent = (props) => {
             .filter(Boolean);
         let customDashboardButtons = null;
         if (dashboardButtonsArray?.length) {
-            customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton_1.CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
+            customDashboardButtons = dashboardButtonsArray.map((button, index) => ((0, jsx_runtime_1.jsx)(CustomDashboardButton_1.CustomDashboardButton, { button: button, api: props.api, accessLevel: props.accessLevel }, `${button.label}-${index}`)));
         }
         return customDashboardButtons;
     };
     const renderQuickSearch = () => {
-        return (React.createElement(Flex_1.Box, { className: "twa:ml-2" },
-            React.createElement(QuickSearchInput_1.QuickSearchInput, { className: "ab-DashboardToolbar__QuickSearch__text", inputClassName: "twa:w-[7rem]" })));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(QuickSearchInput_1.QuickSearchInput, { className: "ab-DashboardToolbar__QuickSearch__text", inputClassName: "twa:w-[7rem]" }) }));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();
@@ -100,16 +96,14 @@ const DashboardComponent = (props) => {
         props.api.internalApi.getModuleService().isAdapTableModulePresent(ModuleConstants_1.QuickSearchModuleId);
     const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
     if (props.DashboardState.IsHidden) {
-        return React.createElement("div", null);
+        return (0, jsx_runtime_1.jsx)("div", {});
     }
-    return (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: React.createElement(PinnedDashboard_1.PinnedDashboard, null), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
+    return ((0, jsx_runtime_1.jsx)(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: (0, jsx_runtime_1.jsx)(PinnedDashboard_1.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);
@@ -118,14 +112,8 @@ const DashboardComponent = (props) => {
             else {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
-        }, left: React.createElement(React.Fragment, null,
-            React.createElement(AdaptableIconComponent_1.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(Dashboard_1.DashboardTab, { key: index, title: tab.Name }, renderTab(tab))))));
+        }, left: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }), dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(), dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()] }), right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(Dashboard_1.DashboardTab, { title: tab.Name, children: renderTab(tab) }, index))) }));
 };
 function mapStateToProps(state, ownProps) {
     return {

package/src/View/Dashboard/DashboardPopup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardPopup = exports.DashboardConfigView = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
@@ -70,29 +71,7 @@ class DashboardPopupComponent extends React.Component {
             return false;
         };
         const contentCls = '';
-        return (React.createElement(PopupPanel_1.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_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
-                areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
-                    React.createElement(Card_1.Card, null,
-                        React.createElement(Card_1.Card.Title, { gap: 8 }, "Display Settings"),
-                        React.createElement(Card_1.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_1.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_1.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_1.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_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
-                    React.createElement(Card_1.Card.Title, null, "Contents"),
-                    React.createElement(Card_1.Card.Body, { className: "twa:p-2" },
-                        React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
-                            React.createElement(Tabs_1.Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
-                            React.createElement(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars" }, "Tabs & Toolbars"),
-                            React.createElement(Tabs_1.Tabs.Tab, { value: "buttons" }, "Buttons"),
-                            React.createElement(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls },
-                                React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)),
-                            React.createElement(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls },
-                                React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                            React.createElement(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls },
-                                React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))))));
+        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [areDashboardSettingsVisible && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { gap: 8, children: "Display Settings" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { gap: 2, className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3", children: [(0, jsx_runtime_1.jsx)(ToggleButton_1.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 ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.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 ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.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] }) })] }) })), (0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Contents" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "pinned-toolbars", children: "Pinned Toolbars" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars", children: "Tabs & Toolbars" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "buttons", children: "Buttons" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls, children: (0, jsx_runtime_1.jsx)(PinnedToolbarsSelector_1.PinnedToolbarsSelector, {}) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls, children: (0, jsx_runtime_1.jsx)(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls, children: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardToolbarFactory = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const Types_1 = require("../../AdaptableState/Common/Types");
@@ -16,7 +17,7 @@ const SystemDashboardToolbarFactory = (props) => {
     const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.toolbarName);
     const moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(props.toolbarName);
     if (!moduleToolbarView) {
-        return React.createElement(React.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
     const moduleToolbarElement = React.createElement(moduleToolbarView, {
         viewType: 'Toolbar',
@@ -32,16 +33,16 @@ const CustomDashboardToolbarFactory = (props) => {
     const customToolbars = adaptable.api.dashboardApi.getCustomToolbars();
     const customToolbar = customToolbars && customToolbars.find((ct) => ct.name == props.toolbarName);
     if (customToolbar) {
-        return React.createElement(CustomToolbar_1.CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
+        return (0, jsx_runtime_1.jsx)(CustomToolbar_1.CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
     }
-    return React.createElement(React.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 };
 const DashboardToolbarFactory = (props) => {
     if (Types_1.ALL_MODULES.includes(props.toolbarName)) {
-        return React.createElement(SystemDashboardToolbarFactory, { toolbarName: props.toolbarName });
+        return (0, jsx_runtime_1.jsx)(SystemDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
     else {
-        return React.createElement(CustomDashboardToolbarFactory, { toolbarName: props.toolbarName });
+        return (0, jsx_runtime_1.jsx)(CustomDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
 };
 exports.DashboardToolbarFactory = DashboardToolbarFactory;

package/src/View/Dashboard/DashboardViewPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardViewPanelControl = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../components/CheckBox");
@@ -14,13 +15,7 @@ class DashboardViewPanelComponent extends React.Component {
     }
     render() {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            ' ',
-            ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox_1.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_1.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_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [' ', ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && ((0, jsx_runtime_1.jsx)(CheckBox_1.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 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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" })), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModuleToolbarWrapper = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
@@ -12,12 +12,12 @@ const ModuleToolbarWrapper = (props) => {
     const moduleFriendlyName = props.moduleInfo.FriendlyName;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const isConfigurable = moduleName !== 'OpenFin' && moduleName !== 'IPushPull';
-    return (React.createElement(PanelDashboard_1.PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureActionButton: isConfigurable, onConfigure: () => {
+    return ((0, jsx_runtime_1.jsx)(PanelDashboard_1.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 }));
 };
 exports.ModuleToolbarWrapper = ModuleToolbarWrapper;

package/src/View/Dashboard/PinnedDashboard.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PinnedDashboard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_redux_1 = require("react-redux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
@@ -13,12 +12,10 @@ 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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    return (React.createElement(Flex_1.Flex, { className: "ab-Dashboard__pinned twa:p-1" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(Flex_1.Box, { key: index, className: `twa:mr-1 twa:mb-1 ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
-            React.createElement(Flex_1.Box, { className: "ab-Dashboard__toolbar-content" },
-                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: toolbar }))));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "ab-Dashboard__pinned twa:p-1", children: pinnedToolbars.map((toolbar, index) => {
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mr-1 twa:mb-1 ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-Dashboard__toolbar-content", children: (0, jsx_runtime_1.jsx)(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: toolbar }) }) }, index));
+        }) }));
 };
 exports.PinnedDashboard = PinnedDashboard;

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PinnedToolbarsSelector = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ModuleManager_1 = require("../../components/DragAndDropContext/ModuleManager");
@@ -35,7 +36,7 @@ const PinnedToolbarsSelector = (props) => {
             },
         ];
     }, [pinnedToolbars]);
-    return (React.createElement(ModuleManager_1.ModuleManager, { className: "twa:flex-1", permittedActions: {
+    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { className: "twa:flex-1", permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataChangeHistoryGrid = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../AdaptableContext");
 const usePrevious_1 = tslib_1.__importDefault(require("../../components/utils/usePrevious"));
@@ -76,7 +76,7 @@ const DataChangeHistoryGrid = (props) => {
             remove: removedRows,
         });
     }, [changeHistoryLog]);
-    return React.createElement(React.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 };
 exports.DataChangeHistoryGrid = DataChangeHistoryGrid;
 const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow) => {

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataChangeHistoryPopup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
@@ -26,26 +27,9 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (React.createElement(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2" },
-            disabled && (React.createElement(ButtonPlay_1.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_1.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_1.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_1.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 = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.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 && ((0, jsx_runtime_1.jsx)(ButtonPause_1.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) && ((0, jsx_runtime_1.jsx)(ButtonStop_1.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_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center' },
-            enabled && (React.createElement(React.Fragment, null,
-                React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold" }, "Active"),
-                !!activationTime && (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:italic" },
-                    "(since ",
-                    (0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }),
-                    ")")))),
-            suspended && (React.createElement(React.Fragment, null,
-                React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold" }, "Suspended"),
-                !!suspensionTime && (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:italic" },
-                    "(since ",
-                    (0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }),
-                    ")")))),
-            disabled && React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })));
+        const statusPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })] }));
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = this.props.changeHistoryLog[changeKey];
             if (changeToBeUndone) {
@@ -62,19 +46,10 @@ class DataChangeHistoryPopupComponent extends React.Component {
             .getAdaptableInstance()
             .agGridThemeAdapter.getAgGridThemeMode();
         const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
-        return (React.createElement(PopupPanel_1.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_1.Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column" },
-                React.createElement(Flex_1.Flex, { style: {
-                        color: 'var(--ab-dashboard__color)',
-                        background: 'var(--ab-dashboard__background)',
-                    } },
-                    React.createElement(Flex_1.Flex, { flexDirection: 'row' },
-                        buttonPanel,
-                        statusPanel)),
-                React.createElement(Flex_1.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_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));
+        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
+                            color: 'var(--ab-dashboard__color)',
+                            background: 'var(--ab-dashboard__background)',
+                        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: [(0, jsx_runtime_1.jsx)("div", { id: adaptableContainerId }), (0, jsx_runtime_1.jsx)("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }), (0, jsx_runtime_1.jsx)(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })] })] }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/DataChangeHistory/DataChangeHistoryStatusBarContent.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataChangeHistoryStatusBarContent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistoryViewPanel");
 const DataChangeHistoryStatusBarContent = () => {
-    return React.createElement(DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
+    return (0, jsx_runtime_1.jsx)(DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
 };
 exports.DataChangeHistoryStatusBarContent = DataChangeHistoryStatusBarContent;

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataChangeHistoryViewPanelControl = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
@@ -33,24 +34,9 @@ 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_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
-        disabled && (React.createElement(ButtonPlay_1.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_1.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_1.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_1.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 = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY }, children: [disabled && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })), suspended && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.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 && ((0, jsx_runtime_1.jsx)(ButtonPause_1.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) && ((0, jsx_runtime_1.jsx)(ButtonStop_1.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_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
-        enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}` },
-            React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success" }, "Active"))),
-        suspended && (React.createElement(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}` },
-            React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn" }, "Suspended"))),
-        disabled && (React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2" }, "Activate Data Tracking"))));
-    return (React.createElement(Flex_1.Flex, { flexDirection: 'row' },
-        buttonPanel,
-        statusPanel,
-        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-            React.createElement(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text" },
-                React.createElement(icons_1.Icon, { name: "open-in-new" }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-1" }, "Show")))));
+    const statusPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap }, children: [enabled && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success", children: "Active" }) })), suspended && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn", children: "Suspended" }) })), disabled && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2", children: "Activate Data Tracking" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "open-in-new" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: "Show" })] }) })] }));
 };
 exports.DataChangeHistoryViewPanelControl = DataChangeHistoryViewPanelControl;