@databiosphere/findable-ui 33.0.0 → 34.1.0

package/src/components/DataDictionary/components/Table/options/columnFilters/constants.ts

@@ -0,0 +1,16 @@
+import {
+  ColumnFiltersOptions,
+  RowData,
+  getFilteredRowModel,
+} from "@tanstack/react-table";
+import { arrIncludesSome } from "../../../../../Table/columnDef/columnFilters/filterFn";
+
+export const COLUMN_FILTERS_OPTIONS: Pick<
+  ColumnFiltersOptions<RowData>,
+  "enableColumnFilters" | "enableFilters" | "filterFns" | "getFilteredRowModel"
+> = {
+  enableColumnFilters: true,
+  enableFilters: true,
+  filterFns: { arrIncludesSome },
+  getFilteredRowModel: getFilteredRowModel(),
+};

package/src/components/DataDictionary/components/Table/options/columnFilters/hook.ts

@@ -0,0 +1,32 @@
+import {
+  ColumnFiltersOptions,
+  ColumnFiltersState,
+  RowData,
+  Updater,
+} from "@tanstack/react-table";
+import { Dispatch, SetStateAction, useCallback } from "react";
+import { Attribute } from "../../../../../../common/entities";
+import { resolveUpdater } from "../../../../../Table/options/updater";
+import { COLUMN_FILTERS_OPTIONS } from "./constants";
+
+export const useColumnFiltersOptions = <T extends RowData = Attribute>({
+  setColumnFilters,
+}: {
+  setColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>;
+}): ColumnFiltersOptions<T> => {
+  // Column filters change handler.
+  // TODO dispatch to provider with reducer.
+  const onColumnFiltersChange = useCallback(
+    (updaterOrValue: Updater<ColumnFiltersState>): void => {
+      setColumnFilters((old) =>
+        resolveUpdater<ColumnFiltersState>(updaterOrValue, old)
+      );
+    },
+    [setColumnFilters]
+  );
+
+  return {
+    ...COLUMN_FILTERS_OPTIONS,
+    onColumnFiltersChange,
+  };
+};

package/src/components/DataDictionary/components/Table/options/expanded/constants.ts

@@ -0,0 +1,13 @@
+import {
+  ExpandedOptions,
+  getExpandedRowModel,
+  RowData,
+} from "@tanstack/react-table";
+
+export const EXPANDED_OPTIONS: Pick<
+  ExpandedOptions<RowData>,
+  "enableExpanding" | "getExpandedRowModel"
+> = {
+  enableExpanding: true,
+  getExpandedRowModel: getExpandedRowModel(),
+};

package/src/components/DataDictionary/components/Table/options/faceted/constants.ts

@@ -0,0 +1,14 @@
+import {
+  FacetedOptions,
+  getFacetedRowModel,
+  RowData,
+} from "@tanstack/react-table";
+import { getFacetedUniqueValuesWithArrayValues } from "../../../../../Table/common/utils";
+
+export const FACETED_OPTIONS: Pick<
+  FacetedOptions<RowData>,
+  "getFacetedRowModel" | "getFacetedUniqueValues"
+> = {
+  getFacetedRowModel: getFacetedRowModel(),
+  getFacetedUniqueValues: getFacetedUniqueValuesWithArrayValues(),
+};

package/src/components/DataDictionary/components/Table/options/grouping/constants.ts

@@ -0,0 +1,9 @@
+import { GroupingOptions, getGroupedRowModel } from "@tanstack/react-table";
+
+export const GROUPING_OPTIONS: Pick<
+  GroupingOptions,
+  "enableGrouping" | "getGroupedRowModel"
+> = {
+  enableGrouping: true,
+  getGroupedRowModel: getGroupedRowModel(),
+};

package/src/components/DataDictionary/components/Table/options/hook.ts

@@ -1,14 +1,37 @@
-import { RowData, TableOptions } from "@tanstack/react-table";
+import {
+  ColumnFiltersState,
+  RowData,
+  TableOptions,
+} from "@tanstack/react-table";
+import { useState } from "react";
 import { Attribute } from "../../../../../common/entities";
+import { useColumnFiltersOptions } from "./columnFilters/hook";
 import { CORE_OPTIONS } from "./core/constants";
