@adaptabletools/adaptable-cjs 23.0.0-canary.6 → 23.0.0-canary.8

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',

package/src/View/Components/StyleComponent.js

@@ -4,8 +4,6 @@ exports.StyleComponent = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const CheckBox_1 = require("../../components/CheckBox");
 const ColorPicker_1 = require("../../components/ColorPicker");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
@@ -18,9 +16,9 @@ const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
 const Flex_1 = require("../../components/Flex");
-const twMerge_1 = require("../../twMerge");
 const Card_1 = require("../../components/Card");
 const NewSelect_1 = require("../../components/NewSelect");
+const utils_1 = require("../../lib/utils");
 const StyleComponent = (props) => {
     const [showClassName, setShowClassName] = (0, react_1.useState)(StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
     const componentStyle = props.Style;
@@ -44,51 +42,36 @@ const StyleComponent = (props) => {
         newStyle.ClassName = value == 'select' ? '' : value;
         setComponentStyle(newStyle);
     };
-    const onUseBackColorCheckChange = (checked) => {
+    const onBackColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.BackColor = '#ffffff';
+        if (color) {
+            newStyle.BackColor = color;
         }
         else {
             delete newStyle.BackColor;
         }
         setComponentStyle(newStyle);
     };
-    const onUseForeColorCheckChange = (checked) => {
+    const onForeColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.ForeColor = '#000000';
+        if (color) {
+            newStyle.ForeColor = color;
         }
         else {
             delete newStyle.ForeColor;
         }
         setComponentStyle(newStyle);
     };
-    const onUseBorderColorCheckChange = (checked) => {
+    const onBorderColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.BorderColor = '#000000';
+        if (color) {
+            newStyle.BorderColor = color;
         }
         else {
             delete newStyle.BorderColor;
         }
         setComponentStyle(newStyle);
     };
-    const onBackColorSelectChange = (color) => {
-        const newStyle = { ...componentStyle };
-        newStyle.BackColor = color;
-        setComponentStyle(newStyle);
-    };
-    const onForeColorSelectChange = (color) => {
-        const newStyle = { ...componentStyle };
-        newStyle.ForeColor = color;
-        setComponentStyle(newStyle);
-    };
-    const onBorderColorSelectChange = (color) => {
-        const newStyle = { ...componentStyle };
-        newStyle.BorderColor = color;
-        setComponentStyle(newStyle);
-    };
     const onFontWeightChange = (checked) => {
         const newStyle = { ...componentStyle };
         if (checked) {
@@ -152,45 +135,29 @@ const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    return ((0, jsx_runtime_1.jsxs)(Cmp, { ...cmpProps, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-StyleComponent twa:text-3', props.className)), children: [ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "classname", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "CSS Class Name" }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:p-1", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Select a CSS Class Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[15rem]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
+    const styleEditorGrid = ((0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:col-span-2 twa:self-stretch", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), (0, jsx_runtime_1.jsxs)("span", { children: ["Back ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { api: props.api, value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), (0, jsx_runtime_1.jsxs)("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:row-start-3", api: props.api, value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), (0, jsx_runtime_1.jsxs)("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:row-start-4", api: props.api, value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), (0, jsx_runtime_1.jsx)("span", { className: "twa:row-start-5", children: "Border Radius" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { className: "twa:w-[100px] twa:row-start-5", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+                    const number = Number(event.target.value);
+                    if (isNaN(number)) {
+                        onBorderRadiusChange(0);
+                    }
+                    else {
+                        onBorderRadiusChange(number);
+                    }
+                } }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1 twa:self-stretch", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font Properties" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set font properties for the Style" })] }), (0, jsx_runtime_1.jsx)("span", { className: "twa:col-start-3 twa:row-start-2", children: "Font Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:col-start-4 twa:row-start-2", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:col-start-3 twa:row-start-3", children: "Text Decoration" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:col-start-4 twa:row-start-3", children: (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:col-start-3 twa:row-start-4", children: "Font Size" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:col-start-4 twa:row-start-4", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default", items: [
+                        {
+                            label: 'Default',
+                            value: '',
+                        },
+                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                            label: enumName,
+                            value: enumName,
+                        })),
+                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:col-start-3 twa:row-start-5", children: "Alignment" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:col-start-4 twa:row-start-5", children: (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Cmp, { ...cmpProps, className: (0, utils_1.cn)('ab-StyleComponent twa:text-3', props.className), children: [ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "classname", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "CSS Class Name" }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:p-1", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Select a CSS Class Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[15rem]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
                                                     ? []
                                                     : styleClassNames.map((item) => ({
                                                         label: item,
                                                         value: item,
-                                                    })), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "createstyle", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:row-start-6", children: "Border Radius" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
-                                                const number = Number(event.target.value);
-                                                if (isNaN(number)) {
-                                                    onBorderRadiusChange(0);
-                                                }
-                                                else {
-                                                    onBorderRadiusChange(number);
-                                                }
-                                            } }), (0, jsx_runtime_1.jsx)(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), (0, jsx_runtime_1.jsx)("span", { children: "Font Style" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), (0, jsx_runtime_1.jsx)("span", { children: "Text Decoration" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), (0, jsx_runtime_1.jsx)("span", { children: "Font Size" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default", items: [
-                                                    {
-                                                        label: 'Default',
-                                                        value: '',
-                                                    },
-                                                    ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
-                                                        label: enumName,
-                                                        value: enumName,
-                                                    })),
-                                                ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), (0, jsx_runtime_1.jsx)("span", { children: "Alignment" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) }) })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:row-start-6", children: "Border Radius" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
-                                    const number = Number(event.target.value);
-                                    if (isNaN(number)) {
-                                        onBorderRadiusChange(0);
-                                    }
-                                    else {
-                                        onBorderRadiusChange(number);
-                                    }
-                                } }), (0, jsx_runtime_1.jsx)(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), (0, jsx_runtime_1.jsx)("span", { children: "Font Style" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), (0, jsx_runtime_1.jsx)("span", { children: "Text Decoration" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), (0, jsx_runtime_1.jsx)("span", { children: "Font Size" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default", items: [
-                                        {
-                                            label: 'Default',
-                                            value: '',
-                                        },
-                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
-                                            label: enumName,
-                                            value: enumName,
-                                        })),
-                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), (0, jsx_runtime_1.jsx)("span", { children: "Alignment" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Preview" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:grid twa:place-items-center", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:inline-block", children: (0, jsx_runtime_1.jsx)(StylePreview_1.StylePreview, { className: "twa:mt-0", styleObject: componentStyle, children: props.previewText }) }) })] }))] }));
+                                                    })), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "createstyle", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:flex-1", children: styleEditorGrid }) }) })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:flex-1", children: styleEditorGrid }) })), !props.hidePreview && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Preview" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:grid twa:place-items-center", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:inline-block", children: (0, jsx_runtime_1.jsx)(StylePreview_1.StylePreview, { className: "twa:mt-0", styleObject: componentStyle, children: props.previewText }) }) })] }))] }));
 };
 exports.StyleComponent = StyleComponent;

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -11,7 +11,7 @@ const AdaptableButton_1 = require("../AdaptableButton");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const icons_1 = require("../../../components/icons");
 const CheckBox_1 = require("../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../components/DropdownButton");
 const Types_1 = require("../../../AdaptableState/Common/Types");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const ButtonConfigure_1 = require("../Buttons/ButtonConfigure");
