npm - @adaptabletools/adaptable - Versions diffs - 22.0.6 → 22.0.8 - Mend

@adaptabletools/adaptable 22.0.6 → 22.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/src/View/Layout/Wizard/sections/ColumnsSection.js CHANGED Viewed

@@ -155,7 +155,7 @@ const ColumnRow = (props) => {
                     event.stopPropagation();
                 }, checked: visible }),
             React.createElement(Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
-            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center" },
                 "Column Group: ",
                 props.column.columnGroup.friendlyName)) : null)));
 };
@@ -373,82 +373,89 @@ export const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return (React.createElement(Tabs, null,
+    return (React.createElement(Tabs, { className: "twa:h-full" },
         React.createElement(Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs.Content, { className: "twa:overflow-hidden" },
-            React.createElement(Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2 twa:focus:outline-none", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
-                    if (event.key === 'ArrowDown') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                        if (index === -1) {
-                            return;
-                        }
-                        const nextColumnId = currentlyDisplayedColumnIds[index + 1];
-                        const nextColumn = colIdToCol[nextColumnId];
-                        if (nextColumn) {
-                            setSelectedColumnId(nextColumn.columnId);
-                        }
-                    }
-                    if (event.key === 'ArrowUp') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                        if (index === -1) {
-                            return;
-                        }
-                        const previousColumnId = currentlyDisplayedColumnIds[index - 1];
-                        const previousColumn = colIdToCol[previousColumnId];
-                        if (previousColumn) {
-                            setSelectedColumnId(previousColumn.columnId);
-                        }
-                    }
-                    if (event.key === ' ') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const selectedColumn = colIdToCol[selectedColumnId];
-                        if (!selectedColumn) {
-                            return;
+        React.createElement(Tabs.Content, null,
+            React.createElement(Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full" },
+                React.createElement(Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:overflow-hidden", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
+                        const scrollIntoView = (columnId) => {
+                            const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
+                            el?.scrollIntoView({ block: 'nearest' });
+                        };
+                        if (event.key === 'ArrowDown') {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                            if (index === -1) {
+                                return;
+                            }
+                            const nextColumnId = currentlyDisplayedColumnIds[index + 1];
+                            const nextColumn = colIdToCol[nextColumnId];
+                            if (nextColumn) {
+                                setSelectedColumnId(nextColumn.columnId);
+                                scrollIntoView(nextColumn.columnId);
+                            }
                         }
-                        const visible = isColumnVisible({ columnId: selectedColumnId, layout });
-                        handleColumnVisibilityChange(selectedColumnId, !visible);
-                    }
-                } },
-                React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2" },
-                    React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
-                    React.createElement(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
-                        React.createElement(CheckBox, { checked: currentlyDisplayedColumnIds.length
-                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
-                                    ? true
-                                    : visibleIdsCurrentlyDisplayed.length
-                                        ? null
-                                        : false
-                                : false, onChange: (checked) => {
-                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
-                            } }, "Select All")),
-                    React.createElement(ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
-                            return option.moveable;
-                        }, optionClassName: (option) => {
-                            const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
-                            if (selectedColumnId !== option.columnId) {
-                                return baseCls;
+                        if (event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
+                            if (index === -1) {
+                                return;
                             }
-                            return clsx(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
-                        }, order: currentOrder, onOptionClick: (option, event) => {
-                            if (event.ctrlKey || option.columnId === selectedColumnId) {
-                                setSelectedColumnId(null);
+                            const previousColumnId = currentlyDisplayedColumnIds[index - 1];
+                            const previousColumn = colIdToCol[previousColumnId];
+                            if (previousColumn) {
+                                setSelectedColumnId(previousColumn.columnId);
+                                scrollIntoView(previousColumn.columnId);
                             }
-                            else {
-                                setSelectedColumnId(option.columnId);
+                        }
+                        if (event.key === ' ') {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const selectedColumn = colIdToCol[selectedColumnId];
+                            if (!selectedColumn) {
+                                return;
                             }
-                        }, renderOption: (option) => {
-                            return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
-                        }, onChange: handleColumnsChange })),
+                            const visible = isColumnVisible({ columnId: selectedColumnId, layout });
+                            handleColumnVisibilityChange(selectedColumnId, !visible);
+                        }
+                    } },
+                    React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden" },
+                        React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
+                        React.createElement(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
+                            React.createElement(CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                    ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                        ? true
+                                        : visibleIdsCurrentlyDisplayed.length
+                                            ? null
+                                            : false
+                                    : false, onChange: (checked) => {
+                                    handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                                } }, "Select All")),
+                        React.createElement(ReorderDraggable, { className: "twa:overflow-y-auto", toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
+                                return option.moveable;
+                            }, optionClassName: (option) => {
+                                const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
+                                if (selectedColumnId !== option.columnId) {
+                                    return baseCls;
+                                }
+                                return clsx(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
+                            }, order: currentOrder, onOptionClick: (option, event) => {
+                                if (event.ctrlKey || option.columnId === selectedColumnId) {
+                                    setSelectedColumnId(null);
+                                }
+                                else {
+                                    setSelectedColumnId(option.columnId);
+                                }
+                            }, renderOption: (option) => {
+                                return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
+                            }, onChange: handleColumnsChange }))),
                 currentOrderIds.length ? (React.createElement(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
-                        ? colIdToCol[selectedColumnId] ?? null
+                        ? (colIdToCol[selectedColumnId] ?? null)
                         : null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null))));
 };
