@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import FieldWrap from '../../../components/FieldWrap';
@@ -8,30 +9,27 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap, { onClick: props.onClick, className: twMerge('twa:bg-defaultbackground twa:overflow-visible twa:w-full', props.className), style: props.style },
-        React.createElement(Input, { "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, { 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 (_jsxs(FieldWrap, { onClick: props.onClick, className: twMerge('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [_jsx(Input, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
+                    inputRef.current = r;
+                    if (!ref) {
+                        return;
                     }
-                });
-            }, disabled: 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, _jsx(SimpleButton, { 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.IsNullOrEmpty(props.value.toString()) })] }));
 });

package/src/View/Components/ModuleProfile.js

@@ -1,13 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-/// <reference path="../../typings/.d.ts" />
 import { Icon } from '../../components/icons';
 export class ModuleProfile extends React.Component {
     render() {
-        return (React.createElement("div", null,
-            React.createElement(Icon, { name: this.props.moduleInfo.Glyph, style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                } }),
-            ' ',
-            this.props.moduleInfo.FriendlyName));
+        return (_jsxs("div", { children: [_jsx(Icon, { name: this.props.moduleInfo.Glyph, style: {
+                        fill: 'var(--ab-color-text-on-primary)',
+                    } }), ' ', this.props.moduleInfo.FriendlyName] }));
     }
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { EntityListActionButtons } from '../Buttons/EntityListActionButtons';
 import { SummaryRowItem } from './SummaryRowItem';
@@ -5,10 +6,10 @@ export 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, { 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, { SummaryItems: summaryItems });
+            ? summaryItems.push(_jsx("b", { children: this.props.item1 }))
+            : summaryItems.push(_jsx("i", { children: this.props.item1 }));
+        summaryItems.push(_jsx("i", { children: this.props.item2 }));
+        summaryItems.push(_jsx(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 _jsx(SummaryRowItem, { SummaryItems: summaryItems });
     }
 }

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

@@ -1,15 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-/// <reference path="../../typings/.d.ts" />
 import { ButtonNew } from '../Buttons/ButtonNew';
 import { SummaryRowItem } from './SummaryRowItem';
 import { ModuleProfile } from '../ModuleProfile';
 export class ModuleHeader extends React.Component {
     render() {
         let summaryItems = [];
-        let newButton = this.props.newButtonDisabled ? null : (React.createElement(ButtonNew, { onClick: () => this.props.onNew(), tooltip: 'Create ' + this.props.newButtonTooltip, accessLevel: this.props.accessLevel }));
-        summaryItems.push(React.createElement("b", null, React.createElement(ModuleProfile, { moduleInfo: this.props.moduleInfo })));
+        let newButton = this.props.newButtonDisabled ? null : (_jsx(ButtonNew, { onClick: () => this.props.onNew(), tooltip: 'Create ' + this.props.newButtonTooltip, accessLevel: this.props.accessLevel }));
+        summaryItems.push(_jsx("b", { children: _jsx(ModuleProfile, { moduleInfo: this.props.moduleInfo }) }));
         summaryItems.push(this.props.moduleSummary);
         summaryItems.push(newButton);
-        return React.createElement(SummaryRowItem, { SummaryItems: summaryItems });
+        return _jsx(SummaryRowItem, { SummaryItems: summaryItems });
     }
 }

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

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-/// <reference path="../../typings/.d.ts" />
 import { AdaptableObjectRow } from '../AdaptableObjectRow';
 export class SummaryRowItem extends React.Component {
     render() {
@@ -7,6 +7,6 @@ export 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, { colItems: colItems });
+        return _jsx(AdaptableObjectRow, { colItems: colItems });
     }
 }

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ValueSelector } from '../ValueSelector';
 import { useAdaptable } from '../../AdaptableContext';
 import { useMemo, useCallback } from 'react';
@@ -34,5 +34,5 @@ export const ModuleValueSelector = (props) => {
         return (module.toLowerCase().includes(searchText.toLowerCase()) ||
             withSpaces.toLowerCase().includes(searchText.toLowerCase()));
     }, []);
