@adaptabletools/adaptable-cjs 23.0.0-canary.4 → 23.0.0-canary.6

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

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const InfiniteTable_1 = require("../../../../components/InfiniteTable");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const Tabs_1 = require("../../../../components/Tabs");
+const Card_1 = require("../../../../components/Card");
 const AdaptableColumn_1 = require("../../../../AdaptableState/Common/AdaptableColumn");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -378,87 +378,87 @@ const ColumnsSection = (props) => {
             .map((col) => col.columnId)
         : currentOrder.map((col) => col.columnId);
     const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(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' });
-                                    const input = el?.querySelector('input[type="checkbox"]');
-                                    input?.focus();
-                                };
-                                if (event.key === 'ArrowDown') {
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                                    if (index === -1) {
-                                        return;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-4 twa:font-medium twa:shrink-0", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-w-0 twa:text-xs twa:opacity-70 twa:font-normal twa:gap-0.5", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Drag to reorder and use checkboxes to show or hide columns; click a column to edit in right side panel" }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:overflow-hidden twa:h-full", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
+                                    const scrollIntoView = (columnId) => {
+                                        const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
+                                        el?.scrollIntoView({ block: 'nearest' });
+                                        const input = el?.querySelector('input[type="checkbox"]');
+                                        input?.focus();
+                                    };
+                                    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 nextColumnId = currentlyDisplayedColumnIds[index + 1];
-                                    const nextColumn = colIdToCol[nextColumnId];
-                                    if (nextColumn) {
-                                        setSelectedColumnId(nextColumn.columnId);
-                                        scrollIntoView(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);
+                                            scrollIntoView(previousColumn.columnId);
+                                        }
                                     }
-                                }
-                                if (event.key === 'ArrowUp') {
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
-                                    if (index === -1) {
-                                        return;
+                                    if (event.key === ' ') {
+                                        const target = event.target;
+                                        if (target.tagName === 'INPUT' &&
+                                            target.type === 'checkbox') {
+                                            return;
+                                        }
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        const selectedColumn = colIdToCol[selectedColumnId];
+                                        if (!selectedColumn) {
+                                            return;
+                                        }
+                                        const visible = isColumnVisible({ columnId: selectedColumnId, layout });
+                                        handleColumnVisibilityChange(selectedColumnId, !visible);
                                     }
-                                    const previousColumnId = currentlyDisplayedColumnIds[index - 1];
-                                    const previousColumn = colIdToCol[previousColumnId];
-                                    if (previousColumn) {
-                                        setSelectedColumnId(previousColumn.columnId);
-                                        scrollIntoView(previousColumn.columnId);
-                                    }
-                                }
-                                if (event.key === ' ') {
-                                    const target = event.target;
-                                    if (target.tagName === 'INPUT' &&
-                                        target.type === 'checkbox') {
-                                        return;
-                                    }
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    const selectedColumn = colIdToCol[selectedColumnId];
-                                    if (!selectedColumn) {
-                                        return;
-                                    }
-                                    const visible = isColumnVisible({ columnId: selectedColumnId, layout });
-                                    handleColumnVisibilityChange(selectedColumnId, !visible);
-                                }
-                            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:p-1" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
-                                                ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
-                                                    ? true
-                                                    : visibleIdsCurrentlyDisplayed.length
-                                                        ? null
-                                                        : false
-                                                : false, onChange: (checked) => {
-                                                handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
-                                            }, children: "Select All" }) }), (0, jsx_runtime_1.jsx)(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);
-                                                const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
-                                                const input = row?.querySelector('input[type="checkbox"]');
-                                                input?.focus();
-                                            }
-                                        }, renderOption: (option) => {
-                                            return ((0, jsx_runtime_1.jsx)(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, onCheckboxFocus: setSelectedColumnId, layout: layout, column: option }));
-                                        }, onChange: handleColumnsChange })] }) }), currentOrderIds.length ? ((0, jsx_runtime_1.jsx)(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
-                                ? colIdToCol[selectedColumnId] ?? null
-                                : null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null] }) })] }));
+                                }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [(0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:p-1" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: currentlyDisplayedColumnIds.length
+                                                    ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
+                                                        ? true
+                                                        : visibleIdsCurrentlyDisplayed.length
+                                                            ? null
+                                                            : false
+                                                    : false, onChange: (checked) => {
+                                                    handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
+                                                }, children: "Select All" }) }), (0, jsx_runtime_1.jsx)(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);
+                                                    const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
+                                                    const input = row?.querySelector('input[type="checkbox"]');
+                                                    input?.focus();
+                                                }
+                                            }, renderOption: (option) => {
+                                                return ((0, jsx_runtime_1.jsx)(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, onCheckboxFocus: setSelectedColumnId, layout: layout, column: option }));
+                                            }, onChange: handleColumnsChange })] }) }) }) }), currentOrderIds.length ? ((0, jsx_runtime_1.jsx)(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
+                            ? 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 = ((0, jsx_runtime_1.jsx)("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-input-border/50 twa:border-none" }));

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

@@ -6,8 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
 const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/AdaptableObjectList");
@@ -15,6 +13,7 @@ const ColumnSelector_1 = require("../../../Components/Selectors/ColumnSelector")
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const LayoutColumnFilter_1 = require("../../../Components/ColumnFilter/LayoutColumnFilter");
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const isColumnFiltersValid = (layout) => {
     const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
     if (invalidColumnFilters.length > 0) {
@@ -47,35 +46,35 @@ const FilterSection = (props) => {
             ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
         });
     }, [layout.ColumnFilters]);
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Filters" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Add Column Filter", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
-                                    props.onChange({
-                                        ...layout,
-                                        ColumnFilters: [
-                                            ...layoutFilters,
-                                            {
-                                                ColumnId: option,
-                                                Predicates: [],
-                                            },
-                                        ],
-                                    });
-                                } }) }) }), layoutFilters?.length > 0 && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-0", as: "ul", children: 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 = [
-                                moduleItems[0],
-                                ...columnGroupItems,
-                                ...moduleItems.slice(1),
-                                {
-                                    name: 'Column Filter',
-                                    view: ((0, jsx_runtime_1.jsx)(LayoutColumnFilter_1.LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
-                                            handlePredicateEdit(columnFilter);
-                                        } })),
-                                },
-                            ];
-                            return ((0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId));
-                        }) }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:gap-3 twa:p-3 twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Add Column Filter" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and then create a Filter" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select a Column", onChange: (option) => {
+                                props.onChange({
+                                    ...layout,
+                                    ColumnFilters: [
+                                        ...layoutFilters,
+                                        {
+                                            ColumnId: option,
+                                            Predicates: [],
+                                        },
+                                    ],
+                                });
+                            } }) })] }), layoutFilters?.length > 0 && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Filters" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure predicates for each column filter in this Layout" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-0", as: "ul", children: 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 = [
+                                    moduleItems[0],
+                                    ...columnGroupItems,
+                                    ...moduleItems.slice(1),
+                                    {
+                                        name: 'Column Filter',
+                                        view: ((0, jsx_runtime_1.jsx)(LayoutColumnFilter_1.LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
+                                                handlePredicateEdit(columnFilter);
+                                            } })),
+                                    },
+                                ];
+                                return ((0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter) }, columnFilter.ColumnId));
+                            }) }) })] }))] }));
 };
 exports.FilterSection = FilterSection;

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

