@trackunit/filters-filter-bar 2.17.34 → 2.17.36

package/index.cjs.js

@@ -287,7 +287,7 @@ const LOADING_INDICATOR = {
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, pagination, type = undefined, className, }) => {
+const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, pagination, type = undefined, className, "data-testid": dataTestId, }) => {
     const [t] = useTranslation();
     const showSearchMoreHint = showRequestMoreUseSearch && pagination === undefined;
     const updatedRowCount = react.useMemo(() => (showSearchMoreHint ? rowCount + 1 : rowCount), [rowCount, showSearchMoreHint]);
@@ -311,7 +311,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
         separator: "none",
         estimateItemSize: () => ITEM_HEIGHT,
     });
-    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 }) => {
+    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { className: "flex h-full min-h-0 flex-col overflow-hidden", children: jsxRuntime.jsx(reactComponents.List, { ...list, className: tailwindMerge.twMerge("min-h-0 max-w-sm flex-1 overflow-y-auto", className), "data-testid": dataTestId, children: ({ key, listItemProps, item }) => {
                 if (!item) {
                     return null;
                 }
@@ -580,6 +580,12 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: () => filterBarActions.resetIndividualFilterToInitialState(filterDefinition.filterKey), resetLabel: t("filtersBar.resetFilter"), showReset: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), title: filterDefinition.title }), jsxRuntime.jsxs(reactFilterComponents.FilterBody, { children: [jsxRuntime.jsxs("div", { className: "flex gap-1 px-1 pb-0.5 pt-1", children: [jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.min"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMinValue(e.target.value === "" ? undefined : Number(e.target.value)), value: minValue ?? "" }), jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.max"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMaxValue(e.target.value === "" ? undefined : Number(e.target.value)), value: maxValue ?? "" })] }), jsxRuntime.jsx(reactFilterComponents.FilterFooter, { children: jsxRuntime.jsx(reactComponents.Button, { onClick: handleApply, size: "small", variant: "primary", children: t("filtersBar.defaultMinMaxFilters.apply") }) })] })] }));
 };
 
