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

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulkUpdateViewPanelControl = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Enums_1 = require("../../AdaptableState/Common/Enums");
 const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
@@ -41,7 +42,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
     render() {
         let statusColour = this.getStatusColour();
         let selectedColumn = this.props.BulkUpdateValidationResult.Column;
-        let previewPanel = (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
+        let previewPanel = ((0, jsx_runtime_1.jsx)(PreviewResultsPanel_1.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();
@@ -57,21 +58,15 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const messageStyle = UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour);
         const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
-        return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)(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_1.Flex, { className: (0, clsx_1.default)('twa:flex-1', {
-                    'twa:min-w-[100px]': !isToolbar,
-                    'twa:min-w-0': isToolbar,
-                }) },
-                React.createElement(BulkUpdateValueSelector_1.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_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1" },
-                React.createElement(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-center" },
-                    React.createElement(ButtonApply_1.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_1.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_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) }))));
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-1', {
+                        'twa:min-w-[100px]': !isToolbar,
+                        'twa:min-w-0': isToolbar,
+                    }), children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.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) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: (0, jsx_runtime_1.jsx)(ButtonApply_1.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' }) }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.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_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) })] })] }));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnDefinitionWizardSection = exports.isValidCalculatedColumnDefinition = exports.renderCalculatedColumnDefinitionSummary = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -13,14 +13,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
 const renderCalculatedColumnDefinitionSummary = (data) => {
-    return (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2" },
-        React.createElement(Flex_1.Box, null, "Column Identifier:"),
-        React.createElement(Flex_1.Box, null,
-            React.createElement(Tag_1.Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(React.Fragment, null,
-            React.createElement(Flex_1.Box, null, "Column Name:"),
-            React.createElement(Flex_1.Box, null,
-                React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId)))) : null));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Identifier:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId }) }), data.FriendlyName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Column Name:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
 };
 exports.renderCalculatedColumnDefinitionSummary = renderCalculatedColumnDefinitionSummary;
 const isValidCalculatedColumnDefinition = (data, api) => {
@@ -65,26 +58,12 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(Flex_1.Box, { "data-name": 'calculated-column-definition' },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column Details"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
-                            React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Column Header" },
-                            React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Column Header Tooltip" },
-                            React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
-                                    HeaderToolTip: e.target.value,
-                                }) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
-        ErrorMessage ? React.createElement(ErrorBox_1.default, { className: "twa:mt-2" }, ErrorMessage) : null));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": 'calculated-column-definition', children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Details" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "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 }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "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 }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header Tooltip", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                                HeaderToolTip: e.target.value,
+                                            }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] }) }) })] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: ErrorMessage }) : null] }));
 };
 exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnExpressionWizardSection = exports.isValidCalculatedColumnExpression = exports.renderCalculatedColumnExpressionSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
@@ -12,10 +11,7 @@ const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensio
 const Flex_1 = require("../../../components/Flex");
 const renderCalculatedColumnExpressionSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
-        "Column scalar expression:",
-        ' ',
-        React.createElement(CodeBlock_1.CodeBlock, null, api.internalApi.getAdaptableQueryExpressionText(data.Query))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Column scalar expression:", ' ', (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: api.internalApi.getAdaptableQueryExpressionText(data.Query) })] }));
 };
 exports.renderCalculatedColumnExpressionSummary = renderCalculatedColumnExpressionSummary;
 const isValidCalculatedColumnExpression = (data, api) => {
@@ -59,19 +55,17 @@ const CalculatedColumnExpressionWizardSection = (props) => {
         }
     };
     const columns = api.columnApi.internalApi.getQueryableColumnsForUIEditor();