+import { EXPANDED_OPTIONS } from "./expanded/constants";
+import { FACETED_OPTIONS } from "./faceted/constants";
+import { GROUPING_OPTIONS } from "./grouping/constants";
 import { SORTING_OPTIONS } from "./sorting/constants";
+import { VISIBILITY_OPTIONS } from "./visibility/constants";
 
 export const useTableOptions = <T extends RowData = Attribute>(): Omit<
   TableOptions<T>,
-  "columns" | "data"
+  "columns" | "data" | "initialState"
 > => {
+  // Column filters state - to be moved to a provider with a reducer.
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  // Column filters options.
+  const columnFiltersOptions = useColumnFiltersOptions<T>({ setColumnFilters });
+
+  // Table options.
   return {
+    ...columnFiltersOptions,
     ...CORE_OPTIONS,
+    ...EXPANDED_OPTIONS,
+    ...FACETED_OPTIONS,
+    ...GROUPING_OPTIONS,
     ...SORTING_OPTIONS,
-  };
+    ...VISIBILITY_OPTIONS,
+    state: { columnFilters },
+  } as TableOptions<T>;
 };

package/src/components/DataDictionary/components/Table/options/visibility/constants.ts

@@ -0,0 +1,5 @@
+import { VisibilityOptions } from "@tanstack/react-table";
+
+export const VISIBILITY_OPTIONS: Pick<VisibilityOptions, "enableHiding"> = {
+  enableHiding: true,
+};

package/src/components/DataDictionary/components/Table/table.tsx

