@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/View/Components/PreviewResultsPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
@@ -41,26 +42,20 @@ export class PreviewResultsPanel extends React.Component {
                 Id: index,
                 InitialValue: previewResult.initialValue,
                 ComputedValue: previewResult.computedValue,
-                ValidInfo: previewResult.validationRules.length > 0 ? (React.createElement(React.Fragment, null, this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })))) : (React.createElement(React.Fragment, null,
-                    ' ',
-                    React.createElement(CheckIcon, { style: { color: successColor, fill: 'currentColor' } }))),
+                ValidInfo: previewResult.validationRules.length > 0 ? (_jsx(_Fragment, { children: this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (_jsx(AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })) })) : (_jsxs(_Fragment, { children: [' ', _jsx(CheckIcon, { style: { color: successColor, fill: 'currentColor' } })] })),
             };
         });
         const tableHeight = HEADER_HEIGHT + dataSource.length * ROW_HEIGHT;
         const tableDOMProps = {
             style: { height: tableHeight, maxWidth: 500 },
         };
-        return this.props.showPanel ? (React.createElement(Card, { className: "twa:overflow-hidden", style: { maxWidth: 500 }, shadow: false },
-            React.createElement(Card.Title, null, previewHeader),
-            React.createElement(Card.Body, null,
-                React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
-                    React.createElement(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }))))) : null;
+        return this.props.showPanel ? (_jsxs(Card, { className: "twa:flex-1 twa:overflow-hidden twa:min-w-70 twa:min-h-50", shadow: false, children: [_jsx(Card.Title, { children: previewHeader }), _jsx(Card.Body, { children: _jsx(DataSource, { data: dataSource, primaryKey: "Id", children: _jsx(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }) }) })] })) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();
         let returnString = [];
         for (let alertDefinition of alertDefinitions) {
-            let expressionDescription = alertDefinition.Rule.BooleanExpression
+            let expressionDescription = 'Rule' in alertDefinition && alertDefinition.Rule.BooleanExpression
                 ? ' when ' + alertDefinition.Rule.BooleanExpression
                 : '';
             returnString.push(validationService.createValidationDescription(alertDefinition) + expressionDescription);

package/src/View/Components/RangesComponent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, GradientZeroCentredColors, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
 import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -9,7 +9,6 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     onRangeValueTypeChange: (rangeValueType: NumericStyledColumn['RangeValueType']) => void;
     scope: ColumnScope;
     api: AdaptableApi;
-    showRangeDirection: boolean;
     updateRanges: (ranges: CellColorRange[]) => void;
     updateColumnComparison: (columnComparison?: ColumnComparison) => void;
     minMaxRangeValues: {
@@ -17,15 +16,42 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
         max: number;
     };
     disabled?: boolean;
+    /**
+     * When true, the user may delete every band so `ranges` becomes `[]`.
+     * Range Bar treats bands as optional; Gradient / Percent Bar / Bullet Chart
+     * keep at least one row by default.
+     */
+    allowEmptyRanges?: boolean;
+    /**
+     * When true, the "Column Comparison" tab is omitted entirely. Used by Bullet
+     * Chart and Range Bar, where the bands ARE the chart's qualitative scale and
+     * Column Comparison doesn't make sense in the same way it does for Percent
+     * Bar / Gradient. The Number Range / Percentage Range tabs are still shown.
+     */
+    hideColumnComparison?: boolean;
+    /**
+     * When true, expose a third tab "Zero Centred Ranges" (Gradient only). Requires
+     * `onApplyZeroCentred` and optional `zeroCentred` for the current colours.
+     */
+    showZeroCentredTab?: boolean;
+    zeroCentred?: GradientZeroCentredColors;
+    onApplyZeroCentred?: (zc: GradientZeroCentredColors) => void;
+    /**
+     * When true, render a per-range "Reverse Gradient" toggle. Only meaningful
+     * for Gradient Style (the renderer flips the alpha ramp within the band so
+     * the lower the value, the darker the colour). Percent Bar / Bullet Chart
+     * leave this off.
+     */
+    showRangeDirection?: boolean;
 }
 export interface RangesComponentState {
-    rangesType: 'Standard' | 'ColumnComparison';
+    rangesType: 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
     render(): React.JSX.Element;
-    private onRangesTypeChanged;
-    private handleRangeValueTypeChange;
+    componentDidUpdate(prevProps: RangesComponentProps): void;
+    private handleRangesModeTab;
     changeRangeMin(index: number, value: number): void;
     changeRangeMax(index: number, value: number): void;
     changeRangeColor(index: number, value: string): void;

package/src/View/Components/RangesComponent.js

@@ -1,3 +1,4 @@
+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 clamp from '../../Utilities/utils/clamp';
@@ -5,17 +6,37 @@ import { CheckBox } from '../../components/CheckBox';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';
 import SimpleButton from '../../components/SimpleButton';
-import { getHexForName, GRAY, DARK_GREEN } from '../UIHelper';
+import { getGraySwatchColor } from '../UIHelper';
 import { ColumnSelector } from './Selectors/ColumnSelector';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
 import { Box, Flex } from '../../components/Flex';
+const DEFAULT_ZERO_CENTRED_COLORS = {
+    NegativeColor: 'rgba(220, 53, 69, 0.55)',
+    PositiveColor: 'rgba(40, 167, 69, 0.55)',
+};
+/**
+ * Decide which of the four range tabs should be active given the current props.
+ *
+ * Precedence:
+ *  1. `columnComparison` set       → Column Comparison tab
+ *  2. Zero Centred set + supported → Zero Centred tab
+ *  3. `rangeValueType === 'Percentage'` → Percentage Range tab
+ *  4. otherwise                    → Number Range tab (default for new styles)
+ */
+function deriveInitialRangesType(props) {
+    if (props.columnComparison) {
+        return 'ColumnComparison';
+    }
+    if (props.showZeroCentredTab && props.zeroCentred) {
+        return 'ZeroCentred';
+    }
+    return props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange';
+}
 export class RangesComponent extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {
-            rangesType: this.props.columnComparison ? 'ColumnComparison' : 'Standard',
-        };
+        this.state = { rangesType: deriveInitialRangesType(props) };
     }
     render() {
         let comparisonMinValueNumber = this.props.columnComparison != null &&
@@ -41,87 +62,92 @@ export class RangesComponent extends React.Component {
         let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
             ? this.props.columnComparison.Color
             : undefined;
-        const isRangeValueTypeNumber = (this.props.rangeValueType ?? 'Number') === 'Number';
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Flex, { flexDirection: "row" },
-                React.createElement(CheckBox, { className: "twa:mt-3", checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
-            this.state.rangesType == 'Standard' && (React.createElement(Tabs, { autoFocus: false, className: "twa:mt-2" },
-                React.createElement(Tabs.Tab, null, "Ranges"),
-                React.createElement(Tabs.Content, null,
-                    React.createElement(Flex, { alignItems: "center", className: "twa:mb-2" },
-                        React.createElement(Box, { className: "twa:mr-3" }, "Range Type"),
-                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, className: "twa:mr-2" }, "Number"),
-                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")),
-                    this.props.ranges?.map((range, index, list) => (React.createElement(Flex, { key: index, alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range" },
-                        React.createElement(Flex, { flexDirection: "column" },
-                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled }, "Col Min")),
-                            React.createElement(NumberInput, { disabled: this.props.disabled ||
-                                    range.Min === 'Col-Min' ||
-                                    (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
-                                    this.changeRangeMin(index, value);
-                                }, className: "twa:mr-2" })),
-                        React.createElement(Flex, { flexDirection: "column" },
-                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled }, "Col Max")),
-                            React.createElement(NumberInput, { value: range.Max, disabled: this.props.disabled ||
-                                    range.Max === 'Col-Max' ||
-                                    (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
-                                    this.changeRangeMax(index, value);
-                                }, className: "twa:mr-2" })),
-                        React.createElement(Flex, { alignItems: "center", className: "twa:h-full" },
-                            React.createElement(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+        // Number / Percentage is now expressed at the tab level (Number Range tab
+        // vs Percentage Range tab) instead of an inline radio. The inner content
+        // is shared between the two range tabs and parameterised on this flag.
+        const isRangeValueTypeNumber = this.state.rangesType === 'NumberRange';
+        const renderRangesContent = () => (_jsxs(_Fragment, { children: [this.props.ranges?.map((range, index, list) => (_jsxs(Flex, { alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range", children: [_jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && (_jsx(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Col Min" })), _jsx(NumberInput, { disabled: this.props.disabled ||
+                                        range.Min === 'Col-Min' ||
+                                        (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
+                                        this.changeRangeMin(index, value);
+                                    }, className: "twa:mr-2" })] }), _jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && (_jsx(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled, children: "Col Max" })), _jsx(NumberInput, { value: range.Max, disabled: this.props.disabled ||
+                                        range.Max === 'Col-Max' ||
+                                        (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
+                                        this.changeRangeMax(index, value);
+                                    }, className: "twa:mr-2" })] }), _jsx(Flex, { alignItems: "center", className: "twa:h-full", children: _jsx(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
-                                }, className: "twa:mr-2 twa:h-[33px]" })),
-                        this.props.showRangeDirection && (React.createElement(CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2" }, "Reverse Gradient")),
-                        React.createElement(SimpleButton, { className: "twa:ml-2 twa:mb-1", icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
-                    React.createElement("div", null,
-                        React.createElement(SimpleButton, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
-            this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs, { autoFocus: false, className: "twa:mt-2" },
-                React.createElement(Tabs.Tab, null, "Column Comparison"),
-                React.createElement(Tabs.Content, null,
-                    React.createElement(Flex, { flexDirection: "column", key: 'cc', "data-name": "percent-bar-column-comparison" },
-                        React.createElement(Box, { className: "twa:p-2 twa:text-2" },
-                            "Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a",
-                            ' ',
-                            this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
-                            " for the Bar."),
-                        React.createElement(FormLayout, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
-                            React.createElement(FormRow, { label: "Min Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
-                                        this.changeColumnComparisonMinValue(value);
-                                    } }), or: "OR", second: React.createElement(Box, { className: "twa:max-w-[15rem]" },
-                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
-                                            this.onMinColumnSelectedChanged(columnId);
-                                        } })) }),
-                            ' ',
-                            React.createElement(FormRow, { label: "Max Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
-                                        this.changeColumnComparisonMaxValue(value);
-                                    } }), or: "OR", second: React.createElement(Box, { className: "twa:max-w-[15rem]" },
-                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
-                            React.createElement(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
-                                        this.changeColumnComparisonColor(color);
-                                    } }) }))))))));
-    }
-    onRangesTypeChanged(checked) {
-        if (checked) {
-            let columnComparison = {
-                Color: getHexForName(DARK_GREEN),
+                                }, className: "twa:mr-2 twa:h-[33px]" }) }), this.props.showRangeDirection && (_jsx(CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2", children: "Reverse Gradient" })), _jsx(SimpleButton, { className: "twa:ml-2 twa:mb-1", icon: "delete", disabled: this.props.disabled ||
+                                (!this.props.allowEmptyRanges &&
+                                    !!this.props.ranges &&
+                                    this.props.ranges.length === 1), onClick: () => this.removeRange(index) })] }, index))), _jsx("div", { children: _jsx(SimpleButton, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange(), children: "Add New Range" }) })] }));
+        const renderZeroCentredContent = () => {
+            const zc = this.props.zeroCentred ?? DEFAULT_ZERO_CENTRED_COLORS;
+            const apply = (next) => this.props.onApplyZeroCentred?.(next);
+            return (_jsx(Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: _jsxs(FormLayout, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [_jsx(FormRow, { label: "Negative (Col-Min \u2192 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 \u2192 Col-Max):", 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 }) }) }) })] }) }));
+        };
+        const renderColumnComparisonContent = () => (_jsxs(Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [_jsxs(Box, { className: "twa:p-2 twa:text-2", children: ["Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a ", this.props.api.internalApi.getCorrectEnglishVariant('Colour'), " for the Bar."] }), _jsxs(FormLayout, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'], children: [_jsx(FormRow, { label: "Min Value:", first: _jsx(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
+                                    this.changeColumnComparisonMinValue(value);
+                                } }), or: "OR", second: _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(ColumnSelector, { disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
+                                        this.onMinColumnSelectedChanged(columnId);
+                                    } }) }) }), ' ', _jsx(FormRow, { label: "Max Value:", first: _jsx(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
+                                    this.changeColumnComparisonMaxValue(value);
+                                } }), or: "OR", second: _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(ColumnSelector, { disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) }) }) }), _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) => {
+                                    this.changeColumnComparisonColor(color);
+                                } }) })] })] }, 'cc'));
+        const tabFlex = { flex: 1 };
+        const radioCls = 'twa:m-0 twa:align-baseline';
+        const renderTabRadio = (label, value) => (_jsx(Radio, { tabIndex: -1, className: radioCls, checked: this.state.rangesType === value, children: label }));
+        return (_jsxs(Tabs, { autoFocus: false, className: "twa:mt-2", value: this.state.rangesType, onValueChange: (v) => this.handleRangesModeTab(v), children: [_jsx(Tabs.Tab, { value: "NumberRange", style: tabFlex, children: renderTabRadio('Number Range', 'NumberRange') }), _jsx(Tabs.Tab, { value: "PercentageRange", style: tabFlex, children: renderTabRadio('Percentage Range', 'PercentageRange') }), this.props.showZeroCentredTab && (_jsx(Tabs.Tab, { value: "ZeroCentred", style: tabFlex, children: renderTabRadio('Zero Centred Range', 'ZeroCentred') })), !this.props.hideColumnComparison && (_jsx(Tabs.Tab, { value: "ColumnComparison", style: tabFlex, children: renderTabRadio('Column Comparison', 'ColumnComparison') })), _jsx(Tabs.Content, { value: "NumberRange", children: renderRangesContent() }), _jsx(Tabs.Content, { value: "PercentageRange", children: renderRangesContent() }), this.props.showZeroCentredTab && (_jsx(Tabs.Content, { value: "ZeroCentred", children: renderZeroCentredContent() })), !this.props.hideColumnComparison && (_jsx(Tabs.Content, { value: "ColumnComparison", children: renderColumnComparisonContent() }))] }));
+    }
+    componentDidUpdate(prevProps) {
+        const wasComparison = !!prevProps.columnComparison;
+        const isComparison = !!this.props.columnComparison;
+        const wasZc = !!prevProps.zeroCentred;
+        const isZc = !!this.props.zeroCentred;
+        // External mutations to columnComparison drive the tab.
+        if (wasComparison !== isComparison) {
+            this.setState({ rangesType: deriveInitialRangesType(this.props) });
+            return;
+        }
+        // External mutations to zeroCentred drive the tab (when not in CC mode).
+        if (!isComparison && wasZc !== isZc) {
+            this.setState({ rangesType: deriveInitialRangesType(this.props) });
+            return;
+        }
+        // External flips of RangeValueType while the user is sitting on a range
+        // tab — keep the active tab in sync. We deliberately do NOT react when the
+        // user is on Zero Centred / Column Comparison tabs (parent code can still
+        // set RangeValueType: 'Number' as part of those flows).
+        if ((this.state.rangesType === 'NumberRange' ||
+            this.state.rangesType === 'PercentageRange') &&
+            prevProps.rangeValueType !== this.props.rangeValueType) {
+            this.setState({
+                rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
+            });
+        }
+    }
+    handleRangesModeTab(value) {
+        if (value === this.state.rangesType) {
+            return;
+        }
+        this.setState({ rangesType: value });
+        if (value === 'ColumnComparison') {
+            const columnComparison = {
+                Color: getGraySwatchColor(),
                 MinValue: undefined,
                 MaxValue: undefined,
             };
-            this.setState({
-                rangesType: 'ColumnComparison',
-            });
             this.props.updateColumnComparison(columnComparison);
+            return;
         }
-        else {
-            const ranges = this.props.api.columnScopeApi.createCellColorRangesForScope(this.props.scope);
-            this.setState({
-                rangesType: 'Standard',
-            });
-            this.props.updateRanges(ranges);
+        if (value === 'ZeroCentred') {
+            this.props.onApplyZeroCentred?.(this.props.zeroCentred ?? DEFAULT_ZERO_CENTRED_COLORS);
+            return;
         }
-    }
-    handleRangeValueTypeChange(rangeValueType) {
-        this.props.onRangeValueTypeChange(rangeValueType);
+        // Switching to a range tab — let the parent reseed CellRanges + the right
+        // RangeValueType (and clear ColumnComparison / ZeroCentred). Tab switches
+        // wipe any previously configured ranges by design.
+        this.props.onRangeValueTypeChange(value === 'PercentageRange' ? 'Percentage' : 'Number');
     }
     changeRangeMin(index, value) {
         const { ranges } = this.props;
@@ -153,8 +179,8 @@ export class RangesComponent extends React.Component {
         this.props.updateRanges(ranges);
     }
     changeRangeDirectionUp(index, checked) {
-        const { ranges } = this.props;
-        ranges[index].ReverseGradient = checked;
+        const ranges = [...this.props.ranges];
+        ranges[index] = { ...ranges[index], ReverseGradient: checked };
         this.props.updateRanges(ranges);
     }
     removeRange(index) {
@@ -196,7 +222,35 @@ export class RangesComponent extends React.Component {
         this.props.updateRanges(newRanges);
     }
     addRange() {
-        const lastRange = this.props.ranges[this.props.ranges.length - 1];
+        // Most callers seed `ranges` with at least one entry, but Range Bar
+        // legitimately leaves `CellRanges` undefined (bands are optional). Handle
+        // both cases so the "Add New Range" button always works.
+        //
+        // When starting from empty we seed TWO bands split at the midpoint — a
+        // single full-width band would just look like a back colour and wouldn't
+        // communicate the "qualitative scale" idea bands are intended for.
+        const existingRanges = this.props.ranges ?? [];
+        if (existingRanges.length === 0) {
+            const isPercentage = this.props.rangeValueType === 'Percentage';
+            const min = isPercentage ? 0 : this.props.minMaxRangeValues?.min ?? 0;
+            const max = isPercentage ? 100 : this.props.minMaxRangeValues?.max ?? 100;
+            const mid = Math.round((min + max) / 2);
+            const seedRanges = [
+                {
+                    Min: isPercentage ? 0 : 'Col-Min',
+                    Max: mid,
+                    Color: 'rgba(128, 128, 128, 0.25)',
+                },
+                {
+                    Min: mid,
+                    Max: isPercentage ? 100 : 'Col-Max',
+                    Color: 'rgba(128, 128, 128, 0.55)',
+                },
+            ];
+            this.props.updateRanges(seedRanges);
+            return;
+        }
+        const lastRange = existingRanges[existingRanges.length - 1];
         let previousRange = lastRange;
         let Min = null;
         if (lastRange.Max === 'Col-Max') {
@@ -212,9 +266,9 @@ export class RangesComponent extends React.Component {
         const newRange = {
             Min,
             Max: lastRange.Max,
-            Color: getHexForName(GRAY),
+            Color: getGraySwatchColor(),
         };
-        const newRanges = [...this.props.ranges.slice(0, -1), previousRange, newRange];
+        const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
     }
     changeColumnComparisonMinValue(value) {

package/src/View/Components/ReorderDraggable/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
 import { Icon } from '../../../components/icons';
 import { Box, Flex } from '../../../components/Flex';
@@ -6,24 +6,16 @@ import clsx from 'clsx';
 export function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
-    return (React.createElement(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
-        React.createElement(DragDropProvider, null,
-            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column" },
-                React.createElement(DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    return (_jsx(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column", children: _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column", children: _jsx(DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                         proxyElement.classList.add('twa:shadow-md');
                     }, onDrop: (sortedIndexes) => {
                         onChange(sortedIndexes.map((i) => order[i]));
-                    } }, (listDomProps) => (React.createElement("div", { ...listDomProps }, order.map((option, index) => {
-                    const identifier = toIdentifier(option);
-                    const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
-                    return (React.createElement(DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps, itemContext) => {
-                        const { onPointerDown, ...restDomProps } = itemDomProps;
-                        return (React.createElement(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx(`${baseClassName}__option`, index ? 'twa:mt-1' : 'twa:mt-0', 'twa:bg-primary twa:p-2', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e) },
-                            React.createElement(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
-                                reorderable && !disabled ? (React.createElement(Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
-                                    React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Box, { className: "twa:mr-3" },
-                                    React.createElement(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
-                                props.renderOption(option, index))));
-                    }));
-                }))))))));
+                    }, children: (listDomProps) => (_jsx("div", { ...listDomProps, children: order.map((option, index) => {
+                            const identifier = toIdentifier(option);
+                            const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
+                            return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps, itemContext) => {
+                                    const { onPointerDown, ...restDomProps } = itemDomProps;
+                                    return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx(`${baseClassName}__option`, index ? 'twa:mt-1' : 'twa:mt-0', 'twa:bg-primary twa:p-2', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e), children: _jsxs(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : (_jsx(Box, { className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
+                                } }, identifier));
+                        }) })) }) }) }) }));
 }

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useCallback } from 'react';
-import DropdownButton from '../../../components/DropdownButton';
 import UIHelper from '../../UIHelper';
 import AdaptableInput from '../AdaptableInput';
 import { PermittedValuesSelector } from './PermittedValuesSelector';
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { Box, Flex } from '../../../components/Flex';
 import { Icon } from '../../../components/icons';
 import { InputGroup } from '../../../components/InputGroup';
