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

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import uniq from '../../../Utilities/utils/uniq';
 import clamp from '../../../Utilities/utils/clamp';
 import HelpBlock from '../../../components/HelpBlock';
@@ -22,6 +23,8 @@ import { FormatColumnPlaceholderDocsLink } from '../../../Utilities/Constants/Do
 import { PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../../../AdaptableState/Common/AdaptableColumn';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
+import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
+import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 const DateFormatPresets = [
     'MM/dd/yyyy',
     'dd-MM-yyyy',
@@ -61,6 +64,12 @@ const appendNumberFormatOptions = (items, options) => {
     appendDisplayFormatItem(items, 'Integer Separator', options.IntegerSeparator);
     appendDisplayFormatItem(items, 'Prefix', options.Prefix);
     appendDisplayFormatItem(items, 'Suffix', options.Suffix);
+    if (options.ZeroDisplay !== undefined && options.ZeroDisplay !== '0') {
+        items.push({
+            label: 'Zero Display',
+            value: options.ZeroDisplay === '' ? 'Blank' : options.ZeroDisplay,
+        });
+    }
     appendDisplayFormatItem(items, 'Content', options.Content);
     if (options.Multiplier != null && options.Multiplier !== 1) {
         items.push({ label: 'Multiplier', value: String(options.Multiplier) });
@@ -101,7 +110,14 @@ export const getFormatColumnDisplayFormatSummaryItems = (data) => {
         return [];
     }
     if (isAdaptableNumericFormatPreset(data.DisplayFormat)) {
-        return [{ label: '', value: `${NUMERIC_PRESET_LABELS[data.DisplayFormat]} Preset` }];
+        return [{ label: 'Preset', value: NUMERIC_PRESET_LABELS[data.DisplayFormat] }];
+    }
+    // Wizard materialises an empty { Formatter, Options: {} } shell while editing;
+    // treat it as unset (same as handleFinish in FormatColumnWizard).
+    if (data.DisplayFormat &&
+        typeof data.DisplayFormat === 'object' &&
+        isObjectEmpty(data.DisplayFormat.Options)) {
+        return [];
     }
     const resolved = resolveDisplayFormat(data.DisplayFormat);
     if (!resolved) {
@@ -110,9 +126,6 @@ export const getFormatColumnDisplayFormatSummaryItems = (data) => {
     const items = [];
     if (resolved.Formatter === 'NumberFormatter') {
         appendNumberFormatOptions(items, resolved.Options);
-        if (!items.length) {
-            items.push({ label: '', value: 'Number Format' });
-        }
         return items;
     }
     if (resolved.Formatter === 'DateFormatter') {
@@ -124,29 +137,21 @@ export const getFormatColumnDisplayFormatSummaryItems = (data) => {
                 value: options.CustomDisplayFormats.join(', '),
             });
         }
-        if (!items.length) {
-            items.push({ label: '', value: 'Date Format' });
-        }
         return items;
     }
     if (resolved.Formatter === 'StringFormatter') {
         appendStringFormatOptions(items, resolved.Options);
-        if (!items.length) {
-            items.push({ label: '', value: 'String Format' });
-        }
         return items;
     }
     return items;
 };
 export const hasFormatColumnDisplayFormat = (data) => getFormatColumnDisplayFormatSummaryItems(data).length > 0;
-export const getFormatColumnFormatSummaryValue = (data) => {
+export const getFormatColumnFormatSummaryTagValues = (data) => {
     const items = getFormatColumnDisplayFormatSummaryItems(data);
     if (!items.length) {
-        return 'No Display Format';
+        return [];
     }
-    return items
-        .map(({ label, value }) => (label ? `${label}: ${value}` : value))
-        .join(', ');
+    return items.map(({ label, value }) => (label ? `${label}: ${value}` : value));
 };
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -162,14 +167,11 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } }) }, customFormatter.id));
 };
 export const renderFormatColumnFormatSummary = (data) => {
-    const items = getFormatColumnDisplayFormatSummaryItems(data);
-    if (!items.length) {
+    const tagValues = getFormatColumnFormatSummaryTagValues(data);
+    if (!tagValues.length) {
         return _jsx(Tag, { children: "No Display Format" });
     }
-    if (items.length === 1 && !items[0].label) {
-        return _jsx(Tag, { children: items[0].value });
-    }
-    return (_jsx(Box, { className: "twa:flex twa:flex-col twa:gap-2", children: items.map(({ label, value }) => (_jsxs(Box, { children: [label, " ", _jsx(Tag, { children: value })] }, label))) }));
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagValues.map((tag) => (_jsx(Tag, { children: tag }, tag))) }));
 };
 export const getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {
@@ -266,27 +268,61 @@ export const getFormatDisplayTypeForScope = (scope, api) => {
     }
     return undefined;
 };
