@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

package/src/View/Components/RangesComponent.js

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

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReorderDraggable = ReorderDraggable;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+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");
@@ -10,24 +10,16 @@ const clsx_1 = tslib_1.__importDefault(require("clsx"));
 function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
-    return (React.createElement(Flex_1.Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
-        React.createElement(dnd_1.DragDropProvider, null,
-            React.createElement(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column" },
-                React.createElement(dnd_1.DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                         proxyElement.classList.add('twa:shadow-md');
                     }, onDrop: (sortedIndexes) => {
                         onChange(sortedIndexes.map((i) => order[i]));
-                    } }, (listDomProps) => (React.createElement("div", { ...listDomProps }, order.map((option, index) => {
-                    const identifier = toIdentifier(option);
-                    const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
-                    return (React.createElement(dnd_1.DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps, itemContext) => {
-                        const { onPointerDown, ...restDomProps } = itemDomProps;
-                        return (React.createElement(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) },
-                            React.createElement(Flex_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
-                                reorderable && !disabled ? (React.createElement(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
-                                    React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Flex_1.Box, { className: "twa:mr-3" },
-                                    React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
-                                props.renderOption(option, index))));
-                    }));
-                }))))))));
+                    }, children: (listDomProps) => ((0, jsx_runtime_1.jsx)("div", { ...listDomProps, children: order.map((option, index) => {
+                            const identifier = toIdentifier(option);
+                            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)] }) }));
+                                } }, identifier));
+                        }) })) }) }) }) }));
 }

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulkUpdateValueSelector = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
@@ -13,6 +13,7 @@ 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 BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -22,8 +23,7 @@ const BulkUpdateValueSelector = (props) => {
     // TODO = this seems to be called whenever we edit a cell
     // which is then triggering a get all values
     // not sure that we need to
-    const permittedValueSelector = (React.createElement(Flex_1.Box, { className: 'twa:flex-1' },
-        React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: (0, react_1.useCallback)(({ currentSearchValue }) => {
+    const permittedValueSelector = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: 'twa:flex-1', children: (0, jsx_runtime_1.jsx)(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: (0, react_1.useCallback)(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);
                 }
@@ -38,25 +38,21 @@ const BulkUpdateValueSelector = (props) => {
                 props.selectedGridCells?.[0]?.primaryKeyValue,
             ]), onChange: (value) => {
                 props.onColumnValueChange(value || null);
-            } })));
-    const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
+            } }) }));
+    const input = ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
             ? UIHelper_1.default.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
             ? UIHelper_1.default.getPlaceholderForDataType(props.selectedColumn.dataType)
             : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
-    return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
-        React.createElement(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full" },
-            React.createElement(DropdownButton_1.default, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, columns: ['label'], variant: "outlined", tone: "neutral", items: [
-                    { label: 'New', icon: React.createElement(icons_1.Icon, { name: "edit" }), onClick: () => setValueType('new') },
-                    {
-                        label: 'Existing',
-                        icon: React.createElement(icons_1.Icon, { name: "grid" }),
-                        onClick: () => setValueType('existing'),
-                    },
-                ] },
-                React.createElement(React.Fragment, null, valueType === 'existing' ? React.createElement(icons_1.Icon, { name: "grid" }) : React.createElement(icons_1.Icon, { name: "edit" }))),
-            valueType === 'new' ? input : permittedValueSelector))) : (permittedValueSelector)));
+    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: [
+                            { label: 'New', icon: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "edit" }), onClick: () => setValueType('new') },
+                            {
+                                label: 'Existing',
+                                icon: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "grid" }),
+                                onClick: () => setValueType('existing'),
+                            },
+                        ], children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: valueType === 'existing' ? (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "grid" }) : (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "edit" }) }) }), valueType === 'new' ? input : permittedValueSelector] }) })) : (permittedValueSelector) }));
 };
 exports.BulkUpdateValueSelector = BulkUpdateValueSelector;

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

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

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

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnSelector = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const Select_1 = require("../../../components/Select");
 const AdaptableContext_1 = require("../../AdaptableContext");
