@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

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

@@ -1,57 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuItems = void 0;
+exports.getSettingsPanelNavigationItems = exports.useMenuItems = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const resolveSettingsPanelNavigation_1 = require("../../../../Utilities/Helpers/resolveSettingsPanelNavigation");
+const settingsPanelNavigationTypes_1 = require("./settingsPanelNavigationTypes");
 const useMenuItems = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const allMenuItems = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanelModuleEntries);
     return React.useMemo(() => {
-        let navigationItems = settingsPanelOptions?.navigation?.items;
-        if (!navigationItems) {
-            navigationItems = [...DefaultSettingsPanel_1.DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS];
-            if (settingsPanelOptions.customSettingsPanels) {
-                navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
-            }
-        }
+        const navigation = (0, resolveSettingsPanelNavigation_1.resolveSettingsPanelNavigation)(adaptable.api, settingsPanelOptions);
         const visibleItems = allMenuItems.filter((item) => item.category !== 'General' &&
             item.category !== 'CustomSettingsPanel' &&
             item.category !== 'Group' &&
             !GeneralConstants_1.STANDALONE_MODULE_POPUPS.includes(item.category) &&
             item.isVisible);
-        let navItems = navigationItems
-            .map((moduleName) => {
-            if (moduleName === '-') {
-                return moduleName;
-            }
+        const resolveNavigationItem = (moduleName) => {
             const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find?.((panel) => panel.name === moduleName);
-            let customPanelMenuItem = null;
             if (customSettingsPanel) {
-                // @ts-ignore
-                customPanelMenuItem = {
+                // @ts-ignore custom settings panel menu items are not part of the standard menu name union
+                return {
                     category: 'CustomSettingsPanel',
                     label: customSettingsPanel.name,
                     isVisible: true,
                     reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name),
                 };
             }
-            return customPanelMenuItem || visibleItems.find((item) => item.category === moduleName);
-        })
-            .filter(Boolean);
-        // remove sequential '-' items
-        navItems = navItems.filter((item, index) => {
-            if (item === '-' && navItems[index - 1] === '-') {
-                return false;
+            return visibleItems.find((item) => item.category === moduleName) ?? null;
+        };
+        const entries = [];
+        for (const group of navigation.groups) {
+            const groupMenuItems = group.items
+                .map((moduleName) => resolveNavigationItem(moduleName))
+                .filter(Boolean);
+            if (!groupMenuItems.length) {
+                continue;
             }
-            return true;
-        });
-        return navItems;
-    }, [allMenuItems]);
+            if (group.label) {
+                entries.push({ type: 'header', label: group.label });
+            }
+            for (const menuItem of groupMenuItems) {
+                entries.push({ type: 'item', menuItem });
+            }
+        }
+        return entries;
+    }, [allMenuItems, adaptable.api, settingsPanelOptions]);
 };
 exports.useMenuItems = useMenuItems;
+const getSettingsPanelNavigationItems = (entries) => entries.filter(settingsPanelNavigationTypes_1.isSettingsPanelNavigationItem).map((entry) => entry.menuItem);
+exports.getSettingsPanelNavigationItems = getSettingsPanelNavigationItems;

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

