@adaptabletools/adaptable 23.0.16 → 23.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.16",
+  "version": "23.0.18",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -190,6 +190,8 @@ export interface IAdaptable {
         column: AdaptableColumn;
         currentSearchValue: string;
         previousResult: InFilterValueResult | undefined;
+        offset?: number;
+        limit?: number;
     }): Promise<InFilterValueResult>;
     getGridCellFromRowNode(rowNode: IRowNode, columnId: string): GridCell | undefined;
     getRawValueFromRowNode(rowNode: IRowNode, columnId: string): any;

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -200,6 +200,12 @@ export interface InFilterValueResult {
      * If true, AdapTable will not filter the list using the current search value
      */
     skipDefaultSearch?: boolean;
+    /**
+     * When true, scrolling near the end of the list re-invokes `customInFilterValues`
+     * with a larger `offset`. New `values` are appended (same search).
+     * Search changes reset the list and set `offset` back to 0.
+     */
+    hasMore?: boolean;
 }
 /**
  * Information about items in the IN Column Filter
@@ -267,8 +273,21 @@ export interface CustomInFilterValuesContext<TData = any> extends AdaptableColum
      * The result returned by the previous invocation of `FilterOptions.customInFilterValues`, if any.
      *
      * Useful for avoiding expensive recomputations (e.g. when filtering is async or server-side).
+     * Opaque pagination cursors may also be stashed on this object and read on the next call.
      */
     previousFilterResult?: InFilterValueResult;