-    return (React.createElement(Tabs_1.Tabs, { autoFocus: false, height: "100%" },
-        React.createElement(Tabs_1.Tabs.Tab, null, (0, StringExtensions_1.Humanize)(props.expressionType)),
-        React.createElement(Tabs_1.Tabs.Content, null, (() => {
-            switch (props.expressionType) {
-                case 'ScalarExpression':
-                    return (React.createElement(ExpressionEditor_1.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_1.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 ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, height: "100%", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: (0, StringExtensions_1.Humanize)(props.expressionType) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (() => {
+                    switch (props.expressionType) {
+                        case 'ScalarExpression':
+                            return ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.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 ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                    }
+                })() })] }));
 };
 exports.CalculatedColumnExpressionWizardSection = CalculatedColumnExpressionWizardSection;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnSettingsWizardSection = exports.isValidCalculatedColumnSettings = exports.renderCalculatedColumnSettingsSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -11,12 +12,12 @@ const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox
 const Tabs_1 = require("../../../components/Tabs");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const getCalculatedColumnSettingsTags_1 = require("../Utilities/getCalculatedColumnSettingsTags");
-const Select_1 = require("../../../components/Select");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag/Tag");
+const NewSelect_1 = require("../../../components/NewSelect");
 const renderCalculatedColumnSettingsSummary = (data) => {
     const options = (0, getCalculatedColumnSettingsTags_1.getCalculatedColumnSettingsTags)(data.CalculatedColumnSettings);
-    return React.createElement(Tag_1.TagList, { tags: options });
+    return (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: options });
 };
 exports.renderCalculatedColumnSettingsSummary = renderCalculatedColumnSettingsSummary;
 const isValidCalculatedColumnSettings = (data) => {
@@ -69,21 +70,10 @@ const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'boolean', label: 'Boolean' },
         { value: 'numberArray', label: 'NumberArray' },
     ];
-    return (React.createElement(Flex_1.Box, { "data-name": 'calculated-column-settings' },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column Settings"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
-                            React.createElement(Select_1.Select, { "data-name": "column-type", placeholder: "Select Data Type", options: options, value: dataType, onChange: (value) => handleDataTypeChange(value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Width" },
-                            React.createElement(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                                    Width: Number(e.target.value),
-                                }) })))))),
-        ErrorMessage ? React.createElement(ErrorBox_1.default, { className: "twa:mt-2" }, ErrorMessage) : null,
-        React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
-            // @ts-ignore CalculatedColumn has a broader DataType
-            settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": 'calculated-column-settings', children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Data Type", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Width", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                                Width: Number(e.target.value),
+                                            }) }) })] }) }) })] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: ErrorMessage }) : null, (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
+                // @ts-ignore CalculatedColumn has a broader DataType
+                settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })] }));
 };
 exports.CalculatedColumnSettingsWizardSection = CalculatedColumnSettingsWizardSection;

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

@@ -1,19 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnTypeWizardSection = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Tabs_1 = require("../../../components/Tabs");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
 const CalculatedColumnTypeWizardSection = (props) => {
-    return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Calculated Column Type"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                React.createElement(TypeRadio_1.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_1.TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })))));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Calculated Column Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })] }) })] }));
 };
 exports.CalculatedColumnTypeWizardSection = CalculatedColumnTypeWizardSection;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnWizard = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -68,18 +68,15 @@ const CalculatedColumnWizard = (props) => {
             });
         }
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.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(Flex_1.Box, { className: "twa:text-2" },
-                        "Expression Type: ",
-                        React.createElement(Tag_1.Tag, null, (0, StringExtensions_1.Humanize)(expressionType))));
+                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Expression Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, StringExtensions_1.Humanize)(expressionType) })] }));
                 },
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(CalculatedColumnTypeSection_1.CalculatedColumnTypeWizardSection, { type: expressionType, onTypeChange: handleExpressionTypeChange })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(CalculatedColumnTypeSection_1.CalculatedColumnTypeWizardSection, { type: expressionType, onTypeChange: handleExpressionTypeChange }) }));
                 },
             },
             {
@@ -88,8 +85,7 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnDefinitionWizardSection_1.isValidCalculatedColumnDefinition,
                 renderSummary: CalculatedColumnDefinitionWizardSection_1.renderCalculatedColumnDefinitionSummary,
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(CalculatedColumnDefinitionWizardSection_1.CalculatedColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(CalculatedColumnDefinitionWizardSection_1.CalculatedColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn }) }));
                 },
             },
             {
@@ -98,8 +94,7 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnExpressionWizardSection_1.isValidCalculatedColumnExpression,
                 renderSummary: CalculatedColumnExpressionWizardSection_1.renderCalculatedColumnExpressionSummary,
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                        React.createElement(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn }) }));
                 },
             },
             {
@@ -108,24 +103,21 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnSettingsWizardSection_1.isValidCalculatedColumnSettings,
                 renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn }) }));
                 },
             },
             {
                 details: 'Select Calculated Column Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setCalculatedColumn }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setCalculatedColumn }) })),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Calculated Column',
                 render: () => {
-                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

package/src/View/CellSummary/CellSummaryDetails.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CellSummaryDetails = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
@@ -28,9 +29,7 @@ class CellSummaryDetails extends React.Component {
                 };
             });
         }
