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

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
@@ -15,11 +14,12 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities
 const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
 const RowGroupingSection_1 = require("./RowGroupingSection");
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const PivotRowGroupingSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId) }));
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }) }, columnId));
         })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pivot Row Grouping" })) }));
 };
 exports.PivotRowGroupingSectionSummary = PivotRowGroupingSectionSummary;
@@ -39,7 +39,7 @@ const PivotRowGroupingSection = (props) => {
             PivotGroupedColumns: columnIds,
         });
     };
-    const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (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: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
+    const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
+    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: "Row Grouped 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 and order Columns used in grouping" })] }), (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: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], 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: rowGroupsText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set what happens when Layout opens" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }) })] }));
 };
 exports.PivotRowGroupingSection = PivotRowGroupingSection;

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

@@ -4,11 +4,9 @@ exports.RowGroupingSection = exports.RowGroupBehaviorSection = exports.RowGroupi
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 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");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
@@ -17,6 +15,7 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities
 const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
 const TypeRadio_1 = require("../../../Wizard/TypeRadio");
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const RowGroupingSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -30,28 +29,48 @@ const RowGroupingSectionSummary = () => {
 exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
 const RowGroupBehaviorSection = (props) => {
     const { layout, onChange } = props;
-    return ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
-                const newLayout = {
-                    ...layout,
-                    RowGroupValues: {
-                        RowGroupDefaultBehavior,
-                    },
-                };
-                if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
-                    newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
-                    newLayout.RowGroupValues.ExceptionGroupKeys = [];
-                }
-                onChange(newLayout);
-            }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
+            const newLayout = {
+                ...layout,
+                RowGroupValues: {
+                    RowGroupDefaultBehavior,
+                },
+            };
+            if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
+                newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
+                newLayout.RowGroupValues.ExceptionGroupKeys = [];
+            }
+            onChange(newLayout);
+        }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "All Grouped Rows are always collapsed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "All Grouped Rows are always expanded" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "All expanded, other than those collapsed when Layout last displayed" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "All collapsed, other than those expanded when Layout last displayed" })] }));
 };
 exports.RowGroupBehaviorSection = RowGroupBehaviorSection;
+const RowGroupDisplayTypeSection = ({ layout, onChange }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    return ((0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
+            let newLayout = {
+                ...layout,
+                RowGroupDisplayType,
+            };
+            if (RowGroupDisplayType === 'single') {
+                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
+            }
+            else if (RowGroupDisplayType === 'multi') {
+                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
+            }
+            else {
+                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId) &&
+                    !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
+            }
+            onChange(newLayout);
+        }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }));
+};
 const RowGroupingSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     if (adaptable.api.gridApi.isTreeDataGrid()) {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
     }
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
+    const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
@@ -71,22 +90,6 @@ const RowGroupingSection = (props) => {
         }
         onChange(newLayout);
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Group Display Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
-                                    let newLayout = {
-                                        ...layout,
-                                        RowGroupDisplayType,
-                                    };
-                                    if (RowGroupDisplayType === 'single') {
-                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
-                                    }
-                                    else if (RowGroupDisplayType === 'multi') {
-                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
-                                    }
-                                    else {
-                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId) &&
-                                            !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
-                                    }
-                                    onChange(newLayout);
-                                }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (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: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
+    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: "Row Grouped 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 and order Columns used in grouping" })] }), (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: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) })] }), (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.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Group Display Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how grouped rows display in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) })] }), (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: rowGroupsText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set what happens when Layout opens" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] })] }));
 };
 exports.RowGroupingSection = RowGroupingSection;

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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
 const Radio_2 = require("../../../../components/Radio");
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../../components/Flex");
@@ -14,6 +13,7 @@ const twMerge_1 = require("../../../../twMerge");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const Card_1 = require("../../../../components/Card");
 const RowSelectionSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (layout.RowSelection === false) {
@@ -74,6 +74,6 @@ const RowSelectionSection = (props) => {
         }
         props.onChange(newLayout);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Selection Mode" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "horizontal", variant: "text-only", className: (0, twMerge_1.twMerge)(Radio_1.radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-background twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "singleRow", children: "Single Row" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "multiRow", children: "Multi Row" })] }) }) })] }), !rowSelection && (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "There is no Row Selection configured for this Layout" }), rowSelection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Selection Column Checkboxes" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouping Selection Checkboxes" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Display in dedicated Selection Column" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Display in Row Grouped Column" })] }) })] })), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Click Selection (when user clicks on Row outside of Selection Checkbox)" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grouped Row Selection Behaviour" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'descendants', children: "Select Grouped Row and all descendants" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Select All (in Header) Behaviour" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'all', children: "All rows" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filtered', children: "Filtered rows only" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 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: "Row Selection Mode" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether row selection is disabled, single row, or multi row" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "horizontal", variant: "text-only", className: (0, twMerge_1.twMerge)(Radio_1.radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-background twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "singleRow", children: "Single Row" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: "multiRow", children: "Multi Row" })] }) })] }), !rowSelection && (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "There is no Row Selection configured for this Layout" }), rowSelection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: "Row Selection Column Checkboxes" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure checkboxes in the selection column cells and header" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && ((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: "Row Grouping Selection Checkboxes" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose where selection checkboxes appear when row grouping is enabled" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Display in dedicated Selection Column" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Display in Row Grouped Column" })] }) })] })), (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: "Row Click Selection" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure whether users can select or deselect rows by clicking outside the checkbox" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && ((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: "Grouped Row Selection Behaviour" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how selection cascades when a grouped row is selected" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'descendants', children: "Select Grouped Row and all descendants" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && ((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: "Select All Behaviour" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which rows are selected when the header Select All checkbox is used" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'all', children: "All rows" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'filtered', children: "Filtered rows only" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
 };
 exports.RowSelectionSection = RowSelectionSection;

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