@@ -12,6 +12,7 @@ const ModuleConstants_1 = require("../../../../Utilities/Constants/ModuleConstan
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const useGridFilterOptionsForExpressionEditor_1 = require("../../../GridFilter/useGridFilterOptionsForExpressionEditor");
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const isGridFiltersValid = (layout, api) => {
     const expression = layout?.GridFilter?.Expression;
     if (StringExtensions_1.default.IsNullOrEmpty(expression)) {
@@ -31,15 +32,14 @@ const GridFilterSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
-    const expressionEditorContent = ((0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
-            props.onChange({
-                ...layout,
-                GridFilter: {
-                    ...layout.GridFilter,
-                    Expression: expression,
-                },
-            });
-        }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
-    return (0, jsx_runtime_1.jsx)("div", { children: expressionEditorContent });
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Grid Filter" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define a boolean expression to filter rows across the entire grid in this Layout" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
+                            props.onChange({
+                                ...layout,
+                                GridFilter: {
+                                    ...layout.GridFilter,
+                                    Expression: expression,
+                                },
+                            });
+                        }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })] }) }));
 };
 exports.GridFilterSection = GridFilterSection;

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { PivotLayout } from '../../../../../types';
-import { validatePivotLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
-export declare const isPivotAggregationsSectionValid: typeof validatePivotLayoutAggregations;
+export declare const isPivotAggregationsSectionValid: (data: PivotLayout) => true | string;
 export declare const PivotAggregationsSectionSummary: React.FunctionComponent;
 interface PivotAggregationsSectionProps {
     onChange: (data: PivotLayout) => void;

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

@@ -7,13 +7,9 @@ const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Tabs_1 = require("../../../../components/Tabs");
+const Card_1 = require("../../../../components/Card");
 const Tag_1 = require("../../../../components/Tag");
 const AggregationColumns_1 = require("../../../../AdaptableState/Common/AggregationColumns");
-const validateParameterizedAggregations_1 = require("../../../../Aggregation/validateParameterizedAggregations");
-const parameterizedAggregationHeader_1 = require("../../../../Aggregation/parameterizedAggregationHeader");
-const parameterizedAggregationWizardHelpers_1 = require("../../../../Aggregation/parameterizedAggregationWizardHelpers");
-const ParameterizedAggFuncPicker_1 = require("./ParameterizedAggFuncPicker");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -26,6 +22,33 @@ const NewSelect_1 = require("../../../../components/NewSelect");
 const PivotColumnRow = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const aggValue = (props.layout.PivotAggregationColumns || []).find((x) => x.ColumnId === props.column.columnId)?.AggFunc;
+    // Weighted Average is not supported in Pivot Layouts, so only the standard
+    // AG Grid aggregation functions are offered here.
+    const aggFunctionNames = props.column.availableAggregationFunctions || [];
+    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
+    const updateAggFunc = (fnName) => {
+        let aggCols = [...(props.layout.PivotAggregationColumns || [])];
+        const AggFuncValue = fnName;
+        let found = false;
+        aggCols = aggCols.map(({ ColumnId, AggFunc, ...rest }) => {
+            if (ColumnId === props.column.columnId) {
+                found = true;
+                return {
+                    ColumnId,
+                    AggFunc: AggFuncValue,
+                    ...rest,
+                };
+            }
+            return { ColumnId, AggFunc, ...rest };
+        });
+        if (!found) {
+            aggCols.push({
+                ColumnId: props.column.columnId,
+                AggFunc: AggFuncValue,
+            });
+        }
+        props.onChangeAggFunction(aggCols);
+    };
     const totalOptions = ['Off', 'Before', 'After', 'Pivot Specific'].map((totalVariant) => {
         return {
             label: totalVariant,
@@ -98,8 +121,11 @@ const PivotColumnRow = (props) => {
         label: option,
         value: option === 'Off' ? false : option.toLowerCase(),
     }));
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "flex-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:min-w-[80px]", children: props.column.friendlyName }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), (0, jsx_runtime_1.jsx)(ParameterizedAggFuncPicker_1.ParameterizedAggFuncPicker, { column: props.column, aggValue: aggValue, aggregationColumnsMap: props.aggregationColumnsMap, numberColumns: props.numberColumns, aggregationEntries: props.layout.PivotAggregationColumns || [], onChangeEntries: props.onChangeAggFunction, availableAggregationFunctions: props.column.availableAggregationFunctions }), aggValue && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Total" }), ' ', (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: totalOptions, className: "twa:ml-2", children: currentTotal })] }))] }), hasPivotSpecificTotals && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-2 twa:pl-2 twa:flex-[1_1_auto] twa:min-w-[200px]", flexWrap: "wrap", alignItems: "center", style: {
-                        borderLeft: '1px solid var(--ab-color-text-on-primary)',
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "flex-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-[0_0_auto]", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:min-w-[80px]", children: props.column.friendlyName }), (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), aggValue && ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:min-w-[140px] twa:ml-2", value: currentAggFnName, items: aggFunctionNames.map((fnName) => ({
+                                label: fnName,
+                                value: fnName,
+                            })), onValueChange: updateAggFunc })), aggValue && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Total" }), ' ', (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { columns: ['label'], items: totalOptions, className: "twa:ml-2", children: currentTotal })] }))] }), hasPivotSpecificTotals && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-2 twa:pl-2 twa:flex-[1_1_auto] twa:min-w-[200px]", flexWrap: "wrap", alignItems: "center", style: {
+                        borderLeft: '1px solid var(--ab-color-primary-foreground)',
                         rowGap: '8px',
                         columnGap: '12px',
                     }, children: props.layout.PivotColumns.map((pivotColId) => {
@@ -121,14 +147,25 @@ const PivotColumnRow = (props) => {
                                     })), children: currentValue })] }, pivotColId));
                     }) }))] }) }));
 };
