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

package/src/View/Alert/Wizard/AlertWizard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -8,8 +8,10 @@ import { isValidAlertRules } from './isValidAlertRules';
 import { AlertBehaviourWizardSection, renderAlertBehaviourWizardSummary, } from './AlertBehaviourWizardSection';
 import { ALERT_DEFAULT_MESSAGE_TYPE } from '../../../Utilities/Constants/ObjectDefaultConstants';
 import { AlertMessageWizardSection, renderAlertMessageSummary } from './AlertMessageWizardSection';
+import { isValidAlertMessage } from './isValidAlertMessage';
 import { renderScopeSummary } from './BaseAlertScopeWizardSection';
 import { isScopeValid } from '../../Components/NewScopeComponent';
+import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as AlertRedux from '../../../Redux/ActionsReducers/AlertRedux';
@@ -20,6 +22,7 @@ import { AlertType, getAlertType } from '../Utilities/getAlertType';
 import { mapAlertDefinition } from '../Utilities/mapAlertDefinition';
 import { getDefaultAlertDefinition } from '../Utilities/getDefaultAlertDefinition';
 import { AlertNotificationWizardSection, renderAlertNotificationSummary, } from './AlertNotificationWizardSection';
+import { AlertScheduledWizardSection, isScheduledAlertTimeValid, renderAlertScheduledSummary, } from './AlertScheduledWizardSection';
 import { Box } from '../../../components/Flex';
 export const AlertWizard = (props) => {
     const { api } = useAdaptable();
@@ -29,15 +32,20 @@ export const AlertWizard = (props) => {
         const alertDefinition = props.data
             ? cloneObject(props.data)
             : ObjectFactory.CreateEmptyAlertDefinition();
-        if (!alertDefinition.Rule?.BooleanExpression &&
-            !alertDefinition.Rule?.ObservableExpression &&
-            !alertDefinition.Rule?.AggregatedBooleanExpression &&
-            !alertDefinition.Rule?.Predicates) {
+        const initialType = getAlertType(alertDefinition);
+        if (initialType !== AlertType.Scheduled &&
+            'Rule' in alertDefinition &&
+            !alertDefinition.Rule.BooleanExpression &&
+            !alertDefinition.Rule.ObservableExpression &&
+            !alertDefinition.Rule.AggregatedBooleanExpression &&
+            !alertDefinition.Rule.Predicates) {
             alertDefinition.Rule = {
                 BooleanExpression: '',
             };
         }
-        if (props.popupParams?.column && props.popupParams?.action === 'New') {
+        if (props.popupParams?.column &&
+            props.popupParams?.action === 'New' &&
+            'Scope' in alertDefinition) {
             alertDefinition.Scope = {
                 ColumnIds: [props.popupParams.column.columnId],
             };
@@ -69,70 +77,67 @@ export const AlertWizard = (props) => {
         setAlertType(newAlertType);
         doSetAlertDefinition(getDefaultAlertDefinition(alertDefinition, newAlertType));
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Name & Type',
                 isValid: isSettingsValid,
-                details: (React.createElement(React.Fragment, null,
-                    "Enter Name and select ",
-                    React.createElement("b", null, "what"),
-                    " type of change in AdapTable will cause the Alert to fire")),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }))),
+                details: (_jsxs(_Fragment, { children: ["Enter Name and select ", _jsx("b", { children: "what" }), " type of change in AdapTable will cause the Alert to fire"] })),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }) })),
                 renderSummary: () => renderAlertTypeSummary(alertType),
             },