-const hr = React.createElement("hr", { className: "twa:my-2 twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" });
+const hr = (React.createElement("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" }));
 const ColumnPropertiesEditor = (props) => {
     const adaptable = useAdaptable();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
@@ -470,76 +477,78 @@ const ColumnPropertiesEditor = (props) => {
     const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
-    return (React.createElement(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md twa:p-4') },
-        React.createElement(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
-            "Column Settings: ",
-            column.friendlyName),
-        React.createElement(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
-            "Column ID:",
-            ' ',
-            React.createElement(Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard" }, column.columnId)),
-        props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
-            "Column Group: ",
-            props.column.columnGroup.friendlyName)) : null,
-        hr,
-        React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3" },
-            React.createElement(Flex, { flexDirection: "column", className: "twa:gap-1" },
-                "Header",
-                React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
-                        props.onColumnNameChange(props.column.columnId, event.target.value);
-                    }, value: customHeader })),
-            React.createElement(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
-                React.createElement(Box, null, "Width:"),
-                " ",
-                React.createElement(Box, null, "Flex:"),
-                React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnWidthChange(props.column.columnId, value);
-                    }, value: columnWidth ?? '' }),
-                React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnFlexChange(props.column.columnId, value);
-                    }, value: columnFlex ?? '' }),
-                React.createElement(Box, null, "Min Width:"),
-                React.createElement(Box, null, "Max Width:"),
-                React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnMinWidthChange(props.column.columnId, value);
-                    }, value: minWidth ?? '' }),
-                React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
-                        let value = parseFloat(event.target.value);
-                        value = typeof value === 'number' && !isNaN(value) ? value : void 0;
-                        props.onColumnMaxWidthChange(props.column.columnId, value);
-                    }, value: maxWidth ?? '' })),
-            "Pinning:",
-            React.createElement(RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
-                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
-                } },
-                React.createElement(Radio, { value: "left" }, "Left"),
-                React.createElement(Radio, { value: "None" }, "None"),
-                React.createElement(Radio, { value: "right" }, "Right"))),
-        React.createElement(Box, { className: "twa:mt-5" }),
+    return (React.createElement(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col') },
+        React.createElement(Box, { className: "twa:px-4 twa:pt-4" },
+            React.createElement(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
+                "Column Settings: ",
+                column.friendlyName),
+            React.createElement(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
+                "Column ID:",
+                ' ',
+                React.createElement(Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard" }, column.columnId)),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+                "Column Group: ",
+                props.column.columnGroup.friendlyName)) : null),
         hr,
-        React.createElement(Box, null,
-            React.createElement(Box, { className: "twa:my-3" }, "Column Attributes"),
-            React.createElement(Box, { className: clsx({
-                    'twa:bg-primarylight': 'the bg color',
-                    'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
-                    'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
-                    'twa:p-5 twa:rounded-standard': true,
-                }) }, [
-                { label: 'Aggregatable', checked: props.column.aggregatable },
-                { label: 'Filterable', checked: props.column.filterable },
-                { label: 'Groupable', checked: props.column.groupable },
-                { label: 'Moveable', checked: props.column.moveable },
-                { label: 'Pivotable', checked: props.column.pivotable },
-                { label: 'Sortable', checked: props.column.sortable },
-            ].map(({ label, checked }) => (React.createElement(Flex, { key: label, alignItems: "center", className: clsx({
-                    'twa:rounded-standard twa:gap-2': true,
-                }) },
-                React.createElement(Box, { className: "twa:size-5" }, checked ? (React.createElement(Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(Icon, { name: "close", className: "twa:text-error" }))),
-                label)))))));
+        React.createElement(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3" },
+            React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3" },
+                React.createElement(Flex, { flexDirection: "column", className: "twa:gap-1" },
+                    "Header",
+                    React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
+                            props.onColumnNameChange(props.column.columnId, event.target.value);
+                        }, value: customHeader })),
+                React.createElement(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
+                    React.createElement(Box, null, "Width:"),
+                    " ",
+                    React.createElement(Box, null, "Flex:"),
+                    React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnWidthChange(props.column.columnId, value);
+                        }, value: columnWidth ?? '' }),
+                    React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnFlexChange(props.column.columnId, value);
+                        }, value: columnFlex ?? '' }),
+                    React.createElement(Box, null, "Min Width:"),
+                    React.createElement(Box, null, "Max Width:"),
+                    React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnMinWidthChange(props.column.columnId, value);
+                        }, value: minWidth ?? '' }),
+                    React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
+                            let value = parseFloat(event.target.value);
+                            value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                            props.onColumnMaxWidthChange(props.column.columnId, value);
+                        }, value: maxWidth ?? '' })),
+                "Pinning:",
+                React.createElement(RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
+                        props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
+                    } },
+                    React.createElement(Radio, { value: "left" }, "Left"),
+                    React.createElement(Radio, { value: "None" }, "None"),
+                    React.createElement(Radio, { value: "right" }, "Right"))),
+            React.createElement(Box, { className: "twa:mt-5" }),
+            hr,
+            React.createElement(Box, null,
+                React.createElement(Box, { className: "twa:my-3" }, "Column Attributes"),
+                React.createElement(Box, { className: clsx({
+                        'twa:bg-primarylight': 'the bg color',
+                        'twa:gap-2 twa:flex twa:flex-col': 'layout configuration for small screens',
+                        'twa:lg:gap-3 twa:lg:grid twa:md:grid-cols-[1fr_1fr]': 'layout configuration for normal screens',
+                        'twa:p-5 twa:rounded-standard': true,
+                    }) }, [
+                    { label: 'Aggregatable', checked: props.column.aggregatable },
+                    { label: 'Filterable', checked: props.column.filterable },
+                    { label: 'Groupable', checked: props.column.groupable },
+                    { label: 'Moveable', checked: props.column.moveable },
+                    { label: 'Pivotable', checked: props.column.pivotable },
+                    { label: 'Sortable', checked: props.column.sortable },
+                ].map(({ label, checked }) => (React.createElement(Flex, { key: label, alignItems: "center", className: clsx({
+                        'twa:rounded-standard twa:gap-2': true,
+                    }) },
+                    React.createElement(Box, { className: "twa:size-5" }, checked ? (React.createElement(Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(Icon, { name: "close", className: "twa:text-error" }))),
+                    label))))))));
 };

