@trackunit/filters-filter-bar 0.0.244 → 0.0.248

package/index.cjs.js

@@ -12,7 +12,6 @@ var react = require('react');
 var reactFilterComponents = require('@trackunit/react-filter-components');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
-var reactVirtual = require('@tanstack/react-virtual');
 var reactFormComponents = require('@trackunit/react-form-components');
 var dequal = require('dequal');
 var isEqual = require('lodash/isEqual');
@@ -455,7 +454,7 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
     const [t] = useTranslation();
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
     const hideInStarredMenu = react.useMemo(() => {
-        return Object.values(filterBarDefinition)
+        return sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
             const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
@@ -463,7 +462,7 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
         })
             .filter(sharedUtils.truthy);
     }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
+    const { filtersGrouped } = useStarredGroupFilters(sharedUtils.objectValues(filterBarDefinition), [
         ...hideInStarredMenu,
         ...hiddenFilters,
     ]);
@@ -513,14 +512,14 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse,
 };
 const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
     const hideInFilterBar = react.useMemo(() => {
-        return Object.values(filterBarDefinition)
+        return sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
             return !showInFilterBar ? filter.filterKey : null;
         })
             .filter(sharedUtils.truthy);
     }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
+    const { filtersGrouped } = useStarredGroupFilters(sharedUtils.objectValues(filterBarDefinition), [
         ...hideInFilterBar,
         ...hiddenFilters,
     ]);
@@ -561,34 +560,6 @@ const toggleFilterValue = (value) => {
     };
 };
 
