@databiosphere/findable-ui 50.6.1 → 50.7.1

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

@@ -1,312 +0,0 @@
-import { Divider, List as MList, ListProps as MListProps } from "@mui/material";
-import React, {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  JSX,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import {
-  VariableSizeList as List,
-  ListChildComponentProps,
-  VariableSizeListProps as ListProps,
-} from "react-window";
-import { SelectCategoryView } from "../../../../../../common/entities";
-import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
-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,
-  SearchAllFiltersItem,
-  ValueItem,
-} from "../../common/entites";
-import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
-
-export type ItemSizeByItemKey = Map<string, number>;
-
-export interface VariableSizeListProps {
-  autocompleteListProps: Omit<MListProps, "children">;
-  height?: number; // Height of list; vertical list must be a number.
-  itemSize?: number; // Default item size.
-  onFilter: OnFilterFn;
-  overscanCount?: ListProps["overscanCount"];
-  searchTerm: string;
-  selectCategoryViews: SelectCategoryView[];
-  surfaceType: SURFACE_TYPE;
-  width?: ListProps["width"]; // Width of list; default to 100% width of parent element.
-}
-
-interface VariableSizeListData {
-  filteredItems: SearchAllFiltersItem[];
-  onFilter: OnFilterFn;
-  onUpdateItemSizeByItemKey: (key: string, size: number) => void;
-  searchTerm?: string;
-}
-
-interface OuterElementContextValue {
-  autocompleteListProps: Omit<MListProps, "children">;
-  autocompleteListRef?: React.ForwardedRef<HTMLUListElement>;
-}
-
-/**
- * Build variable list item element.
- * @param props - Variable size list child component props i.e. list index, style.
- * @returns variable list item element.
- */
-function renderListItem(props: ListChildComponentProps): JSX.Element {
-  const { data, index, style } = props;
-  delete style.height; // Remove height style to allow variable size list to set item height.
-  const { filteredItems, onFilter, onUpdateItemSizeByItemKey, searchTerm } =
-    data as VariableSizeListData;
-  const item = filteredItems[index];
-  if (item.type === ITEM_TYPE.DIVIDER) return <Divider style={style} />;
-  else
-    return (
-      <VariableSizeListItem
-        item={item}
-        onFilter={onFilter}
-        onUpdateItemSizeByItemKey={onUpdateItemSizeByItemKey}
-        searchTerm={searchTerm}
-        style={style}
-      />
-    );
-}
-
-const OuterElementContext = createContext<OuterElementContextValue>({
-  autocompleteListProps: {},
-});
-
-const OuterElement = forwardRef<HTMLDivElement>(function OuterElement(
-  { children, ...props }: HTMLAttributes<HTMLElement>,
-  ref,
-): JSX.Element {
-  const { autocompleteListProps, autocompleteListRef } =
-    useContext(OuterElementContext);
-  return (
-    <div ref={ref} {...props}>
-      <MList
-        ref={autocompleteListRef}
-        style={{ maxHeight: "none", padding: 0 }}
-        {...autocompleteListProps}
-      >
-        {children}
-      </MList>
-    </div>
-  );
-});
-
-export const VariableSizeList = forwardRef<
-  HTMLUListElement,
-  VariableSizeListProps
->(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%",
-  }: VariableSizeListProps,
-  autocompleteListRef,
-): JSX.Element {
-  const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
-  let resizeRequired = true;
-  const { height: windowHeight } = useWindowResize();
-  const [height, setHeight] = useState<number>(initHeight);
-  const itemSizeByItemKeyRef = useRef<ItemSizeByItemKey>(new Map());
-  const listRef = useRef<List>(null);
-  const innerRef = useRef<HTMLUListElement>(null);
-  const outerRef = useRef<HTMLDivElement>(null);
-  const { current: itemSizeByItemKey } = itemSizeByItemKeyRef;
-  const onUpdateItemSizeByItemKey = useCallback(
-    (key: string, size: number): void =>
-      updateItemSizeByItemKey(itemSizeByItemKeyRef.current, key, size),
-    [],
-  );
-
-  // Sets height of list.
-  useEffect(() => {
-    if (innerRef.current && outerRef.current)
-      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(() => {
-    listRef.current?.resetAfterIndex(0);
-  }, [filteredItems]);
-
-  return (
-    <OuterElementContext.Provider
-      value={{ autocompleteListProps, autocompleteListRef }}
-    >
-      <List
-        height={height}
-        innerElementType={StyledList}
-        innerRef={innerRef}
-        itemCount={filteredItems.length}
-        itemData={{
-          filteredItems,
-          onFilter,
-          onUpdateItemSizeByItemKey,
-          searchTerm,
-        }}
-        itemSize={(index): number => {
-          const item = filteredItems[index];
-          if (item.type === ITEM_TYPE.DIVIDER) return DIVIDER_HEIGHT;
-          return itemSizeByItemKey.get(item.key) || itemSize;
-        }}
-        onItemsRendered={(): void => {
-          requestAnimationFrame(() => {
-            if (
-              resizeRequired &&
-              innerRef.current?.childElementCount &&
-              outerRef.current
-            ) {
-              // Set height of list.
-              resizeRequired = false;
-              setHeight(
-                calculateListHeight(
-                  outerRef.current,
-                  innerRef.current,
-                  windowHeight,
-                  surfaceType,
-                ),
-              );
-            }
-            listRef.current?.resetAfterIndex(0); // Facilitates correct positioning of list items when list scrolls.
-          });
-        }}
-        outerElementType={OuterElement}
-        outerRef={outerRef}
-        overscanCount={overscanCount}
-        ref={listRef}
-        width={width}
-      >
-        {renderListItem}
-      </List>
-    </OuterElementContext.Provider>
-  );
-});
-
-/**
- * Filter categories' values by a search term and return model of list items
- * @param selectCategoryViews - Select category views
- * @param inputValue - Search term
- * @returns array of objects representing list items to be rendered
- */
-function applyMenuFilter(
-  selectCategoryViews: SelectCategoryView[],
-  inputValue: string,
-): SearchAllFiltersItem[] {
-  const sortMatches = getSortMatchesFn(inputValue);
-  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): ValueItem => ({
-            categoryKey: category.key,
-            key: categoryValueKeyPrefix + match.value.key,
-            matchRanges: match.labelRanges,
-            type: ITEM_TYPE.VALUE,
-            value: match.value,
-          }),
-        );
-        if (filteredCategoryValues.length) {
-          if (filteredItems.length) filteredItems.push(DIVIDER_ITEM);
-          filteredItems.push({
-            categoryLabel: category.label,
-            key: "category_" + category.key,
-            type: ITEM_TYPE.CATEGORY,
-          });
-          filteredItems.push(...filteredCategoryValues);
-        }
-      }
-      return filteredItems;
-    },
-    [] as SearchAllFiltersItem[],
-  );
-  if (filteredItems.length === 0) filteredItems.push(NO_RESULTS_ITEM);
-  return filteredItems;
-}
-
-/**
- * Calculates list height, either to fit available window size, or if the list is filtered, a calculated height based on
- * first and last rendered list element position.
- * @param outerListElem - Outer list element to reference list position from.
- * @param innerListElem - Element containing list items.
- * @param windowHeight - Window height.
- * @param surfaceType - Type of surface "POPPER_MENU" or "POPPER_DRAWER".
- * @returns calculated height.
- */
-function calculateListHeight(
-  outerListElem: HTMLDivElement,
-  innerListElem: HTMLUListElement,
-  windowHeight: number,
-  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;
-
-  // 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.
-  const { scrollTop } = innerListElem;
-  if (firstListEl && lastListEl) {
-    const { top } = firstListEl.getBoundingClientRect();
-    const { bottom } = lastListEl.getBoundingClientRect();
-    const calcHeight = bottom - top - scrollTop + LIST_MARGIN * 2;
-    return Math.min(calcHeight, maxHeight);
-  }
-  return maxHeight;
-}
-
-/**
- * Updates map of item size by item key.
- * @param itemSizeByItemKey - Map of item size by item key.
- * @param key - Key.
- * @param size - Item size.
- */
-function updateItemSizeByItemKey(
-  itemSizeByItemKey: ItemSizeByItemKey,
-  key: string,
-  size: number,
-): void {
-  if (itemSizeByItemKey.has(key)) {
-    return;
-  }
-  itemSizeByItemKey.set(key, size);
-}

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -1,105 +0,0 @@
-import {
-  Checkbox,
-  ListItemButton,
-  ListItemText,
-  ListSubheader,
-  Typography,
-} from "@mui/material";
-import { CSSProperties, JSX, useEffect, useRef } from "react";
-import { VIEW_KIND } from "../../../../../../common/categories/views/types";
-import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { TEST_IDS } from "../../../../../../tests/testIds";
-import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
-import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
-import { FilterNoResultsFound } from "../../../FilterNoResultsFound/filterNoResultsFound";
-import { HighlightedLabel } from "../../../HighlightedLabel/highlightedLabel";
-import { ITEM_TYPE, SearchAllFiltersDynamicItem } from "../../common/entites";
-
-interface Props {
-  item: SearchAllFiltersDynamicItem;
-  onFilter: OnFilterFn;
-  onUpdateItemSizeByItemKey: (key: string, size: number) => void;
-  searchTerm?: string;
-  style: CSSProperties;
-}
-
-export default function VariableSizeListItem({
-  item,
-  onFilter,
-  onUpdateItemSizeByItemKey,
-  searchTerm,
-  style,
-}: Props): JSX.Element {
-  const { key } = item;
-  const listItemRef = useRef<HTMLElement | null>(null);
-
-  const setRef = (e: HTMLElement | null): void => {
-    listItemRef.current = e;
-  };
-
-  // Sets map of list item key to its height.
-  useEffect(() => {
-    onUpdateItemSizeByItemKey(key, listItemRef.current?.clientHeight || 0);
-  }, [key, onUpdateItemSizeByItemKey]);
-
-  if (item.type === ITEM_TYPE.VALUE) {
-    const {
-      categoryKey,
-      matchRanges,
-      value: { count, key: valueKey, label, selected },
-    } = item;
-    return (
-      <ListItemButton
-        data-testid={TEST_IDS.FILTER_ITEM}
-        ref={setRef}
-        key={key}
-        onClick={(): void =>
-          onFilter(
-            categoryKey,
-            valueKey,
-            !selected,
-            undefined,
-            VIEW_KIND.SELECT,
-            searchTerm,
-          )
-        }
-        selected={selected}
-        style={style}
-      >
-        <Checkbox
-          checked={selected}
-          checkedIcon={<CheckedIcon />}
-          icon={<UncheckedIcon />}
-        />
-        <ListItemText
-          disableTypography
-          primary={
-            <HighlightedLabel
-              label={label}
-              ranges={matchRanges}
-              testId={TEST_IDS.FILTER_TERM}
-            />
-          }
-          secondary={
-            <Typography
-              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-              data-testid={TEST_IDS.FILTER_COUNT}
-              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
-            >
-              {count}
-            </Typography>
-          }
-        />
-      </ListItemButton>
-    );
-  } else if (item.type === ITEM_TYPE.CATEGORY) {
-    return (
-      <ListSubheader key={key} ref={setRef} style={style}>
-        {item.categoryLabel}
-      </ListSubheader>
-    );
-  } else {
-    return <FilterNoResultsFound ref={setRef} />;
-  }
-}

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

