@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useMemo, useEffect, useState } from 'react';
 import { Loader } from '../../../components/Loader';
@@ -16,7 +17,7 @@ export const isValidCustomSortOrder = (data) => {
     return true;
 };
 export const renderCustomSortValuesSummary = (data) => {
-    return React.createElement(TagList, { tags: data.SortedValues.map(String) });
+    return _jsx(TagList, { tags: data.SortedValues.map(String) });
 };
 export const CustomSortValuesWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
@@ -69,14 +70,10 @@ export const CustomSortValuesWizardSection = (props) => {
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
     const className = join(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
-    return (React.createElement(Tabs, { style: { height: '100%' }, className: className },
-        React.createElement(Tabs.Tab, null, "Sort Order"),
-        React.createElement(Tabs.Content, null,
-            isDistinctValuesLoading && React.createElement(Loader, null, "Loading"),
-            React.createElement(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
-                    props.onChange({
-                        ...data,
-                        SortedValues,
-                    });
-                } }))));
+    return (_jsxs(Tabs, { style: { height: '100%' }, className: className, children: [_jsx(Tabs.Tab, { children: "Sort Order" }), _jsxs(Tabs.Content, { children: [isDistinctValuesLoading && _jsx(Loader, { children: "Loading" }), _jsx(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
+                            props.onChange({
+                                ...data,
+                                SortedValues,
+                            });
+                        } })] })] }));
 };

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -35,14 +35,13 @@ export const CustomSortWizard = (props) => {
         }
         props.onFinishWizard(customSort);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 isValid: (data) => isValidCustomSortColumn(data, allCustomSorts),
                 renderSummary: renderCustomSortColumn,
                 details: 'Enter Name and select a Column to Sort',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                        React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts })));
+                    return (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts }) }));
                 },
                 title: 'Name & Column',
             },
@@ -51,15 +50,13 @@ export const CustomSortWizard = (props) => {
                 details: 'Specify Custom Sort order - drag selected items to modify order',
                 isValid: isValidCustomSortOrder,
                 renderSummary: renderCustomSortValuesSummary,
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(CustomSortValuesWizardSection, { onChange: setCustomSort }))),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(CustomSortValuesWizardSection, { onChange: setCustomSort }) })),
             },
             {
                 details: 'Select Custom Sort Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setCustomSort }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setCustomSort }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
@@ -67,8 +64,7 @@ export const CustomSortWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Custom Sort',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
             },
         ] }));

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { AdaptableButton } from '../../AdaptableState/Common/AdaptableButton';
 import { DashboardButtonContext } from '../../AdaptableOptions/DashboardOptions';
 import { AdaptableApi } from '../../Api/AdaptableApi';
@@ -8,4 +7,4 @@ export interface CustomDashboardButtonProps {
     api: AdaptableApi;
     accessLevel: AccessLevel;
 }
-export declare const CustomDashboardButton: (props: CustomDashboardButtonProps) => React.JSX.Element;
+export declare const CustomDashboardButton: (props: CustomDashboardButtonProps) => import("react").JSX.Element;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -1,30 +1,12 @@
-import * as React from 'react';
-import { useState } from 'react';
-import SimpleButton from '../../components/SimpleButton';
+import { jsx as _jsx } from "react/jsx-runtime";
 import kebabCase from '../../Utilities/utils/kebabCase';
-import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton';
 export const CustomDashboardButton = (props) => {
     const { button } = props;
-    const [componentRevision, setComponentRevision] = useState(1);
-    // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-    // with the next opportunity we should abstract it
     const dashboardContext = {
         ...props.api.internalApi.buildBaseContext(),
         dashboardState: props.api.dashboardApi.getDashboardState(),
     };
-    const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);
-    let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
-    let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
-    let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
-    if (button.hidden && button.hidden(button, dashboardContext)) {
-        return null;
-    }
-    const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton, { key: buttonLabel, "aria-label": buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => {
-            button.onClick?.(button, dashboardContext);
-            setTimeout(() => {
-                // mutate state to force a re-rendering
-                setComponentRevision(componentRevision + 1);
-            }, 16);
-        }, accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
+    const buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext) ?? '';
+    return (_jsx(AdaptableButtonView, { button: button, context: dashboardContext, api: props.api, accessLevel: props.accessLevel, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.dashboard, buttonKey: buttonLabel, ariaLabel: buttonLabel, className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)}` }));
 };

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;