@databiosphere/findable-ui 50.7.0 → 50.7.1

package/src/components/Filter/common/utils.ts

@@ -1,84 +0,0 @@
-import { escapeRegExp } from "../../../common/utils";
-import {
-  FilterMenuSearchMatch,
-  FilterMenuSearchMatchRange,
-  FilterMenuSearchMatchStringFn,
-  FilterMenuSearchSortMatchesFn,
-} from "./entities";
-
-/**
- * Get range of each substring matched by a regular expression
- * @param str - String to find matches in
- * @param regExp - Regular expression to match with
- * @returns array of match ranges
- */
-function getRegExpMatchRanges(
-  str: string,
-  regExp: RegExp,
-): FilterMenuSearchMatchRange[] {
-  return Array.from(str.matchAll(regExp), (match) => {
-    const i = match.index as number; // type assertion to get around a TypeScript bug: https://github.com/microsoft/TypeScript/issues/36788
-    return {
-      end: i + match[0].length,
-      start: i,
-    };
-  });
-}
-
-/**
- * Create a function that takes a string and matches it against a given search term, returning information about the match
- * @param searchTerm - Search term for the function to match strings against
- * @returns a function for matching, or null if the search term doesn't limit search results (namely, if it's empty string)
- */
-function getMatchStringFn(
-  searchTerm: string,
-): FilterMenuSearchMatchStringFn | null {
-  if (!searchTerm) return null;
-  const wordRegExps = searchTerm
-    .split(/\s+/)
-    .filter((w) => w)
-    .map((w) => new RegExp(escapeRegExp(w), "ig"));
-  const fullRegExp = new RegExp(escapeRegExp(searchTerm), "ig");
-  return (str) => {
-    let allMatch = true;
-    const ranges: FilterMenuSearchMatchRange[] = [];
-    for (const regExp of wordRegExps) {
-      const wordRanges = getRegExpMatchRanges(str, regExp);
-      if (!wordRanges.length) {
-        allMatch = false;
-        break;
-      }
-      ranges.push(...wordRanges);
-    }
-    const fullTermRanges = getRegExpMatchRanges(str, fullRegExp);
-    ranges.push(...fullTermRanges);
-    return allMatch ? { ranges, score: fullTermRanges.length ? 2 : 1 } : null;
-  };
-}
-
-/**
- * Create a function that takes a SelectCategoryValueView array, and filters and sorts it according to a given search term, providing information about individual matches
- * @param searchTerm - Search term to apply to the SelectCategoryValueView array
- * @returns a function for searching SelectCategoryValueView arrays
- */
-export function getSortMatchesFn(
-  searchTerm: string,
-): FilterMenuSearchSortMatchesFn {
-  const matchString = getMatchStringFn(searchTerm);
-  if (!matchString) {
-    return (values) => values.map((value) => ({ score: 0, value }));
-  }
-  return (values) => {
-    const matches: FilterMenuSearchMatch[] = [];
-    for (const value of values) {
-      let match = matchString(value.label || "");
-      if (match) {
-        matches.push({ labelRanges: match.ranges, score: match.score, value });
-      } else if (typeof value.key === "string") {
-        match = matchString(value.key || "");
-        if (match) matches.push({ score: match.score, value });
-      }
-    }
-    return matches.sort(({ score: a }, { score: b }) => b - a);
-  };
-}

package/src/components/Filter/components/ClearAllFilters/clearAllFilters.styles.ts

@@ -1,6 +0,0 @@
-import styled from "@emotion/styled";
-import { Button } from "@mui/material";
-
-export const StyledButton = styled(Button)`
-  padding: 0;
-`;

package/src/components/Filter/components/ClearAllFilters/clearAllFilters.tsx