@@ -8,7 +8,7 @@ const CheckBox_1 = require("../../../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const Tabs_1 = require("../../../../components/Tabs");
+const Card_1 = require("../../../../components/Card");
 const Tag_1 = require("../../../../components/Tag");
 const RowSummary_1 = require("../../../../AdaptableState/Common/RowSummary");
 const adaptableQlUtils_1 = require("../../../../Utilities/adaptableQlUtils");
@@ -78,6 +78,33 @@ const getAvailableExpressionsForColumnType = (columnType, availableScalarExpress
     availableExpressionsForColumnTypeCache.set(key, expressions);
     return expressions;
 };
+const buildRowSummaryExpressionOptions = (column, availableScalarExpressions, layout) => {
+    const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
+        label: expression,
+        value: expression,
+    }));
+    const aggregation = layout.TableAggregationColumns?.find((agg) => agg.ColumnId === column.columnId)?.AggFunc;
+    if (aggregation &&
+        typeof aggregation === 'object' &&
+        aggregation.weightedColumnId) {
+        expressionOptions.push({
+            label: 'WEIGHTERD_AVG',
+            value: RowSummary_1.WEIGHTED_AVERAGE_AGGREGATED_FUNCTION,
+        });
+    }
+    return expressionOptions;
+};
+const getDefaultRowSummaryExpression = (column, availableScalarExpressions, layout) => {
+    const optionValues = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout).map((option) => option.value);
+    if (optionValues.includes('sum')) {
+        return 'sum';
+    }
+    const sumExpression = optionValues.find((value) => value.toLowerCase() === 'sum');
+    if (sumExpression) {
+        return sumExpression;
+    }
+    return optionValues[0] ?? null;
+};
 const RowSummarySectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -106,76 +133,71 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return ((0, jsx_runtime_1.jsxs)(Panel_1.default, { header: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", alignItems: "center", children: "Row Summary" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", children: (0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => {
-                            onChange({
-                                ...rowSummary,
-                                IsSuspended: true,
-                            });
-                        }, onUnSuspend: () => {
-                            onChange({
-                                ...rowSummary,
-                                IsSuspended: false,
-                            });
-                        }, suspendableObject: rowSummary }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", onClick: () => {
-                        onDelete();
-                    } })] }), className: "twa:p-2", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
-                                {
-                                    label: 'Top',
-                                    value: 'Top',
-                                },
-                                {
-                                    label: 'Bottom',
-                                    value: 'Bottom',
-                                },
-                            ], value: rowSummary.Position, onValueChange: (position) => {
-                                onChange({
-                                    ...rowSummary,
-                                    Position: position,
-                                });
-                            } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
-                                onChange({
-                                    ...rowSummary,
-                                    IncludeOnlyFilteredRows,
-                                });
-                            }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mt-2 twa:mb-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-1 twa:mb-2", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Panel_1.default, { bodyProps: { className: 'twa:max-h-full twa:bg-primarylight ' }, className: "twa:h-[360px]", children: (0, jsx_runtime_1.jsx)(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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }));
-                                }
-                                const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
-                                    label: expression,
-                                    value: expression,
-                                }));
-                                // check out if this layout has a aggregation with weighted column
-                                const aggregation = layout.TableAggregationColumns?.find((agg) => agg.ColumnId === column.columnId)?.AggFunc;
-                                if (aggregation &&
-                                    typeof aggregation === 'object' &&
-                                    aggregation.weightedColumnId) {
-                                    expressionOptions.push({
-                                        label: 'WEIGHTERD_AVG',
-                                        value: RowSummary_1.WEIGHTED_AVERAGE_AGGREGATED_FUNCTION,
-                                    });
-                                }
-                                const expression = rowSummary.ColumnsMap[column.columnId];
-                                return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
-                                                onChange({
-                                                    ...rowSummary,
-                                                    ColumnsMap: {
-                                                        ...rowSummary.ColumnsMap,
-                                                        [column.columnId]: expression,
-                                                    },
-                                                });
-                                            } })] }));
-                            }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
-                                const newColumnsMap = {};
-                                colIds.forEach((colId) => {
-                                    newColumnsMap[colId] = rowSummary.ColumnsMap[colId] ?? null;
-                                });
-                                onChange({
-                                    ...rowSummary,
-                                    ColumnsMap: newColumnsMap,
-                                });
-                            } }) })] })] }));
+    return ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:mb-3", bodyProps: { className: 'twa:p-2' }, children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium twa:flex-1", children: "Row Summary" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => {
+                                        onChange({
+                                            ...rowSummary,
+                                            IsSuspended: true,
+                                        });
+                                    }, onUnSuspend: () => {
+                                        onChange({
+                                            ...rowSummary,
+                                            IsSuspended: false,
+                                        });
+                                    }, suspendableObject: rowSummary }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", onClick: () => {
+                                        onDelete();
+                                    } })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1 twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
+                                            {
+                                                label: 'Top',
+                                                value: 'Top',
+                                            },
+                                            {
+                                                label: 'Bottom',
+                                                value: 'Bottom',
+                                            },
+                                        ], value: rowSummary.Position, onValueChange: (position) => {
+                                            onChange({
+                                                ...rowSummary,
+                                                Position: position,
+                                            });
+                                        } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
+                                            onChange({
+                                                ...rowSummary,
+                                                IncludeOnlyFilteredRows,
+                                            });
+                                        }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-[360px] 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: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), (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, 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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }));
+                                            }
+                                            const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
+                                            const expression = rowSummary.ColumnsMap[column.columnId];
+                                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: column })] }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:min-w-[140px]", value: expression, items: expressionOptions, onValueChange: (expression) => {
+                                                            onChange({
+                                                                ...rowSummary,
+                                                                ColumnsMap: {
+                                                                    ...rowSummary.ColumnsMap,
+                                                                    [column.columnId]: expression,
+                                                                },
+                                                            });
+                                                        } })] }));
+                                        }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
+                                            const newColumnsMap = {};
+                                            colIds.forEach((colId) => {
+                                                const existing = rowSummary.ColumnsMap[colId];
+                                                if (existing) {
+                                                    newColumnsMap[colId] = existing;
+                                                    return;
+                                                }
+                                                const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+                                                newColumnsMap[colId] = column
+                                                    ? getDefaultRowSummaryExpression(column, availableScalarExpressions, layout)
+                                                    : null;
+                                            });
+                                            onChange({
+                                                ...rowSummary,
+                                                ColumnsMap: newColumnsMap,
+                                            });
+                                        } }) })] })] })] }) }));
 });
 const RowSummarySection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -186,7 +208,7 @@ const RowSummarySection = (props) => {
             .getModuleExpressionFunctionsMap(ModuleConstants_1.LayoutModuleId).aggregatedScalarFunctions;
         return sytemExpressions;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Summaries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", 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: "Row Summaries" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Add summary rows at the top or bottom of the grid with aggregated column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => {
                                         props.onChange({
                                             ...layout,
                                             RowSummaries: [
@@ -214,6 +236,6 @@ const RowSummarySection = (props) => {
                                         RowSummaries: newSummaries,
                                     });
                                 } }, index));
