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

package/src/View/CellSummary/CellSummaryPopover.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CellSummaryDetails } from './CellSummaryDetails';
 export const CellSummaryPopover = (props) => {
-    return React.createElement(CellSummaryDetails, { CellSummary: props.CellSummary });
+    return _jsx(CellSummaryDetails, { CellSummary: props.CellSummary });
 };

package/src/View/CellSummary/CellSummaryPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
@@ -15,8 +16,7 @@ class CellSummaryPopupComponent extends React.Component {
         this.props.onCreateCellSummary();
     }
     render() {
-        return (React.createElement(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, { CellSummary: this.props.CellSummary })));
+        return (_jsx(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: _jsx(CellSummaryDetails, { CellSummary: this.props.CellSummary }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/CellSummary/CellSummaryStatusBarSubPanelPopover.js

@@ -1,15 +1,14 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CellSummaryDetails } from './CellSummaryDetails';
 import { useSelector } from 'react-redux';
 export const CellSummaryStatusBarSubPanelPopover = () => {
     const cellSummary = useSelector((state) => state.Internal.CellSummary.CellSummaryInfo);
-    const summary = React.createElement(CellSummaryDetails, { CellSummary: cellSummary });
+    const summary = _jsx(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(
+    (_jsx(
         "div",
-        { style: { position: 'relative', width: '100%', height: 80 } },
-        summary
+        { style: { position: 'relative', width: '100%', height: 80 }, children: summary }
     )));
 };

package/src/View/CellSummary/CellSummaryStatusPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { useAdaptable } from '../AdaptableContext';
@@ -27,5 +28,5 @@ export const CellSummaryStatusPanel = () => {
         checkSelectedCells();
         return () => cleanupEvent?.();
     }, []);
-    return (React.createElement(StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, icon: module.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover, popoverMinWidth: 360 }));
+    return (_jsx(StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, icon: module.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover, popoverMinWidth: 360 }));
 };

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import { SummaryOperation } from '../../AdaptableState/Common/Enums';
@@ -7,9 +8,9 @@ import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { AdaptablePopover } from '../AdaptablePopover';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { connect } from 'react-redux';
-import { Select } from '../../components/Select';
 import { Flex } from '../../components/Flex';
 import clsx from 'clsx';
+import { SingleSelect } from '../../components/NewSelect';
 class CellSummaryViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -43,24 +44,19 @@ class CellSummaryViewPanelComponent extends React.Component {
                     label: operationDefinition.operationName,
                 };
             });
