@adaptabletools/adaptable 24.0.0-canary.0 → 24.0.0-canary.10

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

@@ -4,10 +4,10 @@ import { CheckBox } from '../../../components/CheckBox';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
-import { ColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getGraySwatchColor } from '../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -230,7 +230,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                 {
                     Min: 0,
                     Max: 100,
-                    Color: getGraySwatchColor(),
+                    Color: getDefaultRangeColor(),
                 },
             ];
         props.onChange({
@@ -346,10 +346,10 @@ export const StyledColumnWizardBulletSection = (props) => {
                                                 { value: 'Column', label: 'Column' },
                                                 { value: 'Col-Avg', label: 'Column Average' },
                                                 { value: 'Col-Median', label: 'Column Median' },
-                                            ] }) }) }), currentMode === 'Number' && (_jsx(FormRow, { label: "Target Value:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { type: "number", value: numericTargetValue ?? '', onChange: (e) => handleNumericTargetChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }) })), currentMode === 'Column' && (_jsx(FormRow, { label: "Target Column:", children: _jsx(Box, { className: "twa:max-w-[220px]", children: _jsx(ColumnSelector, { type: "number", value: columnTargetValue ?? '', onChange: handleColumnTargetChange, filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) })), currentMode !== 'None' && (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Marker Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: marker.Shape, onValueChange: (s) => updateMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: "Marker Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: marker.Color || undefined, onChange: (c) => updateMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Marker Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: marker.Size, onChange: (e) => updateMarker({ Size: Number(e.target.value) }) }) }) })] }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the bar orientation and height" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: bullet.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
+                                            ] }) }) }), currentMode === 'Number' && (_jsx(FormRow, { label: "Target Value:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { type: "number", value: numericTargetValue ?? '', onChange: (e) => handleNumericTargetChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }) })), currentMode === 'Column' && (_jsx(FormRow, { label: "Target Column:", children: _jsx(Box, { className: "twa:max-w-[220px]", children: _jsx(ColumnSelector, { type: "number", value: columnTargetValue ?? '', onChange: handleColumnTargetChange, filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) })), currentMode !== 'None' && (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Marker Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: marker.Shape, onValueChange: (s) => updateMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: "Marker Colour:", children: _jsx(ColorField, { clearable: false, disabled: disabled, value: marker.Color || undefined, onChange: (c) => updateMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Marker Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: marker.Size, onChange: (e) => updateMarker({ Size: Number(e.target.value) }) }) }) })] }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the bar orientation and height" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: bullet.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                 { value: 'Horizontal', label: 'Horizontal' },
                                                 { value: 'Vertical', label: 'Vertical' },
-                                            ] }) }) }), bullet.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
+                                            ] }) }) }), bullet.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorField, { clearable: false, disabled: disabled, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
                                                 Height: e.target.value === '' ? undefined : Number(e.target.value),
                                             }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : bullet.Origin ?? 'Auto', onValueChange: (v) => {
                                                 if (v === 'Auto' || v === 'Zero') {
@@ -361,7 +361,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), _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: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }

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

@@ -51,7 +51,7 @@ export const renderStyledColumnGradientStyleSummary = (data) => {
     return renderSummaryStringTags(items);
 };
 export const StyledColumnWizardGradientSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
     const gs = data.GradientStyle ?? {};
     const disabled = !data.ColumnId;
     const onFontChange = (next) => {
@@ -106,5 +106,5 @@ export const StyledColumnWizardGradientSection = (props) => {
                                 else {
                                     patchGradient({ AutoContrastText: true });
                                 }
-                            }, children: "Make text readable on tinted backgrounds" }) })] }), _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-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
+                            }, children: "Make text readable on tinted backgrounds" }) })] }), _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-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
 };

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

@@ -161,7 +161,7 @@ export const isValidIconStyleMappings = (data) => {
     return true;
 };
 export const StyledColumnWizardIconSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
     const iconStyle = data.IconStyle ?? {};
     const mappings = iconStyle.Mappings ?? [];
     const disabled = !data.ColumnId;