+            {
+                title: 'Schedule',
+                isVisible: () => alertType === AlertType.Scheduled,
+                isValid: (data) => isScheduledAlertTimeValid(data),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertScheduledWizardSection, { onChange: setAlertDefinition }) })),
+                renderSummary: renderAlertScheduledSummary,
+            },
             {
                 title: 'Trigger',
                 isVisible: () => alertType === AlertType.DataChange || alertType == AlertType.Validation,
-                details: (React.createElement(React.Fragment, null,
-                    "Specify ",
-                    React.createElement("b", null, "where"),
-                    " data changes should trigger the Alert")),
-                isValid: isScopeValid,
-                render: () => (React.createElement(AlertScopeWizardSection, { alertType: alertType, onChange: setAlertDefinition })),
+                details: (_jsxs(_Fragment, { children: ["Specify ", _jsx("b", { children: "where" }), " data changes should trigger the Alert"] })),
+                isValid: (data) => isRuleBasedAlertDefinition(data) ? isScopeValid(data) : true,
+                render: () => (_jsx(AlertScopeWizardSection, { alertType: alertType, onChange: setAlertDefinition })),
                 renderSummary: renderScopeSummary,
             },
             {
                 title: 'Rule',
+                isVisible: () => alertType !== AlertType.Scheduled,
                 details: getRuleStepDescription(alertType),
                 isValid: isValidAlertRules,
-                render: () => (React.createElement(AlertRulesWizardSection, { alertType: alertType, onChange: updateAlertDefinition, module: "alert" })),
+                render: () => (_jsx(AlertRulesWizardSection, { alertType: alertType, onChange: updateAlertDefinition, module: "alert" })),
                 renderSummary: renderAlertRulesSummary,
             },
             {
                 title: 'Message',
                 details: "Select the Alert's Message Type and Text",
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
-                renderSummary: renderAlertMessageSummary,
+                isValid: (data) => isValidAlertMessage(data, alertType),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
+                renderSummary: () => renderAlertMessageSummary(alertType),
             },
             {
                 title: 'Notification',
                 details: 'Create a Notification for the Alert',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(AlertNotificationWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertNotificationWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
                 renderSummary: renderAlertNotificationSummary,
             },
             {
                 title: behaviourSpelling,
                 details: 'Configure ' + behaviourSpelling + 's for the Alert',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
                 renderSummary: renderAlertBehaviourWizardSummary,
             },
             {
                 details: 'Select Alert Tags',
                 title: 'Tags',
                 isVisible: () => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setAlertDefinition }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setAlertDefinition }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review your Alert',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(OnePageWizardSummary, null))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
         ] }));

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.d.ts

@@ -1,4 +1,2 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../AdaptableState/AlertState';
-import { FlashingCellDefinition } from '../../../../types';
-export declare const renderScopeSummary: (data: AlertDefinition | FlashingCellDefinition) => React.JSX.Element;
+export declare const renderScopeSummary: () => React.JSX.Element;

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.js

@@ -1,22 +1,18 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../components/Flex';
 import clsx from 'clsx';
 import { TagList } from '../../../components/Tag/Tag';
-export const renderScopeSummary = (data) => {
-    const { api: { columnScopeApi: scopeApi }, } = useOnePageAdaptableWizardContext();
-    const columnsInScope = scopeApi.getColumnsInScope(data.Scope);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Box, null,
-            React.createElement(Box, { className: "twa:text-2" }, scopeApi.scopeIsAll(data.Scope)
-                ? 'Changes to any Column in the row will trigger an Alert'
-                : null)),
-        React.createElement(Box, { className: "twa:overflow-hidden" }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
-            React.createElement(Box, { className: clsx('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0') }, "Changes in selected columns will trigger an alert"),
-            columnsInScope.length ? (React.createElement(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null)) : null),
-        React.createElement(Box, null, 'DataTypes' in data.Scope ? (React.createElement(React.Fragment, null,
-            React.createElement(Box, { className: "twa:text-2 twa:mb-2" }, "Changes in Columns with these Data Types trigger an Alert"),
-            React.createElement(TagList, { tags: data.Scope.DataTypes.map((dataType) => {
-                    return `DataType: ${dataType}`;
-                }) }))) : null)));
+export const renderScopeSummary = () => {
+    const { data, api: { columnScopeApi: scopeApi }, } = useOnePageAdaptableWizardContext();
+    if (!('Scope' in data)) {
+        return null;
+    }
+    const scope = data.Scope;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsx(Box, { className: "twa:text-2", children: scopeApi.scopeIsAll(scope)
+                        ? 'Changes to any Column in the row will trigger an Alert'
+                        : null }) }), _jsx(Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: clsx('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0'), children: "Changes in selected columns will trigger an alert" }), columnsInScope.length ? (_jsx(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), _jsx(Box, { children: 'DataTypes' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: "Changes in Columns with these Data Types trigger an Alert" }), _jsx(TagList, { tags: scope.DataTypes.map((dataType) => {
+                                return `DataType: ${dataType}`;
+                            }) })] })) : null })] }));
 };