@@ -69,7 +69,7 @@ const PredicateEditor = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-2", children: icon }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onValueChange: (value) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-2", children: icon }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: props.predicate?.PredicateId ?? null, onValueChange: (value) => {
                             const option = predicateDefsOptions.find((x) => x.value === value);
                             props.onChange({
                                 ...props.predicate,

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

@@ -65,9 +65,7 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
      * 0→100), split at the midpoint instead of at the column maximum.
      */
     private splitFullSpanRangeAtMidpoint;
-    changeColumnComparisonMinValue(value: number): void;
-    private onMinColumnSelectedChanged;
-    changeColumnComparisonMaxValue(value: number): void;
-    private onMaxColumnSelectedChanged;
+    setColumnComparisonMin(value: number | string | undefined): void;
+    setColumnComparisonMax(value: number | string | undefined): void;
     changeColumnComparisonColor(value: string): void;
 }

package/src/View/Components/RangesComponent.js

@@ -10,11 +10,16 @@ const CheckBox_1 = require("../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const NumberInput_1 = require("../../components/Input/NumberInput");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const ButtonNew_1 = require("./Buttons/ButtonNew");
 const UIHelper_1 = require("../UIHelper");
 const ColumnSelector_1 = require("./Selectors/ColumnSelector");
 const Tabs_1 = require("../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const Flex_1 = require("../../components/Flex");
+const NewSelect_1 = require("../../components/NewSelect");
+const InputGroup_1 = require("../../components/InputGroup");
+const icons_1 = require("../../components/icons");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const DEFAULT_ZERO_CENTRED_COLORS = {
     NegativeColor: 'rgba(220, 53, 69, 0.55)',
     PositiveColor: 'rgba(40, 167, 69, 0.55)',
@@ -42,32 +47,53 @@ function deriveInitialRangesType(props) {
     }
     return props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange';
 }
+/**
+ * A single Column Comparison bound (Min or Max). The user picks whether the
+ * bound is a fixed `Value` (a number applied to every row) or a `Column`
+ * (read from another column and evaluated per row). The underlying
+ * `ColumnComparison.MinValue`/`MaxValue` stays a `number | string` — number =>
+ * fixed value, non-numeric string => columnId — so the type is derived from the
+ * stored value via `isNaN`, mirroring how the runtime resolver discriminates it.
+ */
+const ColumnComparisonBoundInput = ({ value, disabled, onChange }) => {
+    const [type, setType] = React.useState(value != null && value !== '' && isNaN(Number(value)) ? 'column' : 'value');
+    const typeOptions = [
+        {
+            value: 'value',
+            label: ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "edit" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: "Value" })] })),
+        },
+        {
+            value: 'column',
+            label: ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: "Column" })] })),
+        },
+    ];
+    const editor = type === 'value' ? ((0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { className: "twa:w-full", disabled: disabled, type: "number", value: value != null && !isNaN(Number(value)) ? Number(value) : '', onChange: (v) => onChange(v) })) : ((0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { disabled: disabled, type: "number", value: value != null && isNaN(Number(value)) ? String(value) : undefined, onChange: (columnId) => onChange(columnId || undefined) }));
+    // The select trigger, the `NumberInput` (`.ab-Input`) and the `ColumnSelector`
+    // (a Combobox that does NOT forward `className`, rendering its border on a
+    // `[data-slot="input-group"]` wrapper) all hard-code `rounded-input`, so the
+    // InputGroup CSS-variable joining has no effect. We flatten the touching
+    // corners directly (important, to beat `rounded-input`) and overlap the shared
+    // border via `-ml-px` so the two controls read as a single block. The editor
+    // side targets both inner border elements through descendant arbitrary
+    // variants and forces them to fill the flex item.
+    const editorWrapperClassName = [
+        'twa:flex-1 twa:basis-0 twa:min-w-0 twa:-ml-px',
+        'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
+        'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
+    ].join(' ');
+    return ((0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, className: "twa:items-stretch twa:max-w-[20rem]", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[120px] twa:max-w-none twa:shrink-0 twa:box-border twa:rounded-r-none!", disabled: disabled, value: type, items: typeOptions, onValueChange: (next) => {
+                    // Switching type clears the stale bound so a fixed number can never
+                    // be misread as a columnId (or vice versa).
+                    onChange(undefined);
+                    setType(next);
+                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: editorWrapperClassName, children: editor })] }));
+};
 class RangesComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = { rangesType: deriveInitialRangesType(props) };
     }
     render() {
-        let comparisonMinValueNumber = this.props.columnComparison != null &&
-            this.props.columnComparison.MinValue != null &&
-            !isNaN(Number(this.props.columnComparison.MinValue))
-            ? Number(this.props.columnComparison.MinValue)
-            : '';
-        let comparisonMaxValueNumber = this.props.columnComparison != null &&
-            this.props.columnComparison.MaxValue != null &&
-            !isNaN(Number(this.props.columnComparison.MaxValue))
-            ? Number(this.props.columnComparison.MaxValue)
-            : '';
-        let comparisonMinValueColumnId = this.props.columnComparison != null &&
-            this.props.columnComparison.MinValue != null &&
-            isNaN(Number(this.props.columnComparison.MinValue))
-            ? String(this.props.columnComparison.MinValue)
-            : undefined;
-        let comparisonMaxValueColumnId = this.props.columnComparison != null &&
-            this.props.columnComparison.MaxValue != null &&
-            isNaN(Number(this.props.columnComparison.MaxValue))
-            ? String(this.props.columnComparison.MaxValue)
-            : undefined;
         let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
             ? this.props.columnComparison.Color
             : undefined;
@@ -76,34 +102,54 @@ class RangesComponent extends React.Component {
         // is shared between the two range tabs and parameterised on this flag.
         const isRangeValueTypeNumber = this.state.rangesType === 'NumberRange';
         const renderNoneContent = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:opacity-70 twa:py-2 twa:max-w-[520px]", children: "No coloured bands configured" }));
-        const renderRangesContent = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.ranges?.map((range, index, list) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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" })), (0, jsx_runtime_1.jsx)(NumberInput_1.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" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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" })), (0, jsx_runtime_1.jsx)(NumberInput_1.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" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:h-full", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+        // Columns: Min, Max, Colour, [Reverse Gradient], Delete. Using one shared
+        // grid (rows are `display: contents`) keeps every band's cells aligned and
+        // spacing uniform via grid gaps, even with a single row.
+        const rangeGridTemplateColumns = [
+            'max-content',
+            'max-content',
+            'max-content',
+            ...(this.props.showRangeDirection ? ['max-content'] : []),
+            'max-content',
+        ].join(' ');
+        const renderRangesContent = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeValueTypeNumber ? ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Define value bands from low to high, each with its own colour." }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tick ", (0, jsx_runtime_1.jsx)("strong", { children: "Use column min" }), " or ", (0, jsx_runtime_1.jsx)("strong", { children: "Use column max" }), " to anchor the first and last band to the column's actual lowest and highest values."] })] })) : ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Define bands as percentages (0\u2013100) of the column's value range." }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "0%" }), " is the column's lowest value and ", (0, jsx_runtime_1.jsx)("strong", { children: "100%" }), " its highest; each band gets its own colour."] })] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:grid twa:items-end twa:gap-x-2 twa:gap-y-3 twa:mb-3 twa:w-fit", style: { gridTemplateColumns: rangeGridTemplateColumns }, children: this.props.ranges?.map((range, index, list) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:contents", "data-name": "percent-bar-range", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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: "Use column min" })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: this.props.disabled ||
+                                            range.Min === 'Col-Min' ||
+                                            (index === 0 && !isRangeValueTypeNumber), value: range.Min === 'Col-Min'
+                                            ? this.props.minMaxRangeValues?.min ?? ''
+                                            : range.Min, onChange: (value) => {
+                                            this.changeRangeMin(index, value);
+                                        } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && ((0, jsx_runtime_1.jsx)(CheckBox_1.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: "Use column max" })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { value: range.Max === 'Col-Max'
+                                            ? this.props.minMaxRangeValues?.max ?? ''
+                                            : range.Max, disabled: this.props.disabled ||
+                                            range.Max === 'Col-Max' ||
+                                            (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
+                                            this.changeRangeMax(index, value);
+                                        } })] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
-                                }, className: "twa:mr-2 twa:h-[33px]" }) }), this.props.showRangeDirection && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2", children: "Reverse Gradient" })), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange(), children: "Add New Range" }) })] }));
+                                }, className: "twa:h-[33px] twa:pl-2" }), this.props.showRangeDirection && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), children: "Reverse Gradient" })), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", disabled: this.props.disabled ||
+                                    (!this.props.allowEmptyRanges &&
+                                        !!this.props.ranges &&
+                                        this.props.ranges.length === 1), onClick: () => this.removeRange(index) })] }, index))) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { disabled: this.props.disabled, dataName: "add-range", onClick: () => this.addRange(), children: "Add Range" }) })] }));
         const renderZeroCentredContent = () => {
             const zc = this.props.zeroCentred ?? DEFAULT_ZERO_CENTRED_COLORS;
             const apply = (next) => this.props.onApplyZeroCentred?.(next);
-            return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Negative (Col-Min \u2192 0):", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Positive (0 \u2192 Col-Max):", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] }) }));
+            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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: [(0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Colour cells on a diverging scale centred at zero." }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Negative values shade toward the column minimum, positive values toward the maximum \u2014 deeper as they move away from 0." })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Negative (${minLabel} → 0):`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Positive (0 → ${maxLabel}):`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] })] }));
         };