@@ -1,28 +0,0 @@
-import { JSX } from "react";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import { ExploreActionKind } from "../../../../providers/exploreState";
-import { BUTTON_PROPS } from "../../../../styles/common/mui/button";
-import { TEST_IDS } from "../../../../tests/testIds";
-import { StyledButton } from "./clearAllFilters.styles";
-
-export const ClearAllFilters = (): JSX.Element => {
-  const { exploreDispatch } = useExploreState();
-
-  const onClearFilters = (): void => {
-    exploreDispatch({
-      payload: undefined,
-      type: ExploreActionKind.ClearFilters,
-    });
-  };
-
-  return (
-    <StyledButton
-      color={BUTTON_PROPS.COLOR.PRIMARY}
-      data-testid={TEST_IDS.CLEAR_ALL_FILTERS}
-      onClick={onClearFilters}
-      variant={BUTTON_PROPS.VARIANT.TEXT}
-    >
-      Clear All
-    </StyledButton>
-  );
-};

package/src/components/Filter/components/Filter/components/DrawerTransition/drawerTransition.tsx

@@ -1,24 +0,0 @@
-import { Slide as MSlide, SlideProps as MSlideProps } from "@mui/material";
-import { JSX, forwardRef } from "react";
-
-export const DrawerTransition = forwardRef<Element, MSlideProps>(
-  function DrawerTransition(
-    {
-      children,
-      ...props /* Spread props to allow for Mui SlideProps specific prop overrides. */
-    }: MSlideProps,
-    ref,
-  ): JSX.Element {
-    return (
-      <MSlide
-        direction="right"
-        easing="ease-out"
-        ref={ref}
-        unmountOnExit
-        {...props}
-      >
-        {children}
-      </MSlide>
-    );
-  },
-);

package/src/components/Filter/components/Filter/filter.styles.ts

@@ -1,26 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Popover } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { FilterProps } from "./filter";
-
-export const StyledPopover = styled(Popover, {
-  shouldForwardProp: (prop) => prop !== "surfaceType",
-})<Pick<FilterProps, "surfaceType">>`
-  .MuiPaper-menu {
-    margin: 4px 0;
-  }
-
-  ${({ surfaceType }) =>
-    surfaceType === SURFACE_TYPE.DRAWER &&
-    css`
-      .MuiPaper-root {
-        background-color: ${PALETTE.SMOKE_LIGHT};
-        height: 100%;
-        margin: 0;
-        max-height: 100%;
-        overflow: visible; // required; allows backdrop button to render outside of drawer container.
-      }
-    `}
-`;

package/src/components/Filter/components/Filter/filter.tsx

