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

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

@@ -1,8 +1,7 @@
-import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import Panel from '../../../../components/Panel';
 import SimpleButton from '../../../../components/SimpleButton';
 import { ButtonNew } from '../../../Components/Buttons/ButtonNew';
 import { Card } from '../../../../components/Card';
@@ -20,6 +19,9 @@ import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../../components/Flex';
 import { SingleSelect } from '../../../../components/NewSelect';
+import { CollapsibleWizardCard, getWizardAccordionSectionClassName, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
+import { cn } from '../../../../lib/utils';
+import { objectListActionButtonClassName } from '../../../Components/AdaptableObjectList/objectListActionButtonStyles';
 export const areSummaryRowsValid = (layout) => {
     if (!layout.RowSummaries)
         return true;
@@ -34,6 +36,7 @@ export const areSummaryRowsValid = (layout) => {
     });
     return valid;
 };
+const rowSummaryCardId = (index) => `row-summary-${index}`;
 const availableExpressionsForColumnTypeCache = new Map();
 const getAvailableExpressionsForColumnType = (columnType, availableScalarExpressions) => {
     const key = columnType;
@@ -99,18 +102,27 @@ const getDefaultRowSummaryExpression = (column, availableScalarExpressions, layo
     }
     return optionValues[0] ?? null;
 };
