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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviewChartSection = 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 isEqual_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/isEqual"));
@@ -32,6 +33,6 @@ const PreviewChartSection = (props) => {
             });
         }
     }, [currentChartModels]);
-    return React.createElement("div", { ref: divRef });
+    return (0, jsx_runtime_1.jsx)("div", { ref: divRef });
 };
 exports.PreviewChartSection = PreviewChartSection;

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

@@ -2,21 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
 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 (0, chartingHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 exports.isSettingsValid = isSettingsValid;
 const SettingsSection = (props) => {
@@ -68,14 +62,6 @@ const SettingsSection = (props) => {
             },
         });
     }, [props.chartDefinition]);
-    return (React.createElement(FormLayout_1.default, null,
-        React.createElement(FormLayout_1.FormRow, { label: "Name" },
-            React.createElement(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name })),
-        React.createElement(FormLayout_1.FormRow, { label: "Unlink Chart" },
-            React.createElement(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart })),
-        React.createElement(FormLayout_1.FormRow, { label: "Suppress Chart Ranges" },
-            React.createElement(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges })),
-        props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && (React.createElement(FormLayout_1.FormRow, { label: "Agg Func" },
-            React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear }, aggFunc ? aggFunc : 'Select ')))));
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { onChange: handleNameChange, value: props.chartDefinition.Name }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Unlink Chart", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleUnLinkChange, checked: props.chartDefinition.Model.unlinkChart }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suppress Chart Ranges", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: handleSuppressChartRanges, checked: props.chartDefinition.Model.suppressChartRanges }) }), props.chartDefinition.Model.modelType === 'range' && typeof aggFunc !== 'function' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Agg Func", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: aggFuncsOptions, onClear: handleAggFuncClear, children: aggFunc ? aggFunc : 'Select ' }) }))] }));
 };
 exports.SettingsSection = SettingsSection;

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartingWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ChartingState_1 = require("../../../AdaptableState/ChartingState");
 const AgChargingWizard_1 = require("./AgChargingWizard");
 const ExternalChartingWizard_1 = require("./ExternalChartingWizard");
@@ -10,11 +9,11 @@ const ChartingWizard = (props) => {
     const { data, configEntities, ...other } = props;
     if ((0, ChartingState_1.isAgChartDefinition)(data)) {
         const chartDef = data;
-        return (React.createElement(AgChargingWizard_1.AgChargingWizard, { ...other, data: chartDef }));
+        return ((0, jsx_runtime_1.jsx)(AgChargingWizard_1.AgChargingWizard, { ...other, data: chartDef }));
     }
     else {
         const chartDef = data;
-        return (React.createElement(ExternalChartingWizard_1.ExternalChartingWizard, { ...other, data: chartDef }));
+        return ((0, jsx_runtime_1.jsx)(ExternalChartingWizard_1.ExternalChartingWizard, { ...other, data: chartDef }));
     }
 };
 exports.ChartingWizard = ChartingWizard;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExternalChartingWizard = 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");
@@ -23,7 +24,7 @@ const PreviewChartSection = ({ chartDefinition }) => {
             adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
         };
     }, [divRef]);
-    return React.createElement("div", { ref: divRef });
+    return (0, jsx_runtime_1.jsx)("div", { ref: divRef });
 };
 const ExternalChartingWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -35,20 +36,18 @@ const ExternalChartingWizard = (props) => {
         adaptable.api.chartingApi.editExternalChartDefinition(chartDefinition);
         props.onFinishWizard(props.data);
     };
-    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 }) })),
             },
             onPreviewChart
                 ? {
                     title: 'Preview Chart',
                     render: () => {
-                        return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                            React.createElement(PreviewChartSection, { chartDefinition: chartDefinition })));
+                        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(PreviewChartSection, { chartDefinition: chartDefinition }) }));
                     },
                 }
                 : null,

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

