@trackunit/filters-filter-bar 2.3.4 → 2.3.7

package/index.cjs.js

@@ -7,11 +7,11 @@ var reactFilterComponents = require('@trackunit/react-filter-components');
 var reactComponents = require('@trackunit/react-components');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var stringTs = require('string-ts');
+var tailwindMerge = require('tailwind-merge');
 var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
 var reactFormComponents = require('@trackunit/react-form-components');
 var reactDateAndTimeComponents = require('@trackunit/react-date-and-time-components');
 var sharedUtils = require('@trackunit/shared-utils');
-var tailwindMerge = require('tailwind-merge');
 var irisAppApi = require('@trackunit/iris-app-api');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var dequal = require('dequal');
@@ -139,6 +139,7 @@ var defaultTranslations = {
 	"filtersBar.groups.INTEGRATION": "Integration",
 	"filtersBar.groups.MANAGEMENT": "Management",
 	"filtersBar.groups.METADATA": "Metadata",
+	"filtersBar.groups.METRICS": "Metrics",
 	"filtersBar.groups.MY_NETWORK": "My Network",
 	"filtersBar.groups.OPERATOR": "Operator",
 	"filtersBar.groups.OTHER": "Others",
@@ -490,19 +491,33 @@ const toggleFilterValue = (value) => {
 };
 
 const ITEM_HEIGHT = 28; //measured in DevTools on 03/10/2025
+/**
+ * Filter rows are single-line checkboxes, so the skeleton drops the thumbnail and description slots
+ * it renders by default. The first page is already announced by `FilterHeader`/`FilterResults`, which
+ * is why only the pages fetched while scrolling get placeholder rows.
+ */
+const LOADING_INDICATOR = {
+    type: "skeleton",
+    hasThumbnail: false,
+    hasDescription: false,
+    initialLoadingCount: 0,
+    scrollLoadingCount: 3,
+};
 /**
  * DynamicFilterList is a React component that displays a list of dynamic filters with options like CheckBoxes or Radio buttons.
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type = undefined, className, }) => {
+const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, pagination, type = undefined, className, }) => {
     const [t] = useTranslation();
-    const parentRef = react.useRef(null);
-    const updatedRowCount = react.useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
+    const showSearchMoreHint = showRequestMoreUseSearch && pagination === undefined;
+    const updatedRowCount = react.useMemo(() => (showSearchMoreHint ? rowCount + 1 : rowCount), [rowCount, showSearchMoreHint]);
     const list = reactComponents.useList({
         count: updatedRowCount,
+        pagination,
+        loadingIndicator: LOADING_INDICATOR,
         getItem: index => {
-            if (showRequestMoreUseSearch && index === rowCount) {
+            if (showSearchMoreHint && index === rowCount) {
                 return { type: "search-more" };
             }
             return {
@@ -517,7 +532,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
         separator: "none",
         estimateItemSize: () => ITEM_HEIGHT,
     });
-    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.List, { className: className, ...list, children: ({ key, listItemProps, item }) => {
+    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { className: "flex h-full min-h-0 flex-col overflow-hidden", children: jsxRuntime.jsx(reactComponents.List, { className: tailwindMerge.twMerge("min-h-0 max-w-sm flex-1 overflow-y-auto", className), ...list, children: ({ key, listItemProps, item }) => {
                 if (!item) {
                     return null;
                 }
@@ -580,7 +595,7 @@ const EmptyResults = ({ loading = false }) => {
  *
  * @param {DefaultFilterProps<string[]>} props - The properties required for the `DefaultCheckboxFilter` component.
  */
-const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch = false, showUndefinedOptionWithCountAtBottom = true, }) => {
+const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch = false, showUndefinedOptionWithCountAtBottom = true, pagination, }) => {
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
     const { t } = useTranslation();
     const handleSetValue = (value) => {
@@ -641,6 +656,12 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
         }
         return null;
     }, [results]);
