@databiosphere/findable-ui 29.0.2 → 31.0.0

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/schema.js

@@ -0,0 +1,50 @@
+import { mixed, number, object } from "yup";
+import { FIELD_NAME } from "./constants";
+import { RANGE_OPERATOR } from "./types";
+export const SCHEMA = object({
+    [FIELD_NAME.MAX]: number()
+        .typeError("Value must be a number")
+        .when(FIELD_NAME.RANGE_OPERATOR, {
+        is: RANGE_OPERATOR.BETWEEN,
+        then: (schema) => schema.notRequired(),
+    })
+        .when(FIELD_NAME.RANGE_OPERATOR, {
+        is: RANGE_OPERATOR.LESS_THAN,
+        then: (schema) => schema.required("Value is required"),
+    })
+        .when(FIELD_NAME.RANGE_OPERATOR, {
+        is: RANGE_OPERATOR.GREATER_THAN,
+        then: (schema) => schema.notRequired(),
+    }),
+    [FIELD_NAME.MIN]: number()
+        .typeError("Value must be a number")
+        .when(FIELD_NAME.RANGE_OPERATOR, {
+        is: RANGE_OPERATOR.BETWEEN,
+        then: (schema) => schema
+            .notRequired()
+            .test("min-less-than-max", "Min must be less than max", function (min) {
+            const max = this.parent[FIELD_NAME.MAX];
+            // If either value is not a number, skip validation.
+            if (!min || !max)
+                return true;
+            if (Number.isNaN(min) || Number.isNaN(max))
+                return true;
+            return min < max;
+        })
+            .test("at-least-min-or-max", "Min or Max is required", function (min) {
+            const max = this.parent[FIELD_NAME.MAX];
+            // If both values are null, validation fails.
+            return !(min === null && max === null);
+        }),
+    })
+        .when(FIELD_NAME.RANGE_OPERATOR, {
+        is: RANGE_OPERATOR.LESS_THAN,
+        then: (schema) => schema.notRequired(),
+    })
+        .when(FIELD_NAME.RANGE_OPERATOR, {
+        is: RANGE_OPERATOR.GREATER_THAN,
+        otherwise: (schema) => schema.notRequired(),
+        then: (schema) => schema.required("Value is required"),
+    }),
+    [FIELD_NAME.RANGE_OPERATOR]: mixed().default(RANGE_OPERATOR.BETWEEN),
+});

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/types.d.ts

@@ -1,8 +1,31 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-import { FormEvent } from "react";
-import { RANGE_OPERATOR } from "../../types";
+import { OnFilterFn } from "hooks/useCategoryFilter";
+import { FormEventHandler } from "react";
+import { FIELD_NAME } from "./constants";
+export type FieldErrors = Partial<Record<FieldName, string>>;
+export type FieldName = (typeof FIELD_NAME)[keyof typeof FIELD_NAME];
+export interface FieldValues {
+    max: FormDataEntryValue | null;
+    min: FormDataEntryValue | null;
+    rangeOperator: RANGE_OPERATOR;
+}
+export type OnSubmitFn = OnFilterFn;
+export type OnSubmitParams = Parameters<OnSubmitFn>;
+export declare enum RANGE_OPERATOR {
+    BETWEEN = "between",
+    GREATER_THAN = "greaterThan",
+    LESS_THAN = "lessThan"
+}
+export type SubmitParams = {
+    categoryKey: OnSubmitParams[0];
+    categorySection?: OnSubmitParams[3];
+};
 export interface UseFilterRange {
+    clearErrors: () => void;
+    formState: {
+        errors: FieldErrors;
+    };
+    handleSubmit: (onSubmit: OnSubmitFn, parameters: SubmitParams) => FormEventHandler;
     onChange: ToggleButtonGroupProps["onChange"];
-    onSubmit: (e: FormEvent) => void;
     value: RANGE_OPERATOR;
 }

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/types.js

@@ -1 +1,6 @@
-export {};
+export var RANGE_OPERATOR;
+(function (RANGE_OPERATOR) {
+    RANGE_OPERATOR["BETWEEN"] = "between";
+    RANGE_OPERATOR["GREATER_THAN"] = "greaterThan";
+    RANGE_OPERATOR["LESS_THAN"] = "lessThan";
+})(RANGE_OPERATOR || (RANGE_OPERATOR = {}));

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/utils.d.ts

