@databiosphere/findable-ui 40.0.0 → 41.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "40.0.0"
+  ".": "41.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [41.0.0](https://github.com/DataBiosphere/findable-ui/compare/v40.0.0...v41.0.0) (2025-07-30)
+
+
+### ⚠ BREAKING CHANGES
+
+* create filter drawer component ([#597](https://github.com/DataBiosphere/findable-ui/issues/597)) (#598)
+
+### Features
+
+* add primary text to button constants ([#588](https://github.com/DataBiosphere/findable-ui/issues/588)) ([#589](https://github.com/DataBiosphere/findable-ui/issues/589)) ([2d708cc](https://github.com/DataBiosphere/findable-ui/commit/2d708cc710159f5539330509b2e6beca10b2fa88))
+* create filter button component ([#592](https://github.com/DataBiosphere/findable-ui/issues/592)) ([#594](https://github.com/DataBiosphere/findable-ui/issues/594)) ([b30098a](https://github.com/DataBiosphere/findable-ui/commit/b30098a4a5f12e9dd5c5aed8526ecb8077015ac2))
+* create filter drawer component ([#597](https://github.com/DataBiosphere/findable-ui/issues/597)) ([#598](https://github.com/DataBiosphere/findable-ui/issues/598)) ([8352876](https://github.com/DataBiosphere/findable-ui/commit/8352876fd1934e9d0877ce4a97c01eaf8a60c295))
+* create select filter item component ([#595](https://github.com/DataBiosphere/findable-ui/issues/595)) ([#596](https://github.com/DataBiosphere/findable-ui/issues/596)) ([b63e3bb](https://github.com/DataBiosphere/findable-ui/commit/b63e3bb793396e5ec220f2f9e85097a0fdeddd52))
+* make data dictionary table row-collapse for smaller viewports ([#600](https://github.com/DataBiosphere/findable-ui/issues/600)) ([#601](https://github.com/DataBiosphere/findable-ui/issues/601)) ([88d0490](https://github.com/DataBiosphere/findable-ui/commit/88d0490bc8b659020f20abb5c1abd3136829d74b))
+* update data dictionary smaller viewport navigation and search bar layouts ([#583](https://github.com/DataBiosphere/findable-ui/issues/583)) ([#584](https://github.com/DataBiosphere/findable-ui/issues/584)) ([20b9a53](https://github.com/DataBiosphere/findable-ui/commit/20b9a53cdc390fe85bfdf82845e7d6964f4d0cc3))
+
+
+### Code Refactoring
+
+* columnfilter menu list prop component to be "div" rather than "ul" ([#590](https://github.com/DataBiosphere/findable-ui/issues/590)) ([#591](https://github.com/DataBiosphere/findable-ui/issues/591)) ([c504b99](https://github.com/DataBiosphere/findable-ui/commit/c504b99936b74b4f7e05b18ac69e2eef8336264d))
+* drawerprovider to expose onClose via render prop ([#585](https://github.com/DataBiosphere/findable-ui/issues/585)) ([#587](https://github.com/DataBiosphere/findable-ui/issues/587)) ([2107c41](https://github.com/DataBiosphere/findable-ui/commit/2107c41545fbad344077f6c87bf1b27d2ac21a22))
+
 ## [40.0.0](https://github.com/DataBiosphere/findable-ui/compare/v39.1.0...v40.0.0) (2025-07-24)
 
 

package/lib/common/entities.d.ts

@@ -19,6 +19,14 @@ export interface Attribute {
  * Filterable metadata keys.
  */
 export type CategoryKey = string;
+/**
+ * Clear all filters key.
+ */
+export declare const CLEAR_ALL: "CLEAR_ALL";
+/**
+ * Clear all filters type.
+ */
+export type ClearAll = typeof CLEAR_ALL;
 /**
  * View model of category tag.
  */

package/lib/common/entities.js

@@ -1 +1,4 @@
-export {};
+/**
+ * Clear all filters key.
+ */
+export const CLEAR_ALL = "CLEAR_ALL";

package/lib/components/DataDictionary/components/Description/description.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { StyledMarkdownRenderer, StyledRoundedPaper, } from "./description.styles";
+import { StyledFluidPaper, StyledMarkdownRenderer } from "./description.styles";
 export const Description = ({ description, }) => {
     if (!description)
         return null;
-    return (React.createElement(StyledRoundedPaper, { elevation: 0 },
+    return (React.createElement(StyledFluidPaper, { elevation: 0 },
         React.createElement(StyledMarkdownRenderer, { value: description })));
 };

package/lib/components/DataDictionary/components/Description/description.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledRoundedPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
 }, "style" | "className" | "classes" | "children" | "sx" | "elevation" | "square" | "variant"> & {
     component?: React.ElementType;

package/lib/components/DataDictionary/components/Description/description.styles.js

@@ -2,9 +2,9 @@ import styled from "@emotion/styled";
 import { PALETTE } from "../../../../styles/common/constants/palette";
 import { mediaTabletDown, mediaTabletUp, } from "../../../../styles/common/mixins/breakpoints";
 import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
-import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
-export const StyledRoundedPaper = styled(RoundedPaper) `
+export const StyledFluidPaper = styled(FluidPaper) `
   padding: 20px;
 
   ${mediaTabletDown} {

package/lib/components/DataDictionary/components/Entity/entity.styles.js

@@ -1,7 +1,12 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
+import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
 export const StyledTypography = styled(Typography) `
   &:hover a {
     opacity: 1;
   }
+
+  ${mediaTabletDown} {
+    margin: 0 16px;
+  }
 `;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.js

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { Button, useMediaQuery } from "@mui/material";
 import React from "react";
 import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
 import { ColumnFilterTag } from "../../../../../Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag";
@@ -7,8 +7,11 @@ import { GRID_PROPS } from "./constants";
 export const ColumnFilterTags = ({ className, table, }) => {
     const { getAllColumns, resetColumnFilters } = table;
     const columns = getAllColumns().filter((column) => column.getIsFiltered());
+    const isDrawer = useMediaQuery((theme) => theme.breakpoints.down(820));
     if (columns.length === 0)
         return null;
+    if (isDrawer)
+        return null;
     return (React.createElement(StyledGrid, { className: className, ...GRID_PROPS },
         columns.map((column) => (React.createElement(ColumnFilterTag, { key: column.id, column: column }))),
         React.createElement(Button, { onClick: () => resetColumnFilters(true), variant: BUTTON_PROPS.VARIANT.TEXT }, "Clear all")));

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.js

@@ -1,12 +1,17 @@
-import { ButtonGroup } from "@mui/material";
+import { ButtonGroup, useMediaQuery } from "@mui/material";
 import React from "react";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
+import { ColumnFiltersAdapter } from "../../../../../Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
+import { Drawer } from "../../../../../Filter/components/surfaces/drawer/Drawer/drawer";
 import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
 export const ColumnFilters = ({ table, }) => {
     const columns = table.getAllColumns();
     const columnFilters = columns.filter((column) => column.getCanFilter());
     const enableColumnFilters = table.options.enableColumnFilters;
+    const isDrawer = useMediaQuery((theme) => theme.breakpoints.down(820));
     if (!enableColumnFilters)
         return null;
+    if (isDrawer)
+        return (React.createElement(ColumnFiltersAdapter, { table: table, renderSurface: (props) => React.createElement(Drawer, { ...props }) }));
     return (React.createElement(ButtonGroup, { ...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED }, columnFilters.map((column) => (React.createElement(ColumnFilter, { key: column.id, column: column })))));
 };

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

@@ -1,13 +1,8 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
 export const StyledGrid = styled(Grid) `
   align-items: center;
   display: grid;
   gap: 16px;
   grid-template-columns: 1fr auto;
-
-  ${mediaTabletDown} {
-    grid-template-columns: 1fr;
-  }
 `;

package/lib/components/DataDictionary/components/Filters/stories/constants.d.ts

@@ -3,3 +3,4 @@ export declare const BIONETWORK: PartialColumn;
 export declare const DESCRIPTION: PartialColumn;
 export declare const EXAMPLE: PartialColumn;
 export declare const REQUIRED: PartialColumn;
+export declare const COLUMNS: PartialColumn[];

package/lib/components/DataDictionary/components/Filters/stories/constants.js

@@ -39,3 +39,4 @@ export const REQUIRED = {
     ]),
     id: "required",
 };
+export const COLUMNS = [DESCRIPTION, REQUIRED, BIONETWORK, EXAMPLE];

package/lib/components/DataDictionary/components/Filters/stories/filters.stories.js

@@ -3,8 +3,9 @@ import { action } from "@storybook/addon-actions";
 import { functionalUpdate } from "@tanstack/react-table";
 import React from "react";
 import { Filters } from "../filters";
-import { BIONETWORK, DESCRIPTION, EXAMPLE, REQUIRED } from "./constants";
+import { COLUMNS } from "./constants";
 import { useFilterStore, useGlobalFilterStore } from "./hook";
+import { buildColumnFilters } from "./utils";
 const meta = {
     component: Filters,
     decorators: [
@@ -16,6 +17,8 @@ export default meta;
 const DefaultStory = () => {
     const { filterStore, setFilterStore } = useFilterStore();
     const { globalFilter, setGlobalFilter } = useGlobalFilterStore();
+    // Builds column filters from filter store.
+    const columnFilters = buildColumnFilters(filterStore);
     const makeColumn = (column) => ({
         ...column,
         getFilterValue: () => filterStore[column.id],
@@ -27,9 +30,12 @@ const DefaultStory = () => {
             return next;
         },
     });
+    // Make the columns.
+    const columns = COLUMNS.map(makeColumn);
     const table = {
-        getAllColumns: () => [DESCRIPTION, REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
-        getState: () => ({ globalFilter }),
+        getAllColumns: () => columns,
+        getColumn: (columnId) => columns.find(({ id }) => id === columnId),
+        getState: () => ({ columnFilters, globalFilter }),
         options: { enableColumnFilters: true, enableGlobalFilter: true },
         setGlobalFilter,
     };

package/lib/components/DataDictionary/components/Filters/stories/utils.d.ts

@@ -0,0 +1,7 @@
+import { ColumnFiltersState } from "@tanstack/react-table";
+/**
+ * Builds column filters from filter store.
+ * @param filterStore - The filter store.
+ * @returns The column filters.
+ */
+export declare function buildColumnFilters(filterStore: Record<string, unknown>): ColumnFiltersState;

package/lib/components/DataDictionary/components/Filters/stories/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Builds column filters from filter store.
+ * @param filterStore - The filter store.
+ * @returns The column filters.
+ */
+export function buildColumnFilters(filterStore) {
+    return Object.entries(filterStore).reduce((acc, [id, value]) => {
+        if (!value)
+            return acc;
+        return [...acc, { id, value }];
+    }, []);
+}

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024 } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
@@ -12,7 +12,7 @@ export const Layout = styled("div") `
   padding-top: ${({ top }) => top}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-column: 1;
     grid-row: auto;
     padding-top: ${PT}px;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024, mediaTabletDown, } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.FILTERS_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.FILTERS_PADDING_TOP; /* top padding */
@@ -18,10 +18,14 @@ export const Layout = styled("div") `
   top: 0;
   z-index: 2; /* required, filters should be on top of entities */
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-column: 1;
     grid-row: auto;
     padding-top: ${PT}px;
     position: relative;
   }
+
+  ${mediaTabletDown} {
+    margin: 0 16px;
+  }
 `;

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024 } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.OUTLINE_PADDING_TOP; /* top padding */
@@ -15,7 +15,7 @@ export const Layout = styled("div") `
   position: sticky;
   top: 0;
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     display: none;
   }
 `;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024, mediaTabletDown, } from "../../../../../../styles/common/mixins/breakpoints";
 export const Layout = styled("div") `
   grid-column: 1 / -1;
   grid-row: 1;
@@ -9,9 +9,13 @@ export const Layout = styled("div") `
   top: 0;
   z-index: 4;
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-column: 1;
     grid-row: auto;
     position: relative;
   }
+
+  ${mediaTabletDown} {
+    margin: 0 16px;
+  }
 `;

package/lib/components/DataDictionary/components/Table/table.js

@@ -1,15 +1,18 @@
 import { TableContainer } from "@mui/material";
 import React from "react";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint";
 import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
-import { StyledRoundedPaper } from "./table.styles";
+import { StyledFluidPaper } from "./table.styles";
 export const Table = ({ row, table, }) => {
-    return (React.createElement(StyledRoundedPaper, { elevation: 0 },
+    const { smDown } = useBreakpoint();
+    const rowDirection = smDown ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
+    return (React.createElement(StyledFluidPaper, { elevation: 0 },
         React.createElement(TableContainer, null,
-            React.createElement(GridTable, { gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
+            React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
                 React.createElement(TableHead, { tableInstance: table }),
-                React.createElement(TableBody, { rowDirection: ROW_DIRECTION.DEFAULT, rows: row.getLeafRows(), tableInstance: table })))));
+                React.createElement(TableBody, { rowDirection: rowDirection, rows: row.getLeafRows(), tableInstance: table })))));
 };

package/lib/components/DataDictionary/components/Table/table.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledRoundedPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
 }, "style" | "className" | "classes" | "children" | "sx" | "elevation" | "square" | "variant"> & {
     component?: React.ElementType;

package/lib/components/DataDictionary/components/Table/table.styles.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
-export const StyledRoundedPaper = styled(RoundedPaper) `
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
+export const StyledFluidPaper = styled(FluidPaper) `
   background-color: ${PALETTE.SMOKE_MAIN};
   display: grid;
   gap: 1px;

package/lib/components/DataDictionary/components/Title/title.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { bpDown820 } from "../../../../styles/common/mixins/breakpoints";
 import { Title } from "../../../common/Title/title";
 export const StyledTitle = styled(Title) `
   & {
@@ -9,7 +9,7 @@ export const StyledTitle = styled(Title) `
     line-height: 42px;
     margin: 24px 0 8px;
 
-    ${mediaTabletDown} {
+    ${bpDown820} {
       font-size: 26px;
       line-height: 34px;
     }

package/lib/components/DataDictionary/dataDictionary.styles.d.ts

@@ -1,4 +1,3 @@
-export declare const grid: import("@emotion/react").SerializedStyles;
 export declare const View: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib/components/DataDictionary/dataDictionary.styles.js

@@ -1,19 +1,19 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
-export const grid = css `
+import { bpDown1024, mediaTabletDown, } from "../../styles/common/mixins/breakpoints";
+export const View = styled("div") `
   column-gap: 24px;
   display: grid;
-  grid-template-columns: 242px 1fr;
-`;
-export const View = styled("div") `
-  ${grid};
   flex: 1;
+  grid-template-columns: 242px 1fr;
   margin: 0 24px;
   position: relative;
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-template-columns: 1fr;
     margin: 0 16px;
   }
+
+  ${mediaTabletDown} {
+    margin: 0;
+  }
 `;

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -8,8 +8,8 @@ export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     const { rows } = getRowModel();
     useCollapsableRows(tableInstance);
     return (React.createElement(Fragment, null, (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 (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));

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

@@ -2,13 +2,14 @@ import { ReactNode } from "react";
 import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { SURFACE_TYPE } from "../surfaces/types";
 export interface FilterProps {
     categorySection?: string;
     categoryView: CategoryView;
     closeAncestor?: () => void;
-    isFilterDrawer: boolean;
     onFilter: OnFilterFn;
+    surfaceType: SURFACE_TYPE;
     tags?: ReactNode;
     trackFilterOpened?: TrackFilterOpenedFunction;
 }
-export declare const Filter: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: FilterProps) => JSX.Element;
+export declare const Filter: ({ categorySection, categoryView, closeAncestor, onFilter, surfaceType, tags, trackFilterOpened, }: FilterProps) => JSX.Element;

package/lib/components/Filter/components/Filter/filter.js

@@ -1,4 +1,3 @@
-import { CloseRounded } from "@mui/icons-material";
 import { Grow } from "@mui/material";
 import React, { useState } from "react";
 import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
@@ -6,8 +5,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.
  * TODO(cc) refactor: build tags from categoryView for selected values.
@@ -20,14 +21,15 @@ const DEFAULT_SLOT_PROPS = {
 const DRAWER_SLOT_PROPS = {
     paper: { elevation: 0 },
 };
-export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }) => {
+export const Filter = ({ categorySection, categoryView, closeAncestor, onFilter, surfaceType, tags, trackFilterOpened, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [position, setPosition] = useState(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);
     /**
      * Closes filter popover.
@@ -57,9 +59,9 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
         trackFilterOpened?.({ category: categoryView.key });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(FilterLabel, { annotation: categoryView.annotation, count: isRangeView ? undefined : categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
-        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, slots: { transition: TransitionComponent }, transitionDuration: TransitionDuration },
-            isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
-            isRangeView ? (React.createElement(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, unit: categoryView.unit })) : (React.createElement(FilterMenu, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, isFilterDrawer: isFilterDrawer, onCloseFilter: onCloseFilter, onFilter: onFilter, values: categoryView.values }))),
+        React.createElement(FilterLabel, { annotation: categoryView.annotation, count: isRangeView ? undefined : categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter, surfaceType: surfaceType }),
+        React.createElement(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 && React.createElement(IconButton, { onClick: onCloseFilters }),
+            isRangeView ? (React.createElement(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 })) : (React.createElement(FilterMenu, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, onCloseFilter: onCloseFilter, onFilter: onFilter, surfaceType: surfaceType, values: categoryView.values }))),
         tags));
 };

package/lib/components/Filter/components/Filter/filter.styles.d.ts

@@ -1,6 +1,4 @@
-export declare const FilterPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {
+import { FilterProps } from "./filter";
+export declare const StyledPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {
     theme?: import("@emotion/react").Theme;
-}, {}, {}>;
-export declare const IconButton: import("@emotion/styled").StyledComponent<import("../../../common/IconButton/iconButton").IconButtonProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+} & Pick<FilterProps, "surfaceType">, {}, {}>;

package/lib/components/Filter/components/Filter/filter.styles.js

@@ -1,26 +1,23 @@
+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";
-export const FilterPopover = styled(Popover) `
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { SURFACE_TYPE } from "../surfaces/types";
+export const StyledPopover = styled(Popover, {
+    shouldForwardProp: (prop) => prop !== "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/lib/components/Filter/components/Filter/stories/args.js

@@ -1,9 +1,10 @@
 import { fn } from "@storybook/test";
 import { DONOR_COUNT, GENUS_SPECIES } from "../../Filters/stories/constants";
+import { SURFACE_TYPE } from "../../surfaces/types";
 export const SELECT_ARGS = {
     categoryView: GENUS_SPECIES,
-    isFilterDrawer: false,
     onFilter: fn(),
+    surfaceType: SURFACE_TYPE.MENU,
 };
 export const DISABLED_SELECT_ARGS = {
     ...SELECT_ARGS,
@@ -14,6 +15,6 @@ export const DISABLED_SELECT_ARGS = {
 };
 export const RANGE_ARGS = {
     categoryView: DONOR_COUNT,
-    isFilterDrawer: false,
     onFilter: fn(),
+    surfaceType: SURFACE_TYPE.MENU,
 };

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

@@ -1,5 +1,6 @@
 import { MouseEvent } from "react";
 import { DataDictionaryAnnotation } from "../../../../common/entities";
+import { SURFACE_TYPE } from "../surfaces/types";
 export interface FilterLabelProps {
     annotation?: DataDictionaryAnnotation;
     count?: number;
@@ -7,5 +8,6 @@ export interface FilterLabelProps {
     isOpen: boolean;
     label: string;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    surfaceType: SURFACE_TYPE;
 }
-export declare const FilterLabel: ({ annotation, count, disabled, isOpen, label, onClick, }: FilterLabelProps) => JSX.Element;
+export declare const FilterLabel: ({ annotation, count, disabled, isOpen, label, onClick, surfaceType, }: FilterLabelProps) => JSX.Element;

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

@@ -1,9 +1,9 @@
 import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
-import { FilterLabel as Label } from "./filterLabel.styles";
-export const FilterLabel = ({ annotation, count, disabled = false, isOpen, label, onClick, }) => {
+import { StyledButton } from "./filterLabel.styles";
+export const FilterLabel = ({ annotation, count, disabled = false, isOpen, label, onClick, surfaceType, }) => {
     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 (React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label },
-        React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRounded, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel)));
+        React.createElement(StyledButton, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRounded, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick, surfaceType: surfaceType }, filterLabel)));
 };

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

@@ -1,5 +1,6 @@
 import { StoryObj } from "@storybook/react";
 import React from "react";
+import { SURFACE_TYPE } from "../surfaces/types";
 declare const meta: {
     argTypes: {
         count: {
@@ -15,7 +16,7 @@ declare const meta: {
             control: "text";
         };
     };
-    component: ({ annotation, count, disabled, isOpen, label, onClick, }: import("./filterLabel").FilterLabelProps) => JSX.Element;
+    component: ({ annotation, count, disabled, isOpen, label, onClick, surfaceType, }: import("./filterLabel").FilterLabelProps) => JSX.Element;
     decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         annotation?: import("../../../../common/entities").DataDictionaryAnnotation | undefined;
         count?: number | undefined;
@@ -23,6 +24,7 @@ declare const meta: {
         isOpen: boolean;
         label: string;
         onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        surfaceType: SURFACE_TYPE;
     }>) => JSX.Element)[];
     title: string;
 };