@adaptabletools/adaptable 23.0.4-canary.0 → 23.0.5-canary.0

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

@@ -6,15 +6,6 @@ import { Toggle, ToggleGroup } from '../../../components/Toggle';
 import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
 const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
 const CHILD_COLUMN = { name: 'children' };
-/**
- * Compact editor for the cut-down {@link BadgePillStyle}.
- *
- * Intentionally narrower than `StyleComponent`:
- * - **No** `BorderRadius` — corner radius is owned by `Shape`.
- * - **No** `Alignment` — badge-row alignment is column-level (`BadgeStyle.Font`).
- * - **No** `ClassName` — pill `ClassName` had no effect at runtime; gone.
- * - **No** `FontSize` — pills inherit cell font sizing.
- */
 export const BadgePillStyleEditor = (props) => {
     const pill = props.value ?? {};
     const { disabled } = props;
@@ -40,7 +31,6 @@ export const BadgePillStyleEditor = (props) => {
     }
     return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: form }) }));
 };
-/** Descriptive pill properties for summary panels (`Label: value` strings). */
 export const getBadgePillStyleSummaryItems = (pill) => {
     if (!pill) {
         return [];
@@ -66,7 +56,6 @@ export const getBadgePillStyleSummaryItems = (pill) => {
     }
     return items;
 };
-/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
 export const renderBadgePillStyleSummaryTags = (pill) => {
     const items = getBadgePillStyleSummaryItems(pill);
     if (!items.length) {

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

@@ -16,14 +16,6 @@ const FONT_SIZE_ITEMS = [
     { value: 'Large', label: 'Large' },
     { value: 'XLarge', label: 'XLarge' },
 ];
-/**
- * Compact editor for the `Font` slice (`CellFontStyle`).
- *
- * Used by Styled Column wizards (Gradient, Percent Bar, Bullet Chart) that
- * own a `Font?` slot. Any change emits a new `CellFontStyle` (or
- * `undefined` once every key is unset) which the host wizard merges back
- * into its `*Style` patch.
- */
 const disabledClassName = (disabled) => disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
 export const StyledColumnFontStyleEditor = (props) => {
     const font = props.value ?? {};
@@ -31,7 +23,6 @@ export const StyledColumnFontStyleEditor = (props) => {
     const disabledClass = disabledClassName(disabled);
     const update = (patch) => {
         const next = { ...font, ...patch };
-        // strip empty/undefined keys
         Object.keys(next).forEach((k) => {
             const v = next[k];
             if (v === undefined || v === null || v === '') {
@@ -55,13 +46,6 @@ export const StyledColumnFontStyleEditor = (props) => {
                                             FontSize: (value || undefined),
                                         }) }) })] }) }) }), !hideAlignment && (_jsx(FormRow, { label: "Alignment:", children: _jsx(Box, { className: disabledClass, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
 };
-/**
- * Compact editor for the `Cell` slice (`CellBoxStyle`).
- *
- * Used by Styled Column wizards (Rating, Sparkline) that own a `Cell?`
- * slot. Any change emits a new `CellBoxStyle` (or `undefined` once every
- * key is unset) which the host wizard merges back into its `*Style` patch.
- */
 export const StyledColumnCellStyleEditor = (props) => {
     const cell = props.value ?? {};
     const cellRef = React.useRef(cell);
@@ -84,9 +68,6 @@ export const StyledColumnCellStyleEditor = (props) => {
     };
     return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Border colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
 };
-/**
- * Descriptive font properties for summary panels (`Label: value` strings).
- */
 export const getCellFontStyleSummaryItems = (font) => {
     if (!font) {
         return [];
@@ -112,9 +93,6 @@ export const getCellFontStyleSummaryItems = (font) => {
     }
     return items;
 };
-/**
- * Compact summary tags for the Font slice; used by wizard summary panels.
- */
 export const renderFontStyleSummaryTags = (font) => {
     const items = getCellFontStyleSummaryItems(font);
     if (!items.length) {
@@ -122,9 +100,6 @@ export const renderFontStyleSummaryTags = (font) => {
     }
     return renderSummaryLabelValueTags(items);
 };
-/**
- * Descriptive cell box properties for summary panels (`Label: value` strings).
- */
 export const getCellBoxStyleSummaryItems = (cell) => {
     if (!cell) {
         return [];
@@ -141,9 +116,6 @@ export const getCellBoxStyleSummaryItems = (cell) => {
     }
     return items;
 };
-/**
- * Compact summary tags for the Cell slice; used by wizard summary panels.
- */
 export const renderCellStyleSummaryTags = (cell) => {
     const items = getCellBoxStyleSummaryItems(cell);
     if (!items.length) {

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

@@ -13,7 +13,6 @@ import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './Sty
 import { Card } from '../../../components/Card';
 import ErrorBox from '../../../components/ErrorBox';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
-/** Sentinel for the theme dropdown — persisted options omit `theme` when this is chosen. */
 const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
 const SparklineTypes = {
     LINE: 'line',
@@ -84,9 +83,6 @@ export const getStyledColumnSparklineStyleViewValues = (data) => {
         includeEmptyFeatures: false,
     });
 };
-/**
- * Wizard-step summary for the Sparkline Settings step.
- */
 export const renderSparklineSummary = (data) => {
     const sparkline = data.SparklineStyle;
     if (!sparkline?.options) {
@@ -97,11 +93,6 @@ export const renderSparklineSummary = (data) => {
     });
     return renderSummaryStringTags(items);
 };
-/**
- * Validation for the Sparkline Settings wizard step.
- * - Sparkline type must be set (defaulted to `line` so this is mostly a safety net).
- * - When Min and Max overrides are both provided, Min must be strictly less than Max.
- */
 export const isValidSparklineSettings = (data) => {
     const opts = data.SparklineStyle?.options;
     if (!opts?.type) {
@@ -114,8 +105,6 @@ export const isValidSparklineSettings = (data) => {
 };
 export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    // Compute defaults non-destructively — never mutate persisted state during
-    // render. The chart `type` is required so default it to `line` if absent.
     const persistedOptions = data.SparklineStyle?.options;
     const sparklineOptions = persistedOptions
         ? { ...persistedOptions, type: persistedOptions.type ?? SparklineTypes.LINE }
@@ -252,8 +241,6 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
     const { api } = useOnePageAdaptableWizardContext();
-    // Non-destructive default for the axis sub-tree so we never mutate the
-    // persisted options object during render.
     const sparklineOptions = {
         ...(options ?? {}),
         axis: {

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

@@ -25,11 +25,6 @@ import { StyledColumnIconPreview } from './StyledColumnWizardStyleSection/Compon
 import { StyledColumnBulletPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
 import { StyledColumnRangeBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
 import { StyledColumnSparklinePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
-/**
- * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
- * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
- * wizard immediately see a sensible Name (e.g. `Badge-tradeId`).
- */
 const computeDefaultStyledColumnName = (sc) => {
     let typeKey = '';
     if (sc.GradientStyle)
@@ -53,7 +48,6 @@ const computeDefaultStyledColumnName = (sc) => {
     }
     return `${typeKey}-${sc.ColumnId || 'column'}`;
 };
-/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
 export const getStyledColumnEditDefaultSectionName = (styledColumn) => {
     if (styledColumn.BadgeStyle) {
         return 'Badges';
@@ -84,10 +78,6 @@ export const StyledColumnWizard = (props) => {
     const [styledColumn, setStyledColumn] = useState(() => {
         if (data) {
             const cloned = cloneObject(data);
-            // For *Edit* (existing object loaded from state) we fall back to the
-            // migration default if the Name is somehow missing. For *New* we leave
-            // the Name blank so the user enters one themselves — same pattern as
-            // Format Column / Alert / Custom Sort etc.
             const isNew = props.popupParams?.action === 'New';
             if (!isNew && !cloned.Name) {
                 cloned.Name = computeDefaultStyledColumnName(cloned);
@@ -95,16 +85,11 @@ export const StyledColumnWizard = (props) => {
             return cloned;
         }
         const newData = ObjectFactory.CreateEmptyStyledColumn();
-        // Default new Styled Columns to a Badge — applicable to every data type
-        // and the most-used styled column overall, so it makes a sensible
-        // initial pick in the Type wizard step.
         newData.BadgeStyle = {
             Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
         };
         if (props.popupParams?.column && props.popupParams?.action === 'New') {
             newData.ColumnId = props.popupParams.column.columnId;
-            // For numeric-array columns the natural pick is a Sparkline; flip the
-            // default rather than open a Badge over an array column.
             if (props.popupParams.column.dataType.includes('Array')) {
                 newData.SparklineStyle = {};
                 delete newData.BadgeStyle;
@@ -265,10 +250,6 @@ export const StyledColumnWizard = (props) => {
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
-    // Persistent live preview shown at the top of the section content on
-    // every step. We render the bare preview (no Card chrome) so it sits
-    // flush above the form. Only one of these can apply at a time — the
-    // styled column owns exactly one of these style buckets.
     let headerPreview = null;
     if (styledColumn.GradientStyle) {
         headerPreview = _jsx(StyledColumnGradientPreview, { data: styledColumn });
@@ -294,12 +275,7 @@ export const StyledColumnWizard = (props) => {
     else if (styledColumn.SparklineStyle) {
         headerPreview = _jsx(StyledColumnSparklinePreview, { data: styledColumn });
     }
-    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, 
-        // Display the picked type in the header (e.g. "Gradient Column",
-        // "Percent Bar Column") so the user always knows which kind of
-        // column they're configuring. Falls back to "Styled Column"
-        // before a type has been selected.
-        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {

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

@@ -127,7 +127,6 @@ export const getStyledColumnBulletStyleViewValues = (data) => {
         includeEmptyTooltip: false,
     });
 };
-/** Wizard / list-view summary for the Ranges step (qualitative bands). */
 export const renderStyledColumnBulletRangesSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -137,7 +136,6 @@ export const renderStyledColumnBulletRangesSummary = (data) => {
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
 export const StyledColumnBulletRangesView = ({ data }) => renderStyledColumnBulletRangesSummary(data);
-/** Wizard / list-view summary for the Style step (target, bar, text, font). */
 export const renderStyledColumnBulletStyleSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -152,7 +150,6 @@ export const renderStyledColumnBulletStyleSummary = (data) => {
     }
     return renderSummaryStringTags(items);
 };
-/** Full combined summary (ranges + style); kept for callers that expect one block. */
 export const renderStyledColumnBulletSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
@@ -160,12 +157,6 @@ export const renderStyledColumnBulletSummary = (data) => {
     }
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnBulletRangesSummary(data), renderStyledColumnBulletStyleSummary(data)] }));
 };
-/**
- * Maps the structured `BulletChartStyle.Target` field to one of the simple
- * modes the wizard exposes. The wizard only configures *one* primary target;
- * if a state-defined Bullet Chart used the array form or a per-target marker
- * override, we leave it alone but treat the first entry as the editable one.
- */
 const getSimpleTargetMode = (target) => {
     if (target == undefined) {
         return 'None';
@@ -217,9 +208,6 @@ export const StyledColumnWizardBulletSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] };
     const bullet = data.BulletChartStyle ?? {};
     const disabled = !data.ColumnId || !column;
-    // -------------------------------------------------------------------------
-    // Updaters
-    // -------------------------------------------------------------------------
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -233,10 +221,6 @@ export const StyledColumnWizardBulletSection = (props) => {
         update({ CellRanges: ranges });
     };
     const onUpdateColumnComparison = (columnComparison) => {
-        // Bullet Chart can technically still accept a ColumnComparison through
-        // state, but the Bullet wizard hides the toggle. This callback is wired
-        // up only to satisfy the RangesComponent prop contract; in practice it
-        // will never be invoked because hideColumnComparison is true.
         update({ ColumnComparison: columnComparison });
     };
     const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
@@ -258,14 +242,12 @@ export const StyledColumnWizardBulletSection = (props) => {
             },
         });
     }, [data, bullet]);
-    // -- Target ----------------------------------------------------------------
     const currentMode = getSimpleTargetMode(bullet.TargetProperties?.Target);
     const updateTargetProperties = (patch) => {
         const merged = {
             ...bullet.TargetProperties,
             ...patch,
         };
-        // Strip the wrapper when nothing meaningful is left.
         const isEmpty = merged.Target == undefined && merged.Marker == undefined;
         update({ TargetProperties: isEmpty ? undefined : merged });
     };
@@ -284,7 +266,6 @@ export const StyledColumnWizardBulletSection = (props) => {
             return;
         }
         if (mode === 'Column') {
-            // Use the first available numeric column (excluding the styled column itself)
             const candidate = api.columnApi.getNumericColumns().find((c) => c.columnId !== data.ColumnId);
             setTarget(candidate?.columnId ?? '');
             return;
@@ -296,7 +277,6 @@ export const StyledColumnWizardBulletSection = (props) => {
     const handleColumnTargetChange = (columnId) => {
         setTarget(columnId);
     };
-    // -- Bar -------------------------------------------------------------------
     const updateBar = (patch) => {
         const merged = {
             ...bullet.Bar,
@@ -305,7 +285,6 @@ export const StyledColumnWizardBulletSection = (props) => {
         const isEmpty = merged.Color == undefined && merged.Height == undefined;
         update({ Bar: isEmpty ? undefined : merged });
     };
-    // -- Marker ----------------------------------------------------------------
     const updateMarker = (patch) => {
         updateTargetProperties({
             Marker: {
@@ -315,7 +294,6 @@ export const StyledColumnWizardBulletSection = (props) => {
             },
         });
     };
-    // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
         update(toggleBarStyleCellTextToken(bullet.CellTextProperties, token, show));
     };
@@ -331,15 +309,11 @@ export const StyledColumnWizardBulletSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
     if (!data.ColumnId || !column) {
         return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
                     ? 'You need to select a column before styling.'
                     : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
-    // ----- Ranges-only variant (wizard step before Style) ---------------------
     if (variant === 'ranges') {
         return (_jsx(Box, { children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define qualitative bands for the bullet scale" })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: bullet.CellRanges, rangeValueType: bullet.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: bullet.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] }) }));
     }

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

@@ -42,9 +42,6 @@ export const getStyledColumnGradientStyleViewValues = (data) => {
     }
     return buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: false });
 };
-/**
- * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
- */
 export const renderStyledColumnGradientStyleSummary = (data) => {
     const gs = data.GradientStyle;
     if (!gs) {

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

@@ -39,9 +39,6 @@ const previewIcon = (spec) => {
     }
     return _jsx(AdaptableIconComponent, { icon: spec });
 };
-// ---------------------------------------------------------------------------
-// Summary helpers (used by the wizard step header + Styled Columns list)
-// ---------------------------------------------------------------------------
 const ICON_MAPPINGS_PREVIEW_CHIP_LIMIT = 6;
 const previewMapping = (mapping, index) => {
     return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:px-1.5 twa:py-0.5 twa:rounded twa:bg-[var(--ab-color-primary)] twa:text-[var(--ab-color-primarytext)]", children: [_jsx(Box, { children: previewIcon(mapping.Icon) }), _jsx(Box, { className: "twa:text-xs twa:opacity-90", children: String(mapping.Key) })] }, `${String(mapping.Key)}-${index}`));
@@ -123,7 +120,6 @@ export const getStyledColumnIconStyleViewValues = (data) => {
         includeEmptyTooltip: false,
     });
 };
-/** Mappings step summary. */
 export const renderStyledColumnIconMappingsSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -134,7 +130,6 @@ export const renderStyledColumnIconMappingsSummary = (data) => {
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), renderMappingsPreview(previewMappings)] }));
 };
 export const StyledColumnIconMappingsView = ({ data }) => renderStyledColumnIconMappingsSummary(data);
-/** Style step summary (size, text, tooltip, font / cell). */
 export const renderStyledColumnIconStyleSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -149,9 +144,6 @@ export const renderStyledColumnIconStyleSummary = (data) => {
     }
     return renderSummaryStringTags(items);
 };
-/**
- * Combined summary for the Styled Columns list row (preview + key facts).
- */
 export const renderStyledColumnIconSummary = (data) => {
     const ic = data.IconStyle;
     if (!ic) {
@@ -159,9 +151,6 @@ export const renderStyledColumnIconSummary = (data) => {
     }
     return renderStyledColumnIconMappingsSummary(data);
 };
-// ---------------------------------------------------------------------------
-// Wizard validity check
-// ---------------------------------------------------------------------------
 export const isValidIconStyleMappings = (data) => {
     const ic = data.IconStyle;
     if (!ic)
@@ -206,18 +195,9 @@ export const StyledColumnWizardIconSection = (props) => {
             props.onChange({ ...data, IconStyle: rest });
         }
     };
-    // -----------------------------------------------------------------------
-    // Preset operations
-    // -----------------------------------------------------------------------
     const applyPreset = (preset) => {
-        // Presets are now resolved at *runtime* — we only need to record the
-        // selection here. Custom `Mappings` continue to act as overrides /
-        // additions on top of the preset.
         update({
             Preset: preset,
-            // Flags / Status presets pair best with case-insensitive matching
-            // because they include both code (`'GBP'`) and name (`'United Kingdom'`)
-            // synonyms; user can flip back to Exact in the wizard if needed.
             MatchMode: preset === 'Flags' || preset === 'Status'
                 ? 'CaseInsensitive'
                 : iconStyle.MatchMode ?? 'Exact',
@@ -226,9 +206,6 @@ export const StyledColumnWizardIconSection = (props) => {
     const clearPreset = () => {
         update({ Preset: undefined });
     };
-    // -----------------------------------------------------------------------
-    // Mapping list operations
-    // -----------------------------------------------------------------------
     const setMappings = (next) => {
         update({ Mappings: next });
     };
@@ -251,16 +228,11 @@ export const StyledColumnWizardIconSection = (props) => {
         setMappings(next);
         setAutoOpenPickerIndex(next.length - 1);
     };
-    // -----------------------------------------------------------------------
-    // CellText helpers
-    // -----------------------------------------------------------------------
     const updateCellTextProperties = (patch) => {
         const merged = {
             ...iconStyle.CellTextProperties,
             ...patch,
         };
-        // Strip the wrapper when both inner properties are unset, so empty state
-        // serialises cleanly.
         const isEmpty = !merged.CellText?.length && merged.CellTextPosition == undefined;
         update({ CellTextProperties: isEmpty ? undefined : merged });
     };
@@ -271,16 +243,11 @@ export const StyledColumnWizardIconSection = (props) => {
             : current.filter((t) => t !== token);
         updateCellTextProperties({ CellText: next });
     };
-    // -----------------------------------------------------------------------
-    // Fallback helpers
-    // -----------------------------------------------------------------------
     const updateFallbackProperties = (patch) => {
         const merged = {
             ...iconStyle.FallbackProperties,
             ...patch,
         };
-        // Strip the wrapper when there's nothing to remember; the renderer
-        // already defaults to `Mode: 'Hide'` when `FallbackProperties` is unset.
         const isEmpty = (merged.Mode == undefined || merged.Mode === 'Hide') && merged.Icon == undefined;
         update({ FallbackProperties: isEmpty ? undefined : merged });
     };
@@ -291,9 +258,6 @@ export const StyledColumnWizardIconSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -----------------------------------------------------------------------
-    // Render
-    // -----------------------------------------------------------------------
     if (props.variant === 'mappings') {
         const presetMappingsPreview = iconStyle.Preset
             ? getIconStylePresetMappings(iconStyle.Preset)
@@ -317,7 +281,6 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'Icon', label: 'Show Fallback Icon' },
                                                 ] }) }) }), iconStyle.FallbackProperties?.Mode === 'Icon' && (_jsx(FormRow, { label: "Fallback Icon:", children: _jsx(IconPickerButton, { value: iconStyle.FallbackProperties?.Icon, onChange: (next) => updateFallbackProperties({ Icon: next }) }) }))] }) })] })] }));
     }
-    // ----- Style variant (wizard step title: "Style") ------------------------
     const cellText = iconStyle.CellTextProperties?.CellText ?? [];
     const toolTipText = iconStyle.ToolTipText ?? [];
     const cellTextDisabled = cellText.length === 0;
@@ -340,9 +303,6 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'Below', label: 'Below' },
                                                 ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
