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

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableOptionsForm = 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"));
@@ -15,9 +16,8 @@ const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
 const OptionInput = (props) => {
     const { name, defaultValue, value, description, uiLabel } = props.option;
     const label = uiLabel ?? StringExtensions_1.default.Humanize(name);
-    let input = React.createElement(React.Fragment, null);
-    const info = (React.createElement(Flex_1.Box, { className: "twa:ml-2" },
-        React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
+    let input = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    const info = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] }) }));
     const handleInputChange = (event) => props.onChange({ ...props.option, value: event.currentTarget.value });
     const handleCheckboxChange = (checked) => props.onChange({ ...props.option, value: checked });
     // option is mutated to acomodate complex types overrides
@@ -49,42 +49,32 @@ const OptionInput = (props) => {
             label: StringExtensions_1.default.Humanize(str),
             onClick: () => props.onChange({ ...option, value: str }),
         }));
-        input = (React.createElement(DropdownButton_1.default, { ...inputProps, columns: ['label'], items: options }, StringExtensions_1.default.Humanize(value)));
+        input = ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { ...inputProps, columns: ['label'], items: options, children: StringExtensions_1.default.Humanize(value) }));
     }
     else {
         switch (option.kind) {
             case 'n':
-                input = React.createElement(Input_1.default, { type: "number", onChange: handleInputChange, ...inputProps });
+                input = (0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", onChange: handleInputChange, ...inputProps });
                 break;
             case 's':
-                input = React.createElement(Input_1.default, { type: "text", onChange: handleInputChange, ...inputProps });
+                input = (0, jsx_runtime_1.jsx)(Input_1.default, { type: "text", onChange: handleInputChange, ...inputProps });
                 break;
             case 'b':
-                input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
+                input = ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date", children: label }));
                 break;
         }
     }
-    let content = (React.createElement(React.Fragment, null,
-        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-[250px]" },
-            label,
-            " ",
-            info),
-        input));
+    let content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-[250px]", children: [label, " ", info] }), input] }));
     if (option.kind === 'b') {
-        content = (React.createElement(Flex_1.Flex, { alignItems: "center" },
-            input,
-            " ",
-            info));
+        content = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [input, " ", info] }));
     }
-    return React.createElement(Flex_1.Flex, { className: "twa:mb-2 twa:pl-1" }, content);
+    return (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-2 twa:pl-1", children: content });
 };
 const OptionsSection = (props) => {
     if (!props.options.length) {
-        return React.createElement(React.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    return (React.createElement(Flex_1.Box, { className: "twa:mb-2" },
-        React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, props.name ?? props.id),
-        props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: props.name ?? props.id }), props.options.map((option, index) => ((0, jsx_runtime_1.jsx)(OptionInput, { option: option, onChange: props.onChange }, index)))] }));
 };
 const AdaptableOptionsForm = (props) => {
     const nocodeOptions = React.useMemo(() => {
@@ -107,8 +97,8 @@ const AdaptableOptionsForm = (props) => {
         }
         props.onChangedAdaptableOptions(adaptableOptions);
     };
-    return (React.createElement(Flex_1.Box, { className: "twa:p-2" }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
-        return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
+            return ((0, jsx_runtime_1.jsx)(OptionsSection, { onChange: handleOptionChange(sectionName), id: sectionName, name: containerLabel, options: items }, sectionName));
+        }) }));
 };
 exports.AdaptableOptionsForm = AdaptableOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const useSelection_1 = tslib_1.__importDefault(require("./useSelection"));
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -50,7 +51,7 @@ const ThrottledInput = React.memo((props) => {
     React.useEffect(() => {
         setStateValue(props.value);
     }, [props.value]);
-    return React.createElement(Input_1.default, { style: props.style, value: stateValue, onChange: handleChange });
+    return (0, jsx_runtime_1.jsx)(Input_1.default, { style: props.style, value: stateValue, onChange: handleChange });
 });
 const tableDOMProps = {
     style: {
@@ -158,7 +159,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     }, [includedColumnsMap, primaryKeyField]);
     const data = columns;
     const CellWrapper = (props) => {
-        return (React.createElement(Flex_1.Flex, { ...props, style: {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, style: {
                 ...props.style,
                 position: 'absolute',
                 textAlign: 'center',
@@ -167,19 +168,16 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 height: '100%',
                 width: '100%',
                 whiteSpace: 'normal',
-            }, justifyContent: "center", alignItems: "center" }, props.children));
+            }, justifyContent: "center", alignItems: "center", children: props.children }));
     };