+    /**
+     * Zero-based index of the first value to return.
+     * Reset to 0 when the dropdown opens or `currentSearchValue` changes.
+     * Increased when loading the next page (`hasMore` is true on the return object - this means lazy pagination is enabled).
+     * @defaultValue 0
+     */
+    offset: number;
+    /**
+     * Suggested page size. Consumers may return fewer or more items. Useful when `hasMore` is true on the return object (lazy pagination).
+     * @defaultValue 1000
+     */
+    limit: number;
 }
 /**
  * List of Editors that can be used when creating the Grid Filter

package/src/Api/Internal/ColumnFilterInternalApi.d.ts

@@ -53,6 +53,8 @@ export declare class ColumnFilterInternalApi extends ApiBase {
     getColumnFilterValues(options: {
         columnId: string;
         currentSearchValue: string;
+        offset?: number;
+        limit?: number;
     }): Promise<InFilterValueResult>;
     shouldManuallyApplyColumnFilter(columnId: string): boolean;
     getAdaptableFilterHandler(columnId: string): AdaptableFilterHandler | undefined;

package/src/Api/Internal/ColumnFilterInternalApi.js

@@ -199,6 +199,8 @@ export class ColumnFilterInternalApi extends ApiBase {
                 return options.currentSearchValue;
             },
             previousResult: undefined,
+            offset: options.offset,
+            limit: options.limit,
         };
         const columnFilterHandler = this.getAgGridApi().getColumnFilterHandler(options.columnId);
         if (!columnFilterHandler) {

package/src/Api/Internal/GridInternalApi.d.ts

@@ -30,6 +30,8 @@ export declare class GridInternalApi extends ApiBase {
         columnId: string;
         currentSearchValue: string;
         previousResult: InFilterValueResult | undefined;
+        offset?: number;
+        limit?: number;
     }): Promise<InFilterValueResult>;
     getDistinctValuesForColumn(columnId: string): Promise<GridCell[]> | undefined;
     getDistinctEditDisplayValuesForColumn(options: {

package/src/Api/Internal/GridInternalApi.js

@@ -28,6 +28,8 @@ export class GridInternalApi extends ApiBase {
                 return options.currentSearchValue;
             },
             previousResult: options.previousResult,
+            offset: options.offset,
+            limit: options.limit,
         });
         return inFilterValues || { values: [] };
     }

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { ColumnValuesSelectProps } from '../../FilterForm/ListBoxFilterForm';
+/** Suggested page size passed to `customInFilterValues` as `context.limit`. */
+export declare const IN_FILTER_VALUES_PAGE_SIZE = 1000;
 export interface FloatingFilterValuesProps {
     columnId: string;
     disabled: boolean;
@@ -19,6 +21,7 @@ export declare function useDistinctFilterColumnValues(options: {
     searchValueRef?: React.MutableRefObject<string>;
 }): {
     isDistinctColumnValuesLoading: boolean;
+    isLoadingMore: boolean;
     quickFilterValues: {
         values: {
             value: any;
@@ -27,6 +30,7 @@ export declare function useDistinctFilterColumnValues(options: {
         dataLoadIsComplete: boolean;
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
+        hasMore: boolean;
     };
     setQuickFilterValues: React.Dispatch<React.SetStateAction<{
         values: {
@@ -36,6 +40,7 @@ export declare function useDistinctFilterColumnValues(options: {
         dataLoadIsComplete: boolean;
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
+        hasMore: boolean;
     }>>;
     triggerValuesLoad: (options?: {
         usePrevious: boolean;

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

@@ -12,6 +12,40 @@ const logOnce = (message, loggingFn) => {
     loggingFn(message);
     onceFlags[message] = true;
 };
+export const IN_FILTER_VALUES_PAGE_SIZE = 1000;
+const NEAR_END_PX = 100;
+const SCROLL_DEBOUNCE_MS = 75;
+const LOADING_MORE_INDICATOR_ATTR = 'data-adaptable-in-filter-loading-more';
+const FILTER_VALUES_SCROLL_SELECTOR = '[role="dialog"][data-slot="combobox-content"] [class*="twa:overflow-y-auto"]';
+const FILTER_VALUES_POPUP_SELECTOR = '[role="dialog"][data-slot="combobox-content"]';
+const createLoadingMoreIndicator = () => {
+    const el = document.createElement('div');
+    el.setAttribute(LOADING_MORE_INDICATOR_ATTR, '');
+    el.setAttribute('role', 'status');
+    el.setAttribute('aria-live', 'polite');
+    el.className = 'ab-Loader';
+    el.style.cssText = [
+        'position:absolute',
+        'left:0',
+        'right:0',
+        'bottom:0',
+        'z-index:2',
+        'display:flex',
+        'align-items:center',
+        'justify-content:center',
+        'gap:var(--ab-base-space)',
+        'padding:calc(var(--ab-base-space) * 2) var(--ab-base-space)',
+        'pointer-events:none',
+        'background:color-mix(in oklab, var(--ab-color-popover) 92%, transparent)',
+        'border-top:1px solid color-mix(in oklab, var(--ab-color-popover-foreground) 10%, transparent)',
+    ].join(';');
+    el.innerHTML =
+        '<div class="ab-Loader__Spinner" aria-hidden="true"></div><span class="ab-Loader__text">Loading...</span>';
+    return el;
+};
+const removeLoadingMoreIndicators = () => {
+    document.querySelectorAll(`[${LOADING_MORE_INDICATOR_ATTR}]`).forEach((node) => node.remove());
+};
 export function useDistinctFilterColumnValues(options) {
     const { columnId, searchValueRef } = options;
     const { api } = useAdaptable();
@@ -27,14 +61,85 @@ export function useDistinctFilterColumnValues(options) {
         dataLoadIsComplete: false,
         skipDefaultSearch: false,
         searchValueUsedInFilterValue: false,
+        hasMore: false,
     });
     const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
+    const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+    const isLoadingMoreRef = React.useRef(false);
+    const lastRequestedOffsetRef = React.useRef(null);
+    const accumulatedValuesRef = React.useRef(quickFilterValues.values);
+    accumulatedValuesRef.current = quickFilterValues.values;
+    const hasMoreRef = React.useRef(quickFilterValues.hasMore);
+    hasMoreRef.current = quickFilterValues.hasMore;
+    const searchValueUsedRef = React.useRef(false);
+    const loadMoreGenerationRef = React.useRef(0);
+    const setLoadingMore = React.useCallback((next) => {
+        isLoadingMoreRef.current = next;
+        setIsLoadingMore(next);
+    }, []);
+    const fetchFilterValues = React.useCallback((offset) => {
+        let searchValueUsedInFilterValue = false;
+        const columnFilterInternalApi = api.filterApi.columnFilterApi.internalApi;
+        return columnFilterInternalApi
+            .getColumnFilterValues({
+            columnId,
+            offset,
+            limit: IN_FILTER_VALUES_PAGE_SIZE,
+            get currentSearchValue() {
+                searchValueUsedInFilterValue = true;
+                return searchValueRef ? searchValueRef.current : '';
+            },
+        })
+            .then((result) => ({ result, searchValueUsedInFilterValue }));
+    }, [api, columnId, searchValueRef]);
+    const loadMoreValues = React.useCallback(() => {
+        if (!hasMoreRef.current || isLoadingMoreRef.current) {
+            return;
+        }
+        const offset = accumulatedValuesRef.current.length;
+        if (lastRequestedOffsetRef.current === offset) {
+            return;
+        }
+        setLoadingMore(true);
+        lastRequestedOffsetRef.current = offset;
+        const generation = loadMoreGenerationRef.current;
+        fetchFilterValues(offset)
+            .then(({ result, searchValueUsedInFilterValue, }) => {
+            if (generation !== loadMoreGenerationRef.current) {
+                return;
+            }
+            searchValueUsedRef.current = searchValueUsedInFilterValue;
+            const nextValues = [...accumulatedValuesRef.current, ...result.values];
+            accumulatedValuesRef.current = nextValues;
+            hasMoreRef.current = !!result.hasMore;
+            setQuickFilterValues((prev) => ({
+                ...prev,
+                values: nextValues,
+                skipDefaultSearch: !!result.skipDefaultSearch,
+                searchValueUsedInFilterValue: prev.searchValueUsedInFilterValue || searchValueUsedInFilterValue,
+                hasMore: !!result.hasMore,
+                dataLoadIsComplete: true,
+            }));
+        })
+            .finally(() => {
+            if (generation === loadMoreGenerationRef.current) {
+                setLoadingMore(false);
+            }
+            if (lastRequestedOffsetRef.current === offset &&
+                accumulatedValuesRef.current.length <= offset) {
+                lastRequestedOffsetRef.current = null;
+            }
+        });
+    }, [fetchFilterValues, setLoadingMore]);
     useEffect(() => {
         if (valuesLoadTrigger === 0) {
             return;
         }
         let ignore = false;
         setIsDistinctColumnValuesLoading(true);
+        loadMoreGenerationRef.current += 1;
+        setLoadingMore(false);
+        lastRequestedOffsetRef.current = null;
         let searchValueUsedInFilterValue = false;
         const columnFilterInternalApi = api.filterApi.columnFilterApi.internalApi;
         let promise = undefined;
@@ -42,18 +147,15 @@ export function useDistinctFilterColumnValues(options) {
             const previousResult = columnFilterInternalApi
                 .getAdaptableFilterHandler(columnId)
                 ?.getLastCachedFilterDisplayValues();
-            if (previousResult) {
+            if (previousResult && !previousResult.hasMore) {
                 promise = Promise.resolve(previousResult);
             }
         }
         usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef.current = false;
         if (!promise) {
-            promise = columnFilterInternalApi.getColumnFilterValues({
-                columnId,
-                get currentSearchValue() {
-                    searchValueUsedInFilterValue = true;
-                    return searchValueRef ? searchValueRef.current : '';
-                },
+            promise = fetchFilterValues(0).then(({ result, searchValueUsedInFilterValue: used, }) => {
+                searchValueUsedInFilterValue = used;
+                return result;
             });
         }
         promise.then((distinctFilterDisplayValues) => {
@@ -61,20 +163,155 @@ export function useDistinctFilterColumnValues(options) {
                 return;
             }
             const values = distinctFilterDisplayValues.values;
+            hasMoreRef.current = !!distinctFilterDisplayValues.hasMore;
+            accumulatedValuesRef.current = values;
             setQuickFilterValues({
                 values,
                 dataLoadIsComplete: true,
                 skipDefaultSearch: !!distinctFilterDisplayValues.skipDefaultSearch,
                 searchValueUsedInFilterValue,
+                hasMore: !!distinctFilterDisplayValues.hasMore,
             });
+            lastRequestedOffsetRef.current = 0;
             setIsDistinctColumnValuesLoading(false);
         });
         return () => {
             ignore = true;
         };
-    }, [valuesLoadTrigger, columnId]);
+    }, [valuesLoadTrigger, columnId, api, fetchFilterValues, setLoadingMore]);
+    useEffect(() => {
+        if (!quickFilterValues.hasMore || !quickFilterValues.dataLoadIsComplete) {
+            return;
+        }
+        let scrollEl = null;
+        let debounceTimer;
+        const onScroll = () => {
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+            }
+            debounceTimer = setTimeout(() => {
+                if (!scrollEl) {
+                    return;
+                }
+                const el = scrollEl;
+                const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
+                if (remaining > NEAR_END_PX) {
+                    return;
+                }
+                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);
+        return () => {
+            if (raf != null) {
+                cancelAnimationFrame(raf);
+            }
+            if (timeout != null) {
+                clearTimeout(timeout);
+            }
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+            }
+            if (scrollEl) {
+                scrollEl.removeEventListener('scroll', onScroll);
+            }
+        };
+    }, [
+        quickFilterValues.hasMore,
+        quickFilterValues.dataLoadIsComplete,
+        quickFilterValues.values.length,
+        loadMoreValues,
+    ]);
+    useEffect(() => {
+        if (!hasMoreRef.current ||
+            !quickFilterValues.dataLoadIsComplete ||
+            isLoadingMore ||
+            isDistinctColumnValuesLoading) {
+            return;
+        }
+        const scrollEl = document.querySelector(FILTER_VALUES_SCROLL_SELECTOR);
+        if (!scrollEl) {
+            return;
+        }
+        const remaining = scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight;
+        if (remaining > NEAR_END_PX) {
+            return;
+        }
+        loadMoreValues();
+    }, [
+        quickFilterValues.hasMore,
+        quickFilterValues.dataLoadIsComplete,
+        quickFilterValues.values.length,
+        isLoadingMore,
+        isDistinctColumnValuesLoading,
+        loadMoreValues,
+    ]);
+    useEffect(() => {
+        if (!isLoadingMore) {
+            removeLoadingMoreIndicators();
+            return;
+        }
+        let indicator = null;
+        let cancelled = false;
+        const tryAttach = () => {
+            if (cancelled) {
+                return false;
+            }
+            const popup = document.querySelector(FILTER_VALUES_POPUP_SELECTOR);
+            if (!popup) {
+                return false;
+            }
+            indicator = popup.querySelector(`[${LOADING_MORE_INDICATOR_ATTR}]`);
+            if (!indicator) {
+                indicator = createLoadingMoreIndicator();
+                popup.appendChild(indicator);
+            }
+            return true;
+        };
+        let attached = tryAttach();
+        const raf = attached
+            ? undefined
+            : requestAnimationFrame(() => {
+                attached = tryAttach();
+            });
+        const timeout = attached
+            ? undefined
+            : setTimeout(() => {
+                tryAttach();
+            }, 50);
+        return () => {
+            cancelled = true;
+            if (raf != null) {
+                cancelAnimationFrame(raf);
+            }
+            if (timeout != null) {
+                clearTimeout(timeout);
+            }
+            indicator?.remove();
+            removeLoadingMoreIndicators();
+        };
+    }, [isLoadingMore]);
     return {
         isDistinctColumnValuesLoading,
+        isLoadingMore,
         quickFilterValues,
         setQuickFilterValues,
         triggerValuesLoad,
@@ -144,6 +381,9 @@ export const FloatingFilterValues = (props) => {
 `, (msg) => console.warn(msg));
         }
     }
+    if (!currentColumn) {
+        return null;
+    }
     return (_jsx(ColumnValuesSelect, { selectProps: props.inline
             ? {
                 ...props.selectProps,

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -283,6 +283,8 @@ export declare class AdaptableAgGrid implements IAdaptable {
         column: AdaptableColumn;
         currentSearchValue: string;
         previousResult: InFilterValueResult | undefined;
+        offset?: number;
+        limit?: number;
     }): Promise<InFilterValueResult>;
     getDistinctEditValuesForColumn(options: {
         column: AdaptableColumn;

package/src/agGrid/AdaptableAgGrid.js

@@ -2341,6 +2341,8 @@ export class AdaptableAgGrid {
     }
     async getDistinctFilterValuesForColumn(options) {
         const { column, previousResult } = options;
+        const offset = options.offset ?? 0;
+        const limit = options.limit ?? 1000;
         const self = this;
         let currentGridCells;
         const getCurrentGridCells = () => {
@@ -2389,6 +2391,8 @@ export class AdaptableAgGrid {
                 ...this.api.internalApi.buildBaseContext(),
                 column,
                 previousFilterResult: previousResult,
+                offset,
+                limit,
                 get currentSearchValue() {
                     return options.currentSearchValue;
                 },

package/src/agGrid/AdaptableFilterHandler.d.ts

@@ -14,9 +14,13 @@ export declare class AdaptableFilterHandler implements FilterHandler<any, any, C
     getLastCachedFilterDisplayValues(): InFilterValueResult | undefined;
     getFromCacheOrFetchFilterDisplayValues(options: {
         currentSearchValue: string;
+        offset?: number;
+        limit?: number;
     }): Promise<InFilterValueResult>;
     fetchFilterDisplayValues(options: {
         currentSearchValue: string;
+        offset?: number;
+        limit?: number;
     }): Promise<InFilterValueResult>;
     onNewRowsLoaded(): void;
     onAnyFilterChanged(): void;

package/src/agGrid/AdaptableFilterHandler.js

@@ -51,6 +51,8 @@ export class AdaptableFilterHandler {
                 return options.currentSearchValue;
             },
             previousResult: this.filterDisplayValuesResult,
+            offset: options.offset,
+            limit: options.limit,
         })
             .then((result) => {
             this.filterDisplayValuesResult = result;

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

@@ -25,7 +25,7 @@ export type MultiComboboxProps<T extends ComboboxItemType> = Omit<AdaptableCombo
     /**
      * Optional override for the Select All checkbox change handler.
      * When provided, replaces the default behaviour of selecting / deselecting
-     * every item.
+     * the currently filtered items via `onValueChange`.
      */
     onSelectAllCheckboxChange?: (checked: boolean) => void;
     renderInputValues?: (items: T[]) => React.ReactNode;