+const NUMBER_FORMAT_INPUT_CLASS = 'twa:w-[72px] twa:min-w-[72px] twa:max-w-[72px]';
+const NUMBER_FORMAT_LABEL_COLUMN = {
+    name: 'label',
+    className: 'ab-FormLayout_column--label twa:whitespace-nowrap',
+};
+const NUMBER_FORMAT_CHECKBOX_CHILDREN_COLUMN = {
+    name: 'children',
+    className: 'twa:pl-2',
+};
+const NUMBER_FORMAT_VALUE_CHILDREN_COLUMN = {
+    name: 'children',
+    className: 'twa:pl-2',
+};
+const NUMBER_FORMAT_DIGIT_FORM_SIZES = ['148px', '72px'];
+const NUMBER_FORMAT_VALUE_FORM_SIZES = ['92px', '72px'];
+const NUMBER_FORMAT_CHECKBOX_FORM_SIZES = ['72px', 'auto'];
+const DATE_FORMAT_PRESET_ROW_HEIGHT = 32;
+const DATE_FORMAT_PRESET_HEADER_HEIGHT = 40;
+const DateFormatPresetsTable = ({ onApplyPattern }) => {
+    const rows = React.useMemo(() => DateFormatPresets.map((pattern) => ({
+        pattern,
+        formattedDate: FormatHelper.DateFormatter(new Date(), { Pattern: pattern }) ?? '',
+    })), []);
+    const columns = React.useMemo(() => ({
+        pattern: {
+            field: 'pattern',
+            header: 'Pattern',
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+        formattedDate: {
+            field: 'formattedDate',
+            header: 'Formatted Date',
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+        apply: {
+            field: 'pattern',
+            header: '',
+            defaultWidth: 80,
+            align: 'center',
+            renderMenuIcon: false,
+            render: ({ data }) => (_jsx(SimpleButton, { "data-name": "apply-format-pattern", "data-value": data.pattern, onClick: () => onApplyPattern(data.pattern), children: "Apply" })),
+        },
+    }), [onApplyPattern]);
+    const tableHeight = DATE_FORMAT_PRESET_HEADER_HEIGHT + rows.length * DATE_FORMAT_PRESET_ROW_HEIGHT;
+    return (_jsx(DataSource, { data: rows, primaryKey: "pattern", children: _jsx(InfiniteTableGrid, { sortable: false, domProps: { style: { height: tableHeight, width: '100%' } }, columns: columns }) }));
+};
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
     if (resolved?.Formatter !== 'DateFormatter') {
         return null;
     }
-    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: "Format" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Either create your own date pattern, or pick one of the presets below \u2014 see the", ' ', _jsx("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank", children: "available symbols" }), "."] })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: _jsxs(FormRow, { label: "Pattern", children: [_jsx(Input, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), _jsx("span", { children: resolved.Options.Pattern &&
-                                            FormatHelper.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
-                                    { Content: 'Pattern', Size: 1 },
-                                    { Content: 'Formatted Date', Size: 1 },
-                                    { Content: '', Size: 1 },
-                                ] }), DateFormatPresets.map((Pattern, index) => (_jsx(AdaptableObjectRow, { colItems: [
-                                    { Content: Pattern, Size: 1 },
-                                    {
-                                        Content: FormatHelper.DateFormatter(new Date(), { Pattern }),
-                                        Size: 1,
-                                    },
-                                    {
-                                        Content: (_jsx(SimpleButton, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern), children: "Apply" })),
-                                        Size: 1,
-                                    },
-                                ] }, index)))] })] })] }));
+    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: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter a Unicode date pattern (e.g. dd/MM/yyyy), or pick a preset below" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: _jsxs(FormRow, { label: "Pattern", children: [_jsx(Input, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), _jsx("span", { children: resolved.Options.Pattern &&
+                                            FormatHelper.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: _jsx(DateFormatPresetsTable, { onApplyPattern: (pattern) => setFormatOption('Pattern', pattern) }) })] })] }));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -300,7 +336,9 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const setPreset = (preset) => {
         onChange({ DisplayFormat: preset });
     };