@@ -299,7 +299,7 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { 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 }) })] })] }));
+                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { 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, { disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 const ICON_KIND_OPTIONS = [
     { value: 'Emoji', label: 'Emoji' },

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

@@ -5,10 +5,10 @@ import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
 import { InputGroup } from '../../../components/InputGroup';
-import { ColorPicker, OptionalColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getGraySwatchColor } from '../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor, themeColorVar } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -276,7 +276,7 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
         const ranges = rangeValueType === 'Number'
             ? api.columnScopeApi.createCellColorRangesForScope(scope)
-            : [{ Min: 0, Max: 100, Color: getGraySwatchColor() }];
+            : [{ Min: 0, Max: 100, Color: getDefaultRangeColor() }];
         props.onChange({
             ...data,
             RangeBarStyle: {
@@ -419,18 +419,18 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                             field: 'Reference',
                                             optional: true,
                                             fallbackNumber: minMaxRangeValues?.max ?? 0,
-                                        })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", _jsx("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges ?? [], rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Reference Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
+                                        })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", _jsx("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges ?? [], rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { clearable: false, disabled: disabled, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Reference Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
                                             ? 'Drawn at the Reference value (e.g. previous close, target, midpoint).'
-                                            : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
+                                            : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { clearable: false, disabled: disabled, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
                                                         { value: 'Vertical', label: 'Vertical' },
-                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getGraySwatchColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
+                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: range.Track?.Color, defaultColor: getDefaultRangeColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
                                                         Height: e.target.value === '' ? undefined : Number(e.target.value),
-                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
+                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: range.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
                                                         Mode: v,
                                                     }), items: [
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: range.OutOfRange?.Color, defaultColor: themeColorVar('destructive'), onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
 };

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

@@ -3,7 +3,7 @@ import { CheckBox } from '../../../components/CheckBox';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
-import { ColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/Select';
@@ -112,7 +112,7 @@ export const isValidRatingStyle = (data) => {
     return true;
 };
 export const StyledColumnWizardRatingSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
     const rating = data.RatingStyle ?? {};
     const disabled = !data.ColumnId;
     if (!data.ColumnId) {
@@ -141,7 +141,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Max: Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : undefined,
                                                     });
-                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), _jsx(FormRow, { label: "Icon:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), _jsx(FormRow, { label: "Filled Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), _jsx(FormRow, { label: "Empty Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), _jsx(FormRow, { label: "Icon Size (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), _jsx(FormRow, { label: "Icon:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), _jsx(FormRow, { label: "Filled Colour:", children: _jsx(ColorField, { clearable: false, disabled: disabled, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), _jsx(FormRow, { label: "Empty Colour:", children: _jsx(ColorField, { clearable: false, disabled: disabled, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), _jsx(FormRow, { label: "Icon Size (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Size: undefined });
@@ -161,7 +161,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Gap: Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined,
                                                     });
-                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), _jsx(FormRow, { label: "Allow Half Icons:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Text" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Show Value:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), _jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", 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-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), _jsx(FormRow, { label: "Allow Half Icons:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Text" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Show Value:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), _jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", 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-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { disabled: disabled, value: rating.Cell, onChange: (next) => {
                                 if (next) {
                                     update({ Cell: next });
                                 }

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import ErrorBox from '../../../../components/ErrorBox';
 import { Tag } from '../../../../components/Tag';
 import { RangesComponent } from '../../RangesComponent';
-import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../../components/Flex';
 import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';
@@ -108,7 +108,7 @@ export const StyledColumnWizardRangesSection = (props) => {
                 {
                     Min: 0,
                     Max: 100,
-                    Color: getGraySwatchColor(),
+                    Color: getDefaultRangeColor(),
                 },
             ];
         let newStyledColumn = data;

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

@@ -5,8 +5,8 @@ import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tag } from '../../../../components/Tag';
 import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
-import { OptionalColorPicker } from '../../../../components/ColorPicker';
-import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
+import { ColorField } from '../../../../components/ColorField';
+import { getDefaultRangeColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../../components/Flex';
 import Radio, { RadioGroup } from '../../../../components/Radio';
@@ -136,7 +136,7 @@ export const StyledColumnWizardStyleSection = (props) => {
     const currentOrigin = typeof pb.Origin === 'number'
         ? 'Min'
         : pb.Origin ?? 'Auto';
-    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), _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: cellTextDisabled, value: pb.Font, onChange: (next) => {
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -145,5 +145,5 @@ export const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: pb.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: onBackColorChange }) })] }) })] })] }));
 };

package/src/View/Wizard/CollapsibleWizardCard.d.ts

@@ -19,7 +19,9 @@ export interface CollapsibleWizardCardProps {
     headerVisual?: React.ReactNode;
     /** Trailing header controls (all states) — e.g. delete. Clicks do not toggle expand. */
     headerActions?: React.ReactNode;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    /** When false, the card is a static header + summary (no expand chevron). Default: true. */
+    collapsible?: boolean;
     defaultExpanded?: boolean;
     expanded?: boolean;
     /** When true, only the header row is shown (another card in the accordion is expanded). */

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -21,28 +21,36 @@ export function renderCompactAccentTags(ids, getLabel, options) {
     return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((id) => (_jsx(AccentTag, { className: "twa:shrink-0", children: getLabel(id) }, id))), remainder > 0 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
 }
 export const CollapsibleWizardCard = (props) => {
-    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
+    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, collapsible = true, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
     const [expanded, setExpanded] = useProperty(props, 'expanded', defaultExpanded, {
         onChange: props.onExpandedChange,
     });
-    const showSummary = !expanded && !compact;
+    const canToggle = collapsible;
+    const isExpanded = canToggle && expanded;
+    const isCompact = canToggle && compact;
+    const showSummary = !isExpanded && !isCompact;
     const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
-    const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
-    const isInteractiveCompactSummary = compact && compactSummaryInteractive;
-    const toggleExpanded = () => setExpanded(!expanded);
+    const headerInline = isExpanded ? help : isCompact ? compactSummary : collapsedHeaderInline;
+    const isInteractiveCompactSummary = isCompact && compactSummaryInteractive;
+    const toggleExpanded = () => {
+        if (!canToggle) {
+            return;
+        }
+        setExpanded(!expanded);
+    };
     const handleTitleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             toggleExpanded();
         }
     };