-        let cellSummaryPopover = React.createElement(CellSummaryPopover, { CellSummary: this.props.CellSummary });
+        let cellSummaryPopover = _jsx(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, { className: clsx(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+        return (_jsxs(Flex, { className: clsx(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, { className: "twa:flex-1" },
-                React.createElement(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, { className: "twa:items-center twa:gap-1" }, React.createElement(React.Fragment, null,
-                React.createElement(Flex, { className: clsx(`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, { 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: [_jsx(Flex, { className: "twa:flex-1", children: _jsx(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 }) }), _jsx(Flex, { className: "twa:items-center twa:gap-1", children: _jsxs(_Fragment, { children: [_jsx(Flex, { className: clsx(`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 }), _jsx(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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAdaptable } from '../AdaptableContext';
 import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import { useChartingElements } from './useChartingElements';
@@ -11,11 +11,5 @@ export const ChartingStatusBarPopover = (props) => {
         accessLevel: accessLevel,
         size: 'small',
     });
-    return (React.createElement(Flex, { className: "twa:w-full", alignItems: "center" },
-        React.createElement(Box, null, chartSelector),
-        containerSelector && React.createElement(Box, { className: "twa:ml-1" }, containerSelector),
-        React.createElement(Box, { className: "twa:ml-1" },
-            chartButton,
-            deleteButton,
-            editButton)));
+    return (_jsxs(Flex, { className: "twa:w-full", alignItems: "center", children: [_jsx(Box, { children: chartSelector }), containerSelector && _jsx(Box, { className: "twa:ml-1", children: containerSelector }), _jsxs(Box, { className: "twa:ml-1", children: [chartButton, deleteButton, editButton] })] }));
 };

package/src/View/Charting/ChartingViewPanel.js

@@ -1,25 +1,11 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useChartingElements } from './useChartingElements';
 import { Box, Flex } from '../../components/Flex';
 export const ChartingViewPanel = (props) => {
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = useChartingElements({ elementType, accessLevel: props.accessLevel });
     if (elementType === 'DashboardToolbar') {
-        return (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
-            React.createElement(Box, null, chartSelector),
-            containerSelector && React.createElement(Box, { className: "twa:ml-1" }, containerSelector),
-            React.createElement(Box, { className: "twa:ml-1" },
-                chartButton,
-                deleteButton,
-                editButton)));
+        return (_jsxs(Flex, { alignItems: "center", className: "twa:w-full", children: [_jsx(Box, { children: chartSelector }), containerSelector && _jsx(Box, { className: "twa:ml-1", children: containerSelector }), _jsxs(Box, { className: "twa:ml-1", children: [chartButton, deleteButton, editButton] })] }));
     }
-    return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full" },
-        React.createElement(Box, { className: "twa:mb-1" }, chartSelector),
-        containerSelector && React.createElement(Box, { className: "twa:mb-1" }, containerSelector),
-        React.createElement(Box, null,
-            chartButton,
-            " ",
-            deleteButton,
-            " ",
-            editButton)));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:w-full", children: [_jsx(Box, { className: "twa:mb-1", children: chartSelector }), containerSelector && _jsx(Box, { className: "twa:mb-1", children: containerSelector }), _jsxs(Box, { children: [chartButton, " ", deleteButton, " ", editButton] })] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
 import { OnePageAdaptableWizard } from '../../../Wizard/OnePageAdaptableWizard';
@@ -14,28 +15,25 @@ export const AgChargingWizard = (props) => {
         adaptable.api.chartingApi.editChartDefinition(chartDefinition);
         props.onFinishWizard(chartDefinition);
     }, [chartDefinition]);
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Chart Settings',
                 isValid: isSettingsValid,
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
             },
             {
                 details: 'Select Chart Tags',
                 title: 'Tags',
                 isVisible: () => adaptable.api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setChartDefinition }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setChartDefinition }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 title: 'Preview Chart',
                 details: 'Chart Preview',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(PreviewChartSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
             },
         ] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import isEqual from '../../../../Utilities/utils/isEqual';
@@ -28,5 +29,5 @@ export const PreviewChartSection = (props) => {
             });
         }
     }, [currentChartModels]);
-    return React.createElement("div", { ref: divRef });
+    return _jsx("div", { ref: divRef });
 };

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

@@ -1,18 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
 import DropdownButton from '../../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { validateChartName } from '../../../../Utilities/Helpers/chartingHelper';
 import AdaptableInput from '../../../Components/AdaptableInput';
 export const isSettingsValid = (chartDefinition, api) => {
-    if (!chartDefinition.Name) {
-        return 'A name is required.';
-    }
-    const allChartDefinitions = api.chartingApi.getChartDefinitions();
-    if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
-        chartDefinitionLoopItem.Name === chartDefinition.Name)) {
-        return 'A Chart with this name already exists.';
-    }
-    return true;
+    return validateChartName(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 export const SettingsSection = (props) => {
     const handleNameChange = React.useCallback((event) => {
@@ -63,13 +57,5 @@ export const SettingsSection = (props) => {
             },
         });
     }, [props.chartDefinition]);
