@adaptabletools/adaptable 24.0.0-canary.6 → 24.0.0-canary.7

package/src/View/Components/Popups/AdaptablePopup/Navigation.js

@@ -10,7 +10,7 @@ import { getSettingsPanelNavigationItems } from './useMenuItems';
 import { isSettingsPanelNavigationItem, } from './settingsPanelNavigationTypes';
 import { SidebarTrigger } from '../../../../components/ui/sidebar';
 import { Flex } from '../../../../components/Flex';
-import { Input } from '../../../../components/ui/input';
+import { AdaptableFormControlTextClear } from '../../Forms/AdaptableFormControlTextClear';
 import { Tooltip } from '../../../../components/Tooltip';
 import { resolveSettingsPanelDisplayOptions } from '../../../../Utilities/Helpers/SettingsPanelHelper';
 const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
@@ -56,13 +56,7 @@ export const filterSettingsPanelNavigationEntries = (entries, query) => {
     }
     return filtered;
 };
-const NavigationItem = ({ menuItem, description, isActive, dataName, customPanelIcon, isCustomSettingsPanel, onAction, showModuleIcons, showModuleDescriptions, collapsed, }) => {
-    const ref = useRef(null);
-    useEffect(() => {
-        if (isActive) {
-            ref.current?.focus();
-        }
-    }, [isActive]);
+const NavigationItem = ({ menuItem, description, isActive, dataName, customPanelIcon, isCustomSettingsPanel, onAction, showModuleIcons, showModuleDescriptions, collapsed, buttonRef, }) => {
     const visibleDescription = !collapsed && showModuleDescriptions ? description : undefined;
     let icon = null;
     if (isCustomSettingsPanel) {
@@ -82,7 +76,7 @@ const NavigationItem = ({ menuItem, description, isActive, dataName, customPanel
     return (_jsx("li", { className: cn(navigationItemClassName, {
             [`${navigationItemClassName}--active`]: isActive,
             [`${navigationItemClassName}--collapsed`]: collapsed,
-        }), children: _jsxs("button", { ref: ref, type: "button", title: tooltip, "aria-label": menuItem.label, className: cn(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
+        }), children: _jsxs("button", { ref: buttonRef, type: "button", title: tooltip, "aria-label": menuItem.label, className: cn(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
                 'twa:flex twa:flex-row twa:gap-2': true,
                 'twa:items-start': Boolean(visibleDescription),
                 'twa:items-center': !visibleDescription,
@@ -128,6 +122,10 @@ export const Navigation = (props) => {
     const { showModuleIcons, showModuleDescriptions, showNavigationSearch, enableCollapseView, } = displayOptions;
     const collapsed = enableCollapseView && (props.collapsed ?? false);
     const visibleMenuItems = useMemo(() => filterSettingsPanelNavigationEntries(props.menuItems, searchQuery), [props.menuItems, searchQuery]);
+    const activeButtonRef = useRef(null);
+    useEffect(() => {
+        activeButtonRef.current?.focus();
+    }, [props.activeItem]);
     const makeActive = (menuItem) => {
         dispatch(menuItem.reduxAction);
     };
@@ -167,7 +165,7 @@ export const Navigation = (props) => {
                     'twa:justify-center twa:px-1 twa:pt-2 twa:pb-1': collapsed,
                     'twa:px-2 twa:pt-2 twa:pb-1': !collapsed,
                     'twa:justify-end': !collapsed && !showSearchInput,
-                }), children: [showSearchInput ? (_jsx(Input, { "data-name": "settings-panel-nav-search", type: "search", value: searchQuery, onChange: (event) => setSearchQuery(event.currentTarget.value), placeholder: "Search...", "aria-label": "Search Settings Panel modules", className: "twa:h-8 twa:flex-1 twa:min-w-0 twa:text-2" })) : null, collapseTrigger] })) : null, _jsxs("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col twa:flex-1 twa:min-h-0 twa:overflow-auto", onKeyDown: handleKeyPress, children: [!hasVisibleItems ? (_jsx("li", { className: "twa:list-none twa:px-3 twa:py-2 twa:text-2 twa:opacity-70", children: collapsed ? null : 'No modules match' })) : null, visibleMenuItems.map((entry, index) => {
+                }), children: [showSearchInput ? (_jsx(AdaptableFormControlTextClear, { "data-name": "settings-panel-nav-search", value: searchQuery, OnTextChange: setSearchQuery, placeholder: "Search...", "aria-label": "Search Settings Panel modules", className: "twa:h-8 twa:flex-1 twa:min-w-0", inputClassName: "twa:text-2" })) : null, collapseTrigger] })) : null, _jsxs("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col twa:flex-1 twa:min-h-0 twa:overflow-auto", onKeyDown: handleKeyPress, children: [!hasVisibleItems ? (_jsx("li", { className: "twa:list-none twa:px-3 twa:py-2 twa:text-2 twa:opacity-70", children: collapsed ? null : 'No modules match' })) : null, visibleMenuItems.map((entry, index) => {
                         if (entry.type === 'header') {
                             if (collapsed) {
                                 return null;
@@ -181,6 +179,6 @@ export const Navigation = (props) => {
                         const dataName = isCustomSettingsPanel
                             ? `CSP-${menuItem.label}`
                             : menuItem.category ?? menuItem.label;
-                        return (_jsx(NavigationItem, { menuItem: menuItem, description: entry.description, isActive: isActive, dataName: dataName, customPanelIcon: customPanelIcon, isCustomSettingsPanel: isCustomSettingsPanel, showModuleIcons: showModuleIcons, showModuleDescriptions: showModuleDescriptions, collapsed: collapsed, onAction: () => makeActive(menuItem) }, menuItem.label));
+                        return (_jsx(NavigationItem, { menuItem: menuItem, description: entry.description, isActive: isActive, dataName: dataName, customPanelIcon: customPanelIcon, isCustomSettingsPanel: isCustomSettingsPanel, showModuleIcons: showModuleIcons, showModuleDescriptions: showModuleDescriptions, collapsed: collapsed, onAction: () => makeActive(menuItem), buttonRef: isActive ? activeButtonRef : undefined }, menuItem.label));
                     })] })] }));
 };

package/src/View/Components/StyleComponent.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { OptionalColorPicker } from '../../components/ColorPicker';
+import { ColorField } from '../../components/ColorField';
 import HelpBlock from '../../components/HelpBlock';
 import Panel from '../../components/Panel';
 import { Tabs } from '../../components/Tabs';
@@ -131,7 +131,7 @@ export const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    const styleEditorGrid = (_jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2 twa:self-stretch", children: [_jsxs(Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), _jsxs("span", { children: ["Back ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { api: props.api, value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), _jsxs("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-3", api: props.api, value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), _jsxs("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-4", api: props.api, value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), _jsx("span", { className: "twa:row-start-5", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-5", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+    const styleEditorGrid = (_jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2 twa:self-stretch", children: [_jsxs(Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), _jsxs("span", { children: ["Back ", colourSpellingVariant] }), _jsx(ColorField, { value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), _jsxs("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), _jsx(ColorField, { className: "twa:row-start-3", value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), _jsxs("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), _jsx(ColorField, { className: "twa:row-start-4", value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), _jsx("span", { className: "twa:row-start-5", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-5", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
                     const number = Number(event.target.value);
                     if (isNaN(number)) {
                         onBorderRadiusChange(0);

package/src/View/Dashboard/Dashboard.d.ts

@@ -18,7 +18,7 @@ interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
     onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
     onSetFloatingPosition: (FloatingPosition: AdaptableCoordinate) => DashboardRedux.DashboardSetFloatingPositionAction;
-    onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
+    onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction | QuickSearchRedux.QuickSearchClearAction;
     onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;
     onShowDashboardPopup: () => PopupRedux.PopupShowScreenAction;
 }

package/src/View/Dashboard/Dashboard.js

@@ -126,7 +126,7 @@ function mapDispatchToProps(dispatch) {
         onSetIsCollapsed: (IsCollapsed) => dispatch(DashboardRedux.DashboardSetIsCollapsed(IsCollapsed)),
         onSetIsFloating: (IsFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(IsFloating)),
         onSetFloatingPosition: (FloatingPosition) => dispatch(DashboardRedux.DashboardSetFloatingPosition(FloatingPosition)),
-        onRunQuickSearch: (newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(newQuickSearchText)),
+        onRunQuickSearch: (newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchTextAction(newQuickSearchText)),
         onShowQuickSearchPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.QuickSearchModuleId, 'QuickSearchPopup')),
         onShowDashboardPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.DashboardModuleId, 'DashboardPopup')),
     };

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 { getDefaultRangeColor } 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 };
@@ -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(),
                         },
                     ];
                 })();

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" })] }) })] }));
 };

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

@@ -4,7 +4,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 { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
 import { getDefaultRangeColor } from '../../../Utilities/Helpers/UIHelper';
@@ -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." }))] }));
 };