@databiosphere/findable-ui 40.0.0 → 41.0.0

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

@@ -2,6 +2,7 @@ import { RangeCategoryView } from "../../../../common/categories/views/range/typ
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { BaseComponentProps } from "../../../types";
+import { SURFACE_TYPE } from "../surfaces/types";
 
 export interface FilterRangeProps
   extends Omit<RangeCategoryView, "key" | "label">,
@@ -9,7 +10,7 @@ export interface FilterRangeProps
   categoryKey: CategoryKey;
   categoryLabel: string;
   categorySection?: string;
-  isFilterDrawer: boolean;
   onCloseFilter: () => void;
   onFilter: OnFilterFn;
+  surfaceType: SURFACE_TYPE;
 }

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -1,18 +1,18 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
-import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
-import {
-  textBody500,
-  textUppercase500,
-} from "../../../../styles/common/mixins/fonts";
+import { Typography } from "@mui/material";
+import { inkMain } from "../../../../styles/common/mixins/colors";
+import { textBody500 } from "../../../../styles/common/mixins/fonts";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { FiltersProps } from "./filters";
 
 interface Props {
-  disabled: boolean;
   height: number;
 }
 
-export const Filters = styled("div")<Props>`
+export const Filters = styled("div")<
+  Props & Pick<FiltersProps, "disabled" | "surfaceType">
+>`
   ${textBody500};
   color: ${inkMain};
   height: ${({ height }) => height}px;
@@ -31,15 +31,15 @@ export const Filters = styled("div")<Props>`
     margin: 8px;
   }
 
-  ${mediaDesktopSmallUp} {
-    height: unset;
-    overflow: unset;
-    padding: 0 8px;
-  }
+  ${({ surfaceType }) =>
+    surfaceType === SURFACE_TYPE.MENU &&
+    css`
+      height: unset;
+      overflow: unset;
+      padding: 0 8px;
+    `}
 `;
 