@@ -0,0 +1,15 @@
+import { FieldValues, RANGE_OPERATOR } from "./types";
+/**
+ * Retrieves the min and max field values from a form.
+ * @param e - The form element to retrieve values from.
+ * @param rangeOperator - The range operator value in use.
+ * @returns The values from the form.
+ */
+export declare function getFormValues(e: HTMLFormElement, rangeOperator: RANGE_OPERATOR): FieldValues;
+/**
+ * Parses a form data value null or empty string to null.
+ * Schema validation will handle the rest.
+ * @param value - The value to parse.
+ * @returns The parsed value, or null if the value is null or empty string.
+ */
+export declare function parseMinMaxValue(value: FormDataEntryValue | null): FormDataEntryValue | null;

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/utils.js

@@ -0,0 +1,25 @@
+/**
+ * Retrieves the min and max field values from a form.
+ * @param e - The form element to retrieve values from.
+ * @param rangeOperator - The range operator value in use.
+ * @returns The values from the form.
+ */
+export function getFormValues(e, rangeOperator) {
+    const formData = new FormData(e);
+    const fieldValues = {};
+    fieldValues.max = parseMinMaxValue(formData.get("max"));
+    fieldValues.min = parseMinMaxValue(formData.get("min"));
+    fieldValues.rangeOperator = rangeOperator;
+    return fieldValues;
+}
+/**
+ * Parses a form data value null or empty string to null.
+ * Schema validation will handle the rest.
+ * @param value - The value to parse.
+ * @returns The parsed value, or null if the value is null or empty string.
+ */
+export function parseMinMaxValue(value) {
+    if (value === null || value === "")
+        return null;
+    return value;
+}

package/lib/components/Filter/components/FilterRange/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { FilterRange } from "../filterRange";
+export declare const DEFAULT_ARGS: ComponentProps<typeof FilterRange>;

package/lib/components/Filter/components/FilterRange/stories/args.js

@@ -0,0 +1,13 @@
+import { fn } from "@storybook/test";
+export const DEFAULT_ARGS = {
+    categoryKey: "Weight",
+    categoryLabel: "Weight",
+    isFilterDrawer: false,
+    max: 2100,
+    min: 100,
+    onCloseFilter: fn(),
+    onFilter: fn(),
+    selectedMax: null,
+    selectedMin: null,
+    unit: "kg",
+};

package/lib/components/Filter/components/FilterRange/stories/filterRange.stories.js

@@ -1,9 +1,9 @@
 import { FilterRange } from "../filterRange";
+import { DEFAULT_ARGS } from "./args";
 const meta = {
-    args: {},
     component: FilterRange,
 };
 export default meta;
 export const Default = {
-    args: {},
+    args: DEFAULT_ARGS,
 };

package/lib/components/Filter/components/FilterRange/types.d.ts

@@ -1,8 +1,12 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { CategoryKey } from "../../../../common/entities";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { BaseComponentProps } from "../../../types";
-export interface FilterRangeProps extends BaseComponentProps {
-}
-export declare enum RANGE_OPERATOR {
-    BETWEEN = "between",
-    GREATER_THAN = "greaterThan",
-    LESS_THAN = "lessThan"
+export interface FilterRangeProps extends Omit<RangeCategoryView, "key" | "label">, BaseComponentProps {
+    categoryKey: CategoryKey;
+    categoryLabel: string;
+    categorySection?: string;
+    isFilterDrawer: boolean;
+    onCloseFilter: () => void;
+    onFilter: OnFilterFn;
 }

package/lib/components/Filter/components/FilterRange/types.js

@@ -1,6 +1 @@
-export var RANGE_OPERATOR;
-(function (RANGE_OPERATOR) {
-    RANGE_OPERATOR["BETWEEN"] = "between";
-    RANGE_OPERATOR["GREATER_THAN"] = "greaterThan";
-    RANGE_OPERATOR["LESS_THAN"] = "lessThan";
-})(RANGE_OPERATOR || (RANGE_OPERATOR = {}));
+export {};

package/lib/components/Filter/components/FilterRange/utils.d.ts

@@ -0,0 +1,8 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
+/**
+ * Returns the range operator based on the selected values.
+ * @param categoryView - View model of range category.
+ * @returns The range operator or undefined if no valid range is selected.
+ */
+export declare function getRangeOperator(categoryView: Pick<RangeCategoryView, "selectedMax" | "selectedMin">): RANGE_OPERATOR | undefined;

package/lib/components/Filter/components/FilterRange/utils.js

@@ -0,0 +1,15 @@
+import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
+/**
+ * Returns the range operator based on the selected values.
+ * @param categoryView - View model of range category.
+ * @returns The range operator or undefined if no valid range is selected.
+ */
+export function getRangeOperator(categoryView) {
+    const { selectedMax, selectedMin } = categoryView;
+    if (selectedMin && selectedMax)
+        return RANGE_OPERATOR.BETWEEN;
+    if (selectedMin)
+        return RANGE_OPERATOR.GREATER_THAN;
+    if (selectedMax)
+        return RANGE_OPERATOR.LESS_THAN;
+}

package/lib/components/Filter/components/FilterTag/stories/args.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+import { FilterTag } from "../filterTag";
+export declare const DEFAULT_ARGS: ComponentProps<typeof FilterTag>;
+export declare const WITH_ELLIPSIS_ARGS: ComponentProps<typeof FilterTag>;
+export declare const WITH_RANGE_ARGS: ComponentProps<typeof FilterTag>;

package/lib/components/Filter/components/FilterTag/stories/args.js

@@ -0,0 +1,17 @@
+import { fn } from "@storybook/test";
+import { LOREM_IPSUM } from "storybook/loremIpsum";
+export const DEFAULT_ARGS = {
+    label: "male",
+    onRemove: fn(),
+    superseded: false,
+};
+export const WITH_ELLIPSIS_ARGS = {
+    label: LOREM_IPSUM.LONG,
+    onRemove: fn(),
+    superseded: false,
+};
+export const WITH_RANGE_ARGS = {
+    label: "10 - 34",
+    onRemove: fn(),
+    superseded: false,
+};

package/lib/components/Filter/components/FilterTag/stories/filterTag.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterTag } from "../filterTag";
+declare const meta: Meta<typeof FilterTag>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithEllipsis: Story;
+export declare const WithRange: Story;

