@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnScopeWizardSection = exports.renderFormatColumnScopeSummary = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -9,15 +8,16 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableColumn_1 = require("../../../AdaptableState/Common/AdaptableColumn");
 const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const Flex_1 = require("../../../components/Flex");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Tag_1 = require("../../../components/Tag");
+const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
+const utils_1 = require("../../../lib/utils");
 const FORMAT_COLUMN_ROW_KINDS = ['Data', 'Group', 'Summary', 'Total'];
 const ROW_KIND_LABELS = {
-    Data: 'Data (leaf) rows',
-    Group: 'Group rows',
-    Summary: 'Summary rows',
-    Total: 'Total rows',
+    Data: 'Data (leaf) Rows',
+    Group: 'Group Rows',
+    Summary: 'Summary Rows',
+    Total: 'Total Rows',
 };
 const ROW_KIND_EXCLUDE_KEY = {
     Data: 'ExcludeDataRows',
@@ -35,6 +35,18 @@ const isRowKindIncluded = (data, kind) => {
 const collectIncludedRowKinds = (data) => {
     return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
 };
+const isFormatColumnColumnsScopeConfigured = (scope, scopeApi) => {
+    if (scopeApi.scopeIsAll(scope)) {
+        return true;
+    }
+    if ('ColumnIds' in scope) {
+        return scope.ColumnIds.length > 0;
+    }
+    if ('DataTypes' in scope) {
+        return scope.DataTypes.length > 0;
+    }
+    return false;
+};
 const FormatColumnScopeSummaryContent = ({ data, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const scopeApi = adaptable.api.columnScopeApi;
@@ -43,24 +55,46 @@ const FormatColumnScopeSummaryContent = ({ data, }) => {
     const showRows = data.Target === 'cell';
     const includedKinds = collectIncludedRowKinds(data);
     const allKinds = includedKinds.length === 4;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: scopeApi.scopeIsAll(scope) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })] })) : 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : null }), showRows && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Rows", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: scopeApi.scopeIsAll(scope) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })] })) : 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" }))] })) : null }), showRows && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Rows", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
 };
 const renderFormatColumnScopeSummary = (data) => {
     return (0, jsx_runtime_1.jsx)(FormatColumnScopeSummaryContent, { data: data });
 };
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
+const FormatColumnColumnsScopeSummary = ({ data, }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const scopeApi = adaptable.api.columnScopeApi;
+    const scope = data.Scope;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
+    if (scopeApi.scopeIsAll(scope)) {
+        return (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All columns in the row" }) });
+    }
+    if ('ColumnIds' in scope) {
+        return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: columnsInScope.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnsInScope.map((column) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: column.friendlyName }, column.columnId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) }));
+    }
+    if ('DataTypes' in scope) {
+        return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: scope.DataTypes.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) }));
+    }
+    return null;
+};
+const FormatColumnRowsScopeSummary = ({ data, }) => {
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardValueSummary, { value: allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
+};
+const FormatColumnRowScopePanel = ({ data, onRowKindChange, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: FORMAT_COLUMN_ROW_KINDS.map((kind) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind))) }));
 // ---------------------------------------------------------------------------
 // Section
 // ---------------------------------------------------------------------------
 const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const scopeApi = adaptable.api.columnScopeApi;
     const handleScopeChange = (Scope) => {
         const newData = { ...data, Scope };
         const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
         if (newData.Rule?.Predicates?.length) {
             if (wholeRow) {
-                // if scope is whole row, a predicate cannot be present, so we set the rule
-                // to be a boolean expression
                 delete newData.Rule.Predicates;
                 newData.Rule.BooleanExpression = '';
             }
@@ -68,8 +102,6 @@ const FormatColumnScopeWizardSection = (props) => {
                 const validPredicateIds = new Set(api.formatColumnApi.internalApi.getFormatColumnDefsForScope(Scope).map((def) => def.id));
                 newData.Rule = {
                     Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                        // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                        // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
                         if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
                             return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
                         }
@@ -90,9 +122,17 @@ const FormatColumnScopeWizardSection = (props) => {
         });
     };
     const showRowToggles = data.Target === 'cell';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-                                rowScope: 'Format all columns in the row',
-                                columnScope: 'Select columns to format',
-                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:border-t twa:border-border twa:py-3 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-3 twa:px-2 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [FORMAT_COLUMN_ROW_KINDS.slice(0, 2), FORMAT_COLUMN_ROW_KINDS.slice(2)].map((rowKindGroup, groupIndex) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[220px]", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
+    const scope = data.Scope;
+    const columnsScopeConfigured = isFormatColumnColumnsScopeConfigured(scope, scopeApi);
+    const includedRowKinds = collectIncludedRowKinds(data);
+    const allRowKindsIncluded = includedRowKinds.length === 4;
+    const initialExpandedCardId = columnsScopeConfigured ? null : 'columns';
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedCardId, { fillExpandedCard: true });
+    const columnsCompactSummary = scopeApi.scopeIsAll(scope) ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All columns" })) : 'ColumnIds' in scope ? ((0, CollapsibleWizardCard_1.renderCompactColumnTags)(scope.ColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' })) : 'DataTypes' in scope ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: scope.DataTypes.length ? (scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType)))) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) })) : null;
+    const rowsCompactSummary = allRowKindsIncluded ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedRowKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "format-column-scope-columns", title: "Columns", help: "Which Columns the Format Column will be applied to", collapsedHelp: "Columns the Format Column applies to", compactSummary: columnsCompactSummary, summary: (0, jsx_runtime_1.jsx)(FormatColumnColumnsScopeSummary, { data: data }), 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: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:h-full", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+                            rowScope: 'Format all Columns in the Row',
+                            columnScope: 'Select Columns to format',
+                        }, scope: data.Scope, updateScope: handleScopeChange }) }) }), showRowToggles && ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('rows'), surface: "panel", "data-name": "format-column-scope-rows", title: "Rows", help: "Which kinds of Rows the Format Column will be applied to", collapsedHelp: "Row kinds the Format Column applies to", compactSummary: rowsCompactSummary, summary: (0, jsx_runtime_1.jsx)(FormatColumnRowsScopeSummary, { data: data }), children: (0, jsx_runtime_1.jsx)(FormatColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) }))] }));
 };
 exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -62,7 +62,7 @@ const FormatColumnSettingsWizardSection = (props) => {
         });
     };
     const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    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 the Format Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), (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: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[700px]", children: "Choose whether Format Column applies to Column Cells or Column Header (latter doesn't support Conditions)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), (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.jsxs)(Flex_1.Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Format Column is applied to the Column Group" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+    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 the Format Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), (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: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[700px]", children: "Choose whether Format Column applies to Column Cells or Column Header (latter doesn't support Conditions)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), (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.jsxs)(Flex_1.Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Format Column is applied in a Column Group" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                 props.onChange({
                                     ...data,
                                     ColumnGroupScope: columnGroupScope,

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.d.ts

@@ -6,8 +6,7 @@ type FormatColumnStyleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
 export declare const hasFormatColumnStyle: (formatColumn: FormatColumn) => boolean;
-export declare const getFormatColumnStyleViewValues: (formatColumn: FormatColumn) => string[];
-export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => React.JSX.Element;
-export declare const renderFormatColumnStyleSummary: (data: FormatColumn, _api: AdaptableApi) => React.JSX.Element;
+export declare const getFormatColumnStyleViewValues: (formatColumn: FormatColumn) => React.ReactNode[];
+export declare const renderFormatColumnStyleSummary: (data: FormatColumn) => React.JSX.Element;
 export declare function FormatColumnStyleWizardSection(props: FormatColumnStyleWizardSectionProps): React.JSX.Element;
 export {};

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderFormatColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = exports.getFormatColumnStyleViewValues = exports.hasFormatColumnStyle = exports.isFormatColumnStyleValid = void 0;
+exports.renderFormatColumnStyleSummary = exports.getFormatColumnStyleViewValues = exports.hasFormatColumnStyle = exports.isFormatColumnStyleValid = void 0;
 exports.FormatColumnStyleWizardSection = FormatColumnStyleWizardSection;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -10,6 +10,7 @@ const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const FormatColumnPreview_1 = require("./FormatColumnPreview");
 const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
@@ -67,15 +68,10 @@ const hasFormatColumnStyle = (formatColumn) => {
 };
 exports.hasFormatColumnStyle = hasFormatColumnStyle;
 const getFormatColumnStyleViewValues = (formatColumn) => {
-    return getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`);
+    return (0, SummaryColorTag_1.summaryStringsToTagContents)(getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`));
 };
 exports.getFormatColumnStyleViewValues = getFormatColumnStyleViewValues;
-const renderFormatColumnStyleWizardSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (0, exports.renderFormatColumnStyleSummary)(data, api);
-};
-exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
-const renderFormatColumnStyleSummary = (data, _api) => {
+const renderFormatColumnStyleSummary = (data) => {
     const hasStyle = data.Style != null && UIHelper_1.default.IsNotEmptyStyle(data.Style);
     if (!hasStyle) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style" });
@@ -84,7 +80,7 @@ const renderFormatColumnStyleSummary = (data, _api) => {
     if (!items.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style" });
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [label, " ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: value })] }, label))) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, SummaryColorTag_1.isSummaryInTagLabel)(label) ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, SummaryColorTag_1.renderSummaryLabelValueTagContent)(label, value) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, " ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: value })] })) }, label))) }));
 };
 exports.renderFormatColumnStyleSummary = renderFormatColumnStyleSummary;
 function FormatColumnStyleWizardSection(props) {

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -105,10 +105,7 @@ function FormatColumnWizard(props) {
         // DisplayFormat object so we don't persist an empty shell. Preset
         // strings are always meaningful and should never be removed here.
         const df = formatColumn?.DisplayFormat;
-        if (df &&
-            !(0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(df) &&
-            df.Options &&
-            (0, ObjectExtensions_1.isObjectEmpty)(df.Options)) {
+        if (df && !(0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(df) && df.Options && (0, ObjectExtensions_1.isObjectEmpty)(df.Options)) {
             delete formatColumn.DisplayFormat;
         }
         if (formatColumn.Style && (0, ObjectExtensions_1.isObjectEmpty)(formatColumn.Style)) {
@@ -145,9 +142,7 @@ function FormatColumnWizard(props) {
                 details: 'Select which Columns and Rows will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
-                render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: (0, jsx_runtime_1.jsx)(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn }) }));
-                },
+                render: () => (0, jsx_runtime_1.jsx)(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn }),
             },
             {
                 isValid: (abObject, api, context) => {
@@ -158,7 +153,7 @@ function FormatColumnWizard(props) {
                 },
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',
-                renderSummary: FormatColumnRuleWizardSection_1.renderFormatColumnConditionWizardSummary,
+                renderSummary: FormatColumnRuleWizardSection_1.renderFormatColumnConditionSummary,
                 render: () => {
                     return ((0, jsx_runtime_1.jsx)(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
@@ -167,7 +162,7 @@ function FormatColumnWizard(props) {
                 title: 'Style',
                 details: 'Create a Style',
                 isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
-                renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
+                renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleSummary,
                 render: () => {
                     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FormatColumnStyleWizardSection_1.FormatColumnStyleWizardSection, { onChange: setFormatColumn }) }));
                 },

package/src/View/FreeTextColumn/Utilities/getFreeTextColumnSettingsTags.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFreeTextColumnSettingsTags = void 0;
 const getFreeTextColumnSettingsTags = (settings) => {
-    const { DataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable } = settings ?? {};
+    const { Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = settings ?? {};
     const colTypes = settings?.ColumnTypes ? settings.ColumnTypes.join(', ') : '';
     return [
-        DataType ? `DataType: ${DataType}` : null,
         Width ? `Width: ${Width}px` : null,
         Pivotable ? 'Pivotable' : null,
         Filterable ? 'Filterable' : null,
@@ -13,6 +12,8 @@ const getFreeTextColumnSettingsTags = (settings) => {
         Groupable ? 'Groupable' : null,
         Sortable ? 'Sortable' : null,
         Aggregatable ? 'Aggregatable' : null,
+        SuppressMenu ? 'Suppress Menu' : null,
+        SuppressMovable ? 'Suppress Movable' : null,
         colTypes ? `Column Types: ${colTypes}` : null,
     ].filter(Boolean);
 };

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -15,7 +15,6 @@ const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWi
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
 const Card_1 = require("../../../components/Card");
-const Tag_2 = require("../../../components/Tag/Tag");
 const getFreeTextColumnSettingsTags_1 = require("../Utilities/getFreeTextColumnSettingsTags");
 const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
 const dataTypeOptions = [
@@ -26,7 +25,7 @@ const dataTypeOptions = [
 ];
 const renderFreeTextColumnSettingsSummary = (data) => {
     const propertyTags = (0, getFreeTextColumnSettingsTags_1.getFreeTextColumnSettingsTags)(data.FreeTextColumnSettings);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Data Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Default Value: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Editor Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(Tag_2.TagList, { tags: propertyTags }) })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Data Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Default Value: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Editor Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Properties:", ' ', propertyTags.map((tag, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: index > 0 ? 'twa:ml-1' : undefined, children: tag }, String(tag))))] })) : null] }));
 };
 exports.renderFreeTextColumnSettingsSummary = renderFreeTextColumnSettingsSummary;
 const isValidFreeTextColumnSettings = (data) => {

package/src/View/GridFilter/GridFilterPopupUI/index.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPopupUI = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../components/DropdownButton");
+const icons_1 = require("../../../components/icons");
 const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
@@ -27,6 +28,6 @@ const GridFilterPopupUI = (props) => {
             onRunQuery();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", (0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full", children: [(0, jsx_runtime_1.jsx)(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), (0, jsx_runtime_1.jsx)(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions_1.default.IsNotNullOrEmpty(expression) && ((0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [(0, jsx_runtime_1.jsx)(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? ((0, jsx_runtime_1.jsx)(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start", children: "Columns" }), (0, jsx_runtime_1.jsx)(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", (0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full", children: [(0, jsx_runtime_1.jsx)(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), (0, jsx_runtime_1.jsx)(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions_1.default.IsNotNullOrEmpty(expression) && ((0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [(0, jsx_runtime_1.jsx)(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? ((0, jsx_runtime_1.jsx)(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), (0, jsx_runtime_1.jsxs)(DropdownButton_1.NewDropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "list" }), "Columns"] }), (0, jsx_runtime_1.jsx)(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
 };
 exports.GridFilterPopupUI = GridFilterPopupUI;

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPanelControl = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
 const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
@@ -17,6 +16,7 @@ const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor
 const Flex_1 = require("../../components/Flex");
 const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const utils_1 = require("../../lib/utils");
 const QueryViewPanelComponent = (props) => {
     const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     if (!isAdaptableReady) {
@@ -28,10 +28,10 @@ const QueryViewPanelComponent = (props) => {
     const renderExpressionLabel = () => {
         const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-background twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
-        const labelClassName = (0, clsx_1.default)(baseClasses, {
+        const labelClassName = (0, utils_1.cn)(baseClasses, {
             [placeholderClasses]: !expression,
         });
-        const expressionLabel = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
+        const expressionLabel = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
         return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, expressionLabel, gridFilter && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
     };
     const hasExpression = StringExtensions_1.default.IsNotNullOrEmpty(expression);
@@ -46,9 +46,9 @@ const QueryViewPanelComponent = (props) => {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
     };
     const isToolbar = props.viewType === 'Toolbar';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, clsx_1.default)(`ab-${elementType}__Query__wrap`, {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, utils_1.cn)(`ab-${elementType}__Query__wrap`, {
             'twa:w-[500px]': isToolbar,
-        }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-shrink-0', {
+        }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)('twa:flex-shrink-0', {
                     'twa:pl-1': isToolbar,
                     'twa:pt-1': !isToolbar,
                 }), children: renderButtons() })] }));

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectsSummary = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils");
 const Flex_1 = require("../../../components/Flex");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
 const useRerender_1 = require("../../../components/utils/useRerender");
 const react_1 = require("react");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const AdaptableObjectsSummary = ({ className, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const rerender = (0, useRerender_1.useRerender)();
@@ -17,7 +16,7 @@ const AdaptableObjectsSummary = ({ className, }) => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
             if (!module.isModuleVisible()) {
                 return null;
             }

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -12,7 +12,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 const DefaultAdaptableOptions_1 = require("../../../AdaptableOptions/DefaultAdaptableOptions");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../../lib/utils");
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
 const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
@@ -238,7 +238,7 @@ const GridInfoPopup = (props) => {
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Summary" }) : null, showState ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid State" }) : null, showOptions ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: section.rows, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: {
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: (0, utils_1.cn)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Summary" }) : null, showState ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid State" }) : null, showOptions ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: section.rows, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: {
                                                     style: { height: sectionHeight(section.rows), width: '100%' },
                                                 }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -16,7 +16,7 @@ const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
-const NewDropdownButton_1 = require("../../components/NewDropdownButton");
+const DropdownButton_1 = require("../../components/DropdownButton");
 const icons_1 = require("../../components/icons");
 const Flex_1 = require("../../components/Flex");
 const NewSelect_1 = require("../../components/NewSelect");
@@ -63,7 +63,7 @@ const LayoutViewPanelComponent = (props) => {
                         },
                     ] })) : ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ...layoutSelectCommonProps, items: toLayoutSelectItems(Layouts) })) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
                     ? GeneralConstants.READ_ONLY_STYLE
-                    : '', `ab-${elementType}__Layout__wrap`), children: [(0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), (0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), (0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
+                    : '', `ab-${elementType}__Layout__wrap`), children: [(0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), (0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), (0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
                             {
                                 dataName: 'table',
                                 label: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "Table Layout" }),

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -14,7 +14,6 @@ const ColumnsSection_1 = require("./sections/ColumnsSection");
 const PivotColumnsSection_1 = require("./sections/PivotColumnsSection");
 const RowGroupingSection_1 = require("./sections/RowGroupingSection");
 const AggregationsSection_1 = require("./sections/AggregationsSection");
-const SortSection_1 = require("./sections/SortSection");
 const FilterSection_1 = require("./sections/FilterSection");
 const GridFilterSection_1 = require("./sections/GridFilterSection");
 const RowSummarySection_1 = require("./sections/RowSummarySection");
@@ -28,11 +27,22 @@ const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
     const layoutName = layout.Name?.trim();
     return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
 };
+const getLayoutWizardMode = (popupParams, initialLayout) => {
+    const action = popupParams?.action;
+    if (action === 'Edit') {
+        return 'edit';
+    }
+    if (action === 'New' || action === 'Clone') {
+        return 'create';
+    }
+    return initialLayout ? 'edit' : 'create';
+};
 const LayoutWizard = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allLayouts = adaptable.api.layoutApi.getLayouts();
     const initialLayout = props.data ?? props.popupParams?.value;
+    const layoutWizardMode = getLayoutWizardMode(props.popupParams, initialLayout);
     const [layout, setLayout] = React.useState(() => {
         let preparedLayout = null;
         if (initialLayout) {
@@ -102,36 +112,29 @@ const LayoutWizard = (props) => {
                 title: 'Pivot Row Groups',
                 isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Pivot Row Grouping',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSection, { onChange: (newLayout) => {
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, { layout: data }),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotRowGroupingSection_1.PivotRowGroupingSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => {
                             setLayout(newLayout);
                         } }) })),
             },
             {
                 title: 'Pivot Columns',
-                details: 'Select Pivot Columns',
+                details: 'Select Pivot Columns and Column Sorting',
                 isVisible: () => layoutSupportedFeatures.PivotColumns,
                 renderSummary: () => (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotColumnsSection_1.PivotColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => setLayout(newLayout) }) })),
             },
             {
                 title: 'Pivot Aggregations',
                 isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
                 details: 'Select Pivot Column Aggregations',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSectionSummary, {}),
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSectionSummary, { layout: data }),
                 isValid: (data) => (0, PivotAggregationsSection_1.isPivotAggregationsSectionValid)(data),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(PivotAggregationsSection_1.PivotAggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
                             const newLayout = (0, Helper_1.cloneObject)(layout);
                             setLayout(newLayout);
                         } }) })),
             },
