@trackunit/filters-filter-bar 0.0.129 → 0.0.130

package/index.cjs.js

@@ -11,7 +11,7 @@ var reactComponents = require('@trackunit/react-components');
 var reactRouterDom = require('react-router-dom');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
-var reactVirtual = require('react-virtual');
+var reactVirtual = require('@tanstack/react-virtual');
 var reactFormComponents = require('@trackunit/react-form-components');
 var dequal = require('dequal');
 var lodash = require('lodash');
@@ -543,19 +543,26 @@ const toggleFilterValue = (value) => {
  * @template T - The type of data items in the list.
  * @returns {JSX.Element} - Returns the virtualized list component.
  */
-const VirtualizedList = ({ parentRef, count, children }) => {
-    const rowVirtualizer = reactVirtual.useVirtual({
-        size: count,
+const VirtualizedList = ({ parentRef, count, rowHeight = 40, children, }) => {
+    const rowVirtualizer = reactVirtual.useVirtualizer({
+        count,
+        getScrollElement: () => parentRef.current,
+        estimateSize: react.useCallback((i) => rowHeight, [rowHeight]),
         overscan: 10,
-        parentRef,
     });
-    return (jsxRuntime.jsx("div", { className: "relative", style: { height: rowVirtualizer.totalSize }, children: rowVirtualizer.virtualItems.map(virtualRow => (jsxRuntime.jsx("div", { ref: virtualRow.measureRef, style: {
+    react.useEffect(() => {
+        // this ensures the cache is cleared if the rowHeight changes
+        if (rowHeight) {
+            rowVirtualizer.measure();
+        }
+    }, [rowHeight, rowVirtualizer]);
+    return (jsxRuntime.jsx("div", { className: "relative", style: { height: rowVirtualizer.getTotalSize() }, children: rowVirtualizer.getVirtualItems().map((virtualRow, index) => (jsxRuntime.jsx("div", { style: {
                 position: "absolute",
                 top: 0,
                 left: 0,
                 width: "100%",
                 transform: `translateY(${virtualRow.start}px)`,
-            }, children: children(virtualRow.index) }, virtualRow.index))) }));
+            }, children: children(index) }, index))) }));
 };
 
 /**
@@ -567,7 +574,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, prefixMapper, onC
     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(VirtualizedList, { parentRef: parentRef, count: updatedRowCount, children: index => {
+    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(VirtualizedList, { rowHeight: 40, parentRef: parentRef, count: updatedRowCount, children: index => {
                 return (jsxRuntime.jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), label: labelMapper(index), value: keyMapper(index), selected: checked(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), itemCount: count(index) }, keyMapper(index))) : (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { dataTestId: "dynamic-filter-check-box-" + keyMapper(index), name: keyMapper(index), label: labelMapper(index), checked: checked(index), showTooltip: showTooltip, onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), itemCount: count(index) }, keyMapper(index))) }));
             } }) }));
 };

package/index.esm.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
-import { useMemo, Fragment as Fragment$1, useRef, useState, useEffect, useCallback } from 'react';
+import { useMemo, Fragment as Fragment$1, useCallback, useEffect, useRef, useState } from 'react';
 import { Filter as Filter$1, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
 import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, DayRangePicker } from '@trackunit/react-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAnalytics, useTextSearch } from '@trackunit/react-core-hooks';
 import { createEvent } from '@trackunit/react-core-contexts-api';
-import { useVirtual } from 'react-virtual';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
 import { dequal } from 'dequal';
 import { isEqual } from 'lodash';
@@ -539,19 +539,26 @@ const toggleFilterValue = (value) => {
  * @template T - The type of data items in the list.
  * @returns {JSX.Element} - Returns the virtualized list component.
  */
-const VirtualizedList = ({ parentRef, count, children }) => {
-    const rowVirtualizer = useVirtual({
-        size: count,
+const VirtualizedList = ({ parentRef, count, rowHeight = 40, children, }) => {
+    const rowVirtualizer = useVirtualizer({
+        count,
+        getScrollElement: () => parentRef.current,
+        estimateSize: useCallback((i) => rowHeight, [rowHeight]),
         overscan: 10,
-        parentRef,
     });
-    return (jsx("div", { className: "relative", style: { height: rowVirtualizer.totalSize }, children: rowVirtualizer.virtualItems.map(virtualRow => (jsx("div", { ref: virtualRow.measureRef, style: {
+    useEffect(() => {
+        // this ensures the cache is cleared if the rowHeight changes
+        if (rowHeight) {
+            rowVirtualizer.measure();
+        }
+    }, [rowHeight, rowVirtualizer]);
+    return (jsx("div", { className: "relative", style: { height: rowVirtualizer.getTotalSize() }, children: rowVirtualizer.getVirtualItems().map((virtualRow, index) => (jsx("div", { style: {
                 position: "absolute",
                 top: 0,
                 left: 0,
                 width: "100%",
                 transform: `translateY(${virtualRow.start}px)`,
-            }, children: children(virtualRow.index) }, virtualRow.index))) }));
+            }, children: children(index) }, index))) }));
 };
 
 /**
@@ -563,7 +570,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, prefixMapper, onC
     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(VirtualizedList, { parentRef: parentRef, count: updatedRowCount, children: index => {
+    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(VirtualizedList, { rowHeight: 40, parentRef: parentRef, count: updatedRowCount, children: index => {
                 return (jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsx("br", {}), jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsx(RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), label: labelMapper(index), value: keyMapper(index), selected: checked(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), itemCount: count(index) }, keyMapper(index))) : (jsx(CheckBoxFilterItem, { dataTestId: "dynamic-filter-check-box-" + keyMapper(index), name: keyMapper(index), label: labelMapper(index), checked: checked(index), showTooltip: showTooltip, onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), itemCount: count(index) }, keyMapper(index))) }));
             } }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "0.0.129",
+  "version": "0.0.130",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "react": "^18.2.0",
     "@trackunit/react-form-components": "*",
     "react-router-dom": "6.18.0",
-    "react-virtual": "^2.10.4",
     "dequal": "^2.0.3",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
     "@trackunit/react-core-contexts-api": "*",
-    "@trackunit/i18n-library-translation": "*"
+    "@trackunit/i18n-library-translation": "*",
+    "@tanstack/react-virtual": "3.0.0-beta.68"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

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

@@ -1,5 +1,5 @@
 import { RefObject } from "react";
-interface VirtualizedListProps<T> {
+interface VirtualizedListProps<T extends HTMLElement> {
     /**
      * A reference to the parent container element that holds the virtualized list.
      */
@@ -8,6 +8,7 @@ interface VirtualizedListProps<T> {
      * The total number of items in the virtualized list.
      */
     count: number;
+    rowHeight?: number;
     /**
      * A function that takes an index and returns the JSX element to be rendered for that index.
      *
@@ -22,5 +23,5 @@ interface VirtualizedListProps<T> {
  * @template T - The type of data items in the list.
  * @returns {JSX.Element} - Returns the virtualized list component.
  */
-export declare const VirtualizedList: <T>({ parentRef, count, children }: VirtualizedListProps<T>) => JSX.Element;
+export declare const VirtualizedList: <T extends HTMLElement>({ parentRef, count, rowHeight, children, }: VirtualizedListProps<T>) => JSX.Element;
 export {};