@databiosphere/findable-ui 35.2.0 → 37.0.0

package/lib/theme/common/components.js

@@ -4,6 +4,7 @@ import { PALETTE } from "../../styles/common/constants/palette";
 import { SHADOWS } from "../../styles/common/constants/shadows";
 import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
+import { OUTLINED_INPUT_PROPS } from "../../styles/common/mui/outlinedInput";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
 // Constants
@@ -239,11 +240,25 @@ export const MuiButton = (theme) => {
                 minWidth: 0,
                 padding: 0,
             },
-            textPrimary: {
-                color: theme.palette.primary.main,
-            },
         },
         variants: [
+            {
+                props: {
+                    color: BUTTON_PROPS.COLOR.PRIMARY,
+                    variant: BUTTON_PROPS.VARIANT.TEXT,
+                },
+                style: {
+                    color: PALETTE.PRIMARY_MAIN,
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "&:hover": {
+                        backgroundColor: "transparent",
+                        textDecoration: "underline",
+                        textDecorationColor: "currentColor",
+                        textDecorationSkipInk: "none",
+                        textUnderlinePosition: "from-font",
+                    },
+                },
+            },
             {
                 props: {
                     variant: "activeNav", // associated with "nav" variant.
@@ -418,6 +433,16 @@ export const MuiChip = (theme) => {
                     color: theme.palette.info.main,
                 },
             },
+            {
+                props: {
+                    color: CHIP_PROPS.COLOR.PRIMARY,
+                    variant: CHIP_PROPS.VARIANT.FILLED,
+                },
+                style: {
+                    backgroundColor: PALETTE.PRIMARY_MAIN,
+                    color: PALETTE.COMMON_WHITE,
+                },
+            },
             {
                 props: { color: "success" },
                 style: {
@@ -824,9 +849,6 @@ export const MuiIconButton = (theme) => {
 export const MuiInputBase = (theme) => {
     return {
         styleOverrides: {
-            adornedStart: {
-                gap: 8,
-            },
             multiline: {
                 height: "unset",
             },
@@ -839,6 +861,17 @@ export const MuiInputBase = (theme) => {
                 [tabletUp]: {
                     fontSize: theme.typography[TEXT_BODY_400].fontSize,
                 },
+                variants: [
+                    /* PRIMARY */ /* TODO: remove `adornedStart` when all input components are refactored to color: secondary */
+                    {
+                        props: { color: "primary" },
+                        style: {
+                            adornedStart: {
+                                gap: 8,
+                            },
+                        },
+                    },
+                ],
             },
         },
     };
@@ -958,11 +991,8 @@ export const MuiOutlinedInput = (theme) => {
             root: {
                 backgroundColor: PALETTE.COMMON_WHITE,
                 boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
-                paddingLeft: 12,
+                paddingLeft: 12, // TODO: remove when all input components are refactored to color: secondary.
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiSvgIcon-root": {
-                    color: theme.palette.ink.light, // Adornment e.g. "SearchIcon".
-                },
                 "&:hover": {
                     "& .MuiOutlinedInput-notchedOutline": {
                         borderColor: theme.palette.smoke.dark,
@@ -974,9 +1004,6 @@ export const MuiOutlinedInput = (theme) => {
                         borderColor: theme.palette.ink.main,
                         borderWidth: 1,
                     },
-                    "& .MuiSvgIcon-root": {
-                        color: theme.palette.ink.main, // Adornment e.g. "SearchIcon".
-                    },
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for specificity
                 "&.Mui-disabled": {
@@ -984,9 +1011,6 @@ export const MuiOutlinedInput = (theme) => {
                         borderColor: theme.palette.smoke.dark,
                         borderWidth: 1,
                     },
-                    "& .MuiSvgIcon-root": {
-                        color: theme.palette.ink.light,
-                    },
                 },
                 "&.Mui-error": {
                     backgroundColor: theme.palette.alert.lightest,
@@ -996,6 +1020,88 @@ export const MuiOutlinedInput = (theme) => {
                         borderWidth: 1,
                     },
                 },
+                variants: [
+                    /* PRIMARY */
+                    {
+                        props: { color: OUTLINED_INPUT_PROPS.COLOR.PRIMARY },
+                        style: {
+                            "& .MuiSvgIcon-root": {
+                                color: theme.palette.ink.light, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+                            },
+                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                            "&.Mui-focused": {
+                                "& .MuiSvgIcon-root": {
+                                    color: theme.palette.ink.main, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+                                },
+                            },
+                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                            "&.Mui-disabled": {
+                                "& .MuiSvgIcon-root": {
+                                    color: theme.palette.ink.light, // TODO: remove when all input components are refactored to color: secondary.
+                                },
+                            },
+                        },
+                    },
+                    /* SECONDARY */
+                    {
+                        props: { color: OUTLINED_INPUT_PROPS.COLOR.SECONDARY },
+                        style: {
+                            backgroundColor: PALETTE.COMMON_WHITE,
+                            boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
+                            color: PALETTE.INK_LIGHT,
+                            padding: "0 12px",
+                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                            ".MuiOutlinedInput-input": {
+                                color: "inherit",
+                                height: 20,
+                                padding: "10px 0",
+                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                                "&::placeholder": {
+                                    color: "inherit",
+                                    opacity: 0.8,
+                                },
+                            },
+                            ".MuiOutlinedInput-notchedOutline": {
+                                borderColor: PALETTE.SMOKE_DARK,
+                                borderWidth: 1,
+                            },
+                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                            "&.Mui-focused": {
+                                color: PALETTE.INK_MAIN,
+                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                                ".MuiOutlinedInput-input": {
+                                    "&::placeholder": {
+                                        opacity: 0,
+                                    },
+                                },
+                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                                ".MuiOutlinedInput-notchedOutline": {
+                                    borderColor: PALETTE.INK_MAIN,
+                                    borderWidth: 1,
+                                },
+                            },
+                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                            "&.Mui-disabled": {
+                                backgroundColor: PALETTE.SMOKE_LIGHT,
+                                color: PALETTE.INK_LIGHT,
+                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                                ".MuiOutlinedInput-input": {
+                                    WebkitTextFillColor: "unset",
+                                    // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                                    "&::placeholder": {
+                                        color: "inherit",
+                                        opacity: 1,
+                                    },
+                                },
+                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                                ".MuiOutlinedInput-notchedOutline": {
+                                    borderColor: PALETTE.SMOKE_DARK,
+                                    borderWidth: 1,
+                                },
+                            },
+                        },
+                    },
+                ],
             },
         },
     };

package/lib/theme/components/muiButtonGroup.js

@@ -56,6 +56,10 @@ export const MuiButtonGroup = {
                                 backgroundColor: PALETTE.SMOKE_LIGHTEST,
                                 boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
                             },
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "&.Mui-focusVisible": {
+                                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+                            },
                         },
                     },
                 },

package/lib/theme/components/muiTableCell.js

@@ -1,3 +1,4 @@
+import { PALETTE } from "../../styles/common/constants/palette";
 import { TABLE_CELL_PROPS } from "../../styles/common/mui/tableCell";
 import { TEXT_BODY_400, TEXT_BODY_SMALL_500 } from "../common/typography";
 export const MuiTableCell = (theme) => {
@@ -32,6 +33,11 @@ export const MuiTableCell = (theme) => {
                         props: { variant: TABLE_CELL_PROPS.VARIANT.BODY },
                         style: {
                             ...typography[TEXT_BODY_400],
+                            "& mark": {
+                                backgroundColor: PALETTE.WARNING_LIGHT,
+                                color: "inherit",
+                                padding: "2px 0",
+                            },
                         },
                     },
                     {

package/lib/utils/parseJsonQueryParam.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Parses a JSON-encoded value from a URL query parameter.
+ *
+ * This function is specifically designed for query parameters that contain
+ * serialized complex data (arrays or objects), not for simple string values.
+ *
+ * It handles Next.js query parameters which can be string, string[] or undefined.
+ * Repeated parameters (`string[]`) are not supported.
+ *
+ * @param param - URL query parameter value.
+ * @param defaultValue - Default value.
+ * @returns Parsed complex data structure or default value.
+ */
+export declare function parseJsonQueryParam<T = unknown>(param: string | string[] | undefined, defaultValue?: T): T | undefined;

package/lib/utils/parseJsonQueryParam.js

@@ -0,0 +1,25 @@
+/**
+ * Parses a JSON-encoded value from a URL query parameter.
+ *
+ * This function is specifically designed for query parameters that contain
+ * serialized complex data (arrays or objects), not for simple string values.
+ *
+ * It handles Next.js query parameters which can be string, string[] or undefined.
+ * Repeated parameters (`string[]`) are not supported.
+ *
+ * @param param - URL query parameter value.
+ * @param defaultValue - Default value.
+ * @returns Parsed complex data structure or default value.
+ */
+export function parseJsonQueryParam(param, defaultValue) {
+    // Handle non-string parameters.
+    if (typeof param !== "string")
+        return defaultValue;
+    try {
+        return JSON.parse(decodeURIComponent(param));
+    }
+    catch (error) {
+        console.warn("Failed to parse query param JSON:", error);
+        return defaultValue;
+    }
+}

package/lib/utils/stateToUrlQuery.d.ts

@@ -0,0 +1,15 @@
+import { NextRouter } from "next/router";
+/**
+ * Builds a query object from state for URL parameter synchronization.
+ *
+ * This function converts a state object into a format compatible with NextRouter query parameters.
+ * It handles different value types appropriately:
+ *
+ * - Undefined values are excluded.
+ * - Strings are used as-is (empty strings are excluded).
+ * - Arrays are JSON stringified (empty arrays are excluded).
+ *
+ * @param state - State object containing values to convert to URL parameters.
+ * @returns A query object compatible with NextRouter.
+ */
+export declare function stateToUrlQuery<S extends Record<string, string | unknown[] | undefined>>(state: S): NextRouter["query"];

package/lib/utils/stateToUrlQuery.js

@@ -0,0 +1,35 @@
+/**
+ * Builds a query object from state for URL parameter synchronization.
+ *
+ * This function converts a state object into a format compatible with NextRouter query parameters.
+ * It handles different value types appropriately:
+ *
+ * - Undefined values are excluded.
+ * - Strings are used as-is (empty strings are excluded).
+ * - Arrays are JSON stringified (empty arrays are excluded).
+ *
+ * @param state - State object containing values to convert to URL parameters.
+ * @returns A query object compatible with NextRouter.
+ */
+export function stateToUrlQuery(state) {
+    const query = {};
+    for (const [key, value] of Object.entries(state)) {
+        // Handle the undefined case.
+        if (value === undefined)
+            continue;
+        // Handle the string case.
+        if (typeof value === "string") {
+            if (!value)
+                continue;
+            query[key] = value;
+            continue;
+        }
+        // Handle the array case.
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                continue;
+            query[key] = JSON.stringify(value);
+        }
+    }
+    return query;
+}

package/lib/views/DataDictionaryView/dataDictionaryView.d.ts

@@ -1,2 +1,2 @@
-import { BaseComponentProps } from "../../components/types";
-export declare const DataDictionaryView: ({ className, }: BaseComponentProps) => JSX.Element;
+import { DataDictionaryViewProps } from "./types";
+export declare const DataDictionaryView: ({ className, dictionary, }: DataDictionaryViewProps) => JSX.Element;

package/lib/views/DataDictionaryView/dataDictionaryView.js

@@ -1,5 +1,19 @@
 import React from "react";
 import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
-export const DataDictionaryView = ({ className, }) => {
-    return React.createElement(DataDictionary, { className: className });
+import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
+import { DataDictionaryContext } from "../../providers/dataDictionary/context";
+import { clearMeta } from "../../providers/dataDictionaryState/actions/clearMeta/dispatch";
+import { stateToUrl } from "../../providers/dataDictionaryState/actions/stateToUrl/dispatch";
+import { urlToState } from "../../providers/dataDictionaryState/actions/urlToState/dispatch";
+import { useDataDictionaryState } from "../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
+import { buildStateSyncManagerContext } from "./utils";
+export const DataDictionaryView = ({ className, dictionary, }) => {
+    const { dataDictionaryDispatch, dataDictionaryState } = useDataDictionaryState();
+    useStateSyncManager({
+        actions: { clearMeta, stateToUrl, urlToState },
+        dispatch: dataDictionaryDispatch,
+        state: buildStateSyncManagerContext(dataDictionaryState, dictionary),
+    });
+    return (React.createElement(DataDictionaryContext.Provider, { value: { dictionary } },
+        React.createElement(DataDictionary, { key: dictionary, className: className, dictionary: dictionary })));
 };

package/lib/views/DataDictionaryView/types.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from "components/types";
+export interface DataDictionaryViewProps extends BaseComponentProps {
+    dictionary: string;
+}

package/lib/views/DataDictionaryView/types.js

@@ -0,0 +1 @@
+export {};

package/lib/views/DataDictionaryView/utils.d.ts

@@ -0,0 +1,12 @@
+import { StateSyncManagerContext } from "../../hooks/stateSyncManager/types";
+import { DataDictionaryState } from "../../providers/dataDictionaryState/types";
+/**
+ * Builds the state sync manager context object for URL-state synchronization.
+ * - Command: The meta command that signals a URL update operation is needed e.g. "STATE_TO_URL_PUSH" or "STATE_TO_URL_REPLACE".
+ * - ParamKeys: Expected list of URL parameter keys that should be synchronized with state e.g. "filter".
+ * - Query: Dictionary related query object from state that should be synchronized with the URL.
+ * @param dataDictionaryState - Data dictionary state.
+ * @param dictionary - Dictionary ID.
+ * @returns The state sync manager context.
+ */
+export declare function buildStateSyncManagerContext(dataDictionaryState: DataDictionaryState, dictionary: string): StateSyncManagerContext;

package/lib/views/DataDictionaryView/utils.js

@@ -0,0 +1,17 @@
+import { DATA_DICTIONARY_URL_PARAMS } from "../../providers/dataDictionaryState/dictionaries/constants";
+/**
+ * Builds the state sync manager context object for URL-state synchronization.
+ * - Command: The meta command that signals a URL update operation is needed e.g. "STATE_TO_URL_PUSH" or "STATE_TO_URL_REPLACE".
+ * - ParamKeys: Expected list of URL parameter keys that should be synchronized with state e.g. "filter".
+ * - Query: Dictionary related query object from state that should be synchronized with the URL.
+ * @param dataDictionaryState - Data dictionary state.
+ * @param dictionary - Dictionary ID.
+ * @returns The state sync manager context.
+ */
+export function buildStateSyncManagerContext(dataDictionaryState, dictionary) {
+    return {
+        command: dataDictionaryState.meta?.command,
+        paramKeys: Object.values(DATA_DICTIONARY_URL_PARAMS),
+        query: dataDictionaryState.dictionaries?.[dictionary]?.query,
+    };
+}

package/lib/views/ExploreView/utils.d.ts

@@ -3,7 +3,7 @@ import { StateSyncManagerContext } from "../../hooks/stateSyncManager/types";
 import { ExploreState } from "../../providers/exploreState";
 import { ExploreView } from "./exploreView";
 /**
- *Builds the state sync manager context object for URL-state synchronization.
+ * Builds the state sync manager context object for URL-state synchronization.
  * - Command: The meta command that signals a URL update operation is needed e.g. "STATE_TO_URL_PUSH" or "STATE_TO_URL_REPLACE".
  * - ParamKeys: Expected list of URL parameter keys that should be synchronized with state e.g. "filter", "catalog".
  * - Query: Entity related query object from state that should be synchronized with the URL.

package/lib/views/ExploreView/utils.js

@@ -1,6 +1,6 @@
 import { EXPLORE_URL_PARAMS } from "../../providers/exploreState/constants";
 /**
- *Builds the state sync manager context object for URL-state synchronization.
+ * Builds the state sync manager context object for URL-state synchronization.
  * - Command: The meta command that signals a URL update operation is needed e.g. "STATE_TO_URL_PUSH" or "STATE_TO_URL_REPLACE".
  * - ParamKeys: Expected list of URL parameter keys that should be synchronized with state e.g. "filter", "catalog".
  * - Query: Entity related query object from state that should be synchronized with the URL.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "35.2.0",
+  "version": "37.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -72,6 +72,7 @@
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^7.0.1",
     "@observablehq/plot": "^0.6.17",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "copy-to-clipboard": "3.3.1",

package/src/common/entities.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
+import { RowData, TableOptions } from "@tanstack/react-table";
 
 /**
  * Model of a value of a metadata class.
@@ -72,10 +72,9 @@ export interface DataDictionary<T extends RowData = Attribute> {
  * dictionary) as well as column def for displaying the data dictionary.
  */
 export interface DataDictionaryConfig<T extends RowData = Attribute> {
-  columnDefs: ColumnDef<T, T[keyof T]>[];
   dataDictionary: DataDictionary<T>;
   path: string; // Used as a key to find the dictionary to display
-  tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
+  tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
 }
 
 /**

package/src/components/DataDictionary/components/Entities/constants.ts

@@ -1,10 +1,16 @@
 import { GridProps } from "@mui/material";
-
-export const ENTITIES_ROW_GAP = 8;
+import { ComponentProps } from "react";
+import { NoResults } from "../../../NoResults/noResults";
+import { StyledRoundedPaper } from "./entities.styles";
 
 export const GRID_PROPS: GridProps = {
   container: true,
   direction: "column",
   flexWrap: "nowrap",
-  rowGap: ENTITIES_ROW_GAP,
+  rowGap: 8,
+};
+
+export const NO_RESULTS_PROPS: ComponentProps<typeof NoResults> = {
+  Paper: StyledRoundedPaper,
+  title: "No results found",
 };

package/src/components/DataDictionary/components/Entities/entities.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../common/Paper/paper.styles";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  overflow: hidden;
+`;

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -2,8 +2,9 @@ import { Grid } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../../../common/entities";
+import { NoResults } from "../../../NoResults/noResults";
 import { Entity } from "../Entity/entity";
-import { GRID_PROPS } from "./constants";
+import { GRID_PROPS, NO_RESULTS_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
 export const Entities = <T extends RowData = Attribute>({
@@ -11,10 +12,14 @@ export const Entities = <T extends RowData = Attribute>({
   table,
 }: ClassesProps<T>): JSX.Element => {
   const { getGroupedRowModel } = table;
+  const { rows } = getGroupedRowModel();
+
+  if (rows.length === 0) return <NoResults {...NO_RESULTS_PROPS} />;
+
   return (
     <Grid {...GRID_PROPS}>
       {/* Render grouped rows where each "group" is a class e.g. "donor" */}
-      {getGroupedRowModel().rows.map((row) => (
+      {rows.map((row) => (
         <Entity key={row.id} row={row} spacing={spacing} table={table} />
       ))}
     </Grid>

package/src/components/DataDictionary/components/Entity/entity.styles.ts

@@ -1,18 +1,9 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
-import { ENTITIES_ROW_GAP } from "../Entities/constants";
-import { LAYOUT_SPACING } from "../Layout/constants";
-
-const TOP =
-  ENTITIES_ROW_GAP +
-  LAYOUT_SPACING.TITLE_HEIGHT +
-  LAYOUT_SPACING.FILTERS_HEIGHT +
-  LAYOUT_SPACING.FILTERS_PADDING_TOP +
-  LAYOUT_SPACING.CONTENT_PADDING_TOP;
 
 export const StyledTypography = styled(Typography)<Partial<LayoutSpacing>>`
-  scroll-margin-top: ${({ top = 0 }) => top + TOP}px;
+  scroll-margin-top: ${({ top = 0 }) => top}px;
 
   &:hover a {
     opacity: 1;

package/src/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+
+export const StyledGrid = styled(Grid)`
+  .MuiChip-root:last-of-type {
+    margin-right: 8px;
+  }
+`;

package/src/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { Attribute } from "../../../../../../common/entities";
+import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
+import { ColumnFilterTag } from "../../../../../Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag";
+import { StyledGrid } from "./columnFilterTags.styles";
+import { GRID_PROPS } from "./constants";
+import { ColumnFilterTagsProps } from "./types";
+
+export const ColumnFilterTags = <T extends RowData = Attribute>({
+  className,
+  table,
+}: ColumnFilterTagsProps<T>): JSX.Element | null => {
+  const { getAllColumns, resetColumnFilters } = table;
+  const columns = getAllColumns().filter((column) => column.getIsFiltered());
+
+  if (columns.length === 0) return null;
+
+  return (
+    <StyledGrid className={className} {...GRID_PROPS}>
+      {columns.map((column) => (
+        <ColumnFilterTag key={column.id} column={column} />
+      ))}
+      <Button
+        onClick={() => resetColumnFilters(true)}
+        variant={BUTTON_PROPS.VARIANT.TEXT}
+      >
+        Clear all
+      </Button>
+    </StyledGrid>
+  );
+};

package/src/components/DataDictionary/components/Filters/components/ColumnFilterTags/constants.ts

@@ -0,0 +1,8 @@
+import { GridProps } from "@mui/material";
+
+export const GRID_PROPS: GridProps = {
+  container: true,
+  direction: "row",
+  spacing: 2,
+  wrap: "wrap",
+};

package/src/components/DataDictionary/components/Filters/components/ColumnFilterTags/types.ts

@@ -0,0 +1,8 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { BaseComponentProps } from "../../../../../types";
+
+export interface ColumnFilterTagsProps<T extends RowData = Attribute>
+  extends BaseComponentProps {
+  table: Table<T>;
+}

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

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

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

@@ -1,6 +1,7 @@
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../../../common/entities";
+import { GlobalFilter } from "../../../Table/components/TableFeatures/GlobalFilter/globalFilter";
 import { ColumnFilters } from "./components/ColumnFilters/columnFilters";
 import { StyledGrid } from "./filters.styles";
 import { FiltersProps } from "./types";
@@ -10,6 +11,7 @@ export const Filters = <T extends RowData = Attribute>({
 }: FiltersProps<T>): JSX.Element => {
   return (
     <StyledGrid>
+      <GlobalFilter placeholder="Search all attributes..." table={table} />
       <ColumnFilters table={table} />
     </StyledGrid>
   );