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

package/src/View/GridInfo/GridInfoPopup.js

@@ -8,12 +8,14 @@ import { Tabs } from '../../components/Tabs';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { getDefaultAdaptableOptions } from '../../AdaptableOptions/DefaultAdaptableOptions';
+import { isPivotLayout } from '../../Utilities/Helpers/Layouts/LayoutHelper';
 import { cn } from '../../lib/utils';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {
     const api = props.api;
-    const keyValuePairs = [];
+    const summaryKeyValuePairs = [];
+    const layoutKeyValuePairs = [];
     const calcColumns = api.calculatedColumnApi
         .getCalculatedColumns()
         .map((c) => c.ColumnId);
@@ -32,40 +34,74 @@ export const GridInfoPopup = (props) => {
         : null;
     const selectedRowInfo = api.gridApi.getSelectedRowInfo();
     if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
-        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
+        summaryKeyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
     }
     if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
-        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
+        summaryKeyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
     }
-    keyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
-    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
-    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
-    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
-    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
-    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
-    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
-    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
-    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
-    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
-    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
+    summaryKeyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
+    summaryKeyValuePairs.push({ Key: 'Adaptable Id', Value: api.optionsApi.getAdaptableId() });
+    summaryKeyValuePairs.push({ Key: 'State Key', Value: api.optionsApi.getAdaptableStateKey() });
+    summaryKeyValuePairs.push({ Key: 'User Name', Value: api.optionsApi.getUserName() });
+    const primaryKey = api.optionsApi.getPrimaryKey();
+    const primaryKeyFriendly = primaryKey
+        ? api.columnApi.getFriendlyNameForColumnId(primaryKey)
+        : undefined;
+    const primaryKeyLabel = primaryKeyFriendly && primaryKeyFriendly !== primaryKey
+        ? `${primaryKeyFriendly} (${primaryKey})`
+        : primaryKey;
+    summaryKeyValuePairs.push({
+        Key: 'Primary Key',
+        Value: api.optionsApi.isAutogeneratePrimaryKey()
+            ? `${primaryKeyLabel} (auto-generated)`
+            : primaryKeyLabel,
+    });
+    const currentLayout = api.layoutApi.getCurrentLayout();
+    const isPivot = isPivotLayout(currentLayout);
+    const columnLabels = (columnIds) => ArrayExtensions.IsNotNullOrEmpty(columnIds)
+        ? columnIds
+            .map((columnId) => api.columnApi.getFriendlyNameForColumnId(columnId) || columnId)
+            .join(', ')
+        : 'None';
+    layoutKeyValuePairs.push({
+        Key: 'Current Layout',
+        Value: api.layoutApi.getCurrentLayoutName() || 'None',
+    });
+    layoutKeyValuePairs.push({
+        Key: 'Layout Type',
+        Value: isPivot ? 'Pivot' : 'Table',
+    });
+    layoutKeyValuePairs.push({
+        Key: 'Row Groups',
+        Value: columnLabels(api.layoutApi.getCurrentRowGroupsColumnIds()),
+    });
+    if (isPivot) {
+        layoutKeyValuePairs.push({
+            Key: 'Pivot Columns',
+            Value: columnLabels(currentLayout.PivotColumns),
+        });
+    }
+    layoutKeyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
+    layoutKeyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
+    layoutKeyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
+    layoutKeyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
+    layoutKeyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
+    layoutKeyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
+    layoutKeyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
+    layoutKeyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
+    layoutKeyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
+    layoutKeyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
             ? ArrayExtensions.createCommaSeparatedString(calcColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
+    layoutKeyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+    layoutKeyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions.createCommaSeparatedString(actionColumns)
             : 'None' });
     const domProps = {
         className: 'twa:flex-1 twa:min-h-0 twa:w-full',
     };