-            {
-                title: 'Sort',
-                isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => (0, jsx_runtime_1.jsx)(SortSection_1.SortSectionSummary, {}),
-                details: 'Configure Aggregated Column Sorts',
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
-            },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
@@ -180,23 +183,23 @@ const LayoutWizard = (props) => {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Row Grouping and Display Behaviour',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }) })),
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSectionSummary, { layout: data }),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout, layoutWizardMode: layoutWizardMode }) })),
             },
             {
                 title: 'Columns',
-                details: 'Select Columns',
+                details: 'Configure Column Visibility, Order, Pinning, Sizing and Sorting',
                 isVisible: () => true,
-                renderSummary: () => (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSectionSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSection, { onChange: setLayout }) })),
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSectionSummary, { layout: data }),
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(ColumnsSection_1.ColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: setLayout }) })),
             },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
                 details: 'Select Aggregation Columns and Behaviour',
-                renderSummary: () => (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSectionSummary, {}),
+                renderSummary: (data) => (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSectionSummary, { layout: data }),
                 isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
                             let newLayout = (0, Helper_1.cloneObject)(layout);
                             // if we do not have an weighted avg col, we need to clear the row summary if one exists
                             if (newLayout.RowSummaries) {
@@ -235,13 +238,6 @@ const LayoutWizard = (props) => {
                 isValid: RowSummarySection_1.areSummaryRowsValid,
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowSummarySection_1.RowSummarySection, { onChange: setLayout }) })),
             },