-// ---------------------------------------------------------------------------
-// Icon picker — click-to-open popover (closes on outside click or system pick)
-// ---------------------------------------------------------------------------
 const ICON_KIND_OPTIONS = [
     { value: 'Emoji', label: 'Emoji' },
     { value: 'System', label: 'Built-in' },

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

@@ -47,20 +47,6 @@ const summarizeBound = (bound) => {
     }
     return bound;
 };
-/**
- * A single joined bound control: a type selector (Fixed Number / Column /
- * Column Min / Max / Average / Median, plus `None` for the optional Reference)
- * joined inline with a contextual editor. Mirrors the Column Comparison bound
- * input so the two read as one block: the select hard-codes `rounded-input`, so
- * the touching corners are flattened directly (important, to beat it) and the
- * shared border overlapped via `-ml-px`.
- *
- *  - Fixed Number  → editable number input
- *  - Column        → numeric column selector (excluding the styled column)
- *  - Col-* (aggregate) → disabled input showing the resolved value (when a
- *    column is in scope), so the user sees the underlying number
- *  - None          → no editor (selector only)
- */
 const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColumnId, resolved, disabled, onChange }) => {
     const mode = getBoundMode(value);
     const handleModeChange = (next) => {
@@ -76,7 +62,6 @@ const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColum
                 .find((c) => c.columnId !== excludeColumnId);
             return onChange(candidate?.columnId ?? '');
         }
-        // Col-Min / Col-Max / Col-Avg / Col-Median
         return onChange(next);
     };
     const items = [
@@ -201,7 +186,6 @@ export const getStyledColumnRangeBarDisplayViewValues = (data) => {
         includeEmptyTooltip: false,
     });
 };