+    /**
+     * Selects the options loaded so far, which for a paginated facet is the pages fetched up to now
+     * rather than every value the server could return. That is what this button has always done — it
+     * used to act on a single capped page — so scrolling in another page re-enables it for the
+     * options that just arrived.
+     */
     const hasSelectedAll = react.useMemo(() => {
         const values = filterBarActions.getValuesByKey(filterDefinition.filterKey);
         if (Array.isArray(values)) {
@@ -666,23 +687,23 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                     onChange: customSearch?.onChange ?? setSearchText,
                     onClear: customSearch?.onClear ?? (() => setSearchText("")),
                     count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
-                }, children: options.length >= 2 ? (jsxRuntime.jsx(reactComponents.Button, { className: "place-self-start", "data-testid": "selectAllButton", disabled: hasSelectedAll, onClick: handleSelectAll, size: "small", variant: "ghost", children: t("filtersBar.selectAll") })) : null }), jsxRuntime.jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsxRuntime.jsx(DynamicFilterList, { checked: index => {
-                        return filterDefinition.type === "valueNameArray"
-                            ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "")
-                            : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "");
-                    }, className: "mb-1", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", onChange: index => {
-                        const result = res[index];
-                        if (result) {
-                            handleSetValue(result);
-                        }
-                    }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsxRuntime.jsx("div", { className: "border-t border-neutral-200 py-1", children: jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: filterDefinition.type === "valueNameArray"
-                        ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || "")
-                        : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || ""), "data-testid": "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: results[undefinedCount.index]?.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
-                        const result = results[undefinedCount.index];
-                        if (result) {
-                            handleSetValue(result);
-                        }
-                    } }, "dynamic-filter-check-box-undefined") })) : null] }));
+                }, children: options.length >= 2 ? (jsxRuntime.jsx(reactComponents.Button, { className: "place-self-start", "data-testid": "selectAllButton", disabled: hasSelectedAll, onClick: handleSelectAll, size: "small", variant: "ghost", children: t("filtersBar.selectAll") })) : null }), jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("grid max-h-[50dvh] min-h-0 overflow-hidden", undefinedCount ? "grid-rows-[minmax(0,1fr)_auto]" : "grid-rows-[minmax(0,1fr)]"), children: [jsxRuntime.jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsxRuntime.jsx(DynamicFilterList, { checked: index => {
+                                return filterDefinition.type === "valueNameArray"
+                                    ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "")
+                                    : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "");
+                            }, className: "mb-1 h-full", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", onChange: index => {
+                                const result = res[index];
+                                if (result) {
+                                    handleSetValue(result);
+                                }
+                            }, pagination: pagination, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsxRuntime.jsx("div", { className: "border-t border-neutral-200 py-1", children: jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: filterDefinition.type === "valueNameArray"
+                                ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || "")
+                                : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || ""), "data-testid": "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: results[undefinedCount.index]?.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
+                                const result = results[undefinedCount.index];
+                                if (result) {
+                                    handleSetValue(result);
+                                }
+                            } }, "dynamic-filter-check-box-undefined") })) : null] })] }));
 };
 
 const formatToJustDate = (date) => {

package/index.esm.js

@@ -1,15 +1,15 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { useMemo, useRef, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import { useMemo, useState, useEffect, useCallback, Fragment as Fragment$1, useRef } from 'react';
 import { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
 import { Button, Icon, useList, List, Text, useTextSearch, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Badge, PopoverContent, IconButton, MenuList, useCustomEncoding, useSearchParamSync, useStorageKey, storageSerializer, useWatch } from '@trackunit/react-components';
 import { useAnalytics, useCurrentUser } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
+import { twMerge } from 'tailwind-merge';
 import { createEvent } from '@trackunit/iris-app-runtime-core-api';
 import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
 import { DayRangePicker } from '@trackunit/react-date-and-time-components';
 import { nonNullable, capitalize as capitalize$1, objectValues, truthy, objectKeys } from '@trackunit/shared-utils';
-import { twMerge } from 'tailwind-merge';
 import { customFieldFilterKey } from '@trackunit/iris-app-api';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { dequal } from 'dequal';
@@ -137,6 +137,7 @@ var defaultTranslations = {
 	"filtersBar.groups.INTEGRATION": "Integration",
 	"filtersBar.groups.MANAGEMENT": "Management",
 	"filtersBar.groups.METADATA": "Metadata",
+	"filtersBar.groups.METRICS": "Metrics",
 	"filtersBar.groups.MY_NETWORK": "My Network",
 	"filtersBar.groups.OPERATOR": "Operator",
 	"filtersBar.groups.OTHER": "Others",
@@ -488,19 +489,33 @@ const toggleFilterValue = (value) => {
 };
 
 const ITEM_HEIGHT = 28; //measured in DevTools on 03/10/2025
+/**
+ * Filter rows are single-line checkboxes, so the skeleton drops the thumbnail and description slots
+ * it renders by default. The first page is already announced by `FilterHeader`/`FilterResults`, which
+ * is why only the pages fetched while scrolling get placeholder rows.
+ */
+const LOADING_INDICATOR = {
+    type: "skeleton",
+    hasThumbnail: false,
+    hasDescription: false,
+    initialLoadingCount: 0,
+    scrollLoadingCount: 3,
+};
 /**
  * DynamicFilterList is a React component that displays a list of dynamic filters with options like CheckBoxes or Radio buttons.
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type = undefined, className, }) => {
+const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, pagination, type = undefined, className, }) => {
     const [t] = useTranslation();
-    const parentRef = useRef(null);
-    const updatedRowCount = useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
+    const showSearchMoreHint = showRequestMoreUseSearch && pagination === undefined;
+    const updatedRowCount = useMemo(() => (showSearchMoreHint ? rowCount + 1 : rowCount), [rowCount, showSearchMoreHint]);
     const list = useList({
         count: updatedRowCount,
+        pagination,
+        loadingIndicator: LOADING_INDICATOR,
         getItem: index => {
-            if (showRequestMoreUseSearch && index === rowCount) {
+            if (showSearchMoreHint && index === rowCount) {
                 return { type: "search-more" };
             }
             return {
@@ -515,7 +530,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
         separator: "none",
         estimateItemSize: () => ITEM_HEIGHT,
     });
-    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(List, { className: className, ...list, children: ({ key, listItemProps, item }) => {
+    return (jsx(FilterBody, { className: "flex h-full min-h-0 flex-col overflow-hidden", children: jsx(List, { className: twMerge("min-h-0 max-w-sm flex-1 overflow-y-auto", className), ...list, children: ({ key, listItemProps, item }) => {
                 if (!item) {
                     return null;
                 }
@@ -578,7 +593,7 @@ const EmptyResults = ({ loading = false }) => {
  *
  * @param {DefaultFilterProps<string[]>} props - The properties required for the `DefaultCheckboxFilter` component.
  */
-const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch = false, showUndefinedOptionWithCountAtBottom = true, }) => {
+const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch = false, showUndefinedOptionWithCountAtBottom = true, pagination, }) => {
     const { logEvent } = useAnalytics(FilterEvents);
     const { t } = useTranslation();
     const handleSetValue = (value) => {
@@ -639,6 +654,12 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
         }
         return null;
     }, [results]);