+import { NewDropdownButton } from '../../../components/NewDropdownButton';
 export const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = useAdaptable();
@@ -18,8 +19,7 @@ export const BulkUpdateValueSelector = (props) => {
     // TODO = this seems to be called whenever we edit a cell
     // which is then triggering a get all values
     // not sure that we need to
-    const permittedValueSelector = (React.createElement(Box, { className: 'twa:flex-1' },
-        React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
+    const permittedValueSelector = (_jsx(Box, { className: 'twa:flex-1', children: _jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);
                 }
@@ -34,24 +34,20 @@ export const BulkUpdateValueSelector = (props) => {
                 props.selectedGridCells?.[0]?.primaryKeyValue,
             ]), onChange: (value) => {
                 props.onColumnValueChange(value || null);
-            } })));
-    const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
+            } }) }));
+    const input = (_jsx(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
             ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
             ? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
             : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
-    return (React.createElement(Flex, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
-        React.createElement(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full" },
-            React.createElement(DropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, columns: ['label'], variant: "outlined", tone: "neutral", items: [
-                    { label: 'New', icon: React.createElement(Icon, { name: "edit" }), onClick: () => setValueType('new') },
-                    {
-                        label: 'Existing',
-                        icon: React.createElement(Icon, { name: "grid" }),
-                        onClick: () => setValueType('existing'),
-                    },
-                ] },
-                React.createElement(React.Fragment, null, valueType === 'existing' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" }))),
-            valueType === 'new' ? input : permittedValueSelector))) : (permittedValueSelector)));
+    return (_jsx(Flex, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
+                            { label: 'New', icon: _jsx(Icon, { name: "edit" }), onClick: () => setValueType('new') },
+                            {
+                                label: 'Existing',
+                                icon: _jsx(Icon, { name: "grid" }),
+                                onClick: () => setValueType('existing'),
+                            },
+                        ], children: _jsx(_Fragment, { children: valueType === 'existing' ? _jsx(Icon, { name: "grid" }) : _jsx(Icon, { name: "edit" }) }) }), valueType === 'new' ? input : permittedValueSelector] }) })) : (permittedValueSelector) }));
 };

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { SelectProps } from '../../../components/Select';
 import { AdaptableColumn } from '../../../types';
 export type ColumnSelectorProps<IsMulti extends boolean = false> = {
+    className?: string;
     type?: AdaptableColumn['dataType'];
     isMulti?: IsMulti;
     disabled?: boolean;
-    menuPosition?: SelectProps<any>['menuPosition'];
     filterColumn?: (column: AdaptableColumn) => boolean;
     value?: IsMulti extends true ? string[] : string;
     onChange: (column: IsMulti extends true ? string[] : string) => void;

package/src/View/Components/Selectors/ColumnSelector.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
+import { MultiCombobox, SingleCombobox, } from '../../../components/Combobox';
 export const ColumnSelector = function (props) {
     const { api } = useAdaptable();
     const columns = React.useMemo(() => {
@@ -9,12 +10,11 @@ export const ColumnSelector = function (props) {
     const getColumn = (columnId) => columns.find((c) => c.columnId === columnId);
     const options = columns
         .map((column) => {
-        let label = column.friendlyName ?? column.columnId;
-        if (props.renderOption) {
-            label = props.renderOption(column);
-        }
+        const textLabel = column.friendlyName ?? column.columnId;
+        const label = props.renderOption ? props.renderOption(column) : textLabel;
         return {
             label,
+            textLabel,
             value: column.columnId,
         };
     })
@@ -24,7 +24,21 @@ export const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
+    const comboBoxProps = {
+        ['data-name']: 'column-selector',
+        disabled: props.disabled,
+        className: props.className,
+        virtualized: true,
+        items: options,
+        showClear: false,
+        onValueChange: (colId) => {
             props.onChange(colId);
-        }, options: options }));
+        },
+        value: props.value,
+        placeholder: props.placeholder ?? 'Select Column',
+    };
+    if (props.isMulti) {
+        return _jsx(MultiCombobox, { ...comboBoxProps });
+    }
+    return _jsx(SingleCombobox, { ...comboBoxProps });
 };