-exports.isPivotAggregationsSectionValid = validateParameterizedAggregations_1.validatePivotLayoutAggregations;
+const isPivotAggregationsSectionValid = (data) => {
+    const weightedAvg = data.PivotAggregationColumns
+        ? (data.PivotAggregationColumns || [])
+            .map((agg) => agg.AggFunc)
+            .find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
+        : null;
+    if (weightedAvg && !weightedAvg.weightedColumnId) {
+        return 'Weighted Average requires a weight column to be selected.';
+    }
+    return true;
+};
+exports.isPivotAggregationsSectionValid = isPivotAggregationsSectionValid;
 const PivotAggregationsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const pivotAggregationColumns = layout.PivotAggregationColumns || [];
     let content = null;
     if (pivotAggregationColumns.length) {
-        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: pivotAggregationColumns.map(({ ColumnId: colId, AggFunc: aggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(colId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, parameterizedAggregationHeader_1.getParameterizedAggregationDisplayName)(adaptable.api, aggFunc, colId) }) }, colId))) }));
+        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: pivotAggregationColumns.map(({ ColumnId: colId, AggFunc: aggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(colId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: typeof aggFunc === 'object' ? aggFunc.type : aggFunc }) }, colId))) }));
     }
     else {
         content = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Column Aggregations" });
@@ -141,7 +178,6 @@ const PivotAggregationsSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allAggregableColumns = adaptable.api.columnApi.getAggregatableColumns();
     const allColumns = adaptable.api.columnApi.getUIAvailableColumns();
-    const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allAggregableColumns.map((col) => col.columnId), (layout.PivotAggregationColumns ?? []).map((col) => col.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allAggregableColumns]);
@@ -175,8 +211,22 @@ const PivotAggregationsSection = (props) => {
             acc[col.columnId] = col;
             return acc;
         }, {});