-/** Summary line for the Range wizard step (bounds + bands only). */
 export const renderStyledColumnRangeBarRangeStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -211,7 +195,6 @@ export const renderStyledColumnRangeBarRangeStepSummary = (data) => {
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
 };
 export const StyledColumnRangeBarRangeView = ({ data }) => renderStyledColumnRangeBarRangeStepSummary(data);
-/** Summary for the Display wizard step (markers, track, text). */
 export const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -226,9 +209,6 @@ export const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     }
     return renderSummaryStringTags(items);
 };
-/**
- * Combined summary for the Styled Columns list row (preview + key facts).
- */
 export const renderStyledColumnRangeBarSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
@@ -236,15 +216,6 @@ export const renderStyledColumnRangeBarSummary = (data) => {
     }
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnRangeBarRangeStepSummary(data), renderStyledColumnRangeBarDisplayStepSummary(data)] }));
 };
-// ---------------------------------------------------------------------------
-// Wizard validity check (also used by the wizard step config)
-// ---------------------------------------------------------------------------
-/**
- * Returns `true` if the Range Bar's bounds are well-formed, otherwise an
- * error string explaining what's missing. Used as the wizard step's
- * `isValid` callback.
- */
-/** Bounds + bands step — Min / Max required and numeric pair must span. */
 export const isValidRangeBarBounds = (data) => {
     const range = data.RangeBarStyle;
     if (!range)
@@ -260,9 +231,6 @@ export const isValidRangeBarBounds = (data) => {
     }
     return true;
 };