-    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, { ...props, className: (0, twMerge_1.twMerge)('twa:text-3 twa:font-bold', props.className) }));
+    const HeaderCellWrapper = (props) => ((0, jsx_runtime_1.jsx)(CellWrapper, { ...props, className: (0, twMerge_1.twMerge)('twa:text-3 twa:font-bold', props.className) }));
     const HeaderWithCheckbox = (props) => {
         const { label, onChange, checked, ...flexProps } = props;
-        return (React.createElement(HeaderCellWrapper, { ...flexProps, flexDirection: "column" },
-            React.createElement(Flex_1.Box, null, label),
-            React.createElement(Flex_1.Box, { className: "twa:text-center twa:ml-1" },
-                React.createElement(CheckBox_1.CheckBox, { checked: checked, onChange: onChange }))));
+        return ((0, jsx_runtime_1.jsxs)(HeaderCellWrapper, { ...flexProps, flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: label }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-center twa:ml-1", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: checked, onChange: onChange }) })] }));
     };
     const columnsMap = {
         pk: {
-            header: () => React.createElement(HeaderCellWrapper, null, "Primary Key"),
+            header: () => (0, jsx_runtime_1.jsx)(HeaderCellWrapper, { children: "Primary Key" }),
             maxWidth: 80,
             defaultSortable: false,
             renderMenuIcon: false,
@@ -187,7 +185,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 const { data } = params;
                 const column = data;
                 const isPrimaryKey = column?.field === primaryKeyField;
-                return (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
+                return ((0, jsx_runtime_1.jsx)(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
                         if (checked && isIncludedColumn(column.field)) {
                             setPrimaryKeyField(column.field);
                         }
@@ -198,7 +196,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             maxWidth: 80,
             resizable: true,
             renderMenuIcon: false,
-            header: () => (React.createElement(HeaderWithCheckbox, { label: "Included", checked: allIncluded ? true : allExcluded ? false : null, onChange: (allIncluded) => {
+            header: () => ((0, jsx_runtime_1.jsx)(HeaderWithCheckbox, { label: "Included", checked: allIncluded ? true : allExcluded ? false : null, onChange: (allIncluded) => {
                     if (allIncluded) {
                         includeAllColumns();
                     }
@@ -208,44 +206,41 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 } })),
             render: (params) => {
                 const column = params.data;
-                return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isIncludedColumn(column.field), onChange: (included) => {
+                return ((0, jsx_runtime_1.jsx)(CellWrapper, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isIncludedColumn(column.field), onChange: (included) => {
                             if (included) {
                                 includeColumn(column.field);
                             }
                             else {
                                 excludeColumn(column.field);
                             }
-                        } })));
+                        } }) }));
             },
         },
         field: {
-            header: React.createElement(HeaderCellWrapper, null, "Field"),
+            header: (0, jsx_runtime_1.jsx)(HeaderCellWrapper, { children: "Field" }),
             field: 'field',
             minWidth: 150,
             renderMenuIcon: false,
             render: (params) => {
                 const column = params.data;
                 const humanized = StringExtensions_1.default.Humanize(column.field);
-                return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(ThrottledInput, { key: column.field, style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
+                return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ThrottledInput, { style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
                             setColumnCaption(value, column.field);
-                        } })));
+                        } }, column.field) }));
             },
         },
         type: {
-            header: React.createElement(HeaderCellWrapper, null, "Type"),
+            header: (0, jsx_runtime_1.jsx)(HeaderCellWrapper, { children: "Type" }),
             maxWidth: 140,
             renderMenuIcon: false,
             render: (params) => {
                 const column = params.data;
-                return (React.createElement(CellWrapper, { className: "twa:px-1" },
-                    React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: column?.type ?? '', onChange: onColumnTypeChange.bind(null, column) })));
+                return ((0, jsx_runtime_1.jsx)(CellWrapper, { className: "twa:px-1", children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: column?.type ?? '', onChange: onColumnTypeChange.bind(null, column) }) }));
             },
         },
         sortable: {
             renderMenuIcon: false,
-            header: (React.createElement(HeaderWithCheckbox, { label: "Sortable", checked: isAllSortableColumns() ? true : isNoneSortableColumns() ? false : null, onChange: (allSortable) => {
+            header: ((0, jsx_runtime_1.jsx)(HeaderWithCheckbox, { label: "Sortable", checked: isAllSortableColumns() ? true : isNoneSortableColumns() ? false : null, onChange: (allSortable) => {
                     if (allSortable) {
                         setAllSortable();
                     }
@@ -255,14 +250,14 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 } })),
             render: (params) => {
                 const column = params.data;
-                return (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(column.field), onChange: (sortable) => {
+                return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isSortableColumn(column.field), onChange: (sortable) => {
                         sortable ? setSortableColumn(column.field) : setUnsortableColumn(column.field);
                     } }));
             },
         },
         editable: {
             renderMenuIcon: false,
-            header: (React.createElement(HeaderWithCheckbox, { label: "Editable", checked: isAllEditableColumns() ? true : isNoneEditableColumns() ? false : null, onChange: (allEditable) => {
+            header: ((0, jsx_runtime_1.jsx)(HeaderWithCheckbox, { label: "Editable", checked: isAllEditableColumns() ? true : isNoneEditableColumns() ? false : null, onChange: (allEditable) => {
                     if (allEditable) {
                         setAllEditable();
                     }
@@ -272,15 +267,14 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 } })),
             render: (params) => {
                 const col = params.data;
-                return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
+                return ((0, jsx_runtime_1.jsx)(CellWrapper, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
                             editable ? setEditableColumn(col.field) : setUneditableColumn(col.field);
-                        } })));
+                        } }) }));
             },
         },
         resizable: {
             renderMenuIcon: false,
-            header: (React.createElement(HeaderWithCheckbox, { label: "Resizable", checked: isAllResizableColumns() ? true : isNoneResizableColumns() ? false : null, onChange: (allResizable) => {
+            header: ((0, jsx_runtime_1.jsx)(HeaderWithCheckbox, { label: "Resizable", checked: isAllResizableColumns() ? true : isNoneResizableColumns() ? false : null, onChange: (allResizable) => {
                     if (allResizable) {
                         setAllResizable();
                     }
@@ -290,15 +284,14 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 } })),
             render: (params) => {
                 const col = params.data;
-                return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
+                return ((0, jsx_runtime_1.jsx)(CellWrapper, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
                             resizable ? setResizableColumn(col.field) : setUnresizableColumn(col.field);
-                        } })));
+                        } }) }));
             },
         },
         groupable: {
             renderMenuIcon: false,
-            header: (React.createElement(HeaderWithCheckbox, { label: "Groupable", checked: isAllGroupableColumns() ? true : isNoneGroupableColumns() ? false : null, onChange: (allGroupable) => {
+            header: ((0, jsx_runtime_1.jsx)(HeaderWithCheckbox, { label: "Groupable", checked: isAllGroupableColumns() ? true : isNoneGroupableColumns() ? false : null, onChange: (allGroupable) => {
                     if (allGroupable) {
                         setAllGroupable();
                     }
@@ -308,15 +301,14 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 } })),
             render: (params) => {
                 const col = params.data;
-                return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
+                return ((0, jsx_runtime_1.jsx)(CellWrapper, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
                             groupable ? setGroupableColumn(col.field) : setUngroupableColumn(col.field);
-                        } })));
+                        } }) }));
             },
         },
         filterable: {
             renderMenuIcon: false,
-            header: (React.createElement(HeaderWithCheckbox, { label: "Filterable", checked: isAllFilterableColumns() ? true : isNoneFilterableColumns() ? false : null, onChange: (allFilterable) => {
+            header: ((0, jsx_runtime_1.jsx)(HeaderWithCheckbox, { label: "Filterable", checked: isAllFilterableColumns() ? true : isNoneFilterableColumns() ? false : null, onChange: (allFilterable) => {
                     if (allFilterable) {
                         setAllFilterable();
                     }
@@ -326,16 +318,13 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 } })),
             render: (params) => {
                 const col = params.data;
-                return (React.createElement(CellWrapper, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
+                return ((0, jsx_runtime_1.jsx)(CellWrapper, { children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
                             filterable ? setFilterableColumn(col.field) : setUnFilterableColumn(col.field);
-                        } })));
+                        } }) }));
             },
         },
     };
