@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/View/GridFilter/NamedQuerySelector.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Icon } from '../../components/icons';
 import Panel from '../../components/Panel';
 import SimpleButton from '../../components/SimpleButton';
@@ -9,16 +9,14 @@ import { AdaptablePopover } from '../AdaptablePopover';
 import { ButtonOpen } from '../Components/Buttons/ButtonOpen';
 import { Box, Flex } from '../../components/Flex';
 export const AvailableSearchLabel = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full" },
-        React.createElement(Box, { className: "twa:mb-2 twa:flex-1" }, props.label),
-        React.createElement(Tag, null, props.expression)));
+    return (_jsxs(Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full", children: [_jsx(Box, { className: "twa:mb-2 twa:flex-1", children: props.label }), _jsx(Tag, { children: props.expression })] }));
 };
 export const NamedQuerySelector = (props) => {
     const sortedNamedQueries = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, props.namedQueries, 'Name') ?? [];
     const availableSearches = sortedNamedQueries.map((expression) => {
         return {
-            label: (React.createElement(AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
-            icon: expression.BooleanExpression === props.currentQuery ? React.createElement(Icon, { name: 'check' }) : null,
+            label: (_jsx(AvailableSearchLabel, { label: expression.Name, expression: expression.BooleanExpression })),
+            icon: expression.BooleanExpression === props.currentQuery ? _jsx(Icon, { name: 'check' }) : null,
             onClick: () => props.onSelect(expression.BooleanExpression),
         };
     });
@@ -27,23 +25,17 @@ export const NamedQuerySelector = (props) => {
             .slice(-3)
             .reverse()
             .map((item) => ({
-            label: (React.createElement(AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
-            icon: React.createElement(Icon, { name: 'history' }),
+            label: (_jsx(AvailableSearchLabel, { label: `Grid Filter at ${item.time.toLocaleTimeString('en-US')}`, expression: item.expression })),
+            icon: _jsx(Icon, { name: 'history' }),
             onClick: () => props.setGridFilterExpression(item.expression),
         }))
         : null;
     return ArrayExtensions.IsNotNullOrEmpty(cachedQueries) ||
-        ArrayExtensions.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
-            React.createElement(Flex, { flexDirection: "column", className: "twa:justify-stretch" },
-                React.createElement(Panel, { header: "Named Queries" },
-                    React.createElement(Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
-                        return (React.createElement(SimpleButton, { className: "twa:mb-2", variant: "text", key: index, onClick: item.onClick }, item.label));
-                    }))),
-                cachedQueries ? (React.createElement(React.Fragment, null,
-                    React.createElement(Panel, { className: "twa:mt-2", header: "Recent Grid Filters" },
-                        React.createElement(Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
-                            return (React.createElement(SimpleButton, { disabled: props.disabled, className: "twa:mb-2", variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
-                        }))))) : null),
-        ] },
-        React.createElement(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
+        ArrayExtensions.IsNotNullOrEmpty(availableSearches) ? (_jsx(AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
+            _jsxs(Flex, { flexDirection: "column", className: "twa:justify-stretch", children: [_jsx(Panel, { header: "Named Queries", children: _jsx(Flex, { flexDirection: "column", children: availableSearches.map((item, index) => {
+                                return (_jsx(SimpleButton, { className: "twa:mb-2", variant: "text", onClick: item.onClick, children: item.label }, index));
+                            }) }) }), cachedQueries ? (_jsx(_Fragment, { children: _jsx(Panel, { className: "twa:mt-2", header: "Recent Grid Filters", children: _jsx(Flex, { flexDirection: "column", children: cachedQueries.map((cachedQuery, index) => {
+                                    return (_jsx(SimpleButton, { disabled: props.disabled, className: "twa:mb-2", variant: "text", onClick: cachedQuery.onClick, children: cachedQuery.label }, index));
+                                }) }) }) })) : null] }),
+        ], children: _jsx(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open", children: props.children }) })) : (_jsx(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));
 };

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../../components/Flex';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableObjectList } from '../../Components/AdaptableObjectList';
@@ -13,16 +13,14 @@ export const AdaptableObjectsSummary = ({ className, }) => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(Box, { className: clsx(baseClassName, className) }, [...modules].map(([moduleName, module]) => {
-        if (!module.isModuleVisible()) {
-            return null;
-        }
-        const items = module?.toViewAll?.();
-        if (!items?.length) {
-            return null;
-        }
-        return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
-            React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
-            items?.length && React.createElement(AdaptableObjectList, { items: items, module: module })));
-    })));
+    return (_jsx(Box, { className: clsx(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
+            if (!module.isModuleVisible()) {
+                return null;
+            }
+            const items = module?.toViewAll?.();
+            if (!items?.length) {
+                return null;
+            }
+            return (_jsxs(Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, children: [_jsx("b", { className: `${baseClassName}__header`, children: module.moduleInfo.FriendlyName }), items?.length && _jsx(AdaptableObjectList, { items: items, module: module })] }, module.moduleInfo.ModuleName));
+        }) }));
 };

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { ADAPTABLE_VERSION } from '../../../EnvVars';
 import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
