@adaptabletools/adaptable 23.0.20 → 23.0.22

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -118,6 +118,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!result.skipDefaultSearch,
                 searchValueUsedInFilterValue: prev.searchValueUsedInFilterValue || searchValueUsedInFilterValue,
                 hasMore: !!result.hasMore,
+                renderInputValues: result.renderInputValues,
                 dataLoadIsComplete: true,
             }));
         })
@@ -171,6 +172,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!distinctFilterDisplayValues.skipDefaultSearch,
                 searchValueUsedInFilterValue,
                 hasMore: !!distinctFilterDisplayValues.hasMore,
+                renderInputValues: distinctFilterDisplayValues.renderInputValues,
             });
             lastRequestedOffsetRef.current = 0;
             setIsDistinctColumnValuesLoading(false);
@@ -183,17 +185,17 @@ export function useDistinctFilterColumnValues(options) {
         if (!quickFilterValues.hasMore || !quickFilterValues.dataLoadIsComplete) {
             return;
         }
-        let scrollEl = null;
         let debounceTimer;
-        const onScroll = () => {
+        const onScroll = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element) || !target.matches(FILTER_VALUES_SCROLL_SELECTOR)) {
+                return;
+            }
             if (debounceTimer) {
                 clearTimeout(debounceTimer);
             }
             debounceTimer = setTimeout(() => {
-                if (!scrollEl) {
-                    return;
-                }
-                const el = scrollEl;
+                const el = target;
                 const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
                 if (remaining > NEAR_END_PX) {
                     return;
@@ -201,45 +203,14 @@ export function useDistinctFilterColumnValues(options) {
                 loadMoreValues();
             }, SCROLL_DEBOUNCE_MS);
         };
-        const tryAttach = () => {
-            scrollEl = document.querySelector(FILTER_VALUES_SCROLL_SELECTOR);
-            if (scrollEl) {
-                scrollEl.addEventListener('scroll', onScroll, { passive: true });
-                return true;
-            }
-            return false;
-        };
-        let attached = tryAttach();
-        const raf = attached
-            ? undefined
-            : requestAnimationFrame(() => {
-                attached = tryAttach();
-            });
-        const timeout = attached
-            ? undefined
-            : setTimeout(() => {
-                tryAttach();
-            }, 50);
+        document.addEventListener('scroll', onScroll, { capture: true, passive: true });
         return () => {
-            if (raf != null) {
-                cancelAnimationFrame(raf);
-            }
-            if (timeout != null) {
-                clearTimeout(timeout);
-            }
             if (debounceTimer) {
                 clearTimeout(debounceTimer);
             }
-            if (scrollEl) {
-                scrollEl.removeEventListener('scroll', onScroll);
-            }
+            document.removeEventListener('scroll', onScroll, { capture: true });
         };
-    }, [
-        quickFilterValues.hasMore,
-        quickFilterValues.dataLoadIsComplete,
-        quickFilterValues.values.length,
-        loadMoreValues,
-    ]);
+    }, [quickFilterValues.hasMore, quickFilterValues.dataLoadIsComplete, loadMoreValues]);
     useEffect(() => {
         if (!hasMoreRef.current ||
             !quickFilterValues.dataLoadIsComplete ||
@@ -366,7 +337,10 @@ export const FloatingFilterValues = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch } = quickFilterValues;
+    const { skipDefaultSearch, renderInputValues } = quickFilterValues;
+    const renderComboboxInputValues = React.useMemo(() => renderInputValues
+        ? (items) => renderInputValues({ selectedValues: items, selectedCount: items.length })
+        : undefined, [renderInputValues]);
     if (props.columnId === AG_GRID_GROUPED_COLUMN) {
         if (Array.isArray(props.value) && !props.value.every((value) => Array.isArray(value))) {
             logOnce(`All the inputs for the IN predicate for the column "${props.columnId}" need to be arrays. Example:
@@ -389,11 +363,17 @@ export const FloatingFilterValues = (props) => {
                 ...props.selectProps,
                 'data-name': 'Select Values',
                 showSelectedCount: true,
+                ...(renderComboboxInputValues
+                    ? { renderInputValues: renderComboboxInputValues }
+                    : {}),
                 filter: skipDefaultSearch ? null : undefined,
                 onInputValueChange: onInputChange,
             }
             : {
                 ...props.selectProps,
+                ...(renderComboboxInputValues
+                    ? { renderInputValues: renderComboboxInputValues }
+                    : {}),
                 filter: skipDefaultSearch ? null : undefined,
                 onInputValueChange: onInputChange,
             }, disabled: props.disabled, onMenuOpen: onMenuOpen, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -10,6 +10,7 @@ import { useMemo } from 'react';
 import { GridFilterCombobox } from '../../../components/Combobox';
 import { isEmbeddedColumnFilterLocation } from '../ColumnFilter/columnFilterLocation';
 import { useColumnFilterLocation } from '../ColumnFilter/AdaptableColumnFilter';
+import { useAdaptable } from '../../AdaptableContext';
 import { GridFilterTreeDropdown } from '../../../components/Tree/TreeDropdown';
 const baseClassName = 'ab-ListBoxFilterForm';
 function toDateDisplayValue(values) {
@@ -29,9 +30,11 @@ const dateOnChangeParser = (value) => {
 const EMPTY_ARRAY = [];
 export const ColumnValuesSelect = (props) => {
     const location = useColumnFilterLocation();
+    const adaptable = useAdaptable();
     const column = props.column;
     let selectedColumnValues = props.value || EMPTY_ARRAY;
     const rawOptionsFromProps = Array.isArray(props.options) ? props.options : EMPTY_ARRAY;
+    const lookupItems = adaptable?.api.filterApi.columnFilterApi.internalApi.getRememberedLazyInFilterValues(column.columnId) ?? EMPTY_ARRAY;
     const optionsFromProps = useMemo(() => {
         if (rawOptionsFromProps === EMPTY_ARRAY) {
             return rawOptionsFromProps;
@@ -88,19 +91,18 @@ export const ColumnValuesSelect = (props) => {
     }
     const options = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN
         ? dateOptions
-        : optionsFromProps.filter((distinctValue) => {
-            let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
-            if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-                isActive = selectedColumnValues.some((dateStr) => isEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
+        : optionsFromProps;
+    if (column.dataType !== 'date' && column.columnId !== AG_GRID_GROUPED_COLUMN) {
+        for (const selected of selectedColumnValues) {
+            if (options.some((option) => option.value === selected)) {
+                value.push(selected);
+                continue;
             }
-            if (StringExtensions.IsNullOrEmpty(distinctValue.value)) {
-                return false;
-            }
-            if (isActive) {
-                value.push(distinctValue.value);
-            }
-            return true;
-        });
+            const dateOption = options.find((option) => option.value instanceof Date &&
+                isEqual(parseDateValue(selected), parseDateValue(option.value)));
+            value.push(dateOption ? dateOption.value : selected);
+        }
+    }
     const treeDropdownToDisplayValue = React.useMemo(() => {
         if (column.dataType === 'date') {
             return toDateDisplayValue;
@@ -115,9 +117,9 @@ export const ColumnValuesSelect = (props) => {
             }
         }
         : undefined;
-    const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (_jsx(GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, resizable: true, onValueChange: column.dataType === 'date'
+    const component = column.dataType === 'date' || column.columnId === AG_GRID_GROUPED_COLUMN ? (_jsx(GridFilterTreeDropdown, { toDisplayValue: treeDropdownToDisplayValue, renderInputValues: selectProps.renderInputValues, resizable: true, onValueChange: column.dataType === 'date'
             ? (value) => props.onChange(dateOnChangeParser(value))
-            : props.onChange, items: options, value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
+            : props.onChange, items: options, value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, lookupItems: lookupItems, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
     return (_jsx("div", { className: join(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             if (e.key === 'Tab') {
                 e.stopPropagation();

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

@@ -64,7 +64,10 @@ export const PredicateEditor = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch } = quickFilterValues;
+    const { skipDefaultSearch, renderInputValues } = quickFilterValues;
+    const renderComboboxInputValues = React.useMemo(() => renderInputValues
+        ? (items) => renderInputValues({ selectedValues: items, selectedCount: items.length })
+        : undefined, [renderInputValues]);
     return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: props.predicate?.PredicateId ?? null, onValueChange: (value) => {
                             const option = predicateDefsOptions.find((x) => x.value === value);
                             props.onChange({
@@ -75,5 +78,8 @@ export const PredicateEditor = (props) => {
                         } })] }), _jsx(Flex, { children: currentPredicateDef?.inputs?.map((predicateDefInput, index) => (_jsxs(_Fragment, { children: [index > 0 && _jsx(HelpBlock, { className: "twa:m-2", children: "AND" }), _jsx(Flex, { className: "twa:flex-1", flexDirection: "column", children: _jsx(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) }) }, index)] }))) }), adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (_jsx(Box, { className: "twa:mt-2", children: _jsx(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, onMenuOpen: onMenuOpen, selectProps: {
                         onInputValueChange: onInputChange,
                         filter: skipDefaultSearch ? null : undefined,
+                        ...(renderComboboxInputValues
+                            ? { renderInputValues: renderComboboxInputValues }
+                            : {}),
                     }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange }) }))] }));
 };

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -71,7 +71,7 @@ const appendNumberFormatOptions = (items, options) => {
         });
     }
     appendDisplayFormatItem(items, 'Content', options.Content);
-    if (options.Multiplier != null && options.Multiplier !== 1) {
+    if (options.Multiplier != null && options.Multiplier !== 0 && options.Multiplier !== 1) {
         items.push({ label: 'Multiplier', value: String(options.Multiplier) });
     }
     appendDisplayFormatItem(items, 'Parentheses', options.Parentheses);
@@ -342,7 +342,11 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
                                                     : undefined) }) }), _jsx(FormRow, { label: "Integer Digits", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
                                                     ? clamp(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [_jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) }), _jsx(FormRow, { label: "Prefix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Zero Display", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), _jsxs(FormLayout, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [_jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: typeof resolved.Options.Multiplier === 'number'
+                                                    ? resolved.Options.Multiplier
+                                                    : '', onChange: (e) => setFormatOption('Multiplier', StringExtensions.IsNumeric(e.currentTarget.value)
+                                                    ? Number(e.currentTarget.value)
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Prefix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Zero Display", children: _jsx(Input, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
                                                     resolved.Options.ZeroDisplay === '0'
                                                     ? '0'
                                                     : resolved.Options.ZeroDisplay, onChange: (e) => {

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -291,6 +291,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     autoSizeColumns(columnIds?: string[]): void;
     autoSizeAllColumns(): void;
     getDistinctValuesForColumn(column: AdaptableColumn): Promise<GridCell[]>;
+    private getSelectedInFilterValues;
     getDistinctFilterValuesForColumn(options: {
         column: AdaptableColumn;
         currentSearchValue: string;

package/src/agGrid/AdaptableAgGrid.js

@@ -2372,6 +2372,18 @@ export class AdaptableAgGrid {
     async getDistinctValuesForColumn(column) {
         return this.getDistinctGridCellsForColumn(column);
     }
+    getSelectedInFilterValues(column) {
+        const columnFilterApi = this.api.filterApi.columnFilterApi;
+        const columnFilter = columnFilterApi.getColumnFilterForColumn(column.columnId);
+        const filterHandler = columnFilterApi.internalApi.getAdaptableFilterHandler(column.columnId);
+        const inputs = (columnFilter?.Predicates ?? [])
+            .filter((predicate) => predicate.PredicateId === 'In' || predicate.PredicateId === 'NotIn')
+            .flatMap((predicate) => (Array.isArray(predicate.Inputs) ? predicate.Inputs : []));
+        return inputs.map((value) => {
+            const known = filterHandler?.getRememberedLazyInFilterValue(value);
+            return known ?? { value, label: value == null ? '' : String(value) };
+        });
+    }
     async getDistinctFilterValuesForColumn(options) {
         const { column, previousResult } = options;
         const offset = options.offset ?? 0;
@@ -2426,6 +2438,9 @@ export class AdaptableAgGrid {
                 previousFilterResult: previousResult,
                 offset,
                 limit,
+                get selectedValues() {
+                    return self.getSelectedInFilterValues(column);
+                },
                 get currentSearchValue() {
                     return options.currentSearchValue;
                 },

package/src/agGrid/AdaptableFilterHandler.d.ts

@@ -1,12 +1,13 @@
 import { DoesFilterPassParams, FilterHandler, FilterHandlerParams } from 'ag-grid-enterprise';
 import { AdaptableApi } from '../Api/AdaptableApi';
-import { InFilterValueResult } from '../AdaptableOptions/FilterOptions';
+import { InFilterValue, InFilterValueResult } from '../AdaptableOptions/FilterOptions';
 import { ColumnFilter } from '../types';
 export declare class AdaptableFilterHandler implements FilterHandler<any, any, ColumnFilter> {
     private adaptableApi;
     colId: string;
     private filterDisplayValuesResult;
     private previousFilterDisplayValuesResult;
+    private rememberedInFilterValues;
     constructor(adaptableApi: AdaptableApi);
     init(params: FilterHandlerParams): void;
     doesFilterPass(params: DoesFilterPassParams<any, any, ColumnFilter>): boolean;
@@ -22,6 +23,9 @@ export declare class AdaptableFilterHandler implements FilterHandler<any, any, C
         offset?: number;
         limit?: number;
     }): Promise<InFilterValueResult>;
+    private rememberSelectedLazyInFilterValues;
+    getRememberedLazyInFilterValues(): InFilterValue[];
+    getRememberedLazyInFilterValue(value: any): InFilterValue | undefined;
     onNewRowsLoaded(): void;
     onAnyFilterChanged(): void;
     resetFilterDisplayValues(): void;

package/src/agGrid/AdaptableFilterHandler.js

@@ -3,6 +3,7 @@ export class AdaptableFilterHandler {
     colId;
     filterDisplayValuesResult;
     previousFilterDisplayValuesResult;
+    rememberedInFilterValues = new Map();
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
     }
@@ -44,6 +45,7 @@ export class AdaptableFilterHandler {
         return this.fetchFilterDisplayValues(options);
     }
     async fetchFilterDisplayValues(options) {
+        this.rememberSelectedLazyInFilterValues(undefined);
         return this.adaptableApi.gridApi.internalApi
             .getDistinctFilterDisplayValuesForColumn({
             columnId: this.colId,
@@ -55,10 +57,51 @@ export class AdaptableFilterHandler {
             limit: options.limit,
         })
             .then((result) => {
+            this.rememberSelectedLazyInFilterValues(result);
             this.filterDisplayValuesResult = result;
             return result;
         });
     }
+    rememberSelectedLazyInFilterValues(result) {
+        if (!this.adaptableApi.optionsApi.getFilterOptions().customInFilterValues) {
+            return;
+        }
+        const paginatedResult = result ?? this.getLastCachedFilterDisplayValues();
+        if (paginatedResult?.hasMore === undefined) {
+            return;
+        }
+        const columnFilter = this.adaptableApi.filterApi.columnFilterApi.getColumnFilterForColumn(this.colId);
+        const selectedInputs = new Set((columnFilter?.Predicates ?? [])
+            .filter((predicate) => predicate.PredicateId === 'In' || predicate.PredicateId === 'NotIn')
+            .flatMap((predicate) => (Array.isArray(predicate.Inputs) ? predicate.Inputs : [])));
+        for (const value of this.rememberedInFilterValues.keys()) {
+            if (!selectedInputs.has(value)) {
+                this.rememberedInFilterValues.delete(value);
+            }
+        }
+        if (!selectedInputs.size) {
+            return;
+        }
+        const visit = (values) => {
+            if (!values) {
+                return;
+            }
+            for (const item of values) {
+                if (selectedInputs.has(item.value)) {
+                    this.rememberedInFilterValues.set(item.value, item);
+                }
+                visit(item.children);
+            }
+        };
+        visit(this.getLastCachedFilterDisplayValues()?.values);
+        visit(result?.values);
+    }
+    getRememberedLazyInFilterValues() {
+        return Array.from(this.rememberedInFilterValues.values());
+    }
+    getRememberedLazyInFilterValue(value) {
+        return this.rememberedInFilterValues.get(value);
+    }
     onNewRowsLoaded() {
         this.resetFilterDisplayValues();
     }
@@ -83,5 +126,6 @@ export class AdaptableFilterHandler {
     destroy() {
         this.filterDisplayValuesResult = undefined;
         this.previousFilterDisplayValuesResult = undefined;
+        this.rememberedInFilterValues.clear();
     }
 }

package/src/components/Combobox/comboboxUtils.d.ts

@@ -57,6 +57,12 @@ export type ComboboxCommonProps<T extends ComboboxItemType> = {
      * is cleared on close and every open starts from the full list.
      */
     persistFilterOnReopen?: boolean;
+    /**
+     * Extra items used only to resolve selected values that are not in `items`
+     * (e.g. selected In Filter values hidden by the current search page).
+     * Not shown in the dropdown list.
+     */
+    lookupItems?: T[];
     /**
      * Custom filter function, or `null` to disable built-in filtering
      * (e.g. when options are already filtered server-side).

package/src/components/Combobox/comboboxUtils.js

@@ -17,7 +17,7 @@ export function valueToItem(stringValue, lookup) {
 export function valueToItems(stringValues, lookup) {
     if (stringValues == null)
         return undefined;
-    return stringValues.map((v) => lookup.get(v)).filter(Boolean);
+    return stringValues.map((v) => lookup.get(v) ?? { value: v, label: String(v ?? '') });
 }
 export function toStringValue(item) {
     return item?.value ?? null;

package/src/components/Combobox/index.d.ts

@@ -33,7 +33,18 @@ export type MultiComboboxProps<T extends ComboboxItemType> = Omit<AdaptableCombo
 } & ComboboxDataProps<T>;
 export declare const MultiCombobox: <T extends ComboboxItemType>(props: MultiComboboxProps<T>) => React.JSX.Element;
 export type GridFilterComboboxProps<T extends ComboboxItemType> = Omit<MultiComboboxProps<T>, 'showSelectAllCheckbox' | 'searchable' | 'renderInput' | 'renderInputValues'> & {
+    /**
+     * When true, prefix the selected values in the collapsed input with the
+     * selected count (e.g. `(3)`). Ignored when `renderInputValues` is provided.
+     */
     showSelectedCount?: boolean;
+    /**
+     * Custom content for the selected values in the collapsed input (rendered inside the
+     * standard wrapper). When provided, the built-in selected count is not rendered -
+     * include one in the returned content if needed.
+     * When omitted, selected labels are joined with a comma.
+     */
+    renderInputValues?: (items: T[]) => React.ReactNode;
 };
 export declare const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME: string;
 export declare const GridFilterCombobox: <T extends ComboboxItemType>(props: GridFilterComboboxProps<T>) => React.JSX.Element;

package/src/components/Combobox/index.js

@@ -196,9 +196,18 @@ const useGetAllItems = (props) => {
             ?
                 [].concat(props.items)
             : props.items;
+    const lookupItems = props.lookupItems;
     const itemByValue = useMemo(() => {
-        return new Map(allItems.map((item) => [item.value, item]));
-    }, [allItems]);
+        const map = new Map(allItems.map((item) => [item.value, item]));
+        if (lookupItems) {
+            for (const item of lookupItems) {
+                if (!map.has(item.value)) {
+                    map.set(item.value, item);
+                }
+            }
+        }
+        return map;
+    }, [allItems, lookupItems]);
     const creatableInput = useCreatable(props, allItems, itemByValue);
     const { inputValue, onInputValueChange } = useMenulistFilterInput(props, {
         inputValue: creatableInput.inputValue,
@@ -558,7 +567,7 @@ export const MultiCombobox = (props) => {
 };
 export const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME = cn('twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 'twa:[.ab-FloatingFilter_&]:[container-type:size]');
 export const GridFilterCombobox = (props) => {
-    const { showSelectedCount = false, placeholder = 'Select...', ...comboboxProps } = props;
+    const { showSelectedCount = false, placeholder = 'Select...', renderInputValues: renderInputValuesProp, ...comboboxProps } = props;
     const sharedProps = {
         placeholder,
         showSelectAllCheckbox: true,
@@ -570,11 +579,13 @@ export const GridFilterCombobox = (props) => {
         showClear: false,
         showTrigger: false,
         renderInputValues: (items) => {
-            let children = items.map((item) => getItemTextLabel(item)).join(', ');
+            let children = renderInputValuesProp
+                ? renderInputValuesProp(items)
+                : items.map((item) => getItemTextLabel(item)).join(', ');
             if (items.length === 0) {
                 children = (_jsx("span", { "data-name": "placeholder", className: "twa:text-muted-foreground", children: placeholder }));
             }
-            return (_jsx(_Fragment, { children: _jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && items.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", items.length, ")"] })), children] }) }));
+            return (_jsx(_Fragment, { children: _jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && !renderInputValuesProp && items.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("span", { "data-name": "multiple-values-count", children: ["(", items.length, ")"] }), ' '] })), children] }) }));
         },
     };
     const className = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, comboboxProps.className);

package/src/components/Tree/TreeDropdown/index.d.ts

@@ -48,7 +48,18 @@ export type GridFilterTreeDropdownProps<T extends TreeListItem<any>> = Omit<NewT
     /**
      * When true, prefix the selected-values summary with `(N)` where N is the
      * number of selected leaves. Mirrors `GridFilterCombobox.showSelectedCount`.
+     * Ignored when `renderInputValues` is provided.
      */
     showSelectedCount?: boolean;
+    /**
+     * Custom content for the selected values in the collapsed input (rendered inside the
+     * standard wrapper). Mirrors `GridFilterCombobox.renderInputValues`: called with one
+     * item per selected leaf (`value` is the full leaf path, `label` its display label).
+     * When provided, the built-in selected count is not rendered.
+     */
+    renderInputValues?: (items: {
+        value: any;
+        label: string;
+    }[]) => React.ReactNode;
 };
 export declare function GridFilterTreeDropdown<T extends TreeListItem<any>>(props: GridFilterTreeDropdownProps<T>): React.JSX.Element;

package/src/components/Tree/TreeDropdown/index.js

@@ -399,17 +399,20 @@ export function TreeDropdown(props) {
     return (_jsx(MultiCombobox, { ...comboboxProps }));
 }
 export function GridFilterTreeDropdown(props) {
-    const { showSelectedCount = false, placeholder = 'Select...', className, ...rest } = props;
+    const { showSelectedCount = false, placeholder = 'Select...', renderInputValues: renderInputValuesProp, className, ...rest } = props;
     const renderSelectedValues = useCallback(({ selectedLeafPaths, getLabelForPath }) => {
         let children;
         if (selectedLeafPaths.length === 0) {
             children = (_jsx("span", { "data-name": "placeholder", className: "twa:text-muted-foreground", children: placeholder }));
         }
+        else if (renderInputValuesProp) {
+            children = renderInputValuesProp(selectedLeafPaths.map((path) => ({ value: path, label: getLabelForPath(path) })));
+        }
         else {
             children = selectedLeafPaths.map((path) => getLabelForPath(path)).join(', ');
         }
-        return (_jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && selectedLeafPaths.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
-    }, [placeholder, showSelectedCount]);
+        return (_jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && !renderInputValuesProp && selectedLeafPaths.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
+    }, [placeholder, showSelectedCount, renderInputValuesProp]);
     const mergedClassName = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, className);
     return (_jsx(TreeDropdown, { ...rest, placeholder: placeholder, className: mergedClassName, showClear: rest.showClear ?? false, resizable: rest.resizable ?? true, renderSelectedValues: renderSelectedValues }));
 }

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1786537581701 || Date.now(),
-    VERSION: "23.0.20" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1789246590646 || Date.now(),
+    VERSION: "23.0.22" || '--current-version--',
 };