-    return (React.createElement(FormLayout, null,
-        React.createElement(FormRow, { label: "Name" },
-            React.createElement(AdaptableInput, { onChange: handleNameChange, value: props.chartDefinition.Name })),
-        React.createElement(FormRow, { label: "Unlink Chart" },
-            React.createElement(CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart })),
-        React.createElement(FormRow, { label: "Suppress Chart Ranges" },
-            React.createElement(CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges })),
-        props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (React.createElement(FormRow, { label: "Agg Func" },
-            React.createElement(DropdownButton, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear }, aggFunc ? aggFunc : 'Select ')))));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), _jsx(FormRow, { label: "Unlink Chart", children: _jsx(CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), _jsx(FormRow, { label: "Suppress Chart Ranges", children: _jsx(CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (_jsx(FormRow, { label: "Agg Func", children: _jsx(DropdownButton, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear, children: aggFunc ? aggFunc : 'Select ' }) }))] }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { isAgChartDefinition, } from '../../../AdaptableState/ChartingState';
 import { AgChargingWizard } from './AgChargingWizard';
 import { ExternalChartingWizard } from './ExternalChartingWizard';
@@ -6,10 +6,10 @@ export const ChartingWizard = (props) => {
     const { data, configEntities, ...other } = props;
     if (isAgChartDefinition(data)) {
         const chartDef = data;
-        return (React.createElement(AgChargingWizard, { ...other, data: chartDef }));
+        return (_jsx(AgChargingWizard, { ...other, data: chartDef }));
     }
     else {
         const chartDef = data;
-        return (React.createElement(ExternalChartingWizard, { ...other, data: chartDef }));
+        return (_jsx(ExternalChartingWizard, { ...other, data: chartDef }));
     }
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../../AdaptableContext';
 import { OnePageAdaptableWizard } from '../../../Wizard/OnePageAdaptableWizard';
@@ -19,7 +20,7 @@ const PreviewChartSection = ({ chartDefinition }) => {
             adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
         };
     }, [divRef]);
-    return React.createElement("div", { ref: divRef });
+    return _jsx("div", { ref: divRef });
 };
 export const ExternalChartingWizard = (props) => {
     const adaptable = useAdaptable();
@@ -31,20 +32,18 @@ export const ExternalChartingWizard = (props) => {
         adaptable.api.chartingApi.editExternalChartDefinition(chartDefinition);
         props.onFinishWizard(props.data);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Chart Settings',
                 isValid: isSettingsValid,
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }) })),
             },
             onPreviewChart
                 ? {
                     title: 'Preview Chart',
                     render: () => {
-                        return (React.createElement(Box, { className: "twa:p-2" },
-                            React.createElement(PreviewChartSection, { chartDefinition: chartDefinition })));
+                        return (_jsx(Box, { className: "twa:p-2", children: _jsx(PreviewChartSection, { chartDefinition: chartDefinition }) }));
                     },
                 }
                 : null,

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.js

