@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -1,18 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
+import { ColumnTag, Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { getLayoutWizardInitialExpandedCardId, isPivotColumnsSectionConfigured, } from './layoutWizardAccordionHelpers';
 import { columnFilter } from './Utilities';
+import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { Box } from '../../../../components/Flex';
+import { Box, Flex } from '../../../../components/Flex';
 import { CheckBox } from '../../../../components/CheckBox';
-export const PivotColumnsSectionSummary = () => {
+import { Card } from '../../../../components/Card';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { ColumnSortingWizardCard } from './SortSection';
+import { getTableColumnsSortingSummaryValues } from '../../../../Strategy/Utilities/Layout/columnsSummaryHelpers';
+import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
+export const PivotColumnsSectionSummary = (props) => {
     const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    return (_jsx(Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) }));
+    const { data: contextLayout } = useOnePageAdaptableWizardContext();
+    const layout = props.layout ?? contextLayout;
+    const sortValues = getTableColumnsSortingSummaryValues(layout, adaptable.api);
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Pivot Columns" }), _jsx(Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) })] }), sortValues.length ? (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Sorting" }), renderSummaryStringTags(sortValues)] })) : null] }));
 };
 export const PivotColumnsSection = (props) => {
     const adaptable = useAdaptable();
@@ -20,17 +29,21 @@ export const PivotColumnsSection = (props) => {
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         return ArrayExtensions.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 (_jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { children: "Pivot Columns" }), _jsxs(Tabs.Content, { children: [_jsx(Box, { className: "twa:mb-3 twa:px-2", children: _jsx(CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
-                                props.onChange({
-                                    ...layout,
-                                    PivotResultColumnsOrder: checked,
-                                });
-                            }, children: "Persist Order of Pivot Result Columns" }) }), _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange })] })] }));
+    const persistPivotResultOrder = !!layout.PivotResultColumnsOrder;
+    const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
+    const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'pivot-columns', isPivotColumnsSectionConfigured(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('pivot-columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-columns", title: "Pivot Columns", help: "Select and order the columns used as pivot columns", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.PivotColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col ", children: _jsx(Card, { shadow: false, className: "twa:h-full", children: _jsx(Card.Body, { children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('pivot-result-columns'), surface: "panel", "data-name": "pivot-result-columns", title: "Pivot Result Columns", help: "Configure how dynamically created pivot result columns are stored in the Layout", collapsedHelp: "How dynamically created pivot result columns are stored in the Layout", compactSummary: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }) }), children: _jsx(CheckBox, { checked: persistPivotResultOrder, onChange: (checked) => {
+                        props.onChange({
+                            ...layout,
+                            PivotResultColumnsOrder: checked,
+                        });
+                    }, children: "Persist order of pivot result columns" }) }), layoutSupportedFeatures.ColumnSorts ? (_jsx(ColumnSortingWizardCard, { layout: layout, onChange: props.onChange, bindCard: bindCard, title: "Column Sorting", cardId: "column-sorting", "data-name": "pivot-column-sorting" })) : null] }));
 };

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { PivotLayout } from '../../../../../types';
-export declare const PivotRowGroupingSectionSummary: React.FunctionComponent;
+export declare const PivotRowGroupingSectionSummary: React.FunctionComponent<{
+    layout?: PivotLayout;
+}>;
 interface PivotRowGroupingSectionProps {
     onChange: (data: PivotLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const PivotRowGroupingSection: React.FunctionComponent<PivotRowGroupingSectionProps>;
 export {};

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

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { getLayoutWizardInitialExpandedCardId, isPivotRowGroupingSectionConfigured, } from './layoutWizardAccordionHelpers';
 import { columnFilter } from './Utilities';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
+import { ColumnTag, Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
-import { RowGroupBehaviorSection } from './RowGroupingSection';
+import { RowGroupBehaviorSection, getRowGroupBehaviorLabel, } from './RowGroupingSection';
+import { PivotRowGroupSummaryTags } from '../../../Wizard/rowGroupSummaryTags';
 import { Box, Flex } from '../../../../components/Flex';
-export const PivotRowGroupingSectionSummary = () => {
+import { Card } from '../../../../components/Card';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+export const PivotRowGroupingSectionSummary = (props) => {
     const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    return (_jsx(Box, { children: layout.PivotGroupedColumns?.length ? (layout.PivotGroupedColumns.map((columnId) => {
-            return (_jsx(Box, { className: "twa:mb-2", children: _jsx(Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId) }));
-        })) : (_jsx(Tag, { children: "No Pivot Row Grouping" })) }));
+    const { data: contextLayout } = useOnePageAdaptableWizardContext();
+    const layout = props.layout ?? contextLayout;
+    return _jsx(PivotRowGroupSummaryTags, { layout: layout, api: adaptable.api });
 };
 export const PivotRowGroupingSection = (props) => {
     const adaptable = useAdaptable();
@@ -25,15 +28,23 @@ export const PivotRowGroupingSection = (props) => {
     const sortedGroupableColumns = React.useMemo(() => {
         return ArrayExtensions.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.PivotGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allGroupableColumns]);
-    const onChange = (layout) => {
-        props.onChange(normalizeLayout(layout));
+    const onChange = (nextLayout) => {
+        props.onChange(normalizeLayout(nextLayout));
     };
     const handleColumnsChange = (columnIds) => {
-        onChange({
+        const newLayout = {
             ...layout,
             PivotGroupedColumns: columnIds,
-        });
+        };
+        if (!newLayout.RowGroupValues) {
+            newLayout.RowGroupValues = {
+                RowGroupDefaultBehavior: 'always-collapsed',
+            };
+        }
+        onChange(newLayout);
     };
-    const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
-    return (_jsxs(Tabs, { style: { height: '100%' }, children: [_jsx(Tabs.Tab, { children: "Row Grouped Columns" }), _jsx(Tabs.Tab, { children: rowGroupsText }), _jsx(Tabs.Content, { children: _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), _jsx(Tabs.Content, { children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
+    const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
+    const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isPivotRowGroupingSectionConfigured(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.PivotGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotGroupedColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-row-grouped-columns-container", children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "pivot-row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }) }), children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
 };

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
-export declare const RowGroupingSectionSummary: React.FunctionComponent;
+export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
+export declare const RowGroupingSectionSummary: React.FunctionComponent<{
+    layout?: Layout;
+}>;
 interface RowGroupingSectionProps {
     onChange: (data: Layout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const RowGroupBehaviorSection: (props: {
     layout: Layout;
     onChange: (data: Layout) => void;
 }) => React.JSX.Element;
 export declare const RowGroupingSection: React.FunctionComponent<RowGroupingSectionProps>;
-export {};

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

@@ -1,55 +1,79 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import FormLayout from '../../../../components/FormLayout';
+import { getLayoutWizardInitialExpandedCardId, isRowGroupingSectionConfigured, } from './layoutWizardAccordionHelpers';
 import { columnFilter } from './Utilities';
 import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import { RadioGroup } from '../../../../components/Radio';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
+import { ColumnTag, Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
 import { TypeRadio } from '../../../Wizard/TypeRadio';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { Card } from '../../../../components/Card';
 import { Box, Flex } from '../../../../components/Flex';
-export const RowGroupingSectionSummary = () => {
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
+import { getRowGroupBehaviorLabel, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
+import { TableRowGroupSummaryTags } from '../../../Wizard/rowGroupSummaryTags';
+export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
+export const RowGroupingSectionSummary = (props) => {
     const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const { data: contextLayout } = useOnePageAdaptableWizardContext();
+    const layout = props.layout ?? contextLayout;
     if (adaptable.api.gridApi.isTreeDataGrid()) {
         return (_jsx(Flex, { flexDirection: "row", children: _jsx(Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
     }
-    return (_jsx(Flex, { flexDirection: "row", children: layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
-            return (_jsx(Box, { className: "twa:mb-2 twa:mr-2", children: _jsx(Tag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }) }, columnId));
-        })) : (_jsx(Tag, { children: "No Row Grouping" })) }));
+    return _jsx(TableRowGroupSummaryTags, { layout: layout, api: adaptable.api });
 };
 export const RowGroupBehaviorSection = (props) => {
     const { layout, onChange } = props;
-    return (_jsx(FormLayout, { children: _jsxs(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: [_jsx(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }), _jsx(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }), _jsx(TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }), _jsx(TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" })] }) }));
+    return (_jsxs(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: [_jsx(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "All Grouped Rows are always collapsed" }), _jsx(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "All Grouped Rows are always expanded" }), _jsx(TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "All Grouped Rows expanded, other than those collapsed when Layout last displayed" }), _jsx(TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "All Grouped Rows collapsed, other than those expanded when Layout last displayed" })] }));
+};
+const RowGroupDisplayTypeSection = ({ layout, onChange }) => {
+    const adaptable = useAdaptable();
+    return (_jsxs(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: [_jsx(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), _jsx(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), _jsx(TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }));
 };
 export const RowGroupingSection = (props) => {
     const adaptable = useAdaptable();
-    if (adaptable.api.gridApi.isTreeDataGrid()) {
-        return (_jsx(Flex, { flexDirection: "row", children: _jsx(Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
-    }
     const { data: layout } = 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.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allGroupableColumns]);
+    if (adaptable.api.gridApi.isTreeDataGrid()) {
+        return (_jsx(Flex, { flexDirection: "row", children: _jsx(Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
+    }
     const onChange = (layout) => {
         props.onChange(normalizeLayout(layout));
     };
@@ -65,17 +89,7 @@ export const RowGroupingSection = (props) => {
         }
         onChange(newLayout);
     };
-    return (_jsxs(Box, { className: "twa:h-full", children: [_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Group Display Type" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsxs(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 {
-                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
-                                    }
-                                    onChange(newLayout);
-                                }, children: [_jsx(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), _jsx(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" })] }) }) })] }), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouped Columns" }), _jsx(Tabs.Tab, { children: rowGroupsText }), _jsx(Tabs.Content, { children: _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), _jsx(Tabs.Content, { children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
+    const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isRowGroupingSectionConfigured(layout));
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
+    return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.RowGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.RowGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.RowGroupedColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), bodyClassName: "twa:min-h-[200px] twa:max-h-[420px]  twa:flex twa:flex-col twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:flex twa:flex-col", children: _jsx(Card.Body, { children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('display-type'), surface: "panel", "data-name": "row-group-display-type", title: "Group Display Type", help: "Choose how Row Grouped Columns display in the grid", collapsedHelp: "How Row Grouped Columns display in the grid", compactSummary: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }) }), children: _jsx(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }) }), children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
 };

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

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
-import Radio, { radioGroupStyling } from '../../../../components/Radio';
-import { RadioGroup } from '../../../../components/Radio';
-import { Tabs } from '../../../../components/Tabs';
+import Radio from '../../../../components/Radio';
+import { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
 import { Tag } from '../../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../../components/Flex';
-import { twMerge } from '../../../../twMerge';
 import HelpBlock from '../../../../components/HelpBlock';
 import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
 import { AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
+import { Card } from '../../../../components/Card';
 export const RowSelectionSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     if (layout.RowSelection === false) {
@@ -21,6 +20,11 @@ export const RowSelectionSectionSummary = () => {
     const rs = layout.RowSelection;
     return (_jsxs(Box, { children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Mode: ", rs.Mode === 'multiRow' ? 'Multi Row' : 'Single Row'] }), rs.Checkboxes != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Checkboxes: ", rs.Checkboxes ? 'Yes' : 'No'] })), rs.HeaderCheckbox != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Header Checkbox: ", rs.HeaderCheckbox ? 'Yes' : 'No'] })), rs.EnableClickSelection != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Click Selection: ", String(rs.EnableClickSelection)] })), rs.CheckboxInGroupColumn != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Checkbox Location: ", rs.CheckboxInGroupColumn ? 'Group Column' : 'Selection Column'] })), rs.GroupSelectMode != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Group Select Mode: ", rs.GroupSelectMode] })), rs.SelectAllMode != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Select All Mode: ", rs.SelectAllMode] }))] }));
 };
+const ROW_SELECTION_MODE_OPTIONS = [
+    { value: false, label: 'Disabled' },
+    { value: 'singleRow', label: 'Single Row' },
+    { value: 'multiRow', label: 'Multi Row' },
+];
 function getMode(layout) {
     if (!layout.RowSelection) {
         return false;
@@ -69,5 +73,5 @@ export const RowSelectionSection = (props) => {
         }
         props.onChange(newLayout);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Row Selection Mode" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "column", children: _jsxs(RadioGroup, { orientation: "horizontal", variant: "text-only", className: twMerge(radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-defaultbackground twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [_jsx(Radio, { value: false, children: "Disabled" }), _jsx(Radio, { value: "singleRow", children: "Single Row" }), _jsx(Radio, { value: "multiRow", children: "Multi Row" })] }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Selection Column Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(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) && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouping Selection Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Click Selection (when user clicks on Row outside of Selection Checkbox)" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Grouped Row Selection Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Select All (in Header) Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Selection Mode" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, value: mode, name: "rowSelectionMode", onRadioChange: (value) => handleModeChange(value), children: ROW_SELECTION_MODE_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-name": `row-selection-mode-${option.value === false ? 'disabled' : option.value}`, children: option.label }, String(option.value)))) }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Selection Column Checkboxes" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(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) && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Grouping Selection Checkboxes" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Click Selection" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Grouped Row Selection Behaviour" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Select All Behaviour" }), _jsx(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" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
 };