+    /**
+     * Selects the options loaded so far, which for a paginated facet is the pages fetched up to now
+     * rather than every value the server could return. That is what this button has always done — it
+     * used to act on a single capped page — so scrolling in another page re-enables it for the
+     * options that just arrived.
+     */
     const hasSelectedAll = useMemo(() => {
         const values = filterBarActions.getValuesByKey(filterDefinition.filterKey);
         if (Array.isArray(values)) {
@@ -664,23 +685,23 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                     onChange: customSearch?.onChange ?? setSearchText,
                     onClear: customSearch?.onClear ?? (() => setSearchText("")),
                     count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
-                }, children: options.length >= 2 ? (jsx(Button, { className: "place-self-start", "data-testid": "selectAllButton", disabled: hasSelectedAll, onClick: handleSelectAll, size: "small", variant: "ghost", children: t("filtersBar.selectAll") })) : null }), jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsx(DynamicFilterList, { checked: index => {
-                        return filterDefinition.type === "valueNameArray"
-                            ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "")
-                            : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "");
-                    }, className: "mb-1", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", onChange: index => {
-                        const result = res[index];
-                        if (result) {
-                            handleSetValue(result);
-                        }
-                    }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsx("div", { className: "border-t border-neutral-200 py-1", children: jsx(CheckBoxFilterItem, { checked: filterDefinition.type === "valueNameArray"
-                        ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || "")
-                        : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || ""), "data-testid": "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: results[undefinedCount.index]?.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
-                        const result = results[undefinedCount.index];
-                        if (result) {
-                            handleSetValue(result);
-                        }
-                    } }, "dynamic-filter-check-box-undefined") })) : null] }));
+                }, children: options.length >= 2 ? (jsx(Button, { className: "place-self-start", "data-testid": "selectAllButton", disabled: hasSelectedAll, onClick: handleSelectAll, size: "small", variant: "ghost", children: t("filtersBar.selectAll") })) : null }), jsxs("div", { className: twMerge("grid max-h-[50dvh] min-h-0 overflow-hidden", undefinedCount ? "grid-rows-[minmax(0,1fr)_auto]" : "grid-rows-[minmax(0,1fr)]"), children: [jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsx(DynamicFilterList, { checked: index => {
+                                return filterDefinition.type === "valueNameArray"
+                                    ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "")
+                                    : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index]?.key || "");
+                            }, className: "mb-1 h-full", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", onChange: index => {
+                                const result = res[index];
+                                if (result) {
+                                    handleSetValue(result);
+                                }
+                            }, pagination: pagination, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsx("div", { className: "border-t border-neutral-200 py-1", children: jsx(CheckBoxFilterItem, { checked: filterDefinition.type === "valueNameArray"
+                                ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || "")
+                                : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, results[undefinedCount.index]?.key || ""), "data-testid": "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: results[undefinedCount.index]?.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
+                                const result = results[undefinedCount.index];
+                                if (result) {
+                                    handleSetValue(result);
+                                }
+                            } }, "dynamic-filter-check-box-undefined") })) : null] })] }));
 };
 
 const formatToJustDate = (date) => {

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/filters/filter-bar/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "2.3.4",
+  "version": "2.3.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,17 +11,17 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "^3.25.76",
-    "@trackunit/iris-app-api": "2.2.4",
-    "@trackunit/react-core-hooks": "1.19.4",
-    "@trackunit/react-filter-components": "2.3.4",
-    "@trackunit/react-date-and-time-components": "2.3.4",
-    "@trackunit/shared-utils": "1.15.92",
-    "@trackunit/react-form-components": "2.3.4",
-    "@trackunit/iris-app-runtime-core-api": "1.16.98",
-    "@trackunit/geo-json-utils": "1.14.92",
-    "@trackunit/i18n-library-translation": "2.2.4",
-    "@trackunit/css-class-variance-utilities": "1.13.89",
-    "@trackunit/react-components": "2.3.4"
+    "@trackunit/iris-app-api": "2.2.5",
+    "@trackunit/react-core-hooks": "1.19.5",
+    "@trackunit/react-filter-components": "2.3.7",
+    "@trackunit/react-date-and-time-components": "2.3.7",
+    "@trackunit/shared-utils": "1.15.93",
+    "@trackunit/react-form-components": "2.3.6",
+    "@trackunit/iris-app-runtime-core-api": "1.16.99",
+    "@trackunit/geo-json-utils": "1.14.93",
+    "@trackunit/i18n-library-translation": "2.2.5",
+    "@trackunit/css-class-variance-utilities": "1.13.90",
+    "@trackunit/react-components": "2.4.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/lib/components/DefaultCheckboxFilter.d.ts

@@ -7,5 +7,5 @@ type FilterDefinitionValue = Array<string> | Array<ValueName>;
  *
  * @param {DefaultFilterProps<string[]>} props - The properties required for the `DefaultCheckboxFilter` component.
  */
-export declare const DefaultCheckboxFilter: <TFilterValue extends FilterDefinitionValue>({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch, showUndefinedOptionWithCountAtBottom, }: DefaultFilterProps<TFilterValue>) => ReactElement;
+export declare const DefaultCheckboxFilter: <TFilterValue extends FilterDefinitionValue>({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch, showUndefinedOptionWithCountAtBottom, pagination, }: DefaultFilterProps<TFilterValue>) => ReactElement;
 export {};

package/src/lib/components/DefaultFilterTypes.d.ts

@@ -1,3 +1,4 @@
+import type { RelayPagination } from "@trackunit/react-components";
 import { ReactNode } from "react";
 import { FilterName, FilterViewProps } from "../types/FilterTypes";
 export interface FilterOption {
@@ -49,6 +50,11 @@ export interface DefaultFilterProps<TReturnType> extends FilterViewProps<TReturn
      * A flag indicating whether the "Use search to refine results." option should be displayed.
      */
     showRequestMoreUseSearch?: boolean;
+    /**
+     * Relay-style pagination for server-side infinite scroll in the filter list.
+     * When set, additional pages load as the user scrolls (via `useList` / `List`).
+     */
+    pagination?: RelayPagination;
     /**
      * A flag indicating whether the key "UNDEFINED" should be moved to bottom of the list always visible. Default is true
      */

package/src/lib/components/DynamicFilterList.d.ts

@@ -1,3 +1,4 @@
+import { RelayPagination } from "@trackunit/react-components";
 import { ReactElement } from "react";
 interface DynamicFilterListProps {
     /**
@@ -46,6 +47,10 @@ interface DynamicFilterListProps {
      * A flag indicating whether the "Use search to refine results." option should be displayed.
      */
     showRequestMoreUseSearch?: boolean;
+    /**
+     * Relay-style pagination for server-side infinite scroll.
+     */
+    pagination?: RelayPagination;
     /**
      * A class name to apply to the filter list.
      */
@@ -56,5 +61,5 @@ interface DynamicFilterListProps {
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-export declare const DynamicFilterList: ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch, type, className, }: DynamicFilterListProps) => ReactElement;
+export declare const DynamicFilterList: ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch, pagination, type, className, }: DynamicFilterListProps) => ReactElement;
 export {};

package/src/lib/types/FilterTypes.d.ts

@@ -47,7 +47,7 @@ export type FilterMapGetter = {
 export type FilterName = string;
 export type FilterBarDefinition = Record<FilterName, FilterDefinition>;
 export type FilterTranslation = string;
-export type FilterGroup = "METADATA" | "STATUS" | "SITES" | "CUSTOMERS" | "OTHER" | "CUSTOM_FIELDS" | "MY_NETWORK" | "DEVICE_HEALTH" | "DEVICE" | "ASSET" | "OPERATOR" | "SERVICE" | "RENTAL" | "INTEGRATION" | "CURRENT_LOCATION" | "MANAGEMENT";
+export type FilterGroup = "METADATA" | "STATUS" | "SITES" | "CUSTOMERS" | "OTHER" | "CUSTOM_FIELDS" | "MY_NETWORK" | "DEVICE_HEALTH" | "DEVICE" | "ASSET" | "OPERATOR" | "SERVICE" | "RENTAL" | "INTEGRATION" | "CURRENT_LOCATION" | "MANAGEMENT" | "METRICS";
 export interface AbstractFilterDefinition {
     /**
      * The unique key or identifier for the filter.