-export const CategoryViewsLabel = styled("div")`
-  ${textUppercase500};
-  color: ${inkLight};
+export const StyledTypography = styled(Typography)`
   padding: 8px;
 `;

package/src/components/Filter/components/Filters/filters.tsx

@@ -4,29 +4,28 @@ import { isRangeCategoryView } from "../../../../common/categories/views/range/t
 import { CategoryView } from "../../../../common/categories/views/types";
 import { CategoryTag } from "../../../../common/entities";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../hooks/useBreakpointHelper";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { useDrawer } from "../../../common/Drawer/provider/hook";
+import { BaseComponentProps } from "../../../types";
 import { Filter } from "../Filter/filter";
 import { buildRangeTag } from "../FilterTag/utils";
 import { FilterTags } from "../FilterTags/filterTags";
-import { CategoryViewsLabel, Filters as FilterList } from "./filters.styles";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { Filters as FilterList, StyledTypography } from "./filters.styles";
 
 export interface CategoryFilter {
   categoryViews: CategoryView[];
   label?: string;
 }
 
-export interface FiltersProps {
+export interface FiltersProps extends BaseComponentProps {
   categoryFilters: CategoryFilter[];
   disabled?: boolean; // Global disabling of filters.
   onFilter: OnFilterFn;
+  surfaceType?: SURFACE_TYPE;
   trackFilterOpened?: TrackFilterOpenedFunction;
 }
 
@@ -74,15 +73,13 @@ function renderFilterTags(
 
 export const Filters = ({
   categoryFilters,
+  className,
   disabled = false,
   onFilter,
+  surfaceType = SURFACE_TYPE.MENU,
   trackFilterOpened,
 }: FiltersProps): JSX.Element => {
   const { onClose } = useDrawer();
-  const isFilterDrawer = useBreakpointHelper(
-    BREAKPOINT_FN_NAME.DOWN,
-    DESKTOP_SM
-  );
   const { height: windowHeight } = useWindowResize();
   const filterListRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
@@ -93,23 +90,32 @@ export const Filters = ({
 
   return (
     <FilterList
+      className={className}
       data-testid={TEST_IDS.FILTERS}
       disabled={disabled}
       height={height}
       ref={filterListRef}
+      surfaceType={surfaceType}
     >
       {categoryFilters.map(({ categoryViews, label }, i) => (
         <Fragment key={i}>
           {i !== 0 && <Divider />}
-          {label && <CategoryViewsLabel>{label}</CategoryViewsLabel>}
+          {label && (
+            <StyledTypography
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+              variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_UPPERCASE_500}
+            >
+              {label}
+            </StyledTypography>
+          )}
           {categoryViews.map((categoryView) => (
             <Filter
               key={categoryView.key}
               categorySection={label}
               categoryView={categoryView}
               closeAncestor={onClose}
-              isFilterDrawer={isFilterDrawer}
               onFilter={onFilter}
+              surfaceType={surfaceType}
               trackFilterOpened={trackFilterOpened}
               tags={renderFilterTags(categoryView, onFilter)}
             />

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

@@ -29,7 +29,7 @@ import {
   MAX_LIST_HEIGHT_PX,
 } from "../../../../common/constants";
 import { getSortMatchesFn } from "../../../../common/utils";
-import { List as FilterList } from "../../../FilterList/filterList.styles";
+import { StyledList } from "../../../FilterList/filterList.styles";
 import {
   DIVIDER_HEIGHT,
   DIVIDER_ITEM,
@@ -174,7 +174,7 @@ export const VariableSizeList = forwardRef<
     >
       <List
         height={height}
-        innerElementType={FilterList}
+        innerElementType={StyledList}
         innerRef={innerRef}
         itemCount={filteredItems.length}
         itemData={{

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

@@ -14,8 +14,9 @@ import {
   MAX_LIST_HEIGHT_PX,
 } from "../../common/constants";
 import { FilterMenuSearchMatch } from "../../common/entities";
-import { List as FilterList } from "../FilterList/filterList.styles";
+import { StyledList } from "../FilterList/filterList.styles";
 import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
+import { SURFACE_TYPE } from "../surfaces/types";
 
 export type ItemSizeByItemKey = Map<unknown, number>;
 
@@ -23,11 +24,11 @@ export interface VariableSizeListProps {
   categoryKey: CategoryKey;
   categorySection?: string;
   height?: number; // Height of list; vertical list must be a number.
-  isFilterDrawer: boolean;
   itemSize?: number; // Default item size.
   matchedItems: FilterMenuSearchMatch[];
   onFilter: OnFilterFn;
   overscanCount?: ListProps["overscanCount"];
+  surfaceType: SURFACE_TYPE;
   width?: ListProps["width"]; // Width of list; default to 100% width of parent element.
 }
 
@@ -61,11 +62,11 @@ export const VariableSizeList = ({
   categoryKey,
   categorySection,
   height: initHeight = MAX_LIST_HEIGHT_PX,
-  isFilterDrawer,
   itemSize = LIST_ITEM_HEIGHT,
   matchedItems,
   onFilter,
   overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2,
+  surfaceType,
   width = "100%",
 }: VariableSizeListProps): JSX.Element => {
   const { height: windowHeight } = useWindowResize();
@@ -87,12 +88,12 @@ export const VariableSizeList = ({
         initHeight,
         matchedItems,
         itemSizeByItemKeyRef.current,
-        isFilterDrawer,
+        surfaceType,
         windowHeight,
         outerRef.current
       )
     );
-  }, [initHeight, isFilterDrawer, matchedItems, windowHeight]);
+  }, [initHeight, matchedItems, surfaceType, windowHeight]);
 
   // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
   // Facilitates correct positioning of list items when list is updated.
@@ -104,7 +105,7 @@ export const VariableSizeList = ({
     <List
       height={height}
       outerRef={outerRef}
-      innerElementType={FilterList}
+      innerElementType={StyledList}
       itemCount={matchedItems.length}
       itemData={{
         categoryKey,
@@ -132,7 +133,7 @@ export const VariableSizeList = ({
  * @param height - Specified height of list.
  * @param matchedItems - Set of search results for category value view models in the given category.
  * @param itemSizeByItemKey - Map of item size by item key.
- * @param isFilterDrawer - True if filter is displayed in filter drawer.
+ * @param surfaceType - Surface type is "Drawer" or "Menu".
  * @param windowHeight - Window height.
  * @param outerListElem - Outer list element to reference list position from.
  * @returns calculated height.
@@ -141,11 +142,11 @@ function calculateListHeight(
   height: number,
   matchedItems: FilterMenuSearchMatch[],
   itemSizeByItemKey: ItemSizeByItemKey,
-  isFilterDrawer: boolean,
+  surfaceType: SURFACE_TYPE,
   windowHeight: number,
   outerListElem: HTMLDivElement | null
 ): number {
-  if (isFilterDrawer && outerListElem) {
+  if (surfaceType === SURFACE_TYPE.DRAWER && outerListElem) {
     return windowHeight - outerListElem.getBoundingClientRect().top;
   }
   if (matchedItems.length > MAX_DISPLAYABLE_LIST_ITEMS) {

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.tsx

@@ -0,0 +1,44 @@
+import { RowData } from "@tanstack/react-table";
+import { useCallback } from "react";
+import {
+  CategoryKey,
+  CategoryValueKey,
+  CLEAR_ALL,
+  ClearAll,
+} from "../../../../../../common/entities";
+import { updater } from "../../../../../Table/components/TableFeatures/ColumnFilter/utils";
+import { ColumnFiltersAdapterProps } from "./types";
+import { buildColumnFilters, getColumnFiltersCount } from "./utils";
+
+export const ColumnFiltersAdapter = <T extends RowData>({
+  renderSurface,
+  table,
+}: ColumnFiltersAdapterProps<T>): JSX.Element | null => {
+  const categoryFilters = buildColumnFilters(table);
+  const count = getColumnFiltersCount(table);
+
+  const onFilter = useCallback(
+    (
+      categoryKey: CategoryKey | ClearAll,
+      selectedCategoryValue: CategoryValueKey,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `selected` is not required by TanStack adapter.
+      _selected: boolean
+    ) => {
+      if (categoryKey === CLEAR_ALL) {
+        table.resetColumnFilters();
+        return;
+      }
+
+      table
+        .getColumn(categoryKey)
+        ?.setFilterValue(updater(selectedCategoryValue));
+    },
+    [table]
+  );
+
+  return renderSurface({
+    categoryFilters,
+    count,
+    onFilter,
+  });
+};

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/types.ts

@@ -0,0 +1,7 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { SurfaceProps } from "../../../surfaces/types";
+
+export interface ColumnFiltersAdapterProps<T extends RowData> {
+  renderSurface: (props: SurfaceProps) => JSX.Element | null;
+  table: Table<T>;
+}

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.ts

@@ -0,0 +1,90 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+import { CategoryView } from "../../../../../../common/categories/views/types";
+import { SelectCategoryValueView } from "../../../../../../common/entities";
+import { getColumnHeader } from "../../../../../Table/common/utils";
+import { getSortedFacetedValues } from "../../../../../Table/featureOptions/facetedColumn/utils";
+import { SurfaceProps } from "../../../surfaces/types";
+
+/**
+ * Adapter for TanStack table column filters to category filters.
+ * @param table - Table.
+ * @returns Category filters.
+ */
+export function buildColumnFilters<T extends RowData>(
+  table: Table<T>
+): SurfaceProps["categoryFilters"] {
+  // Build the category views; single category filter.
+  const categoryViews = table
+    .getAllColumns()
+    .filter((column) => column.getCanFilter())
+    .map(mapColumnToCategoryView);
+
+  return [{ categoryViews }];
+}
+
+/**
+ * Adapter for TanStack table column filters to selected count.
+ * @param table - Table.
+ * @returns Selected count.
+ */
+export function getColumnFiltersCount<T extends RowData>(
+  table: Table<T>
+): number {
+  return table
+    .getState()
+    .columnFilters.reduce(
+      (acc, columnFilter) => acc + (columnFilter.value as unknown[]).length,
+      0
+    );
+}
+
+/**
+ * Adapter for TanStack column to category view.
+ * Currently supports only select category views.
+ * @param column - Column.
+ * @returns Category view.
+ */
+function mapColumnToCategoryView<T extends RowData>(
+  column: Column<T>
+): CategoryView {
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+  const isDisabled = facetedUniqueValues.size === 0;
+  const values = mapColumnToSelectCategoryValueView(column);
+  return {
+    annotation: undefined,
+    enableChartView: false,
+    isDisabled,
+    key: column.id,
+    label: getColumnHeader(column),
+    values,
+  };
+}
+
+/**
+ * Adapter for TanStack column to select category value view.
+ * @param column - Column.
+ * @returns Select category value view.
+ */
+function mapColumnToSelectCategoryValueView<T extends RowData>(
+  column: Column<T>
+): SelectCategoryValueView[] {
+  // Get the faceted unique values and sort them.
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+  const sortedFacetsValues = getSortedFacetedValues(facetedUniqueValues);
+
+  // Selected values for the column.
+  const filterValue = (column.getFilterValue() || []) as unknown[];
+
+  // Build the select category values.
+  const selectCategoryValues: SelectCategoryValueView[] = [];
+  for (const [label, count] of sortedFacetsValues) {
+    selectCategoryValues.push({
+      count,
+      key: String(label),
+      label: String(label),
+      selected: filterValue.includes(label),
+    });
+  }
+
+  return selectCategoryValues;
+}

package/src/components/Filter/components/controls/Controls/controls.styles.ts

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+
+export const StyledGrid = styled(Grid)`
+  display: grid;
+  gap: 8px 0;
+  grid-template-columns: 1fr auto;
+  margin: 8px 0;
+  padding: 0 16px;
+`;

package/src/components/Filter/components/controls/Controls/controls.tsx

@@ -0,0 +1,31 @@
+import { Button as MButton, Typography } from "@mui/material";
+import React from "react";
+import { CLEAR_ALL } from "../../../../../common/entities";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { BUTTON_PROPS } from "../../../../common/Button/constants";
+import { BaseComponentProps } from "../../../../types";
+import { SurfaceProps } from "../../surfaces/types";
+import { StyledGrid } from "./controls.styles";
+
+/**
+ * Renders filter title and "Clear All" button.
+ */
+
+export const Controls = ({
+  className,
+  onFilter,
+}: BaseComponentProps & Pick<SurfaceProps, "onFilter">): JSX.Element | null => {
+  return (
+    <StyledGrid className={className} container>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_LARGE_500}>
+        Filters
+      </Typography>
+      <MButton
+        {...BUTTON_PROPS.PRIMARY_TEXT}
+        onClick={() => onFilter(CLEAR_ALL, undefined, false)}
+      >
+        Clear All
+      </MButton>
+    </StyledGrid>
+  );
+};

package/src/components/Filter/components/surfaces/drawer/Drawer/constants.ts

@@ -0,0 +1,7 @@
+import { DrawerProps } from "@mui/material";
+
+export const DRAWER_PROPS: DrawerProps = {
+  closeAfterTransition: true,
+  disableRestoreFocus: true,
+  elevation: 1,
+};

package/src/components/Filter/components/surfaces/drawer/Drawer/drawer.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { Drawer } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+
+export const StyledDrawer = styled(Drawer)`
+  &.MuiDrawer-root {
+    .MuiPaper-root {
+      background-color: ${PALETTE.SMOKE_LIGHT};
+      max-height: 100vh;
+      padding: 16px 0;
+      width: 312px;
+    }
+
+    + .MuiDrawer-root {
+      .MuiBackdrop-root {
+        background-color: transparent;
+      }
+    }
+  }
+`;

package/src/components/Filter/components/surfaces/drawer/Drawer/drawer.tsx

@@ -0,0 +1,46 @@
+import React, { Fragment } from "react";
+import { DrawerProvider } from "../../../../../common/Drawer/provider/provider";
+import { Controls } from "../../../controls/Controls/controls";
+import { Filters } from "../../../Filters/filters";
+import { SURFACE_TYPE } from "../../types";
+import { Button as BaseButton } from "../components/Button/button";
+import { IconButton } from "../components/IconButton/iconButton";
+import { DRAWER_PROPS } from "./constants";
+import { StyledDrawer } from "./drawer.styles";
+import { DrawerProps } from "./types";
+
+export const Drawer = ({
+  Button = BaseButton,
+  categoryFilters,
+  className,
+  count,
+  onFilter,
+  ...props /* MuiDrawerProps */
+}: DrawerProps): JSX.Element | null => {
+  return (
+    <DrawerProvider>
+      {({ onClose, open }) => (
+        <Fragment>
+          <Button count={count} />
+          <StyledDrawer
+            {...DRAWER_PROPS}
+            className={className}
+            onClose={onClose}
+            open={open}
+            {...props}
+          >
+            {/* Closes drawer */}
+            <IconButton />
+            {/* Clear all button */}
+            <Controls onFilter={onFilter} />
+            <Filters
+              categoryFilters={categoryFilters}
+              onFilter={onFilter}
+              surfaceType={SURFACE_TYPE.DRAWER}
+            />
+          </StyledDrawer>
+        </Fragment>
+      )}
+    </DrawerProvider>
+  );
+};

package/src/components/Filter/components/surfaces/drawer/Drawer/types.ts

@@ -0,0 +1,11 @@
+import { DrawerProps as MDrawerProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../types";
+import { SurfaceProps } from "../../types";
+import { Button } from "../components/Button/button";
+
+export interface DrawerProps
+  extends BaseComponentProps,
+    Omit<MDrawerProps, "children">,
+    SurfaceProps {
+  Button?: typeof Button;
+}

package/src/components/Filter/components/surfaces/drawer/components/Button/button.tsx

@@ -0,0 +1,40 @@
+import { FilterListRounded } from "@mui/icons-material";
+import { ButtonProps, Button as MButton } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { BaseComponentProps } from "../../../../../../types";
+import { FilterCountChip } from "../../../../FilterCountChip/filterCountChip";
+import { FilterCountChipProps } from "../../../../FilterCountChip/types";
+
+/**
+ * Opens facet-filters drawer.
+ */
+
+export const Button = ({
+  className,
+  count = 0,
+  ...props
+}: BaseComponentProps &
+  ButtonProps &
+  Pick<FilterCountChipProps, "count">): JSX.Element => {
+  const { onOpen } = useDrawer();
+  return (
+    <MButton
+      {...BUTTON_PROPS.SECONDARY_CONTAINED}
+      className={className}
+      onClick={onOpen}
+      startIcon={
+        <FilterListRounded
+          color={SVG_ICON_PROPS.COLOR.INK_LIGHT}
+          fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL}
+        />
+      }
+      {...props}
+    >
+      Filter
+      <FilterCountChip count={count} />
+    </MButton>
+  );
+};

package/src/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.styles.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+import { textBodyLarge500 } from "../../../../../../../styles/common/mixins/fonts";
+
+export const StyledButtonBase = styled(ButtonBase)`
+  ${textBodyLarge500}
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-start;
+  padding: 12px 16px;
+  width: 100%;
+`;

package/src/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.tsx

@@ -0,0 +1,25 @@
+import { ButtonProps } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { SouthIcon } from "../../../../../../common/CustomIcon/components/SouthIcon/southIcon";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { BaseComponentProps } from "../../../../../../types";
+import { StyledButtonBase } from "./buttonBase.styles";
+
+/**
+ * Closes facet-filter drawer.
+ */
+
+export const ButtonBase = ({
+  children,
+  className,
+  ...props
+}: BaseComponentProps & ButtonProps): JSX.Element => {
+  const { onClose } = useDrawer();
+  return (
+    <StyledButtonBase className={className} onClick={onClose} {...props}>
+      <SouthIcon fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL} />
+      {children}
+    </StyledButtonBase>
+  );
+};

package/src/components/Filter/components/surfaces/drawer/components/IconButton/constants.ts

@@ -0,0 +1,12 @@
+import { IconButtonProps, SvgIconProps } from "@mui/material";
+import { ICON_BUTTON_PROPS as MUI_ICON_BUTTON_PROPS } from "../../../../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+
+export const ICON_BUTTON_PROPS: IconButtonProps = {
+  color: MUI_ICON_BUTTON_PROPS.COLOR.INHERIT,
+  size: MUI_ICON_BUTTON_PROPS.SIZE.MEDIUM,
+};
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+};

package/src/components/Filter/components/surfaces/drawer/components/IconButton/iconButton.styles.ts

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { IconButton } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+
+export const StyledIconButton = styled(IconButton)`
+  color: ${PALETTE.COMMON_WHITE};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;

package/src/components/Filter/components/surfaces/drawer/components/IconButton/iconButton.tsx

@@ -0,0 +1,28 @@
+import { CloseRounded } from "@mui/icons-material";
+import { IconButtonProps } from "@mui/material";
+import React from "react";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { BaseComponentProps } from "../../../../../../types";
+import { ICON_BUTTON_PROPS, SVG_ICON_PROPS } from "./constants";
+import { StyledIconButton } from "./iconButton.styles";
+
+/**
+ * Closes facet-filters drawer.
+ */
+
+export const IconButton = ({
+  className,
+  ...props /* MuiIconButtonProps */
+}: BaseComponentProps & IconButtonProps): JSX.Element | null => {
+  const { onClose } = useDrawer();
+  return (
+    <StyledIconButton
+      {...ICON_BUTTON_PROPS}
+      className={className}
+      onClick={onClose}
+      {...props}
+    >
+      <CloseRounded {...SVG_ICON_PROPS} />
+    </StyledIconButton>
+  );
+};