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

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -2,16 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnValuesSelect = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const date_fns_1 = require("date-fns");
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
-const Select_1 = require("../../../components/Select");
 const TreeDropdown_1 = require("../../../components/Tree/TreeDropdown");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
-const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
+const Combobox_1 = require("../../../components/Combobox");
+const AdaptableColumnFilter_1 = require("../ColumnFilter/AdaptableColumnFilter");
+const TreeDropdown_2 = require("../../../components/Tree/TreeDropdown");
 const baseClassName = 'ab-ListBoxFilterForm';
 // used for displaying the date values in the input
 function toDateDisplayValue(values) {
@@ -44,11 +46,59 @@ const dateOnChangeParser = (value) => {
 };
 const EMPTY_ARRAY = [];
 const ColumnValuesSelect = (props) => {
+    const location = (0, AdaptableColumnFilter_1.useColumnFilterLocation)();
     const column = props.column;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
     let selectedColumnValues = props.value || EMPTY_ARRAY;
-    const optionsFromProps = Array.isArray(props.options) ? props.options : EMPTY_ARRAY;
+    const rawOptionsFromProps = Array.isArray(props.options) ? props.options : EMPTY_ARRAY;
+    // Drop empty entries for all column types; Memoise them because Date cols can leak them when using `customInFilterValues` + `orderedValues`
+    const optionsFromProps = (0, react_1.useMemo)(() => {
+        if (rawOptionsFromProps === EMPTY_ARRAY) {
+            return rawOptionsFromProps;
+        }
+        let hasNullOrEmpty = false;
+        for (const option of rawOptionsFromProps) {
+            if (StringExtensions_1.StringExtensions.IsNullOrEmpty(option?.value)) {
+                hasNullOrEmpty = true;
+                break;
+            }
+        }
+        if (!hasNullOrEmpty) {
+            return rawOptionsFromProps;
+        }
+        return rawOptionsFromProps.filter((option) => !StringExtensions_1.StringExtensions.IsNullOrEmpty(option?.value));
+    }, [rawOptionsFromProps]);
     const value = [];
+    // For `customInFilterValues` + `orderedValues` on a date column, the
+    // options arrive with raw `Date` objects as `value`. `GridFilterTreeDropdown`
+    // round-trips path keys via `JSON.stringify`/`JSON.parse`, which converts
+    // `Date` -> ISO string. The stored selection paths therefore become
+    // strings while the option/treePath values are still `Date` references —
+    // and `TreeSelectionState`'s internal DeepMap uses strict reference
+    // equality, so a clicked item never matches its tree path on the next
+    // render (no checkbox, click looks like a no-op).
+    //
+    // Normalise `Date` option values to ISO strings up front so every layer
+    // (treePaths, items, selectionMap, value, onChange output) speaks the
+    // same primitive. Tree-shaped date options (the default-values flow) use
+    // string values like "2024" / "2024-01" / "2024-01-01" already and pass
+    // through unchanged.
+    const dateOptions = (0, react_1.useMemo)(() => {
+        if (column.dataType !== 'date') {
+            return optionsFromProps;
+        }
+        const convert = (option) => {
+            const value = option?.value;
+            const nextValue = value instanceof Date ? value.toISOString() : value;
+            const children = Array.isArray(option?.children)
+                ? option.children.map(convert)
+                : option?.children;
+            if (nextValue === value && children === option?.children) {
+                return option;
+            }
+            return { ...option, value: nextValue, children };
+        };
+        return optionsFromProps.map(convert);
+    }, [column.dataType, optionsFromProps]);
     if (column.dataType === 'date') {
         // we might have a use-case where users might want to get rid of a tree level
         // because it may contain only one child. currently,
@@ -67,17 +117,21 @@ const ColumnValuesSelect = (props) => {
                     option.children.forEach((child) => withOption(child, optionPath));
                 }
             };
-            optionsFromProps.forEach((option) => withOption(option, []));
+            dateOptions.forEach((option) => withOption(option, []));
             return valueToPath;
-        }, [optionsFromProps]);
+        }, [dateOptions]);
         selectedColumnValues = selectedColumnValues
             .map((v) => {
-            return valueToPath.get(v);
+            // Saved selections may be raw `Date` objects from older
+            // `orderedValues` snapshots; coerce to the same ISO string we use
+            // for option keys so the lookup still hits.
+            const key = v instanceof Date ? v.toISOString() : v;
+            return valueToPath.get(key);
         })
             .filter(Boolean);
     }
     const options = column.dataType === 'date' || column.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN
