@adaptabletools/adaptable-cjs 22.0.6 → 22.0.8

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

@@ -160,7 +160,7 @@ const ColumnRow = (props) => {
                     event.stopPropagation();
                 }, checked: visible }),
             React.createElement(Flex_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
-            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Flex_1.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)));
 };
@@ -378,83 +378,90 @@ const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return (React.createElement(Tabs_1.Tabs, null,
+    return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
         React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs_1.Tabs.Content, { className: "twa:overflow-hidden" },
-            React.createElement(Flex_1.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_1.Tabs.Content, null,
+            React.createElement(Flex_1.Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full" },
+                React.createElement(Flex_1.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(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2" },
-                    React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
-                    React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
-                        React.createElement(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
-                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
-                                    ? true
-                                    : visibleIdsCurrentlyDisplayed.length
-                                        ? null
-                                        : false
-                                : false, onChange: (checked) => {
-                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
-                            } }, "Select All")),
-                    React.createElement(ReorderDraggable_1.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 (0, clsx_1.default)(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(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden" },
+                        React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }),
+                        React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
+                            React.createElement(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                    ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                        ? true
+                                        : visibleIdsCurrentlyDisplayed.length
+                                            ? null
+                                            : false
+                                    : false, onChange: (checked) => {
+                                    handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                                } }, "Select All")),
+                        React.createElement(ReorderDraggable_1.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 (0, clsx_1.default)(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))));
 };
 exports.ColumnsSection = ColumnsSection;