-                        })] }) })] }));
+                        })] })] }) }));
 };
 exports.RowSummarySection = RowSummarySection;

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

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.SettingsSectionSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
+const TypeRadio_1 = require("../../../Wizard/TypeRadio");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const SettingsSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const isPivot = (0, isPivotLayout_1.isPivotLayout)(layout);
@@ -25,6 +24,6 @@ const SettingsSection = (props) => {
             Name: event.target.value,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "layout-type-table", disabled: true, checked: !(0, isPivotLayout_1.isPivotLayout)(layout), children: "Table" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "layout-type-pivot", disabled: true, checked: (0, isPivotLayout_1.isPivotLayout)(layout), children: "Pivot" })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 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: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for this Layout" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:max-w-[300px] twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) })] }), (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: "Grid Type" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "layout-type-table", children: (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { disabled: true, checked: !(0, isPivotLayout_1.isPivotLayout)(layout), text: "Table", description: "A flat layout \u2014 data is shown in standard rows and columns, one row per record" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "layout-type-pivot", children: (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { disabled: true, checked: (0, isPivotLayout_1.isPivotLayout)(layout), text: "Pivot", description: "An aggregated layout \u2014 data is grouped and summarized by pivot columns" }) })] }) })] })] }));
 };
 exports.SettingsSection = SettingsSection;

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const Tabs_1 = require("../../../../components/Tabs");
+const Card_1 = require("../../../../components/Card");
 const Tag_1 = require("../../../../components/Tag");
 const getLayoutSortViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutSortViewItems");
 const AdaptableContext_1 = require("../../../AdaptableContext");
