@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,7 +11,7 @@ import { PanelWithImage } from '../../Panels/PanelWithImage';
 import { getMiddlePosition, getWindowPopupSize } from '../Utilities';
 import { WINDOW_SHOW_TRANSPOSED_VIEW, windowFactory } from './windowFactory';
 const NoopComponent = () => {
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };
 export const CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
 /**
@@ -44,46 +45,45 @@ export const WindowPopups = () => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const windowItems = useSelector((state) => state.Popup.WindowPopup.PopupList);
-    return (React.createElement(React.Fragment, null, windowItems?.map((windowItem) => {
-        let Component = windowFactory[windowItem.FactoryId] ?? null;
-        const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
-        const handleDismiss = () => {
-            dispatch(PopupHideWindow(windowItem.Id));
-        };
-        const size = windowModalSettings?.[windowItem.Id]?.size ??
-            windowItem?.PopupProps?.size ??
-            getWindowPopupSize();
-        const position = windowModalSettings?.[windowItem.Id]?.position ??
-            windowItem?.PopupProps?.position ??
-            getMiddlePosition(size);
-        let componentNode = null;
-        if (!Component &&
-            (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
-            componentNode = (React.createElement(ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
-        }
-        else {
-            Component = Component ?? NoopComponent;
-            componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
-        }
-        // Transposed View: portal into custom container if configured
-        if (windowItem.FactoryId === WINDOW_SHOW_TRANSPOSED_VIEW) {
-            const transposedContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
-            if (transposedContainer) {
-                return (React.createElement(ContainerPortal, { key: windowItem.Id, container: transposedContainer, onContainerRemoved: handleDismiss }, componentNode));
+    return (_jsx(_Fragment, { children: windowItems?.map((windowItem) => {
+            let Component = windowFactory[windowItem.FactoryId] ?? null;
+            const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
+            const handleDismiss = () => {
+                dispatch(PopupHideWindow(windowItem.Id));
+            };
+            const size = windowModalSettings?.[windowItem.Id]?.size ??
+                windowItem?.PopupProps?.size ??
+                getWindowPopupSize();
+            const position = windowModalSettings?.[windowItem.Id]?.position ??
+                windowItem?.PopupProps?.position ??
+                getMiddlePosition(size);
+            let componentNode = null;
+            if (!Component &&
+                (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
+                componentNode = (_jsx(ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
             }
-        }
-        return (React.createElement(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
-                ...windowModalProps,
-                onChange: (settings) => {
-                    setWindowModalSettings((settingsMap) => ({
-                        ...settingsMap,
-                        [windowItem.Id]: settings,
-                    }));
-                },
-                handleSelector: '.ab-Window-Modal .ab-Panel__header',
-                size: size,
-                position: position,
-            }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
-    })));
+            else {
+                Component = Component ?? NoopComponent;
+                componentNode = (_jsx(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
+            }
+            // Transposed View: portal into custom container if configured
+            if (windowItem.FactoryId === WINDOW_SHOW_TRANSPOSED_VIEW) {
+                const transposedContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
+                if (transposedContainer) {
+                    return (_jsx(ContainerPortal, { container: transposedContainer, onContainerRemoved: handleDismiss, children: componentNode }, windowItem.Id));
+                }
+            }
+            return (_jsx(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", windowModal: true, windowModalProps: {
+                    ...windowModalProps,
+                    onChange: (settings) => {
+                        setWindowModalSettings((settingsMap) => ({
+                            ...settingsMap,
+                            [windowItem.Id]: settings,
+                        }));
+                    },
+                    handleSelector: '.ab-Window-Modal .ab-Panel__header',
+                    size: size,
+                    position: position,
+                }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true, children: _jsx(PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary", children: componentNode }) }, windowItem.Id));
+        }) }));
 };

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,6 +1,5 @@
 import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup';
 import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
-import { ThemeEditorWindow } from '../../../Theme/ThemeEditorWindow';
 import { TransposedPopup } from '../../../Layout/TransposedPopup';
 import { ColumnFilterWindow } from '../../ColumnFilter/ColumnFilterWindow';
 export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
@@ -11,7 +10,6 @@ export const COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 export const windowFactory = {
     [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
     [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
-    [SHOW_THEME_EDITOR]: ThemeEditorWindow,
     [WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup,
     [COLUMN_FILTER_WINDOW]: ColumnFilterWindow,
 };

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -1,15 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { isAdaptableSystemIcon } from '../../../components/Icon';
 import HelpBlock from '../../../components/HelpBlock';
 import { Tag } from '../../../components/Tag';
 import AdaptableInput from '../AdaptableInput';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
-import { Select } from '../../../components/Select';
 import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
 import { useAdaptable } from '../../AdaptableContext';
 import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
 import { useEffect } from 'react';
 import { Box, Flex } from '../../../components/Flex';
+import { SingleSelect } from '../../../components/NewSelect';
 export const PredicateEditor = (props) => {
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
@@ -36,10 +37,10 @@ export const PredicateEditor = (props) => {
     let icon = null;
     if (currentPredicateDef) {
         if (isAdaptableSystemIcon(currentPredicateDef?.icon)) {
-            icon = React.createElement(AdaptableIconComponent, { icon: currentPredicateDef.icon });
+            icon = _jsx(AdaptableIconComponent, { icon: currentPredicateDef.icon });
         }
         else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
-            icon = React.createElement("span", null, currentPredicateDef.icon.text);
+            icon = _jsx("span", { children: currentPredicateDef.icon.text });
         }
     }
     const adaptable = useAdaptable();
@@ -64,25 +65,15 @@ export const PredicateEditor = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
-    return (React.createElement(Box, { className: baseClassName },
-        React.createElement(Flex, { alignItems: "center", className: "twa:justify-stretch" },
-            icon && React.createElement(Tag, { className: "twa:mr-2" }, icon),
-            React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
-                    const option = predicateDefsOptions.find((x) => x.value === value);
-                    props.onChange({
-                        ...props.predicate,
-                        PredicateId: option?.value,
-                        Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
-                    });
-                } })),
-        React.createElement(Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
-            index > 0 && React.createElement(HelpBlock, { className: "twa:m-2" }, "AND"),
-            React.createElement(Flex, { key: index, className: "twa:flex-1", flexDirection: "column" },
-                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
-        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { className: "twa:mt-2" },
-            React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
-                    onMenuOpen,
-                    onInputChange,
-                    skipDefaultFiltering: skipDefaultSearch,
-                }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
+    return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onValueChange: (value) => {
+                            const option = predicateDefsOptions.find((x) => x.value === value);
+                            props.onChange({
+                                ...props.predicate,
+                                PredicateId: option?.value,
+                                Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
+                            });
+                        } })] }), _jsx(Flex, { children: currentPredicateDef?.inputs?.map((predicateDefInput, index) => (_jsxs(_Fragment, { children: [index > 0 && _jsx(HelpBlock, { className: "twa:m-2", children: "AND" }), _jsx(Flex, { className: "twa:flex-1", flexDirection: "column", children: _jsx(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) }) }, index)] }))) }), adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (_jsx(Box, { className: "twa:mt-2", children: _jsx(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, onMenuOpen: onMenuOpen, selectProps: {
+                        onInputValueChange: onInputChange,
+                        filter: skipDefaultSearch ? null : undefined,
+                    }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange }) }))] }));
 };

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) {