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

package/src/Utilities/Helpers/UIHelper.js

@@ -3,38 +3,17 @@ import { FontWeight, FontStyle, StatusColour } from '../../AdaptableState/Common
 import { StringExtensions } from '../Extensions/StringExtensions';
 import { getScheduleDescription as getScheduleDescriptionFromHelper } from './Scheduling/ScheduleHelper';
 import ArrayExtensions from '../Extensions/ArrayExtensions';
-export function getSwatchColorVar(index) {
-    return `var(--ab-color-swatch-${index})`;
+export function themeColorVar(token) {
+    return `var(--ab-color-${token})`;
 }
-export function getGraySwatchColor() {
-    return getSwatchColorVar(4);
+export function getDefaultRangeColor() {
+    return themeColorVar('range-default');
 }
-export function getSwatchColorPaletteEntries() {
-    return Array.from({ length: 20 }, (_, i) => getSwatchColorVar(i + 1));
-}
-export function getThemeSemanticColorPaletteEntries() {
-    return [
-        'var(--ab-color-destructive)',
-        'var(--ab-color-warn)',
-        'var(--ab-color-success)',
-        'var(--ab-color-info)',
-        'var(--ab-color-accent)',
-        'var(--ab-color-palette-1)',
-        'var(--ab-color-palette-2)',
-        'var(--ab-color-palette-3)',
-        'var(--ab-color-palette-4)',
-        'var(--ab-color-palette-5)',
-        'var(--ab-color-palette-6)',
-        'var(--ab-color-palette-7)',
-        'var(--ab-color-palette-8)',
-        'var(--ab-color-palette-9)',
-        'var(--ab-color-palette-10)',
-        'var(--ab-color-palette-11)',
-        'var(--ab-color-palette-12)',
-    ];
-}
-export function getDefaultColorPalette() {
-    return [...getSwatchColorPaletteEntries(), ...getThemeSemanticColorPaletteEntries()];
+export function getDefaultZeroCentredColors() {
+    return {
+        NegativeColor: themeColorVar('destructive'),
+        PositiveColor: themeColorVar('success'),
+    };
 }
 export function getEmptyConfigState() {
     return {
@@ -324,11 +303,9 @@ export function isBrowserDocumentAvailable() {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
 export const UIHelper = {
-    getSwatchColorVar,
-    getGraySwatchColor,
-    getSwatchColorPaletteEntries,
-    getThemeSemanticColorPaletteEntries,
-    getDefaultColorPalette,
+    themeColorVar,
+    getDefaultRangeColor,
+    getDefaultZeroCentredColors,
     getEmptyConfigState,
     getDescriptionForDataType,
     getPlaceholderForDataType,

package/src/Utilities/ObjectFactory.js

@@ -4,7 +4,7 @@ import { buildCronExpression } from './Helpers/Scheduling/ScheduleHelper';
 import { EMPTY_STRING } from './Constants/GeneralConstants';
 import { ALERT_DEFAULT_MESSAGE_TYPE, ALERT_DEFAULT_SHOW_POPUP, PLUS_MINUS_DEFAULT_NUDGE_VALUE, } from './Constants/ObjectDefaultConstants';
 import { Bounce, Flip, Slide, Zoom } from '../components/Toastify';
-import { getSwatchColorVar } from './Helpers/UIHelper';
+import { themeColorVar } from './Helpers/UIHelper';
 import { isPivotLayout } from './Helpers/Layouts/LayoutHelper';
 export function CreateEmptyCustomSort() {
     return { Uuid: createUuid(), Name: EMPTY_STRING, ColumnId: EMPTY_STRING, SortedValues: [] };
@@ -250,8 +250,8 @@ export function CreateDefaultStyledColumnBadge() {
     return {
         Shape: 'Rounded',
         PillStyle: {
-            BackColor: getSwatchColorVar(3),
-            ForeColor: getSwatchColorVar(1),
+            BackColor: themeColorVar('badge'),
+            ForeColor: themeColorVar('badge-foreground'),
         },
     };
 }

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/Dashboard/DashboardPopupSections.js

@@ -61,5 +61,5 @@ export const DashboardPopupSections = (props) => {
             return (_jsxs(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [_jsxs(Tag, { children: ["Tab: ", tab.Name] }), toolbarTitles.map((title, index) => (_jsx(Tag, { children: title }, `${tab.Name}-${title}-${index}`)))] }, tab.Uuid ?? tab.Name));
         }) })) : (_jsx(Tag, { children: "No Tabs Configured" }));
     const moduleButtonsSummary = moduleButtonLabels.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => (_jsx(Tag, { children: label }, label))) })) : (_jsx(Tag, { children: "No Module Buttons" }));
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && (_jsx(CollapsibleWizardCard, { ...bindCard('settings'), "data-name": "dashboard-settings", title: "Settings", help: "Control Dashboard visibility, expansion and floating mode", compactSummary: settingsToggles, compactSummaryInteractive: true, summary: settingsToggles, className: "twa:overflow-hidden", children: settingsToggles })), _jsx(CollapsibleWizardCard, { ...bindCard('pinned-toolbars'), "data-name": "dashboard-pinned-toolbars", title: "Pinned Toolbars", help: "Optional strip along the top of the grid \u2014 pin Toolbars you want always visible (e.g. Grid Filter)", compactSummary: renderCompactAccentTags(pinnedToolbarTitles, (title) => title, { emptyLabel: 'No Pinned Toolbars' }), summary: pinnedSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:overflow-hidden", children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(CollapsibleWizardCard, { ...bindCard('tabs-toolbars'), "data-name": "dashboard-tabs-toolbars", title: "Tabs & Toolbars", help: "Group Toolbars into named Tabs in the Dashboard header (independent of Pinned Toolbars)", compactSummary: renderCompactAccentTags(tabsCompactLabels, (label) => label, { emptyLabel: 'No Tabs Configured' }), summary: tabsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[280px] twa:overflow-hidden", children: _jsx(DashboardManagerUI, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "dashboard-module-buttons", title: "Module Buttons", help: "Buttons in the Dashboard header that open Module settings", compactSummary: renderCompactAccentTags(moduleButtonLabels, (label) => label, { emptyLabel: 'No Module Buttons' }), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && (_jsx(CollapsibleWizardCard, { "data-name": "dashboard-settings", title: "Settings", help: "Control Dashboard visibility, expansion and floating mode", summary: settingsToggles, collapsible: false, className: "twa:overflow-hidden" })), _jsx(CollapsibleWizardCard, { ...bindCard('pinned-toolbars'), "data-name": "dashboard-pinned-toolbars", title: "Pinned Toolbars", help: "Optional strip along the top of the grid \u2014 pin Toolbars you want always visible (e.g. Grid Filter)", compactSummary: renderCompactAccentTags(pinnedToolbarTitles, (title) => title, { emptyLabel: 'No Pinned Toolbars' }), summary: pinnedSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:overflow-hidden", children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(CollapsibleWizardCard, { ...bindCard('tabs-toolbars'), "data-name": "dashboard-tabs-toolbars", title: "Tabs & Toolbars", help: "Group Toolbars into named Tabs in the Dashboard header (independent of Pinned Toolbars)", compactSummary: renderCompactAccentTags(tabsCompactLabels, (label) => label, { emptyLabel: 'No Tabs Configured' }), summary: tabsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[280px] twa:overflow-hidden", children: _jsx(DashboardManagerUI, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "dashboard-module-buttons", title: "Module Buttons", help: "Buttons in the Dashboard header that open Module settings", compactSummary: renderCompactAccentTags(moduleButtonLabels, (label) => label, { emptyLabel: 'No Module Buttons' }), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
 };

package/src/View/Filter/ColumnFilter/ColumnFilterNew.js

@@ -32,8 +32,17 @@ export const ColumnFilterComponentNew = (props) => {
     }, [api, props.columnId]);
     const seededGroup = React.useMemo(() => foldInFilterFunctionsForEditing(props.columnId, props.qlGroup, operatorDefs), [props.columnId, resetNonce, operatorDefs]);
     const pendingGroupRef = React.useRef(null);
+    const clearAllFilters = React.useCallback(() => {
+        pendingGroupRef.current = null;
+        props.onClear();
+        setResetNonce((n) => n + 1);
+    }, [props.onClear]);
     const handlePredicateChange = (predicate) => {
         const group = unfoldInFilterFunctionsFromEditing(props.columnId, asColumnFilterGroup(predicate), operatorDefs);
+        if (group.children.length === 0) {
+            clearAllFilters();
+            return;
+        }
         if (manuallyApplyColumnFilter) {
             pendingGroupRef.current = group;
             api.eventApi.internalApi.fireColumnFilterChangedEvent({
@@ -57,14 +66,10 @@ export const ColumnFilterComponentNew = (props) => {
         pendingGroupRef.current = null;
         setResetNonce((n) => n + 1);
     };
-    const clearAllFilters = () => {
-        pendingGroupRef.current = null;
-        props.onClear();
-        setResetNonce((n) => n + 1);
-    };
-    const showClear = props.location !== 'filterForm';
-    const showActions = !props.hideActionButtons && (showClear || manuallyApplyColumnFilter);
-    return (_jsx(ColumnFilterOverlayHost, { location: props.location, children: _jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [showActions && (_jsxs(Flex, { className: cn('ab-ColumnFilter-actions twa:m-2', {
+    const clearAllOnCombinatorRow = props.location === 'columnMenu' || props.location === 'filtersToolPanel';
+    const rootHeaderEnd = React.useMemo(() => clearAllOnCombinatorRow ? (_jsx(SimpleButton, { "aria-label": "Clear All Filters", "data-name": "column-filter-clear-all", onClick: clearAllFilters, children: "Clear All" })) : undefined, [clearAllOnCombinatorRow, clearAllFilters]);
+    const showActions = !props.hideActionButtons && manuallyApplyColumnFilter;
+    return (_jsx(ColumnFilterOverlayHost, { location: props.location, children: _jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [showActions && (_jsx(Flex, { className: cn('ab-ColumnFilter-actions twa:m-2', {
                         'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
-                    }), justifyContent: "space-between", children: [showClear && (_jsx(Box, { className: "ab-ColumnFilter-action-clearall", children: _jsx(SimpleButton, { "aria-label": "Clear All Filters", onClick: clearAllFilters, children: "Clear All" }) })), manuallyApplyColumnFilter && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1", "data-name": "spacer" }), _jsx(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: _jsx(SimpleButton, { "aria-label": "Reset All", tone: "neutral", variant: "raised", onClick: resetFilter, children: "Reset" }) }), _jsx(Box, { className: "ab-ColumnFilter-action-apply", children: _jsx(SimpleButton, { "aria-label": "Apply Filter", tone: "accent", variant: "raised", onClick: applyFilter, children: "Apply" }) })] }))] })), _jsx(Box, { style: props.wrapperProps?.style, className: twMerge('ab-ColumnFilter twa:flex-1 twa:min-h-0 twa:overflow-auto twa:overflow-x-hidden twa:p-0.5 twa:gap-1 twa:flex twa:flex-col', props.location === 'filtersToolPanel' && 'ab-ColumnFilter--tool-panel', props.disabled ? 'twa:opacity-60 twa:pointer-events-none' : '', props.wrapperProps?.className), children: _jsx(QueryBuilder, { module: ModuleConstants.ColumnFilterModuleId, query: "", initialPredicate: seededGroup, onChange: noop, onPredicateChange: handlePredicateChange, getColumns: getColumns, getFields: getFields, subject: { mode: 'locked', columnId: props.columnId }, hideExpressionPreview: true, hideInlineAdd: true, hideAddGroup: true, hideLockedSubject: true, hideDragHandles: true, layout: getColumnFilterQueryBuilderLayout(props.location) }, `${props.columnId}:${resetNonce}`) })] }) }));
+                    }), justifyContent: "space-between", children: manuallyApplyColumnFilter && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1", "data-name": "spacer" }), _jsx(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: _jsx(SimpleButton, { "aria-label": "Reset All", tone: "neutral", variant: "raised", onClick: resetFilter, children: "Reset" }) }), _jsx(Box, { className: "ab-ColumnFilter-action-apply", children: _jsx(SimpleButton, { "aria-label": "Apply Filter", tone: "accent", variant: "raised", onClick: applyFilter, children: "Apply" }) })] })) })), _jsx(Box, { style: props.wrapperProps?.style, className: twMerge('ab-ColumnFilter twa:flex-1 twa:min-h-0 twa:overflow-auto twa:overflow-x-hidden twa:p-0.5 twa:gap-1 twa:flex twa:flex-col', props.location === 'filtersToolPanel' && 'ab-ColumnFilter--tool-panel', props.disabled ? 'twa:opacity-60 twa:pointer-events-none' : '', props.wrapperProps?.className), children: _jsx(QueryBuilder, { module: ModuleConstants.ColumnFilterModuleId, query: "", initialPredicate: seededGroup, onChange: noop, onPredicateChange: handlePredicateChange, getColumns: getColumns, getFields: getFields, subject: { mode: 'locked', columnId: props.columnId }, hideExpressionPreview: true, hideInlineAdd: true, hideAddGroup: true, hideLockedSubject: true, hideDragHandles: true, layout: getColumnFilterQueryBuilderLayout(props.location), rootHeaderEnd: rootHeaderEnd }, `${props.columnId}:${resetNonce}`) })] }) }));
 };

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;
     }