@@ -53,7 +53,7 @@ export const GridInfoPopup = (props) => {
     keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+    keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions.createCommaSeparatedString(actionColumns)
             : 'None' });
     const domProps = {
@@ -79,7 +79,7 @@ export const GridInfoPopup = (props) => {
             field: 'Value',
             header: 'Value',
             defaultFlex: 3,
-            render: ({ value }) => (React.createElement("span", { style: {
+            render: ({ value }) => (_jsx("span", { style: {
                     whiteSpace: 'pre-wrap',
                     wordBreak: 'break-word',
                     overflowWrap: 'anywhere',
@@ -87,7 +87,7 @@ export const GridInfoPopup = (props) => {
                     lineHeight: '18px',
                     paddingTop: 4,
                     paddingBottom: 4,
-                } }, String(value ?? ''))),
+                }, children: String(value ?? '') })),
         },
     };
     // ---- Grid Options tab: build one InfiniteTableGrid section per non-empty
@@ -234,23 +234,7 @@ export const GridInfoPopup = (props) => {
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return (React.createElement(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
-        React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-            React.createElement(Panel.FlexBody, null,
-                React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
-                    showSummary ? React.createElement(Tabs.Tab, null, "Grid Summary") : null,
-                    showState ? React.createElement(Tabs.Tab, null, "Grid State") : null,
-                    showOptions ? React.createElement(Tabs.Tab, null, "Grid Options") : null,
-                    showSummary ? (React.createElement(Tabs.Content, null,
-                        React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
-                            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap })))) : null,
-                    showState ? (React.createElement(Tabs.Content, null,
-                        React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }))) : null,
-                    showOptions ? (React.createElement(Tabs.Content, null,
-                        React.createElement("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4" }, gridOptionsSections.map((section) => (React.createElement("div", { key: section.title },
-                            React.createElement("h4", { className: "twa:font-semibold twa:mb-1" }, section.title),
-                            React.createElement(DataSource, { data: section.rows, primaryKey: "Key" },
-                                React.createElement(InfiniteTableGrid, { domProps: {
-                                        style: { height: sectionHeight(section.rows), width: '100%' },
-                                    }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap })))))))) : null)))));
+    return (_jsx(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _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: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
+                                                    style: { height: sectionHeight(section.rows), width: '100%' },
+                                                }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/KeyHint.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../components/Flex';
 import { twMerge } from '../twMerge';
 export const KeyHint = (props) => {
-    const cls = twMerge('twa:text-1 twa:text-inputcolor', props.className);
-    return React.createElement(Box, { ...props, className: cls });
+    const cls = twMerge('twa:text-1 twa:text-input-foreground', props.className);
+    return _jsx(Box, { ...props, className: cls });
 };

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -10,5 +11,5 @@ export const EditCurrentLayoutButton = () => {
         const type = isPivotLayout(currentLayout) ? 'pivot' : 'table';
         adaptable.api.layoutApi.showLayoutEditor(layoutName, type, 'Edit');
     }, []);
-    return (React.createElement(SimpleButton, { className: "twa:ml-1", variant: "text", iconSize: 15, icon: "edit", onClick: handleClick }));
+    return (_jsx(SimpleButton, { className: "twa:ml-1", variant: "text", iconSize: 15, icon: "edit", onClick: handleClick }));
 };