@@ -1,142 +0,0 @@
-import { Grow, PopoverPosition, PopoverProps } from "@mui/material";
-import { JSX, MouseEvent, ReactNode, useState } from "react";
-import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
-import { CategoryView } from "../../../../common/categories/views/types";
-import { TrackFilterOpenedFunction } from "../../../../config/entities";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-import { TEST_IDS } from "../../../../tests/testIds";
-import { FilterLabel } from "../FilterLabel/filterLabel";
-import { FilterMenu } from "../FilterMenu/filterMenu";
-import { FilterRange } from "../FilterRange/filterRange";
-import { IconButton } from "../surfaces/drawer/components/IconButton/iconButton";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
-import { StyledPopover } from "./filter.styles";
-
-/**
- * Filter component.
- * TODO(cc) refactor: build tags from categoryView for selected values.
- * TODO(cc) tests: add tests for selected values (rending of tags) for select and range categories.
- */
-
-const DEFAULT_POSITION: PopoverPosition = { left: 0, top: 0 };
-const DEFAULT_SLOT_PROPS: PopoverProps["slotProps"] = {
-  paper: { variant: "menu" },
-};
-const DRAWER_SLOT_PROPS: PopoverProps["slotProps"] = {
-  paper: { elevation: 0 },
-};
-
-export interface FilterProps {
-  categorySection?: string;
-  categoryView: CategoryView;
-  closeAncestor?: () => void;
-  onFilter: OnFilterFn;
-  surfaceType: SURFACE_TYPE;
-  tags?: ReactNode; // e.g. filter tags
-  trackFilterOpened?: TrackFilterOpenedFunction;
-}
-
-export const Filter = ({
-  categorySection,
-  categoryView,
-  closeAncestor,
-  onFilter,
-  surfaceType,
-  tags,
-  trackFilterOpened,
-}: FilterProps): JSX.Element => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [position, setPosition] = useState<PopoverPosition>(DEFAULT_POSITION);
-  const isDrawer = surfaceType === SURFACE_TYPE.DRAWER;
-  const anchorPosition = isDrawer ? DEFAULT_POSITION : position;
-  const slotProps = isDrawer ? DRAWER_SLOT_PROPS : DEFAULT_SLOT_PROPS;
-  const TransitionComponent = isDrawer ? DrawerTransition : Grow;
-  const transitionDuration = isOpen ? 250 : 300;
-  const TransitionDuration = isDrawer ? transitionDuration : undefined;
-  const isRangeView = isRangeCategoryView(categoryView);
-
-  /**
-   * Closes filter popover.
-   */
-  const onCloseFilter = (): void => {
-    setIsOpen(false);
-  };
-
-  /**
-   * Closes filter and all open ancestors e.g. filter drawer.
-   */
-  const onCloseFilters = (): void => {
-    closeAncestor?.();
-    onCloseFilter();
-  };
-
-  /**
-   * Opens filter popover and sets popover position.
-   * @param event - Mouse event interaction with filter target.
-   */
-  const onOpenFilter = (event: MouseEvent<HTMLButtonElement>): void => {
-    // Grab the filter target size and position and calculate the popover position.
-    const targetDOMRect = event.currentTarget.getBoundingClientRect();
-    const popoverLeftPos = targetDOMRect.x;
-    const popoverTopPos = targetDOMRect.y + targetDOMRect.height - 1;
-    // Set popover position and open state.
-    setPosition({ left: popoverLeftPos, top: popoverTopPos });
-    setIsOpen(true);
-    trackFilterOpened?.({ category: categoryView.key });
-  };
-
-  return (
-    <>
-      <FilterLabel
-        annotation={categoryView.annotation}
-        count={isRangeView ? undefined : categoryView.values.length}
-        disabled={categoryView.isDisabled}
-        isOpen={isOpen}
-        label={categoryView.label}
-        onClick={onOpenFilter}
-        surfaceType={surfaceType}
-      />
-      <StyledPopover
-        anchorPosition={anchorPosition}
-        anchorReference="anchorPosition"
-        data-testid={TEST_IDS.FILTER_POPOVER}
-        marginThreshold={0}
-        onClose={onCloseFilters}
-        open={isOpen}
-        slotProps={slotProps}
-        slots={{ transition: TransitionComponent }}
-        surfaceType={surfaceType}
-        transitionDuration={TransitionDuration}
-      >
-        {isDrawer && <IconButton onClick={onCloseFilters} />}
-        {isRangeView ? (
-          <FilterRange
-            categoryKey={categoryView.key}
-            categoryLabel={categoryView.label}
-            categorySection={categorySection}
-            max={categoryView.max}
-            min={categoryView.min}
-            selectedMax={categoryView.selectedMax}
-            selectedMin={categoryView.selectedMin}
-            onCloseFilter={onCloseFilter}
-            onFilter={onFilter}
-            surfaceType={surfaceType}
-            unit={categoryView.unit}
-          />
-        ) : (
-          <FilterMenu
-            categoryKey={categoryView.key}
-            categoryLabel={categoryView.label}
-            categorySection={categorySection}
-            onCloseFilter={onCloseFilter}
-            onFilter={onFilter}
-            surfaceType={surfaceType}
-            values={categoryView.values}
-          />
-        )}
-      </StyledPopover>
-      {tags}
-    </>
-  );
-};

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

@@ -1,25 +0,0 @@
-import { ComponentProps } from "react";
-import { fn } from "storybook/test";
-import { DONOR_COUNT, GENUS_SPECIES } from "../../Filters/stories/constants";
-import { SURFACE_TYPE } from "../../surfaces/types";
-import { Filter } from "../filter";
-
-export const SELECT_ARGS: ComponentProps<typeof Filter> = {
-  categoryView: GENUS_SPECIES,
-  onFilter: fn(),
-  surfaceType: SURFACE_TYPE.MENU,
-};
-
-export const DISABLED_SELECT_ARGS: ComponentProps<typeof Filter> = {
-  ...SELECT_ARGS,
-  categoryView: {
-    ...SELECT_ARGS.categoryView,
-    isDisabled: true,
-  },
-};
-
-export const RANGE_ARGS: ComponentProps<typeof Filter> = {
-  categoryView: DONOR_COUNT,
-  onFilter: fn(),
-  surfaceType: SURFACE_TYPE.MENU,
-};