package/lib/components/Filter/components/FilterTag/stories/filterTag.stories.js

@@ -0,0 +1,21 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { FilterTag } from "../filterTag";
+import { DEFAULT_ARGS, WITH_ELLIPSIS_ARGS, WITH_RANGE_ARGS } from "./args";
+const meta = {
+    component: FilterTag,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { width: 232 } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};
+export const WithEllipsis = {
+    args: WITH_ELLIPSIS_ARGS,
+};
+export const WithRange = {
+    args: WITH_RANGE_ARGS,
+};

package/lib/components/Filter/components/FilterTag/utils.d.ts

@@ -0,0 +1,10 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { CategoryTag } from "../../../../common/entities";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+/**
+ * Returns set of filter tags with tag label (the selected range values) and corresponding Tag onRemove function.
+ * @param categoryView - View model of range category.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of selected filter tags.
+ */
+export declare function buildRangeTag(categoryView: RangeCategoryView, onFilter: OnFilterFn): CategoryTag[];

package/lib/components/Filter/components/FilterTag/utils.js

@@ -0,0 +1,40 @@
+import { VIEW_KIND } from "../../../../common/categories/views/types";
+import { RANGE_OPERATOR } from "../FilterRange/hooks/UseFilterRange/types";
+import { getRangeOperator } from "../FilterRange/utils";
+/**
+ * Returns set of filter tags with tag label (the selected range values) and corresponding Tag onRemove function.
+ * @param categoryView - View model of range category.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of selected filter tags.
+ */
+export function buildRangeTag(categoryView, onFilter) {
+    const rangeOperator = getRangeOperator(categoryView);
+    if (!rangeOperator)
+        return [];
+    return [
+        {
+            label: buildRangeTagLabel(categoryView, rangeOperator),
+            onRemove: () => onFilter(categoryView.key, undefined, false, undefined, VIEW_KIND.RANGE),
+            superseded: false,
+        },
+    ];
+}
+/**
+ * Returns the label for the range tag based on the selected values.
+ * @param categoryView - View model of range category.
+ * @param rangeOperator - The range operator.
+ * @returns The label for the range tag.
+ */
+function buildRangeTagLabel(categoryView, rangeOperator) {
+    const { selectedMax, selectedMin } = categoryView;
+    switch (rangeOperator) {
+        case RANGE_OPERATOR.BETWEEN:
+            return `${selectedMin} - ${selectedMax}`;
+        case RANGE_OPERATOR.GREATER_THAN:
+            return `> ${selectedMin}`;
+        case RANGE_OPERATOR.LESS_THAN:
+            return `< ${selectedMax}`;
+        default:
+            return "";
+    }
+}

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -1,8 +1,8 @@
-import { SelectCategoryView } from "../../../../common/entities";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface CategoryFilter {
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     label?: string;
 }
 export interface FiltersProps {

package/lib/components/Filter/components/Filters/filters.js

@@ -1,19 +1,26 @@
 import { Divider } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
+import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
+import { buildRangeTag } from "../FilterTag/utils";
 import { FilterTags } from "../FilterTags/filterTags";
 import { CategoryViewsLabel, Filters as FilterList } from "./filters.styles";
 /**
- * Returns set of selected category tags with tag label (the selected metadata label) and corresponding Tag onRemove function.
+ * Returns filter tags for the given category view.
  * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on select of category value or remove of selected category value.
- * @returns Array of selected category tags.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of filter tags.
  */
-function buildSelectCategoryTags(categoryView, onFilter) {
+function buildFilterTags(categoryView, onFilter) {
+    // Handle range category views
+    if (isRangeCategoryView(categoryView)) {
+        return buildRangeTag(categoryView, onFilter);
+    }
+    // Handle select category views.
     const { key: categoryKey, values } = categoryView;
     return values
         .filter(({ selected }) => selected)
@@ -26,13 +33,13 @@ function buildSelectCategoryTags(categoryView, onFilter) {
     });
 }
 /**
- * Build selected filter tags element for the given category type.
+ * Returns filter tags element for the given category view.
  * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on select of category value or remove of selected category value.
- * @returns Filter tags element displaying selected category values.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Filter tags element.
  */
 function renderFilterTags(categoryView, onFilter) {
-    const tags = buildSelectCategoryTags(categoryView, onFilter);
+    const tags = buildFilterTags(categoryView, onFilter);
     return React.createElement(FilterTags, { tags: tags });
 }
 export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFilter, trackFilterOpened, }) => {

package/lib/components/Filter/components/Filters/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { Filters } from "../filters";
+export declare const DEFAULT_ARGS: ComponentProps<typeof Filters>;

package/lib/components/Filter/components/Filters/stories/args.js

@@ -0,0 +1,15 @@
+import { fn } from "@storybook/test";
+import { BIOLOGICAL_SEX, DONOR_COUNT, FILE_FORMAT, FILE_TYPE, GENUS_SPECIES, } from "./constants";
+export const DEFAULT_ARGS = {
+    categoryFilters: [
+        {
+            categoryViews: [BIOLOGICAL_SEX, GENUS_SPECIES, DONOR_COUNT],
+            label: "Donor",
+        },
+        {
+            categoryViews: [FILE_FORMAT, FILE_TYPE],
+            label: "File",
+        },
+    ],
+    onFilter: fn(),
+};

package/lib/components/Filter/components/Filters/stories/constants.d.ts

@@ -0,0 +1,22 @@
+import { RangeCategoryView } from "../../../../../common/categories/views/range/types";
+import { SelectCategoryView } from "../../../../../common/entities";
+/**
+ * Biological Sex select category view
+ */
+export declare const BIOLOGICAL_SEX: SelectCategoryView;
+/**
+ * Genus Species select category view
+ */
+export declare const GENUS_SPECIES: SelectCategoryView;
+/**
+ * Donor Count range category view
+ */
+export declare const DONOR_COUNT: RangeCategoryView;
+/**
+ * File Format select category view
+ */
+export declare const FILE_FORMAT: SelectCategoryView;
+/**
+ * File Type select category view
+ */
+export declare const FILE_TYPE: SelectCategoryView;

package/lib/components/Filter/components/Filters/stories/constants.js

@@ -0,0 +1,134 @@
+/**
+ * Biological Sex
+ */
+const MALE = {
+    count: 14,
+    key: "male",
+    label: "Male",
+    selected: false,
+};
+/**
+ * Biological Sex
+ */
+const FEMALE = {
+    count: 12,
+    key: "female",
+    label: "Female",
+    selected: false,
+};
+/**
+ * Genus Species
+ */
+const HOMO_SAPIENS = {
+    count: 471,
+    key: "Homo sapiens",
+    label: "Homo sapiens",
+    selected: false,
+};
+/**
+ * Genus Species
+ */
+const MUS_MUSCLES = {
+    count: 55,
+    key: "Mus musculus",
+    label: "Mus musculus",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const BAM = {
+    count: 7,
+    key: "bam",
+    label: "bam",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const CSV = {
+    count: 5,
+    key: "csv",
+    label: "csv",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const FASTQ = {
+    count: 38,
+    key: "fastq",
+    label: "fastq",
+    selected: false,
+};
+/**
+ * File Format
+ */
+const TSV = {
+    count: 3,
+    key: "tsv",
+    label: "tsv",
+    selected: false,
+};
+/**
+ * File Type
+ */
+const RAW = {
+    count: 1,
+    key: "raw",
+    label: "raw",
+    selected: false,
+};
+/**
+ * File Type
+ */
+const PROCESSED = {
+    count: 1,
+    key: "processed",
+    label: "processed",
+    selected: false,
+};
+/**
+ * Biological Sex select category view
+ */
+export const BIOLOGICAL_SEX = {
+    key: "biologicalSex",
+    label: "Biological Sex",
+    values: [MALE, FEMALE],
+};
+/**
+ * Genus Species select category view
+ */
+export const GENUS_SPECIES = {
+    key: "genusSpecies",
+    label: "Genus Species",
+    values: [HOMO_SAPIENS, MUS_MUSCLES],
+};
+/**
+ * Donor Count range category view
+ */
+export const DONOR_COUNT = {
+    key: "Donor Count",
+    label: "Donor Count",
+    max: 200,
+    min: 10,
+    selectedMax: null,
+    selectedMin: null,
+};
+/**
+ * File Format select category view
+ */
+export const FILE_FORMAT = {
+    key: "fileFormat",
+    label: "File Format",
+    values: [BAM, CSV, FASTQ, TSV],
+};
+/**
+ * File Type select category view
+ */
+export const FILE_TYPE = {
+    isDisabled: true,
+    key: "fileType",
+    label: "File Type",
+    values: [RAW, PROCESSED],
+};

package/lib/components/Filter/components/Filters/stories/filters.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Filters } from "../filters";
+declare const meta: Meta<typeof Filters>;
+export default meta;
+type Story = StoryObj<typeof Filters>;
+export declare const Default: Story;

package/lib/components/Filter/components/Filters/stories/filters.stories.js

@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { Filters } from "../filters";
+import { DEFAULT_ARGS } from "./args";
+const meta = {
+    component: Filters,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.d.ts

@@ -6,12 +6,12 @@ import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
 export type ItemSizeByItemKey = Map<string, number>;
 export interface VariableSizeListProps {
     autocompleteListProps: Omit<MListProps, "children">;
-    categoryViews: SelectCategoryView[];
     height?: number;
     itemSize?: number;
     onFilter: OnFilterFn;
     overscanCount?: ListProps["overscanCount"];
     searchTerm: string;
+    selectCategoryViews: SelectCategoryView[];
     width?: ListProps["width"];
 }
 export declare const VariableSizeList: React.ForwardRefExoticComponent<VariableSizeListProps & React.RefAttributes<HTMLUListElement>>;

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.js

@@ -33,8 +33,8 @@ const OuterElement = forwardRef(function OuterElement({ children, ...props }, re
     return (React.createElement("div", { ref: ref, ...props },
         React.createElement(MList, { ref: autocompleteListRef, style: { maxHeight: "none", padding: 0 }, ...autocompleteListProps }, children)));
 });
-export const VariableSizeList = forwardRef(function VariableSizeList({ autocompleteListProps, categoryViews, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, width = "100%", }, autocompleteListRef) {
-    const filteredItems = applyMenuFilter(categoryViews, searchTerm);
+export const VariableSizeList = forwardRef(function VariableSizeList({ autocompleteListProps, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, selectCategoryViews, width = "100%", }, autocompleteListRef) {
+    const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
     let resizeRequired = true;
     const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const { height: windowHeight } = useWindowResize();
@@ -81,13 +81,13 @@ export const VariableSizeList = forwardRef(function VariableSizeList({ autocompl
 });
 /**
  * Filter categories' values by a search term and return model of list items
- * @param categoryViews - Select category views
+ * @param selectCategoryViews - Select category views
  * @param inputValue - Search term
  * @returns array of objects representing list items to be rendered
  */
-function applyMenuFilter(categoryViews, inputValue) {
+function applyMenuFilter(selectCategoryViews, inputValue) {
     const sortMatches = getSortMatchesFn(inputValue);
-    const filteredItems = categoryViews.reduce((filteredItems, category) => {
+    const filteredItems = selectCategoryViews.reduce((filteredItems, category) => {
         if (!category.isDisabled) {
             const categoryValueKeyPrefix = "value_" + category.key.replaceAll(";", ";;") + ";_"; // Terminating the category key with a semicolon (and escaping preceding semicolons) ensures a unique prefix
             const filteredCategoryValues = sortMatches(category.values).map((match) => ({