package/src/View/Layout/LayoutCloneButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -9,5 +10,5 @@ export const LayoutCloneButton = ({ data, accessLevel }) => {
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, isPivotLayout(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return (React.createElement(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return (_jsx(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
 };

package/src/View/Layout/LayoutRadioSelector.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Radio from '../../components/Radio';
 import { useAdaptable } from '../AdaptableContext';
@@ -10,5 +11,5 @@ export const LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return (React.createElement(Radio, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
+    return (_jsx(Radio, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,17 +1,16 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
-import { Select } from '../../components/Select';
 import { useAdaptable } from '../AdaptableContext';
 import { Box } from '../../components/Flex';
+import { SingleSelect } from '../../components/NewSelect';
 export const LayoutStatusbar = () => {
     const adaptable = useAdaptable();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
     const currentLayout = useSelector((state) => state.Layout.CurrentLayout);
-    return (React.createElement(Box, { onClick: (event) => {
+    return (_jsx(Box, { onClick: (event) => {
             event.stopPropagation();
-        } },
-        React.createElement(Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+        }, children: _jsx(SingleSelect, { size: "small", items: options, value: currentLayout, onValueChange: (value) => {
                 adaptable.api.layoutApi.setLayout(value);
-            } })));
+            } }) }));
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
 import isEqual from '../../Utilities/utils/isEqual';
-import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
@@ -12,9 +12,11 @@ import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { LAYOUT_CLONE_TOOLTIP, LAYOUT_DELETE_TOOLTIP, LAYOUT_EDIT_TOOLTIP, LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, ERROR_LAYOUT, } from '../../Utilities/Constants/GeneralConstants';
 import { isPivotLayout } from '../../Utilities/isPivotLayout';
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/NewDropdownButton';
 import { Icon } from '../../components/icons';
 import { Flex } from '../../components/Flex';
+import { SingleSelect } from '../../components/NewSelect';
+// import { SingleCombobox } from '../../components/Combobox';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
@@ -29,38 +31,45 @@ const LayoutViewPanelComponent = (props) => {
     const cloneAccessLevel = accessLevel;
     const newAccessLevel = accessLevel;
     const entityAccessLevel = AdaptableHelper.getAccessLevelForObject(layoutEntity, accessLevel);
-    // Layout options for select
-    const availableLayoutOptions = Layouts.map((layout) => ({
-        ...layout,
-        label: layout.Name,
-        value: layout.Name,
-        onClick: () => onSelectLayout(layout.Name),
-    }));
     const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
-    return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, { style: layoutSelectStyle, className: "twa:flex-1" },
-            React.createElement(Select, { "aria-label": 'Select Layout', disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
-        React.createElement(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
-                ? GeneralConstants.READ_ONLY_STYLE
-                : '', `ab-${elementType}__Layout__wrap`) },
-            React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
-            React.createElement(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
-            React.createElement(DropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, columns: ['label'], "data-name": "new", items: [
-                    {
-                        dataName: 'table',
-                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Table Layout"),
-                        onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
-                    },
-                    {
-                        dataName: 'pivot',
-                        disabled: api.gridApi.isTreeDataGrid(),
-                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Pivot Layout"),
-                        onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
-                    },
-                ], tone: "neutral", accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new` },
-                React.createElement(Icon, { name: "plus" })),
-            React.createElement(ButtonDelete, { tooltip: LAYOUT_DELETE_TOOLTIP, disabled: Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: `Are you sure you want to delete '${CurrentLayoutName}'?`, ConfirmationTitle: 'Delete Layout', accessLevel: entityAccessLevel }))));
+    const tableLayoutsArray = Layouts.filter((layout) => !isPivotLayout(layout));
+    const pivotLayoutsArray = Layouts.filter((layout) => isPivotLayout(layout));
+    const layoutGroups = [
+        tableLayoutsArray.length > 0
+            ? {
+                label: 'Table Layouts',
+                items: tableLayoutsArray.map((layout) => ({
+                    label: layout.Name,
+                    value: layout.Name,
+                })),
+            }
+            : null,
+        pivotLayoutsArray.length > 0
+            ? {
+                label: 'Pivot Layouts',
+                items: pivotLayoutsArray.map((layout) => ({
+                    label: layout.Name,
+                    value: layout.Name,
+                })),
+            }
+            : null,
+    ].filter(Boolean);
+    return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsx(Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: _jsx(SingleSelect, { groups: layoutGroups, showItemTooltip: true, disabled: isErrorLayout, className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`, ariaLabel: 'Select Layout', value: layoutEntity ? layoutEntity.Name : null, onValueChange: (layout) => onSelectLayout(layout) }) }), _jsxs(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                    ? GeneralConstants.READ_ONLY_STYLE
+                    : '', `ab-${elementType}__Layout__wrap`), children: [_jsx(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), _jsx(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), _jsx(NewDropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
+                            {
+                                dataName: 'table',
+                                label: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Table Layout" }),
+                                onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
+                            },
+                            {
+                                dataName: 'pivot',
+                                disabled: api.gridApi.isTreeDataGrid(),
+                                label: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "Pivot Layout" }),
+                                onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
+                            },
+                        ], accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new`, children: _jsx(Icon, { name: "plus" }) }), _jsx(ButtonDelete, { tooltip: LAYOUT_DELETE_TOOLTIP, disabled: Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: `Are you sure you want to delete '${CurrentLayoutName}'?`, ConfirmationTitle: 'Delete Layout', accessLevel: entityAccessLevel })] })] }));
 };
 function mapStateToProps(state, ownProps) {
     const CurrentLayoutName = state.Layout.CurrentLayout;

package/src/View/Layout/PivotDetailsPopoup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import { useAdaptable } from '../AdaptableContext';
@@ -68,6 +69,5 @@ export const PivotDetailsPopoup = (props) => {
             }), {}),
         };
     }, [props.popupProps]);
-    return (React.createElement(DataSource, { data: data, primaryKey: columnId },
-        React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
+    return (_jsx(DataSource, { data: data, primaryKey: columnId, children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns }) }));
 };

package/src/View/Layout/TransposedPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import Panel from '../../components/Panel';
@@ -194,12 +195,5 @@ export const TransposedPopup = (props) => {
             });
         };
     }, []);
-    return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
-        React.createElement(Panel, null,
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
-        React.createElement(Flex, { className: "twa:h-full" },
-            React.createElement(Box, { id: ADAPTABLE_CONTAINER_ID }),
-            React.createElement(Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:w-full twa:h-full", children: [_jsx(Panel, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Elevated Column", children: _jsx(ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId }) }) }) }), _jsxs(Flex, { className: "twa:h-full", children: [_jsx(Box, { id: ADAPTABLE_CONTAINER_ID }), _jsx(Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID })] })] }));
 };

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
@@ -19,6 +20,10 @@ import { isPivotLayout } from '../../../Utilities/isPivotLayout';
 import { PivotRowGroupingSection, PivotRowGroupingSectionSummary, } from './sections/PivotRowGroupingSection';
 import { isPivotAggregationsSectionValid, PivotAggregationsSection, PivotAggregationsSectionSummary, } from './sections/PivotAggregationsSection';
 import { Box } from '../../../components/Flex';
+const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
+    const layoutName = layout.Name?.trim();
+    return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
+};
 export const LayoutWizard = (props) => {
     const dispatch = useDispatch();
     const adaptable = useAdaptable();
@@ -72,7 +77,8 @@ export const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return isPivotLayout(layout) ? (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const wizardTitle = getLayoutWizardTitle(layout, props.moduleInfo.FriendlyName);
+    return isPivotLayout(layout) ? (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Pivot Layout',
@@ -85,81 +91,72 @@ export const LayoutWizard = (props) => {
                     }
                     return true;
                 },
-                renderSummary: () => React.createElement(SettingsSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(SettingsSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Pivot Row Groups',
                 isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Pivot Row Grouping',
-                renderSummary: () => React.createElement(PivotRowGroupingSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(PivotRowGroupingSection, { onChange: (newLayout) => {
+                renderSummary: () => _jsx(PivotRowGroupingSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotRowGroupingSection, { onChange: (newLayout) => {
                             setLayout(newLayout);
-                        } }))),
+                        } }) })),
             },
             {
                 title: 'Pivot Columns',
                 details: 'Select Pivot Columns',
                 isVisible: () => layoutSupportedFeatures.PivotColumns,
-                renderSummary: () => React.createElement(PivotColumnsSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(PivotColumnsSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Pivot Aggregations',
                 isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
                 details: 'Select Pivot Column Aggregations',
-                renderSummary: () => React.createElement(PivotAggregationsSectionSummary, null),
+                renderSummary: () => _jsx(PivotAggregationsSectionSummary, {}),
                 isValid: (data) => isPivotAggregationsSectionValid(data),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(PivotAggregationsSection, { onChange: (layout) => {
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotAggregationsSection, { onChange: (layout) => {
                             const newLayout = cloneObject(layout);
                             setLayout(newLayout);
-                        } }))),
+                        } }) })),
             },
             {
                 title: 'Sort',
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => React.createElement(SortSectionSummary, null),
+                renderSummary: () => _jsx(SortSectionSummary, {}),
                 details: 'Configure Aggregated Column Sorts',
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
                 isValid: (layout) => isColumnFiltersValid(layout),
                 details: 'Set Aggregated Column Filters',
-                renderSummary: () => React.createElement(FilterSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(FilterSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Grid Filter',
                 isVisible: () => layoutSupportedFeatures.GridFilter,
                 isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
                 details: 'Set Grid Filter',
-                renderSummary: () => React.createElement(GridFilterSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(GridFilterSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Row Selection',
                 details: 'Configure Row Selection',
-                renderSummary: () => React.createElement(RowSelectionSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(RowSelectionSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             '-',
             {
                 details: 'Review your Pivot Layout',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(OnePageWizardSummary, null))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
-        ] })) : (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+        ] })) : (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Table Layout',
@@ -172,35 +169,31 @@ export const LayoutWizard = (props) => {
                     }
                     return true;
                 },
-                renderSummary: () => React.createElement(SettingsSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(SettingsSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
                 isValid: areSummaryRowsValid,
                 details: 'Configure Row Grouping',
-                renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(RowGroupingSection, { onChange: setLayout }))),
+                renderSummary: () => _jsx(RowGroupingSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowGroupingSection, { onChange: setLayout }) })),
             },
             {
                 title: 'Columns',
                 details: 'Select Columns',
                 isVisible: () => true,
-                renderSummary: () => React.createElement(ColumnsSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(ColumnsSection, { onChange: setLayout }))),
+                renderSummary: () => _jsx(ColumnsSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(ColumnsSection, { onChange: setLayout }) })),
             },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
                 details: 'Select Column Aggregations',
-                renderSummary: () => React.createElement(AggregationsSectionSummary, null),
+                renderSummary: () => _jsx(AggregationsSectionSummary, {}),
                 isValid: (data) => isAggregationsSectionValid(data),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(AggregationsSection, { onChange: (layout) => {
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(AggregationsSection, { onChange: (layout) => {
                             let newLayout = cloneObject(layout);
                             // if we do not have an weighted avg col, we need to clear the row summary if one exists
                             if (newLayout.RowSummaries) {
@@ -229,54 +222,48 @@ export const LayoutWizard = (props) => {
                                 });
                             }
                             setLayout(newLayout);
-                        } }))),
+                        } }) })),
             },
             {
                 title: 'Row Summaries',
                 details: 'Configure Row Summaries',
-                renderSummary: () => React.createElement(RowSummarySectionSummary, null),
+                renderSummary: () => _jsx(RowSummarySectionSummary, {}),
                 isVisible: () => layoutSupportedFeatures.RowSummaries,
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(RowSummarySection, { onChange: setLayout }))),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowSummarySection, { onChange: setLayout }) })),
             },
             {
                 title: 'Sort',
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => React.createElement(SortSectionSummary, null),
+                renderSummary: () => _jsx(SortSectionSummary, {}),
                 details: 'Configure Column Sorts',
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
                 isValid: (layout) => isColumnFiltersValid(layout),
                 details: 'Set Column Filters',
-                renderSummary: () => React.createElement(FilterSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(FilterSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Grid Filter',
                 isVisible: () => layoutSupportedFeatures.GridFilter,
                 isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
                 details: 'Set Grid Filter',
-                renderSummary: () => React.createElement(GridFilterSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                    React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(GridFilterSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Row Selection',
                 details: 'Configure Row Selection',
-                renderSummary: () => React.createElement(RowSelectionSectionSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => _jsx(RowSelectionSectionSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             '-',
             {
                 details: 'Review your Table Layout',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(OnePageWizardSummary, null))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
         ] }));