-    const activePreset = isAdaptableNumericFormatPreset(data.DisplayFormat) ? data.DisplayFormat : undefined;
+    const activePreset = isAdaptableNumericFormatPreset(data.DisplayFormat)
+        ? data.DisplayFormat
+        : undefined;
     const IS_PERCENT = activePreset === 'Percentage';
     const IS_THOUSAND = activePreset === 'Thousand';
     const IS_MILLION = activePreset === 'Million';
@@ -317,13 +355,27 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const IS_FX_RATE = activePreset === 'FXRate';
     const IS_SCIENTIFIC = activePreset === 'Scientific';
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (_jsxs(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick a common numeric preset as a starting point" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:m-2", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), _jsx(Radio, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), _jsx(Radio, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), _jsx(Radio, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), _jsx(Radio, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), _jsx(Radio, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), _jsx(Radio, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), _jsx(Radio, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), _jsx(Radio, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), _jsx(Radio, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), _jsx(Radio, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), _jsx(Radio, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Fine-tune digits, separators, prefix / suffix and rounding behaviour" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", children: [_jsxs(FormLayout, { className: "twa:mr-3", children: [_jsx(FormRow, { label: "Fraction Digits", children: _jsx(Input, { "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick a common numeric preset as a starting point" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:m-2", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), _jsx(Radio, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), _jsx(Radio, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), _jsx(Radio, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), _jsx(Radio, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), _jsx(Radio, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), _jsx(Radio, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), _jsx(Radio, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), _jsx(Radio, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), _jsx(Radio, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), _jsx(Radio, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), _jsx(Radio, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:pl-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Fine-tune digits, separators, prefix / suffix and rounding behaviour" })] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: _jsxs(Box, { className: "twa:flex twa:flex-row twa:items-start twa:-ml-0.5", children: [_jsxs(FormLayout, { sizes: NUMBER_FORMAT_DIGIT_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, { name: 'children' }], className: "twa:mr-6 twa:shrink-0", children: [_jsx(FormRow, { label: "Fraction Digits", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
                                                     ? resolved.Options.FractionDigits
                                                     : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), _jsx(FormRow, { label: "Integer Digits", children: _jsx(Input, { "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Integer Digits", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) })] }), _jsxs(FormLayout, { className: "twa:mr-3", children: [_jsx(FormRow, { label: "Prefix", children: _jsx(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Parentheses", children: _jsx(CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) }) }), _jsx(FormRow, { label: "Empty", children: _jsx(CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }) })] }), _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Truncate", children: _jsx(CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) }) }), _jsx(FormRow, { label: "Round", children: _jsx(CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) }) }), _jsx(FormRow, { label: "Ceiling", children: _jsx(CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) }) }), _jsx(FormRow, { label: "Floor", children: _jsx(CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) }) }), _jsx(FormRow, { label: "Absolute", children: _jsx(CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }) }), _jsx(FormRow, { label: "Scientific", children: _jsx(CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) }) })] })] }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Dynamic Content" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide dynamic content through the use of Placeholders" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { className: "twa:m-2", children: [_jsxs(FormRow, { label: "", children: [_jsx(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }), "Learn more about using placeholders"] }))] }), ' '] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Examples" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against sample values" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [_jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) }), _jsx(FormRow, { label: "Prefix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Zero Display", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
+                                                    resolved.Options.ZeroDisplay === '0'
+                                                    ? '0'
+                                                    : resolved.Options.ZeroDisplay, onChange: (e) => {
+                                                    const value = e.currentTarget.value;
+                                                    if (value === '') {
+                                                        setFormatOption('ZeroDisplay', '');
+                                                    }
+                                                    else if (value === '0') {
+                                                        setFormatOption('ZeroDisplay', undefined);
+                                                    }
+                                                    else {
+                                                        setFormatOption('ZeroDisplay', value);
+                                                    }
+                                                } }) })] }), _jsxs(Flex, { className: "twa:gap-2 twa:shrink-0", children: [_jsxs(FormLayout, { sizes: NUMBER_FORMAT_CHECKBOX_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_CHECKBOX_CHILDREN_COLUMN], children: [_jsx(FormRow, { label: "Parentheses", children: _jsx(CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) }) }), _jsx(FormRow, { label: "Empty", children: _jsx(CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }) }), _jsx(FormRow, { label: "Truncate", children: _jsx(CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) }) }), _jsx(FormRow, { label: "Round", children: _jsx(CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_CHECKBOX_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, { name: 'children' }], children: [_jsx(FormRow, { label: "Ceiling", children: _jsx(CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) }) }), _jsx(FormRow, { label: "Floor", children: _jsx(CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) }) }), _jsx(FormRow, { label: "Absolute", children: _jsx(CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }) }), _jsx(FormRow, { label: "Scientific", children: _jsx(CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) }) })] })] })] }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Dynamic Content" }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: [_jsx(Box, { children: "Provide dynamic content through the use of Placeholders" }), showDocumentationLinks && (_jsx(ButtonInfo, { variant: "text", tone: "accent", tooltip: "Learn more about using placeholders", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }))] })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { className: "twa:m-2", children: [_jsx(FormRow, { label: "", children: _jsx(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }) }), ' '] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Examples" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against sample values" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
                                     { Content: 'Raw Number', Size: 1 },
                                     { Content: 'Formatted Number', Size: 1 },
                                 ] }), _jsx(AdaptableObjectRow, { colItems: [
@@ -344,6 +396,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                         Content: FormatHelper.NumberFormatter(0.123, resolved.Options),
                                         Size: 1,
                                     },
+                                ] }), _jsx(AdaptableObjectRow, { colItems: [
+                                    { Content: '0', Size: 1 },
+                                    {
+                                        Content: FormatHelper.NumberFormatter(0, resolved.Options),
+                                        Size: 1,
+                                    },
                                 ] })] })] })] }));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
