@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.7

package/src/View/Components/RangesComponent.js

@@ -6,11 +6,16 @@ import { CheckBox } from '../../components/CheckBox';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';
 import SimpleButton from '../../components/SimpleButton';
+import { ButtonNew } from './Buttons/ButtonNew';
 import { getGraySwatchColor } from '../UIHelper';
 import { ColumnSelector } from './Selectors/ColumnSelector';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
 import { Box, Flex } from '../../components/Flex';
+import { SingleSelect } from '../../components/NewSelect';
+import { InputGroup } from '../../components/InputGroup';
+import { Icon } from '../../components/icons';
+import HelpBlock from '../../components/HelpBlock';
 const DEFAULT_ZERO_CENTRED_COLORS = {
     NegativeColor: 'rgba(220, 53, 69, 0.55)',
     PositiveColor: 'rgba(40, 167, 69, 0.55)',
@@ -38,32 +43,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: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "edit" }), _jsx(Box, { className: "twa:ml-2", children: "Value" })] })),
+        },
+        {
+            value: 'column',
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "columns" }), _jsx(Box, { className: "twa:ml-2", children: "Column" })] })),
+        },
+    ];
+    const editor = type === 'value' ? (_jsx(NumberInput, { className: "twa:w-full", disabled: disabled, type: "number", value: value != null && !isNaN(Number(value)) ? Number(value) : '', onChange: (v) => onChange(v) })) : (_jsx(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 (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[20rem]", children: [_jsx(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);
+                } }), _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
+};
 export 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;