@@ -1,22 +1,13 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import { validateChartName } from '../../../../Utilities/Helpers/chartingHelper';
 import AdaptableInput from '../../../Components/AdaptableInput';
 export const isSettingsValid = (chartDefinition, api) => {
-    if (!chartDefinition.Name) {
-        return 'A name is required.';
-    }
-    const allChartDefinitions = api.chartingApi.getExternalChartDefinitions();
-    if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
-        chartDefinitionLoopItem.Name === chartDefinition.Name)) {
-        return 'A Chart with this name already exists.';
-    }
-    return true;
+    return validateChartName(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 export const SettingsSection = (props) => {
-    return (React.createElement(FormLayout, null,
-        React.createElement(FormRow, { label: "Name" },
-            React.createElement(AdaptableInput, { value: props.chartDefinition.Name, onChange: (e) => props.onChange({
+    return (_jsx(FormLayout, { children: _jsx(FormRow, { label: "Name", children: _jsx(AdaptableInput, { value: props.chartDefinition.Name, onChange: (e) => props.onChange({
                     ...props.chartDefinition,
                     Name: e.target.value,
-                }) }))));
+                }) }) }) }));
 };

package/src/View/Charting/DeleteChartButton.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
 import { isAgChartDefinition } from '../../AdaptableState/ChartingState';
 export const DeleteChartButton = (props) => {
-    return (React.createElement(ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: isAgChartDefinition(props.chart)
+    return (_jsx(ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: isAgChartDefinition(props.chart)
             ? ChartingRedux.ChartingDeleteChart(props.chart)
             : ChartingRedux.ChartingDeleteExternalChart(props.chart), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel, tooltip: "Delete Chart" }));
 };

package/src/View/Charting/EditChartButton.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
 import { useDispatch } from 'react-redux';
 export const EditChartButton = (props) => {
     const dispatch = useDispatch();
-    return (React.createElement(ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
+    return (_jsx(ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
         // It gets complicated when a chart is both open and opened in edit wizard
         // There an be conflicts between the two open charts (preview and main) and the changes to the active chart may not be syncronized correctly.
         disabled: !props.chart || props.isOpen, accessLevel: props.accessLevel, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ChartingModuleId, 'Chart', {

package/src/View/Charting/ShowChartButton.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 import DropdownButton from '../../components/DropdownButton';
@@ -11,13 +11,12 @@ const BaseShowChartButton = (props) => {
     const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
     const chartContainers = chartingOptions?.chartContainers;
     if (props.chartOpened) {
-        return (React.createElement(SimpleButton, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
+        return (_jsx(SimpleButton, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
     }
     if (!chartContainers?.length) {
-        return (React.createElement(SimpleButton, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
+        return (_jsx(SimpleButton, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
     }
-    return (React.createElement(DropdownButton, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
-        React.createElement(SimpleButton, { variant: "raised", tone: "success" }, "Open")));
+    return (_jsx(DropdownButton, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions, children: _jsx(SimpleButton, { variant: "raised", tone: "success", children: "Open" }) }));
 };
 const ShowAgChartButton = (props) => {
     const adaptableApi = useAdaptable().api;
@@ -38,7 +37,7 @@ const ShowAgChartButton = (props) => {
                 : []),
         },
     ];
-    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
+    return (_jsx(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
 };
 const ShowExternalChartButton = (props) => {
     const adaptable = useAdaptable();
@@ -54,14 +53,14 @@ const ShowExternalChartButton = (props) => {
             onClick: () => onShow(contianerDef),
         }))
         : [];
-    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
+    return (_jsx(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
 };
 export const ShowChartButton = (props) => {
     if (isAgChartDefinition(props.data)) {
-        return React.createElement(ShowAgChartButton, { chartDefinition: props.data });
+        return _jsx(ShowAgChartButton, { chartDefinition: props.data });
     }
     if (isExternalChartDefinition(props.data)) {
-        return React.createElement(ShowExternalChartButton, { chartDefinition: props.data });
+        return _jsx(ShowExternalChartButton, { chartDefinition: props.data });
     }
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };

package/src/View/Charting/useChartingElements.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Select } from '../../components/Select';
 import SimpleButton from '../../components/SimpleButton';
 import { isAgChartDefinition } from '../../AdaptableState/ChartingState';
 import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
@@ -10,6 +10,7 @@ import { DeleteChartButton } from './DeleteChartButton';
 import { EditChartButton } from './EditChartButton';
 import { useAgChartState } from './useAgChartState';
 import { useExternalChartState } from './useExternalChartState';
+import { SingleSelect } from '../../components/NewSelect';
 export const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
     const adaptable = useAdaptable();
     const chartDefinitions = useSelector(ChartingRedux.ChartingGetChartModels);
@@ -76,18 +77,18 @@ export const useChartingElements = ({ elementType, accessLevel, size = 'normal',
         style.fontSize = 'small';
         iconSize = 15;
     }
-    const chartSelector = (React.createElement(Select, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, options: options, placeholder: 'Select Chart', disabled: !hasCharts, onChange: (chartUuid) => setSelectedChartId(chartUuid) }));
-    const containerSelector = Boolean(chartContainers?.length) && (React.createElement(Select, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer?.name, size: size, onChange: (containerName) => {
+    const chartSelector = (_jsx(SingleSelect, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, items: options, placeholder: 'Select Chart', disabled: !hasCharts, onValueChange: (chartUuid) => setSelectedChartId(chartUuid) }));
+    const containerSelector = Boolean(chartContainers?.length) && (_jsx(SingleSelect, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer?.name, size: size, onValueChange: (containerName) => {
             if (containerName === chartingOptions.agGridContainerName) {
                 setSelectedContainer(null);
             }
             else {
                 setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
             }
-        }, options: containerOptions, placeholder: "Select Container" }));
-    const chartButton = (React.createElement(SimpleButton, { style: style, className: "twa:mr-1", onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
-    const deleteButton = (React.createElement(DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
-    const editButton = (React.createElement(EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
+        }, items: containerOptions, placeholder: "Select Container" }));
+    const chartButton = (_jsx(SimpleButton, { style: style, className: "twa:mr-1", onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
+    const deleteButton = (_jsx(DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
+    const editButton = (_jsx(EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
     return {
         chartSelector,
         containerSelector,

package/src/View/ColumnInfo/ColumnInfo.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
@@ -158,8 +159,7 @@ const ColumnDefPreview = (props) => {
             Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
             Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
         };
-        return (React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap })));
+        return (_jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }));
     }
 };
 const ModuleView = (props) => {
@@ -175,7 +175,7 @@ const ModuleView = (props) => {
     const allItems = module?.toViewAll?.();
     // Dont show calculated column for non calc cols
     if (module.moduleInfo.ModuleName == 'CalculatedColumn' && !column.isCalculatedColumn) {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
     // if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !allItems?.length) {
     //   return <></>;
@@ -196,32 +196,17 @@ const ModuleView = (props) => {
         setIsWizardOpen(false);
     }, []);
     // filter out items with scope
-    return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, key: module.moduleInfo.ModuleName },
-        React.createElement(Flex, null,
-            React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
-            React.createElement(Box, { className: "twa:flex-1" }),
-            React.createElement(ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New")),
-        itemsInScope?.length ? React.createElement(AdaptableObjectList, { items: itemsInScope, module: module }) : null,
-        isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
-                column,
-                action: 'New',
-                source: 'ModuleButton',
-            }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+    return (_jsxs(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, children: [_jsxs(Flex, { children: [_jsx("b", { className: `${BASE_CLASS_NAME}__header`, children: module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), _jsx(ButtonNew, { onClick: () => setIsWizardOpen(true), children: "New" })] }), itemsInScope?.length ? _jsx(AdaptableObjectList, { items: itemsInScope, module: module }) : null, isWizardOpen && EditWizard && (_jsx(EditWizard, { popupParams: {
+                    column,
+                    action: 'New',
+                    source: 'ModuleButton',
+                }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))] }, module.moduleInfo.ModuleName));
 };
 export const ColumnInfo = (props) => {
     const adaptable = useAdaptable();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
-    return (React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-        React.createElement(Panel.FlexBody, { className: "twa:gap-3" },
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }))),
-            selectedColumnId && (React.createElement(Tabs, { className: "twa:min-h-0 twa:flex-1" },
-                React.createElement(Tabs.Tab, null, "Column Summary"),
-                React.createElement(Tabs.Tab, null, "Column State"),
-                React.createElement(Tabs.Content, null, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })),
-                React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
-                    return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
-                })))))))));
+    return (_jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsxs(Panel.FlexBody, { className: "twa:gap-3", children: [_jsx(FormLayout, { children: _jsx(FormRow, { label: "Select Column", children: _jsx(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }) }) }), selectedColumnId && (_jsxs(Tabs, { className: "twa:min-h-0 twa:flex-1", children: [_jsx(Tabs.Tab, { children: "Column Summary" }), _jsx(Tabs.Tab, { children: "Column State" }), _jsx(Tabs.Content, { children: selectedColumnId && _jsx(ColumnDefPreview, { column: column }) }), _jsx(Tabs.Content, { children: selectedColumnId && (_jsx(Box, { className: BASE_CLASS_NAME, children: MODULES_WITH_COLUMN.map((moduleName) => {
+                                    return (_jsx(ModuleView, { moduleName: moduleName, selectedColumnId: selectedColumnId }, moduleName));
+                                }) })) })] }))] }) }));
 };

package/src/View/ColumnInfo/ColumnInfoPopup.js

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { ColumnInfo } from './ColumnInfo';
 import { Flex } from '../../components/Flex';
 export const ColumnInfoPopup = (props) => {
-    return (React.createElement(PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
-        React.createElement(Flex, { flexDirection: "column", className: "twa:flex-1 twa:h-full twa:[--ab-grid-row-height:45px]" },
-            React.createElement(ColumnInfo, { selectedColumnId: props.popupParams?.column?.columnId }))));
+    return (_jsx(PopupPanel, { headerText: 'Column Info', glyphicon: 'info', children: _jsx(Flex, { flexDirection: "column", className: "twa:flex-1 twa:h-full twa:[--ab-grid-row-height:45px]", children: _jsx(ColumnInfo, { selectedColumnId: props.popupParams?.column?.columnId }) }) }));
 };