-    return (React.createElement(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 (_jsx(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 }));
 };

package/src/View/Components/NewScopeComponent.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState } from 'react';
 import Radio from '../../components/Radio';
@@ -49,15 +50,7 @@ export const renderScopeSummary = (scope, labels) => {
     const adaptable = useAdaptable();
     const scopeApi = adaptable.api.columnScopeApi;
     const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Box, null,
-            React.createElement(SummaryText, { className: "twa:mb-0" }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
-        React.createElement(Box, { className: "twa:overflow-hidden" }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '' }, labels.scopeColumns),
-            columnsInScope.length ? (React.createElement(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null)) : null),
-        React.createElement(Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(Box, { className: "twa:text-2 twa:mb-2" }, labels.scopeDataTypes),
-            React.createElement(TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) }))) : null)));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsx(SummaryText, { className: "twa:mb-0", children: scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null }) }), _jsx(Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: [_jsx(SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '', children: labels.scopeColumns }), columnsInScope.length ? (_jsx(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), _jsx(Box, { children: 'DataTypes' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: labels.scopeDataTypes }), _jsx(TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) })] })) : null })] }));
 };
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 export const NewScopeComponent = (props) => {
@@ -126,41 +119,17 @@ export const NewScopeComponent = (props) => {
     const hasColumnTypes = React.useMemo(() => {
         return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged },
-        props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
-            React.createElement(Radio, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1 }, "All Columns"))),
-        !props.disableColumns && (React.createElement(Tabs.Tab, { value: "Column" },
-            React.createElement(Radio, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1 }, "Selected Columns"))),
-        !props.disableDataTypes && (React.createElement(Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1 }, "Data Types"))),
-        hasColumnTypes && (React.createElement(Tabs.Tab, { value: "ColumnType" },
-            React.createElement(Radio, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1 }, "Column Types"))),
-        props.hideWholeRow ? null : (React.createElement(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
-            React.createElement(Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, props.descriptions.rowScope))),
-        !props.disableColumns && (React.createElement(Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto" },
-            React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
-                React.createElement(Box, { className: "twa:text-2" }, props.descriptions.columnScope),
-                React.createElement(Box, { className: "twa:flex-3" }),
-                React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
-            React.createElement(Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1" },
-                React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged })))),
-        !props.disableDataTypes && (React.createElement(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
-            React.createElement(Box, null,
-                props.descriptions.dataTypeScope && (React.createElement(Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2" }, props.descriptions.dataTypeScope)),
-                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(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.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope" },
-            React.createElement(Box, null,
-                React.createElement(Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(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);
-                    } }, getColumnTypeFriendlyName(columnType))))))))));
+    return (_jsxs(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged, children: [props.hideWholeRow ? null : (_jsx(Tabs.Tab, { value: "Row", children: _jsx(Radio, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1, children: "All Columns" }) })), !props.disableColumns && (_jsx(Tabs.Tab, { value: "Column", children: _jsx(Radio, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1, children: "Selected Columns" }) })), !props.disableDataTypes && (_jsx(Tabs.Tab, { value: "DataType", children: _jsx(Radio, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1, children: "Data Types" }) })), hasColumnTypes && (_jsx(Tabs.Tab, { value: "ColumnType", children: _jsx(Radio, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1, children: "Column Types" }) })), props.hideWholeRow ? null : (_jsx(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope", children: _jsx(Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: props.descriptions.rowScope }) })), !props.disableColumns && (_jsxs(Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Box, { className: "twa:text-2", children: props.descriptions.columnScope }), _jsx(Box, { className: "twa:flex-3" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), _jsx(Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged }) })] })), !props.disableDataTypes && (_jsx(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope", children: _jsxs(Box, { children: [props.descriptions.dataTypeScope && (_jsx(Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2", children: props.descriptions.dataTypeScope })), _jsx(Flex, { flexDirection: "column", children: dataTypeOptions.map((dataTypeOption) => (_jsx(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 && (_jsx(Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope", children: _jsx(Box, { children: _jsx(Flex, { flexDirection: "column", children: api.columnApi.getColumnTypes()?.map?.((columnType) => (_jsx(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: getColumnTypeFriendlyName(columnType) }, columnType))) }) }) }))] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DashboardToolbar as DashboardToolbarUI } from '../../../../components/Dashboard';
 import { ACCESS_LEVEL_FULL } from '../../../../Utilities/Constants/GeneralConstants';
@@ -12,6 +13,6 @@ export class PanelDashboard extends React.Component {
     };
     render() {
         const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;
-        return (React.createElement(DashboardToolbarUI, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel }, children));
+        return (_jsx(DashboardToolbarUI, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel, children: children }));
     }
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Panel from '../../../../components/Panel';
 import { ButtonClose } from '../../Buttons/ButtonClose';