@@ -72,34 +98,54 @@ export 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 = () => (_jsx(Box, { className: "twa:text-2 twa:opacity-70 twa:py-2 twa:max-w-[520px]", children: "No coloured bands configured" }));
-        const renderRangesContent = () => (_jsxs(_Fragment, { children: [this.props.ranges?.map((range, index, list) => (_jsxs(Flex, { alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range", children: [_jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && (_jsx(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Col Min" })), _jsx(NumberInput, { disabled: this.props.disabled ||
-                                        range.Min === 'Col-Min' ||
-                                        (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
-                                        this.changeRangeMin(index, value);
-                                    }, className: "twa:mr-2" })] }), _jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && (_jsx(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled, children: "Col Max" })), _jsx(NumberInput, { value: range.Max, disabled: this.props.disabled ||
-                                        range.Max === 'Col-Max' ||
-                                        (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
-                                        this.changeRangeMax(index, value);
-                                    }, className: "twa:mr-2" })] }), _jsx(Flex, { alignItems: "center", className: "twa:h-full", children: _jsx(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+        // 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 = () => (_jsxs(_Fragment, { children: [isRangeValueTypeNumber ? (_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Define value bands from low to high, each with its own colour." }), _jsxs(Box, { children: ["Tick ", _jsx("strong", { children: "Use column min" }), " or ", _jsx("strong", { children: "Use column max" }), " to anchor the first and last band to the column's actual lowest and highest values."] })] })) : (_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Define bands as percentages (0\u2013100) of the column's value range." }), _jsxs(Box, { children: [_jsx("strong", { children: "0%" }), " is the column's lowest value and ", _jsx("strong", { children: "100%" }), " its highest; each band gets its own colour."] })] })), _jsx(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) => (_jsxs(Box, { className: "twa:contents", "data-name": "percent-bar-range", children: [_jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && (_jsx(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Use column min" })), _jsx(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);
+                                        } })] }), _jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && (_jsx(CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled, children: "Use column max" })), _jsx(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);
+                                        } })] }), _jsx(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
-                                }, className: "twa:mr-2 twa:h-[33px]" }) }), this.props.showRangeDirection && (_jsx(CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), className: "twa:ml-2", children: "Reverse Gradient" })), _jsx(SimpleButton, { className: "twa:ml-2 twa:mb-1", icon: "delete", disabled: this.props.disabled ||
-                                (!this.props.allowEmptyRanges &&
-                                    !!this.props.ranges &&
-                                    this.props.ranges.length === 1), onClick: () => this.removeRange(index) })] }, index))), _jsx("div", { children: _jsx(SimpleButton, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange(), children: "Add New Range" }) })] }));
+                                }, className: "twa:h-[33px] twa:pl-2" }), this.props.showRangeDirection && (_jsx(CheckBox, { disabled: this.props.disabled, checked: !!range.ReverseGradient, onChange: (checked) => this.changeRangeDirectionUp(index, checked), children: "Reverse Gradient" })), _jsx(SimpleButton, { icon: "delete", disabled: this.props.disabled ||
+                                    (!this.props.allowEmptyRanges &&
+                                        !!this.props.ranges &&
+                                        this.props.ranges.length === 1), onClick: () => this.removeRange(index) })] }, index))) }), _jsx("div", { children: _jsx(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 (_jsx(Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: _jsxs(FormLayout, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [_jsx(FormRow, { label: "Negative (Col-Min \u2192 0):", children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), _jsx(FormRow, { label: "Positive (0 \u2192 Col-Max):", children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] }) }));
+            const minLabel = this.props.minMaxRangeValues != null ? this.props.minMaxRangeValues.min : 'column min';
+            const maxLabel = this.props.minMaxRangeValues != null ? this.props.minMaxRangeValues.max : 'column max';
+            return (_jsxs(Flex, { flexDirection: "column", "data-name": "zero-centred-ranges", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Colour cells on a diverging scale centred at zero." }), _jsx(Box, { children: "Negative values shade toward the column minimum, positive values toward the maximum \u2014 deeper as they move away from 0." })] }), _jsxs(FormLayout, { columns: ['label', 'colour'], sizes: ['200px', '1fr'], className: "twa:ml-2", children: [_jsx(FormRow, { label: `Negative (${minLabel} → 0):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.NegativeColor, onChange: (color) => apply({ ...zc, NegativeColor: color }) }) }) }), _jsx(FormRow, { label: `Positive (0 → ${maxLabel}):`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: zc.PositiveColor, onChange: (color) => apply({ ...zc, PositiveColor: color }) }) }) })] })] }));
         };
-        const renderColumnComparisonContent = () => (_jsxs(Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [_jsxs(Box, { className: "twa:p-2 twa:text-2", children: ["Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a ", this.props.api.internalApi.getCorrectEnglishVariant('Colour'), " for the Bar."] }), _jsxs(FormLayout, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'], children: [_jsx(FormRow, { label: "Min Value:", first: _jsx(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMinValue(value);
-                                } }), or: "OR", second: _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(ColumnSelector, { disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
-                                        this.onMinColumnSelectedChanged(columnId);
-                                    } }) }) }), ' ', _jsx(FormRow, { label: "Max Value:", first: _jsx(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
-                                    this.changeColumnComparisonMaxValue(value);
-                                } }), or: "OR", second: _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(ColumnSelector, { disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) }) }) }), _jsx(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
+        const describeBound = (bound) => {
+            if (bound == null || bound === '') {
+                return _jsx("em", { children: "not set" });
+            }
+            if (!isNaN(Number(bound))) {
+                return (_jsxs(_Fragment, { children: [_jsx("strong", { children: Number(bound) }), " ", _jsx("span", { className: "twa:opacity-60", children: "(fixed)" })] }));
+            }
+            const friendlyName = this.props.api.columnApi.getFriendlyNameForColumnId(String(bound));
+            return (_jsxs(_Fragment, { children: [_jsx("strong", { children: friendlyName }), " ", _jsx("span", { className: "twa:opacity-60", children: "(per row)" })] }));
+        };
+        const renderColumnComparisonContent = () => (_jsxs(Flex, { flexDirection: "column", "data-name": "percent-bar-column-comparison", children: [_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsxs(Box, { children: ["Scale each cell's bar between a ", _jsx("strong", { children: "Minimum" }), " and a", ' ', _jsx("strong", { children: "Maximum" }), "."] }), _jsxs(Box, { children: ["Set each to a fixed ", _jsx("strong", { children: "Value" }), " (same for all rows) or a", ' ', _jsx("strong", { children: "Column" }), " (read from that column on each row)."] })] }), _jsxs(FormLayout, { columns: ['label', 'first'], sizes: ['auto', '1fr'], children: [_jsx(FormRow, { label: "Minimum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MinValue, onChange: (value) => this.setColumnComparisonMin(value) }) }), _jsx(FormRow, { label: "Maximum:", first: _jsx(ColumnComparisonBoundInput, { disabled: this.props.disabled, value: this.props.columnComparison?.MaxValue, onChange: (value) => this.setColumnComparisonMax(value) }) }), _jsx(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: _jsx(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                     this.changeColumnComparisonColor(color);
-                                } }) })] })] }, 'cc'));
+                                } }) })] }), _jsxs(Box, { className: "twa:mt-2 twa:p-2 twa:text-3 twa:opacity-80", "data-name": "cc-summary", children: ["Each row's bar runs from ", describeBound(this.props.columnComparison?.MinValue), " to", ' ', describeBound(this.props.columnComparison?.MaxValue), "."] })] }, 'cc'));
         const tabFlex = { flex: 1 };
         const radioCls = 'twa:m-0 twa:align-baseline';
         const renderTabRadio = (label, value) => (_jsx(Radio, { tabIndex: -1, className: radioCls, checked: this.state.rangesType === value, children: label }));