-        return (0, parameterizedAggregationWizardHelpers_1.buildAggregationColumnsMap)(layout.PivotAggregationColumns || [], allColumnsMap);
-    }, [layout, allColumns]);
+        return (layout.PivotAggregationColumns || []).reduce((acc, { ColumnId: colId, AggFunc: aggFunc }) => {
+            let fn = aggFunc;
+            let fnName = '';
+            if (typeof fn === 'boolean') {
+                fnName = allColumnsMap[colId].aggregationFunction;
+            }
+            if (typeof fn === 'object' && fn.type === 'weightedAverage') {
+                fnName = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
+            }
+            else if (typeof fn === 'string') {
+                fnName = fn;
+            }
+            acc[colId] = fnName;
+            return acc;
+        }, {});
+    }, [layout]);
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange({
             ...layout,
@@ -201,47 +251,47 @@ const PivotAggregationsSection = (props) => {
         return true;
     };
     const isPivotColumnTotalEnabled = checkIfPivotColumnTotalEnabled();
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Aggregations" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header', children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Grand Total Row', children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
-                                            {
-                                                label: 'Off',
-                                                value: null,
-                                            },
-                                        ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Aggregation Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and an aggregation function" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, onChange: handleColumnsSelectionChange }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Omit Aggregation from Header" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader, children: "Do not show aggregation function names in column headers" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Grand Total Row" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of the grand total row in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
+                                        {
+                                            label: 'Off',
+                                            value: null,
+                                        },
+                                    ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
+                                        return {
+                                            label: StringExtensions_1.default.CamelCaseToHumanText(position),
+                                            value: position,
+                                        };
+                                    })), placeholder: "Off", value: layout.GrandTotalRow, onValueChange: (value) => {
+                                        props.onChange({
+                                            ...layout,
+                                            GrandTotalRow: value,
+                                        });
+                                    } }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Pivot Grand Total" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of pivot grand total columns" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
+                                        { label: 'Off', value: null },
+                                        ...['before', 'after'].map((position) => {
+                                            return {
+                                                label: StringExtensions_1.default.CapitaliseFirstLetter(position),
+                                                value: position,
+                                            };
+                                        }),
+                                    ], placeholder: "Off", value: layout.PivotGrandTotal, onValueChange: (value) => {
+                                        props.onChange({
+                                            ...layout,
+                                            PivotGrandTotal: value,
+                                        });
+                                    } }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Pivot Column Total" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of pivot column totals" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: isPivotColumnTotalEnabled === true ? ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
+                                        { label: 'Off', value: null },
+                                        ...['before', 'after'].map((position) => {
                                             return {
-                                                label: StringExtensions_1.default.CamelCaseToHumanText(position),
+                                                label: StringExtensions_1.default.CapitaliseFirstLetter(position),
                                                 value: position,
                                             };
-                                        })), placeholder: "[none]", value: layout.GrandTotalRow, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                GrandTotalRow: value,
-                                            });
-                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Pivot Grand Total', children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
-                                            { label: 'Off', value: null },
-                                            ...['before', 'after'].map((position) => {
-                                                return {
-                                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                                    value: position,
-                                                };
-                                            }),
-                                        ], placeholder: "[none]", value: layout.PivotGrandTotal, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                PivotGrandTotal: value,
-                                            });
-                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Pivot Column Total', children: isPivotColumnTotalEnabled === true ? ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[160px]", items: [
-                                            { label: 'Off', value: null },
-                                            ...['before', 'after'].map((position) => {
-                                                return {
-                                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
-                                                    value: position,
-                                                };
-                                            }),
-                                        ], placeholder: "[none]", value: layout.PivotColumnTotal, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                PivotColumnTotal: value,
-                                            });
-                                        } })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1 twa:italic", children: isPivotColumnTotalEnabled })) })] }) }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, onChange: handleColumnsSelectionChange })] })] }));
+                                        }),
+                                    ], placeholder: "Off", value: layout.PivotColumnTotal, onValueChange: (value) => {
+                                        props.onChange({
+                                            ...layout,
+                                            PivotColumnTotal: value,
+                                        });
+                                    } })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:italic", children: isPivotColumnTotalEnabled })) })] })] })] }));
 };
 exports.PivotAggregationsSection = PivotAggregationsSection;

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