@@ -1,12 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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,16 +0,0 @@
-import styled from "@emotion/styled";
-import { Autocomplete } from "@mui/material";
-
-export const StyledAutocomplete = styled(Autocomplete)`
-  &.MuiAutocomplete-root {
-    grid-column: 1 / -1;
-
-    .MuiOutlinedInput-root {
-      padding: 0 12px;
-
-      .MuiAutocomplete-input {
-        padding: 10px 0;
-      }
-    }
-  }
-` as typeof Autocomplete;

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

@@ -1,129 +0,0 @@
-import { ListProps as MListProps } from "@mui/material";
-import { forwardRef, JSX, useCallback, useRef, useState } from "react";
-import { isSelectCategoryView } from "../../../../common/categories/views/select/typeGuards";
-import { SELECTOR } from "../../../../common/selectors";
-import { TEST_IDS } from "../../../../tests/testIds";
-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 { OutlinedInput } from "./components/OutlinedInput/outlinedInput";
-import { VariableSizeList } from "./components/VariableSizeList/VariableSizeList";
-import { AutocompleteContext } from "./context/context";
-import { useAutocomplete } from "./context/hook";
-import { StyledAutocomplete } from "./searchAllFilters.styles";
-import { SearchAllFiltersProps } from "./types";
-
-const Listbox = forwardRef<HTMLUListElement, MListProps>(
-  function Listbox(props, ref): JSX.Element {
-    props = Object.assign({}, props, {
-      children: undefined, // Content is controlled by VariableSizeList
-    });
-    const { onFilter, searchTerm, selectCategoryViews, surfaceType } =
-      useAutocomplete();
-    return (
-      <VariableSizeList
-        autocompleteListProps={props}
-        onFilter={onFilter}
-        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 autocompleteRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const selectCategoryViews = categoryViews.filter(isSelectCategoryView);
-
-  // 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],
-  );
-
-  const onClose = useCallback((): void => {
-    setSearchTerm("");
-    setOpen(false);
-    handleBackgroundScroll(OVERFLOW_STYLE.NONE);
-    setTimeout(() => {
-      autocompleteRef.current?.querySelector("input")?.blur();
-    }, 100);
-  }, [handleBackgroundScroll]);
-
-  const onOpen = useCallback((): void => {
-    setOpen(true);
-    handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
-  }, [handleBackgroundScroll]);
-
-  const onClear = useCallback((): void => {
-    setSearchTerm("");
-    if (surfaceType === SURFACE_TYPE.POPPER_DRAWER) onClose();
-  }, [onClose, surfaceType]);
-
-  return (
-    <AutocompleteContext.Provider
-      value={{
-        onClear,
-        onFilter,
-        open,
-        searchTerm,
-        selectCategoryViews,
-        surfaceType,
-      }}
-    >
-      <StyledAutocomplete
-        className={className}
-        data-testid={TEST_IDS.SEARCH_ALL_FILTERS}
-        filterOptions={(options): string[] => options}
-        freeSolo
-        onClose={onClose}
-        onInputChange={(_, v = "") => setSearchTerm(v)}
-        onOpen={onOpen}
-        open={open}
-        options={[""]} // Placeholder options, since item rendering is fully controlled by VariableSizeList
-        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}
-      />
-    </AutocompleteContext.Provider>
-  );
-};

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

@@ -1,15 +0,0 @@
-import { ComponentProps } from "react";
-import { fn } from "storybook/test";
-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

@@ -1,29 +0,0 @@
-import { Box } from "@mui/material";
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } 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

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