@@ -124,8 +170,7 @@ export 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',
@@ -223,9 +268,7 @@ export 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,
@@ -251,7 +294,7 @@ export 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
@@ -343,25 +386,11 @@ export class RangesComponent extends React.Component {
             { Min: mid, Max: 'Col-Max', Color: 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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
 import { Icon } from '../../../components/icons';
 import { Box, Flex } from '../../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../../lib/utils';
 export function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
@@ -15,7 +15,7 @@ export function ReorderDraggable(props) {
                             const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
                             return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps, itemContext) => {
                                     const { onPointerDown, ...restDomProps } = itemDomProps;
-                                    return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx(`${baseClassName}__option`, index ? 'twa:mt-1' : 'twa:mt-0', 'twa:bg-primary twa:p-2', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e), children: _jsxs(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : (_jsx(Box, { className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
+                                    return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: 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: _jsxs(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-2", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : (_jsx(Box, { className: "twa:mr-2", children: _jsx(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

@@ -5,11 +5,11 @@ import UIHelper from '../../UIHelper';
 import AdaptableInput from '../AdaptableInput';
 import { PermittedValuesSelector } from './PermittedValuesSelector';
 import { useAdaptable } from '../../AdaptableContext';
-import clsx from 'clsx';
 import { Box, Flex } from '../../../components/Flex';
 import { Icon } from '../../../components/icons';
 import { InputGroup } from '../../../components/InputGroup';
-import { NewDropdownButton } from '../../../components/NewDropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
+import { cn } from '../../../lib/utils';
 export const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = useAdaptable();
@@ -42,7 +42,7 @@ export 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 (_jsx(Flex, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
+    return (_jsx(Flex, { className: cn('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
                             { label: 'New', icon: _jsx(Icon, { name: "edit" }), onClick: () => setValueType('new') },
                             {
                                 label: 'Existing',

package/src/View/Components/StyleComponent.js

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

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

@@ -3,11 +3,11 @@ import kebabCase from '../../../Utilities/utils/kebabCase';
 import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { connect } from 'react-redux';
-import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../AdaptableButton';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView } from '../AdaptableButton';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { Icon } from '../../../components/icons';
 import { CheckBox } from '../../../components/CheckBox';
-import DropdownButton from '../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
 import { ALL_TOOL_PANELS, } from '../../../AdaptableState/Common/Types';
 import SimpleButton from '../../../components/SimpleButton';
 import { ButtonConfigure } from '../Buttons/ButtonConfigure';
@@ -78,18 +78,21 @@ const AdaptableToolPanelComponent = (props) => {
         }
         let toolpanelItems = [
             {
-                clickable: false,
-                label: (_jsxs("div", { children: [' ', "\u00A0\u00A0", _jsx("b", { children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
+                closeOnClick: false,
+                tooltip: 'Tool Panels',
+                label: (_jsxs("div", { children: [_jsx("span", { className: "twa:font-bold", children: 'Tool Panels' }), renderToolPanelConfigureButton(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: (_jsx(CheckBox, { className: "ab-dd-checkbox twa:my-0", variant: "agGrid", as: "div", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
+                tooltip: label,
+                label: (_jsx(CheckBox, { className: "ab-dd-checkbox twa:my-0", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -112,7 +115,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        return (_jsx(DropdownButton, { 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 (_jsx(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 {};