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

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

@@ -14,7 +14,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     minMaxRangeValues: {
         min: number;
         max: number;
-    };
+    } | null;
     disabled?: boolean;
     /**
      * When true, the user may delete every band so `ranges` becomes `[]`.
@@ -45,7 +45,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     showRangeDirection?: boolean;
 }
 export interface RangesComponentState {
-    rangesType: 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
+    rangesType: 'None' | 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
@@ -60,6 +60,11 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     setRangeColMin(range: CellColorRange): void;
     setRangeColMax(range: CellColorRange): void;
     addRange(): void;
+    /**
+     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
+     * 0→100), split at the midpoint instead of at the column maximum.
+     */
+    private splitFullSpanRangeAtMidpoint;
     changeColumnComparisonMinValue(value: number): void;
     private onMinColumnSelectedChanged;
     changeColumnComparisonMaxValue(value: number): void;

package/src/View/Components/RangesComponent.js

@@ -19,14 +19,16 @@ const DEFAULT_ZERO_CENTRED_COLORS = {
     NegativeColor: 'rgba(220, 53, 69, 0.55)',
     PositiveColor: 'rgba(40, 167, 69, 0.55)',
 };
+const hasConfiguredRanges = (ranges) => (ranges?.length ?? 0) > 0;
 /**
- * Decide which of the four range tabs should be active given the current props.
+ * Decide which range tab 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)
+ *  3. `allowEmptyRanges` + no bands → No Ranges tab
+ *  4. `rangeValueType === 'Percentage'` → Percentage Range tab
+ *  5. otherwise                    → Number Range tab (default for new styles)
  */
 function deriveInitialRangesType(props) {
     if (props.columnComparison) {
@@ -35,6 +37,9 @@ function deriveInitialRangesType(props) {
     if (props.showZeroCentredTab && props.zeroCentred) {
         return 'ZeroCentred';
     }
+    if (props.allowEmptyRanges && !hasConfiguredRanges(props.ranges)) {
+        return 'None';
+    }
     return props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange';
 }
 class RangesComponent extends React.Component {
@@ -70,6 +75,7 @@ class RangesComponent extends React.Component {
         // 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 renderNoneContent = () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:opacity-70 twa:py-2 twa:max-w-[520px]", children: "No coloured bands configured" }));
         const renderRangesContent = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.ranges?.map((range, index, list) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "end", className: "twa:mb-2", "data-name": "percent-bar-range", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Col Min" })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: this.props.disabled ||
                                         range.Min === 'Col-Min' ||
                                         (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
@@ -101,7 +107,7 @@ class RangesComponent extends React.Component {
         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() }))] }));
+        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: [this.props.allowEmptyRanges && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "None", style: tabFlex, children: renderTabRadio('No Ranges', 'None') })), (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') })), this.props.allowEmptyRanges && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "None", children: renderNoneContent() })), (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;
@@ -129,12 +135,31 @@ class RangesComponent extends React.Component {
                 rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
             });
         }