-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 = (0, AdaptableContext_1.useAdaptable)();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
@@ -476,76 +483,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(Flex_1.Box, { className: (0, clsx_1.default)(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md twa:p-4') },
-        React.createElement(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
-            "Column Settings: ",
-            column.friendlyName),
-        React.createElement(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
-            "Column ID:",
-            ' ',
-            React.createElement(Flex_1.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(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
-            "Column Group: ",
-            props.column.columnGroup.friendlyName)) : null,
-        hr,
-        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3" },
-            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1" },
-                "Header",
-                React.createElement(Input_1.default, { "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(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
-                React.createElement(Flex_1.Box, null, "Width:"),
-                " ",
-                React.createElement(Flex_1.Box, null, "Flex:"),
-                React.createElement(Input_1.default, { "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_1.default, { "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(Flex_1.Box, null, "Min Width:"),
-                React.createElement(Flex_1.Box, null, "Max Width:"),
-                React.createElement(Input_1.default, { "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_1.default, { "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(Radio_1.RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
-                    props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
-                } },
-                React.createElement(Radio_1.default, { value: "left" }, "Left"),
-                React.createElement(Radio_1.default, { value: "None" }, "None"),
-                React.createElement(Radio_1.default, { value: "right" }, "Right"))),
-        React.createElement(Flex_1.Box, { className: "twa:mt-5" }),
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(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(Flex_1.Box, { className: "twa:px-4 twa:pt-4" },
+            React.createElement(Flex_1.Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title" },
+                "Column Settings: ",
+                column.friendlyName),
+            React.createElement(Flex_1.Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center" },
+                "Column ID:",
+                ' ',
+                React.createElement(Flex_1.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(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1" },
+                "Column Group: ",
+                props.column.columnGroup.friendlyName)) : null),
         hr,
-        React.createElement(Flex_1.Box, null,
-            React.createElement(Flex_1.Box, { className: "twa:my-3" }, "Column Attributes"),
-            React.createElement(Flex_1.Box, { className: (0, clsx_1.default)({
-                    '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_1.Flex, { key: label, alignItems: "center", className: (0, clsx_1.default)({
-                    'twa:rounded-standard twa:gap-2': true,
-                }) },
-                React.createElement(Flex_1.Box, { className: "twa:size-5" }, checked ? (React.createElement(icons_1.Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(icons_1.Icon, { name: "close", className: "twa:text-error" }))),
-                label)))))));
+        React.createElement(Flex_1.Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3" },
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3" },
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1" },
+                    "Header",
+                    React.createElement(Input_1.default, { "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(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },
+                    React.createElement(Flex_1.Box, null, "Width:"),
+                    " ",
+                    React.createElement(Flex_1.Box, null, "Flex:"),
+                    React.createElement(Input_1.default, { "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_1.default, { "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(Flex_1.Box, null, "Min Width:"),
+                    React.createElement(Flex_1.Box, null, "Max Width:"),
+                    React.createElement(Input_1.default, { "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_1.default, { "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(Radio_1.RadioGroup, { value: columnPinning || 'None', name: "columnPinning", orientation: "horizontal", variant: "text-only", className: Radio_1.radioGroupStyling.horizontalTextOnly, onRadioChange: (columnPinning) => {
+                        props.onPinChange(column.columnId, columnPinning === 'None' ? null : columnPinning);
+                    } },
+                    React.createElement(Radio_1.default, { value: "left" }, "Left"),
+                    React.createElement(Radio_1.default, { value: "None" }, "None"),
+                    React.createElement(Radio_1.default, { value: "right" }, "Right"))),
+            React.createElement(Flex_1.Box, { className: "twa:mt-5" }),
+            hr,
+            React.createElement(Flex_1.Box, null,
+                React.createElement(Flex_1.Box, { className: "twa:my-3" }, "Column Attributes"),
+                React.createElement(Flex_1.Box, { className: (0, clsx_1.default)({
+                        '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_1.Flex, { key: label, alignItems: "center", className: (0, clsx_1.default)({
+                        'twa:rounded-standard twa:gap-2': true,
+                    }) },
+                    React.createElement(Flex_1.Box, { className: "twa:size-5" }, checked ? (React.createElement(icons_1.Icon, { name: "check", className: "twa:text-success" })) : (React.createElement(icons_1.Icon, { name: "close", className: "twa:text-error" }))),
+                    label))))))));
 };

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

@@ -64,8 +64,15 @@ const FilterSection = (props) => {
                             });
                         } }))),
             layoutFilters?.length > 0 && (React.createElement(Flex_1.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_1.LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {

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

@@ -13,6 +13,7 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
+const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const Select_1 = require("../../../../components/Select");
@@ -177,6 +178,7 @@ const PivotColumnRow = (props) => {
         React.createElement(Flex_1.Flex, { alignItems: "flex-start" },
             React.createElement(Flex_1.Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center" },
                 React.createElement(Flex_1.Flex, { className: "twa:min-w-[80px]" }, props.column.friendlyName),
+                React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }),
                 aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
                 currentAggFnName === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
                     React.createElement(Flex_1.Box, null, "Weight"),

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

@@ -4,6 +4,7 @@ exports.PivotRowGroupingSection = exports.PivotRowGroupingSectionSummary = void
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Utilities_1 = require("./Utilities");
+const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
@@ -43,7 +44,9 @@ const PivotRowGroupingSection = (props) => {
         React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouped Columns"),
         React.createElement(Tabs_1.Tabs.Tab, null, rowGroupsText),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex_1.Flex, { alignItems: "center" },
+                    option.friendlyName ?? option.columnId,
+                    React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }))));
 };

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importDefault(require("../../../../components/FormLayout"));
 const Utilities_1 = require("./Utilities");
+const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const Radio_1 = require("../../../../components/Radio");
 const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
@@ -101,7 +102,9 @@ const RowGroupingSection = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouped Columns"),
             React.createElement(Tabs_1.Tabs.Tab, null, rowGroupsText),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
+                React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex_1.Flex, { alignItems: "center" },
+                        option.friendlyName ?? option.columnId,
+                        React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
 };

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

@@ -19,6 +19,7 @@ const SuspendToggleButton_1 = require("../../../Components/Buttons/SuspendToggle
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
+const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const areSummaryRowsValid = (layout) => {
@@ -156,11 +157,13 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                     } }, "Include Only Filtered Rows"))),
         React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mt-2 twa:mb-1" },
             React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:flex-1 twa:mb-2" }, "Column Aggregations"),