package/src/View/Alert/Wizard/isValidAlertMessage.d.ts

@@ -0,0 +1,3 @@
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
+import { AlertType } from '../Utilities/getAlertType';
+export declare const isValidAlertMessage: (alert: AlertDefinition, alertType: AlertType) => true | string;

package/src/View/Alert/Wizard/isValidAlertMessage.js

@@ -0,0 +1,14 @@
+import { AlertType } from '../Utilities/getAlertType';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+export const isValidAlertMessage = (alert, alertType) => {
+    if (alertType !== AlertType.Scheduled) {
+        return true;
+    }
+    if (StringExtensions.IsNullOrEmpty(alert.MessageHeader?.trim())) {
+        return 'A message header is required.';
+    }
+    if (StringExtensions.IsNullOrEmpty(alert.MessageText?.trim())) {
+        return 'A message body is required.';
+    }
+    return true;
+};

package/src/View/Alert/Wizard/isValidAlertRules.js

@@ -1,5 +1,9 @@
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
+import { isScheduledAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 export const isValidAlertRules = (alert, api, context) => {
+    if (isScheduledAlertDefinition(alert)) {
+        return true;
+    }
     if (!alert.Rule.Predicates?.length &&
         !alert.Rule.BooleanExpression &&
         !alert.Rule.ObservableExpression &&

package/src/View/BulkUpdate/BulkUpdatePopup.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 BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
@@ -37,34 +38,19 @@ class BulkUpdatePopupComponent extends React.Component {
         let showPanel = this.props.PreviewInfo &&
             StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
             StringExtensions.IsNotNullOrEmpty(globalValidationMessage);
-        let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
+        let previewPanel = showPanel ? (_jsx(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
         if (!col) {
             return null;
         }
-        return (React.createElement(PanelWithImage, { bodyProps: { className: 'twa:p-0' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary" },
-            col.dataType == 'date' ? (React.createElement(React.Fragment, null,
-                React.createElement(HelpBlock, { className: "twa:my-2" }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
-                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
-                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2" },
-                        React.createElement(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" })),
-                    React.createElement(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
-                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
-                            this.onApplyClick();
-                        }, variant: "raised", tone: "accent" }, "Apply Bulk Update")))) : (React.createElement(React.Fragment, null,
-                React.createElement(HelpBlock, { className: "twa:my-2" }, "Select an existing Column value from the dropdown, or enter a new value"),
-                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch" },
-                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1" },
-                        React.createElement(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" })),
-                    React.createElement(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
-                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
-                            hasDataTypeError, variant: "raised", tone: "accent", onClick: () => {
-                            this.onApplyClick();
-                        } }, "Apply Bulk Update"),
-                    ' ',
-                    hasDataTypeError && (React.createElement(AdaptablePopover, { headerText: 'Update Error', bodyText: [dataTypeErrorMessage], MessageType: 'Error' })),
-                    StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
-                        this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))))),
-            previewPanel));
+        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-0' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+                                        this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
+                                        this.onApplyClick();
+                                    }, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+                                        this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
+                                        hasDataTypeError, variant: "raised", tone: "accent", onClick: () => {
+                                        this.onApplyClick();
+                                    }, children: "Apply Bulk Update" }), ' ', hasDataTypeError && (_jsx(AdaptablePopover, { headerText: 'Update Error', bodyText: [dataTypeErrorMessage], MessageType: 'Error' })), StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
+                                    this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (_jsx(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))] })] })), previewPanel] }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { StatusColour } from '../../AdaptableState/Common/Enums';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
@@ -37,7 +38,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
     render() {
         let statusColour = this.getStatusColour();
         let selectedColumn = this.props.BulkUpdateValidationResult.Column;
-        let previewPanel = (React.createElement(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
+        let previewPanel = (_jsx(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
         const valueSelectorDisabled = this.props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY ||
             !this.props.BulkUpdateValidationResult.IsValid ||
             this.props.api.layoutApi.isCurrentLayoutPivot();
@@ -53,21 +54,15 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const messageStyle = UIHelper.getMessageTypeByStatusColour(statusColour);
         const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
-        return (React.createElement(Flex, { className: clsx(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+        return (_jsxs(Flex, { className: clsx(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
                 'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
-            }), flexWrap: isToolbar ? 'nowrap' : 'wrap' },
-            React.createElement(Flex, { className: clsx('twa:flex-1', {
-                    'twa:min-w-[100px]': !isToolbar,
-                    'twa:min-w-0': isToolbar,
-                }) },
-                React.createElement(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
-                        listMinWidth: 160,
-                    }, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
-            React.createElement(Flex, { className: "twa:flex-shrink-0 twa:gap-1" },
-                React.createElement(Flex, { className: "twa:flex twa:box-border twa:items-center" },
-                    React.createElement(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel }, 'Apply')),
-                React.createElement(AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) }))));
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [_jsx(Flex, { className: clsx('twa:flex-1', {
+                        'twa:min-w-[100px]': !isToolbar,
+                        'twa:min-w-0': isToolbar,
+                    }), children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
+                            listMinWidth: 160,
+                        }, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) }) }), _jsxs(Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [_jsx(Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: _jsx(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel, children: 'Apply' }) }), _jsx(AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -9,14 +9,7 @@ import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { Box, Flex } from '../../../components/Flex';
 export const renderCalculatedColumnDefinitionSummary = (data) => {
-    return (React.createElement(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2" },
-        React.createElement(Box, null, "Column Identifier:"),
-        React.createElement(Box, null,
-            React.createElement(Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(React.Fragment, null,
-            React.createElement(Box, null, "Column Name:"),
-            React.createElement(Box, null,
-                React.createElement(Tag, null, data.FriendlyName ?? data.ColumnId)))) : null));
+    return (_jsxs(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [_jsx(Box, { children: "Column Identifier:" }), _jsx(Box, { children: _jsx(Tag, { children: data.ColumnId }) }), data.FriendlyName ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: "Column Name:" }), _jsx(Box, { children: _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
 };
 export const isValidCalculatedColumnDefinition = (data, api) => {
     const columns = api.columnApi.getColumns();
@@ -59,25 +52,11 @@ export const CalculatedColumnDefinitionWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(Box, { "data-name": 'calculated-column-definition' },
-        React.createElement(Tabs, { autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Column Details"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, null,
-                        React.createElement(FormRow, { label: "Column Name" },
-                            React.createElement(Input, { "data-name": "column-id", value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange })),
-                        React.createElement(FormRow, { label: "Column Header" },
-                            React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                    setColumnNameFocused(true);
-                                }, onBlur: () => {
-                                    setColumnNameFocused(false);
-                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange })),
-                        React.createElement(FormRow, { label: "Column Header Tooltip" },
-                            React.createElement(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
-                                    HeaderToolTip: e.target.value,
-                                }) })),
-                        React.createElement(FormRow, { label: "" },
-                            React.createElement(CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
-        ErrorMessage ? React.createElement(ErrorBox, { className: "twa:mt-2" }, ErrorMessage) : null));
+    return (_jsxs(Box, { "data-name": 'calculated-column-definition', children: [_jsxs(Tabs, { autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Column Details" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Column Name", children: _jsx(Input, { "data-name": "column-id", value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) }), _jsx(FormRow, { label: "Column Header", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+                                                setColumnNameFocused(true);
+                                            }, onBlur: () => {
+                                                setColumnNameFocused(false);
+                                            }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) }), _jsx(FormRow, { label: "Column Header Tooltip", children: _jsx(Input, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                                HeaderToolTip: e.target.value,
+                                            }) }) }), _jsx(FormRow, { label: "", children: _jsx(CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] }) }) })] }), ErrorMessage ? _jsx(ErrorBox, { className: "twa:mt-2", children: ErrorMessage }) : null] }));
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { ExpressionEditor } from '../../../components/ExpressionEditor';
@@ -8,10 +8,7 @@ import { Humanize } from '../../../Utilities/Extensions/StringExtensions';
 import { Box } from '../../../components/Flex';
 export const renderCalculatedColumnExpressionSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { className: "twa:text-2" },