@@ -16,12 +17,8 @@ export 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, { className: "ab-ToolPanelPanel__header-minimise twa:mr-1", onClick: () => onMinimiseChanged() })) : (React.createElement(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise twa:mr-1", onClick: () => onMinimiseChanged() })),
-            React.createElement(Flex, { className: "ab-ToolPanelPanel__header-text twa:flex-1 twa:ml-0", alignItems: "center" }, headerText),
-            onConfigure && (React.createElement(ButtonConfigure, { iconSize: 16, className: "ab-ToolPanelPanel__header-configure-button twa:ml-1", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
-            onClose && (React.createElement(ButtonClose, { className: "ab-ToolPanelPanel__header-close-button twa:ml-0", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
-        return (React.createElement(Panel, { ...props, className: twMerge('ab-ToolPanelPanel', props.className), header: header, style: {
+        let header = (_jsxs(_Fragment, { children: [!isMinimised ? (_jsx(ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise twa:mr-1", onClick: () => onMinimiseChanged() })) : (_jsx(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise twa:mr-1", onClick: () => onMinimiseChanged() })), _jsx(Flex, { className: "ab-ToolPanelPanel__header-text twa:flex-1 twa:ml-0", alignItems: "center", children: headerText }), onConfigure && (_jsx(ButtonConfigure, { iconSize: 16, className: "ab-ToolPanelPanel__header-configure-button twa:ml-1", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })), onClose && (_jsx(ButtonClose, { className: "ab-ToolPanelPanel__header-close-button twa:ml-0", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))] }));
+        return (_jsx(Panel, { ...props, className: twMerge('ab-ToolPanelPanel', props.className), header: header, style: {
                 ...props.style,
             }, headerProps: {
                 ...props.headerProps,

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import Panel from '../../../components/Panel';
@@ -8,15 +9,6 @@ import { Box, Flex } from '../../../components/Flex';
 export const PanelWithButton = (props) => {
     const { buttonContent } = props;
     const IconCmp = allIcons[props.glyphicon];
-    const header = (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
-        React.createElement(Flex, { alignItems: "center" },
-            props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
-            React.createElement(Box, { "data-name": "space-before", className: "twa:mr-2" }),
-            props.headerText,
-            React.createElement(Box, { "data-name": "space-after", className: "twa:mr-2" }),
-            props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))),
-        React.createElement(Box, { className: "twa:flex-1" }),
-        buttonContent ? (React.createElement(SimpleButton, { 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, { className: 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 = (_jsxs(Flex, { alignItems: "center", className: "twa:w-full", children: [_jsxs(Flex, { alignItems: "center", children: [props.glyphicon != null && (IconCmp ? _jsx(IconCmp, {}) : null), _jsx(Box, { "data-name": "space-before", className: "twa:mr-2" }), props.headerText, _jsx(Box, { "data-name": "space-after", className: "twa:mr-2" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))] }), _jsx(Box, { className: "twa:flex-1" }), buttonContent ? (_jsx(SimpleButton, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null), children: buttonContent })) : null, props.button ? React.cloneElement(props.button) : null] }));
+    return (_jsx(Panel, { className: 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 }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import NewPanel from '../../../components/Panel';
 import { allIcons } from '../../../components/icons';
@@ -15,21 +16,12 @@ class PanelWithImageCmp extends React.Component {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = (React.createElement(Flex, { className: "twa:flex-1" },
-            React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle },
-                    IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(Box, { className: "twa:mr-2" }),
-                    this.props.header ?? '',
-                    React.createElement(Box, { className: "twa:mr-2", "data-name": "space-after" }),
-                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                        ) }))),
-                React.createElement(Flex, { className: "twa:flex-1" }),
-                this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(NewPanel, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: twMerge('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
+        let headerRow = (_jsx(Flex, { className: "twa:flex-1", children: _jsxs(Flex, { alignItems: "center", children: [_jsxs(Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle, children: [IconCmp ? _jsx(IconCmp, {}) : null, _jsx(Box, { className: "twa:mr-2" }), this.props.header ?? '', _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), this.props.infoLink != null && !this.props.infoLinkDisabled && (_jsx(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                                ) }))] }), _jsx(Flex, { className: "twa:flex-1" }), this.props.button && React.cloneElement(this.props.button)] }) }));
+        return (_jsx(NewPanel, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: twMerge('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
                 ...this.props.bodyProps,
                 className: twMerge('twa:p-0', this.props.bodyProps?.className),
-            } }, this.props.children));
+            }, children: this.props.children }));
     }
 }
 export const PanelWithImage = PanelWithImageCmp;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Panel from '../../../components/Panel';
 import { Flex, Box } from '../../../components/Flex';
@@ -6,11 +7,10 @@ import { Flex, Box } from '../../../components/Flex';
 // let { buttonContent, ...other } = this.props
 export class PanelWithRow extends React.Component {
     render() {
-        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(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) => (_jsx(Box, { className: "twa:font-bold twa:text-3 twa:px-1", style: {
                 flex: colItem.Size,
-            } }, colItem.Content)));
-        const header = (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" }, headerItems));
-        return (React.createElement("div", { style: this.props.style, className: this.props.className },
-            React.createElement(Panel, { 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 = (_jsx(Flex, { alignItems: "center", className: "twa:w-full", children: headerItems }));
+        return (_jsx("div", { style: this.props.style, className: this.props.className, children: _jsx(Panel, { bodyScroll: true, header: header, border: this.props.border, bodyProps: this.props.bodyProps, children: this.props.children }) }));
     }
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Dialog from '../../../components/Dialog';
 import { Box } from '../../../components/Flex';
@@ -14,8 +15,5 @@ export function AdaptableLoadingScreen(props) {
             };
         }
     }, [loadingScreenDelay]);
-    return (React.createElement(Dialog, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen twa:min-h-auto" },
-        React.createElement(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 (_jsx(Dialog, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen twa:min-h-auto", children: _jsxs(Box, { className: "twa:p-3", children: [_jsx("h4", { children: loadingScreenTitle ?? 'Initialising Grid' }), _jsx("p", { children: loadingScreenText ?? 'Retrieving your settings and setting up the grid...' })] }) }));
 }

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import * as GeneralConstants from '../../../../Utilities/Constants/GeneralConstants';
 import TopBar from './TopBar';
@@ -45,7 +45,7 @@ export const AdaptablePopup = (props) => {
     if (customSettingsPanel) {
         friendlyName = customSettingsPanel.name;
         activeItem = customSettingsPanel.name;
-        moduleViewContent = React.createElement(CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
+        moduleViewContent = _jsx(CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
     }
     else {
         const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
@@ -57,22 +57,17 @@ export const AdaptablePopup = (props) => {
                 (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo?.ModuleName) ||
                     (props.componentName && props.componentName !== moduleInfo?.Popup));
         activeItem = moduleInfo.ModuleName;
-        moduleViewContent = (React.createElement(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
+        moduleViewContent = (_jsx(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
     const baseClassName = 'ab-Adaptable-Popup';
     const className = join(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
-    return (React.createElement(PopupContext.Provider, { value: {
+    return (_jsx(PopupContext.Provider, { value: {
             hidePopup: () => {
                 if (props.onHide) {
                     props.onHide();
                 }
             },
-        } },
-        React.createElement(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
-            !isStandalone && React.createElement(TopBar, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-text-on-defaultbackground', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
-                    ? GeneralConstants.READ_ONLY_STYLE
-                    : '') },
-                !isStandalone && (React.createElement(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
-                React.createElement(Box, { className: clsx('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', !isStandalone && 'twa:*:p-3') }, moduleViewContent)))));
+        }, children: _jsxs(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && _jsx(TopBar, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), _jsxs(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                        ? GeneralConstants.READ_ONLY_STYLE
+                        : ''), children: [!isStandalone && (_jsx(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), _jsx(Box, { className: clsx('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', 'twa:rounded-br-standard', !isStandalone && 'twa:*:p-3'), children: moduleViewContent })] })] }) }));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { UIHelper } from '../../../UIHelper';
 import { AdaptableViewFactory } from '../../../AdaptableViewFactory';
 import { AdaptablePopupModuleView } from './AdaptablePopupModuleView';
@@ -26,5 +26,5 @@ export const AdaptablePopupBody = (props) => {
     const BodyComponent = AdaptableViewFactory?.[props?.componentName ?? moduleInfo.Popup] || AdaptablePopupModuleView;
     // key is to make sure state is reset between views
     // most of the views use the `AdaptablePopupModuleView` component
-    return React.createElement(BodyComponent, { key: props?.componentName, module: props.module, ...moduleProps });
+    return _jsx(BodyComponent, { module: props.module, ...moduleProps }, props?.componentName);
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Dialog from '../../../../components/Dialog';
@@ -34,30 +34,30 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return (React.createElement(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: clsx('twa:p-0 twa:h-full', className) }));
+    return (_jsx(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: clsx('twa:p-0 twa:h-full', className) }));
 };
 const PopupDialog = (props) => {
     const { style, className, onHide, children, ...dialogProps } = props;
-    return (React.createElement(Dialog, { fixed: false, style: props.style, className: clsx('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
+    return (_jsx(Dialog, { fixed: false, style: props.style, className: clsx('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, children: children }));
 };
 export const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
     if (modalContainer) {
-        return createPortal(React.createElement(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), modalContainer);
+        return createPortal(_jsx(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className, children: children }), modalContainer);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
-        return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
+        return (_jsx(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className, children: children }));
     }
     else {
         if (isActionModule) {
-            return (React.createElement(Dialog, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: clsx('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true }, children));
+            return (_jsx(Dialog, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: clsx('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, children: children }));
         }
         const modalStyle = {
             ...style,
             maxWidth: 1200,
             maxHeight: 1000,
         };
-        return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
+        return (_jsx(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className, children: children }));
     }
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
@@ -13,7 +14,9 @@ import SimpleButton from '../../../../components/SimpleButton';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useEffect } from 'react';
 import { useRerender } from '../../../../components/utils/useRerender';
-import { Flex } from '../../../../components/Flex';
+import { Box, Flex } from '../../../../components/Flex';
+import Panel from '../../../../components/Panel';
+import { Tabs } from '../../../../components/Tabs';
 export const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -31,6 +34,7 @@ export const AdaptablePopupModuleView = (props) => {
     const EditWizard = moduleViewProperties?.getEditWizard?.();
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
         return (props.popupParams?.action === 'New' ||
+            props.popupParams?.action === 'NewSchedule' ||
             props.popupParams?.action === 'Edit' ||
             props.popupParams?.action === 'Clone');
     });
@@ -47,6 +51,7 @@ export const AdaptablePopupModuleView = (props) => {
     }, []);
     React.useEffect(() => {
         if (props.popupParams?.action === 'New' ||
+            props.popupParams?.action === 'NewSchedule' ||
             props.popupParams?.action === 'Edit' ||
             props.popupParams?.action === 'Clone') {
             handleOpenEditPopup();
@@ -75,13 +80,11 @@ export const AdaptablePopupModuleView = (props) => {
                 label: abObjectType.label ?? abObjectType.name,
             };
         });
-        newButton = (React.createElement(DropdownButton, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText },
-            React.createElement(Icon, { name: "plus" }),
-            " New"));
+        newButton = (_jsxs(DropdownButton, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText, children: [_jsx(Icon, { name: "plus" }), " New"] }));
     }
     else if (!moduleViewProperties.hideNewButton &&
         (EditWizard || moduleViewProperties.onOpenEditPopup)) {
-        newButton = (React.createElement(ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
+        newButton = (_jsx(ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: toolTipText, accessLevel: props.accessLevel }));
     }
     let suspendButton = null;
     const editableObjects = items.filter((item) => !item.abObject.IsReadOnly);
@@ -101,7 +104,7 @@ export const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = (React.createElement(SimpleButton, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
+        suspendButton = (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' }));
     }
     const handleWizardClose = () => {
         setAbObjectType(null);
@@ -122,18 +125,16 @@ export const AdaptablePopupModuleView = (props) => {
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
-        return (React.createElement(Flex, { className: "twa:justify-start" },
-            React.createElement(CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch(LayoutShowNonExtendedObjects(checked)) },
-                "Show ",
-                moduleInfo.FriendlyName,
-                "s not available in current Layout")));
+        return (_jsx(Flex, { className: "twa:justify-start", children: _jsxs(CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch(LayoutShowNonExtendedObjects(checked)), children: ["Show ", moduleInfo.FriendlyName, "s not available in current Layout"] }) }));
     };
-    return (React.createElement(PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: React.createElement(React.Fragment, null,
-            suspendButton,
-            " ",
-            newButton), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
-        toggleButtonShowLayoutExtensionObjects(),
-        items?.length ? (React.createElement(AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent, null, emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
-        isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+    const renderModuleObjectList = () => (_jsxs(_Fragment, { children: [moduleViewProperties.HeaderComponent && _jsx(moduleViewProperties.HeaderComponent, {}), toggleButtonShowLayoutExtensionObjects(), items?.length ? (_jsx(AdaptableObjectList, { module: props.module, items: items })) : (_jsx(EmptyContent, { children: emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}` }))] }));
+    const settingsPanelTabs = moduleViewProperties.settingsPanelTabs?.filter((tab) => !tab.isVisible || tab.isVisible(props.api)) ?? [];
+    const useTabbedSettingsPanel = settingsPanelTabs.length > 1;
+    const renderTabbedBody = () => {
+        if (!useTabbedSettingsPanel) {
+            return renderModuleObjectList();
+        }
+        return (_jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [settingsPanelTabs.map((tab) => (_jsx(Tabs.Tab, { children: tab.label }, tab.label))), settingsPanelTabs.map((tab) => (_jsx(Tabs.Content, { children: _jsx(Box, { className: "twa:min-h-0 twa:overflow-auto twa:pt-2", children: tab.render ? React.createElement(tab.render) : renderModuleObjectList() }) }, tab.label)))] }) }) }));
+    };
+    return (_jsxs(PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, scrollable: !useTabbedSettingsPanel, button: _jsxs(_Fragment, { children: [suspendButton, " ", newButton] }), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [renderTabbedBody(), isWizardOpen && EditWizard && (_jsx(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))] }));
 };

package/src/View/Components/Popups/AdaptablePopup/CustomSettingsPanelView.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ExternalRenderer } from '../../ExternalRenderer';
 export const CustomSettingsPanelView = (props) => {
-    return (React.createElement(ExternalRenderer, { key: props.settingsPanel.name, render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }));
+    return (_jsx(ExternalRenderer, { render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }, props.settingsPanel.name));
 };