@databiosphere/findable-ui 42.1.0 → 44.0.0

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.js

@@ -1,34 +0,0 @@
-import styled from "@emotion/styled";
-import { TextField } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-export const InputField = styled(TextField) `
-  && {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .MuiInputBase-root {
-      & ::placeholder {
-        color: ${PALETTE.INK_LIGHT};
-        opacity: 0.8;
-      }
-
-      &.Mui-focused {
-        & ::placeholder {
-          opacity: 0;
-        }
-      }
-    }
-
-    .MuiOutlinedInput-root {
-      &.MuiInputBase-sizeSmall {
-        padding: 0 0 0 12px;
-
-        .MuiAutocomplete-input {
-          color: ${PALETTE.INK_MAIN};
-          padding: 10px 14px 10px 0;
-        }
-      }
-    }
-  }
-`;

package/src/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.ts

@@ -1,16 +0,0 @@
-import styled from "@emotion/styled";
-import { Popper as MPopper } from "@mui/material";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
-
-export const AutocompletePopper = styled(MPopper)`
-  ${bpDownMd} {
-    .MuiPaper-root {
-      background-color: ${PALETTE.SMOKE_LIGHT};
-
-      .MuiList-root {
-        margin: 0;
-      }
-    }
-  }
-`;

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

@@ -1,92 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
-import { SearchAllFilters } from "./searchAllFilters";
-
-export default {
-  argTypes: {
-    onFilter: { control: { disable: true } },
-  },
-  component: SearchAllFilters,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ width: 264 }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Components/Filter/SearchAllFilters",
-} as Meta<typeof SearchAllFilters>;
-
-type Story = StoryObj<typeof SearchAllFilters>;
-
-const onFilter = (): void => {
-  // onFilter function
-};
-
-const defaultValues = [
-  {
-    count: 1,
-    key: "item1",
-    label: "Item 1",
-    selected: false,
-  },
-  {
-    count: 10,
-    key: "item2",
-    label: "Item 2",
-    selected: false,
-  },
-];
-
-export const SearchAllFiltersStory: Story = {
-  args: {
-    categoryViews: [
-      {
-        isDisabled: false,
-        key: "genusSpecies",
-        label: "Genus Species",
-        values: [
-          {
-            count: 12,
-            key: "homoSapiens",
-            label: "Homo sapiens",
-            selected: false,
-          },
-          {
-            count: 6,
-            key: "musMusculus",
-            label: "Mus musculus",
-            selected: false,
-          },
-        ],
-      },
-      {
-        isDisabled: false,
-        key: "donorDisease",
-        label: "Donor Disease",
-        values: FilterMenuStory.args?.values || defaultValues,
-      },
-      {
-        isDisabled: true,
-        key: "anatomicalEntity",
-        label: "Anatomical Entity",
-        values: [
-          {
-            count: 12,
-            key: "oralCavity",
-            label: "oral cavity",
-            selected: true,
-          },
-          {
-            count: 6,
-            key: "pancreas",
-            label: "pancreas",
-            selected: false,
-          },
-        ],
-      },
-    ],
-    onFilter: onFilter,
-  },
-};

package/src/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.tsx

@@ -1,25 +0,0 @@
-import { CloseRounded } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
-import React, { Fragment, useContext } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../hooks/useBreakpointHelper";
-import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
-
-export const SearchCloseButton = (): JSX.Element => {
-  const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
-  const { onClearSearch, onCloseSearch, open, searchTerm } =
-    useContext(ListboxContext);
-  const showButton = open && (bpDownMd || searchTerm);
-  const onClickFn = bpDownMd ? onCloseSearch : onClearSearch;
-  return (
-    <Fragment>
-      {showButton && (
-        <IconButton onClick={onClickFn} size="large">
-          <CloseRounded fontSize="small" />
-        </IconButton>
-      )}
-    </Fragment>
-  );
-};

package/src/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.ts

@@ -1,35 +0,0 @@
-import styled from "@emotion/styled";
-import { TextField } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-export const InputField = styled(TextField)`
-  && {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .MuiInputBase-root {
-      & ::placeholder {
-        color: ${PALETTE.INK_LIGHT};
-        opacity: 0.8;
-      }
-
-      &.Mui-focused {
-        & ::placeholder {
-          opacity: 0;
-        }
-      }
-    }
-
-    .MuiOutlinedInput-root {
-      &.MuiInputBase-sizeSmall {
-        padding: 0 0 0 12px;
-
-        .MuiAutocomplete-input {
-          color: ${PALETTE.INK_MAIN};
-          padding: 10px 14px 10px 0;
-        }
-      }
-    }
-  }
-`;

package/src/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.tsx

@@ -1,29 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-import React, { useContext } from "react";
-import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { ListboxContext } from "../SearchAllFilters/searchAllFilters";
-import { InputField } from "./searchAllFiltersSearch.styles";
-
-export const SearchAllFiltersSearch = ({
-  inputProps,
-  InputProps,
-  ...props
-}: TextFieldProps): JSX.Element => {
-  const { searchTerm } = useContext(ListboxContext);
-  delete inputProps?.value; // Control input value from the search term.
-  return (
-    <InputField
-      {...props}
-      fullWidth
-      InputProps={{
-        ...(InputProps || {}),
-        startAdornment: <SearchIcon fontSize="small" />,
-      }}
-      inputProps={{ ...(inputProps || {}), spellCheck: false }}
-      placeholder="Search all filters..."
-      size="small"
-      value={searchTerm}
-      variant="outlined"
-    />
-  );
-};