-        const renderColumnComparisonContent = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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."] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Min Value:", first: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMinValue(value);
-                                } }), or: "OR", second: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[15rem]", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
-                                        this.onMinColumnSelectedChanged(columnId);
-                                    } }) }) }), ' ', (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Max Value:", first: (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMaxValue(value);
-                                } }), or: "OR", second: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[15rem]", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
+        const describeBound = (bound) => {
+            if (bound == null || bound === '') {
+                return (0, jsx_runtime_1.jsx)("em", { children: "not set" });
+            }
+            if (!isNaN(Number(bound))) {
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: Number(bound) }), " ", (0, jsx_runtime_1.jsx)("span", { className: "twa:opacity-60", children: "(fixed)" })] }));
+            }
+            const friendlyName = this.props.api.columnApi.getFriendlyNameForColumnId(String(bound));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: friendlyName }), " ", (0, jsx_runtime_1.jsx)("span", { className: "twa:opacity-60", children: "(per row)" })] }));
+        };
+        const renderColumnComparisonContent = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [(0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Scale each cell's bar between a ", (0, jsx_runtime_1.jsx)("strong", { children: "Minimum" }), " and a", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Maximum" }), "."] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Set each to a fixed ", (0, jsx_runtime_1.jsx)("strong", { children: "Value" }), " (same for all rows) or a", ' ', (0, jsx_runtime_1.jsx)("strong", { children: "Column" }), " (read from that column on each row)."] })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: ['label', 'first'], sizes: ['auto', '1fr'], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Minimum:", first: (0, jsx_runtime_1.jsx)(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MinValue, onChange: (value) => this.setColumnComparisonMin(value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Maximum:", first: (0, jsx_runtime_1.jsx)(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MaxValue, onChange: (value) => this.setColumnComparisonMax(value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                     this.changeColumnComparisonColor(color);
-                                } }) })] })] }, 'cc'));
+                                } }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.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 };
         const radioCls = 'twa:m-0 twa:align-baseline';
         const renderTabRadio = (label, value) => ((0, jsx_runtime_1.jsx)(Radio_1.default, { tabIndex: -1, className: radioCls, checked: this.state.rangesType === value, children: label }));