+const RowSummaryPositionTag = ({ position }) => _jsx(Tag, { className: "twa:shrink-0", children: position });
+const RowSummaryCardSummary = ({ rowSummary }) => {
+    const adaptable = useAdaptable();
+    const columnIds = Object.keys(rowSummary.ColumnsMap ?? {}).filter((colId) => colId !== 'Source' && colId !== 'Uuid');
+    if (!columnIds.length) {
+        return _jsx(Tag, { children: "No columns" });
+    }
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnIds.map((colId) => (_jsxs(ColumnTag, { children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId))) }));
+};
 export const RowSummarySectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     return (_jsx(Box, { className: "twa:flex twa:flex-col", children: layout.RowSummaries?.length ? (layout.RowSummaries.map((rowSummary, index) => {
-            return (_jsx(_Fragment, { children: _jsxs(Box, { className: "twa:mr-1 twa:mb-1", children: [rowSummary.Position, ":", ' ', Object.keys(rowSummary.ColumnsMap).map((colId) => {
-                            if (colId === 'Source' || colId === 'Uuid')
-                                return null;
-                            return (_jsxs(ColumnTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
-                        })] }, index) }));
+            return (_jsxs(Box, { className: "twa:mr-1 twa:mb-1", children: [rowSummary.Position, ":", ' ', Object.keys(rowSummary.ColumnsMap).map((colId) => {
+                        if (colId === 'Source' || colId === 'Uuid')
+                            return null;
+                        return (_jsxs(ColumnTag, { className: "twa:mr-1", children: [rowSummary.ColumnsMap[colId], "(", adaptable.api.columnApi.getFriendlyNameForColumnId(colId), ")"] }, colId));
+                    })] }, index));
         })) : (_jsx(Tag, { children: "No Row Summaries" })) }));
 };
-const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpressions, onDelete, }) => {
+const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalarExpressions, }) => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const columns = React.useMemo(() => {
@@ -126,109 +138,123 @@ const RowSummaryEditor = React.memo(({ rowSummary, onChange, availableScalarExpr
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return (_jsx(Panel, { className: "twa:mb-3", bodyProps: { className: 'twa:p-2' }, children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { className: "twa:w-full", children: [_jsx(Box, { className: "twa:font-medium twa:flex-1", children: "Row Summary" }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:shrink-0", children: [_jsx(SuspendToggleButton, { onSuspend: () => {
-                                        onChange({
-                                            ...rowSummary,
-                                            IsSuspended: true,
-                                        });
-                                    }, onUnSuspend: () => {
-                                        onChange({
-                                            ...rowSummary,
-                                            IsSuspended: false,
-                                        });
-                                    }, suspendableObject: rowSummary }), _jsx(SimpleButton, { icon: "delete", onClick: () => {
-                                        onDelete();
-                                    } })] })] }), _jsxs(Card.Body, { className: "twa:p-1 twa:gap-3", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
-                                            {
-                                                label: 'Top',
-                                                value: 'Top',
-                                            },
-                                            {
-                                                label: 'Bottom',
-                                                value: 'Bottom',
-                                            },
-                                        ], value: rowSummary.Position, onValueChange: (position) => {
-                                            onChange({
-                                                ...rowSummary,
-                                                Position: position,
-                                            });
-                                        } }) }), _jsx(FormRow, { label: "", children: _jsx(CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
-                                            onChange({
-                                                ...rowSummary,
-                                                IncludeOnlyFilteredRows,
-                                            });
-                                        }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:h-[400px] twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
-                                            const label = column.friendlyName ?? column.columnId;
-                                            const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
-                                            if (disabled) {
-                                                return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [label, _jsx(ColumnGroupTag, { column: column }), _jsx(SingleSelect, { disabled: true, items: [{ label: 'Select Aggregation', value: null }] })] }));
-                                            }
-                                            const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
-                                            const expression = rowSummary.ColumnsMap[column.columnId];
-                                            return (_jsxs(Flex, { children: [_jsxs(Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, _jsx(ColumnGroupTag, { column: column })] }), _jsx(SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
-                                                            onChange({
-                                                                ...rowSummary,
-                                                                ColumnsMap: {
-                                                                    ...rowSummary.ColumnsMap,
-                                                                    [column.columnId]: expression,
-                                                                },
-                                                            });
-                                                        } })] }));
-                                        }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
-                                            const newColumnsMap = {};
-                                            colIds.forEach((colId) => {
-                                                const existing = rowSummary.ColumnsMap[colId];
-                                                if (existing) {
-                                                    newColumnsMap[colId] = existing;
-                                                    return;
-                                                }
-                                                const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
-                                                newColumnsMap[colId] = column
-                                                    ? getDefaultRowSummaryExpression(column, availableScalarExpressions, layout)
-                                                    : null;
-                                            });
-                                            onChange({
-                                                ...rowSummary,
-                                                ColumnsMap: newColumnsMap,
-                                            });
-                                        } }) })] })] })] }) }));
+    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:min-h-0 twa:overflow-hidden", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
+                                {
+                                    label: 'Top',
+                                    value: 'Top',
+                                },
+                                {
+                                    label: 'Bottom',
+                                    value: 'Bottom',
+                                },
+                            ], value: rowSummary.Position, onValueChange: (position) => {
+                                onChange({
+                                    ...rowSummary,
+                                    Position: position,
+                                });
+                            } }) }), _jsx(FormRow, { label: "", children: _jsx(CheckBox, { checked: rowSummary.IncludeOnlyFilteredRows ?? true, onChange: (IncludeOnlyFilteredRows) => {
+                                onChange({
+                                    ...rowSummary,
+                                    IncludeOnlyFilteredRows,
+                                });
+                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
+                                const label = column.friendlyName ?? column.columnId;
+                                const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
+                                if (disabled) {
+                                    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [label, _jsx(ColumnGroupTag, { column: column }), _jsx(SingleSelect, { disabled: true, items: [{ label: 'Select Aggregation', value: null }] })] }));
+                                }
+                                const expressionOptions = buildRowSummaryExpressionOptions(column, availableScalarExpressions, layout);
+                                const expression = rowSummary.ColumnsMap[column.columnId];
+                                return (_jsxs(Flex, { children: [_jsxs(Flex, { className: "twa:mr-2", alignItems: 'center', children: [label, _jsx(ColumnGroupTag, { column: column })] }), _jsx(SingleSelect, { value: expression, items: expressionOptions, onValueChange: (expression) => {
+                                                onChange({
+                                                    ...rowSummary,
+                                                    ColumnsMap: {
+                                                        ...rowSummary.ColumnsMap,
+                                                        [column.columnId]: expression,
+                                                    },
+                                                });
+                                            } })] }));
+                            }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
+                                const newColumnsMap = {};
+                                colIds.forEach((colId) => {
+                                    const existing = rowSummary.ColumnsMap[colId];
+                                    if (existing) {
+                                        newColumnsMap[colId] = existing;
+                                        return;
+                                    }
+                                    const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+                                    newColumnsMap[colId] = column
+                                        ? getDefaultRowSummaryExpression(column, availableScalarExpressions, layout)
+                                        : null;
+                                });
+                                onChange({
+                                    ...rowSummary,
+                                    ColumnsMap: newColumnsMap,
+                                });
+                            } }) })] })] }));
 });
 export const RowSummarySection = (props) => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
