@databiosphere/findable-ui 40.0.0 → 41.0.0

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -25,7 +25,7 @@ export const CollapsableRows = <T extends RowData>({
   return (
     <Fragment>
       {(leafOrSubRows || rows).map((row) => {
-        if (row.depth > 0) return null; // Hide sub rows.
+        if (row.depth > 0 && !leafOrSubRows) return null; // Hide sub rows that are not already leaf or sub rows.
         return (
           <StyledTableRow
             key={row.id}

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

@@ -1,28 +1,26 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Popover } from "@mui/material";
-import { mediaDesktopSmallDown } from "../../../../styles/common/mixins/breakpoints";
-import { smokeLight, white } from "../../../../styles/common/mixins/colors";
-import { IconButton as DXIconButton } from "../../../common/IconButton/iconButton";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { FilterProps } from "./filter";
 
-export const FilterPopover = styled(Popover)`
+export const StyledPopover = styled(Popover, {
+  shouldForwardProp: (prop) => prop !== "surfaceType",
+})<Pick<FilterProps, "surfaceType">>`
   .MuiPaper-menu {
     margin: 4px 0;
   }
 
-  ${mediaDesktopSmallDown} {
-    .MuiPaper-root {
-      background-color: ${smokeLight};
-      height: 100%;
-      margin: 0;
-      max-height: 100%;
-      overflow: visible; // required; allows backdrop button to render outside of drawer container.
-    }
-  }
-`;
-
-export const IconButton = styled(DXIconButton)`
-  color: ${white};
-  left: calc(100% + 4px);
-  position: absolute;
-  top: 4px;
+  ${({ 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,4 +1,3 @@
-import { CloseRounded } from "@mui/icons-material";
 import { Grow, PopoverPosition, PopoverProps } from "@mui/material";
 import React, { MouseEvent, ReactNode, useState } from "react";
 import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
@@ -9,8 +8,10 @@ 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 { FilterPopover, IconButton } from "./filter.styles";
+import { StyledPopover } from "./filter.styles";
 
 /**
  * Filter component.
@@ -30,8 +31,8 @@ export interface FilterProps {
   categorySection?: string;
   categoryView: CategoryView;
   closeAncestor?: () => void;
-  isFilterDrawer: boolean;
   onFilter: OnFilterFn;
+  surfaceType: SURFACE_TYPE;
   tags?: ReactNode; // e.g. filter tags
   trackFilterOpened?: TrackFilterOpenedFunction;
 }
@@ -40,18 +41,19 @@ export const Filter = ({
   categorySection,
   categoryView,
   closeAncestor,
-  isFilterDrawer,
   onFilter,
+  surfaceType,
   tags,
   trackFilterOpened,
 }: FilterProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [position, setPosition] = useState<PopoverPosition>(DEFAULT_POSITION);
-  const anchorPosition = isFilterDrawer ? DEFAULT_POSITION : position;
-  const slotProps = isFilterDrawer ? DRAWER_SLOT_PROPS : DEFAULT_SLOT_PROPS;
-  const TransitionComponent = isFilterDrawer ? DrawerTransition : Grow;
+  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 = isFilterDrawer ? transitionDuration : undefined;
+  const TransitionDuration = isDrawer ? transitionDuration : undefined;
   const isRangeView = isRangeCategoryView(categoryView);
 
   /**
@@ -93,8 +95,9 @@ export const Filter = ({
         isOpen={isOpen}
         label={categoryView.label}
         onClick={onOpenFilter}
+        surfaceType={surfaceType}
       />
-      <FilterPopover
+      <StyledPopover
         anchorPosition={anchorPosition}
         anchorReference="anchorPosition"
         data-testid={TEST_IDS.FILTER_POPOVER}
@@ -103,27 +106,22 @@ export const Filter = ({
         open={isOpen}
         slotProps={slotProps}
         slots={{ transition: TransitionComponent }}
+        surfaceType={surfaceType}
         transitionDuration={TransitionDuration}
       >
-        {isOpen && isFilterDrawer && (
-          <IconButton
-            Icon={CloseRounded}
-            onClick={onCloseFilters}
-            size="medium"
-          />
-        )}
+        {isDrawer && <IconButton onClick={onCloseFilters} />}
         {isRangeView ? (
           <FilterRange
             categoryKey={categoryView.key}
             categoryLabel={categoryView.label}
             categorySection={categorySection}
-            isFilterDrawer={isFilterDrawer}
             max={categoryView.max}
             min={categoryView.min}
             selectedMax={categoryView.selectedMax}
             selectedMin={categoryView.selectedMin}
             onCloseFilter={onCloseFilter}
             onFilter={onFilter}
+            surfaceType={surfaceType}
             unit={categoryView.unit}
           />
         ) : (
@@ -131,13 +129,13 @@ export const Filter = ({
             categoryKey={categoryView.key}
             categoryLabel={categoryView.label}
             categorySection={categorySection}
-            isFilterDrawer={isFilterDrawer}
             onCloseFilter={onCloseFilter}
             onFilter={onFilter}
+            surfaceType={surfaceType}
             values={categoryView.values}
           />
         )}
-      </FilterPopover>
+      </StyledPopover>
       {tags}
     </>
   );

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

@@ -1,12 +1,13 @@
 import { fn } from "@storybook/test";
 import { ComponentProps } from "react";
 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,
-  isFilterDrawer: false,
   onFilter: fn(),
+  surfaceType: SURFACE_TYPE.MENU,
 };
 
 export const DISABLED_SELECT_ARGS: ComponentProps<typeof Filter> = {
@@ -19,6 +20,6 @@ export const DISABLED_SELECT_ARGS: ComponentProps<typeof Filter> = {
 
 export const RANGE_ARGS: ComponentProps<typeof Filter> = {
   categoryView: DONOR_COUNT,
-  isFilterDrawer: false,
   onFilter: fn(),
+  surfaceType: SURFACE_TYPE.MENU,
 };

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterLabel } from "./filterLabel";
 
 const meta = {
@@ -31,5 +32,6 @@ export const FilterLabelStory: Story = {
     isOpen: false,
     label: "Label",
     onClick: () => {},
+    surfaceType: SURFACE_TYPE.MENU,
   },
 };

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

@@ -1,16 +1,14 @@
 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";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { FilterLabelProps } from "./filterLabel";
 
-interface Props {
-  isOpen: boolean;
-}
-
-export const FilterLabel = styled(Button, {
-  shouldForwardProp: (prop) => prop !== "isOpen",
-})<Props>`
+export const StyledButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "surfaceType",
+})<Pick<FilterLabelProps, "isOpen" | "surfaceType">>`
   font-weight: inherit;
   gap: 0;
   justify-content: space-between;
@@ -32,23 +30,26 @@ 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/src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -2,7 +2,8 @@ import { ArrowDropDownRounded } from "@mui/icons-material";
 import React, { MouseEvent } from "react";
 import { DataDictionaryAnnotation } from "../../../../common/entities";
 import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
-import { FilterLabel as Label } from "./filterLabel.styles";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { StyledButton } from "./filterLabel.styles";
 
 export interface FilterLabelProps {
   annotation?: DataDictionaryAnnotation;
@@ -11,6 +12,7 @@ export interface FilterLabelProps {
   isOpen: boolean;
   label: string;
   onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  surfaceType: SURFACE_TYPE;
 }
 
 export const FilterLabel = ({
@@ -20,20 +22,22 @@ export const FilterLabel = ({
   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} title={annotation?.label}>
-      <Label
+      <StyledButton
         color="inherit"
         disabled={disabled}
         endIcon={<ArrowDropDownRounded fontSize="small" />}
         fullWidth
         isOpen={isOpen}
         onClick={onClick}
+        surfaceType={surfaceType}
       >
         {filterLabel}
-      </Label>
+      </StyledButton>
     </Tooltip>
   );
 };

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

@@ -33,7 +33,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/src/components/Filter/components/FilterMenu/filterMenu.stories.tsx

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

package/src/components/Filter/components/FilterMenu/filterMenu.styles.ts

@@ -1,7 +1,7 @@
+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 { FilterProps } from "../Filter/filter";
+import { SURFACE_TYPE } from "../surfaces/types";
 
 interface Props {
   menuWidth: number;
@@ -11,21 +11,12 @@ export const FilterView = styled.div<Props>`
   width: ${({ menuWidth }) => `${menuWidth}px`};
 `;
 
-export const FilterViewTools = styled.div`
+export const FilterViewTools = styled("div")<Pick<FilterProps, "surfaceType">>`
   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/src/components/Filter/components/FilterMenu/filterMenu.tsx

@@ -4,28 +4,25 @@ import {
   SelectCategoryValueView,
 } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-import { SouthIcon } from "../../../common/CustomIcon/components/SouthIcon/southIcon";
 import { MAX_DISPLAYABLE_LIST_ITEMS } from "../../common/constants";
 import { FilterMenuSearchMatch } from "../../common/entities";
 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";
+import { FilterView, FilterViewTools } from "./filterMenu.styles";
 
 export interface FilterMenuProps {
   categoryKey: CategoryKey;
   categoryLabel: string;
   categorySection?: string;
-  isFilterDrawer: boolean;
   menuWidth?: number;
   onCloseFilter: () => void;
   onFilter: OnFilterFn;
+  surfaceType: SURFACE_TYPE;
   values: SelectCategoryValueView[];
 }
 
@@ -33,29 +30,28 @@ export const FilterMenu = ({
   categoryKey,
   categoryLabel,
   categorySection,
-  isFilterDrawer,
   menuWidth = 312,
   onCloseFilter,
   onFilter,
+  surfaceType,
   values,
 }: FilterMenuProps): JSX.Element => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const isSearchable =
-    isFilterDrawer || values.length > MAX_DISPLAYABLE_LIST_ITEMS;
+    surfaceType === SURFACE_TYPE.DRAWER ||
+    values.length > MAX_DISPLAYABLE_LIST_ITEMS;
   const matchedItems = applyMenuFilter(values, isSearchable ? searchTerm : "");
   return (
     <FilterView menuWidth={menuWidth}>
-      <FilterViewTools>
-        {isFilterDrawer && (
-          <StyledButtonBase onClick={onCloseFilter}>
-            <SouthIcon fontSize="small" />
-            {categoryLabel}
-          </StyledButtonBase>
+      <FilterViewTools surfaceType={surfaceType}>
+        {surfaceType === SURFACE_TYPE.DRAWER && (
+          <ButtonBase onClick={onCloseFilter}>{categoryLabel}</ButtonBase>
         )}
         {isSearchable && (
           <FilterMenuSearch
             searchTerm={searchTerm}
             setSearchTerm={setSearchTerm}
+            surfaceType={surfaceType}
           />
         )}
       </FilterViewTools>
@@ -63,16 +59,16 @@ export const FilterMenu = ({
         <VariableSizeList
           categorySection={categorySection}
           categoryKey={categoryKey}
-          isFilterDrawer={isFilterDrawer}
           onFilter={onFilter}
           matchedItems={matchedItems}
+          surfaceType={surfaceType}
         />
       ) : (
-        <List>
+        <StyledList>
           <FilterNoResultsFound
             onClearSearchTerm={(): void => setSearchTerm("")}
           />
-        </List>
+        </StyledList>
       )}
     </FilterView>
   );

package/src/components/Filter/components/FilterMenuSearch/filterMenuSearch.styles.ts

@@ -1,16 +1,22 @@
+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";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { FilterMenuSearchProps } from "./filterMenuSearch";
 
-export const FilterMenuSearch = styled(Input)`
+export const StyledInput = styled(Input, {
+  shouldForwardProp: (prop) => prop !== "surfaceType",
+})<Pick<FilterMenuSearchProps, "surfaceType">>`
   padding: 0 16px;
 
   .MuiOutlinedInput-input {
     color: ${inkLight};
   }
 
-  ${mediaDesktopSmallUp} {
-    margin-top: 16px;
-  }
+  ${({ surfaceType }) =>
+    surfaceType === SURFACE_TYPE.MENU &&
+    css`
+      margin-top: 16px;
+    `}
 `;

package/src/components/Filter/components/FilterMenuSearch/filterMenuSearch.tsx

@@ -1,16 +1,19 @@
 import React from "react";
 import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
 import { SetSearchTermFn } from "../../common/entities";
-import { FilterMenuSearch as Search } from "./filterMenuSearch.styles";
+import { SURFACE_TYPE } from "../surfaces/types";
+import { StyledInput as Search } from "./filterMenuSearch.styles";
 
 export interface FilterMenuSearchProps {
   searchTerm: string;
   setSearchTerm: SetSearchTermFn;
+  surfaceType: SURFACE_TYPE;
 }
 
 export const FilterMenuSearch = ({
   searchTerm,
   setSearchTerm,
+  surfaceType,
 }: FilterMenuSearchProps): JSX.Element => {
   return (
     <Search
@@ -18,6 +21,7 @@ export const FilterMenuSearch = ({
       searchTerm={searchTerm}
       setSearchTerm={setSearchTerm}
       StartAdornment={SearchIcon}
+      surfaceType={surfaceType}
     />
   );
 };

package/src/components/Filter/components/FilterRange/filterRange.styles.ts

@@ -1,9 +1,11 @@
+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";
+import { FilterRangeProps } from "./types";
 
-export const StyledForm = styled("form")`
+export const StyledForm = styled("form")<Pick<FilterRangeProps, "surfaceType">>`
   padding: 16px;
   width: 396px;
 
@@ -94,23 +96,27 @@ export const StyledForm = styled("form")`
     grid-column: 1 / -1;
   }
 
-  ${mediaDesktopSmallDown} {
-    padding: 0 16px;
-    width: 312px;
-
-    .MuiGrid-root {
-      gap: 16px 0;
-      grid-template-rows: auto auto;
-      margin: 16px 0;
-
-      .MuiFormControl-root {
-        grid-row: unset;
-        grid-template-rows: unset;
-      }
+  ${({ surfaceType }) =>
+    surfaceType === SURFACE_TYPE.DRAWER &&
+    css`
+       {
+        padding: 0 16px;
+        width: 312px;
+
+        .MuiGrid-root {
+          gap: 16px 0;
+          grid-template-rows: auto auto;
+          margin: 16px 0;
+
+          .MuiFormControl-root {
+            grid-row: unset;
+            grid-template-rows: unset;
+          }
 
-      .MuiDivider-root {
-        display: none;
+          .MuiDivider-root {
+            display: none;
+          }
+        }
       }
-    }
-  }
+    `}
 `;

package/src/components/Filter/components/FilterRange/filterRange.tsx

@@ -11,11 +11,9 @@ import {
 } 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,
@@ -35,13 +33,13 @@ export const FilterRange = ({
   categoryLabel,
   categorySection,
   className,
-  isFilterDrawer,
   max,
   min,
   onCloseFilter,
   onFilter,
   selectedMax,
   selectedMin,
+  surfaceType,
   unit,
 }: FilterRangeProps): JSX.Element => {
   const rangeOperator = getRangeOperator({ selectedMax, selectedMin });
@@ -54,12 +52,9 @@ export const FilterRange = ({
   } = useFilterRange(rangeOperator);
   return (
     <Fragment>
-      {isFilterDrawer && (
-        <FilterViewTools>
-          <StyledButtonBase onClick={onCloseFilter}>
-            <SouthIcon fontSize="small" />
-            {categoryLabel}
-          </StyledButtonBase>
+      {surfaceType === SURFACE_TYPE.DRAWER && (
+        <FilterViewTools surfaceType={surfaceType}>
+          <ButtonBase onClick={onCloseFilter}>{categoryLabel}</ButtonBase>
         </FilterViewTools>
       )}
       <StyledForm
@@ -69,6 +64,7 @@ export const FilterRange = ({
           categoryKey,
           categorySection,
         })}
+        surfaceType={surfaceType}
       >
         <ToggleButtonGroup
           {...TOGGLE_BUTTON_GROUP_PROPS}

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

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