@@ -2,27 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../../Components/AdaptableInput"));
 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 (0, chartingHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 exports.isSettingsValid = isSettingsValid;
 const SettingsSection = (props) => {
-    return (react_1.default.createElement(FormLayout_1.default, null,
-        react_1.default.createElement(FormLayout_1.FormRow, { label: "Name" },
-            react_1.default.createElement(AdaptableInput_1.default, { value: props.chartDefinition.Name, onChange: (e) => props.onChange({
+    return ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { value: props.chartDefinition.Name, onChange: (e) => props.onChange({
                     ...props.chartDefinition,
                     Name: e.target.value,
-                }) }))));
+                }) }) }) }));
 };
 exports.SettingsSection = SettingsSection;

package/src/View/Charting/DeleteChartButton.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeleteChartButton = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
 const ChartingState_1 = require("../../AdaptableState/ChartingState");
 const DeleteChartButton = (props) => {
-    return (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: (0, ChartingState_1.isAgChartDefinition)(props.chart)
+    return ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: (0, ChartingState_1.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

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditChartButton = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const react_redux_1 = require("react-redux");
 const EditChartButton = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
-    return (React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
+    return ((0, jsx_runtime_1.jsx)(ButtonEdit_1.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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShowChartButton = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
@@ -15,13 +15,12 @@ const BaseShowChartButton = (props) => {
     const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
     const chartContainers = chartingOptions?.chartContainers;
     if (props.chartOpened) {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
+        return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "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_1.default, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
+        return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
     }
-    return (React.createElement(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
-        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "success" }, "Open")));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions, children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "raised", tone: "success", children: "Open" }) }));
 };
 const ShowAgChartButton = (props) => {
     const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
@@ -42,7 +41,7 @@ const ShowAgChartButton = (props) => {
                 : []),
         },
     ];
-    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
+    return ((0, jsx_runtime_1.jsx)(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
 };
 const ShowExternalChartButton = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -58,15 +57,15 @@ const ShowExternalChartButton = (props) => {
             onClick: () => onShow(contianerDef),
         }))
         : [];
