@databiosphere/findable-ui 40.0.0 → 41.0.0

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterLabel } from "./filterLabel";
 const meta = {
     argTypes: {
@@ -22,5 +23,6 @@ export const FilterLabelStory = {
         isOpen: false,
         label: "Label",
         onClick: () => { },
+        surfaceType: SURFACE_TYPE.MENU,
     },
 };

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -1,9 +1,6 @@
-interface Props {
-    isOpen: boolean;
-}
-export declare const FilterLabel: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+import { FilterLabelProps } from "./filterLabel";
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
     theme?: import("@emotion/react").Theme;
-} & Props, {}, {}>;
-export {};
+} & Pick<FilterLabelProps, "isOpen" | "surfaceType">, {}, {}>;

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.js

@@ -1,10 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { inkLight, smokeMain } from "../../../../styles/common/mixins/colors";
-export const FilterLabel = styled(Button, {
-    shouldForwardProp: (prop) => prop !== "isOpen",
+import { SURFACE_TYPE } from "../surfaces/types";
+export const StyledButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "surfaceType",
 }) `
   font-weight: inherit;
   gap: 0;
@@ -27,22 +28,24 @@ export const FilterLabel = styled(Button, {
     transform: rotate(-90deg);
   }
 
-  ${mediaDesktopSmallUp} {
-    padding: 6px 8px;
+  ${({ surfaceType }) => surfaceType === SURFACE_TYPE.MENU &&
+    css `
+      padding: 6px 8px;
 
-    & .MuiButton-endIcon {
-      transform: unset;
-    }
-  }
+      & .MuiButton-endIcon {
+        transform: unset;
+      }
+    `}
 
-  ${(props) => props.isOpen &&
+  ${({ isOpen, surfaceType }) => isOpen &&
     css `
-      background-color: ${smokeMain(props)};
+      background-color: ${PALETTE.SMOKE_MAIN};
 
-      ${mediaDesktopSmallUp(props)} {
+      ${surfaceType === SURFACE_TYPE.MENU &&
+        css `
         & .MuiButton-endIcon {
           transform: rotate(180deg);
         }
-      }
+      `}
     `};
 `;

package/lib/components/Filter/components/FilterList/filterList.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const MuiListItemButtonRoot: import("@emotion/react").SerializedStyles;
 export declare const MuiListItemTextRoot: import("@emotion/react").SerializedStyles;
-export declare const List: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+export declare const StyledList: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
 }, "style" | "className" | "classes" | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
     theme?: import("@emotion/react").Theme;

package/lib/components/Filter/components/FilterList/filterList.styles.js

@@ -26,7 +26,7 @@ export const MuiListItemTextRoot = css `
     }
   }
 `;
-export const List = styled(MList) `
+export const StyledList = styled(MList) `
   && {
     overflow-wrap: break-word;
     margin: ${LIST_MARGIN}px 0;

package/lib/components/Filter/components/FilterMenu/filterMenu.d.ts

@@ -1,15 +1,16 @@
 import { CategoryKey, SelectCategoryValueView } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { FilterMenuSearchMatch } from "../../common/entities";
+import { SURFACE_TYPE } from "../surfaces/types";
 export interface FilterMenuProps {
     categoryKey: CategoryKey;
     categoryLabel: string;
     categorySection?: string;
-    isFilterDrawer: boolean;
     menuWidth?: number;
     onCloseFilter: () => void;
     onFilter: OnFilterFn;
+    surfaceType: SURFACE_TYPE;
     values: SelectCategoryValueView[];
 }
-export declare const FilterMenu: ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth, onCloseFilter, onFilter, values, }: FilterMenuProps) => JSX.Element;
+export declare const FilterMenu: ({ categoryKey, categoryLabel, categorySection, menuWidth, onCloseFilter, onFilter, surfaceType, values, }: FilterMenuProps) => JSX.Element;
 export declare function applyMenuFilter(values: SelectCategoryValueView[], searchTerm: string): FilterMenuSearchMatch[];