@@ -4,7 +4,6 @@ exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
@@ -13,6 +12,8 @@ const Utilities_1 = require("./Utilities");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const CheckBox_1 = require("../../../../components/CheckBox");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const Card_1 = require("../../../../components/Card");
 const PivotColumnsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -25,18 +26,18 @@ const PivotColumnsSection = (props) => {
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allPivotColumns.map((col) => col.columnId), layout.PivotColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
-    }, [layout, allPivotColumns]);
+    }, [layout, allPivotColumns, adaptable]);
     const handleColumnsChange = (columnIds) => {
         props.onChange({
             ...layout,
             PivotColumns: columnIds,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Pivot Columns" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-3 twa:px-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
-                                props.onChange({
-                                    ...layout,
-                                    PivotResultColumnsOrder: checked,
-                                });
-                            }, children: "Persist Order of Pivot Result Columns" }) }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Pivot Columns" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select and order the columns used as pivot columns", ' '] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Pivot Result Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure layout persistence behaviour" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
+                                        props.onChange({
+                                            ...layout,
+                                            PivotResultColumnsOrder: checked,
+                                        });
+                                    }, children: "Persist order of pivot result columns" }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mt-2", children: "Result columns are created dynamically for each value in the pivot column" })] })] }) })] }));
 };
 exports.PivotColumnsSection = PivotColumnsSection;