@databiosphere/findable-ui 42.1.0 → 43.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "42.1.0"
+  ".": "43.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [43.0.0](https://github.com/DataBiosphere/findable-ui/compare/v42.1.0...v43.0.0) (2025-08-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* add surfacetype prop to searchallfilters ([#636](https://github.com/DataBiosphere/findable-ui/issues/636)) (#637)
+
+### Features
+
+* add surfacetype prop to searchallfilters ([#636](https://github.com/DataBiosphere/findable-ui/issues/636)) ([#637](https://github.com/DataBiosphere/findable-ui/issues/637)) ([026f522](https://github.com/DataBiosphere/findable-ui/commit/026f522e383dca64903b68859f10997ead191fe9))
+* update columnfiltersadapter to handle grouping of column filters ([#632](https://github.com/DataBiosphere/findable-ui/issues/632)) ([#633](https://github.com/DataBiosphere/findable-ui/issues/633)) ([23c54e9](https://github.com/DataBiosphere/findable-ui/commit/23c54e99a83522d8eef4b2f4b544b3cb3367ce32))
+* update columnfiltersadapter to handle range category filtering ([#634](https://github.com/DataBiosphere/findable-ui/issues/634)) ([#635](https://github.com/DataBiosphere/findable-ui/issues/635)) ([5b5a5b8](https://github.com/DataBiosphere/findable-ui/commit/5b5a5b8d36c2d847f2b97bfbb55f094f5961dbb5))
+
 ## [42.1.0](https://github.com/DataBiosphere/findable-ui/compare/v42.0.1...v42.1.0) (2025-08-13)
 
 

package/lib/common/categories/config/range/typeGuards.d.ts

@@ -0,0 +1,8 @@
+import { RangeCategoryView } from "../../views/range/types";
+import { CategoryConfig } from "../types";
+/**
+ * Determine if the given category config is a range category.
+ * @param categoryConfig - Category config.
+ * @returns True if the category config is a range category, false otherwise.
+ */
+export declare function isRangeCategoryConfig(categoryConfig: CategoryConfig): categoryConfig is RangeCategoryView;

package/lib/common/categories/config/range/typeGuards.js

@@ -0,0 +1,9 @@
+import { VIEW_KIND } from "../../views/types";
+/**
+ * Determine if the given category config is a range category.
+ * @param categoryConfig - Category config.
+ * @returns True if the category config is a range category, false otherwise.
+ */
+export function isRangeCategoryConfig(categoryConfig) {
+    return categoryConfig.viewKind === VIEW_KIND.RANGE;
+}

package/lib/components/Filter/components/SearchAllFilters/common/constants.d.ts

@@ -1,18 +1,8 @@
-import { PaperProps, PopperProps } from "@mui/material";
+import { AutocompleteProps } from "@mui/material";
 import { DividerItem, NoResultsItem } from "./entites";
 export declare const DEFAULT_LIST_HEIGHT = 0;
 export declare const DIVIDER_HEIGHT = 17;
-export declare const DEFAULT_PAPER_PROPS: Partial<PaperProps>;
-export declare const DEFAULT_POPPER_PROPS: Partial<PopperProps>;
-export declare const DEFAULT_SLOT_PROPS: {
-    paper: Partial<PaperProps>;
-    popper: Partial<PopperProps>;
-};
-export declare const DRAWER_PAPER_PROPS: Partial<PaperProps>;
-export declare const DRAWER_POPPER_PROPS: Partial<PopperProps>;
-export declare const DRAWER_SLOT_PROPS: {
-    paper: Partial<PaperProps>;
-    popper: Partial<PopperProps>;
-};
+export declare const POPPER_MENU_SLOT_PROPS: AutocompleteProps<string, false, false, true>["slotProps"];
+export declare const POPPER_DRAWER_SLOT_PROPS: AutocompleteProps<string, false, false, true>["slotProps"];
 export declare const DIVIDER_ITEM: DividerItem;
 export declare const NO_RESULTS_ITEM: NoResultsItem;

package/lib/components/Filter/components/SearchAllFilters/common/constants.js

@@ -1,47 +1,23 @@
 import { ITEM_TYPE } from "./entites";
 export const DEFAULT_LIST_HEIGHT = 0;
 export const DIVIDER_HEIGHT = 17;
-export const DEFAULT_PAPER_PROPS = {
-    sx: {
-        width: 368,
-    },
-    variant: "menu",
-};
-export const DEFAULT_POPPER_PROPS = {
-    modifiers: [
-        {
-            name: "offset",
-            options: {
-                offset: [0, 8],
-            },
-        },
-    ],
+const POPPER_MENU_PAPER_PROPS = { variant: "menu" };
+const POPPER_MENU_POPPER_PROPS = {
+    modifiers: [{ name: "offset", options: { offset: [0, 8] } }],
     placement: "bottom-start",
 };
-export const DEFAULT_SLOT_PROPS = {
-    paper: DEFAULT_PAPER_PROPS,
-    popper: DEFAULT_POPPER_PROPS,
-};
-export const DRAWER_PAPER_PROPS = {
-    elevation: 0,
-    sx: {
-        width: 312,
-    },
+export const POPPER_MENU_SLOT_PROPS = {
+    paper: POPPER_MENU_PAPER_PROPS,
+    popper: POPPER_MENU_POPPER_PROPS,
 };
-export const DRAWER_POPPER_PROPS = {
-    modifiers: [
-        {
-            name: "offset",
-            options: {
-                offset: [-16, 8],
-            },
-        },
-    ],
+const POPPER_DRAWER_PAPER_PROPS = { elevation: 0 };
+const POPPER_DRAWER_POPPER_PROPS = {
+    modifiers: [{ name: "offset", options: { offset: [-16, 8] } }],
     popperOptions: { strategy: "absolute" },
 };
-export const DRAWER_SLOT_PROPS = {
-    paper: DRAWER_PAPER_PROPS,
-    popper: DRAWER_POPPER_PROPS,
+export const POPPER_DRAWER_SLOT_PROPS = {
+    paper: POPPER_DRAWER_PAPER_PROPS,
+    popper: POPPER_DRAWER_POPPER_PROPS,
 };
 export const DIVIDER_ITEM = {
     type: ITEM_TYPE.DIVIDER,

package/lib/components/Filter/components/SearchAllFilters/components/OutlinedInput/constants.d.ts

@@ -0,0 +1,2 @@
+import { OutlinedInputProps } from "@mui/material";
+export declare const TEXT_FIELD_PROPS: OutlinedInputProps;

package/lib/components/Filter/components/SearchAllFilters/components/OutlinedInput/constants.js

@@ -0,0 +1,7 @@
+import { TEXT_FIELD_PROPS as MUI_TEXT_FIELD_PROPS } from "../../../../../../styles/common/mui/textField";
+export const TEXT_FIELD_PROPS = {
+    color: MUI_TEXT_FIELD_PROPS.COLOR.SECONDARY,
+    fullWidth: true,
+    placeholder: "Search all filters...",
+    size: MUI_TEXT_FIELD_PROPS.SIZE.SMALL,
+};

package/lib/components/Filter/components/SearchAllFilters/components/OutlinedInput/outlinedInput.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteRenderInputParams } from "@mui/material";
+export declare const OutlinedInput: (props: AutocompleteRenderInputParams) => JSX.Element;

package/lib/components/Filter/components/SearchAllFilters/components/OutlinedInput/outlinedInput.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { ClearInputAdornment } from "../../../../../common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment";
+import { SearchInputAdornment } from "../../../../../common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment";
+import { StyledOutlinedInput } from "../../../../../common/OutlinedInput/outlinedInput.styles";
+import { useAutocomplete } from "../../context/hook";
+import { TEXT_FIELD_PROPS } from "./constants";
+import { isButtonIn } from "./utils";
+export const OutlinedInput = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Intended behavior, destructure InputLabelProps, as they are not used on the component.
+    const { InputLabelProps, InputProps, ...outlinedInputProps } = props;
+    const { onClear, open, searchTerm, surfaceType } = useAutocomplete();
+    return (React.createElement(StyledOutlinedInput, { ...TEXT_FIELD_PROPS, ...InputProps, ...outlinedInputProps, endAdornment: React.createElement(ClearInputAdornment, { in: isButtonIn(surfaceType, searchTerm, open), onClick: onClear }), hasValue: !!searchTerm, startAdornment: React.createElement(SearchInputAdornment, null) }));
+};

package/lib/components/Filter/components/SearchAllFilters/components/OutlinedInput/utils.d.ts

@@ -0,0 +1,11 @@
+import { SURFACE_TYPE } from "../../../surfaces/types";
+/**
+ * Returns true if the clear button should display.
+ * Displays always for popper drawer surface type when open.
+ * Displays when there is a search term for other surface types when open.
+ * @param surfaceType - Surface type.
+ * @param searchTerm - Search term.
+ * @param open - Autocomplete open state.
+ * @returns True if the clear button should display.
+ */
+export declare function isButtonIn(surfaceType: SURFACE_TYPE, searchTerm: string, open: boolean): boolean;

package/lib/components/Filter/components/SearchAllFilters/components/OutlinedInput/utils.js

@@ -0,0 +1,17 @@
+import { SURFACE_TYPE } from "../../../surfaces/types";
+/**
+ * Returns true if the clear button should display.
+ * Displays always for popper drawer surface type when open.
+ * Displays when there is a search term for other surface types when open.
+ * @param surfaceType - Surface type.
+ * @param searchTerm - Search term.
+ * @param open - Autocomplete open state.
+ * @returns True if the clear button should display.
+ */
+export function isButtonIn(surfaceType, searchTerm, open) {
+    if (!open)
+        return false;
+    if (surfaceType === SURFACE_TYPE.POPPER_DRAWER)
+        return true;
+    return !!searchTerm;
+}

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

@@ -3,6 +3,7 @@ import React from "react";
 import { VariableSizeListProps as ListProps } from "react-window";
 import { SelectCategoryView } from "../../../../../../common/entities";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
+import { SURFACE_TYPE } from "../../../surfaces/types";
 export type ItemSizeByItemKey = Map<string, number>;
 export interface VariableSizeListProps {
     autocompleteListProps: Omit<MListProps, "children">;
@@ -12,6 +13,7 @@ export interface VariableSizeListProps {
     overscanCount?: ListProps["overscanCount"];
     searchTerm: string;
     selectCategoryViews: SelectCategoryView[];
+    surfaceType: SURFACE_TYPE;
     width?: ListProps["width"];
 }
 export declare const VariableSizeList: React.ForwardRefExoticComponent<VariableSizeListProps & React.RefAttributes<HTMLUListElement>>;

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

@@ -1,11 +1,11 @@
 import { Divider, List as MList } from "@mui/material";
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from "react";
 import { VariableSizeList as List, } from "react-window";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../../../hooks/useWindowResize";
 import { LIST_ITEM_HEIGHT, LIST_MARGIN, MAX_DISPLAYABLE_LIST_ITEMS, MAX_LIST_HEIGHT_PX, } from "../../../../common/constants";
 import { getSortMatchesFn } from "../../../../common/utils";
 import { StyledList } from "../../../FilterList/filterList.styles";
+import { SURFACE_TYPE } from "../../../surfaces/types";
 import { DIVIDER_HEIGHT, DIVIDER_ITEM, NO_RESULTS_ITEM, } from "../../common/constants";
 import { ITEM_TYPE, } from "../../common/entites";
 import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
@@ -32,10 +32,9 @@ 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, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, selectCategoryViews, width = "100%", }, autocompleteListRef) {
+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, surfaceType, width = "100%", }, autocompleteListRef) {
     const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
     let resizeRequired = true;
-    const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
     const { height: windowHeight } = useWindowResize();
     const [height, setHeight] = useState(initHeight);
     const itemSizeByItemKeyRef = useRef(new Map());
@@ -47,8 +46,8 @@ export const VariableSizeList = forwardRef(function VariableSizeList({ autocompl
     // Sets height of list.
     useEffect(() => {
         if (innerRef.current && outerRef.current)
-            setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, bpDownMd));
-    }, [bpDownMd, windowHeight]);
+            setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, surfaceType));
+    }, [surfaceType, windowHeight]);
     // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
     // Facilitates correct positioning of list items when list is updated.
     useEffect(() => {
@@ -72,7 +71,7 @@ export const VariableSizeList = forwardRef(function VariableSizeList({ autocompl
                         outerRef.current) {
                         // Set height of list.
                         resizeRequired = false;
-                        setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, bpDownMd));
+                        setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, surfaceType));
                     }
                     listRef.current?.resetAfterIndex(0); // Facilitates correct positioning of list items when list scrolls.
                 });
@@ -119,15 +118,15 @@ function applyMenuFilter(selectCategoryViews, inputValue) {
  * @param outerListElem - Outer list element to reference list position from.
  * @param innerListElem - Element containing list items.
  * @param windowHeight - Window height.
- * @param bpDownMd - True if viewport is "md" or smaller.
+ * @param surfaceType - Type of surface "POPPER_MENU" or "POPPER_DRAWER".
  * @returns calculated height.
  */
-function calculateListHeight(outerListElem, innerListElem, windowHeight, bpDownMd) {
+function calculateListHeight(outerListElem, innerListElem, windowHeight, surfaceType) {
     // Calculate max possible list height, based on window height and top position of the list element.
     const maxHeight = windowHeight - outerListElem.getBoundingClientRect().top;
-    if (bpDownMd) {
+    // Return the maximum possible height if the list is in a popper drawer.
+    if (surfaceType === SURFACE_TYPE.POPPER_DRAWER)
         return maxHeight;
-    }
     // Grab the first and last element in the list.
     const { firstElementChild: firstListEl, lastElementChild: lastListEl } = innerListElem;
     // Grab the scroll position to adjust calculated list height.

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

@@ -0,0 +1,2 @@
+import { AutocompleteContextProps } from "./types";
+export declare const AutocompleteContext: import("react").Context<AutocompleteContextProps>;

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

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { SURFACE_TYPE } from "../../surfaces/types";
+export const AutocompleteContext = createContext({
+    onClear: () => undefined,
+    onFilter: () => undefined,
+    open: false,
+    searchTerm: "",
+    selectCategoryViews: [],
+    surfaceType: SURFACE_TYPE.POPPER_MENU,
+});

package/lib/components/Filter/components/SearchAllFilters/context/hook.d.ts

@@ -0,0 +1,6 @@
+import { AutocompleteContextProps } from "./types";
+/**
+ * Returns autocomplete context.
+ * @returns autocomplete context.
+ */
+export declare const useAutocomplete: () => AutocompleteContextProps;

package/lib/components/Filter/components/SearchAllFilters/context/hook.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { AutocompleteContext } from "./context";
+/**
+ * Returns autocomplete context.
+ * @returns autocomplete context.
+ */
+export const useAutocomplete = () => {
+    return useContext(AutocompleteContext);
+};

package/lib/components/Filter/components/SearchAllFilters/context/types.d.ts

@@ -0,0 +1,11 @@
+import { SelectCategoryView } from "../../../../../common/entities";
+import { OnFilterFn } from "../../../../../hooks/useCategoryFilter";
+import { SURFACE_TYPE } from "../../surfaces/types";
+export interface AutocompleteContextProps {
+    onClear: () => void;
+    onFilter: OnFilterFn;
+    open: boolean;
+    searchTerm: string;
+    selectCategoryViews: SelectCategoryView[];
+    surfaceType: SURFACE_TYPE;
+}

package/lib/components/Filter/components/SearchAllFilters/context/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,19 +1,2 @@
-import React from "react";
-import { CategoryView } from "../../../../common/categories/views/types";
-import { SelectCategoryView } from "../../../../common/entities";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-export interface SearchAllFiltersProps {
-    categoryViews: CategoryView[];
-    onFilter: OnFilterFn;
-}
-interface ListboxContextValue {
-    onClearSearch: () => void;
-    onCloseSearch: () => void;
-    onFilter: OnFilterFn;
-    open: boolean;
-    searchTerm: string;
-    selectCategoryViews: SelectCategoryView[];
-}
-export declare const ListboxContext: React.Context<ListboxContextValue>;
-export declare const SearchAllFilters: ({ categoryViews, onFilter, }: SearchAllFiltersProps) => JSX.Element;
-export {};
+import { SearchAllFiltersProps } from "./types";
+export declare const SearchAllFilters: ({ categoryViews, className, onFilter, surfaceType, ...props }: SearchAllFiltersProps) => JSX.Element;

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

@@ -1,103 +1,66 @@
-import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { isSelectCategoryView } from "../../../../common/categories/views/select/typeGuards";
 import { SELECTOR } from "../../../../common/selectors";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { useDrawer } from "../../../common/Drawer/provider/hook";
-import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
-import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
-import { DEFAULT_SLOT_PROPS, DRAWER_SLOT_PROPS } from "./common/constants";
+import { StyledPopper, StyledPopperDrawer, } from "../surfaces/popper/Popper/popper.styles";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { POPPER_DRAWER_SLOT_PROPS, POPPER_MENU_SLOT_PROPS, } from "./common/constants";
 import { OVERFLOW_STYLE } from "./common/entites";
 import { setElementsOverflowStyle } from "./common/utils";
-import { AutocompletePopper } from "./components/AutocompletePopper/autocompletePopper.styles";
+import { OutlinedInput } from "./components/OutlinedInput/outlinedInput";
 import { VariableSizeList } from "./components/VariableSizeList/VariableSizeList";
-import { Autocomplete } from "./searchAllFilters.styles";
-const renderInput = (params) => (React.createElement(SearchAllFiltersSearch, { ...params }));
-export const ListboxContext = createContext({
-    onClearSearch: () => undefined,
-    onCloseSearch: () => undefined,
-    onFilter: () => undefined,
-    open: false,
-    searchTerm: "",
-    selectCategoryViews: [],
-});
+import { AutocompleteContext } from "./context/context";
+import { useAutocomplete } from "./context/hook";
+import { StyledAutocomplete } from "./searchAllFilters.styles";
 const Listbox = React.forwardRef(function Listbox(props, ref) {
     props = Object.assign({}, props, {
         children: undefined, // Content is controlled by VariableSizeList
     });
-    const { onFilter, searchTerm, selectCategoryViews } = useContext(ListboxContext);
-    return (React.createElement(VariableSizeList, { autocompleteListProps: props, onFilter: onFilter, ref: ref, searchTerm: searchTerm, selectCategoryViews: selectCategoryViews }));
+    const { onFilter, searchTerm, selectCategoryViews, surfaceType } = useAutocomplete();
+    return (React.createElement(VariableSizeList, { autocompleteListProps: props, onFilter: onFilter, ref: ref, searchTerm: searchTerm, selectCategoryViews: selectCategoryViews, surfaceType: surfaceType }));
 });
-export const SearchAllFilters = ({ categoryViews, onFilter, }) => {
-    const { open: isDrawerOpen } = useDrawer();
-    const bpUpMd = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
+export const SearchAllFilters = ({ categoryViews, className, onFilter, surfaceType = SURFACE_TYPE.POPPER_MENU, ...props /* Mui AutocompleteProps */ }) => {
     const autocompleteRef = useRef(null);
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
-    const selectCategoryViews = categoryViews.filter((view) => isSelectCategoryView(view));
-    // Handles background scroll action ("md" and up).
-    const handleBackgroundScroll = (overflowStyle) => {
-        if (bpUpMd) {
+    const selectCategoryViews = categoryViews.filter(isSelectCategoryView);
+    // Handles background scroll action.
+    const handleBackgroundScroll = useCallback((overflowStyle) => {
+        if (surfaceType === SURFACE_TYPE.POPPER_MENU) {
             setElementsOverflowStyle([
                 document.querySelector(SELECTOR.BODY),
                 document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
             ], overflowStyle);
         }
-    };
-    // Callback fired when the value is changed.
-    const onChange = (event) => {
-        setSearchTerm(event.target.value);
-    };
-    // Clear search
-    const onClearSearch = () => {
-        setSearchTerm("");
-    };
-    // Close search.
-    const onCloseSearch = () => {
+    }, [surfaceType]);
+    const onClose = useCallback(() => {
         setSearchTerm("");
         setOpen(false);
         handleBackgroundScroll(OVERFLOW_STYLE.NONE);
-    };
-    // Callback fired when the popup requests to be opened.
-    const onOpen = () => {
-        handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
-    };
-    // Open search.
-    const onOpenSearch = () => {
-        if (open) {
-            return;
-        }
-        setOpen(true);
-    };
-    useEffect(() => {
-        if (!open) {
+        setTimeout(() => {
             autocompleteRef.current?.querySelector("input")?.blur();
-        }
-    }, [open]);
-    // Close search when filter drawer is closed.
-    useEffect(() => {
-        if (!isDrawerOpen) {
-            setSearchTerm("");
-            setOpen(false);
-        }
-    }, [isDrawerOpen]);
-    return (React.createElement(ListboxContext.Provider, { value: {
-            onClearSearch,
-            onCloseSearch,
+        }, 100);
+    }, [handleBackgroundScroll]);
+    const onOpen = useCallback(() => {
+        setOpen(true);
+        handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
+    }, [handleBackgroundScroll]);
+    const onClear = useCallback(() => {
+        setSearchTerm("");
+        if (surfaceType === SURFACE_TYPE.POPPER_DRAWER)
+            onClose();
+    }, [onClose, surfaceType]);
+    return (React.createElement(AutocompleteContext.Provider, { value: {
+            onClear,
             onFilter,
             open,
             searchTerm,
             selectCategoryViews,
+            surfaceType,
         } },
-        React.createElement(Autocomplete, { clearOnBlur: bpUpMd, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: bpUpMd ? onCloseSearch : undefined, onClose: bpUpMd ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
-                ...props,
-                InputProps: {
-                    ...props.InputProps,
-                    endAdornment: React.createElement(SearchCloseButton, null),
-                },
-                inputProps: {
-                    ...props.inputProps,
-                    onChange,
-                },
-            }), slotProps: bpUpMd ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS })));
+        React.createElement(StyledAutocomplete, { className: className, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, onClose: onClose, onInputChange: (_, v = "") => setSearchTerm(v), onOpen: onOpen, open: open, options: [""], ref: autocompleteRef, renderInput: OutlinedInput, slotProps: surfaceType === SURFACE_TYPE.POPPER_MENU
+                ? POPPER_MENU_SLOT_PROPS
+                : POPPER_DRAWER_SLOT_PROPS, slots: surfaceType === SURFACE_TYPE.POPPER_MENU
+                ? { listbox: Listbox, popper: StyledPopper }
+                : { listbox: Listbox, popper: StyledPopperDrawer }, value: searchTerm, ...props })));
 };

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.styles.d.ts

@@ -1,2 +1,2 @@
-import { Autocomplete as MAutocomplete } from "@mui/material";
-export declare const Autocomplete: typeof MAutocomplete;
+import { Autocomplete } from "@mui/material";
+export declare const StyledAutocomplete: typeof Autocomplete;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.styles.js

@@ -1,13 +1,12 @@
 import styled from "@emotion/styled";
-import { Autocomplete as MAutocomplete } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-export const Autocomplete = styled(MAutocomplete) `
-  &.Mui-expanded {
+import { Autocomplete } from "@mui/material";
+export const StyledAutocomplete = styled(Autocomplete) `
+  &.MuiAutocomplete-root {
     .MuiOutlinedInput-root {
-      .MuiIconButton-root {
-        .MuiSvgIcon-root {
-          color: ${PALETTE.INK_MAIN};
-        }
+      padding: 0 12px;
+
+      .MuiAutocomplete-input {
+        padding: 10px 0;
       }
     }
   }

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

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

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

@@ -0,0 +1,8 @@
+import { fn } from "@storybook/test";
+import { BIOLOGICAL_SEX, DONOR_COUNT, GENUS_SPECIES, } from "../../Filters/stories/constants";
+import { SURFACE_TYPE } from "../../surfaces/types";
+export const DEFAULT_ARGS = {
+    categoryViews: [BIOLOGICAL_SEX, GENUS_SPECIES, DONOR_COUNT],
+    onFilter: fn(),
+    surfaceType: SURFACE_TYPE.POPPER_MENU,
+};

package/lib/components/Filter/components/SearchAllFilters/stories/searchAllFilters.stories.d.ts

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

package/lib/components/Filter/components/SearchAllFilters/stories/searchAllFilters.stories.js

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { SearchAllFilters } from "../searchAllFilters";
+import { DEFAULT_ARGS } from "./args";
+const meta = {
+    component: SearchAllFilters,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { backgroundColor: PALETTE.COMMON_WHITE, minWidth: 264 } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+const DefaultStory = () => {
+    return React.createElement(SearchAllFilters, { ...DEFAULT_ARGS });
+};
+export const Default = {
+    render: () => React.createElement(DefaultStory, null),
+};

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

@@ -0,0 +1,10 @@
+import { AutocompleteProps } from "@mui/material";
+import { CategoryView } from "../../../../common/categories/views/types";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { BaseComponentProps } from "../../../types";
+import { SURFACE_TYPE } from "../surfaces/types";
+export interface SearchAllFiltersProps extends Omit<AutocompleteProps<string, false, false, true>, "options" | "renderInput">, BaseComponentProps {
+    categoryViews: CategoryView[];
+    onFilter: OnFilterFn;
+    surfaceType?: SURFACE_TYPE;
+}

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

@@ -0,0 +1 @@
+export {};

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.js

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { CLEAR_ALL, } from "../../../../../../common/entities";
 import { updater } from "../../../../../Table/components/TableFeatures/ColumnFilter/utils";
 import { buildColumnFilters, getColumnFiltersCount } from "./utils";
@@ -7,11 +8,19 @@ export const ColumnFiltersAdapter = ({ renderSurface, table, }) => {
     const count = getColumnFiltersCount(table);
     const onFilter = useCallback((categoryKey, selectedCategoryValue, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `selected` is not required by TanStack adapter.
-    _selected) => {
+    _selected, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `categorySection` is not required by TanStack adapter.
+    _categorySection, viewKind) => {
         if (categoryKey === CLEAR_ALL) {
             table.resetColumnFilters();
             return;
         }
+        // Range filters use direct value assignment (e.g., [min, max] tuple for numeric ranges).
+        if (viewKind === VIEW_KIND.RANGE) {
+            table.getColumn(categoryKey)?.setFilterValue(selectedCategoryValue);
+            return;
+        }
+        // Select filters use an updater function to toggle individual values in/out of the filter array.
         table
             .getColumn(categoryKey)
             ?.setFilterValue(updater(selectedCategoryValue));

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/types.d.ts

@@ -1,6 +1,10 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { RowData, Table, TableMeta as TanStackTableMeta } from "@tanstack/react-table";
+import { CategoryGroup } from "../../../../../../config/entities";
 import { SurfaceProps } from "../../../surfaces/types";
 export interface ColumnFiltersAdapterProps<T extends RowData> {
     renderSurface: (props: SurfaceProps) => JSX.Element | null;
     table: Table<T>;
 }
+export interface ColumnFiltersTableMeta<T extends RowData> extends TanStackTableMeta<T> {
+    categoryGroups?: CategoryGroup[];
+}