@databiosphere/findable-ui 42.1.0 → 44.0.0

package/src/components/Filter/components/SearchAllFilters/common/constants.ts

@@ -1,55 +1,42 @@
-import { PaperProps, PopperProps } from "@mui/material";
+import { AutocompleteProps, PaperProps, PopperProps } from "@mui/material";
 import { DividerItem, ITEM_TYPE, NoResultsItem } from "./entites";
 
 export const DEFAULT_LIST_HEIGHT = 0;
 
 export const DIVIDER_HEIGHT = 17;
 
-export const DEFAULT_PAPER_PROPS: Partial<PaperProps> = {
-  sx: {
-    width: 368,
-  },
-  variant: "menu",
-};
-export const DEFAULT_POPPER_PROPS: Partial<PopperProps> = {
-  modifiers: [
-    {
-      name: "offset",
-      options: {
-        offset: [0, 8],
-      },
-    },
-  ],
+const POPPER_MENU_PAPER_PROPS: Partial<PaperProps> = { variant: "menu" };
+
+const POPPER_MENU_POPPER_PROPS: Partial<PopperProps> = {
+  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 POPPER_MENU_SLOT_PROPS: AutocompleteProps<
+  string,
+  false,
+  false,
+  true
+>["slotProps"] = {
+  paper: POPPER_MENU_PAPER_PROPS,
+  popper: POPPER_MENU_POPPER_PROPS,
 };
 
-export const DRAWER_PAPER_PROPS: Partial<PaperProps> = {
-  elevation: 0,
-  sx: {
-    width: 312,
-  },
-};
+const POPPER_DRAWER_PAPER_PROPS: Partial<PaperProps> = { elevation: 0 };
 
-export const DRAWER_POPPER_PROPS: Partial<PopperProps> = {
-  modifiers: [
-    {
-      name: "offset",
-      options: {
-        offset: [-16, 8],
-      },
-    },
-  ],
+const POPPER_DRAWER_POPPER_PROPS: Partial<PopperProps> = {
+  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: AutocompleteProps<
+  string,
+  false,
+  false,
+  true
+>["slotProps"] = {
+  paper: POPPER_DRAWER_PAPER_PROPS,
+  popper: POPPER_DRAWER_POPPER_PROPS,
 };
 
 export const DIVIDER_ITEM: DividerItem = {

package/src/components/Filter/components/SearchAllFilters/components/OutlinedInput/constants.ts

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

package/src/components/Filter/components/SearchAllFilters/components/OutlinedInput/outlinedInput.tsx

@@ -0,0 +1,31 @@
+import { AutocompleteRenderInputParams } from "@mui/material";
+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: AutocompleteRenderInputParams
+): JSX.Element => {
+  // 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 (
+    <StyledOutlinedInput
+      {...TEXT_FIELD_PROPS}
+      {...InputProps}
+      {...outlinedInputProps}
+      endAdornment={
+        <ClearInputAdornment
+          in={isButtonIn(surfaceType, searchTerm, open)}
+          onClick={onClear}
+        />
+      }
+      hasValue={!!searchTerm}
+      startAdornment={<SearchInputAdornment />}
+    />
+  );
+};

package/src/components/Filter/components/SearchAllFilters/components/OutlinedInput/utils.ts

@@ -0,0 +1,22 @@
+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: SURFACE_TYPE,
+  searchTerm: string,
+  open: boolean
+): boolean {
+  if (!open) return false;
+
+  if (surfaceType === SURFACE_TYPE.POPPER_DRAWER) return true;
+
+  return !!searchTerm;
+}

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.tsx

@@ -15,10 +15,6 @@ import {
   VariableSizeListProps as ListProps,
 } from "react-window";
 import { SelectCategoryView } from "../../../../../../common/entities";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../hooks/useBreakpointHelper";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
 import { useWindowResize } from "../../../../../../hooks/useWindowResize";
 import {
@@ -29,6 +25,7 @@ import {
 } 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,
@@ -51,6 +48,7 @@ export interface VariableSizeListProps {
   overscanCount?: ListProps["overscanCount"];
   searchTerm: string;
   selectCategoryViews: SelectCategoryView[];
+  surfaceType: SURFACE_TYPE;
   width?: ListProps["width"]; // Width of list; default to 100% width of parent element.
 }
 
@@ -125,13 +123,13 @@ export const VariableSizeList = forwardRef<
     overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2,
     searchTerm,
     selectCategoryViews,
+    surfaceType,
     width = "100%",
   }: VariableSizeListProps,
   autocompleteListRef
 ): JSX.Element {
   const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
   let resizeRequired = true;
-  const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
   const { height: windowHeight } = useWindowResize();
   const [height, setHeight] = useState<number>(initHeight);
   const itemSizeByItemKeyRef = useRef<ItemSizeByItemKey>(new Map());
@@ -153,10 +151,10 @@ export const VariableSizeList = forwardRef<
           outerRef.current,
           innerRef.current,
           windowHeight,
-          bpDownMd
+          surfaceType
         )
       );