-            {
-                title: 'Sort',
-                isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => (0, jsx_runtime_1.jsx)(SortSection_1.SortSectionSummary, {}),
-                details: 'Configure Column Sorts',
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
-            },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,

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

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { Layout, TableLayout } from '../../../../../types';
+import { AggregationColumnValue } from '../../../../AdaptableState/Common/AggregationColumns';
+export type GrandTotalRowPosition = 'top' | 'bottom' | 'pinnedTop' | 'pinnedBottom';
+export declare const GRAND_TOTAL_ROW_LABELS: Record<GrandTotalRowPosition | 'off', string>;
+export declare const GRAND_TOTAL_ROW_DESCRIPTIONS: Record<GrandTotalRowPosition | 'off', string>;
+export declare const GRAND_TOTAL_ROW_OPTIONS: (GrandTotalRowPosition | 'off')[];
+export declare function getGrandTotalRowKey(layout: Layout): GrandTotalRowPosition | 'off';
+export declare function getGrandTotalRowLabel(layout: Layout): string;
+export declare function getGrandTotalRowDescription(layout: Layout): string;
+export declare function getAggFuncSummaryLabel(columnId: string, aggFunc: AggregationColumnValue, aggregationColumnsMap: Record<string, string>): string;
 export declare const isAggregationsSectionValid: (data: Layout) => true | string;
-export declare const AggregationsSectionSummary: React.FunctionComponent;
+export declare const AggregationsSectionSummary: React.FunctionComponent<{
+    layout?: TableLayout;
+}>;
 interface AggregationsSectionProps {
     onChange: (data: TableLayout) => void;
+    layoutWizardMode?: 'create' | 'edit';
 }
 export declare const AggregationsSection: React.FunctionComponent<AggregationsSectionProps>;
 export {};