-// ---------------------------------------------------------------------------
-// Section
-// ---------------------------------------------------------------------------
 const MARKER_SHAPES = [
     { value: 'Diamond', label: 'Diamond' },
     { value: 'Line', label: 'Line' },
@@ -290,9 +258,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] };
     const range = data.RangeBarStyle ?? {};
     const disabled = !data.ColumnId || !column;
-    // -------------------------------------------------------------------------
-    // Updaters
-    // -------------------------------------------------------------------------
     const update = (patch) => {
         props.onChange({
             ...data,
@@ -305,9 +270,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const onUpdateRanges = (ranges) => {
         update({ CellRanges: ranges });
     };
-    // The Range Bar wizard hides the column-comparison toggle (bounds *are*
-    // the per-row range here). Stub kept to satisfy the RangesComponent prop
-    // contract.
     const onUpdateColumnComparison = (columnComparison) => {
         update({ ColumnComparison: columnComparison });
     };
@@ -346,8 +308,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             ...range.OutOfRange,
             ...patch,
         };
-        // Default mode is `Clamp` with no override colour; drop the wrapper in
-        // that case so empty state serialises cleanly.
         const isEmpty = (merged.Mode == undefined || merged.Mode === 'Clamp') && merged.Color == undefined;
         update({ OutOfRange: isEmpty ? undefined : merged });
     };
@@ -359,9 +319,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         };
         update({ Reference: merged });
     };