-    return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
+    return ((0, jsx_runtime_1.jsx)(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
 };
 const ShowChartButton = (props) => {
     if ((0, ChartingState_1.isAgChartDefinition)(props.data)) {
-        return React.createElement(ShowAgChartButton, { chartDefinition: props.data });
+        return (0, jsx_runtime_1.jsx)(ShowAgChartButton, { chartDefinition: props.data });
     }
     if ((0, ChartingState_1.isExternalChartDefinition)(props.data)) {
-        return React.createElement(ShowExternalChartButton, { chartDefinition: props.data });
+        return (0, jsx_runtime_1.jsx)(ShowExternalChartButton, { chartDefinition: props.data });
     }
-    return React.createElement(React.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 };
 exports.ShowChartButton = ShowChartButton;

package/src/View/Charting/useChartingElements.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChartingElements = 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 Select_1 = require("../../components/Select");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const ChartingState_1 = require("../../AdaptableState/ChartingState");
 const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
@@ -14,6 +14,7 @@ const DeleteChartButton_1 = require("./DeleteChartButton");
 const EditChartButton_1 = require("./EditChartButton");
 const useAgChartState_1 = require("./useAgChartState");
 const useExternalChartState_1 = require("./useExternalChartState");
+const NewSelect_1 = require("../../components/NewSelect");
 const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
@@ -80,18 +81,18 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         style.fontSize = 'small';
         iconSize = 15;
     }
-    const chartSelector = (React.createElement(Select_1.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_1.Select, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer?.name, size: size, onChange: (containerName) => {
+    const chartSelector = ((0, jsx_runtime_1.jsx)(NewSelect_1.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) && ((0, jsx_runtime_1.jsx)(NewSelect_1.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_1.default, { 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_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
-    const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
+        }, items: containerOptions, placeholder: "Select Container" }));
+    const chartButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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 = ((0, jsx_runtime_1.jsx)(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
+    const editButton = ((0, jsx_runtime_1.jsx)(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
     return {
         chartSelector,
         containerSelector,

package/src/View/ColumnInfo/ColumnInfo.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnInfo = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
@@ -162,8 +163,7 @@ const ColumnDefPreview = (props) => {
             Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
             Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
         };
-        return (React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap })));
+        return ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }));
     }
 };
 const ModuleView = (props) => {
@@ -179,7 +179,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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
     // if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !allItems?.length) {
     //   return <></>;
@@ -200,33 +200,18 @@ const ModuleView = (props) => {
         setIsWizardOpen(false);
     }, []);
     // filter out items with scope
-    return (React.createElement(Flex_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, key: module.moduleInfo.ModuleName },
-        React.createElement(Flex_1.Flex, null,
-            React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
-            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-            React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New")),
-        itemsInScope?.length ? React.createElement(AdaptableObjectList_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list twa:mb-4`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)("b", { className: `${BASE_CLASS_NAME}__header`, children: module.moduleInfo.FriendlyName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true), children: "New" })] }), itemsInScope?.length ? (0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectList, { items: itemsInScope, module: module }) : null, isWizardOpen && EditWizard && ((0, jsx_runtime_1.jsx)(EditWizard, { popupParams: {
+                    column,
+                    action: 'New',
+                    source: 'ModuleButton',
+                }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))] }, module.moduleInfo.ModuleName));
 };
 const ColumnInfo = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
-    return (React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-        React.createElement(Panel_1.default.FlexBody, { className: "twa:gap-3" },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }))),
-            selectedColumnId && (React.createElement(Tabs_1.Tabs, { className: "twa:min-h-0 twa:flex-1" },
-                React.createElement(Tabs_1.Tabs.Tab, null, "Column Summary"),
-                React.createElement(Tabs_1.Tabs.Tab, null, "Column State"),
-                React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })),
-                React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && (React.createElement(Flex_1.Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
-                    return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
-                })))))))));
+    return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsxs)(Panel_1.default.FlexBody, { className: "twa:gap-3", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Column", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) }) }) }), selectedColumnId && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:min-h-0 twa:flex-1", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Summary" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column State" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: selectedColumnId && (0, jsx_runtime_1.jsx)(ColumnDefPreview, { column: column }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: selectedColumnId && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: BASE_CLASS_NAME, children: MODULES_WITH_COLUMN.map((moduleName) => {
+                                    return ((0, jsx_runtime_1.jsx)(ModuleView, { moduleName: moduleName, selectedColumnId: selectedColumnId }, moduleName));
+                                }) })) })] }))] }) }));
 };
 exports.ColumnInfo = ColumnInfo;

package/src/View/ColumnInfo/ColumnInfoPopup.js

@@ -1,14 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnInfoPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const ColumnInfo_1 = require("./ColumnInfo");
 const Flex_1 = require("../../components/Flex");
 const ColumnInfoPopup = (props) => {
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
-        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:h-full twa:[--ab-grid-row-height:45px]" },
-            React.createElement(ColumnInfo_1.ColumnInfo, { selectedColumnId: props.popupParams?.column?.columnId }))));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: 'Column Info', glyphicon: 'info', children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:h-full twa:[--ab-grid-row-height:45px]", children: (0, jsx_runtime_1.jsx)(ColumnInfo_1.ColumnInfo, { selectedColumnId: props.popupParams?.column?.columnId }) }) }));
 };
 exports.ColumnInfoPopup = ColumnInfoPopup;

package/src/View/Comments/CommentsEditor.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommentsEditor = 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 icons_1 = require("../../components/icons");
@@ -56,69 +57,51 @@ const CommentsEditor = (props) => {
     const formatDate = (date, format) => {
         return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
     };
-    return (React.createElement(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
             }
-        } },
-        showCloseButton && (React.createElement(Flex_1.Flex, null,
-            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-            React.createElement(SimpleButton_1.default, { onClick: (event) => {
-                    event.stopPropagation();
-                    api.commentApi.hideCommentsPopup();
-                }, variant: "text", icon: "close" }))),
-        React.createElement(Flex_1.Flex, { className: "twa:overflow-auto twa:max-h-[300px]", flexDirection: "column", ref: commentsWrapperRef }, comments &&
-            comments.length > 0 &&
-            comments.map((comment, index) => {
-                if (!comment) {
-                    return null;
-                }
-                const isOwnComment = comment?.Author?.UserName
-                    ? comment?.Author?.UserName === userId
-                    : true; // no owner means it's the current user
-                return (React.createElement(Flex_1.Box, { key: comment.Uuid ?? index, className: "ab-Comment twa:p-2" },
-                    React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:mb-2" },
-                        React.createElement(Flex_1.Box, null,
-                            React.createElement(Flex_1.Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold" }, comment?.Author?.UserName),
-                            comment.Timestamp && (React.createElement(Flex_1.Box, { "data-name": "comment-timestamp", className: "twa:text-2" }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
-                        React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-                        React.createElement(SimpleButton_1.default, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
-                        React.createElement(SimpleButton_1.default, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
-                                api.commentApi.deleteComment(comment, cellAddress);
-                                requestAnimationFrame(() => {
-                                    props.onRefreshContent();
-                                });
-                            } })),
-                    React.createElement(Flex_1.Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput_1.default, { autoFocus: true, className: "twa:w-full", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
-                            if (comment.Uuid === activeEditingComment) {
-                                setActiveEditingComment(null);
-                            }
-                        }, onChange: (event) => {
-                            api.commentApi.editComment({
-                                ...comment,
-                                Value: event.target.value,
-                            }, cellAddress);
-                        } })) : (React.createElement(Flex_1.Box, { "data-name": "comment-text" }, comment.Value)))));
-            })),
-        React.createElement(AdaptableInput_1.default, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
-                setNewCommentText(event.target.value);
-            }, onKeyDown: (event) => {
-                if (event.key === 'Enter') {
-                    api.commentApi.addComment(newCommentText, cellAddress);
-                    setNewCommentText('');
-                    requestAnimationFrame(() => {
-                        props.onRefreshContent();
-                        scrollToBottom();
-                    });
-                }
-            }, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }),
-        React.createElement(SimpleButton_1.default, { className: "twa:w-full", variant: "raised", onClick: () => {
-                api.settingsPanelApi.openSettingsPanel('Comment');
-                api.internalApi.getAnnotationsService().hidePopup();
-            } },
-            React.createElement(Flex_1.Box, { className: "twa:mr-2" },
-                React.createElement(icons_1.Icon, { name: "folder" })),
-            ' ',
-            "Open all Comments")));
+        }, children: [showCloseButton && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: (event) => {
+                            event.stopPropagation();
+                            api.commentApi.hideCommentsPopup();
+                        }, variant: "text", icon: "close" })] })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:overflow-auto twa:max-h-[300px]", flexDirection: "column", ref: commentsWrapperRef, children: comments &&
+                    comments.length > 0 &&
+                    comments.map((comment, index) => {
+                        if (!comment) {
+                            return null;
+                        }
+                        const isOwnComment = comment?.Author?.UserName
+                            ? comment?.Author?.UserName === userId
+                            : true; // no owner means it's the current user
+                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-Comment twa:p-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:mb-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "comment-username", className: "twa:text-3 twa:font-bold", children: comment?.Author?.UserName }), comment.Timestamp && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "comment-timestamp", className: "twa:text-2", children: formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat()) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
+                                                api.commentApi.deleteComment(comment, cellAddress);
+                                                requestAnimationFrame(() => {
+                                                    props.onRefreshContent();
+                                                });
+                                            } })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { onClick: () => setActiveEditingComment(comment.Uuid), children: comment.Uuid === activeEditingComment ? ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { autoFocus: true, className: "twa:w-full", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
+                                            if (comment.Uuid === activeEditingComment) {
+                                                setActiveEditingComment(null);
+                                            }
+                                        }, onChange: (event) => {
+                                            api.commentApi.editComment({
+                                                ...comment,
+                                                Value: event.target.value,
+                                            }, cellAddress);
+                                        } })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "comment-text", children: comment.Value })) })] }, comment.Uuid ?? index));
+                    }) }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
+                    setNewCommentText(event.target.value);
+                }, onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        api.commentApi.addComment(newCommentText, cellAddress);
+                        setNewCommentText('');
+                        requestAnimationFrame(() => {
+                            props.onRefreshContent();
+                            scrollToBottom();
+                        });
+                    }
+                }, className: "twa:w-full twa:my-2", placeholder: "Write new Comment" }), (0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { className: "twa:w-full", variant: "raised", onClick: () => {
+                    api.settingsPanelApi.openSettingsPanel('Comment');
+                    api.internalApi.getAnnotationsService().hidePopup();
+                }, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "folder" }) }), ' ', "Open all Comments"] })] }));
 };
 exports.CommentsEditor = CommentsEditor;

package/src/View/Comments/CommentsPopup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommentsPopup = 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 InfiniteTable_1 = require("../../components/InfiniteTable");
@@ -63,40 +64,21 @@ const CellComments = (props) => {
         return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
     }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
-    return (React.createElement(Panel_1.default, { className: "twa:mb-2", header: React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
-            React.createElement(Flex_1.Box, { className: "twa:mr-2" },
-                React.createElement("b", null, "Cell Value:"),
-                " ",
-                cellValue),
-            React.createElement(Flex_1.Box, { className: "twa:mr-2" },
-                React.createElement("b", null,
-                    primaryKeyHeader,
-                    ":"),
-                " ",
-                props.commentThread.PrimaryKeyValue),
-            React.createElement(Flex_1.Box, null,
-                React.createElement("b", null, "Column:"),
-                " ",
-                columnFriendlyName),
-            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
-                    adaptable.api.internalApi.getAnnotationsService().showPopup({
-                        ColumnId: props.commentThread.ColumnId,
-                        PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
-                    }, true);
-                } }),
-            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
-                    adaptable.api.commentApi.deleteCommentThread(props.commentThread);
-                } })) },
-        React.createElement(InfiniteTable_1.DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
-            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+    return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:mb-2", header: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:w-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-2", children: [(0, jsx_runtime_1.jsx)("b", { children: "Cell Value:" }), " ", cellValue] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-2", children: [(0, jsx_runtime_1.jsxs)("b", { children: [primaryKeyHeader, ":"] }), " ", props.commentThread.PrimaryKeyValue] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Column:" }), " ", columnFriendlyName] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonComponent, { className: "twa:mr-1", variant: "text", icon: "visibility-on", onClick: () => {
+                        adaptable.api.internalApi.getAnnotationsService().showPopup({
+                            ColumnId: props.commentThread.ColumnId,
+                            PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
+                        }, true);
+                    } }), (0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
+                        adaptable.api.commentApi.deleteCommentThread(props.commentThread);
+                    } })] }), children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }) }) }));
 };
 const CommentsPopup = (props) => {
     const commentThreads = (0, react_redux_1.useSelector)((state) => {
         return state.Comment.CommentThreads;
     });
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads ?? []).map((commentThread, index) => {
-        return React.createElement(CellComments, { key: commentThread?.Uuid ?? index, commentThread: commentThread });
-    })));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage, children: (commentThreads ?? []).map((commentThread, index) => {
+            return (0, jsx_runtime_1.jsx)(CellComments, { commentThread: commentThread }, commentThread?.Uuid ?? index);
+        }) }));
 };
 exports.CommentsPopup = CommentsPopup;

package/src/View/Components/AdaptableButton/AdaptableButtonComponent.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+/** Renders {@link SimpleButton} with Adaptable custom/system icon preparation. */
+export declare const AdaptableButtonComponent: React.FunctionComponent<SimpleButtonProps>;

package/src/View/Components/AdaptableButton/AdaptableButtonComponent.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableButtonComponent = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icon_1 = require("../../../components/Icon");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+/** Renders {@link SimpleButton} with Adaptable custom/system icon preparation. */
+const AdaptableButtonComponent = (props) => {
+    let icon = props.icon;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    if (adaptable && (0, Icon_1.isAdaptableSystemIcon)(icon)) {
+        icon = adaptable.api?.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
+    }
+    return (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ...props, icon: icon });
+};
+exports.AdaptableButtonComponent = AdaptableButtonComponent;