-        "Column scalar expression:",
-        ' ',
-        React.createElement(CodeBlock, null, api.internalApi.getAdaptableQueryExpressionText(data.Query))));
+    return (_jsxs(Box, { className: "twa:text-2", children: ["Column scalar expression:", ' ', _jsx(CodeBlock, { children: api.internalApi.getAdaptableQueryExpressionText(data.Query) })] }));
 };
 export const isValidCalculatedColumnExpression = (data, api) => {
     const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
@@ -53,18 +50,16 @@ export const CalculatedColumnExpressionWizardSection = (props) => {
         }
     };
     const columns = api.columnApi.internalApi.getQueryableColumnsForUIEditor();
-    return (React.createElement(Tabs, { autoFocus: false, height: "100%" },
-        React.createElement(Tabs.Tab, null, Humanize(props.expressionType)),
-        React.createElement(Tabs.Content, null, (() => {
-            switch (props.expressionType) {
-                case 'ScalarExpression':
-                    return (React.createElement(ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: columns, fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
-                case 'AggregatedScalarExpression':
-                case 'CumulativeAggregatedExpression':
-                case 'QuantileAggregatedExpression':
-                    return (React.createElement(ExpressionEditor, { type: getEditorType(props.expressionType), module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: columns, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
-                default:
-                    return React.createElement(React.Fragment, null);
-            }
-        })())));
+    return (_jsxs(Tabs, { autoFocus: false, height: "100%", children: [_jsx(Tabs.Tab, { children: Humanize(props.expressionType) }), _jsx(Tabs.Content, { children: (() => {
+                    switch (props.expressionType) {
+                        case 'ScalarExpression':
+                            return (_jsx(ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: columns, fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
+                        case 'AggregatedScalarExpression':
+                        case 'CumulativeAggregatedExpression':
+                        case 'QuantileAggregatedExpression':
+                            return (_jsx(ExpressionEditor, { type: getEditorType(props.expressionType), module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: columns, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api }));
+                        default:
+                            return _jsx(_Fragment, {});
+                    }
+                })() })] }));
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
@@ -7,12 +8,12 @@ import ErrorBox from '../../../components/ErrorBox';
 import { Tabs } from '../../../components/Tabs';
 import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
 import { getCalculatedColumnSettingsTags } from '../Utilities/getCalculatedColumnSettingsTags';
-import { Select } from '../../../components/Select';
 import { Box, Flex } from '../../../components/Flex';
 import { TagList } from '../../../components/Tag/Tag';
+import { SingleSelect } from '../../../components/NewSelect';
 export const renderCalculatedColumnSettingsSummary = (data) => {
     const options = getCalculatedColumnSettingsTags(data.CalculatedColumnSettings);
-    return React.createElement(TagList, { tags: options });
+    return _jsx(TagList, { tags: options });
 };
 export const isValidCalculatedColumnSettings = (data) => {
     if (!data.CalculatedColumnSettings?.DataType) {
@@ -63,20 +64,9 @@ export const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'boolean', label: 'Boolean' },
         { value: 'numberArray', label: 'NumberArray' },
     ];
-    return (React.createElement(Box, { "data-name": 'calculated-column-settings' },
-        React.createElement(Tabs, { autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Column Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, null,
-                        React.createElement(FormRow, { label: "Data Type" },
-                            React.createElement(Select, { "data-name": "column-type", placeholder: "Select Data Type", options: options, value: dataType, onChange: (value) => handleDataTypeChange(value) })),
-                        React.createElement(FormRow, { label: "Width" },
-                            React.createElement(Input, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                                    Width: Number(e.target.value),
-                                }) })))))),
-        ErrorMessage ? React.createElement(ErrorBox, { className: "twa:mt-2" }, ErrorMessage) : null,
-        React.createElement(SpecialColumnSettingsWizardStep, { isEditable: false, 
-            // @ts-ignore CalculatedColumn has a broader DataType
-            settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
+    return (_jsxs(Box, { "data-name": 'calculated-column-settings', children: [_jsxs(Tabs, { autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Column Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Data Type", children: _jsx(SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value) }) }), _jsx(FormRow, { label: "Width", children: _jsx(Input, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                                Width: Number(e.target.value),
+                                            }) }) })] }) }) })] }), ErrorMessage ? _jsx(ErrorBox, { className: "twa:mt-2", children: ErrorMessage }) : null, _jsx(SpecialColumnSettingsWizardStep, { isEditable: false, 
+                // @ts-ignore CalculatedColumn has a broader DataType
+                settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })] }));
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnTypeSection.js

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tabs } from '../../../components/Tabs';
 import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Flex } from '../../../components/Flex';
 export const CalculatedColumnTypeWizardSection = (props) => {
-    return (React.createElement(Tabs, null,
-        React.createElement(Tabs.Tab, null, "Calculated Column Type"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }),
-                React.createElement(TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }),
-                React.createElement(TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }),
-                React.createElement(TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })))));
+    return (_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Calculated Column Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }), _jsx(TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }), _jsx(TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }), _jsx(TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })] }) })] }));
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
@@ -64,18 +64,15 @@ export const CalculatedColumnWizard = (props) => {
             });
         }
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Type',
                 details: 'Select Type of Calculated Column',
                 renderSummary: () => {
-                    return (React.createElement(Box, { className: "twa:text-2" },
-                        "Expression Type: ",
-                        React.createElement(Tag, null, Humanize(expressionType))));
+                    return (_jsxs(Box, { className: "twa:text-2", children: ["Expression Type: ", _jsx(Tag, { children: Humanize(expressionType) })] }));
                 },
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(CalculatedColumnTypeWizardSection, { type: expressionType, onTypeChange: handleExpressionTypeChange })));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(CalculatedColumnTypeWizardSection, { type: expressionType, onTypeChange: handleExpressionTypeChange }) }));
                 },
             },
             {
@@ -84,8 +81,7 @@ export const CalculatedColumnWizard = (props) => {
                 isValid: isValidCalculatedColumnDefinition,
                 renderSummary: renderCalculatedColumnDefinitionSummary,
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(CalculatedColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(CalculatedColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn }) }));
                 },
             },
             {
@@ -94,8 +90,7 @@ export const CalculatedColumnWizard = (props) => {
                 isValid: isValidCalculatedColumnExpression,
                 renderSummary: renderCalculatedColumnExpressionSummary,
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                        React.createElement(CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn })));
+                    return (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn }) }));
                 },
             },
             {
@@ -104,24 +99,21 @@ export const CalculatedColumnWizard = (props) => {
                 isValid: isValidCalculatedColumnSettings,
                 renderSummary: renderCalculatedColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn }) }));
                 },
             },
             {
                 details: 'Select Calculated Column Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setCalculatedColumn }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setCalculatedColumn }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Calculated Column',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

package/src/View/CellSummary/CellSummaryDetails.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import EmptyContent from '../../components/EmptyContent';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
@@ -24,8 +25,6 @@ export class CellSummaryDetails extends React.Component {
                 };
             });
         }
-        return (React.createElement(React.Fragment, null, this.props.CellSummary != null ? (React.createElement(DataSource, { data: data, primaryKey: "Operation" },
-            React.createElement(InfiniteTableGrid, { domProps: tableDOMProps, columns: columnsMap }))) : (React.createElement(EmptyContent, null,
-            React.createElement("p", null, "No cells are selected - please select some cells.")))));
+        return (_jsx(_Fragment, { children: this.props.CellSummary != null ? (_jsx(DataSource, { data: data, primaryKey: "Operation", children: _jsx(InfiniteTableGrid, { domProps: tableDOMProps, columns: columnsMap }) })) : (_jsx(EmptyContent, { children: _jsx("p", { children: "No cells are selected - please select some cells." }) })) }));
     }
 }