package/src/components/Filter/components/Filter/stories/filter.stories.tsx

@@ -1,32 +0,0 @@
-import { Box } from "@mui/material";
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } from "react";
-import { Filter } from "../filter";
-import { DISABLED_SELECT_ARGS, RANGE_ARGS, SELECT_ARGS } from "./args";
-
-const meta: Meta<typeof Filter> = {
-  component: Filter,
-  decorators: [
-    (Story): JSX.Element => (
-      <Box sx={{ width: 248 }}>
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const SelectCategory: Story = {
-  args: SELECT_ARGS,
-};
-
-export const DisabledSelectCategory: Story = {
-  args: DISABLED_SELECT_ARGS,
-};
-
-export const RangeCategory: Story = {
-  args: RANGE_ARGS,
-};

package/src/components/Filter/components/FilterCountChip/filterCountChip.styles.ts

@@ -1,19 +0,0 @@
-import { Chip, styled } from "@mui/material";
-
-export const StyledChip = styled(Chip)`
-  align-items: center;
-  border-radius: 10px;
-  flex: none;
-  gap: 0;
-  height: 16px;
-  justify-content: center;
-  min-width: 16px;
-  padding: 0 4px;
-
-  .MuiChip-label {
-    font-size: 9px;
-    font-weight: 600;
-    line-height: 16px;
-    padding: 0;
-  }
-`;

package/src/components/Filter/components/FilterCountChip/filterCountChip.tsx

@@ -1,22 +0,0 @@
-import { JSX } from "react";
-import { CHIP_PROPS } from "../../../../styles/common/mui/chip";
-import { StyledChip } from "./filterCountChip.styles";
-import { FilterCountChipProps } from "./types";
-
-export const FilterCountChip = ({
-  className,
-  count,
-  ...props /* MuiChipProps */
-}: FilterCountChipProps): JSX.Element | null => {
-  if (!count) return null;
-  return (
-    <StyledChip
-      className={className}
-      color={CHIP_PROPS.COLOR.PRIMARY}
-      component="span"
-      label={String(count)}
-      variant={CHIP_PROPS.VARIANT.FILLED}
-      {...props}
-    />
-  );
-};

package/src/components/Filter/components/FilterCountChip/stories/filterCountChip.stories.tsx

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { FilterCountChip } from "../filterCountChip";
-
-const meta: Meta<typeof FilterCountChip> = {
-  component: FilterCountChip,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DEFAULT: Story = { args: { count: 1, onDelete: undefined } };

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

@@ -1,6 +0,0 @@
-import { ChipProps } from "@mui/material";
-import { BaseComponentProps } from "../../../types";
-
-export interface FilterCountChipProps extends BaseComponentProps, ChipProps {
-  count?: number | string;
-}

package/src/components/Filter/components/FilterLabel/filterLabel.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } from "react";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { FilterLabel } from "./filterLabel";
-
-const meta = {
-  argTypes: {
-    annotation: { control: "object" },
-    count: { control: "number" },
-    disabled: { control: "boolean" },
-    isOpen: { control: "boolean" },
-    label: { control: "text" },
-  },
-  component: FilterLabel,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ padding: "8px 12px 8px 16px", width: 264 }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Components/Filter/FilterLabel",
-} satisfies Meta<typeof FilterLabel>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const FilterLabelStory: Story = {
-  args: {
-    annotation: {
-      description:
-        "This is a description of the filter label that provides additional context to the user.",
-      label: "Label",
-    },
-    count: 123,
-    disabled: false,
-    isOpen: false,
-    label: "Label",
-    onClick: () => {},
-    surfaceType: SURFACE_TYPE.MENU,
-  },
-};

package/src/components/Filter/components/FilterLabel/filterLabel.styles.ts

@@ -1,54 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Button } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { FilterLabelProps } from "./filterLabel";
-
-export const StyledButton = styled(Button, {
-  shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "surfaceType",
-})<Pick<FilterLabelProps, "isOpen" | "surfaceType">>`
-  font-weight: inherit;
-  gap: 0;
-  justify-content: space-between;
-  padding: 10px 8px;
-  text-transform: none;
-  text-align: left;
-
-  :hover {
-    background-color: ${PALETTE.SMOKE_MAIN};
-  }
-
-  &.Mui-disabled {
-    opacity: 0.3;
-  }
-
-  & .MuiButton-endIcon {
-    color: ${PALETTE.INK_LIGHT};
-    margin-right: -4px;
-    transform: rotate(-90deg);
-  }
-
-  ${({ surfaceType }) =>
-    surfaceType === SURFACE_TYPE.MENU &&
-    css`
-      padding: 6px 8px;
-
-      & .MuiButton-endIcon {
-        transform: unset;
-      }
-    `}
-
-  ${({ isOpen, surfaceType }) =>
-    isOpen &&
-    css`
-      background-color: ${PALETTE.SMOKE_MAIN};
-
-      ${surfaceType === SURFACE_TYPE.MENU &&
-      css`
-        & .MuiButton-endIcon {
-          transform: rotate(180deg);
-        }
-      `}
-    `};
-`;

package/src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -1,48 +0,0 @@
-import { ArrowDropDownRounded } from "@mui/icons-material";
-import { JSX, MouseEvent } from "react";
-import { DataDictionaryAnnotation } from "../../../../common/entities";
-import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { StyledButton } from "./filterLabel.styles";
-
-export interface FilterLabelProps {
-  annotation?: DataDictionaryAnnotation;
-  count?: number;
-  disabled?: boolean;
-  isOpen: boolean;
-  label: string;
-  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
-  surfaceType: SURFACE_TYPE;
-}
-
-export const FilterLabel = ({
-  annotation,
-  count,
-  disabled = false,
-  isOpen,
-  label,
-  onClick,
-  surfaceType,
-}: FilterLabelProps): JSX.Element => {
-  const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
-  return (
-    <Tooltip
-      description={annotation?.description}
-      enterDelay={300}
-      placement="right"
-      title={annotation?.label}
-    >
-      <StyledButton
-        color="inherit"
-        disabled={disabled}
-        endIcon={<ArrowDropDownRounded fontSize="small" />}
-        fullWidth
-        isOpen={isOpen}
-        onClick={onClick}
-        surfaceType={surfaceType}
-      >
-        {filterLabel}
-      </StyledButton>
-    </Tooltip>
-  );
-};

package/src/components/Filter/components/FilterList/filterList.styles.ts

@@ -1,58 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import {
-  listItemButtonClasses,
-  listItemTextClasses,
-  List as MList,
-} from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { LIST_MARGIN } from "../../common/constants";
-
-export const MuiListItemButtonRoot = css`
-  .${listItemButtonClasses.root} {
-    gap: 8px;
-    padding: 10px 16px;
-
-    &.Mui-disabled {
-      color: ${PALETTE.SMOKE_MAIN};
-      opacity: 1;
-    }
-  }
-`;
-
-export const MuiListItemTextRoot = css`
-  .${listItemTextClasses.root} {
-    align-items: center;
-    display: grid;
-    gap: 8px;
-    grid-template-columns: 1fr auto;
-
-    > span {
-      min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
-    }
-  }
-`;
-
-export const StyledList = styled(MList)`
-  && {
-    overflow-wrap: break-word;
-    margin: ${LIST_MARGIN}px 0;
-    padding: 0;
-  }
-
-  // List subheading
-  .MuiListSubheader-root {
-    padding: 8px 16px;
-  }
-
-  // Group divider
-  .MuiDivider-root {
-    margin: 8px 0;
-  }
-
-  // List item
-  ${MuiListItemButtonRoot}
-
-  // List item text
-  ${MuiListItemTextRoot}
-`;