+/**
+ * Constrains the radio option list to the filter shell so a long list scrolls inside the menu.
+ */
+const RadioFilterResults = ({ isChecked, loading, onSelect, results, selectedKey, showRequestMoreUseSearch, }) => (jsxRuntime.jsx("div", { className: "grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden", children: jsxRuntime.jsx(FilterResults, { loading: loading, results: results, children: res => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { className: "h-full min-h-0 w-full overflow-hidden", formGroupClassName: "grid h-full min-h-0 grid-rows-[minmax(0,1fr)]", id: "DefaultRadioFilter", onChange: event => {
+                onSelect(event.currentTarget.value);
+            }, value: selectedKey, children: jsxRuntime.jsx(DynamicFilterList, { checked: index => isChecked(res[index]?.key || ""), className: "m-1 mt-0 h-full", count: index => res[index]?.count, "data-testid": "default-radio-filter-results", keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) }) }));
 /**
  * DefaultRadioFilter is a React component that renders a filter with radio button options based on the provided props.
  *
@@ -604,9 +610,7 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
                     onChange: customSearch?.onChange ?? setSearchText,
                     onClear: customSearch?.onClear ?? (() => setSearchText("")),
                     count: filteredOptions.length,
-                } }), jsxRuntime.jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
-                        handleClick(e.currentTarget.value);
-                    }, value: selectedRadioId?.key || "", children: jsxRuntime.jsx(DynamicFilterList, { checked: index => filterBarActions.objectIncludesValue(filterDefinition.filterKey, res[index]?.key || ""), className: "m-1 mt-0", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
+                } }), jsxRuntime.jsx(RadioFilterResults, { isChecked: key => filterBarActions.objectIncludesValue(filterDefinition.filterKey, key), loading: loading, onSelect: handleClick, results: customSearch ? options : filteredOptions, selectedKey: selectedRadioId?.key || "", showRequestMoreUseSearch: showRequestMoreUseSearch })] }));
 };
 
 /**

package/index.esm.js

@@ -285,7 +285,7 @@ const LOADING_INDICATOR = {
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, pagination, type = undefined, className, }) => {
+const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, pagination, type = undefined, className, "data-testid": dataTestId, }) => {
     const [t] = useTranslation();
     const showSearchMoreHint = showRequestMoreUseSearch && pagination === undefined;
     const updatedRowCount = useMemo(() => (showSearchMoreHint ? rowCount + 1 : rowCount), [rowCount, showSearchMoreHint]);
@@ -309,7 +309,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
         separator: "none",
         estimateItemSize: () => ITEM_HEIGHT,
     });
-    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 }) => {
+    return (jsx(FilterBody, { className: "flex h-full min-h-0 flex-col overflow-hidden", children: jsx(List, { ...list, className: twMerge("min-h-0 max-w-sm flex-1 overflow-y-auto", className), "data-testid": dataTestId, children: ({ key, listItemProps, item }) => {
                 if (!item) {
                     return null;
                 }
@@ -578,6 +578,12 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
     return (jsxs(Fragment, { children: [jsx(FilterHeader$1, { onReset: () => filterBarActions.resetIndividualFilterToInitialState(filterDefinition.filterKey), resetLabel: t("filtersBar.resetFilter"), showReset: filterBarActions.appliedFilterKeys().includes(filterDefinition.filterKey), title: filterDefinition.title }), jsxs(FilterBody, { children: [jsxs("div", { className: "flex gap-1 px-1 pb-0.5 pt-1", children: [jsx(NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.min"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMinValue(e.target.value === "" ? undefined : Number(e.target.value)), value: minValue ?? "" }), jsx(NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.max"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMaxValue(e.target.value === "" ? undefined : Number(e.target.value)), value: maxValue ?? "" })] }), jsx(FilterFooter, { children: jsx(Button, { onClick: handleApply, size: "small", variant: "primary", children: t("filtersBar.defaultMinMaxFilters.apply") }) })] })] }));
 };
 
+/**
+ * Constrains the radio option list to the filter shell so a long list scrolls inside the menu.
+ */
+const RadioFilterResults = ({ isChecked, loading, onSelect, results, selectedKey, showRequestMoreUseSearch, }) => (jsx("div", { className: "grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden", children: jsx(FilterResults, { loading: loading, results: results, children: res => (jsx(RadioGroup, { className: "h-full min-h-0 w-full overflow-hidden", formGroupClassName: "grid h-full min-h-0 grid-rows-[minmax(0,1fr)]", id: "DefaultRadioFilter", onChange: event => {
+                onSelect(event.currentTarget.value);
+            }, value: selectedKey, children: jsx(DynamicFilterList, { checked: index => isChecked(res[index]?.key || ""), className: "m-1 mt-0 h-full", count: index => res[index]?.count, "data-testid": "default-radio-filter-results", keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) }) }));
 /**
  * DefaultRadioFilter is a React component that renders a filter with radio button options based on the provided props.
  *
@@ -602,9 +608,7 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
                     onChange: customSearch?.onChange ?? setSearchText,
                     onClear: customSearch?.onClear ?? (() => setSearchText("")),
                     count: filteredOptions.length,
-                } }), jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsx(RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
-                        handleClick(e.currentTarget.value);
-                    }, value: selectedRadioId?.key || "", children: jsx(DynamicFilterList, { checked: index => filterBarActions.objectIncludesValue(filterDefinition.filterKey, res[index]?.key || ""), className: "m-1 mt-0", count: index => res[index]?.count, keyMapper: index => res[index]?.key || "", labelMapper: index => res[index]?.label || "", rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, type: "Radio" }) })) })] }));
+                } }), jsx(RadioFilterResults, { isChecked: key => filterBarActions.objectIncludesValue(filterDefinition.filterKey, key), loading: loading, onSelect: handleClick, results: customSearch ? options : filteredOptions, selectedKey: selectedRadioId?.key || "", showRequestMoreUseSearch: showRequestMoreUseSearch })] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "2.17.34",
+  "version": "2.17.36",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,18 +11,18 @@
     "tailwind-merge": "^3.7.0",
     "string-ts": "^2.0.0",
     "zod": "^3.25.76",
-    "@trackunit/iris-app-api": "2.13.9",
-    "@trackunit/react-core-hooks": "1.31.27",
-    "@trackunit/react-filter-components": "2.17.32",
-    "@trackunit/react-date-and-time-components": "2.17.32",
-    "@trackunit/shared-utils": "1.22.35",
-    "@trackunit/react-form-components": "2.17.31",
-    "@trackunit/iris-app-runtime-core-api": "1.27.26",
-    "@trackunit/geo-json-utils": "1.21.35",
-    "@trackunit/i18n-library-translation": "2.14.27",
-    "@trackunit/css-class-variance-utilities": "2.6.35",
-    "@trackunit/react-components": "6.0.29",
-    "@trackunit/react-router-components": "1.3.32"
+    "@trackunit/iris-app-api": "2.13.11",
+    "@trackunit/react-core-hooks": "1.31.29",
+    "@trackunit/react-filter-components": "2.17.34",
+    "@trackunit/react-date-and-time-components": "2.17.34",
+    "@trackunit/shared-utils": "1.22.37",
+    "@trackunit/react-form-components": "2.17.33",
+    "@trackunit/iris-app-runtime-core-api": "1.27.28",
+    "@trackunit/geo-json-utils": "1.21.37",
+    "@trackunit/i18n-library-translation": "2.14.29",
+    "@trackunit/css-class-variance-utilities": "2.6.37",
+    "@trackunit/react-components": "6.0.31",
+    "@trackunit/react-router-components": "1.3.34"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

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

@@ -55,11 +55,15 @@ interface DynamicFilterListProps {
      * A class name to apply to the filter list.
      */
     className?: string;
+    /**
+     * Test id for the scrollable list container.
+     */
+    "data-testid"?: string;
 }
 /**
  * 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.
  */
-export declare const DynamicFilterList: ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch, pagination, type, className, }: DynamicFilterListProps) => ReactElement;
+export declare const DynamicFilterList: ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch, pagination, type, className, "data-testid": dataTestId, }: DynamicFilterListProps) => ReactElement;
 export {};