-/**
- * Render a virtualized list of items
- *
- * @template T - The type of data items in the list.
- * @returns {JSX.Element} - Returns the virtualized list component.
- */
-const VirtualizedList = ({ parentRef, count, rowHeight = 40, children, }) => {
-    const rowVirtualizer = reactVirtual.useVirtualizer({
-        count,
-        getScrollElement: () => parentRef.current,
-        estimateSize: react.useCallback((i) => rowHeight, [rowHeight]),
-        overscan: 10,
-    });
-    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))) }));
-};
-
 /**
  * DynamicFilterList is a React component that displays a list of dynamic filters with options like CheckBoxes or Radio buttons.
  *
@@ -598,7 +569,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, { count: updatedRowCount, parentRef: parentRef, rowHeight: 40, children: index => {
+    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "none", 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), itemCount: count(index), label: labelMapper(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: checked(index), dataTestId: "dynamic-filter-check-box-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), name: keyMapper(index), onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), showTooltip: showTooltip }, keyMapper(index))) }));
             } }) }));
 };
@@ -614,7 +585,7 @@ const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasC
         resetIndividualFilterToInitialState(filterKey);
         onResetFilter === null || onResetFilter === void 0 ? void 0 : onResetFilter();
     };
-    return (jsxRuntime.jsx(reactFilterComponents.FilterHeader, { dataTestId: `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, fieldSize: "small", onChange: e => searchProps.onChange(e.currentTarget.value), placeholder: t("assetFilters.searchPlaceholder"), showBorderWhenNotInFocus: true, suffix: jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
+    return (jsxRuntime.jsx(reactFilterComponents.FilterHeader, { dataTestId: `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, fieldSize: "small", onChange: e => searchProps.onChange(e.currentTarget.value), placeholder: t("assetFilters.searchPlaceholder"), suffix: jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
 };
 
 /**
@@ -921,6 +892,7 @@ const hasValue = (value) => {
     if (value === undefined || value === null) {
         return false;
     }
+    // eslint-disable-next-line local-rules/prefer-custom-object-keys
     if (typeof value === "object" && Object.keys(value).length === 0) {
         return false;
     }
@@ -941,7 +913,8 @@ const isNotRightType = (filterDefinition, foundFilter) => {
  */
 const isMinMaxFilterValue = (value) => {
     return value
-        ? typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
+        ? // eslint-disable-next-line local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
         : false;
 };
 /**
@@ -949,7 +922,8 @@ const isMinMaxFilterValue = (value) => {
  */
 const isDateRangeValue = (value) => {
     return value
-        ? typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
+        ? // eslint-disable-next-line local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
         : false;
 };
 /**
@@ -957,7 +931,8 @@ const isDateRangeValue = (value) => {
  */
 const isBoundingBox = (value) => {
     return value
-        ? typeof value === "object" && Object.keys(value).includes("nw") && Object.keys(value).includes("se")
+        ? // eslint-disable-next-line local-rules/prefer-custom-object-keys
+            typeof value === "object" && Object.keys(value).includes("nw") && Object.keys(value).includes("se")
         : false;
 };
 /**
@@ -976,6 +951,7 @@ const isStringArrayFilterValue = (value) => {
  *
  */
 const isBooleanValue = (value) => {
+    // eslint-disable-next-line local-rules/prefer-custom-object-keys
     return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
 };
 /**
@@ -983,7 +959,9 @@ const isBooleanValue = (value) => {
  */
 const isValueNameFilterValue = (value) => {
     return (isArrayFilterValue(value) &&
-        value.every(item => typeof item === "object" && Object.keys(item).includes("name") && Object.keys(item).includes("value")));
+        value.every(
+        // eslint-disable-next-line local-rules/prefer-custom-object-keys
+        item => typeof item === "object" && Object.keys(item).includes("name") && Object.keys(item).includes("value")));
 };
 /**
  * Validates a filter configuration against filter definitions.
@@ -996,6 +974,7 @@ const isValueNameFilterValue = (value) => {
 const validateFilter = (filter, filterDefinitions) => {
     const stateKeys = [];
     let inBadState = false;
+    // eslint-disable-next-line local-rules/prefer-custom-object-keys
     for (const key of Object.keys((filter === null || filter === void 0 ? void 0 : filter.values) || {})) {
         if (filterDefinitions.find(filterDefinition => filterDefinition.filterKey === key)) {
             stateKeys.push(key);

package/index.esm.js

@@ -2,13 +2,12 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { twMerge } from 'tailwind-merge';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useResize, Collapse, DayRangePicker } from '@trackunit/react-components';
-import { truthy, capitalize as capitalize$1, nonNullable, objectValues } from '@trackunit/shared-utils';
-import { useMemo, useState, Fragment as Fragment$1, useCallback, useEffect, useRef } from 'react';
+import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useResize, Collapse, VirtualizedList, DayRangePicker } from '@trackunit/react-components';
+import { objectValues, truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
+import { useMemo, useState, Fragment as Fragment$1, useRef, useEffect, useCallback } from 'react';
 import { Filter as Filter$1, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
 import { useAnalytics, useTextSearch } from '@trackunit/react-core-hooks';
 import { createEvent } from '@trackunit/react-core-contexts-api';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
 import { dequal } from 'dequal';
 import isEqual from 'lodash/isEqual';
@@ -447,7 +446,7 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
     const [t] = useTranslation();
     const { logEvent } = useAnalytics(FilterEvents);
     const hideInStarredMenu = useMemo(() => {
-        return Object.values(filterBarDefinition)
+        return objectValues(filterBarDefinition)
             .map(filter => {
             const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
@@ -455,7 +454,7 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
         })
             .filter(truthy);
     }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
+    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
         ...hideInStarredMenu,
         ...hiddenFilters,
     ]);
@@ -505,14 +504,14 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse,
 };
 const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
     const hideInFilterBar = useMemo(() => {
-        return Object.values(filterBarDefinition)
+        return objectValues(filterBarDefinition)
             .map(filter => {
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
             return !showInFilterBar ? filter.filterKey : null;
         })
             .filter(truthy);
     }, [filterBarDefinition]);
-    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
+    const { filtersGrouped } = useStarredGroupFilters(objectValues(filterBarDefinition), [
         ...hideInFilterBar,
         ...hiddenFilters,
     ]);
@@ -553,34 +552,6 @@ const toggleFilterValue = (value) => {
     };
 };
 
-/**
- * Render a virtualized list of items
- *
- * @template T - The type of data items in the list.
- * @returns {JSX.Element} - Returns the virtualized list component.
- */
-const VirtualizedList = ({ parentRef, count, rowHeight = 40, children, }) => {
-    const rowVirtualizer = useVirtualizer({
-        count,
-        getScrollElement: () => parentRef.current,
-        estimateSize: useCallback((i) => rowHeight, [rowHeight]),
-        overscan: 10,
-    });
-    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))) }));
-};
-
 /**
  * DynamicFilterList is a React component that displays a list of dynamic filters with options like CheckBoxes or Radio buttons.
  *
@@ -590,7 +561,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, { count: updatedRowCount, parentRef: parentRef, rowHeight: 40, children: index => {
+    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "none", 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), itemCount: count(index), label: labelMapper(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsx(CheckBoxFilterItem, { checked: checked(index), dataTestId: "dynamic-filter-check-box-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), name: keyMapper(index), onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), showTooltip: showTooltip }, keyMapper(index))) }));
             } }) }));
 };
@@ -606,7 +577,7 @@ const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasC
         resetIndividualFilterToInitialState(filterKey);
         onResetFilter === null || onResetFilter === void 0 ? void 0 : onResetFilter();
     };
-    return (jsx(FilterHeader$1, { dataTestId: `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsx(Search, { autoFocus: true, fieldSize: "small", onChange: e => searchProps.onChange(e.currentTarget.value), placeholder: t("assetFilters.searchPlaceholder"), showBorderWhenNotInFocus: true, suffix: jsx(Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
+    return (jsx(FilterHeader$1, { dataTestId: `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsx(Search, { autoFocus: true, fieldSize: "small", onChange: e => searchProps.onChange(e.currentTarget.value), placeholder: t("assetFilters.searchPlaceholder"), suffix: jsx(Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
 };
 
 /**
@@ -913,6 +884,7 @@ const hasValue = (value) => {
     if (value === undefined || value === null) {
         return false;
     }
+    // eslint-disable-next-line local-rules/prefer-custom-object-keys
     if (typeof value === "object" && Object.keys(value).length === 0) {
         return false;
     }
@@ -933,7 +905,8 @@ const isNotRightType = (filterDefinition, foundFilter) => {
  */
 const isMinMaxFilterValue = (value) => {
     return value
-        ? typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
+        ? // eslint-disable-next-line local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
         : false;
 };
 /**
@@ -941,7 +914,8 @@ const isMinMaxFilterValue = (value) => {
  */
 const isDateRangeValue = (value) => {
     return value
-        ? typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
+        ? // eslint-disable-next-line local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
         : false;
 };
 /**
@@ -949,7 +923,8 @@ const isDateRangeValue = (value) => {
  */
 const isBoundingBox = (value) => {
     return value
-        ? typeof value === "object" && Object.keys(value).includes("nw") && Object.keys(value).includes("se")
+        ? // eslint-disable-next-line local-rules/prefer-custom-object-keys
+            typeof value === "object" && Object.keys(value).includes("nw") && Object.keys(value).includes("se")
         : false;
 };
 /**
@@ -968,6 +943,7 @@ const isStringArrayFilterValue = (value) => {
  *
  */
 const isBooleanValue = (value) => {
+    // eslint-disable-next-line local-rules/prefer-custom-object-keys
     return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
 };
 /**
@@ -975,7 +951,9 @@ const isBooleanValue = (value) => {
  */
 const isValueNameFilterValue = (value) => {
     return (isArrayFilterValue(value) &&
-        value.every(item => typeof item === "object" && Object.keys(item).includes("name") && Object.keys(item).includes("value")));
+        value.every(
+        // eslint-disable-next-line local-rules/prefer-custom-object-keys
+        item => typeof item === "object" && Object.keys(item).includes("name") && Object.keys(item).includes("value")));
 };
 /**
  * Validates a filter configuration against filter definitions.
@@ -988,6 +966,7 @@ const isValueNameFilterValue = (value) => {
 const validateFilter = (filter, filterDefinitions) => {
     const stateKeys = [];
     let inBadState = false;
+    // eslint-disable-next-line local-rules/prefer-custom-object-keys
     for (const key of Object.keys((filter === null || filter === void 0 ? void 0 : filter.values) || {})) {
         if (filterDefinitions.find(filterDefinition => filterDefinition.filterKey === key)) {
             stateKeys.push(key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "0.0.244",
+  "version": "0.0.248",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,7 +18,6 @@
     "jest-fetch-mock": "^3.0.3",
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/i18n-library-translation": "*",
-    "@tanstack/react-virtual": "3.0.0-beta.68",
     "@trackunit/css-class-variance-utilities": "*",
     "tailwind-merge": "^2.0.0"
   },

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

@@ -1,27 +0,0 @@
-import { RefObject } from "react";
-interface VirtualizedListProps<T extends HTMLElement> {
-    /**
-     * A reference to the parent container element that holds the virtualized list.
-     */
-    parentRef: RefObject<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.
-     *
-     * @param index - The index of the item to render.
-     * @returns The JSX element representing the item at the specified index.
-     */
-    children: (index: number) => JSX.Element;
-}
-/**
- * Render a virtualized list of items
- *
- * @template T - The type of data items in the list.
- * @returns {JSX.Element} - Returns the virtualized list component.
- */
-export declare const VirtualizedList: <T extends HTMLElement>({ parentRef, count, rowHeight, children, }: VirtualizedListProps<T>) => JSX.Element;
-export {};