@@ -11,6 +11,7 @@ import { StyledRoundedPaper } from "./table.styles";
 import { TableProps } from "./types";
 
 export const Table = <T extends RowData>({
+  row,
   table,
 }: TableProps<T>): JSX.Element => {
   return (
@@ -28,6 +29,7 @@ export const Table = <T extends RowData>({
             />
             <TableBody
               rowDirection={ROW_DIRECTION.DEFAULT}
+              rows={row.getLeafRows()}
               tableInstance={table}
             />
           </GridTable>

package/src/components/DataDictionary/components/Table/types.ts

@@ -1,5 +1,12 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
+import { Class } from "common/entities";
+
+export type ClassMeta = Record<
+  Class["name"],
+  Pick<Class, "description" | "title">
+>;
 
 export interface TableProps<T extends RowData> {
+  row: Row<T>;
   table: Table<T>;
 }

package/src/components/DataDictionary/components/Table/utils.ts

@@ -0,0 +1,40 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+import { ClassMeta } from "./types";
+
+/**
+ * Builds class meta data from classes.
+ * Metadata is used to display class title and description above each "grouped" table.
+ * @param classes - Class entities.
+ * @returns Class meta data.
+ */
+export const buildClassMeta = <T extends RowData = Attribute>(
+  classes: Class<T>[]
+): ClassMeta => {
+  return Object.fromEntries(
+    classes.map(({ description, name, title }) => [
+      name,
+      { description, title },
+    ])
+  );
+};
+
+/**
+ * Builds table data from classes.
+ * RowData contains attributes of a class and a classKey property `Class["name"]` to identify the class the row belongs to.
+ * `classKey` is used to group rows by class.
+ * @param classes - Class entities.
+ * @returns Table data.
+ */
+export const buildTableData = <T extends RowData = Attribute>(
+  classes: Class<T>[]
+): T[] => {
+  return classes
+    .map(({ attributes, name: classKey }) =>
+      attributes.map((attribute) => ({
+        ...(attribute as unknown as Attribute),
+        classKey,
+      }))
+    )
+    .flat() as T[];
+};

package/src/components/DataDictionary/dataDictionary.tsx

@@ -1,12 +1,13 @@
 import { RowData } from "@tanstack/react-table";
-import React, { useMemo } from "react";
+import React from "react";
 import { Attribute } from "../../common/entities";
 import { Entities } from "./components/Entities/entities";
+import { Filters } from "./components/Filters/filters";
 import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
+import { FiltersLayout as DefaultFiltersLayout } from "./components/Layout/components/FiltersLayout/filtersLayout";
 import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
 import { TitleLayout as DefaultTitleLayout } from "./components/Layout/components/TitleLayout/titleLayout";
 import { Outline as DefaultOutline } from "./components/Outline/outline";
-import { buildClassesOutline } from "./components/Outline/utils";
 import { Title as DefaultTitle } from "./components/Title/title";
 import { View } from "./dataDictionary.styles";
 import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
@@ -16,14 +17,14 @@ import { DataDictionaryProps } from "./types";
 export const DataDictionary = <T extends RowData = Attribute>({
   className,
   EntitiesLayout = DefaultEntitiesLayout,
+  FiltersLayout = DefaultFiltersLayout,
   Outline = DefaultOutline,
   OutlineLayout = DefaultOutlineLayout,
   Title = DefaultTitle,
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
-  const { classes, columnDefs, title } = useDataDictionary<T>();
+  const { outline, table, title } = useDataDictionary<T>();
   const { spacing } = useLayoutSpacing();
-  const outline = useMemo(() => buildClassesOutline(classes), [classes]);
   return (
     <View className={className}>
       <TitleLayout {...spacing}>
@@ -32,8 +33,11 @@ export const DataDictionary = <T extends RowData = Attribute>({
       <OutlineLayout {...spacing}>
         <Outline outline={outline} />
       </OutlineLayout>
+      <FiltersLayout {...spacing}>
+        <Filters table={table} />
+      </FiltersLayout>
       <EntitiesLayout {...spacing}>
-        <Entities classes={classes} columnDefs={columnDefs} spacing={spacing} />
+        <Entities spacing={spacing} table={table} />
       </EntitiesLayout>
     </View>
   );

package/src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

@@ -2,6 +2,8 @@ import { RowData } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { Attribute, DataDictionaryConfig } from "../../../../common/entities";
 import { useConfig } from "../../../../hooks/useConfig";
+import { buildClassesOutline } from "../../components/Outline/utils";
+import { useTable } from "../../components/Table/hook";
 import { UseDataDictionary } from "./types";
 
 export const useDataDictionary = <
@@ -11,14 +13,26 @@ export const useDataDictionary = <
     config: { dataDictionaries: dataDictionaryConfigs },
   } = useConfig();
 
+  // Get dictionary config.
   const dataDictionaryConfig = dataDictionaryConfigs?.[0] as
     | DataDictionaryConfig<T>
     | undefined; // TODO: Handle multiple data dictionaries
 
-  return useMemo(() => {
-    const classes = dataDictionaryConfig?.dataDictionary?.classes || [];
-    const columnDefs = dataDictionaryConfig?.columnDefs || [];
-    const title = dataDictionaryConfig?.dataDictionary?.title || "";
-    return { classes, columnDefs, title };
+  // Get configured dictionary classes, column definitions and table options.
+  const { classes, columnDefs, tableOptions, title } = useMemo(() => {
+    return {
+      classes: dataDictionaryConfig?.dataDictionary?.classes || [],
+      columnDefs: dataDictionaryConfig?.columnDefs || [],
+      tableOptions: dataDictionaryConfig?.tableOptions || {},
+      title: dataDictionaryConfig?.dataDictionary?.title || "",
+    };
   }, [dataDictionaryConfig]);
+
+  // Build table instance.
+  const table = useTable<T>(classes, columnDefs, tableOptions);
+
+  // Build outline.
+  const outline = buildClassesOutline<T>(table);
+
+  return { outline, table, title };
 };

package/src/components/DataDictionary/hooks/UseDataDictionary/types.ts

@@ -1,8 +1,9 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
-import { Attribute, Class } from "../../../../common/entities";
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
 
 export interface UseDataDictionary<T extends RowData = Attribute> {
-  classes: Class<T>[];
-  columnDefs: ColumnDef<T, T[keyof T]>[];
+  outline: OutlineItem[];
+  table: Table<T>;
   title: string;
 }

package/src/components/DataDictionary/types.ts

@@ -3,6 +3,7 @@ import { BaseComponentProps } from "../types";
 
 export interface DataDictionaryProps extends BaseComponentProps {
   EntitiesLayout?: ElementType;
+  FiltersLayout?: ElementType;
   Outline?: ElementType;
   OutlineLayout?: ElementType;
   Title?: ElementType;

package/src/components/Detail/components/Table/components/TableBody/tableBody.tsx

@@ -1,5 +1,5 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import React from "react";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
@@ -8,21 +8,32 @@ import { TableRows } from "../TableRows/tableRows";
 
 export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
+  /**
+   * Optional override for the rows rendered by <TableBody>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
 export const TableBody = <T extends RowData>({
   rowDirection,
+  rows,
   tableInstance,
   tableView,
 }: TableBodyProps<T>): JSX.Element => {
   return (
     <MTableBody>
       {rowDirection === ROW_DIRECTION.DEFAULT ? (
-        <TableRows tableInstance={tableInstance} tableView={tableView} />
+        <TableRows
+          rows={rows}
+          tableInstance={tableInstance}
+          tableView={tableView}
+        />
       ) : (
-        <CollapsableRows tableInstance={tableInstance} />
+        <CollapsableRows rows={rows} tableInstance={tableInstance} />
       )}
     </MTableBody>
   );

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

@@ -1,4 +1,4 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
@@ -6,10 +6,17 @@ import { TableRow } from "../../../../../../../Table/components/TableRow/tableRo
 import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
+  /**
+   * Optional override for the rows rendered by <CollapsableRows>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
 }
 
 export const CollapsableRows = <T extends RowData>({
+  rows: leafOrSubRows,
   tableInstance,
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
@@ -17,7 +24,7 @@ export const CollapsableRows = <T extends RowData>({
   useCollapsableRows(tableInstance);
   return (
     <Fragment>
-      {rows.map((row) => {
+      {(leafOrSubRows || rows).map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
           <TableRow key={row.id} isPreview={row.getIsPreview()}>

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, RowData, Table } from "@tanstack/react-table";
+import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import {
   getTableCellAlign,
@@ -9,11 +9,18 @@ import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styl
 import { TableView } from "../../table";
 
 export interface TableRowsProps<T extends RowData> {
+  /**
+   * Optional override for the rows rendered by <TableRows>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
 export const TableRows = <T extends RowData>({
+  rows: leafOrSubRows,
   tableInstance,
   tableView,
 }: TableRowsProps<T>): JSX.Element => {
@@ -23,7 +30,7 @@ export const TableRows = <T extends RowData>({
   const { size: tableCellSize = "medium" } = tableCell || {};
   return (
     <Fragment>
-      {rows.map((row) => {
+      {(leafOrSubRows || rows).map((row) => {
         return (
           <TableRow
             key={row.id}

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

@@ -1,7 +1,38 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { List as MList } from "@mui/material";
+import {
+  listItemButtonClasses,
+  listItemTextClasses,
+  List as MList,
+} from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { LIST_MARGIN } from "../../common/constants";
 
+export const MuiListItemButtonRoot = css`
+  .${listItemButtonClasses.root} {
+    gap: 8px;
+    padding: 10px 16px;
+
+    &.Mui-disabled {
+      color: ${PALETTE.SMOKE_MAIN};
+      opacity: 1;
+    }
+  }
+`;
+
+export const MuiListItemTextRoot = css`
+  .${listItemTextClasses.root} {
+    align-items: center;
+    display: grid;
+    gap: 8px;
+    grid-template-columns: 1fr auto;
+
+    > span {
+      min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
+    }
+  }
+`;
+
 export const List = styled(MList)`
   && {
     overflow-wrap: break-word;
@@ -20,20 +51,8 @@ export const List = styled(MList)`
   }
 
   // List item
-  .MuiListItemButton-root {
-    gap: 8px;
-    padding: 10px 16px;
-  }
+  ${MuiListItemButtonRoot}
 
   // List item text
-  .MuiListItemText-root {
-    align-items: center;
-    display: grid;
-    gap: 8px;
-    grid-template-columns: 1fr auto;
-
-    > span {
-      min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
-    }
-  }
+  ${MuiListItemTextRoot}
 `;

package/src/components/Table/common/utils.ts

@@ -84,6 +84,22 @@ export function buildCategoryViews<T extends RowData>(
   return categoryViews;
 }
 
+/**
+ * Returns the header for a column as a string.
+ * @param column - Column.
+ * @returns column header.
+ */
+export function getColumnHeader<T extends RowData>(column: Column<T>): string {
+  const { columnDef, id = "" } = column;
+  const { header, meta } = columnDef;
+
+  // Return header if it is a string.
+  if (typeof header === "string") return header;
+
+  // Return header from meta or id.
+  return meta?.header || id;
+}
+
 /**
  * Format data to TSV string.
  * @param data - Table data.

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.ts

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import { Menu, menuClasses, paperClasses } from "@mui/material";
+import { MAX_LIST_HEIGHT_PX } from "../../../../Filter/common/constants";
+import {
+  MuiListItemButtonRoot,
+  MuiListItemTextRoot,
+} from "../../../../Filter/components/FilterList/filterList.styles";
+
+export const StyledMenu = styled(Menu)`
+  .${paperClasses.root} {
+    margin: 4px 0;
+    width: 288px;
+
+    .${menuClasses.list} {
+      max-height: ${MAX_LIST_HEIGHT_PX}px;
+      overflow-wrap: break-word;
+
+      ${MuiListItemButtonRoot}
+
+      ${MuiListItemTextRoot}
+    }
+  }
+`;

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -0,0 +1,98 @@
+import {
+  Checkbox,
+  ListItemButton,
+  ListItemText,
+  Button as MButton,
+  Typography,
+} from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { useMenu } from "../../../../common/Menu/hooks/useMenu";
+import { getColumnHeader } from "../../../common/utils";
+import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
+import { StyledMenu } from "./columnFilter.styles";
+import { MENU_PROPS } from "./constants";
+import { ColumnFilterProps } from "./types";
+import { updater } from "./utils";
+
+/**
+ *  Column filter component with supported filter functions:
+ *  - `arrIncludesSome`
+ */
+
+export const ColumnFilter = <T extends RowData>({
+  Button = MButton,
+  className,
+  column,
+  ...props /* MuiMenuProps */
+}: ColumnFilterProps<T>): JSX.Element => {
+  const { anchorEl, onClose, onOpen, open } = useMenu();
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+  const sortedValues = getSortedFacetedValues(facetedUniqueValues);
+  const filterValue = (column.getFilterValue() || []) as unknown[];
+  return (
+    <Fragment>
+      <Button
+        key={column.id}
+        endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
+        onClick={onOpen}
+      >
+        {getColumnHeader(column)}
+      </Button>
+      <StyledMenu
+        {...MENU_PROPS}
+        {...props}
+        className={className}
+        anchorEl={anchorEl}
+        onClose={onClose}
+        open={open}
+      >
+        {sortedValues.map(([value, occurrence]) => (
+          <ListItemButton
+            key={String(value)}
+            selected={filterValue.includes(value)}
+            onClick={() => column.setFilterValue(updater(value))}
+          >
+            <Checkbox
+              checked={filterValue.includes(value)}
+              checkedIcon={<CheckedIcon />}
+              icon={<UncheckedIcon />}
+            />
+            <ListItemText
+              disableTypography
+              primary={<span>{String(value)}</span>}
+              secondary={
+                <Typography
+                  color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+                  variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+                >
+                  {occurrence}
+                </Typography>
+              }
+            />
+          </ListItemButton>
+        ))}
+        <ListItemButton
+          disabled={!column.getIsFiltered()}
+          onClick={() => column.setFilterValue(undefined)}
+        >
+          <Typography
+            color={
+              column.getIsFiltered()
+                ? TYPOGRAPHY_PROPS.COLOR.PRIMARY
+                : TYPOGRAPHY_PROPS.COLOR.INHERIT
+            }
+            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500}
+          >
+            Clear All
+          </Typography>
+        </ListItemButton>
+      </StyledMenu>
+    </Fragment>
+  );
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/constants.ts

@@ -0,0 +1,16 @@
+import { MenuProps } from "@mui/material";
+
+export const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open"> = {
+  anchorOrigin: {
+    horizontal: "right",
+    vertical: "bottom",
+  },
+  marginThreshold: 8,
+  slotProps: {
+    paper: { variant: "menu" },
+  },
+  transformOrigin: {
+    horizontal: "right",
+    vertical: "top",
+  },
+};