package/lib/components/Filter/components/FilterMenu/filterMenu.js

@@ -1,23 +1,23 @@
 import React, { useState } from "react";
-import { SouthIcon } from "../../../common/CustomIcon/components/SouthIcon/southIcon";
 import { MAX_DISPLAYABLE_LIST_ITEMS } from "../../common/constants";
 import { getSortMatchesFn } from "../../common/utils";
-import { List } from "../FilterList/filterList.styles";
+import { StyledList } from "../FilterList/filterList.styles";
 import { FilterMenuSearch } from "../FilterMenuSearch/filterMenuSearch";
 import { FilterNoResultsFound } from "../FilterNoResultsFound/filterNoResultsFound";
+import { ButtonBase } from "../surfaces/drawer/components/ButtonBase/buttonBase";
+import { SURFACE_TYPE } from "../surfaces/types";
 import { VariableSizeList } from "../VariableSizeList/VariableSizeList";
-import { FilterView, FilterViewTools, StyledButtonBase, } from "./filterMenu.styles";
-export const FilterMenu = ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth = 312, onCloseFilter, onFilter, values, }) => {
+import { FilterView, FilterViewTools } from "./filterMenu.styles";
+export const FilterMenu = ({ categoryKey, categoryLabel, categorySection, menuWidth = 312, onCloseFilter, onFilter, surfaceType, values, }) => {
     const [searchTerm, setSearchTerm] = useState("");
-    const isSearchable = isFilterDrawer || values.length > MAX_DISPLAYABLE_LIST_ITEMS;
+    const isSearchable = surfaceType === SURFACE_TYPE.DRAWER ||
+        values.length > MAX_DISPLAYABLE_LIST_ITEMS;
     const matchedItems = applyMenuFilter(values, isSearchable ? searchTerm : "");
     return (React.createElement(FilterView, { menuWidth: menuWidth },
-        React.createElement(FilterViewTools, null,
-            isFilterDrawer && (React.createElement(StyledButtonBase, { onClick: onCloseFilter },
-                React.createElement(SouthIcon, { fontSize: "small" }),
-                categoryLabel)),
-            isSearchable && (React.createElement(FilterMenuSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm }))),
-        matchedItems.length > 0 ? (React.createElement(VariableSizeList, { categorySection: categorySection, categoryKey: categoryKey, isFilterDrawer: isFilterDrawer, onFilter: onFilter, matchedItems: matchedItems })) : (React.createElement(List, null,
+        React.createElement(FilterViewTools, { surfaceType: surfaceType },
+            surfaceType === SURFACE_TYPE.DRAWER && (React.createElement(ButtonBase, { onClick: onCloseFilter }, categoryLabel)),
+            isSearchable && (React.createElement(FilterMenuSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm, surfaceType: surfaceType }))),
+        matchedItems.length > 0 ? (React.createElement(VariableSizeList, { categorySection: categorySection, categoryKey: categoryKey, onFilter: onFilter, matchedItems: matchedItems, surfaceType: surfaceType })) : (React.createElement(StyledList, null,
             React.createElement(FilterNoResultsFound, { onClearSearchTerm: () => setSearchTerm("") })))));
 };
 export function applyMenuFilter(values, searchTerm) {

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.d.ts

@@ -1,4 +1,5 @@
 import { StoryObj } from "@storybook/react";
+import { SURFACE_TYPE } from "../surfaces/types";
 declare const meta: {
     argTypes: {
         categoryKey: {
@@ -20,15 +21,15 @@ declare const meta: {
             };
         };
     };
-    component: ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth, onCloseFilter, onFilter, values, }: import("./filterMenu").FilterMenuProps) => JSX.Element;
+    component: ({ categoryKey, categoryLabel, categorySection, menuWidth, onCloseFilter, onFilter, surfaceType, values, }: import("./filterMenu").FilterMenuProps) => JSX.Element;
     decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         categoryKey: import("../../../../common/entities").CategoryKey;
         categoryLabel: string;
         categorySection?: string | undefined;
-        isFilterDrawer: boolean;
         menuWidth?: number | undefined;
         onCloseFilter: () => void;
         onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        surfaceType: SURFACE_TYPE;
         values: import("../../../../common/entities").SelectCategoryValueView[];
     }>) => JSX.Element)[];
     title: string;

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterMenu } from "./filterMenu";
 const meta = {
     argTypes: {
@@ -19,10 +20,10 @@ export const FilterMenuStory = {
     args: {
         categoryKey: "donorDisease",
         categoryLabel: "Donor Disease",
-        isFilterDrawer: false,
         menuWidth: 312,
         onCloseFilter: () => { },
         onFilter: () => { },
+        surfaceType: SURFACE_TYPE.MENU,
         values: [
             {
                 count: 312,

package/lib/components/Filter/components/FilterMenu/filterMenu.styles.d.ts

@@ -1,3 +1,4 @@
+import { FilterProps } from "../Filter/filter";
 interface Props {
     menuWidth: number;
 }
@@ -8,10 +9,5 @@ export declare const FilterView: import("@emotion/styled").StyledComponent<{
 export declare const FilterViewTools: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+} & Pick<FilterProps, "surfaceType">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Filter/components/FilterMenu/filterMenu.styles.js

@@ -1,24 +1,14 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { ButtonBase } from "@mui/material";
-import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
-import { textBodyLarge500 } from "../../../../styles/common/mixins/fonts";
+import { SURFACE_TYPE } from "../surfaces/types";
 export const FilterView = styled.div `
   width: ${({ menuWidth }) => `${menuWidth}px`};
 `;
-export const FilterViewTools = styled.div `
+export const FilterViewTools = styled("div") `
   margin: 24px 0 8px;
 
-  ${mediaDesktopSmallUp} {
-    margin: 0;
-  }
-}
-`;
-export const StyledButtonBase = styled(ButtonBase) `
-  ${textBodyLarge500};
-  align-items: center;
-  display: flex;
-  gap: 8px;
-  justify-content: flex-start;
-  padding: 12px 16px;
-  width: 100%;
+  ${({ surfaceType }) => surfaceType === SURFACE_TYPE.MENU &&
+    css `
+      margin: 0;
+    `}
 `;

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.d.ts

@@ -1,6 +1,8 @@
 import { SetSearchTermFn } from "../../common/entities";
+import { SURFACE_TYPE } from "../surfaces/types";
 export interface FilterMenuSearchProps {
     searchTerm: string;
     setSearchTerm: SetSearchTermFn;
+    surfaceType: SURFACE_TYPE;
 }
-export declare const FilterMenuSearch: ({ searchTerm, setSearchTerm, }: FilterMenuSearchProps) => JSX.Element;
+export declare const FilterMenuSearch: ({ searchTerm, setSearchTerm, surfaceType, }: FilterMenuSearchProps) => JSX.Element;

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { FilterMenuSearch as Search } from "./filterMenuSearch.styles";
-export const FilterMenuSearch = ({ searchTerm, setSearchTerm, }) => {
-    return (React.createElement(Search, { placeholder: "Search", searchTerm: searchTerm, setSearchTerm: setSearchTerm, StartAdornment: SearchIcon }));
+import { StyledInput as Search } from "./filterMenuSearch.styles";
+export const FilterMenuSearch = ({ searchTerm, setSearchTerm, surfaceType, }) => {
+    return (React.createElement(Search, { placeholder: "Search", searchTerm: searchTerm, setSearchTerm: setSearchTerm, StartAdornment: SearchIcon, surfaceType: surfaceType }));
 };

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.styles.d.ts

@@ -1,3 +1,4 @@
-export declare const FilterMenuSearch: import("@emotion/styled").StyledComponent<import("../../../common/Input/input").InputProps & {
+import { FilterMenuSearchProps } from "./filterMenuSearch";
+export declare const StyledInput: import("@emotion/styled").StyledComponent<import("../../../common/Input/input").InputProps & {
     theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+} & Pick<FilterMenuSearchProps, "surfaceType">, {}, {}>;

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.styles.js

@@ -1,15 +1,19 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 import { inkLight } from "../../../../styles/common/mixins/colors";
 import { Input } from "../../../common/Input/input";
-export const FilterMenuSearch = styled(Input) `
+import { SURFACE_TYPE } from "../surfaces/types";
+export const StyledInput = styled(Input, {
+    shouldForwardProp: (prop) => prop !== "surfaceType",
+}) `
   padding: 0 16px;
 
   .MuiOutlinedInput-input {
     color: ${inkLight};
   }
 
-  ${mediaDesktopSmallUp} {
-    margin-top: 16px;
-  }
+  ${({ surfaceType }) => surfaceType === SURFACE_TYPE.MENU &&
+    css `
+      margin-top: 16px;
+    `}
 `;

package/lib/components/Filter/components/FilterRange/filterRange.d.ts

@@ -1,2 +1,2 @@
 import { FilterRangeProps } from "./types";
-export declare const FilterRange: ({ categoryKey, categoryLabel, categorySection, className, isFilterDrawer, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, unit, }: FilterRangeProps) => JSX.Element;
+export declare const FilterRange: ({ categoryKey, categoryLabel, categorySection, className, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, surfaceType, unit, }: FilterRangeProps) => JSX.Element;

package/lib/components/Filter/components/FilterRange/filterRange.js

@@ -1,26 +1,25 @@
 import { Button, Divider, FormControl, FormHelperText, Grid, InputLabel, OutlinedInput, ToggleButton, ToggleButtonGroup, } from "@mui/material";
 import React, { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { SouthIcon } from "../../../common/CustomIcon/components/SouthIcon/southIcon";
-import { FilterViewTools, StyledButtonBase, } from "../FilterMenu/filterMenu.styles";
+import { FilterViewTools } from "../FilterMenu/filterMenu.styles";
+import { ButtonBase } from "../surfaces/drawer/components/ButtonBase/buttonBase";
+import { SURFACE_TYPE } from "../surfaces/types";
 import { BUTTON_PROPS, DIVIDER_PROPS, INPUT_LABEL_PROPS, INPUT_PROPS, TOGGLE_BUTTON_GROUP_PROPS, } from "./constants";
 import { StyledForm } from "./filterRange.styles";
 import { FIELD_NAME } from "./hooks/UseFilterRange/constants";
 import { useFilterRange } from "./hooks/UseFilterRange/hook";
 import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
 import { getRangeOperator } from "./utils";
-export const FilterRange = ({ categoryKey, categoryLabel, categorySection, className, isFilterDrawer, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, unit, }) => {
+export const FilterRange = ({ categoryKey, categoryLabel, categorySection, className, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, surfaceType, unit, }) => {
     const rangeOperator = getRangeOperator({ selectedMax, selectedMin });
     const { clearErrors, formState: { errors }, handleSubmit, onChange, value, } = useFilterRange(rangeOperator);
     return (React.createElement(Fragment, null,
-        isFilterDrawer && (React.createElement(FilterViewTools, null,
-            React.createElement(StyledButtonBase, { onClick: onCloseFilter },
-                React.createElement(SouthIcon, { fontSize: "small" }),
-                categoryLabel))),
+        surfaceType === SURFACE_TYPE.DRAWER && (React.createElement(FilterViewTools, { surfaceType: surfaceType },
+            React.createElement(ButtonBase, { onClick: onCloseFilter }, categoryLabel))),
         React.createElement(StyledForm, { className: className, "data-testid": TEST_IDS.FILTER_RANGE, onSubmit: handleSubmit(onFilter, {
                 categoryKey,
                 categorySection,
-            }) },
+            }), surfaceType: surfaceType },
             React.createElement(ToggleButtonGroup, { ...TOGGLE_BUTTON_GROUP_PROPS, onChange: (e, value) => {
                     clearErrors();
                     onChange?.(e, value);

package/lib/components/Filter/components/FilterRange/filterRange.styles.d.ts

@@ -1,4 +1,5 @@
+import { FilterRangeProps } from "./types";
 export declare const StyledForm: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
+} & Pick<FilterRangeProps, "surfaceType">, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/lib/components/Filter/components/FilterRange/filterRange.styles.js

@@ -1,7 +1,8 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { mediaDesktopSmallDown } from "../../../../styles/common/mixins/breakpoints";
 import { textBody400 } from "../../../../styles/common/mixins/fonts";
+import { SURFACE_TYPE } from "../surfaces/types";
 export const StyledForm = styled("form") `
   padding: 16px;
   width: 396px;
@@ -93,23 +94,26 @@ export const StyledForm = styled("form") `
     grid-column: 1 / -1;
   }
 
-  ${mediaDesktopSmallDown} {
-    padding: 0 16px;
-    width: 312px;
+  ${({ surfaceType }) => surfaceType === SURFACE_TYPE.DRAWER &&
+    css `
+       {
+        padding: 0 16px;
+        width: 312px;
 
-    .MuiGrid-root {
-      gap: 16px 0;
-      grid-template-rows: auto auto;
-      margin: 16px 0;
+        .MuiGrid-root {
+          gap: 16px 0;
+          grid-template-rows: auto auto;
+          margin: 16px 0;
 
-      .MuiFormControl-root {
-        grid-row: unset;
-        grid-template-rows: unset;
-      }
+          .MuiFormControl-root {
+            grid-row: unset;
+            grid-template-rows: unset;
+          }
 
-      .MuiDivider-root {
-        display: none;
+          .MuiDivider-root {
+            display: none;
+          }
+        }
       }
-    }
-  }
+    `}
 `;

package/lib/components/Filter/components/FilterRange/stories/args.js

@@ -1,13 +1,14 @@
 import { fn } from "@storybook/test";
+import { SURFACE_TYPE } from "../../surfaces/types";
 export const DEFAULT_ARGS = {
     categoryKey: "Weight",
     categoryLabel: "Weight",
-    isFilterDrawer: false,
     max: 2100,
     min: 100,
     onCloseFilter: fn(),
     onFilter: fn(),
     selectedMax: null,
     selectedMin: null,
+    surfaceType: SURFACE_TYPE.MENU,
     unit: "kg",
 };

package/lib/components/Filter/components/FilterRange/types.d.ts

@@ -2,11 +2,12 @@ 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">, BaseComponentProps {
     categoryKey: CategoryKey;
     categoryLabel: string;
     categorySection?: string;
-    isFilterDrawer: boolean;
     onCloseFilter: () => void;
     onFilter: OnFilterFn;
+    surfaceType: SURFACE_TYPE;
 }

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -1,14 +1,17 @@
 import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { BaseComponentProps } from "../../../types";
+import { SURFACE_TYPE } from "../surfaces/types";
 export interface CategoryFilter {
     categoryViews: CategoryView[];
     label?: string;
 }
-export interface FiltersProps {
+export interface FiltersProps extends BaseComponentProps {
     categoryFilters: CategoryFilter[];
     disabled?: boolean;
     onFilter: OnFilterFn;
+    surfaceType?: SURFACE_TYPE;
     trackFilterOpened?: TrackFilterOpenedFunction;
 }
-export declare const Filters: ({ categoryFilters, disabled, onFilter, trackFilterOpened, }: FiltersProps) => JSX.Element;
+export declare const Filters: ({ categoryFilters, className, disabled, onFilter, surfaceType, trackFilterOpened, }: FiltersProps) => JSX.Element;

package/lib/components/Filter/components/Filters/filters.js

@@ -1,15 +1,15 @@
 import { Divider } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 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 { 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";
 /**
  * Returns filter tags for the given category view.
  * @param categoryView - View model of category to display.
@@ -43,19 +43,18 @@ function renderFilterTags(categoryView, onFilter) {
     const tags = buildFilterTags(categoryView, onFilter);
     return React.createElement(FilterTags, { tags: tags });
 }
-export const Filters = ({ categoryFilters, disabled = false, onFilter, trackFilterOpened, }) => {
+export const Filters = ({ categoryFilters, className, disabled = false, onFilter, surfaceType = SURFACE_TYPE.MENU, trackFilterOpened, }) => {
     const { onClose } = useDrawer();
-    const isFilterDrawer = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const { height: windowHeight } = useWindowResize();
     const filterListRef = useRef(null);
     const [height, setHeight] = useState(0);
     useEffect(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (React.createElement(FilterList, { "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
+    return (React.createElement(FilterList, { className: className, "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef, surfaceType: surfaceType }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
-        label && React.createElement(CategoryViewsLabel, null, label),
-        categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: onClose, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
+        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_UPPERCASE_500 }, label)),
+        categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: onClose, onFilter: onFilter, surfaceType: surfaceType, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
 };
 /**
  * Returns given height of filter list.

package/lib/components/Filter/components/Filters/filters.styles.d.ts

@@ -1,13 +1,14 @@
+import { FiltersProps } from "./filters";
 interface Props {
-    disabled: boolean;
     height: number;
 }
 export declare const Filters: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CategoryViewsLabel: import("@emotion/styled").StyledComponent<{
+} & Props & Pick<FiltersProps, "disabled" | "surfaceType">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "color" | "fontSize" | "sx" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "align" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, {}, {}>;
 export {};

package/lib/components/Filter/components/Filters/filters.styles.js

@@ -1,8 +1,9 @@
 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";
 export const Filters = styled("div") `
   ${textBody500};
   color: ${inkMain};
@@ -21,14 +22,13 @@ export const Filters = styled("div") `
     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/lib/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.js

@@ -6,7 +6,7 @@ import { useWindowResize } from "../../../../../../hooks/useWindowResize";
 import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
 import { LIST_ITEM_HEIGHT, LIST_MARGIN, MAX_DISPLAYABLE_LIST_ITEMS, 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, NO_RESULTS_ITEM, } from "../../common/constants";
 import { ITEM_TYPE, } from "../../common/entites";
 import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
@@ -56,7 +56,7 @@ export const VariableSizeList = forwardRef(function VariableSizeList({ autocompl
         listRef.current?.resetAfterIndex(0);
     }, [filteredItems]);
     return (React.createElement(OuterElementContext.Provider, { value: { autocompleteListProps, autocompleteListRef } },
-        React.createElement(List, { height: height, innerElementType: FilterList, innerRef: innerRef, itemCount: filteredItems.length, itemData: {
+        React.createElement(List, { height: height, innerElementType: StyledList, innerRef: innerRef, itemCount: filteredItems.length, itemData: {
                 filteredItems,
                 onFilter,
                 onUpdateItemSizeByItemKey,

package/lib/components/Filter/components/VariableSizeList/VariableSizeList.d.ts

@@ -2,16 +2,17 @@ import { VariableSizeListProps as ListProps } from "react-window";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { FilterMenuSearchMatch } from "../../common/entities";
+import { SURFACE_TYPE } from "../surfaces/types";
 export type ItemSizeByItemKey = Map<unknown, number>;
 export interface VariableSizeListProps {
     categoryKey: CategoryKey;
     categorySection?: string;
     height?: number;
-    isFilterDrawer: boolean;
     itemSize?: number;
     matchedItems: FilterMenuSearchMatch[];
     onFilter: OnFilterFn;
     overscanCount?: ListProps["overscanCount"];
+    surfaceType: SURFACE_TYPE;
     width?: ListProps["width"];
 }
-export declare const VariableSizeList: ({ categoryKey, categorySection, height: initHeight, isFilterDrawer, itemSize, matchedItems, onFilter, overscanCount, width, }: VariableSizeListProps) => JSX.Element;
+export declare const VariableSizeList: ({ categoryKey, categorySection, height: initHeight, itemSize, matchedItems, onFilter, overscanCount, surfaceType, width, }: VariableSizeListProps) => JSX.Element;