-            React.createElement(Panel_1.default, { bodyProps: { className: 'twa:max-h-full ' }, className: "twa:h-[360px]" },
+            React.createElement(Panel_1.default, { bodyProps: { className: 'twa:max-h-full twa:bg-primarylight ' }, className: "twa:h-[360px]" },
                 React.createElement(ValueSelector_1.ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: Utilities_1.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_1.Flex, { alignItems: "center" },
+                                label,
+                                React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: column })));
                         }
                         const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
                             label: expression,
@@ -178,7 +181,9 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
                         }
                         const expression = rowSummary.ColumnsMap[column.columnId];
                         return (React.createElement(Flex_1.Flex, null,
-                            React.createElement(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center' }, label),
+                            React.createElement(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center' },
+                                label,
+                                React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: column })),
                             React.createElement(Select_1.Select, { value: expression, options: expressionOptions, onChange: (expression) => {
                                     onChange({
                                         ...rowSummary,

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

@@ -11,6 +11,7 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
+const ColumnGroupTag_1 = require("../../../Components/ColumnGroupTag");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const SortSectionSummary = () => {
@@ -23,8 +24,9 @@ exports.SortSectionSummary = 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(Flex_1.Box, null,
+    return (React.createElement(Flex_1.Flex, { alignItems: "center" },
         props.column.friendlyName,
+        React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }),
         SortOrder && (React.createElement(SimpleButton_1.default, { className: "twa:ml-2", onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
 };
 const SortSection = (props) => {

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

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

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

@@ -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

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

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

@@ -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

@@ -18,6 +18,8 @@ const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
 const Flex_1 = require("../../components/Flex");
 const twMerge_1 = require("../../twMerge");
 const twUtils_1 = require("../../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)]';
 const SummaryTag = (props) => (React.createElement(Flex_1.Box, { ...props }));
 exports.SummaryTag = SummaryTag;
 const SummaryText = (props) => (React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('twa:text-2 twa:mb-3', props.className) }));
@@ -71,7 +73,6 @@ const OnePageWizard = (props) => {
             return React.createElement(React.Fragment, { key: index });
         }
         return (React.createElement(Flex_1.Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2" },
-            React.createElement(Flex_1.Box, { className: "ab-OnePageWizard__details twa:text-4 twa:py-3 twa:pl-2" }, section.details),
             React.createElement(Flex_1.Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground" }, section.render(props.data, index))));
     };
     const handleNavigation = (0, useKeyboardNavigation_1.useKeyboardNavigation)(setCurrentSection, visibleSections);
@@ -112,6 +113,8 @@ const OnePageWizard = (props) => {
         return acc;
     }, new Map());
     const canFinish = !invalidCount;
+    const activeSection = visibleSections[currentSection];
+    const activeSectionDetails = activeSection !== '-' ? activeSection?.details : undefined;
     return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
         React.createElement(exports.OnePageWizardContext.Provider, { value: contextValue },
             React.createElement(Dialog_1.default, { 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) => {
@@ -132,8 +135,12 @@ const OnePageWizard = (props) => {
                     }
                 } },
                 React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('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_1.Flex, { flexDirection: "row", alignItems: "stretch", className: "twa:flex-1 twa:overflow-auto" },
-                        React.createElement(Flex_1.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(Flex_1.Box, { className: (0, clsx_1.default)('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:mt-4 twa:mb-2 twa:px-2') },
+                        React.createElement(Flex_1.Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold" }, props.moduleName),
+                        React.createElement(Flex_1.Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4" }, activeSectionDetails))),
+                    React.createElement(Flex_1.Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-inputborder" }),
+                    React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch') },
+                        React.createElement(Flex_1.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(Flex_1.Box, { as: "hr", className: "ab-OnePageWizard__section-separator twa:mt-2 twa:w-full twa:border-t twa:border-t-inputborder", key: `${index}-` }));
@@ -175,7 +182,7 @@ const OnePageWizard = (props) => {
                                 "or arrow keys",
                                 React.createElement("br", null),
                                 "to navigate")),
-                        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:flex-1" }, renderSection(currentSection))),
+                        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1" }, renderSection(currentSection))),
                     React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2" },
                         React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, props.closeText ?? 'CLOSE'),
                         React.createElement(KeyHint_1.KeyHint, { className: "twa:ml-2" }, "Esc"),