@@ -60,6 +60,6 @@ const SortSection = (props) => {
             }),
         });
     }, [layout]);
-    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 Sorts" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (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)(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", 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 Sorts" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns to sort and set their sort order. Drag to change sort priority." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1 twa:min-h-[200px]", children: (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)(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }) }));
 };
 exports.SortSection = SortSection;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -10,7 +10,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const isValidNamedQueryExpression = (data, api) => {
     if (!data.BooleanExpression) {
-        return 'An expression is required.';
+        return 'An expression is required';
     }
     const valid = api.expressionApi.isValidBooleanExpression(data.BooleanExpression, ModuleConstants_1.NamedQueryModuleId);
     if (!valid) {

package/src/View/NamedQuery/Wizard/NamedQuerySettingsWizardSection.js

@@ -3,13 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamedQuerySettingsWizardSection = exports.renderNamedQuerySettingsSummary = exports.isValidNamedQuerySettings = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const isValidNamedQuerySettings = (data, api) => {
     const validationResult = api.namedQueryApi.isValidNamedQuery(data);
     const ErrorMessage = !validationResult.valid ? validationResult.message : null;
@@ -20,20 +18,17 @@ const isValidNamedQuerySettings = (data, api) => {
 };
 exports.isValidNamedQuerySettings = isValidNamedQuerySettings;
 const renderNamedQuerySettingsSummary = (data) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Name: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name })] }));
+    return ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name || 'Not specified' })] }));
 };
 exports.renderNamedQuerySettingsSummary = renderNamedQuerySettingsSummary;
 const NamedQuerySettingsWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const valid = (0, exports.isValidNamedQuerySettings)(data, api);
-    const errorMessage = valid === true ? null : valid;
-    const handleColumnNameChange = (event) => {
-        let e = event.target;
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleNameChange = (event) => {
         props.onChange({
             ...data,
-            Name: e.value,
+            Name: event.target.value,
         });
     };
-    return ((0, jsx_runtime_1.jsx)(WizardPanel_1.default, { "data-name": 'named-query-settings', children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "query-name", value: data.Name, autoFocus: true, className: "twa:w-[300px]", type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) }) }), ' ', errorMessage ? ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { children: errorMessage }) })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "named-query-settings", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 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: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Named Query" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "query-name", value: data.Name ?? '', autoFocus: true, className: "twa:max-w-[300px] twa:w-full", type: "text", placeholder: "Enter name for Named Query", onChange: handleNameChange }) })] }) }) }));
 };
 exports.NamedQuerySettingsWizardSection = NamedQuerySettingsWizardSection;

package/src/View/NamedQuery/Wizard/NamedQueryWizard.js

@@ -43,9 +43,7 @@ function NamedQueryWizard(props) {
                 details: 'Specify a unique Name for the Named Query',
                 renderSummary: NamedQuerySettingsWizardSection_1.renderNamedQuerySettingsSummary,
                 isValid: NamedQuerySettingsWizardSection_1.isValidNamedQuerySettings,
-                render: () => {
-                    return (0, jsx_runtime_1.jsx)(NamedQuerySettingsWizardSection_1.NamedQuerySettingsWizardSection, { onChange: setNamedQuery });
-                },
+                render: () => (0, jsx_runtime_1.jsx)(NamedQuerySettingsWizardSection_1.NamedQuerySettingsWizardSection, { onChange: setNamedQuery }),
             },
             {
                 details: 'Select Named Query Tags',

package/src/View/PlusMinus/Wizard/PlusMinusRuleWizardSection.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { PlusMinusNudge } from '../../../types';
+import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare function PlusMinusRuleSummary(): React.JSX.Element;
+export declare const PlusMinusRuleStepSummary: React.FunctionComponent;
+export declare const isRuleValid: (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => string | true;
 interface PlusMinusRuleWizardSectionProps {
     onChange: (data: PlusMinusNudge) => void;
     defaultPredicateId: string;