-    // -- Bound editors ---------------------------------------------------------
-    // Resolved values for the column-wide aggregate bound modes, shown read-only
-    // in the bound editor so the user sees the underlying number.
     const resolvedBoundValues = {
         'Col-Min': minMaxRangeValues?.min,
         'Col-Max': minMaxRangeValues?.max,
@@ -372,11 +329,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
             : undefined,
     };
-    /**
-     * Renders one of `Min` / `Max` / `Reference` as a single joined row (type
-     * selector + contextual editor). Centralised so the three controls stay
-     * visually and behaviourally identical (only the field name differs).
-     */
     const renderBoundEditor = (opts) => {
         const setBound = (next) => {
             if (opts.field === 'Reference') {
@@ -400,7 +352,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         const value = opts.field === 'Reference' ? range.Reference?.Value : range[opts.field];
         return (_jsx(FormRow, { label: `${opts.label}:`, children: _jsx(RangeBarBoundInput, { api: api, value: value, optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
     };
-    // -- Marker editors --------------------------------------------------------
     const updateValueMarker = (patch) => {
         update({
             Marker: {
@@ -419,8 +370,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             },
         });
     };
-    // Defaults applied locally for displaying current values in the editor —
-    // the renderer applies its own defaults if these stay undefined in state.
     const valueMarker = {
         Shape: range.Marker?.Shape ?? 'Diamond',
         Color: range.Marker?.Color ?? '',
@@ -432,7 +381,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         Color: referenceMarkerCfg?.Color ?? '',
         Size: referenceMarkerCfg?.Size ?? (referenceMarkerCfg?.Shape === 'Line' ? 2 : 8),
     };
-    // -- Cell text -------------------------------------------------------------
     const toggleCellText = (token, show) => {
         update(toggleBarStyleCellTextToken(range.CellTextProperties, token, show));
     };
@@ -448,9 +396,6 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    // -------------------------------------------------------------------------
-    // Render
-    // -------------------------------------------------------------------------
     if (!data.ColumnId || !column) {
         return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
                     ? 'You need to select a column before styling.'