+    const rowSummaries = layout.RowSummaries ?? [];
     const availableScalarExpressions = React.useMemo(() => {
         const sytemExpressions = adaptable.api.internalApi
             .getQueryLanguageService()
             .getModuleExpressionFunctionsMap(LayoutModuleId).aggregatedScalarFunctions;
         return sytemExpressions;
     }, []);
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:h-full", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Summaries" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Add summary rows at the top or bottom of the grid with aggregated column values" })] }), _jsxs(Card.Body, { className: "twa:p-1", children: [_jsxs(Flex, { className: "twa:mb-2", children: [_jsx(Flex, { className: "twa:flex-1" }), _jsx(ButtonNew, { onClick: () => {
-                                        props.onChange({
-                                            ...layout,
-                                            RowSummaries: [
-                                                ...(layout.RowSummaries ?? []),
-                                                {
-                                                    Position: 'Top',
-                                                    ColumnsMap: {},
-                                                    IncludeOnlyFilteredRows: true,
-                                                },
-                                            ],
-                                        });
-                                    }, children: "Add Row Summary" })] }), (layout.RowSummaries ?? []).map((rowSummary, index) => {
-                            return (_jsx(RowSummaryEditor, { onDelete: () => {
-                                    const newSummaries = [...layout.RowSummaries];
-                                    newSummaries.splice(index, 1);
-                                    props.onChange({
-                                        ...layout,
-                                        RowSummaries: newSummaries,
-                                    });
-                                }, availableScalarExpressions: availableScalarExpressions, rowSummary: rowSummary, onChange: (rowSummary) => {
-                                    const newSummaries = [...layout.RowSummaries];
-                                    newSummaries[index] = rowSummary;
-                                    props.onChange({
-                                        ...layout,
-                                        RowSummaries: newSummaries,
-                                    });
-                                } }, index));
-                        })] })] }) }));
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(null);
+    const handleAddRowSummary = () => {
+        const newIndex = rowSummaries.length;
+        props.onChange({
+            ...layout,
+            RowSummaries: [
+                ...rowSummaries,
+                {
+                    Position: 'Top',
+                    ColumnsMap: {},
+                    IncludeOnlyFilteredRows: true,
+                },
+            ],
+        });
+        setExpandedId(rowSummaryCardId(newIndex));
+    };
+    const handleDeleteRowSummary = (index) => {
+        const cardId = rowSummaryCardId(index);
+        const newSummaries = [...rowSummaries];
+        newSummaries.splice(index, 1);
+        props.onChange({
+            ...layout,
+            RowSummaries: newSummaries,
+        });
+        if (expandedId === cardId) {
+            setExpandedId(null);
+            return;
+        }
+        if (expandedId?.startsWith('row-summary-')) {
+            const expandedIndex = Number(expandedId.replace('row-summary-', ''));
+            if (!Number.isNaN(expandedIndex) && expandedIndex > index) {
+                setExpandedId(rowSummaryCardId(expandedIndex - 1));
+            }
+        }
+    };
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:mb-2 twa:max-w-[520px] twa:shrink-0", children: "Add summary rows at the top or bottom of the grid with aggregated column values" }), _jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: rowSummaries.map((rowSummary, index) => {
+                    const cardBinding = bindCard(rowSummaryCardId(index), { fillAvailable: true });
+                    return (_jsx(CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `row-summary-${index}`, title: `Row Summary ${index + 1}`, help: "Configure position, filters, and column aggregations for this summary row", collapsedHelp: false, compactSummary: _jsx(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? (_jsx(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: _jsxs(_Fragment, { children: [cardBinding.expanded ? (_jsx(SuspendToggleButton, { iconSize: 26, className: objectListActionButtonClassName('suspend'), onSuspend: () => {
+                                        const newSummaries = [...rowSummaries];
+                                        newSummaries[index] = { ...rowSummary, IsSuspended: true };
+                                        props.onChange({ ...layout, RowSummaries: newSummaries });
+                                    }, onUnSuspend: () => {
+                                        const newSummaries = [...rowSummaries];
+                                        newSummaries[index] = { ...rowSummary, IsSuspended: false };
+                                        props.onChange({ ...layout, RowSummaries: newSummaries });
+                                    }, suspendableObject: rowSummary })) : null, _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: objectListActionButtonClassName('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: _jsx(RowSummaryCardSummary, { rowSummary: rowSummary }), 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", children: _jsx(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
+                                const newSummaries = [...rowSummaries];
+                                newSummaries[index] = nextRowSummary;
+                                props.onChange({
+                                    ...layout,
+                                    RowSummaries: newSummaries,
+                                });
+                            } }) }, rowSummaryCardId(index)));
+                }) })] }));
 };