@@ -368,7 +426,6 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
 export const FormatColumnFormatWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
-    const formatColumnApi = adaptable.api.formatColumnApi;
     const customDisplayFormatters = adaptable.api.optionsApi.getFormatColumnOptions().customDisplayFormatters ?? [];
     const update = (updated) => {
         props.onChange({ ...data, ...updated });

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

@@ -7,6 +7,5 @@ type FormatColumnRuleWizardSectionProps = {
 };
 export declare const hasFormatColumnCondition: (formatColumn: FormatColumn) => boolean;
 export declare const renderFormatColumnConditionSummary: (formatColumn: FormatColumn, api: AdaptableApi) => React.JSX.Element;
-export declare const renderFormatColumnConditionWizardSummary: (formatColumn: FormatColumn) => React.JSX.Element;
 export declare function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): React.JSX.Element;
 export {};

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

@@ -28,10 +28,6 @@ export const renderFormatColumnConditionSummary = (formatColumn, api) => {
     const expressionText = api.internalApi.getAdaptableQueryExpressionText(rule);
     return _jsx(Tag, { children: expressionText || 'No Condition' });
 };
-export const renderFormatColumnConditionWizardSummary = (formatColumn) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    return renderFormatColumnConditionSummary(formatColumn, api);
-};
 export function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     if (data.Target && data.Target === 'columnHeader') {

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

@@ -5,15 +5,16 @@ import { useAdaptable } from '../../AdaptableContext';
 import { getColumnTypeFriendlyName } from '../../../AdaptableState/Common/AdaptableColumn';
 import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 import { Box, Flex } from '../../../components/Flex';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
-import { Tag } from '../../../components/Tag';
+import { ColumnTag, Tag } from '../../../components/Tag';
+import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
+import { cn } from '../../../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',
@@ -31,6 +32,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 = useAdaptable();
     const scopeApi = adaptable.api.columnScopeApi;
@@ -39,23 +52,45 @@ const FormatColumnScopeSummaryContent = ({ data, }) => {
     const showRows = data.Target === 'cell';
     const includedKinds = collectIncludedRowKinds(data);
     const allKinds = includedKinds.length === 4;
-    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [_jsx(Box, { children: scopeApi.scopeIsAll(scope) ? (_jsxs(_Fragment, { children: ["Columns ", _jsx(Tag, { children: "All" })] })) : 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => (_jsx(Tag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : (_jsx(Tag, { children: "None" }))] })) : 'DataTypes' in scope ? (_jsxs(_Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:mr-1", children: getColumnTypeFriendlyName(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" }))] })) : null }), showRows && (_jsxs(Box, { children: ["Rows", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [_jsx(Box, { children: scopeApi.scopeIsAll(scope) ? (_jsxs(_Fragment, { children: ["Columns ", _jsx(Tag, { children: "All" })] })) : 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => (_jsx(ColumnTag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : (_jsx(Tag, { children: "None" }))] })) : 'DataTypes' in scope ? (_jsxs(_Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:mr-1", children: getColumnTypeFriendlyName(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" }))] })) : null }), showRows && (_jsxs(Box, { children: ["Rows", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
 };
 export const renderFormatColumnScopeSummary = (data) => {
     return _jsx(FormatColumnScopeSummaryContent, { data: data });
 };
+const FormatColumnColumnsScopeSummary = ({ data, }) => {
+    const adaptable = useAdaptable();
+    const scopeApi = adaptable.api.columnScopeApi;
+    const scope = data.Scope;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
+    if (scopeApi.scopeIsAll(scope)) {
+        return _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: "All columns in the row" }) });
+    }
+    if ('ColumnIds' in scope) {
+        return (_jsx(CollapsibleWizardValueSummary, { value: columnsInScope.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnsInScope.map((column) => (_jsx(ColumnTag, { children: column.friendlyName }, column.columnId))) })) : (_jsx(Tag, { children: "None" })) }));
+    }
+    if ('DataTypes' in scope) {
+        return (_jsx(CollapsibleWizardValueSummary, { value: scope.DataTypes.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => (_jsx(Tag, { children: getColumnTypeFriendlyName(dataType) }, dataType))) })) : (_jsx(Tag, { children: "None" })) }));
+    }
+    return null;
+};
+const FormatColumnRowsScopeSummary = ({ data, }) => {
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return (_jsx(CollapsibleWizardValueSummary, { value: allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => (_jsx(Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
+};
+const FormatColumnRowScopePanel = ({ data, onRowKindChange, }) => (_jsx(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) => (_jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind))) }));
 // ---------------------------------------------------------------------------
 // Section
 // ---------------------------------------------------------------------------
 export const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
+    const adaptable = 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 = '';
             }