@@ -128,8 +174,7 @@ class RangesComponent extends React.Component {
         // 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') &&
+        if ((this.state.rangesType === 'NumberRange' || this.state.rangesType === 'PercentageRange') &&
             prevProps.rangeValueType !== this.props.rangeValueType) {
             this.setState({
                 rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
@@ -227,9 +272,7 @@ class RangesComponent extends React.Component {
     setRangeColMin(range) {
         const newRanges = this.props.ranges.map((rangeItem) => {
             if (rangeItem === range) {
-                let newMin = rangeItem.Min === 'Col-Min'
-                    ? (this.props.minMaxRangeValues?.min ?? 0)
-                    : 'Col-Min';
+                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues?.min ?? 0 : 'Col-Min';
                 return {
                     ...rangeItem,
                     Min: newMin,
@@ -255,7 +298,7 @@ class RangesComponent extends React.Component {
     addRange() {
         // 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.
+        // both cases so the "Add 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
@@ -347,25 +390,11 @@ class RangesComponent extends React.Component {
             { Min: mid, Max: 'Col-Max', Color: (0, UIHelper_1.getGraySwatchColor)() },
         ];
     }
-    changeColumnComparisonMinValue(value) {
-        const { columnComparison } = this.props;
-        columnComparison.MinValue = value;
-        this.props.updateColumnComparison(columnComparison);
-    }
-    onMinColumnSelectedChanged(columnId) {
-        const { columnComparison } = this.props;
-        columnComparison.MinValue = columnId || undefined;
-        this.props.updateColumnComparison(columnComparison);
+    setColumnComparisonMin(value) {
+        this.props.updateColumnComparison({ ...this.props.columnComparison, MinValue: value });
     }
-    changeColumnComparisonMaxValue(value) {
-        const { columnComparison } = this.props;
-        columnComparison.MaxValue = value;
-        this.props.updateColumnComparison(columnComparison);
-    }
-    onMaxColumnSelectedChanged(columnId) {
-        const { columnComparison } = this.props;
-        columnComparison.MaxValue = columnId || undefined;
-        this.props.updateColumnComparison(columnComparison);
+    setColumnComparisonMax(value) {
+        this.props.updateColumnComparison({ ...this.props.columnComparison, MaxValue: value });
     }
     changeColumnComparisonColor(value) {
         const { columnComparison } = this.props;

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReorderDraggable = ReorderDraggable;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const dnd_1 = require("../../../components/dnd");
 const icons_1 = require("../../../components/icons");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../../lib/utils");
 function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
@@ -19,7 +18,7 @@ function ReorderDraggable(props) {
                             const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
                             return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps, itemContext) => {
                                     const { onPointerDown, ...restDomProps } = itemDomProps;
-                                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: (0, clsx_1.default)(`${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: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }) })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-3", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
+                                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: (0, utils_1.cn)(`${baseClassName}__option`, 'ab-DraggableListItem', index ? 'twa:mt-0.5' : 'twa:mt-0', 'twa:py-1 twa:px-1.5', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }) })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
                                 } }, identifier));
                         }) })) }) }) }) }));
 }

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { AdaptableColumn } from '../../../AdaptableState/Common/AdaptableColumn';
-import { DropdownButtonProps } from '../../../components/DropdownButton';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { GridCell } from '../../../types';
 export interface BulkUpdateValueSelectorProps {
@@ -12,7 +11,6 @@ export interface BulkUpdateValueSelectorProps {
     style?: React.CSSProperties;
     newLabel?: string;
     existingLabel?: string;
-    dropdownButtonProps?: DropdownButtonProps;
     selectedGridCells: GridCell[];
     disabled?: boolean;
     className?: string;

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

@@ -9,11 +9,11 @@ const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Flex_1 = require("../../../components/Flex");
 const icons_1 = require("../../../components/icons");
 const InputGroup_1 = require("../../../components/InputGroup");
-const NewDropdownButton_1 = require("../../../components/NewDropdownButton");
+const DropdownButton_1 = require("../../../components/DropdownButton");
+const utils_1 = require("../../../lib/utils");
 const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -46,7 +46,7 @@ const BulkUpdateValueSelector = (props) => {
             : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [(0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
                             { label: 'New', icon: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "edit" }), onClick: () => setValueType('new') },
                             {
                                 label: 'Existing',