package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { BadgePillStyle } from '../../../AdaptableState/StyledColumnState';
+import { BadgePillStyle } from '../../../AdaptableState/StyledColumns/BadgeStyle';
 export interface BadgePillStyleEditorProps {
     api: AdaptableApi;
     /** Current pill style (may be undefined / partial). */

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js

@@ -57,32 +57,47 @@ const getBadgeDefinitionSummaryItems = (badge, api) => {
     items.push({ label: 'Rule', value: rule });
     items.push({ label: 'Shape', value: badge.Shape ?? 'Rounded' });
     items.push(...getBadgePillStyleSummaryItems(badge.PillStyle));
-    if (badge.Icon) {
+    const iconProps = badge.IconProperties;
+    if (iconProps?.Icon) {
         items.push({
             label: 'Icon',
-            value: 'name' in badge.Icon ? badge.Icon.name : 'Custom',
-            icon: badge.Icon,
+            value: 'name' in iconProps.Icon ? iconProps.Icon.name : 'Custom',
+            icon: iconProps.Icon,
         });
     }
-    if (badge.IconOnly) {
+    if (iconProps?.IconOnly) {
         items.push({ label: 'Icon Only', value: 'Yes' });
     }
-    if (badge.Icon && badge.IconPosition) {
-        items.push({ label: 'Icon Position', value: badge.IconPosition });
+    if (iconProps?.Icon && iconProps.Position) {
+        items.push({ label: 'Icon Position', value: iconProps.Position });
     }
-    if (typeof badge.IconGap === 'number') {
-        items.push({ label: 'Icon Gap', value: `${badge.IconGap}px` });
+    if (typeof iconProps?.Gap === 'number') {
+        items.push({ label: 'Icon Gap', value: `${iconProps.Gap}px` });
     }
     return items;
 };
-const BadgePreview = ({ badge, density, previewValue }) => (_jsx(Badge, { pillStyle: badge.PillStyle, icon: badge.Icon, iconPosition: badge.IconPosition, shape: badge.Shape, density: density, iconGap: badge.IconGap, children: badge.IconOnly ? '' : previewValue }));
+const BadgePreview = ({ badge, density, previewValue }) => (_jsx(Badge, { pillStyle: badge.PillStyle, icon: badge.IconProperties?.Icon, iconPosition: badge.IconProperties?.Position, shape: badge.Shape, density: density, iconGap: badge.IconProperties?.Gap, children: badge.IconProperties?.IconOnly ? '' : previewValue }));
 const BadgeCardSummary = ({ badge, api }) => (_jsx(CollapsibleWizardValueSummary, { value: renderSummaryLabelValueTags(getBadgeDefinitionSummaryItems(badge, api)) }));
 const BadgeEditorForm = (props) => {
     const { api } = useOnePageAdaptableWizardContext();
     const { badge, columnId, onChange } = props;
     const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
     const currentShape = badge.Shape ?? 'Rounded';
-    const hasIcon = Boolean(badge.Icon);
+    const iconProps = badge.IconProperties;
+    const hasIcon = Boolean(iconProps?.Icon);
+    const updateIconProperties = (patch) => {
+        const next = {
+            ...(iconProps ?? { Icon: undefined }),
+            ...patch,
+        };
+        if (!next.Icon) {
+            const cleaned = { ...badge };
+            delete cleaned.IconProperties;
+            onChange(cleaned);
+            return;
+        }
+        onChange({ ...badge, IconProperties: next });
+    };
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-2", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Shape" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define shape of the corners for this badge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(RadioGroup, { orientation: "horizontal", name: `ab-badge-shape-${columnId}`, value: currentShape, onRadioChange: (value) => onChange({ ...badge, Shape: value }), className: "twa:gap-3", children: SHAPE_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, children: choice.label }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Colours and font styling for the badge pill" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(BadgePillStyleEditor, { embedded: true, api: api, value: badge.PillStyle, onChange: (next) => {
                                 if (next) {
                                     onChange({ ...badge, PillStyle: next });
@@ -100,31 +115,23 @@ const BadgeEditorForm = (props) => {
                             }, onClear: () => onChange({
                                 ...badge,
                                 Predicate: undefined,
-                            }) })) : (_jsx(ErrorBox, { children: "Select a column first" })) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Icon" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional icon inside the badge \u2014 position and spacing apply once an icon is selected" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Icon", children: !badge.Icon || 'name' in badge.Icon ? (_jsx(AdaptableIconSelector, { value: badge?.Icon && 'name' in badge.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
+                            }) })) : (_jsx(ErrorBox, { children: "Select a column first" })) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Icon" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional icon inside the badge \u2014 position and spacing apply once an icon is selected" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Icon", children: !iconProps?.Icon || 'name' in iconProps.Icon ? (_jsx(AdaptableIconSelector, { value: iconProps?.Icon && 'name' in iconProps.Icon ? iconProps.Icon.name : undefined, onChange: (iconName) => {
                                             if (iconName) {
-                                                onChange({
-                                                    ...badge,
-                                                    Icon: {
-                                                        name: iconName,
-                                                    },
+                                                updateIconProperties({
+                                                    Icon: { name: iconName },
                                                 });
                                             }
                                             else {
-                                                onChange({
-                                                    ...badge,
-                                                    Icon: undefined,
-                                                    IconOnly: undefined,
-                                                    IconPosition: undefined,
-                                                    IconGap: undefined,
-                                                });
+                                                const cleaned = { ...badge };
+                                                delete cleaned.IconProperties;
+                                                onChange(cleaned);
                                             }
-                                        } })) : (_jsx(AdaptableIconComponent, { icon: badge.Icon })) }), _jsx(FormRow, { label: "Icon Position", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { disabled: !hasIcon, className: "twa:w-full", value: badge.IconPosition ?? 'Start', onValueChange: (v) => onChange({ ...badge, IconPosition: v }), items: [
+                                        } })) : (_jsx(AdaptableIconComponent, { icon: iconProps.Icon })) }), _jsx(FormRow, { label: "Icon Position", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { disabled: !hasIcon, className: "twa:w-full", value: iconProps?.Position ?? 'Start', onValueChange: (v) => updateIconProperties({ Position: v }), items: [
                                                 { value: 'Start', label: 'Start' },
                                                 { value: 'End', label: 'End' },
-                                            ] }) }) }), _jsx(FormRow, { label: "Show Icon Only", children: _jsx(CheckBox, { disabled: !hasIcon, checked: badge.IconOnly, onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }) }), _jsx(FormRow, { label: "Icon Gap", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(NumberInput, { disabled: !hasIcon || badge.IconOnly, value: badge.IconGap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
-                                                    onChange({
-                                                        ...badge,
-                                                        IconGap: typeof value === 'number' && value >= 0 ? value : undefined,
+                                            ] }) }) }), _jsx(FormRow, { label: "Show Icon Only", children: _jsx(CheckBox, { disabled: !hasIcon, checked: iconProps?.IconOnly, onClick: () => updateIconProperties({ IconOnly: !iconProps?.IconOnly }) }) }), _jsx(FormRow, { label: "Icon Gap", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(NumberInput, { disabled: !hasIcon || iconProps?.IconOnly, value: iconProps?.Gap ?? '', placeholder: "auto", step: 1, min: 0, style: { width: 70 }, onChange: (value) => {
+                                                    updateIconProperties({
+                                                        Gap: typeof value === 'number' && value >= 0 ? value : undefined,
                                                     });
                                                 } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between icon and text \u2014 leave blank to follow Density" })] }) })] }) })] })] }));
 };
@@ -188,8 +195,7 @@ export const StyledColumnBadgeSection = (props) => {
         ? api.columnApi.getColumnDataTypeForColumnId(data.ColumnId)
         : 'text';
     const previewValue = getBadgePreviewValue(dataType);
-    const initialExpandedCardId = badges.length === 1 ? badgeCardId(0) : null;
-    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(initialExpandedCardId);
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(null);
     const handleAddBadge = () => {
         const newIndex = badges.length;
         props.onChange({

package/src/View/StyledColumn/Wizard/StyledColumnSliceStyleEditors.d.ts

@@ -13,9 +13,7 @@ export interface StyledColumnFontStyleEditorProps {
     disabled?: boolean;
     /**
      * When true, the Alignment row is omitted entirely. Used by Styled Columns
-     * that own horizontal alignment elsewhere (e.g. Percent Bar's "Auto / Left /
-     * Center / Right" controls drive `CellTextAlignment`, so showing a second
-     * Alignment row inside the font editor is confusing).
+     * that own horizontal alignment elsewhere (e.g. Badge row layout).
      */
     hideAlignment?: boolean;
 }