@@ -82,18 +82,21 @@ const AdaptableToolPanelComponent = (props) => {
         }
         let toolpanelItems = [
             {
-                clickable: false,
-                label: ((0, jsx_runtime_1.jsxs)("div", { children: [' ', "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("b", { children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
+                closeOnClick: false,
+                tooltip: 'Tool Panels',
+                label: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "twa:font-bold", children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
         const buildDropdownButtonItem = (toolPanel, label, isVisible) => {
             return {
-                id: toolPanel,
+                dataName: String(toolPanel),
+                closeOnClick: false,
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "ab-dd-checkbox twa:my-0", variant: "agGrid", as: "div", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
+                tooltip: label,
+                label: ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "ab-dd-checkbox twa:my-0", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -116,7 +119,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { variant: "text", tone: "none", collapseOnItemClick: false, id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels", children: toolPanelsGlyph }, 'dropdown-toolpanels'));
+        return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { variant: "text", tone: "none", id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", items: toolpanelItems, tooltip: "Manage Tool Panels", extraWidthChars: 5, children: toolPanelsGlyph }, 'dropdown-toolpanels'));
     };
     const renderToolPanelButtons = () => {
         const toolPanelButtons = [];

package/src/View/Components/ToolPanel/ToolPanelPopup.d.ts

@@ -3,28 +3,18 @@ import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { ModuleViewPopupProps } from '../SharedProps/ModuleViewPopupProps';
 import { InternalState } from '../../../AdaptableState/InternalState';
 import { AdaptableToolPanelDefinition, ToolPanelState } from '../../../AdaptableState/ToolPanelState';
-import { AdaptableModuleButtons, AdaptableToolPanels } from '../../../AdaptableState/Common/Types';
+import { AdaptableModuleButtons } from '../../../AdaptableState/Common/Types';
 interface ToolPanelPopupComponentProps extends ModuleViewPopupProps<ToolPanelPopupComponent> {
     ToolPanelState: ToolPanelState;
     InternalState: InternalState;
     onToolPanelSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => ToolPanelRedux.ToolPanelSetModuleButtonsAction;
     onToolPanelSetToolPanels: (toolPanels: AdaptableToolPanelDefinition[]) => ToolPanelRedux.ToolPanelSetToolPanelsAction;
 }
-export declare enum ToolPanelConfigView {
-    Buttons = "Buttons",
-    ToolPanels = "ToolPanels"
-}
-export interface ToolPanelPopupState {
-    ToolPanelConfigView: ToolPanelConfigView;
-}
-declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComponentProps, ToolPanelPopupState> {
-    constructor(props: ToolPanelPopupComponentProps);
+export { ToolPanelConfigView } from './ToolPanelPopupSections';
+declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComponentProps> {
     render(): React.JSX.Element;
-    onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
-    onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
 export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, {
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;
-export {};