-  }, [bpDownMd, windowHeight]);
+  }, [surfaceType, windowHeight]);
 
   // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
   // Facilitates correct positioning of list items when list is updated.
@@ -198,7 +196,7 @@ export const VariableSizeList = forwardRef<
                   outerRef.current,
                   innerRef.current,
                   windowHeight,
-                  bpDownMd
+                  surfaceType
                 )
               );
             }
@@ -266,20 +264,21 @@ function applyMenuFilter(
  * @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: HTMLDivElement,
   innerListElem: HTMLUListElement,
   windowHeight: number,
-  bpDownMd: boolean
+  surfaceType: SURFACE_TYPE
 ): number {
   // 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 maxHeight;
-  }
+
+  // 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;

package/src/components/Filter/components/SearchAllFilters/context/context.ts

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

package/src/components/Filter/components/SearchAllFilters/context/hook.ts

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

package/src/components/Filter/components/SearchAllFilters/context/types.ts

@@ -0,0 +1,12 @@
+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/src/components/Filter/components/SearchAllFilters/searchAllFilters.styles.ts

@@ -1,15 +1,14 @@
 import styled from "@emotion/styled";
-import { Autocomplete as MAutocomplete } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
+import { Autocomplete } from "@mui/material";
 
-export const Autocomplete = styled(MAutocomplete)`
-  &.Mui-expanded {
+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;
       }
     }
   }
-` as typeof MAutocomplete;
+` as typeof Autocomplete;

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -1,61 +1,25 @@
-import {
-  AutocompleteRenderInputParams,
-  ListProps as MListProps,
-} from "@mui/material";
-import React, {
-  ChangeEvent,
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { ListProps as MListProps } from "@mui/material";
+import React, { useCallback, useRef, useState } from "react";
 import { isSelectCategoryView } from "../../../../common/categories/views/select/typeGuards";
-import { CategoryView } from "../../../../common/categories/views/types";
-import { SelectCategoryView } from "../../../../common/entities";
 import { SELECTOR } from "../../../../common/selectors";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../hooks/useBreakpointHelper";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 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";
-
-export interface SearchAllFiltersProps {
-  categoryViews: CategoryView[];
-  onFilter: OnFilterFn;
-}
-
-interface ListboxContextValue {
-  onClearSearch: () => void;
-  onCloseSearch: () => void;
-  onFilter: OnFilterFn;
-  open: boolean;
-  searchTerm: string;
-  selectCategoryViews: SelectCategoryView[];
-}
-
-const renderInput = (params: AutocompleteRenderInputParams): JSX.Element => (
-  <SearchAllFiltersSearch {...params} />
-);
-
-export const ListboxContext = createContext<ListboxContextValue>({
-  onClearSearch: (): void => undefined,
-  onCloseSearch: (): void => undefined,
-  onFilter: (): void => undefined,
-  open: false,
-  searchTerm: "",
-  selectCategoryViews: [],
-});
+import { AutocompleteContext } from "./context/context";
+import { useAutocomplete } from "./context/hook";
+import { StyledAutocomplete } from "./searchAllFilters.styles";
+import { SearchAllFiltersProps } from "./types";
 
 const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
   props,
@@ -64,8 +28,8 @@ const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
   props = Object.assign({}, props, {
     children: undefined, // Content is controlled by VariableSizeList
   });
-  const { onFilter, searchTerm, selectCategoryViews } =
-    useContext(ListboxContext);
+  const { onFilter, searchTerm, selectCategoryViews, surfaceType } =
+    useAutocomplete();
   return (
     <VariableSizeList
       autocompleteListProps={props}
@@ -73,120 +37,94 @@ const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
       ref={ref}
       searchTerm={searchTerm}
       selectCategoryViews={selectCategoryViews}
+      surfaceType={surfaceType}
     />
   );
 });
 
 export const SearchAllFilters = ({
   categoryViews,
+  className,
   onFilter,
+  surfaceType = SURFACE_TYPE.POPPER_MENU,
+  ...props /* Mui AutocompleteProps */
 }: SearchAllFiltersProps): JSX.Element => {
-  const { open: isDrawerOpen } = useDrawer();
-  const bpUpMd = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
   const autocompleteRef = useRef<HTMLDivElement>(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: OVERFLOW_STYLE): void => {
-    if (bpUpMd) {
-      setElementsOverflowStyle(
-        [
-          document.querySelector(SELECTOR.BODY),
-          document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
-        ],
-        overflowStyle
-      );
-    }
-  };
+  const selectCategoryViews = categoryViews.filter(isSelectCategoryView);
 
-  // Callback fired when the value is changed.
-  const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    setSearchTerm(event.target.value);
-  };
-
-  // Clear search
-  const onClearSearch = (): void => {
-    setSearchTerm("");
-  };
+  // Handles background scroll action.
+  const handleBackgroundScroll = useCallback(
+    (overflowStyle: OVERFLOW_STYLE): void => {
+      if (surfaceType === SURFACE_TYPE.POPPER_MENU) {
+        setElementsOverflowStyle(
+          [
+            document.querySelector(SELECTOR.BODY),
+            document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
+          ],
+          overflowStyle
+        );
+      }
+    },
+    [surfaceType]
+  );
 
-  // Close search.
-  const onCloseSearch = (): void => {
+  const onClose = useCallback((): void => {
     setSearchTerm("");
     setOpen(false);
     handleBackgroundScroll(OVERFLOW_STYLE.NONE);
-  };
-
-  // Callback fired when the popup requests to be opened.
-  const onOpen = (): void => {
-    handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
-  };
+    setTimeout(() => {
+      autocompleteRef.current?.querySelector("input")?.blur();
+    }, 100);
+  }, [handleBackgroundScroll]);
 
-  // Open search.
-  const onOpenSearch = (): void => {
-    if (open) {
-      return;
-    }
+  const onOpen = useCallback((): void => {
     setOpen(true);
-  };
-
-  useEffect(() => {
-    if (!open) {
-      autocompleteRef.current?.querySelector("input")?.blur();
-    }
-  }, [open]);
+    handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
+  }, [handleBackgroundScroll]);
 
-  // Close search when filter drawer is closed.
-  useEffect(() => {
-    if (!isDrawerOpen) {
-      setSearchTerm("");
-      setOpen(false);
-    }
-  }, [isDrawerOpen]);
+  const onClear = useCallback((): void => {
+    setSearchTerm("");
+    if (surfaceType === SURFACE_TYPE.POPPER_DRAWER) onClose();
+  }, [onClose, surfaceType]);
 
   return (
-    <ListboxContext.Provider
+    <AutocompleteContext.Provider
       value={{
-        onClearSearch,
-        onCloseSearch,
+        onClear,
         onFilter,
         open,
         searchTerm,
         selectCategoryViews,
+        surfaceType,
       }}
     >
-      <Autocomplete
-        clearOnBlur={bpUpMd}
+      <StyledAutocomplete
+        className={className}
         data-testid={TEST_IDS.SEARCH_ALL_FILTERS}
         filterOptions={(options): string[] => options}
         freeSolo
-        ListboxComponent={Listbox}
-        onBlur={bpUpMd ? onCloseSearch : undefined}
-        onClose={bpUpMd ? onCloseSearch : undefined}
-        onFocus={onOpenSearch}
+        onClose={onClose}
+        onInputChange={(_, v = "") => setSearchTerm(v)}
         onOpen={onOpen}
         open={open}
         options={[""]} // Placeholder options, since item rendering is fully controlled by VariableSizeList
-        PopperComponent={AutocompletePopper}
         ref={autocompleteRef}
-        renderInput={(props): JSX.Element =>
-          renderInput({
-            ...props,
-            InputProps: {
-              ...props.InputProps,
-              endAdornment: <SearchCloseButton />,
-            },
-            inputProps: {
-              ...props.inputProps,
-              onChange,
-            },
-          })
+        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 }
         }
-        slotProps={bpUpMd ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS}
+        value={searchTerm}
+        {...props}
       />
-    </ListboxContext.Provider>
+    </AutocompleteContext.Provider>
   );
 };

package/src/components/Filter/components/SearchAllFilters/stories/args.ts

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

package/src/components/Filter/components/SearchAllFilters/stories/searchAllFilters.stories.tsx

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

package/src/components/Filter/components/SearchAllFilters/types.ts

@@ -0,0 +1,16 @@
+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;
+}