-        ? optionsFromProps
+        ? dateOptions
         : optionsFromProps.filter((distinctValue) => {
             let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
             // special case for date objects, need to check against string values
@@ -92,32 +146,32 @@ const ColumnValuesSelect = (props) => {
             }
             return true;
         });
-    const menuStyle = React.useMemo(() => {
-        return {
-            minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 160px))`,
-        };
-    }, [column.columnId]);
     const treeDropdownToDisplayValue = React.useMemo(() => {
         if (column.dataType === 'date') {
             return toDateDisplayValue;
         }
         return (paths) => (0, TreeDropdown_1.toDisplayValueFromOptionTree)(paths, optionsFromProps);
     }, [column.dataType, optionsFromProps]);
-    const component = column.dataType === 'date' || column.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN ? (React.createElement(TreeDropdown_1.TreeDropdown, { style: {
-            width: '100%',
-            height: '100%',
-            ...props.selectProps?.styles?.container,
-        }, toDisplayValue: treeDropdownToDisplayValue, fieldStyle: {
-            boxShadow: 'none',
-            ...props.selectProps?.styles?.control,
-            ...props.selectProps?.styles?.valueContainer,
-        }, resizable: true, onChange: column.dataType === 'date'
+    const selectProps = (props.selectProps || {});
+    const onOpenChange = props.onMenuOpen
+        ? (open) => {
+            if (open) {
+                props.onMenuOpen?.();
+            }
+        }
+        : undefined;
+    const component = column.dataType === 'date' || column.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN ? ((0, jsx_runtime_1.jsx)(TreeDropdown_2.GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, resizable: true, onValueChange: column.dataType === 'date'
             ? (value) => props.onChange(dateOnChangeParser(value))
-            : props.onChange, options: options, 
+            : props.onChange, items: options, 
         // for dates, the treeDateOptions have ids that are numbers
         // so we have to add the `toDateValue` function to convert the values to the correct format
-        value: selectedColumnValues, primaryKey: 'value', onMenuOpen: props.onMenuOpen, onMouseDown: (e) => e.stopPropagation() })) : (React.createElement(Select_1.Select, { key: "select", isMulti: true, resizable: true, showHeaderSelectionCheckbox: true, searchable: 'menulist', closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, onMenuOpen: props.onMenuOpen, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
-    return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
+        value: selectedColumnValues, primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: location === 'filterForm' })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: location === 'filterForm' }, "select"));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, join_1.default)(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
+            if (e.key === 'Tab') {
+                // Prevent AG Grid from hijacking Tab; keep browser default focus navigation.
+                e.stopPropagation();
+                return;
+            }
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {
                 // see #ensure-keyboard-navigation-works-in-column-values-filter
@@ -126,6 +180,6 @@ const ColumnValuesSelect = (props) => {
                 //
                 // the solution is to reassign the stopPropagation method to a function that does nothing
             };
-        } }, component));
+        }, children: component }));
 };
 exports.ColumnValuesSelect = ColumnValuesSelect;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableFormControlTextClear = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
@@ -12,30 +13,27 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-defaultbackground twa:overflow-visible twa:w-full', props.className), style: props.style },
-        React.createElement(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
-                inputRef.current = r;
-                if (!ref) {
-                    return;
-                }
-                if (typeof ref === 'function') {
-                    ref(r);
-                }
-                else {
-                    ref.current = r;
-                }
-            }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
-        props.actionTools,
-        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
-                props.OnTextChange('');
-                const input = inputRef.current;
-                if (!focusOnClear) {
-                    return;
-                }
-                requestAnimationFrame(() => {
-                    if (input && input.focus) {
-                        input.focus();
+    return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
+                    inputRef.current = r;
+                    if (!ref) {
+                        return;
                     }
-                });
-            }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })));
+                    if (typeof ref === 'function') {
+                        ref(r);
+                    }
+                    else {
+                        ref.current = r;
+                    }
+                }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }), props.actionTools, (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
+                    props.OnTextChange('');
+                    const input = inputRef.current;
+                    if (!focusOnClear) {
+                        return;
+                    }
+                    requestAnimationFrame(() => {
+                        if (input && input.focus) {
+                            input.focus();
+                        }
+                    });
+                }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })] }));
 });

package/src/View/Components/ModuleProfile.js

@@ -2,17 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModuleProfile = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-/// <reference path="../../typings/.d.ts" />
 const icons_1 = require("../../components/icons");
 class ModuleProfile extends React.Component {
     render() {
-        return (React.createElement("div", null,
-            React.createElement(icons_1.Icon, { name: this.props.moduleInfo.Glyph, style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                } }),
-            ' ',
-            this.props.moduleInfo.FriendlyName));
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: this.props.moduleInfo.Glyph, style: {
+                        fill: 'var(--ab-color-text-on-primary)',
+                    } }), ' ', this.props.moduleInfo.FriendlyName] }));
     }
 }
 exports.ModuleProfile = ModuleProfile;

package/src/View/Components/ModuleSummary/ModuleDetail.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModuleDetail = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const EntityListActionButtons_1 = require("../Buttons/EntityListActionButtons");
 const SummaryRowItem_1 = require("./SummaryRowItem");
@@ -9,11 +10,11 @@ class ModuleDetail extends React.Component {
     render() {
         let summaryItems = [];
         this.props.showBold
-            ? summaryItems.push(React.createElement("b", null, this.props.item1))
-            : summaryItems.push(React.createElement("i", null, this.props.item1));
-        summaryItems.push(React.createElement("i", null, this.props.item2));
-        summaryItems.push(React.createElement(EntityListActionButtons_1.EntityListActionButtons, { justifyContent: "start", confirmDeleteAction: this.props.onDelete, showEdit: this.props.showEdit, editClick: () => this.props.onEdit(), shareClick: (config) => this.props.onShare(config), showShare: this.props.showShare, entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
-        return React.createElement(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
+            ? summaryItems.push((0, jsx_runtime_1.jsx)("b", { children: this.props.item1 }))
+            : summaryItems.push((0, jsx_runtime_1.jsx)("i", { children: this.props.item1 }));
+        summaryItems.push((0, jsx_runtime_1.jsx)("i", { children: this.props.item2 }));
+        summaryItems.push((0, jsx_runtime_1.jsx)(EntityListActionButtons_1.EntityListActionButtons, { justifyContent: "start", confirmDeleteAction: this.props.onDelete, showEdit: this.props.showEdit, editClick: () => this.props.onEdit(), shareClick: (config) => this.props.onShare(config), showShare: this.props.showShare, entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
+        return (0, jsx_runtime_1.jsx)(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
     }
 }
 exports.ModuleDetail = ModuleDetail;

package/src/View/Components/ModuleSummary/ModuleHeader.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModuleHeader = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-/// <reference path="../../typings/.d.ts" />
 const ButtonNew_1 = require("../Buttons/ButtonNew");
 const SummaryRowItem_1 = require("./SummaryRowItem");
 const ModuleProfile_1 = require("../ModuleProfile");
 class ModuleHeader extends React.Component {
     render() {
         let summaryItems = [];
-        let newButton = this.props.newButtonDisabled ? null : (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => this.props.onNew(), tooltip: 'Create ' + this.props.newButtonTooltip, accessLevel: this.props.accessLevel }));
-        summaryItems.push(React.createElement("b", null, React.createElement(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo })));
+        let newButton = this.props.newButtonDisabled ? null : ((0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: () => this.props.onNew(), tooltip: 'Create ' + this.props.newButtonTooltip, accessLevel: this.props.accessLevel }));
+        summaryItems.push((0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo }) }));
         summaryItems.push(this.props.moduleSummary);
         summaryItems.push(newButton);
-        return React.createElement(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
+        return (0, jsx_runtime_1.jsx)(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
     }
 }
 exports.ModuleHeader = ModuleHeader;

package/src/View/Components/ModuleSummary/SummaryRowItem.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SummaryRowItem = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-/// <reference path="../../typings/.d.ts" />
 const AdaptableObjectRow_1 = require("../AdaptableObjectRow");
 class SummaryRowItem extends React.Component {
     render() {
@@ -11,7 +11,7 @@ class SummaryRowItem extends React.Component {
         colItems.push({ Size: 3, Content: this.props.SummaryItems[0] });
         colItems.push({ Size: 7, Content: this.props.SummaryItems[1] });
         colItems.push({ Size: 2, Content: this.props.SummaryItems[2] });
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
+        return (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
     }
 }
 exports.SummaryRowItem = SummaryRowItem;

package/src/View/Components/ModuleValueSelector/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModuleValueSelector = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ValueSelector_1 = require("../ValueSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
@@ -38,6 +38,6 @@ const ModuleValueSelector = (props) => {
         return (module.toLowerCase().includes(searchText.toLowerCase()) ||
             withSpaces.toLowerCase().includes(searchText.toLowerCase()));
     }, []);
-    return (React.createElement(ValueSelector_1.ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, showFilterInput: true, filter: moduleFilter, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
+    return ((0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, showFilterInput: true, filter: moduleFilter, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
 };
 exports.ModuleValueSelector = ModuleValueSelector;

package/src/View/Components/NewScopeComponent.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewScopeComponent = exports.renderScopeSummary = exports.isScopeValid = 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 Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
@@ -54,15 +55,7 @@ const renderScopeSummary = (scope, labels) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const scopeApi = adaptable.api.columnScopeApi;
     const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex_1.Box, null,
-            React.createElement(OnePageAdaptableWizard_1.SummaryText, { className: "twa:mb-0" }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
-        React.createElement(Flex_1.Box, { className: "twa:overflow-hidden" }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(OnePageAdaptableWizard_1.SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '' }, labels.scopeColumns),
-            columnsInScope.length ? (React.createElement(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null)) : null),
-        React.createElement(Flex_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, labels.scopeDataTypes),
-            React.createElement(Tag_1.TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) }))) : null)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.SummaryText, { className: "twa:mb-0", children: scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '', children: labels.scopeColumns }), columnsInScope.length ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mb-2", children: labels.scopeDataTypes }), (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) })] })) : null })] }));
 };
 exports.renderScopeSummary = renderScopeSummary;
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
@@ -132,42 +125,18 @@ const NewScopeComponent = (props) => {
     const hasColumnTypes = React.useMemo(() => {
         return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged },
-        props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1 }, "All Columns"))),
-        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1 }, "Selected Columns"))),
-        !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1 }, "Data Types"))),
-        hasColumnTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "ColumnType" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1 }, "Column Types"))),
-        props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
-            React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, props.descriptions.rowScope))),
-        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto" },
-            React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
-                React.createElement(Flex_1.Box, { className: "twa:text-2" }, props.descriptions.columnScope),
-                React.createElement(Flex_1.Box, { className: "twa:flex-3" }),
-                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
-            React.createElement(Flex_1.Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1" },
-                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged })))),
-        !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
-            React.createElement(Flex_1.Box, null,
-                props.descriptions.dataTypeScope && (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2" }, props.descriptions.dataTypeScope)),
-                React.createElement(Flex_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: !!dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
-        hasColumnTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope" },
-            React.createElement(Flex_1.Box, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
-                        let columnTypes = [].concat('ColumnTypes' in props.scope ? props.scope.ColumnTypes : []);
-                        if (checked) {
-                            columnTypes.push(columnType);
-                        }
-                        else {
-                            columnTypes = columnTypes.filter((ct) => ct !== columnType);
-                        }
-                        let newScope = {
-                            ColumnTypes: columnTypes,
-                        };
-                        props.updateScope(newScope);
-                    } }, (0, AdaptableColumn_1.getColumnTypeFriendlyName)(columnType))))))))));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged, children: [props.hideWholeRow ? null : ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "Row", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1, children: "All Columns" }) })), !props.disableColumns && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "Column", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1, children: "Selected Columns" }) })), !props.disableDataTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "DataType", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1, children: "Data Types" }) })), hasColumnTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ColumnType", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1, children: "Column Types" }) })), props.hideWholeRow ? null : ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: props.descriptions.rowScope }) })), !props.disableColumns && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: props.descriptions.columnScope }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-3" }), (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged }) })] })), !props.disableDataTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [props.descriptions.dataTypeScope && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2", children: props.descriptions.dataTypeScope })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: dataTypeOptions.map((dataTypeOption) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, checked: !!dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value), children: dataTypeOption.label }, dataTypeOption.value))) })] }) })), hasColumnTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: api.columnApi.getColumnTypes()?.map?.((columnType) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
+                                let columnTypes = [].concat('ColumnTypes' in props.scope ? props.scope.ColumnTypes : []);
+                                if (checked) {
+                                    columnTypes.push(columnType);
+                                }
+                                else {
+                                    columnTypes = columnTypes.filter((ct) => ct !== columnType);
+                                }
+                                let newScope = {
+                                    ColumnTypes: columnTypes,
+                                };
+                                props.updateScope(newScope);
+                            }, children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(columnType) }, columnType))) }) }) }))] }));
 };
 exports.NewScopeComponent = NewScopeComponent;

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelDashboard = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Dashboard_1 = require("../../../../components/Dashboard");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
@@ -16,7 +17,7 @@ class PanelDashboard extends React.Component {
     };
     render() {
         const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;
-        return (React.createElement(Dashboard_1.DashboardToolbar, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel }, children));
+        return ((0, jsx_runtime_1.jsx)(Dashboard_1.DashboardToolbar, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel, children: children }));
     }
 }
 exports.PanelDashboard = PanelDashboard;

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelToolPanel = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const ButtonClose_1 = require("../../Buttons/ButtonClose");
@@ -20,12 +21,8 @@ class PanelToolPanel extends React.Component {
     };
     render() {
         const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
-        let header = (React.createElement(React.Fragment, null,
-            !isMinimised ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise twa:mr-1", onClick: () => onMinimiseChanged() })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise twa:mr-1", onClick: () => onMinimiseChanged() })),
-            React.createElement(Flex_1.Flex, { className: "ab-ToolPanelPanel__header-text twa:flex-1 twa:ml-0", alignItems: "center" }, headerText),
-            onConfigure && (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, className: "ab-ToolPanelPanel__header-configure-button twa:ml-1", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
-            onClose && (React.createElement(ButtonClose_1.ButtonClose, { className: "ab-ToolPanelPanel__header-close-button twa:ml-0", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
-        return (React.createElement(Panel_1.default, { ...props, className: (0, twMerge_1.twMerge)('ab-ToolPanelPanel', props.className), header: header, style: {
+        let header = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMinimised ? ((0, jsx_runtime_1.jsx)(ButtonMinimise_1.ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise twa:mr-1", onClick: () => onMinimiseChanged() })) : ((0, jsx_runtime_1.jsx)(ButtonMaximise_1.ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise twa:mr-1", onClick: () => onMinimiseChanged() })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "ab-ToolPanelPanel__header-text twa:flex-1 twa:ml-0", alignItems: "center", children: headerText }), onConfigure && ((0, jsx_runtime_1.jsx)(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, className: "ab-ToolPanelPanel__header-configure-button twa:ml-1", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })), onClose && ((0, jsx_runtime_1.jsx)(ButtonClose_1.ButtonClose, { className: "ab-ToolPanelPanel__header-close-button twa:ml-0", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))] }));
+        return ((0, jsx_runtime_1.jsx)(Panel_1.default, { ...props, className: (0, twMerge_1.twMerge)('ab-ToolPanelPanel', props.className), header: header, style: {
                 ...props.style,
             }, headerProps: {
                 ...props.headerProps,

package/src/View/Components/Panels/PanelWithButton.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelWithButton = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
@@ -12,16 +13,7 @@ const Flex_1 = require("../../../components/Flex");
 const PanelWithButton = (props) => {
     const { buttonContent } = props;
     const IconCmp = icons_1.allIcons[props.glyphicon];
-    const header = (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
-        React.createElement(Flex_1.Flex, { alignItems: "center" },
-            props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
-            React.createElement(Flex_1.Box, { "data-name": "space-before", className: "twa:mr-2" }),
-            props.headerText,
-            React.createElement(Flex_1.Box, { "data-name": "space-after", className: "twa:mr-2" }),
-            props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))),
-        React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-        buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null) }, buttonContent)) : null,
-        props.button ? React.cloneElement(props.button) : null));
-    return (React.createElement(Panel_1.default, { className: (0, tailwind_merge_1.twMerge)('twa:flex-1 twa:rounded-none twa:border-none', props.className), bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style }, props.children));
+    const header = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:w-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [props.glyphicon != null && (IconCmp ? (0, jsx_runtime_1.jsx)(IconCmp, {}) : null), (0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "space-before", className: "twa:mr-2" }), props.headerText, (0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "space-after", className: "twa:mr-2" }), props.infoLink != null && !props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), buttonContent ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null), children: buttonContent })) : null, props.button ? React.cloneElement(props.button) : null] }));
+    return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: (0, tailwind_merge_1.twMerge)('twa:flex-1 twa:rounded-none twa:border-none', props.className), bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style, children: props.children }));
 };
 exports.PanelWithButton = PanelWithButton;

package/src/View/Components/Panels/PanelWithImage.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelWithImage = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const icons_1 = require("../../../components/icons");
@@ -19,21 +20,12 @@ class PanelWithImageCmp extends React.Component {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = (React.createElement(Flex_1.Flex, { className: "twa:flex-1" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(Flex_1.Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle },
-                    IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(Flex_1.Box, { className: "twa:mr-2" }),
-                    this.props.header ?? '',
-                    React.createElement(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }),
-                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                        ) }))),
-                React.createElement(Flex_1.Flex, { className: "twa:flex-1" }),
-                this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(Panel_1.default, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: (0, twMerge_1.twMerge)('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
+        let headerRow = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle, children: [IconCmp ? (0, jsx_runtime_1.jsx)(IconCmp, {}) : null, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2" }), this.props.header ?? '', (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), this.props.infoLink != null && !this.props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                                ) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), this.props.button && React.cloneElement(this.props.button)] }) }));
+        return ((0, jsx_runtime_1.jsx)(Panel_1.default, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: (0, twMerge_1.twMerge)('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
                 ...this.props.bodyProps,
                 className: (0, twMerge_1.twMerge)('twa:p-0', this.props.bodyProps?.className),
-            } }, this.props.children));
+            }, children: this.props.children }));
     }
 }
 exports.PanelWithImage = PanelWithImageCmp;

package/src/View/Components/Panels/PanelWithRow.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelWithRow = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Flex_1 = require("../../../components/Flex");
@@ -10,12 +11,11 @@ const Flex_1 = require("../../../components/Flex");
 // let { buttonContent, ...other } = this.props
 class PanelWithRow extends React.Component {
     render() {
-        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(Flex_1.Box, { key: colItem.key || colItem.Content || index, className: "twa:font-bold twa:text-3 twa:px-1", style: {
+        const headerItems = this.props.colItems.map((colItem, index) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-bold twa:text-3 twa:px-1", style: {
                 flex: colItem.Size,
-            } }, colItem.Content)));
-        const header = (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" }, headerItems));
-        return (React.createElement("div", { style: this.props.style, className: this.props.className },
-            React.createElement(Panel_1.default, { bodyScroll: true, header: header, border: this.props.border, bodyProps: this.props.bodyProps }, this.props.children)));
+            }, children: colItem.Content }, colItem.key || colItem.Content || index)));
+        const header = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:w-full", children: headerItems }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: this.props.style, className: this.props.className, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { bodyScroll: true, header: header, border: this.props.border, bodyProps: this.props.bodyProps, children: this.props.children }) }));
     }
 }
 exports.PanelWithRow = PanelWithRow;

package/src/View/Components/Popups/AdaptableLoadingScreen.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableLoadingScreen = AdaptableLoadingScreen;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
 const Flex_1 = require("../../../components/Flex");
@@ -18,8 +19,5 @@ function AdaptableLoadingScreen(props) {
             };
         }
     }, [loadingScreenDelay]);
-    return (React.createElement(Dialog_1.default, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen twa:min-h-auto" },
-        React.createElement(Flex_1.Box, { className: "twa:p-3" },
-            React.createElement("h4", null, loadingScreenTitle ?? 'Initialising Grid'),
-            React.createElement("p", null, loadingScreenText ?? 'Retrieving your settings and setting up the grid...'))));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen twa:min-h-auto", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-3", children: [(0, jsx_runtime_1.jsx)("h4", { children: loadingScreenTitle ?? 'Initialising Grid' }), (0, jsx_runtime_1.jsx)("p", { children: loadingScreenText ?? 'Retrieving your settings and setting up the grid...' })] }) }));
 }