package/src/View/Components/Selectors/FieldSelector.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { SelectProps } from '../../../components/Select';
 import { AdaptableColumnDataType } from '../../../types';
 interface FieldSelectorProps {
     value: string;
     onChange: (fieldExp: string) => void;
     type?: AdaptableColumnDataType;
     disabled?: boolean;
-    menuPosition?: SelectProps<any>['menuPosition'];
     placeholder?: string;
 }
 export declare const FieldSelector: React.FunctionComponent<FieldSelectorProps>;

package/src/View/Components/Selectors/FieldSelector.js

@@ -1,17 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
+import { SingleCombobox } from '../../../components/Combobox';
 export const FieldSelector = (props) => {
     const { api } = useAdaptable();
     const fields = React.useMemo(() => {
         return api.expressionApi.internalApi.getFieldsOfType(props.type);
-    }, []);
+    }, [props.type, api.expressionApi.internalApi]);
     const options = fields.map((field) => ({
         label: field.label ?? field.name,
         value: field.name,
     }));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onChange: (fieldValue) => {
+    return (_jsx(_Fragment, { children: _jsx(SingleCombobox, { "data-name": "column-selector", disabled: props.disabled, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onValueChange: (fieldValue) => {
                 props.onChange(fieldValue);
-            }, options: options })));
+            }, items: options }) }));
 };

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SelectProps } from '../../../components/Select';
 import { InFilterValue } from '../../../AdaptableOptions/FilterOptions';
 export type ValueType = number | string | Date;
 interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
@@ -14,7 +13,6 @@ interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends
     className?: string;
     disabled?: boolean;
     placeholder?: string;
-    size?: SelectProps<Value, IsMulti>['size'];
     loadValues?: (options: {
         currentSearchValue: string;
     }) => Promise<InFilterValue[]>;