@@ -63,8 +98,6 @@ export 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 (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
                             return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
                         }
@@ -85,8 +118,16 @@ export const FormatColumnScopeWizardSection = (props) => {
         });
     };
     const showRowToggles = data.Target === 'cell';
-    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { descriptions: {
-                                rowScope: 'Format all columns in the row',
-                                columnScope: 'Select columns to format',
-                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && (_jsxs(Box, { className: "twa:border-t twa:border-border twa:py-3 twa:shrink-0", children: [_jsxs(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: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), _jsx(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) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(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 } = useWizardCardAccordion(initialExpandedCardId, { fillExpandedCard: true });
+    const columnsCompactSummary = scopeApi.scopeIsAll(scope) ? (_jsx(Tag, { children: "All columns" })) : 'ColumnIds' in scope ? (renderCompactColumnTags(scope.ColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' })) : 'DataTypes' in scope ? (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:shrink-0", children: getColumnTypeFriendlyName(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" })) })) : null;
+    const rowsCompactSummary = allRowKindsIncluded ? (_jsx(Tag, { children: "All" })) : includedRowKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => (_jsx(Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(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: _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: _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:h-full", children: _jsx(NewScopeComponent, { descriptions: {
+                            rowScope: 'Format all Columns in the Row',
+                            columnScope: 'Select Columns to format',
+                        }, scope: data.Scope, updateScope: handleScopeChange }) }) }), showRowToggles && (_jsx(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: _jsx(FormatColumnRowsScopeSummary, { data: data }), children: _jsx(FormatColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) }))] }));
 };

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

@@ -57,7 +57,7 @@ export const FormatColumnSettingsWizardSection = (props) => {
         });
     };
     const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    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: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(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)" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), _jsx(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsxs(Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), _jsx(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" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+    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: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(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)" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), _jsx(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsxs(Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), _jsx(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" })] }), _jsx(Card.Body, { children: _jsxs(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,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleComponent } from '../../Components/StyleComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import UIHelper from '../../UIHelper';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { Box } from '../../../components/Flex';
 import { Tag } from '../../../components/Tag';
+import { isSummaryInTagLabel, renderSummaryLabelValueTagContent, summaryStringsToTagContents, } from '../../Wizard/SummaryColorTag';
 import { getFormatColumnStylePreviewText } from './FormatColumnPreview';
 export const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
@@ -60,13 +61,9 @@ export const hasFormatColumnStyle = (formatColumn) => {
     return getFormatColumnStyleSummaryItems(formatColumn).length > 0;
 };
 export const getFormatColumnStyleViewValues = (formatColumn) => {
-    return getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`);
+    return summaryStringsToTagContents(getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`));
 };