-    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', isExpanded
             ? getCollapsibleWizardCardExpandedClasses(surface)
-            : getCollapsibleWizardCardCollapsedClasses(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
+            : getCollapsibleWizardCardCollapsedClasses(surface), isCompact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
             ? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
-            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !compact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [_jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [_jsx(IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
+            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !isCompact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:rounded-standard', canToggle && 'twa:cursor-pointer twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !isCompact && !isExpanded }, canToggle && targetOwn.focusOutline, canToggle && 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: canToggle ? toggleExpanded : undefined, onKeyDown: canToggle ? handleTitleKeyDown : undefined, tabIndex: canToggle ? 0 : undefined, "aria-expanded": canToggle ? isExpanded : undefined, role: canToggle ? 'button' : undefined, children: [_jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:select-none', canToggle && 'twa:cursor-pointer'), children: [canToggle ? (_jsx(IconComponent, { icon: { name: isExpanded ? 'collapse' : 'expand' } })) : null, _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
                                 ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
-                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', isCompact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), isExpanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
 };
 export function useWizardCardAccordion(initialExpandedId, options) {
     const fillExpandedCard = options?.fillExpandedCard ?? false;

package/src/agGrid/Adaptable.d.ts

@@ -1,7 +1,6 @@
 import { AgGridConfig } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { AdaptableApi } from '../Api/AdaptableApi';
-import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
 export declare class Adaptable {
     /**
      * Initializer for Adaptable
@@ -12,14 +11,3 @@ export declare class Adaptable {
      */
     static init(adaptableOptions: AdaptableOptions, agGridConfig: AgGridConfig): Promise<AdaptableApi>;
 }
-export declare class AdaptableNoCodeWizard implements IAdaptableNoCodeWizard {
-    private init;
-    private adaptableOptions;
-    private extraOptions;
-    private agGridModules;
-    /**
-     * @param adaptableOptions
-     */
-    constructor(adaptableOptions: AdaptableOptions, extraOptions?: AdaptableNoCodeWizardOptions, agGridOptions?: AgGridConfig);
-    render(container?: HTMLElement | null): void;
-}

package/src/agGrid/Adaptable.js

@@ -1,11 +1,6 @@
-import * as React from 'react';
 import { AgGridModulesDocsLink } from '../Utilities/Constants/DocumentationLinkConstants';
 import { AdaptableLogger } from './AdaptableLogger';
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { getDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
-import { renderReactRoot as defaultRenderReactRoot } from '../renderReactRoot';
-import AdaptableWizardView from '../View/AdaptableWizardView';
-import { resolveContainerElement } from '../Utilities/resolveContainerElement';
 export class Adaptable {
     static init(adaptableOptions, agGridConfig) {
         if (!agGridConfig?.modules?.length) {
@@ -14,50 +9,3 @@ export class Adaptable {
         return AdaptableAgGrid._initInternal({ ...agGridConfig, adaptableOptions, variant: 'vanilla' });
     }
 }
-export class AdaptableNoCodeWizard {
-    init;
-    adaptableOptions;
-    extraOptions;
-    agGridModules;
-    constructor(adaptableOptions, extraOptions = {}, agGridOptions) {
-        const defaultInit = async ({ gridOptions, adaptableOptions, agGridModules, }) => {
-            return await Adaptable.init(adaptableOptions, { gridOptions, modules: agGridModules });
-        };
-        this.adaptableOptions = adaptableOptions;
-        this.init = extraOptions.onInit || defaultInit;
-        this.extraOptions = extraOptions;
-        this.agGridModules = [];
-        this.render();
-    }
-    render(container) {
-        if (!container) {
-            const initContext = {
-                adaptableId: this.adaptableOptions?.adaptableId ?? '',
-                adaptableStateKey: this.adaptableOptions?.adaptableStateKey ?? '',
-                adaptableContext: this.adaptableOptions?.adaptableContext,
-            };
-            container = resolveContainerElement(this.adaptableOptions.containerOptions?.adaptableContainer, initContext);
-        }
-        if (!container) {
-            const defaultId = getDefaultAdaptableOptions().containerOptions.adaptableContainer || 'adaptable';
-            container = document.getElementById(defaultId);
-        }
-        if (!container) {
-            throw new Error('Cannot find container in which to render Adaptable No Code Wizard');
-        }
-        container.classList.add('adaptable--in-wizard');
-        const unmount = defaultRenderReactRoot(React.createElement(AdaptableWizardView, {
-            adaptableOptions: this.adaptableOptions,
-            ...this.extraOptions,
-            onInit: (adaptableOptions, gridOptions) => {
-                container.classList.remove('adaptable--in-wizard');
-                unmount();
-                this.init({
-                    adaptableOptions,
-                    gridOptions: gridOptions,
-                    agGridModules: [...this.agGridModules],
-                });
-            },
-        }), container);
-    }
-}

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -7,7 +7,7 @@ import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AgGridAdapter, RowNodeEvent } from './AgGridAdapter';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
-import { AdaptableState } from '../AdaptableState/AdaptableState';
+import { AdaptablePersistentState } from '../AdaptableState/AdaptableState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { ICalculatedColumnExpressionService } from '../Utilities/Services/Interface/ICalculatedColumnExpressionService';
 import { IModuleService } from '../Utilities/Services/Interface/IModuleService';
@@ -157,9 +157,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
     static _initInternal(config: AdaptableInitInternalConfig): Promise<AdaptableApi>;
     private _initAdaptableAgGrid;
     midwayDestroy(): void;
-    migrateLoadedAdaptableState(state: AdaptableState): AdaptableState;
-    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: AdaptableState) => AdaptableState;
-    normalizeAdaptableState(state: AdaptableState, agGridOptions: NormalizeAdaptableStateOptions): AdaptableState;
+    migrateLoadedAdaptableState<T extends Partial<AdaptablePersistentState>>(state: T): T;
+    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: Partial<AdaptablePersistentState>) => Partial<AdaptablePersistentState>;
+    normalizeAdaptableState(state: Partial<AdaptablePersistentState>, agGridOptions: NormalizeAdaptableStateOptions): Partial<AdaptablePersistentState>;
     private normaliseLayoutState;
     private normaliseToolPanelState;
     private getCurrentLayoutModel;

package/src/agGrid/AdaptableAgGrid.js

@@ -15,6 +15,7 @@ import { AG_GRID_GRAND_TOTAL_ROW_ID, AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_C
 import { generateSelectionColumn } from '../Api/Implementation/ColumnApiImpl';
 import { DataService } from '../Utilities/Services/DataService';
 import { AdaptableStore } from '../Redux/Store/AdaptableStore';
+import { validateStateOptions } from '../Redux/Store/StateOptionsGuards';
 import { AdaptableApiImpl } from '../Api/Implementation/AdaptableApiImpl';
 import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { CommentsService } from '../Utilities/Services/CommentsService';
@@ -739,6 +740,7 @@ export class AdaptableAgGrid {
         }
     }
     normalizeAdaptableOptions(adaptableOptions) {
+        validateStateOptions(adaptableOptions.stateOptions, this.logger);
         if (this.hasAutogeneratedPrimaryKey) {
             this.logger.warn(`Autogenerated primary key is enabled (adaptableOptions.autogeneratedPrimaryKey = true). This should be a last resort as it limits some Adaptable features. See: ${PrimaryKeyDocsLink}`);
             this.adaptableOptions.primaryKey = AUTOGENERATED_PK_COLUMN;

package/src/agGrid/AdaptableFrameworkComponent.d.ts

@@ -29,7 +29,13 @@ export type ReactFrameworkComponent = ({ adaptableApi, }: {
 }) => ReactElement;
 /** AdapTable extras passed on AG Grid `menuItemParams` for custom menu items. */
 export interface AdaptableMenuItemParams<TMenuContext = unknown> {
+    /**
+     * AdapTable API for the grid that opened the menu.
+     */
     adaptableApi: AdaptableApi;
+    /**
+     * Column menu or context menu context: the column, the row, and the cell the menu was opened on.
+     */
     menuContext: TMenuContext;
 }
 /**
@@ -37,7 +43,13 @@ export interface AdaptableMenuItemParams<TMenuContext = unknown> {
  * `menuItemParams` (see `AgGridMenuAdapter.mapCustomMenuItemToAgGridMenuDefinition`).
  */
 export interface AdaptableReactMenuItemProps<TMenuContext = unknown> {
+    /**
+     * Menu item name AG Grid passes to the component.
+     */
     name: string;
+    /**
+     * AdapTable extras (`adaptableApi`, `menuContext`) plus anything supplied on the menu item.
+     */
     menuItemParams: AdaptableMenuItemParams<TMenuContext> & Record<string, unknown>;
 }
 /**