-        return (React.createElement(React.Fragment, null, this.props.CellSummary != null ? (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "Operation" },
-            React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: tableDOMProps, columns: columnsMap }))) : (React.createElement(EmptyContent_1.default, null,
-            React.createElement("p", null, "No cells are selected - please select some cells.")))));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.props.CellSummary != null ? ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: data, primaryKey: "Operation", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: tableDOMProps, columns: columnsMap }) })) : ((0, jsx_runtime_1.jsx)(EmptyContent_1.default, { children: (0, jsx_runtime_1.jsx)("p", { children: "No cells are selected - please select some cells." }) })) }));
     }
 }
 exports.CellSummaryDetails = CellSummaryDetails;

package/src/View/CellSummary/CellSummaryPopover.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CellSummaryPopover = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CellSummaryDetails_1 = require("./CellSummaryDetails");
 const CellSummaryPopover = (props) => {
-    return React.createElement(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: props.CellSummary });
+    return (0, jsx_runtime_1.jsx)(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: props.CellSummary });
 };
 exports.CellSummaryPopover = CellSummaryPopover;

package/src/View/CellSummary/CellSummaryPopup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CellSummaryPopup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
@@ -19,8 +20,7 @@ class CellSummaryPopupComponent extends React.Component {
         this.props.onCreateCellSummary();
     }
     render() {
-        return (React.createElement(PanelWithButton_1.PanelWithButton, { className: "twa:p-0!", variant: "primary", headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: this.props.CellSummary })));
+        return ((0, jsx_runtime_1.jsx)(PanelWithButton_1.PanelWithButton, { className: "twa:p-0!", variant: "primary", headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsx)(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: this.props.CellSummary }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/CellSummary/CellSummaryStatusBarSubPanelPopover.js

@@ -1,20 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CellSummaryStatusBarSubPanelPopover = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CellSummaryDetails_1 = require("./CellSummaryDetails");
 const react_redux_1 = require("react-redux");
 const CellSummaryStatusBarSubPanelPopover = () => {
     const cellSummary = (0, react_redux_1.useSelector)((state) => state.Internal.CellSummary.CellSummaryInfo);
-    const summary = React.createElement(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: cellSummary });
+    const summary = (0, jsx_runtime_1.jsx)(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: cellSummary });
     return cellSummary && cellSummary.Count ? (summary) : (
     // the extra wrapper is added because the empty text is rendered
     // inside a  EmptyContent, hat has position absolute
-    (React.createElement(
+    ((0, jsx_runtime_1.jsx)(
         "div",
-        { style: { position: 'relative', width: '100%', height: 80 } },
-        summary
+        { style: { position: 'relative', width: '100%', height: 80 }, children: summary }
     )));
 };
 exports.CellSummaryStatusBarSubPanelPopover = CellSummaryStatusBarSubPanelPopover;

package/src/View/CellSummary/CellSummaryStatusPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CellSummaryStatusPanel = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -31,6 +32,6 @@ const CellSummaryStatusPanel = () => {
         checkSelectedCells();
         return () => cleanupEvent?.();
     }, []);
-    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, icon: module.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover_1.CellSummaryStatusBarSubPanelPopover, popoverMinWidth: 360 }));
+    return ((0, jsx_runtime_1.jsx)(StatusBarPanel_1.StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, icon: module.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover_1.CellSummaryStatusBarSubPanelPopover, popoverMinWidth: 360 }));
 };
 exports.CellSummaryStatusPanel = CellSummaryStatusPanel;

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CellSummaryViewPanelControl = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
@@ -11,9 +12,9 @@ const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const react_redux_1 = require("react-redux");
-const Select_1 = require("../../components/Select");
 const Flex_1 = require("../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const NewSelect_1 = require("../../components/NewSelect");
 class CellSummaryViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -47,24 +48,19 @@ class CellSummaryViewPanelComponent extends React.Component {
                     label: operationDefinition.operationName,
                 };
             });