package/src/View/Layout/Wizard/sections/FilterSection.js CHANGED Viewed

@@ -58,8 +58,15 @@ export const FilterSection = (props) => {
                             });
                         } }))),
             layoutFilters?.length > 0 && (React.createElement(Box, { className: "twa:p-0", as: "ul" }, layoutFilters.map((columnFilter) => {
+                const moduleItems = filterModule.toView(columnFilter).items;
+                const column = adaptable.api.columnApi.getColumnWithColumnId(columnFilter.ColumnId);
+                const columnGroupItems = column?.columnGroup && column.columnGroup.groupCount > 1
+                    ? [{ name: 'Column Group', values: [column.columnGroup.friendlyName] }]
+                    : [];
                 const items = [
-                    ...filterModule.toView(columnFilter).items,
+                    moduleItems[0],
+                    ...columnGroupItems,
+                    ...moduleItems.slice(1),
                     {
                         name: 'Column Filter',
                         view: (React.createElement(LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
 import { Select } from '../../../../components/Select';
@@ -173,6 +174,7 @@ const PivotColumnRow = (props) => {
         React.createElement(Flex, { alignItems: "flex-start" },
             React.createElement(Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center" },
                 React.createElement(Flex, { className: "twa:min-w-[80px]" }, props.column.friendlyName),
+                React.createElement(ColumnGroupTag, { column: props.column }),
                 aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
                 currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
                     React.createElement(Box, null, "Weight"),

package/src/View/Layout/Wizard/sections/PivotRowGroupingSection.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
@@ -8,7 +9,7 @@ import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptab
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
 import { RowGroupBehaviorSection } from './RowGroupingSection';
-import { Box } from '../../../../components/Flex';
+import { Box, Flex } from '../../../../components/Flex';
 export const PivotRowGroupingSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
@@ -38,7 +39,9 @@ export const PivotRowGroupingSection = (props) => {
         React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
         React.createElement(Tabs.Tab, null, rowGroupsText),
         React.createElement(Tabs.Content, null,
-            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
+            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex, { alignItems: "center" },
+                    option.friendlyName ?? option.columnId,
+                    React.createElement(ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
         React.createElement(Tabs.Content, null,
             React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange }))));
 };

package/src/View/Layout/Wizard/sections/RowGroupingSection.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import FormLayout from '../../../../components/FormLayout';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import { RadioGroup } from '../../../../components/Radio';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
@@ -95,7 +96,9 @@ export const RowGroupingSection = (props) => {
             React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
             React.createElement(Tabs.Tab, null, rowGroupsText),
             React.createElement(Tabs.Content, null,
-                React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
+                React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex, { alignItems: "center" },
+                        option.friendlyName ?? option.columnId,
+                        React.createElement(ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
             React.createElement(Tabs.Content, null,
                 React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
 };

package/src/View/Layout/Wizard/sections/RowSummarySection.js CHANGED Viewed

@@ -15,6 +15,7 @@ import { SuspendToggleButton } from '../../../Components/Buttons/SuspendToggleBu
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 export const areSummaryRowsValid = (layout) => {
@@ -150,11 +151,13 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                     } }, "Include Only Filtered Rows"))),
         React.createElement(Flex, { flexDirection: "column", className: "twa:mt-2 twa:mb-1" },
             React.createElement(Flex, { alignItems: "center", className: "twa:flex-1 twa:mb-2" }, "Column Aggregations"),
-            React.createElement(Panel, { bodyProps: { className: 'twa:max-h-full ' }, className: "twa:h-[360px]" },
+            React.createElement(Panel, { bodyProps: { className: 'twa:max-h-full twa:bg-primarylight ' }, className: "twa:h-[360px]" },
                 React.createElement(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, toListLabel: (column) => {
                         const label = column.friendlyName ?? column.columnId;
                         if (!(column.columnId in (rowSummary.ColumnsMap ?? {}))) {
-                            return label;
+                            return (React.createElement(Flex, { alignItems: "center" },
+                                label,
+                                React.createElement(ColumnGroupTag, { column: column })));
                         }
                         const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
                             label: expression,
@@ -172,7 +175,9 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                         }
                         const expression = rowSummary.ColumnsMap[column.columnId];
                         return (React.createElement(Flex, null,
-                            React.createElement(Flex, { className: "twa:mr-2", alignItems: 'center' }, label),
+                            React.createElement(Flex, { className: "twa:mr-2", alignItems: 'center' },
+                                label,
+                                React.createElement(ColumnGroupTag, { column: column })),
                             React.createElement(Select, { value: expression, options: expressionOptions, onChange: (expression) => {
                                     onChange({
                                         ...rowSummary,

package/src/View/Layout/Wizard/sections/SortSection.js CHANGED Viewed

@@ -7,8 +7,9 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { Box } from '../../../../components/Flex';
+import { Box, Flex } from '../../../../components/Flex';
 export const SortSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
@@ -18,8 +19,9 @@ export const SortSectionSummary = () => {
 const ColumnRow = (props) => {
     const SortOrder = (props.layout?.ColumnSorts ?? []).find((sort) => sort.ColumnId === props.column.columnId)?.SortOrder;
     const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
-    return (React.createElement(Box, null,
+    return (React.createElement(Flex, { alignItems: "center" },
         props.column.friendlyName,
+        React.createElement(ColumnGroupTag, { column: props.column }),
         SortOrder && (React.createElement(SimpleButton, { className: "twa:ml-2", onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
 };
 export const SortSection = (props) => {

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.js CHANGED Viewed

@@ -3,7 +3,8 @@ import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
 export const renderStyledColumnColumnSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
     return (React.createElement(Box, { className: "twa:pr-2 twa:py-2" },
@@ -76,8 +77,13 @@ export const StyledColumnWizardColumnSection = (props) => {
         }
         props.onChange(newStyledColumn);
     };
+    const [columnsSearchText, setColumnsSearchText] = React.useState('');
     return (React.createElement(Tabs, { style: { height: '100%' } },
         React.createElement(Tabs.Tab, null, "Column"),
         React.createElement(Tabs.Content, null,
-            React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
+            React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
+                React.createElement(Box, { className: "twa:text-2" }, "Columns"),
+                React.createElement(Box, { className: "twa:flex-3" }),
+                React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
+            React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
 };

package/src/View/Wizard/OnePageAdaptableWizard.d.ts CHANGED Viewed

@@ -41,7 +41,6 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
     onFinish?: (data: ENTITY) => any;
     children?: React.ReactNode;
     style?: CSSProperties;
-    titleContainerStyle?: CSSProperties;
     closeText?: React.ReactNode;
     closeTooltip?: string;
     finishText?: React.ReactNode;

package/src/View/Wizard/OnePageAdaptableWizard.js CHANGED Viewed

@@ -72,7 +72,7 @@ export const OnePageAdaptableWizard = (props) => {
     };
     return (React.createElement(OnePageAdaptableWizardContext.Provider, { value: extraContext },
         React.createElement(NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
-            React.createElement(OnePageWizard, { ...props, name: name, sections: sections, onFinish: handleClickFinish }))));
+            React.createElement(OnePageWizard, { ...props, name: name, sections: sections, onFinish: handleClickFinish, moduleName: props.moduleInfo.FriendlyName }))));
 };
 export const OnePageWizardSummary = () => {
     const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();

package/src/View/Wizard/OnePageWizards.d.ts CHANGED Viewed

@@ -40,6 +40,7 @@ export interface OnePageWizardProps<ENTITY> {
     closeText?: React.ReactNode;
     closeTooltip?: string;
     finishText?: React.ReactNode;
+    moduleName?: string;
 }
 export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
 export {};

package/src/View/Wizard/OnePageWizards.js CHANGED Viewed

@@ -13,6 +13,8 @@ import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { Box, Flex } from '../../components/Flex';
 import { twMerge } from '../../twMerge';
 import { targetOwn } from '../../components/twUtils';
+/** Same template for header row and main row so module/details align with nav / content columns. */
+const ONE_PAGE_WIZARD_SECTION_GRID = 'twa:grid twa:grid-cols-[minmax(160px,14rem)_minmax(0,1fr)]';
 export const SummaryTag = (props) => (React.createElement(Box, { ...props }));
 export const SummaryText = (props) => (React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mb-3', props.className) }));
 export const FormDescriptionText = (props) => React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mt-1', props.className) });
@@ -63,7 +65,6 @@ export const OnePageWizard = (props) => {
             return React.createElement(React.Fragment, { key: index });
         }
         return (React.createElement(Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2" },
-            React.createElement(Box, { className: "ab-OnePageWizard__details twa:text-4 twa:py-3 twa:pl-2" }, section.details),
             React.createElement(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground" }, section.render(props.data, index))));
     };
     const handleNavigation = useKeyboardNavigation(setCurrentSection, visibleSections);
@@ -104,6 +105,8 @@ export const OnePageWizard = (props) => {
         return acc;
     }, new Map());
     const canFinish = !invalidCount;
+    const activeSection = visibleSections[currentSection];
+    const activeSectionDetails = activeSection !== '-' ? activeSection?.details : undefined;
     return (React.createElement(NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
         React.createElement(OnePageWizardContext.Provider, { value: contextValue },
             React.createElement(Dialog, { modal: props.modal ?? true, isOpen: true, showCloseButton: false, focusOnBrowserVisible: true, className: "twa:rounded-standard twa:overflow-hidden twa:h-[90vh]", ref: dialogRef, onDismiss: () => props.onHide?.(), onKeyDown: (event) => {
@@ -124,8 +127,12 @@ export const OnePageWizard = (props) => {
                     }
                 } },
                 React.createElement(Box, { className: clsx('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style },
-                    React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", className: "twa:flex-1 twa:overflow-auto" },
-                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:p-3 twa:flex-none twa:overflow-auto twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle },
+                    (props.moduleName || activeSectionDetails) && (React.createElement(Box, { className: clsx('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:mt-4 twa:mb-2 twa:px-2') },
+                        React.createElement(Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold" }, props.moduleName),
+                        React.createElement(Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4" }, activeSectionDetails))),
+                    React.createElement(Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-inputborder" }),
+                    React.createElement(Box, { className: clsx(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch') },
+                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle },
                             visibleSections.map((section, index) => {
                                 if (section === '-') {
                                     return (React.createElement(Box, { as: "hr", className: "ab-OnePageWizard__section-separator twa:mt-2 twa:w-full twa:border-t twa:border-t-inputborder", key: `${index}-` }));
@@ -167,7 +174,7 @@ export const OnePageWizard = (props) => {
                                 "or arrow keys",
                                 React.createElement("br", null),
                                 "to navigate")),
-                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:flex-1" }, renderSection(currentSection))),
+                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1" }, renderSection(currentSection))),
                     React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2" },
                         React.createElement(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, props.closeText ?? 'CLOSE'),
                         React.createElement(KeyHint, { className: "twa:ml-2" }, "Esc"),