-    return (React.createElement(Flex_1.Box, { className: (0, twMerge_1.twMerge)('twa:p-2 twa:h-full', theme) },
-        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
-            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, twMerge_1.twMerge)('twa:p-2 twa:h-full', theme), children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnTypes: {
                     default: {
                         defaultFlex: 1,
                         align: 'center',
@@ -343,7 +332,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                     },
                 }, rowHeight: 40, columnHeaderHeight: 60, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,
-                }, domProps: tableDOMProps, columns: columnsMap }))));
+                }, domProps: tableDOMProps, columns: columnsMap }) }) }));
 };
 function areEqual() {
     /**

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NocodeWizardFormBox = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../../../../components/Flex");
 const twMerge_1 = require("../../../../twMerge");
-const NocodeWizardFormBox = (props) => (React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('ab-NocodeWizardFormBox twa:p-2 twa:mb-2', props.className) }));
+const NocodeWizardFormBox = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('ab-NocodeWizardFormBox twa:p-2 twa:mb-2', props.className) }));
 exports.NocodeWizardFormBox = NocodeWizardFormBox;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfigurationWizard = 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 StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
@@ -134,28 +135,28 @@ const ConfigurationWizard = (props) => {
                 }
                 return true;
             },
-            render: () => (React.createElement(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableConfig: adaptableConfig, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: setAdaptableConfig, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
+            render: () => ((0, jsx_runtime_1.jsx)(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableConfig: adaptableConfig, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: setAdaptableConfig, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
         },
         {
             title: 'AdapTable Options',
             details: 'Configure Adaptable Options',
             isValid: () => adaptableConfig.adaptableOptions.adaptableId ? true : 'Adaptable ID is required',
-            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange })),
+            render: () => ((0, jsx_runtime_1.jsx)(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange })),
         },
         {
             title: 'AG Grid Options',
             details: 'Configure AG Grid Options',
-            render: () => (React.createElement(GridOptionsForm_1.default, { gridOptions: adaptableConfig.gridOptions, onChangedGridOptions: handleGridOptionsChange })),
+            render: () => ((0, jsx_runtime_1.jsx)(GridOptionsForm_1.default, { gridOptions: adaptableConfig.gridOptions, onChangedGridOptions: handleGridOptionsChange })),
         },
         {
             title: 'UI Elements',
             details: 'Configure UI Elements',
-            render: () => (React.createElement(UiOptionsForm_1.UIElementsForm, { adaptableOptions: adaptableConfig.adaptableOptions, gridOptions: adaptableConfig.gridOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange, onChangedGridOptions: handleGridOptionsChange })),
+            render: () => ((0, jsx_runtime_1.jsx)(UiOptionsForm_1.UIElementsForm, { adaptableOptions: adaptableConfig.adaptableOptions, gridOptions: adaptableConfig.gridOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange, onChangedGridOptions: handleGridOptionsChange })),
         },
         {
             title: 'Entitlements',
             details: 'Configure Entitlements',
-            render: () => (React.createElement(EntitlementsForm_1.default, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAptableOptions: handleAdaptableOptionsChange })),
+            render: () => ((0, jsx_runtime_1.jsx)(EntitlementsForm_1.default, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAptableOptions: handleAdaptableOptionsChange })),
         },
         /**
         financePlugin && {
@@ -184,6 +185,6 @@ const ConfigurationWizard = (props) => {
             ...sections,
         ];
     }
-    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableConfig, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
+    return ((0, jsx_runtime_1.jsx)(OnePageWizards_1.OnePageWizard, { data: adaptableConfig, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
 };
 exports.ConfigurationWizard = ConfigurationWizard;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizardColumnsStep.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfigurationWizardColumnsStep = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
 const ConfigurationWizardColumnsStep = (props) => {
     let theme = 'light';
@@ -10,7 +10,7 @@ const ConfigurationWizardColumnsStep = (props) => {
         props.adaptableConfig.adaptableOptions.initialState.Theme?.CurrentTheme) {
         theme = props.adaptableConfig.adaptableOptions.initialState.Theme.CurrentTheme;
     }
-    return (React.createElement(ColumnsList_1.default, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
+    return ((0, jsx_runtime_1.jsx)(ColumnsList_1.default, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
             props.setPrimaryKeyIsNotSelected(valid);
         }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: props.adaptableConfig.gridOptions?.columnDefs }));
 };

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Types_1 = require("../../../AdaptableState/Common/Types");
@@ -32,7 +33,7 @@ const EntitlementsListForm = (props) => {
     let abOptions = props.adaptableOptions;
     const entitlements = abOptions?.entitlementOptions?.moduleEntitlements ?? [];
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock_1.default, { className: "twa:mt-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return ((0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mt-2", children: "Entitlements cannot be customized, they are handled by a custom function." }));
     }
     const entitlementsMap = React.useMemo(() => {
         return entitlements.reduce((acc, entitlement) => {
@@ -67,14 +68,14 @@ const EntitlementsListForm = (props) => {
         });
     }, [abOptions?.entitlementOptions]);
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return ((0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: "Entitlements cannot be customized, they are handled by a custom function." }));
     }
     const columnsMap = {
         name: {
             header: 'Module Name',
             align: 'start',
             renderValue: (params) => {
-                return React.createElement(React.Fragment, null, params.data.name);
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: params.data.name });
             },
         },
         full: {
@@ -82,7 +83,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, GeneralConstants_1.ACCESS_LEVEL_FULL), checked: accessLevel === GeneralConstants_1.ACCESS_LEVEL_FULL }));
+                return ((0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleOnChange(module, GeneralConstants_1.ACCESS_LEVEL_FULL), checked: accessLevel === GeneralConstants_1.ACCESS_LEVEL_FULL }));
             },
         },
         readonly: {
@@ -90,7 +91,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, GeneralConstants_1.ACCESS_LEVEL_READ_ONLY), checked: accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }));
+                return ((0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleOnChange(module, GeneralConstants_1.ACCESS_LEVEL_READ_ONLY), checked: accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }));
             },
         },
         hidden: {
@@ -98,7 +99,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio_1.default, { onClick: () => handleOnChange(module, GeneralConstants_1.ACCESS_LEVEL_HIDDEN), checked: accessLevel === GeneralConstants_1.ACCESS_LEVEL_HIDDEN }));
+                return ((0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleOnChange(module, GeneralConstants_1.ACCESS_LEVEL_HIDDEN), checked: accessLevel === GeneralConstants_1.ACCESS_LEVEL_HIDDEN }));
             },
         },
     };
@@ -108,16 +109,14 @@ const EntitlementsListForm = (props) => {
         props.adaptableOptions.initialState.Theme?.CurrentTheme) {
         theme = props.adaptableOptions.initialState.Theme.CurrentTheme;
     }
-    return (React.createElement(Flex_1.Box, { className: `${theme} twa:flex-1 twa:h-full` },
-        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
-            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${theme} twa:flex-1 twa:h-full`, children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: data, primaryKey: "name", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }) }) }));
 };
 const DefaultEntitlementForm = (props) => {
     const abOptions = props.adaptableOptions;
     const entitlementOptions = props.adaptableOptions?.entitlementOptions;
     const defaultEntitlement = entitlementOptions?.defaultAccessLevel;
     if (typeof defaultEntitlement === 'function') {
-        return (React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, "Default Entitlement is controlled by a custom function"));
+        return ((0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: "Default Entitlement is controlled by a custom function" }));
     }
     const handleDefaultEntitlementChange = React.useCallback((accessLevel) => {
         props.onChangedAptableOptions({
@@ -128,16 +127,10 @@ const DefaultEntitlementForm = (props) => {
             },
         });
     }, [abOptions?.entitlementOptions?.defaultAccessLevel]);
-    return (React.createElement(FormLayout_1.default, { className: "twa:mb-2" },
-        React.createElement(FormLayout_1.FormRow, { label: "Default Entitlement:" },
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange(GeneralConstants_1.ACCESS_LEVEL_FULL), checked: defaultEntitlement === GeneralConstants_1.ACCESS_LEVEL_FULL, className: "twa:mr-3" }, "Visible"),
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange(GeneralConstants_1.ACCESS_LEVEL_READ_ONLY), checked: defaultEntitlement === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, className: "twa:mr-3" }, "Read Only"),
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange(GeneralConstants_1.ACCESS_LEVEL_HIDDEN), checked: defaultEntitlement === GeneralConstants_1.ACCESS_LEVEL_HIDDEN }, "Hidden"))));
+    return ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Default Entitlement:", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleDefaultEntitlementChange(GeneralConstants_1.ACCESS_LEVEL_FULL), checked: defaultEntitlement === GeneralConstants_1.ACCESS_LEVEL_FULL, className: "twa:mr-3", children: "Visible" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleDefaultEntitlementChange(GeneralConstants_1.ACCESS_LEVEL_READ_ONLY), checked: defaultEntitlement === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, className: "twa:mr-3", children: "Read Only" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleDefaultEntitlementChange(GeneralConstants_1.ACCESS_LEVEL_HIDDEN), checked: defaultEntitlement === GeneralConstants_1.ACCESS_LEVEL_HIDDEN, children: "Hidden" })] }) }));
 };
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-        React.createElement(DefaultEntitlementForm, { ...props }),
-        React.createElement(EntitlementsListForm, { ...props })));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(DefaultEntitlementForm, { ...props }), (0, jsx_runtime_1.jsx)(EntitlementsListForm, { ...props })] }));
 };
 exports.default = EntitlementsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -1,43 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Flex_1 = require("../../../components/Flex");
 const GridOptionsForm = (props) => {
     let { gridOptions } = props;
-    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-        React.createElement(HelpBlock_1.default, null, "Grid Options"),
-        React.createElement(FormLayout_1.default, { className: "twa:m-2", columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Enable Cell Selection" },
-                React.createElement(CheckBox_1.CheckBox, { checked: !!gridOptions.cellSelection, onChange: (enableCellSelection) => {
-                        gridOptions = { ...gridOptions, cellSelection: enableCellSelection };
-                        props.onChangedGridOptions(gridOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Show Filter Bar" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.defaultColDef?.floatingFilter, onChange: (floatingFilter) => {
-                        gridOptions = {
-                            ...gridOptions,
-                            defaultColDef: {
-                                floatingFilter,
-                            },
-                        };
-                        props.onChangedGridOptions(gridOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
-                        gridOptions = {
-                            ...gridOptions,
-                            suppressColumnVirtualisation: suppressColumnVirtualisation,
-                        };
-                        props.onChangedGridOptions(gridOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
-                        gridOptions = { ...gridOptions, suppressMenuHide: suppressMenuHide };
-                        props.onChangedGridOptions(gridOptions);
-                    } })))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Grid Options" }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:m-2", columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Enable Cell Selection", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: !!gridOptions.cellSelection, onChange: (enableCellSelection) => {
+                                gridOptions = { ...gridOptions, cellSelection: enableCellSelection };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Filter Bar", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: gridOptions.defaultColDef?.floatingFilter, onChange: (floatingFilter) => {
+                                gridOptions = {
+                                    ...gridOptions,
+                                    defaultColDef: {
+                                        floatingFilter,
+                                    },
+                                };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
+                                gridOptions = {
+                                    ...gridOptions,
+                                    suppressColumnVirtualisation: suppressColumnVirtualisation,
+                                };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Column Menu Button", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
+                                gridOptions = { ...gridOptions, suppressMenuHide: suppressMenuHide };
+                                props.onChangedGridOptions(gridOptions);
+                            } }) })] })] }));
 };
 exports.default = GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIOptionsSidebarForm = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
@@ -39,7 +39,7 @@ const UIOptionsSidebarForm = (props) => {
     const { gridOptions, onChange } = props;
     const sideBar = prepareSidebarDef(gridOptions.sideBar);
     const renderSidebarCheckbox = (sidebarName) => {
-        return (React.createElement(CheckBox_1.CheckBox, { className: "twa:mr-3", key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
+        return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:mr-3", checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check), children: StringExtensions_1.default.Humanize(sidebarName) }, sidebarName));
     };
     const handleToolpanelsChange = (panelName, check) => {
         let newPanels = sideBar?.toolPanels ?? [];
@@ -77,15 +77,9 @@ const UIOptionsSidebarForm = (props) => {
         };
         props.onChange(newGridOptions);
     };
-    return (React.createElement(Flex_1.Box, null,
-        React.createElement(HelpBlock_1.default, null, "Tool Panels"),
-        React.createElement(Flex_1.Box, { className: "twa:m-2" },
-            React.createElement(Flex_1.Flex, { className: "twa:mb-2" }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
-            React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
-                React.createElement(FormLayout_1.FormRow, { label: "Position" },
-                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
-                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
-                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
-                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Tool Panels" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:m-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-2", children: ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox) }), (0, jsx_runtime_1.jsx)(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: [
+                                    { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
+                                    { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
+                                ], children: sidebarPosition === 'left' ? 'Left' : 'Right' }) }) })] })] }));
 };
 exports.UIOptionsSidebarForm = UIOptionsSidebarForm;