-    keyValuePairs.map((keyValuePair) => {
-        return {
-            Key: keyValuePair.Key,
-            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
-        };
-    })
-        .filter((x) => x.Value);
     const columnsMap = {
         Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
         Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
@@ -199,12 +235,13 @@ export const GridInfoPopup = (props) => {
         return Math.min(total + 40, 400);
     };
     const enabledTabs = api.optionsApi.getSettingsPanelOptions()?.gridInfoTabs ??
-        ['Grid Options', 'Grid Summary', 'Grid State'];
+        ['Grid Summary', 'Layout', 'Grid State', 'Grid Options'];
     const showSummary = enabledTabs.includes('Grid Summary');
+    const showLayout = enabledTabs.includes('Layout');
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
+    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Summary" }) : null, showLayout ? _jsx(Tabs.Tab, { children: "Layout" }) : null, showState ? _jsx(Tabs.Tab, { children: "State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: summaryKeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showLayout ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: layoutKeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
                                                     style: { height: sectionHeight(section.rows), width: '100%' },
                                                 }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/QuickSearch/QuickSearchInput.js

@@ -12,7 +12,7 @@ export const QuickSearchInput = (props) => {
     const adaptable = useAdaptable();
     const QuickSearchText = useSelector((state) => state.QuickSearch.QuickSearchText);
     const dispatch = useDispatch();
-    const onRunQuickSearch = React.useCallback((newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(newQuickSearchText)), []);
+    const onRunQuickSearch = React.useCallback((newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchTextAction(newQuickSearchText)), []);
     const isServerSideRowModel = adaptable.api.gridApi.getAgGridRowModelType() === 'serverSide';
     const [searchText, search] = useQuickSearchDebounced({
         QuickSearchText,

package/src/View/QuickSearch/QuickSearchPopup.d.ts

@@ -7,7 +7,7 @@ interface QuickSearchPopupProps extends ModuleViewPopupProps<any> {
     QuickSearchTextMatchStyle: AdaptableStyle;
     QuickSearchCurrentTextMatchStyle: AdaptableStyle;
     QuickSearchCellMatchStyle: AdaptableStyle;
-    onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
+    onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction | QuickSearchRedux.QuickSearchClearAction;
     onSetTextMatchingStyle: (style: AdaptableStyle) => QuickSearchRedux.QuickSearchSetTextMatchingStyleAction;
     onSetCurrentTextMatchingStyle: (style: AdaptableStyle) => QuickSearchRedux.QuickSearchSetCurrentTextMatchingStyleAction;
     onSetCellMatchingStyle: (style: AdaptableStyle) => QuickSearchRedux.QuickSearchSetMatchingCellStyleAction;

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -39,7 +39,7 @@ function mapStateToProps(state, ownProps) {
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onRunQuickSearch: (quickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(quickSearchText)),
+        onRunQuickSearch: (quickSearchText) => dispatch(QuickSearchRedux.QuickSearchTextAction(quickSearchText)),
         onSetTextMatchingStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetTextMatchingStyle(style)),
         onSetCurrentTextMatchingStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetCurrentTextMatchingStyle(style)),
         onSetCellMatchingStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetCellMatchingStyle(style)),

package/src/View/QuickSearch/Utilities/useQuickSearchDebounced.d.ts

@@ -1,6 +1,6 @@
-import { QuickSearchRunAction } from '../../../Redux/ActionsReducers/QuickSearchRedux';
+import { QuickSearchClearAction, QuickSearchRunAction } from '../../../Redux/ActionsReducers/QuickSearchRedux';
 type UseQuickSearchProps = {
-    onRunQuickSearch: (quickSearchText: string) => QuickSearchRunAction;
+    onRunQuickSearch: (quickSearchText: string) => QuickSearchRunAction | QuickSearchClearAction;
     QuickSearchText: string;
 };
 export declare const useQuickSearchDebounced: (props: UseQuickSearchProps) => [string, (s: string) => void];

package/src/View/StyledColumn/RangesComponent.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { ColorPicker } from '../../components/ColorPicker';
+import { ColorField } from '../../components/ColorField';
 import { clamp } from '../../Utilities/Extensions/NumberExtensions';
 import { CheckBox } from '../../components/CheckBox';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';
 import SimpleButton from '../../components/SimpleButton';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { getGraySwatchColor } from '../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor, getDefaultZeroCentredColors, } from '../../Utilities/Helpers/UIHelper';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
@@ -16,10 +16,7 @@ import { SingleSelect } from '../../components/Select';
 import { InputGroup } from '../../components/InputGroup';
 import { Icon } from '../../components/icons';
 import HelpBlock from '../../components/HelpBlock';
-const DEFAULT_ZERO_CENTRED_COLORS = {
-    NegativeColor: 'rgba(220, 53, 69, 0.55)',
-    PositiveColor: 'rgba(40, 167, 69, 0.55)',
-};
+const DEFAULT_ZERO_CENTRED_COLORS = getDefaultZeroCentredColors();
 const hasConfiguredRanges = (ranges) => (ranges?.length ?? 0) > 0;
 function deriveInitialRangesType(props) {
     if (props.columnComparison) {
@@ -82,7 +79,7 @@ export class RangesComponent extends React.Component {
                                             range.Max === 'Col-Max' ||
                                             (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                             this.changeRangeMax(index, value);
-                                        } })] }), _jsx(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                                        } })] }), _jsx(ColorField, { clearable: false, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
                                 }, className: "twa:h-[33px] twa:pl-2" }), this.props.showRangeDirection && (_jsx(CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), children: "Reverse Gradient" })), _jsx(SimpleButton, { icon: "delete", disabled: this.props.disabled ||
                                     (!this.props.allowEmptyRanges &&
@@ -93,7 +90,7 @@ export class RangesComponent extends React.Component {
             const apply = (next) => this.props.onApplyZeroCentred?.(next);
             const minLabel = this.props.minMaxRangeValues != null ? this.props.minMaxRangeValues.min : 'column min';
             const maxLabel = this.props.minMaxRangeValues != null ? this.props.minMaxRangeValues.max : 'column max';
-            return (_jsxs(Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Colour cells on a diverging scale centred at zero." }), _jsx(Box, { children: "Negative values shade toward the column minimum, positive values toward the maximum \u2014 deeper as they move away from 0." })] }), _jsxs(FormLayout, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [_jsx(FormRow, { label: `Negative (${minLabel} → 0):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), _jsx(FormRow, { label: `Positive (0 → ${maxLabel}):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] })] }));
+            return (_jsxs(Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Colour cells on a diverging scale centred at zero." }), _jsx(Box, { children: "Negative values shade toward the column minimum, positive values toward the maximum \u2014 deeper as they move away from 0." })] }), _jsxs(FormLayout, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [_jsx(FormRow, { label: `Negative (${minLabel} → 0):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorField, { clearable: false, disabled: this.props.disabled, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), _jsx(FormRow, { label: `Positive (0 → ${maxLabel}):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorField, { clearable: false, disabled: this.props.disabled, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] })] }));
         };
         const describeBound = (bound) => {
             if (bound == null || bound === '') {
@@ -105,7 +102,7 @@ export class RangesComponent extends React.Component {
             const friendlyName = this.props.api.columnApi.getFriendlyNameForColumnId(String(bound));
             return (_jsxs(_Fragment, { children: [_jsx("strong", { children: friendlyName }), " ", _jsx("span", { className: "twa:opacity-60", children: "(per row)" })] }));
         };
-        const renderColumnComparisonContent = () => (_jsxs(Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsxs(Box, { children: ["Scale each cell's bar between a ", _jsx("strong", { children: "Minimum" }), " and a", ' ', _jsx("strong", { children: "Maximum" }), "."] }), _jsxs(Box, { children: ["Set each to a fixed ", _jsx("strong", { children: "Value" }), " (same for all rows) or a", ' ', _jsx("strong", { children: "Column" }), " (read from that column on each row)."] })] }), _jsxs(FormLayout, { columns: ['label', 'first'], sizes: ['auto', '1fr'], children: [_jsx(FormRow, { label: "Minimum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MinValue, onChange: (value) => this.setColumnComparisonMin(value) }) }), _jsx(FormRow, { label: "Maximum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MaxValue, onChange: (value) => this.setColumnComparisonMax(value) }) }), _jsx(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
+        const renderColumnComparisonContent = () => (_jsxs(Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsxs(Box, { children: ["Scale each cell's bar between a ", _jsx("strong", { children: "Minimum" }), " and a", ' ', _jsx("strong", { children: "Maximum" }), "."] }), _jsxs(Box, { children: ["Set each to a fixed ", _jsx("strong", { children: "Value" }), " (same for all rows) or a", ' ', _jsx("strong", { children: "Column" }), " (read from that column on each row)."] })] }), _jsxs(FormLayout, { columns: ['label', 'first'], sizes: ['auto', '1fr'], children: [_jsx(FormRow, { label: "Minimum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MinValue, onChange: (value) => this.setColumnComparisonMin(value) }) }), _jsx(FormRow, { label: "Maximum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MaxValue, onChange: (value) => this.setColumnComparisonMax(value) }) }), _jsx(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: _jsx(ColorField, { clearable: false, disabled: this.props.disabled, value: comparisonColor, onChange: (color) => {
                                     this.changeColumnComparisonColor(color);
                                 } }) })] }), _jsxs(Box, { className: "twa:mt-2 twa:p-2 twa:text-3 twa:opacity-80", "data-name": "cc-summary", children: ["Each row's bar runs from ", describeBound(this.props.columnComparison?.MinValue), " to", ' ', describeBound(this.props.columnComparison?.MaxValue), "."] })] }, 'cc'));
         const tabFlex = { flex: 1 };
@@ -159,7 +156,7 @@ export class RangesComponent extends React.Component {
         }
         if (value === 'ColumnComparison') {
             const columnComparison = {
-                Color: getGraySwatchColor(),
+                Color: getDefaultRangeColor(),
                 MinValue: undefined,
                 MaxValue: undefined,
             };
@@ -252,7 +249,7 @@ export class RangesComponent extends React.Component {
                     {
                         Min: isPercentage ? 0 : 'Col-Min',
                         Max: isPercentage ? 100 : 'Col-Max',
-                        Color: getGraySwatchColor(),
+                        Color: getDefaultRangeColor(),
                     },
                 ]
                 : (() => {
@@ -263,12 +260,12 @@ export class RangesComponent extends React.Component {
                         {
                             Min: isPercentage ? 0 : 'Col-Min',
                             Max: mid,
-                            Color: 'rgba(128, 128, 128, 0.25)',
+                            Color: getDefaultRangeColor(),
                         },
                         {
                             Min: mid,
                             Max: isPercentage ? 100 : 'Col-Max',
-                            Color: 'rgba(128, 128, 128, 0.55)',
+                            Color: getDefaultRangeColor(),
                         },
                     ];
                 })();
@@ -298,7 +295,7 @@ export class RangesComponent extends React.Component {
         const newRange = {
             Min,
             Max: lastRange.Max,
-            Color: getGraySwatchColor(),
+            Color: getDefaultRangeColor(),
         };
         const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
@@ -311,7 +308,7 @@ export class RangesComponent extends React.Component {
             }
             return [
                 { ...onlyRange, Max: 50 },
-                { Min: 50, Max: 100, Color: getGraySwatchColor() },
+                { Min: 50, Max: 100, Color: getDefaultRangeColor() },
             ];
         }
         if (onlyRange.Min !== 'Col-Min' || onlyRange.Max !== 'Col-Max') {
@@ -322,7 +319,7 @@ export class RangesComponent extends React.Component {
         const mid = Math.round((min + max) / 2);
         return [
             { ...onlyRange, Max: mid },
-            { Min: mid, Max: 'Col-Max', Color: getGraySwatchColor() },
+            { Min: mid, Max: 'Col-Max', Color: getDefaultRangeColor() },
         ];
     }
     setColumnComparisonMin(value) {

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OptionalColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Box, Flex } from '../../../components/Flex';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
@@ -25,7 +25,7 @@ export const BadgePillStyleEditor = (props) => {
         }
     };
     const disabledClass = disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
-    const form = (_jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BackColor, defaultColor: "#cccccc", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Text", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.ForeColor, defaultColor: "#000000", onChange: (c) => update({ ForeColor: c }) }) }), _jsx(FormRow, { label: "Border", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }));
+    const form = (_jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsx(ColorField, { disabled: disabled, value: pill.BackColor, defaultColor: "#cccccc", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Text", children: _jsx(ColorField, { disabled: disabled, value: pill.ForeColor, defaultColor: "#000000", onChange: (c) => update({ ForeColor: c }) }) }), _jsx(FormRow, { label: "Border", children: _jsx(ColorField, { disabled: disabled, value: pill.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }));
     if (props.embedded) {
         return form;
     }

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

@@ -75,7 +75,6 @@ const getBadgeDefinitionSummaryItems = (badge, api) => {
 const BadgePreview = ({ badge, density, previewValue }) => (_jsx(Badge, { pillStyle: badge.PillStyle, icon: badge.IconProperties?.Icon, iconPosition: badge.IconProperties?.Position, shape: badge.Shape, density: density, iconGap: badge.IconProperties?.Gap, children: badge.IconProperties?.IconOnly ? '' : previewValue }));
 const BadgeCardSummary = ({ badge, api }) => (_jsx(CollapsibleWizardValueSummary, { value: renderSummaryLabelValueTags(getBadgeDefinitionSummaryItems(badge, api)) }));
 const BadgeEditorForm = (props) => {
-    const { api } = useOnePageAdaptableWizardContext();
     const { badge, columnId, onChange } = props;
     const currentShape = badge.Shape ?? 'Rounded';
     const iconProps = badge.IconProperties;
@@ -93,7 +92,7 @@ const BadgeEditorForm = (props) => {
         }
         onChange({ ...badge, IconProperties: next });
     };
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-2", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Shape" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define shape of the corners for this badge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(RadioGroup, { orientation: "horizontal", name: `ab-badge-shape-${columnId}`, value: currentShape, onRadioChange: (value) => onChange({ ...badge, Shape: value }), className: "twa:gap-3", children: SHAPE_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, children: choice.label }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Colours and font styling for the badge pill" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(BadgePillStyleEditor, { embedded: true, api: api, value: badge.PillStyle, onChange: (next) => {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-2", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Shape" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define shape of the corners for this badge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(RadioGroup, { orientation: "horizontal", name: `ab-badge-shape-${columnId}`, value: currentShape, onRadioChange: (value) => onChange({ ...badge, Shape: value }), className: "twa:gap-3", children: SHAPE_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, children: choice.label }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Colours and font styling for the badge pill" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(BadgePillStyleEditor, { embedded: true, value: badge.PillStyle, onChange: (next) => {
                                 if (next) {
                                     onChange({ ...badge, PillStyle: next });
                                 }
@@ -263,7 +262,7 @@ export const StyledColumnBadgeStyleSection = (props) => {
                                                         updateBadgeStyle({
                                                             Spacing: typeof value === 'number' && value >= 0 ? value : undefined,
                                                         });
-                                                    } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between adjacent badges" })] }) }) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Overflow" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure the overflow mode for badges" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BADGE_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Overflow mode", children: _jsx(Box, { className: "twa:ml-2", children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-badgestyle-overflow", value: currentOverflow, onRadioChange: (value) => updateBadgeStyle({ OverflowMode: value }), children: OVERFLOW_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[110px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) }) }) }) })] })] })), _jsxs(Card, { shadow: false, 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: "Styling and alignment to apply to Badge cells (overrides Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BADGE_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Alignment:", children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Right' : undefined) })] }) }) }) }), _jsx(Box, { className: "twa:mt-3", children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: badgeStyle.Cell, onChange: (next) => {
+                                                    } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px between adjacent badges" })] }) }) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Overflow" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure the overflow mode for badges" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BADGE_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Overflow mode", children: _jsx(Box, { className: "twa:ml-2", children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-badgestyle-overflow", value: currentOverflow, onRadioChange: (value) => updateBadgeStyle({ OverflowMode: value }), children: OVERFLOW_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[110px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) }) }) }) })] })] })), _jsxs(Card, { shadow: false, 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: "Styling and alignment to apply to Badge cells (overrides Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BADGE_STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Alignment:", children: _jsx(Flex, { alignItems: "center", className: "twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: currentAlignment === 'Left', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: currentAlignment === 'Center', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: currentAlignment === 'Right', onPressedChange: (pressed) => updateBadgeRowAlignment(pressed ? 'Right' : undefined) })] }) }) }) }), _jsx(Box, { className: "twa:mt-3", children: _jsx(StyledColumnCellStyleEditor, { disabled: disabled, value: badgeStyle.Cell, onChange: (next) => {
                                         if (next) {
                                             updateBadgeStyle({ Cell: next });
                                         }

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { CellBoxStyle, CellFontStyle } from '../../../AdaptableState/Common/AdaptableStyle';
 export interface StyledColumnFontStyleEditorProps {
-    api: AdaptableApi;
     /** Current Font slice (may be undefined / partial). */
     value: CellFontStyle | undefined;
     /**
@@ -19,7 +17,6 @@ export interface StyledColumnFontStyleEditorProps {
 }
 export declare const StyledColumnFontStyleEditor: React.FunctionComponent<StyledColumnFontStyleEditorProps>;
 export interface StyledColumnCellStyleEditorProps {
-    api: AdaptableApi;
     /** Current Cell slice (may be undefined / partial). */
     value: CellBoxStyle | undefined;
     /**

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { OptionalColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Box, Flex } from '../../../components/Flex';
 import { NumberInput } from '../../../components/Input/NumberInput';
@@ -42,7 +42,7 @@ export const StyledColumnFontStyleEditor = (props) => {
     const onAlignmentChange = (alignment) => {
         update({ Alignment: alignment });
     };
-    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Text Colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: font.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }) }), _jsx(FormRow, { label: "Font:", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), _jsx(Box, { className: "twa:w-32", children: _jsx(SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
+    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Text Colour:", children: _jsx(ColorField, { className: "twa:ml-2", disabled: disabled, value: font.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }) }), _jsx(FormRow, { label: "Font:", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), _jsx(Box, { className: "twa:w-32", children: _jsx(SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
                                             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) })] }) }) }) }))] }) }));
 };
@@ -66,7 +66,7 @@ export const StyledColumnCellStyleEditor = (props) => {
             props.onChange(next);
         }
     };
-    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" })] }) })] }) }));
+    return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsx(ColorField, { className: "twa:ml-2", disabled: disabled, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Border colour:", children: _jsx(ColorField, { className: "twa:ml-2", disabled: disabled, 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" })] }) })] }) }));
 };
 export const getCellFontStyleSummaryItems = (font) => {
     if (!font) {

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

@@ -6,7 +6,7 @@ import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
 import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
 import AdaptableInput from '../../Components/AdaptableInput';
-import { ColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import { CheckBox } from '../../../components/CheckBox';
 import { Box, Flex } from '../../../components/Flex';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
@@ -144,7 +144,7 @@ export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
                                         }), placeholder: 'Auto', title: "User override for the automatically determined min value (based on series data)" }) }), _jsx(FormRow, { label: "Max Value:", children: _jsx(AdaptableInput, { disabled: disabled, type: "number", value: sparklineOptions.max ?? '', onChange: (e) => handleOptionsChange({
                                             ...sparklineOptions,
                                             max: e.target.value === '' ? undefined : Number(e.target.value),
-                                        }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Theming" }), _jsx(Card.Body, { children: _jsx(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Axis" }), _jsx(Card.Body, { children: _jsx(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), sparklineOptions.type !== 'bar' && (_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Markers" }), _jsx(Card.Body, { children: _jsx(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] })), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Tooltip" }), _jsx(Card.Body, { children: _jsx(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Highlight" }), _jsx(Card.Body, { children: _jsx(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _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-box styling behind the sparkline" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: data.SparklineStyle?.Cell, onChange: (next) => {
+                                        }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Theming" }), _jsx(Card.Body, { children: _jsx(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Axis" }), _jsx(Card.Body, { children: _jsx(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), sparklineOptions.type !== 'bar' && (_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Markers" }), _jsx(Card.Body, { children: _jsx(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] })), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Tooltip" }), _jsx(Card.Body, { children: _jsx(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Highlight" }), _jsx(Card.Body, { children: _jsx(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _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-box styling behind the sparkline" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { disabled: disabled, value: data.SparklineStyle?.Cell, onChange: (next) => {
                                 const sparkStyle = { ...(data.SparklineStyle ?? {}) };
                                 if (next) {
                                     sparkStyle.Cell = next;
@@ -181,7 +181,6 @@ const SparklineObjectArrayProperties = ({ options, onChange, }) => {
     return (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "X Key", children: _jsx(AdaptableInput, { value: options.xKey ?? 'x', onChange: (e) => onChange({ ...options, xKey: e.target.value }) }) }), _jsx(FormRow, { label: "Y Key", children: _jsx(AdaptableInput, { value: options.yKey ?? 'y', onChange: (e) => onChange({ ...options, yKey: e.target.value }) }) }), previewData && (_jsx(FormRow, { label: "Preview", children: _jsx(Tag, { children: previewData }) }))] }));
 };
 const SparklineThemingOptions = ({ options, onChange, }) => {
-    const { api } = useOnePageAdaptableWizardContext();
     const sparklineOptions = options;
     const handleChange = (key, value) => {
         onChange({ ...options, [key]: value });
@@ -219,7 +218,7 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         { value: 'ag-financial', label: 'Financial' },
         { value: 'ag-financial-dark', label: 'Financial Dark' },
     ];
-    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: cssColorToString(sparklineOptions.fill) ?? '', onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: cssColorToString(sparklineOptions.stroke) ?? '', onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
+    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorField, { clearable: false, title: "The colour for filling shapes", value: cssColorToString(sparklineOptions.fill) ?? '', onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorField, { clearable: false, title: "The colour for the stroke", value: cssColorToString(sparklineOptions.stroke) ?? '', onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
                                 ? 'Line colour. Marker colours are in the Markers card.'
                                 : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
                         const value = e.target.value;
@@ -233,7 +232,7 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                     } }) }), _jsx(FormRow, { label: "Line Dash Offset", children: _jsx(AdaptableInput, { title: "The offset of the line dash pattern in pixels", type: "number", min: 0, value: sparklineOptions.lineDashOffset ?? '', onChange: (e) => handleChange('lineDashOffset', Number(e.target.value)) }) }), _jsx(FormRow, { label: "Background", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
                                 ...sparklineOptions.background,
                                 visible,
-                            }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: cssColorToString(sparklineOptions.background?.fill) ?? '', onChange: (fill) => handleChange('background', {
+                            }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorField, { clearable: false, title: "The colour of the chart background", disabled: !sparklineOptions.background?.visible, value: cssColorToString(sparklineOptions.background?.fill) ?? '', onChange: (fill) => handleChange('background', {
                                     ...sparklineOptions.background,
                                     fill,
                                 }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsxs(Box, { children: [_jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? SPARKLINE_CUSTOM_COLOURS_THEME, onValueChange: (themeName) => {
@@ -247,7 +246,6 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                                 }, items: themes }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Palette preset. Use Custom colours when Fill / Stroke above should control the chart." })] }) }))] }));
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
-    const { api } = useOnePageAdaptableWizardContext();
     const sparklineOptions = {
         ...(options ?? {}),
         axis: {
@@ -270,7 +268,7 @@ const SparklineAxisOptions = ({ options, onChange, }) => {
         { value: 'time', label: 'Time' },
     ];
     const isAxisEnabled = sparklineOptions.axis?.visible ?? false;
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Axis", children: _jsx(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), _jsx(FormRow, { label: "Axis Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: cssColorToString(sparklineOptions.axis?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) })] }) }), _jsx(FormRow, { label: "Reverse Scale", children: _jsx(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && (_jsx(_Fragment, { children: _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Inner" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })] }) }) }))] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Axis", children: _jsx(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), _jsx(FormRow, { label: "Axis Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorField, { clearable: false, title: "The colour of the axis line", disabled: !isAxisEnabled, value: cssColorToString(sparklineOptions.axis?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) })] }) }), _jsx(FormRow, { label: "Reverse Scale", children: _jsx(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && (_jsx(_Fragment, { children: _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Inner" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })] }) }) }))] }));
 };
 const SparklineTooltipOptions = ({ options, onChange, }) => {
     const sparklineOptions = options;
@@ -315,7 +313,6 @@ const SparklineTooltipOptions = ({ options, onChange, }) => {
                         }) }) }) })] }));
 };
 const SparklineMarkerOptions = ({ options, onChange }) => {
-    const { api } = useOnePageAdaptableWizardContext();
     const sparklineOptions = options;
     const handleChange = (value) => {
         onChange({
@@ -338,10 +335,9 @@ const SparklineMarkerOptions = ({ options, onChange }) => {
         { value: 'triangle', label: 'Triangle' },
     ];
     const isMarkerEnabled = sparklineOptions.marker?.enabled ?? false;
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Markers", children: _jsx(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), _jsx(FormRow, { label: "Marker Size", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { disabled: !isMarkerEnabled, type: "number", className: "twa:w-full", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" }) }) }), _jsx(FormRow, { label: "Marker Shape", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), _jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: cssColorToString(sparklineOptions.marker?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })] }) })] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Markers", children: _jsx(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), _jsx(FormRow, { label: "Marker Size", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { disabled: !isMarkerEnabled, type: "number", className: "twa:w-full", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" }) }) }), _jsx(FormRow, { label: "Marker Shape", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), _jsx(FormRow, { label: "Fill", children: _jsx(ColorField, { clearable: false, title: "The colour for filling markers", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorField, { clearable: false, title: "The colour for the marker stroke", disabled: !isMarkerEnabled, value: cssColorToString(sparklineOptions.marker?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })] }) })] }));
 };
 const SparklineHighlightOptions = ({ options, onChange, }) => {
-    const { api } = useOnePageAdaptableWizardContext();
     const highlightOptions = options.highlight;
     const handleBaseChange = (value) => {
         onChange({
@@ -376,5 +372,5 @@ const SparklineHighlightOptions = ({ options, onChange, }) => {
             },
         });
     };
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Item Fill", children: _jsx(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), _jsx(FormRow, { label: "Item Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: cssColorToString(highlightOptions?.highlightedItem?.stroke) ?? '', onChange: (stroke) => handleItemChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" })] }) }), _jsx(FormRow, { label: "Series", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), _jsx(AdaptableInput, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })] }) })] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Item Fill", children: _jsx(ColorField, { clearable: false, title: "The colour for filling highlighted items", value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), _jsx(FormRow, { label: "Item Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorField, { clearable: false, title: "The colour for the highlighted item stroke", value: cssColorToString(highlightOptions?.highlightedItem?.stroke) ?? '', onChange: (stroke) => handleItemChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" })] }) }), _jsx(FormRow, { label: "Series", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), _jsx(AdaptableInput, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })] }) })] }));
 };