+        if (this.props.allowEmptyRanges) {
+            const hadRanges = hasConfiguredRanges(prevProps.ranges);
+            const hasRanges = hasConfiguredRanges(this.props.ranges);
+            if (!hadRanges && hasRanges && this.state.rangesType === 'None') {
+                this.setState({
+                    rangesType: this.props.rangeValueType === 'Percentage' ? 'PercentageRange' : 'NumberRange',
+                });
+            }
+            else if (hadRanges &&
+                !hasRanges &&
+                this.state.rangesType !== 'ColumnComparison' &&
+                this.state.rangesType !== 'ZeroCentred') {
+                this.setState({ rangesType: 'None' });
+            }
+        }
     }
     handleRangesModeTab(value) {
         if (value === this.state.rangesType) {
             return;
         }
         this.setState({ rangesType: value });
+        if (value === 'None') {
+            this.props.updateRanges([]);
+            return;
+        }
         if (value === 'ColumnComparison') {
             const columnComparison = {
                 Color: (0, UIHelper_1.getGraySwatchColor)(),
@@ -202,7 +227,9 @@ 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 : 'Col-Min';
+                let newMin = rangeItem.Min === 'Col-Min'
+                    ? (this.props.minMaxRangeValues?.min ?? 0)
+                    : 'Col-Min';
                 return {
                     ...rangeItem,
                     Min: newMin,
@@ -236,32 +263,51 @@ class RangesComponent extends React.Component {
         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)',
-                },
-            ];
+            const seedRanges = this.props.allowEmptyRanges
+                ? [
+                    {
+                        Min: isPercentage ? 0 : 'Col-Min',
+                        Max: isPercentage ? 100 : 'Col-Max',
+                        Color: (0, UIHelper_1.getGraySwatchColor)(),
+                    },
+                ]
+                : (() => {
+                    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);
+                    return [
+                        {
+                            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;
         }
+        // Splitting a single full-width band at the midpoint is easier to reason
+        // about than anchoring the break at the column maximum (e.g. tradeId 1–200 → 100).
+        if (existingRanges.length === 1) {
+            const splitAtMidpoint = this.splitFullSpanRangeAtMidpoint(existingRanges[0]);
+            if (splitAtMidpoint) {
+                this.props.updateRanges(splitAtMidpoint);
+                return;
+            }
+        }
         const lastRange = existingRanges[existingRanges.length - 1];
         let previousRange = lastRange;
         let Min = null;
         if (lastRange.Max === 'Col-Max') {
-            Min = this.props.minMaxRangeValues.max;
+            Min = this.props.minMaxRangeValues?.max ?? 100;
             previousRange = {
                 ...previousRange,
-                Max: this.props.minMaxRangeValues.max,
+                Max: this.props.minMaxRangeValues?.max ?? 100,
             };
         }
         else {
@@ -275,6 +321,32 @@ class RangesComponent extends React.Component {
         const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
     }
+    /**
+     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
+     * 0→100), split at the midpoint instead of at the column maximum.
+     */
+    splitFullSpanRangeAtMidpoint(onlyRange) {
+        const isPercentage = this.props.rangeValueType === 'Percentage';
+        if (isPercentage) {
+            if (onlyRange.Min !== 0 || onlyRange.Max !== 100) {
+                return null;
+            }
+            return [
+                { ...onlyRange, Max: 50 },
+                { Min: 50, Max: 100, Color: (0, UIHelper_1.getGraySwatchColor)() },
+            ];
+        }
+        if (onlyRange.Min !== 'Col-Min' || onlyRange.Max !== 'Col-Max') {
+            return null;
+        }
+        const min = this.props.minMaxRangeValues?.min ?? 0;
+        const max = this.props.minMaxRangeValues?.max ?? 100;
+        const mid = Math.round((min + max) / 2);
+        return [
+            { ...onlyRange, Max: mid },
+            { Min: mid, Max: 'Col-Max', Color: (0, UIHelper_1.getGraySwatchColor)() },
+        ];
+    }
     changeColumnComparisonMinValue(value) {
         const { columnComparison } = this.props;
         columnComparison.MinValue = value;

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

@@ -8,6 +8,7 @@ export interface StyleComponentProps {
     api: AdaptableApi;
     headless?: boolean;
     hidePreview?: boolean;
+    previewText?: React.ReactNode;
     headerText?: string;
     Style: AdaptableStyle;
     UpdateStyle: (style: AdaptableStyle) => void;

package/src/View/Components/StyleComponent.js

@@ -191,6 +191,6 @@ const StyleComponent = (props) => {
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), (0, jsx_runtime_1.jsx)("span", { children: "Alignment" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Preview" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:grid twa:place-items-center", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:inline-block", children: (0, jsx_runtime_1.jsx)(StylePreview_1.StylePreview, { className: "twa:mt-0", styleObject: componentStyle }) }) })] }))] }));
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), (0, jsx_runtime_1.jsx)("span", { children: "Alignment" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Preview" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:grid twa:place-items-center", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:inline-block", children: (0, jsx_runtime_1.jsx)(StylePreview_1.StylePreview, { className: "twa:mt-0", styleObject: componentStyle, children: props.previewText }) }) })] }))] }));
 };
 exports.StyleComponent = StyleComponent;

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

@@ -51,40 +51,66 @@ function ValueSelector(props) {
         toIdentifier,
         value,
     });
-    const notifyChange = (0, react_1.useCallback)(() => {
-        const newSelection = [...selectedMap.keys()];
+    const reorderEnabled = allowReorder !== false;
+    const commitSelection = (0, react_1.useCallback)((nextMap) => {
+        const newSelection = [...nextMap.keys()];
         if (!newSelection.length && selectedOnly) {
             setSelectedOnly(false);
         }
-        onChange(newSelection, new Map(selectedMap));
-    }, [onChange, selectedOnly, selectedMap]);
+        onChange(newSelection, nextMap);
+    }, [onChange, selectedOnly, setSelectedOnly]);
+    const updateSelection = (0, react_1.useCallback)((updater) => {
+        const nextMap = new Map(selectedMap);
+        updater(nextMap);
+        commitSelection(nextMap);
+    }, [commitSelection, selectedMap]);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        return options.filter((option) => {
+            let result = true;
+            if (filter) {
+                result = filter(option, searchInputValue);
+            }
+            result = result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
+            return result;
+        });
+    }, [filter, options, searchInputValue, selectedMap, selectedOnly, toIdentifier]);
+    const renderOptionRow = (option, index, reorderable, itemDomProps) => {
+        const identifier = toIdentifier(option);
+        const label = !reorderEnabled ? preparedToLabel(option) : null;
+        const { onPointerDown, className: itemClassName, ...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)('twa:bg-primary twa:text-primary-foreground twa:rounded-standard twa:p-2', {
+                'twa:mt-1': index,
+                'twa:mt-0': !index,
+            }, itemClassName, `${baseClassName}__option`), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? ((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' } }) })) : null, singleSelect ? ((0, jsx_runtime_1.jsx)(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
+                            updateSelection((next) => {
+                                next.clear();
+                                if (checked) {
+                                    next.set(identifier, option);
+                                }
+                            });
+                        }, children: label })) : ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
+                            updateSelection((next) => {
+                                if (checked) {
+                                    next.set(identifier, option);
+                                }
+                                else {
+                                    next.delete(identifier);
+                                }
+                            });
+                        }, checked: selectedMap.has(identifier), children: label })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:flex-1", children: reorderEnabled ? preparedToLabel(option) : null })] }) }));
+    };
     const renderOption = (option, index) => {
         const identifier = toIdentifier(option);
-        const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
+        if (!reorderEnabled) {
+            return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: renderOptionRow(option, index, false) }, identifier));
+        }
         return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps) => {
                 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)('twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2', {
-                        'twa:mt-1': index,
-                        'twa:mt-0': !index,
-                    }, restDomProps.className, `${baseClassName}__option`), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? ((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' } }) })) : null, singleSelect ? ((0, jsx_runtime_1.jsx)(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
-                                    if (checked) {
-                                        selectedMap.clear();
-                                        selectedMap.set(identifier, option);
-                                    }
-                                    else {
-                                        selectedMap.delete(identifier);
-                                    }
-                                    notifyChange();
-                                }, children: label })) : ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
-                                    if (checked) {
-                                        selectedMap.set(identifier, option);
-                                    }
-                                    else {
-                                        selectedMap.delete(identifier);
-                                    }
-                                    notifyChange();
-                                }, checked: selectedMap.has(identifier), children: label })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:flex-1", children: allowReorder ? preparedToLabel(option) : null })] }) }));
+                return renderOptionRow(option, index, reorderable, {
+                    onPointerDown: reorderable ? onPointerDown : undefined,
+                    ...restDomProps,
+                });
             } }, identifier));
     };
     const showOnlySelectedCheckbox = ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly, children: showSelectedOnlyLabel ?? 'Show Selected Only' }));
