@trackunit/filters-filter-bar 1.8.19 → 1.8.21

package/index.cjs.js

@@ -488,6 +488,7 @@ const toggleFilterValue = (value) => {
     };
 };
 
+const ITEM_HEIGHT = 28; //measured in DevTools on 03/10/2025
 /**
  * DynamicFilterList is a React component that displays a list of dynamic filters with options like CheckBoxes or Radio buttons.
  *
@@ -497,22 +498,30 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
     const [t] = useTranslation();
     const parentRef = react.useRef(null);
     const updatedRowCount = react.useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
-    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.List, { className: className, count: updatedRowCount, getItem: index => {
-                if (showRequestMoreUseSearch && index === rowCount) {
-                    return { type: "search-more" };
+    const list = reactComponents.useList({
+        count: updatedRowCount,
+        getItem: index => {
+            if (showRequestMoreUseSearch && index === rowCount) {
+                return { type: "search-more" };
+            }
+            return {
+                type: "filter-item",
+                key: keyMapper(index),
+                label: labelMapper(index),
+                itemCount: count(index),
+                isChecked: checked(index),
+                index,
+            };
+        },
+        estimateItemSize: () => ITEM_HEIGHT,
+    });
+    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.List, { className: className, ...list, separator: "none", children: ({ key, listItemProps, item }) => {
+                if (!item) {
+                    return null;
                 }
-                return {
-                    type: "filter-item",
-                    key: keyMapper(index),
-                    label: labelMapper(index),
-                    itemCount: count(index),
-                    isChecked: checked(index),
-                    index,
-                };
-            }, separator: "none", children: (listItemProps, item, index) => {
-                return (jsxRuntime.jsx("li", { ...listItemProps, className: tailwindMerge.twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-neutral-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-sm italic text-neutral-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + item.key, itemCount: item.itemCount, label: item.label, selected: item.isChecked, value: item.key }, item.key)) : (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: item.isChecked, dataTestId: "dynamic-filter-check-box-" + item.key, itemCount: item.itemCount, label: item.label, name: item.key, onChange: () => {
+                return (jsxRuntime.jsx("li", { ...listItemProps, className: tailwindMerge.twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-neutral-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-sm italic text-neutral-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + item.key, itemCount: item.itemCount, label: item.label, selected: item.isChecked, value: item.key })) : (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: item.isChecked, dataTestId: "dynamic-filter-check-box-" + item.key, itemCount: item.itemCount, label: item.label, name: item.key, onChange: () => {
                             onChange?.(item.index);
-                        } }, item.key)) }, index));
+                        } })) }, key));
             } }) }));
 };
 

package/index.esm.js

@@ -2,7 +2,7 @@ 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 { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
-import { Button, Icon, List, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Badge, PopoverContent, IconButton, MenuList } from '@trackunit/react-components';
+import { Button, Icon, useList, List, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Badge, PopoverContent, IconButton, MenuList } from '@trackunit/react-components';
 import { useAnalytics, useTextSearch, useCurrentUser, useCustomEncoding } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/react-core-contexts-api';
@@ -486,6 +486,7 @@ const toggleFilterValue = (value) => {
     };
 };
 
+const ITEM_HEIGHT = 28; //measured in DevTools on 03/10/2025
 /**
  * DynamicFilterList is a React component that displays a list of dynamic filters with options like CheckBoxes or Radio buttons.
  *
@@ -495,22 +496,30 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
     const [t] = useTranslation();
     const parentRef = useRef(null);
     const updatedRowCount = useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
-    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(List, { className: className, count: updatedRowCount, getItem: index => {
-                if (showRequestMoreUseSearch && index === rowCount) {
-                    return { type: "search-more" };
+    const list = useList({
+        count: updatedRowCount,
+        getItem: index => {
+            if (showRequestMoreUseSearch && index === rowCount) {
+                return { type: "search-more" };
+            }
+            return {
+                type: "filter-item",
+                key: keyMapper(index),
+                label: labelMapper(index),
+                itemCount: count(index),
+                isChecked: checked(index),
+                index,
+            };
+        },
+        estimateItemSize: () => ITEM_HEIGHT,
+    });
+    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(List, { className: className, ...list, separator: "none", children: ({ key, listItemProps, item }) => {
+                if (!item) {
+                    return null;
                 }
-                return {
-                    type: "filter-item",
-                    key: keyMapper(index),
-                    label: labelMapper(index),
-                    itemCount: count(index),
-                    isChecked: checked(index),
-                    index,
-                };
-            }, separator: "none", children: (listItemProps, item, index) => {
-                return (jsx("li", { ...listItemProps, className: twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-neutral-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsx("br", {}), jsx("span", { className: "text-sm italic text-neutral-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsx(RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + item.key, itemCount: item.itemCount, label: item.label, selected: item.isChecked, value: item.key }, item.key)) : (jsx(CheckBoxFilterItem, { checked: item.isChecked, dataTestId: "dynamic-filter-check-box-" + item.key, itemCount: item.itemCount, label: item.label, name: item.key, onChange: () => {
+                return (jsx("li", { ...listItemProps, className: twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-neutral-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsx("br", {}), jsx("span", { className: "text-sm italic text-neutral-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsx(RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + item.key, itemCount: item.itemCount, label: item.label, selected: item.isChecked, value: item.key })) : (jsx(CheckBoxFilterItem, { checked: item.isChecked, dataTestId: "dynamic-filter-check-box-" + item.key, itemCount: item.itemCount, label: item.label, name: item.key, onChange: () => {
                             onChange?.(item.index);
-                        } }, item.key)) }, index));
+                        } })) }, key));
             } }) }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.8.19",
+  "version": "1.8.21",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,18 +13,18 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "^3.23.8",
-    "@trackunit/iris-app-api": "1.7.12",
-    "@trackunit/react-core-hooks": "1.7.14",
-    "@trackunit/react-filter-components": "1.7.19",
-    "@trackunit/react-date-and-time-components": "1.10.19",
-    "@trackunit/shared-utils": "1.9.11",
-    "@trackunit/react-form-components": "1.8.19",
-    "@trackunit/react-core-contexts-api": "1.8.13",
-    "@trackunit/geo-json-utils": "1.7.11",
-    "@trackunit/i18n-library-translation": "1.7.15",
-    "@trackunit/css-class-variance-utilities": "1.7.11",
-    "@trackunit/react-components": "1.9.19",
-    "@trackunit/react-test-setup": "1.4.11",
+    "@trackunit/iris-app-api": "1.7.13",
+    "@trackunit/react-core-hooks": "1.7.15",
+    "@trackunit/react-filter-components": "1.7.21",
+    "@trackunit/react-date-and-time-components": "1.10.21",
+    "@trackunit/shared-utils": "1.9.12",
+    "@trackunit/react-form-components": "1.8.21",
+    "@trackunit/react-core-contexts-api": "1.8.14",
+    "@trackunit/geo-json-utils": "1.7.12",
+    "@trackunit/i18n-library-translation": "1.7.16",
+    "@trackunit/css-class-variance-utilities": "1.7.12",
+    "@trackunit/react-components": "1.9.21",
+    "@trackunit/react-test-setup": "1.4.12",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",