-export const renderFormatColumnStyleWizardSummary = (data) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    return renderFormatColumnStyleSummary(data, api);
-};
-export const renderFormatColumnStyleSummary = (data, _api) => {
+export const renderFormatColumnStyleSummary = (data) => {
     const hasStyle = data.Style != null && UIHelper.IsNotEmptyStyle(data.Style);
     if (!hasStyle) {
         return _jsx(Tag, { children: "No Style" });
@@ -75,7 +72,7 @@ export const renderFormatColumnStyleSummary = (data, _api) => {
     if (!items.length) {
         return _jsx(Tag, { children: "No Style" });
     }
-    return (_jsx(Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2", children: items.map(({ label, value }) => (_jsxs(Box, { children: [label, " ", _jsx(Tag, { children: value })] }, label))) }));
+    return (_jsx(Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2", children: items.map(({ label, value }) => (_jsx(Box, { children: isSummaryInTagLabel(label) ? (_jsx(Tag, { children: renderSummaryLabelValueTagContent(label, value) })) : (_jsxs(_Fragment, { children: [label, " ", _jsx(Tag, { children: value })] })) }, label))) }));
 };
 export function FormatColumnStyleWizardSection(props) {
     const { data, api } = useOnePageAdaptableWizardContext();

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnScopeWizardSection';
-import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleWizardSummary, } from './FormatColumnStyleWizardSection';
+import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleSummary, } from './FormatColumnStyleWizardSection';
 import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
 import { FormatColumnSettingsWizardSection, renderFormatColumnSettingsSummary, } from './FormatColumnSettingsWizardSection';
@@ -15,11 +15,11 @@ import { useDispatch } from 'react-redux';
 import * as FormatColumnRedux from '../../../Redux/ActionsReducers/FormatColumnRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
-import { FormatColumnRuleWizardSection, renderFormatColumnConditionWizardSummary } from './FormatColumnRuleWizardSection';
+import { FormatColumnRuleWizardSection, renderFormatColumnConditionSummary, } from './FormatColumnRuleWizardSection';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
 import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
-import { isAdaptableNumericFormatPreset, } from '../../../AdaptableState/Common/AdaptableFormatPresets';
-import { Box, Flex } from '../../../components/Flex';
+import { isAdaptableNumericFormatPreset } from '../../../AdaptableState/Common/AdaptableFormatPresets';
+import { Box } from '../../../components/Flex';
 import { FormatColumnPreviewSummaryCard } from './FormatColumnPreview';
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
@@ -101,10 +101,7 @@ export 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 &&
-            !isAdaptableNumericFormatPreset(df) &&
-            df.Options &&
-            isObjectEmpty(df.Options)) {
+        if (df && !isAdaptableNumericFormatPreset(df) && df.Options && isObjectEmpty(df.Options)) {
             delete formatColumn.DisplayFormat;
         }
         if (formatColumn.Style && isObjectEmpty(formatColumn.Style)) {
@@ -141,9 +138,7 @@ export function FormatColumnWizard(props) {
                 details: 'Select which Columns and Rows will be formatted',
                 isValid: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
-                render: () => {
-                    return (_jsx(Flex, { flexDirection: "column", className: "twa:h-full", children: _jsx(FormatColumnScopeWizardSection, { onChange: setFormatColumn }) }));
-                },
+                render: () => _jsx(FormatColumnScopeWizardSection, { onChange: setFormatColumn }),
             },
             {
                 isValid: (abObject, api, context) => {
@@ -154,7 +149,7 @@ export function FormatColumnWizard(props) {
                 },
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',
-                renderSummary: renderFormatColumnConditionWizardSummary,
+                renderSummary: renderFormatColumnConditionSummary,
                 render: () => {
                     return (_jsx(FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
                 },
@@ -163,7 +158,7 @@ export function FormatColumnWizard(props) {
                 title: 'Style',
                 details: 'Create a Style',
                 isValid: isFormatColumnStyleValid,
-                renderSummary: renderFormatColumnStyleWizardSummary,
+                renderSummary: renderFormatColumnStyleSummary,
                 render: () => {
                     return (_jsx(Box, { className: "twa:p-2", children: _jsx(FormatColumnStyleWizardSection, { onChange: setFormatColumn }) }));
                 },

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

@@ -1,8 +1,7 @@
 export 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,
@@ -10,6 +9,8 @@ export 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);
 };