@@ -92,60 +118,47 @@ function ValueSelector(props) {
         ...props,
         showOnlySelectedCheckbox,
         onSelectAll: () => {
-            options.forEach((option) => {
-                selectedMap.set(toIdentifier(option), option);
+            updateSelection((next) => {
+                options.forEach((option) => {
+                    next.set(toIdentifier(option), option);
+                });
             });
-            notifyChange();
         },
         onClearOption: (id) => {
-            selectedMap.delete(id);
-            notifyChange();
+            updateSelection((next) => {
+                next.delete(id);
+            });
         },
         onClear: () => {
-            selectedMap.clear();
-            notifyChange();
+            updateSelection((next) => {
+                next.clear();
+            });
         },
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-1", children: showFilterInput && filter ? ((0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" })) }), (0, exports.renderSelectionSection)(selectionSectionProps), (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-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    const optionList = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)("div", { children: filteredOptions.map(renderOption) }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mb-1", children: showFilterInput && filter ? ((0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" })) }), (0, exports.renderSelectionSection)(selectionSectionProps), reorderEnabled ? ((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-auto`, flexDirection: "column", children: (0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: dnd_1.defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                             proxyElement.classList.add('twa:shadow-md');
                         }, onDrop: (_sortedIndexes) => {
                             const selection = [];
                             const extraKeys = [];
-                            for (const [key, value] of selectedMap) {
-                                if (value != null) {
+                            for (const [key, mapValue] of selectedMap) {
+                                if (mapValue != null) {
                                     selection.push(key);
                                 }
                                 else {
-                                    // null/non-existent keys have to be stored separately
                                     extraKeys.push(key);
                                 }
                             }
-                            const clone = new Map(selectedMap);
-                            // const newSelection: ID_TYPE[] = ArrayExtensions.reorderArray(
-                            //   selection,
-                            //   dragIndex,
-                            //   dropIndex
-                            // );
                             const newSelection = _sortedIndexes
                                 .map((index) => selection[index])
                                 .filter((x) => x != null);
                             newSelection.push(...extraKeys);
-                            selectedMap.clear();
+                            const nextMap = new Map();
                             newSelection.forEach((key) => {
-                                selectedMap.set(key, clone.get(key));
+                                nextMap.set(key, selectedMap.get(key));
                             });
-                            notifyChange();
-                        }, children: (listDomProps) => ((0, jsx_runtime_1.jsx)("div", { ...listDomProps, children: options
-                                .filter((option) => {
-                                let result = true;
-                                if (filter) {
-                                    result = filter(option, searchInputValue);
-                                }
-                                result =
-                                    result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
-                                return result;
-                            })
-                                .map(renderOption) })) }) }) })] }));
+                            commitSelection(nextMap);
+                        }, children: (listDomProps) => (0, jsx_runtime_1.jsx)("div", { ...listDomProps, children: filteredOptions.map(renderOption) }) }) }) })) : (optionList)] }));
 }
 const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -4,14 +4,13 @@ exports.CustomSortColumnWizardSection = exports.isValidCustomSortColumn = export
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const AdaptableFormControlTextClear_1 = require("../../Components/Forms/AdaptableFormControlTextClear");
+const Card_1 = require("../../../components/Card");
 const renderCustomSortColumn = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
@@ -34,16 +33,12 @@ const CustomSortColumnWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sortableCols = React.useMemo(() => {
         const sortableColumns = api.columnApi.getSortableColumns();
-        const nonComparerSortableColumns = sortableColumns.filter((c) => {
-            return api.customSortApi.internalApi.columnHasCustomSortComparer(c.columnId);
-        });
         const customSorts = api.customSortApi.getCustomSorts();
         const columnSortComparers = api.optionsApi.getCustomSortOptions().customSortComparers || [];
         const usedColumnIds = [
             ...customSorts.map((customSort) => customSort.ColumnId),
             ...columnSortComparers.map((comparer) => api.columnScopeApi.getColumnIdsInScope(comparer.scope)),
         ];
-        // filter out used colum ids, but include the current one
         return sortableColumns.filter((column) => {
             if (api.customSortApi.internalApi.columnHasCustomSortComparer(column.columnId)) {
                 return false;
@@ -63,12 +58,12 @@ const CustomSortColumnWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { flex: 1, minHeight: 0 }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-3" }), (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                                    props.onChange({
-                                        ...data,
-                                        SortedValues: [],
-                                        ColumnId: ids[0],
-                                    });
-                                }, allowReorder: false })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Custom Sort" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:max-w-[300px] twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the column to apply the Custom Sort to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:px-2 twa:pb-2 twa:gap-2", children: (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", className: "twa:flex-1" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:px-2 twa:pb-2", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                                props.onChange({
+                                    ...data,
+                                    SortedValues: [],
+                                    ColumnId: ids[0],
+                                });
+                            }, allowReorder: false }) })] })] }));
 };
 exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Loader_1 = require("../../../components/Loader");
-const Tabs_1 = require("../../../components/Tabs");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const ValueSelector_1 = require("../../Components/ValueSelector");
@@ -14,6 +13,8 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../.././Utilities/Extensions/ArrayExtensions"));
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const Tag_1 = require("../../../components/Tag");
+const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'At least one value is required for the Custom Sort order.';
@@ -33,7 +34,6 @@ const CustomSortValuesWizardSection = (props) => {
     (0, react_1.useEffect)(() => {
         let isMounted = true;
         (async () => {
-            // for sync and very fast resolving promises does not make sense to show a loader
             setDistinctValues([]);
             const newValues = (await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.gridApi.internalApi.getDistinctValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true))) ?? [];
             if (!isMounted) {
@@ -76,11 +76,11 @@ const CustomSortValuesWizardSection = (props) => {
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
     const className = (0, join_1.default)(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, className: className, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Sort Order" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [isDistinctValuesLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { children: "Loading" }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
-                            props.onChange({
-                                ...data,
-                                SortedValues,
-                            });
-                        } })] })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: (0, join_1.default)('twa:flex-1 twa:min-h-0', className), children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Sort Order" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Specify the custom sort order \u2014 drag selected items to modify order" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: [isDistinctValuesLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { children: "Loading" }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
+                                props.onChange({
+                                    ...data,
+                                    SortedValues,
+                                });
+                            } })] })] }) }));
 };
 exports.CustomSortValuesWizardSection = CustomSortValuesWizardSection;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -198,7 +198,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
     const mainPrimaryKeyColumnHeader = mainAdaptableInstance.api.columnApi.getPrimaryKeyColumn()?.friendlyName ?? 'Row ID';
     const options = {
         loading: false,
-        overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-text-on-primary);">No Data Changes</div>',
+        overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-primary-foreground);">No Data Changes</div>',
         defaultColDef: {
             floatingFilter: true,
             filter: true,

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.js

@@ -9,12 +9,12 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const icons_1 = require("../../../../components/icons");
 const InfiniteTable_1 = require("../../../../components/InfiniteTable");
-const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const AdaptablePopover_1 = require("../../../AdaptablePopover");
 const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
 const Flex_1 = require("../../../../components/Flex");
+const Card_1 = require("../../../../components/Card");
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -66,7 +66,6 @@ const ColumnsSection = (props) => {
             abColumn: {
                 header: 'AdapTable Column',
                 render: (params) => {
-                    // filter out used columns
                     const availableColumns = allColumns
                         .filter((c) => !props.columnsMap?.find((cm) => cm.abColumn === c.value))
                         .map((col) => {
@@ -108,17 +107,17 @@ const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-error", children: ["No Data has been Imported. Go to ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide Data"] }) }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-error", children: ["No data has been imported. Go to the ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide data."] }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2 twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field', children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
-                                valid: 'end',
-                                type: 'end',
-                            }, columnTypes: {
-                                default: {
-                                    minWidth: 100,
-                                    defaultFlex: 1,
-                                },
-                            }, domProps: tableDOMProps, columns: columns }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Map imported fields to AdapTable columns and choose which to include" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:min-h-[300px]", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Mapping" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Match each data field to an AdapTable column. The primary key column cannot be excluded." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field', children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
+                                        valid: 'end',
+                                        type: 'end',
+                                    }, columnTypes: {
+                                        default: {
+                                            minWidth: 100,
+                                            defaultFlex: 1,
+                                        },
+                                    }, domProps: tableDOMProps, columns: columns }) }) })] }) })] }));
 };
 exports.ColumnsSection = ColumnsSection;
 exports.ColumnsSection.displayName = 'ColumnsSection';