-        let cellSummaryPopover = React.createElement(CellSummaryPopover_1.CellSummaryPopover, { CellSummary: this.props.CellSummary });
+        let cellSummaryPopover = (0, jsx_runtime_1.jsx)(CellSummaryPopover_1.CellSummaryPopover, { CellSummary: this.props.CellSummary });
         let shouldDisable = this.props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY ||
             this.props.CellSummary == null;
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const operationValue = this.getOperationValue() ?? 'N/A';
-        return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
                 'twa:min-w-[215px] twa:max-w-[215px] twa:w-[215px] twa:flex-nowrap': isToolbar,
                 'twa:flex-1 twa:flex-wrap': !isToolbar,
-            }) },
-            React.createElement(Flex_1.Flex, { className: "twa:flex-1" },
-                React.createElement(Select_1.Select, { "aria-label": "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
-            React.createElement(Flex_1.Flex, { className: "twa:items-center twa:gap-1" }, React.createElement(React.Fragment, null,
-                React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
-                        'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
-                        'twa:flex-1 twa:text-color-text-on-primary twa:justify-center': isToolbar,
-                    }) }, operationValue),
-                React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })))));
+            }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:items-center twa:gap-1", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
+                                    'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
+                                    'twa:flex-1 twa:text-color-text-on-primary twa:justify-center': isToolbar,
+                                }), children: operationValue }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })] }) })] }));
     }
     checkSelectedCells() {
         this.props.onCreateCellSummary();

package/src/View/Charting/ChartingStatusBarPopover.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartingStatusBarPopover = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const useChartingElements_1 = require("./useChartingElements");
@@ -15,12 +15,6 @@ const ChartingStatusBarPopover = (props) => {
         accessLevel: accessLevel,
         size: 'small',
     });
-    return (React.createElement(Flex_1.Flex, { className: "twa:w-full", alignItems: "center" },
-        React.createElement(Flex_1.Box, null, chartSelector),
-        containerSelector && React.createElement(Flex_1.Box, { className: "twa:ml-1" }, containerSelector),
-        React.createElement(Flex_1.Box, { className: "twa:ml-1" },
-            chartButton,
-            deleteButton,
-            editButton)));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:w-full", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: chartSelector }), containerSelector && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: containerSelector }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-1", children: [chartButton, deleteButton, editButton] })] }));
 };
 exports.ChartingStatusBarPopover = ChartingStatusBarPopover;

package/src/View/Charting/ChartingViewPanel.js

@@ -1,30 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartingViewPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const useChartingElements_1 = require("./useChartingElements");
 const Flex_1 = require("../../components/Flex");
 const ChartingViewPanel = (props) => {
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = (0, useChartingElements_1.useChartingElements)({ elementType, accessLevel: props.accessLevel });
     if (elementType === 'DashboardToolbar') {
-        return (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
-            React.createElement(Flex_1.Box, null, chartSelector),
-            containerSelector && React.createElement(Flex_1.Box, { className: "twa:ml-1" }, containerSelector),
-            React.createElement(Flex_1.Box, { className: "twa:ml-1" },
-                chartButton,
-                deleteButton,
-                editButton)));
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: chartSelector }), containerSelector && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: containerSelector }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:ml-1", children: [chartButton, deleteButton, editButton] })] }));
     }
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full" },
-        React.createElement(Flex_1.Box, { className: "twa:mb-1" }, chartSelector),
-        containerSelector && React.createElement(Flex_1.Box, { className: "twa:mb-1" }, containerSelector),
-        React.createElement(Flex_1.Box, null,
-            chartButton,
-            " ",
-            deleteButton,
-            " ",
-            editButton)));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-1", children: chartSelector }), containerSelector && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-1", children: containerSelector }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [chartButton, " ", deleteButton, " ", editButton] })] }));
 };
 exports.ChartingViewPanel = ChartingViewPanel;

package/src/View/Charting/ChartingWizard/AgChargingWizard/AgChargingWizard.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgChargingWizard = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -18,28 +19,25 @@ const AgChargingWizard = (props) => {
         adaptable.api.chartingApi.editChartDefinition(chartDefinition);
         props.onFinishWizard(chartDefinition);
     }, [chartDefinition]);
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Chart Settings',
                 isValid: SettingsSection_1.isSettingsValid,
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
             },
             {
                 details: 'Select Chart Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setChartDefinition }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setChartDefinition }) })),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 title: 'Preview Chart',
                 details: 'Chart Preview',
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(PreviewChartSection_1.PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
             },
         ] }));
 };