+const Combobox_1 = require("../../../components/Combobox");
 const ColumnSelector = function (props) {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columns = React.useMemo(() => {
@@ -13,12 +14,11 @@ const ColumnSelector = function (props) {
     const getColumn = (columnId) => columns.find((c) => c.columnId === columnId);
     const options = columns
         .map((column) => {
-        let label = column.friendlyName ?? column.columnId;
-        if (props.renderOption) {
-            label = props.renderOption(column);
-        }
+        const textLabel = column.friendlyName ?? column.columnId;
+        const label = props.renderOption ? props.renderOption(column) : textLabel;
         return {
             label,
+            textLabel,
             value: column.columnId,
         };
     })
@@ -28,8 +28,22 @@ const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select_1.Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
+    const comboBoxProps = {
+        ['data-name']: 'column-selector',
+        disabled: props.disabled,
+        className: props.className,
+        virtualized: true,
+        items: options,
+        showClear: false,
+        onValueChange: (colId) => {
             props.onChange(colId);
-        }, options: options }));
+        },
+        value: props.value,
+        placeholder: props.placeholder ?? 'Select Column',
+    };
+    if (props.isMulti) {
+        return (0, jsx_runtime_1.jsx)(Combobox_1.MultiCombobox, { ...comboBoxProps });
+    }
+    return (0, jsx_runtime_1.jsx)(Combobox_1.SingleCombobox, { ...comboBoxProps });
 };
 exports.ColumnSelector = ColumnSelector;

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

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

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

@@ -2,21 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldSelector = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const Select_1 = require("../../../components/Select");
 const AdaptableContext_1 = require("../../AdaptableContext");
+const Combobox_1 = require("../../../components/Combobox");
 const FieldSelector = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const fields = React.useMemo(() => {
         return api.expressionApi.internalApi.getFieldsOfType(props.type);
-    }, []);
+    }, [props.type, api.expressionApi.internalApi]);
     const options = fields.map((field) => ({
         label: field.label ?? field.name,
         value: field.name,
     }));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select_1.Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onChange: (fieldValue) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Combobox_1.SingleCombobox, { "data-name": "column-selector", disabled: props.disabled, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onValueChange: (fieldValue) => {
                 props.onChange(fieldValue);
-            }, options: options })));
+            }, items: options }) }));
 };
 exports.FieldSelector = FieldSelector;

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

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

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PermittedValuesSelector = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const Select_1 = require("../../../components/Select");
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
+const Combobox_1 = require("../../../components/Combobox");
 const PermittedValuesSelector = function (props) {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [refetchKey, setRefetchKey] = React.useState(0);
@@ -102,6 +103,34 @@ const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(Select_1.Select, { "aria-label": "Permitted Values Selector", searchable: props.searchable ?? 'menulist', size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
+    const comboBoxProps = {
+        ['aria-label']: 'Permitted Values Selector',
+        searchable: props.searchable ?? 'menulist',
+        className: props.className,
+        disabled: props.disabled,
+        placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'),
+        ['data-name']: 'permitted-values-selector',
+        items: options,
+        onInputValueChange: onInputChange,
+        onValueChange: handleOnChange,
+        value: props.value ?? '',
+        onOpenChange: (open) => {
+            if (open) {
+                reload();
+            }
+        },
+        isCreatable,
+        isLoading,
+        virtualized: true,
+        resizable: true,
+        showClear: true,
+        // showClear: false,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+    };
+    if (props.isMulti) {
+        return (0, jsx_runtime_1.jsx)(Combobox_1.MultiCombobox, { ...comboBoxProps });
+    }
+    return ((0, jsx_runtime_1.jsx)(Combobox_1.SingleCombobox, { ...comboBoxProps }));
 };
 exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Components/SharedProps/EditableConfigEntityState.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WizardStatus = void 0;
-/// <reference path="../../typings/.d.ts" />
 var WizardStatus;
 (function (WizardStatus) {
     WizardStatus["New"] = "New";

package/src/View/Components/SharedProps/ModuleViewPopupProps.d.ts

@@ -14,7 +14,7 @@ export interface ModuleViewPopupProps<View> extends BaseProps<View> {
 }
 export interface ModuleParams {
     column?: AdaptableColumn;
-    action?: 'New' | 'Edit' | 'Clone';
+    action?: 'New' | 'NewSchedule' | 'Edit' | 'Clone';
     value?: any;
     primaryKeyValues?: any[];
     maxWidth?: number;

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

@@ -10,8 +10,6 @@ export interface StyleComponentProps {
     hidePreview?: boolean;
     headerText?: string;
     Style: AdaptableStyle;
-    /** @deprecated No longer used - font size is always displayed as dropdown */
-    showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }
 export declare const StyleComponent: React.FC<StyleComponentProps>;