@databiosphere/findable-ui 33.0.0 → 34.0.0

package/lib/components/DataDictionary/components/Table/options/faceted/constants.d.ts

@@ -0,0 +1,2 @@
+import { FacetedOptions, RowData } from "@tanstack/react-table";
+export declare const FACETED_OPTIONS: Pick<FacetedOptions<RowData>, "getFacetedRowModel" | "getFacetedUniqueValues">;

package/lib/components/DataDictionary/components/Table/options/faceted/constants.js

@@ -0,0 +1,6 @@
+import { getFacetedRowModel, } from "@tanstack/react-table";
+import { getFacetedUniqueValuesWithArrayValues } from "../../../../../Table/common/utils";
+export const FACETED_OPTIONS = {
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValuesWithArrayValues(),
+};

package/lib/components/DataDictionary/components/Table/options/grouping/constants.d.ts

@@ -0,0 +1,2 @@
+import { GroupingOptions } from "@tanstack/react-table";
+export declare const GROUPING_OPTIONS: Pick<GroupingOptions, "enableGrouping" | "getGroupedRowModel">;

package/lib/components/DataDictionary/components/Table/options/grouping/constants.js

@@ -0,0 +1,5 @@
+import { getGroupedRowModel } from "@tanstack/react-table";
+export const GROUPING_OPTIONS = {
+    enableGrouping: true,
+    getGroupedRowModel: getGroupedRowModel(),
+};

package/lib/components/DataDictionary/components/Table/options/hook.d.ts

@@ -1,3 +1,3 @@
 import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute } from "../../../../../common/entities";
-export declare const useTableOptions: <T extends RowData = Attribute>() => Omit<TableOptions<T>, "columns" | "data">;
+export declare const useTableOptions: <T extends RowData = Attribute>() => Omit<TableOptions<T>, "columns" | "data" | "initialState">;

package/lib/components/DataDictionary/components/Table/options/hook.js

@@ -1,8 +1,25 @@
+import { useState } from "react";
+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 = () => {
+    // Column filters state - to be moved to a provider with a reducer.
+    const [columnFilters, setColumnFilters] = useState([]);
+    // Column filters options.
+    const columnFiltersOptions = useColumnFiltersOptions({ setColumnFilters });
+    // Table options.
     return {
+        ...columnFiltersOptions,
         ...CORE_OPTIONS,
+        ...EXPANDED_OPTIONS,
+        ...FACETED_OPTIONS,
+        ...GROUPING_OPTIONS,
         ...SORTING_OPTIONS,
+        ...VISIBILITY_OPTIONS,
+        state: { columnFilters },
     };
 };

package/lib/components/DataDictionary/components/Table/options/visibility/constants.d.ts

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

package/lib/components/DataDictionary/components/Table/options/visibility/constants.js

@@ -0,0 +1,3 @@
+export const VISIBILITY_OPTIONS = {
+    enableHiding: true,
+};

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

@@ -1,3 +1,3 @@
 import { RowData } from "@tanstack/react-table";
 import { TableProps } from "./types";
-export declare const Table: <T extends RowData>({ table, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends RowData>({ row, table, }: TableProps<T>) => JSX.Element;

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

@@ -7,11 +7,11 @@ import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
 import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledRoundedPaper } from "./table.styles";
-export const Table = ({ table, }) => {
+export const Table = ({ row, table, }) => {
     return (React.createElement(StyledRoundedPaper, { variant: "table" },
         React.createElement(GridPaper, null,
             React.createElement(TableContainer, null,
                 React.createElement(GridTable, { gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
                     React.createElement(TableHead, { rowDirection: ROW_DIRECTION.DEFAULT, tableInstance: table }),
-                    React.createElement(TableBody, { rowDirection: ROW_DIRECTION.DEFAULT, tableInstance: table }))))));
+                    React.createElement(TableBody, { rowDirection: ROW_DIRECTION.DEFAULT, rows: row.getLeafRows(), tableInstance: table }))))));
 };

package/lib/components/DataDictionary/components/Table/types.d.ts

@@ -1,4 +1,7 @@
-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/lib/components/DataDictionary/components/Table/utils.d.ts

@@ -0,0 +1,18 @@
+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 declare const buildClassMeta: <T extends RowData = Attribute>(classes: Class<T>[]) => ClassMeta;
+/**
+ * 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 declare const buildTableData: <T extends RowData = Attribute>(classes: Class<T>[]) => T[];

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

@@ -0,0 +1,27 @@
+/**
+ * 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 = (classes) => {
+    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 = (classes) => {
+    return classes
+        .map(({ attributes, name: classKey }) => attributes.map((attribute) => ({
+        ...attribute,
+        classKey,
+    })))
+        .flat();
+};

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

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../common/entities";
 import { DataDictionaryProps } from "./types";
-export declare const DataDictionary: <T extends RowData = Attribute>({ className, EntitiesLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;
+export declare const DataDictionary: <T extends RowData = Attribute>({ className, EntitiesLayout, FiltersLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,23 +1,25 @@
-import React, { useMemo } from "react";
+import React from "react";
 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";
 import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
-export const DataDictionary = ({ className, EntitiesLayout = DefaultEntitiesLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
-    const { classes, columnDefs, title } = useDataDictionary();
+export const DataDictionary = ({ className, EntitiesLayout = DefaultEntitiesLayout, FiltersLayout = DefaultFiltersLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
+    const { outline, table, title } = useDataDictionary();
     const { spacing } = useLayoutSpacing();
-    const outline = useMemo(() => buildClassesOutline(classes), [classes]);
     return (React.createElement(View, { className: className },
         React.createElement(TitleLayout, { ...spacing },
             React.createElement(Title, { title: title })),
         React.createElement(OutlineLayout, { ...spacing },
             React.createElement(Outline, { outline: outline })),
+        React.createElement(FiltersLayout, { ...spacing },
+            React.createElement(Filters, { table: table })),
         React.createElement(EntitiesLayout, { ...spacing },
-            React.createElement(Entities, { classes: classes, columnDefs: columnDefs, spacing: spacing }))));
+            React.createElement(Entities, { spacing: spacing, table: table }))));
 };

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.js

@@ -1,12 +1,23 @@
 import { useMemo } from "react";
 import { useConfig } from "../../../../hooks/useConfig";
+import { buildClassesOutline } from "../../components/Outline/utils";
+import { useTable } from "../../components/Table/hook";
 export const useDataDictionary = () => {
     const { config: { dataDictionaries: dataDictionaryConfigs }, } = useConfig();
+    // Get dictionary config.
     const dataDictionaryConfig = dataDictionaryConfigs?.[0]; // 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(classes, columnDefs, tableOptions);
+    // Build outline.
+    const outline = buildClassesOutline(table);
+    return { outline, table, title };
 };

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.d.ts

@@ -1,7 +1,8 @@
-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/lib/components/DataDictionary/types.d.ts

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

package/lib/components/Detail/components/Table/components/TableBody/tableBody.d.ts

@@ -1,9 +1,15 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
 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 declare const TableBody: <T extends RowData>({ rowDirection, tableInstance, tableView, }: TableBodyProps<T>) => JSX.Element;
+export declare const TableBody: <T extends RowData>({ rowDirection, rows, tableInstance, tableView, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Detail/components/Table/components/TableBody/tableBody.js

@@ -3,6 +3,6 @@ import React from "react";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { TableRows } from "../TableRows/tableRows";
-export const TableBody = ({ rowDirection, tableInstance, tableView, }) => {
-    return (React.createElement(MTableBody, null, rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { tableInstance: tableInstance, tableView: tableView })) : (React.createElement(CollapsableRows, { tableInstance: tableInstance }))));
+export const TableBody = ({ rowDirection, rows, tableInstance, tableView, }) => {
+    return (React.createElement(MTableBody, null, rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: rows, tableInstance: tableInstance, tableView: tableView })) : (React.createElement(CollapsableRows, { rows: rows, tableInstance: tableInstance }))));
 };

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.d.ts

@@ -1,5 +1,11 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 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 declare const CollapsableRows: <T extends RowData>({ tableInstance, }: CollapsableRowsProps<T>) => JSX.Element;
+export declare const CollapsableRows: <T extends RowData>({ rows: leafOrSubRows, tableInstance, }: CollapsableRowsProps<T>) => JSX.Element;

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

@@ -3,11 +3,11 @@ import { isCollapsableRowDisabled } from "../../../../../../../Table/common/util
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
 import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
-export const CollapsableRows = ({ tableInstance, }) => {
+export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     useCollapsableRows(tableInstance);
-    return (React.createElement(Fragment, null, rows.map((row) => {
+    return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.
         return (React.createElement(TableRow, { key: row.id, isPreview: row.getIsPreview() },

package/lib/components/Detail/components/Table/components/TableRows/tableRows.d.ts

@@ -1,7 +1,13 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 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 declare const TableRows: <T extends RowData>({ tableInstance, tableView, }: TableRowsProps<T>) => JSX.Element;
+export declare const TableRows: <T extends RowData>({ rows: leafOrSubRows, tableInstance, tableView, }: TableRowsProps<T>) => JSX.Element;

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -3,12 +3,12 @@ import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { getTableCellAlign, getTableCellPadding, } from "../../../../../Table/components/TableCell/common/utils";
 import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
-export const TableRows = ({ tableInstance, tableView, }) => {
+export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
-    return (React.createElement(Fragment, null, rows.map((row) => {
+    return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         return (React.createElement(TableRow, { key: row.id, isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview() }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.

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

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

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

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

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

@@ -1,6 +1,31 @@
+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;
@@ -19,20 +44,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/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const InputField: import("@emotion/styled").StyledComponent<{
     variant?: import("@mui/material").TextFieldVariants | undefined;
-} & Omit<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & {
+} & Omit<import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.d.ts

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

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.d.ts

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

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -10,7 +10,7 @@ export declare const StyledTabs: import("@emotion/styled").StyledComponent<impor
 }, {}, {}>;
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/Login/components/Button/button.styles.d.ts

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

package/lib/components/Table/common/utils.d.ts

@@ -16,6 +16,12 @@ type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
  * @returns Array of category views objects.
  */
 export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): Category[];
+/**
+ * Returns the header for a column as a string.
+ * @param column - Column.
+ * @returns column header.
+ */
+export declare function getColumnHeader<T extends RowData>(column: Column<T>): string;
 /**
  * Returns filtered entity results as a blob.
  * @param rows - Table rows.

package/lib/components/Table/common/utils.js

@@ -46,6 +46,20 @@ export function buildCategoryViews(columns, columnFilters) {
     }
     return categoryViews;
 }
+/**
+ * Returns the header for a column as a string.
+ * @param column - Column.
+ * @returns column header.
+ */
+export function getColumnHeader(column) {
+    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/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.d.ts

@@ -0,0 +1,7 @@
+import { RowData } from "@tanstack/react-table";
+import { ColumnFilterProps } from "./types";
+/**
+ *  Column filter component with supported filter functions:
+ *  - `arrIncludesSome`
+ */
+export declare const ColumnFilter: <T extends RowData>({ Button, className, column, ...props }: ColumnFilterProps<T>) => JSX.Element;

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.js

@@ -0,0 +1,33 @@
+import { Checkbox, ListItemButton, ListItemText, Button as MButton, Typography, } from "@mui/material";
+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 { updater } from "./utils";
+/**
+ *  Column filter component with supported filter functions:
+ *  - `arrIncludesSome`
+ */
+export const ColumnFilter = ({ Button = MButton, className, column, ...props /* MuiMenuProps */ }) => {
+    const { anchorEl, onClose, onOpen, open } = useMenu();
+    const facetedUniqueValues = column.getFacetedUniqueValues();
+    const sortedValues = getSortedFacetedValues(facetedUniqueValues);
+    const filterValue = (column.getFilterValue() || []);
+    return (React.createElement(Fragment, null,
+        React.createElement(Button, { key: column.id, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen }, getColumnHeader(column)),
+        React.createElement(StyledMenu, { ...MENU_PROPS, ...props, className: className, anchorEl: anchorEl, onClose: onClose, open: open },
+            sortedValues.map(([value, occurrence]) => (React.createElement(ListItemButton, { key: String(value), selected: filterValue.includes(value), onClick: () => column.setFilterValue(updater(value)) },
+                React.createElement(Checkbox, { checked: filterValue.includes(value), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
+                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, String(value)), secondary: React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, occurrence) })))),
+            React.createElement(ListItemButton, { disabled: !column.getIsFiltered(), onClick: () => column.setFilterValue(undefined) },
+                React.createElement(Typography, { color: column.getIsFiltered()
+                        ? TYPOGRAPHY_PROPS.COLOR.PRIMARY
+                        : TYPOGRAPHY_PROPS.COLOR.INHERIT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500 }, "Clear All")))));
+};

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.js

@@ -0,0 +1,19 @@
+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/lib/components/Table/components/TableFeatures/ColumnFilter/constants.d.ts

@@ -0,0 +1,2 @@
+import { MenuProps } from "@mui/material";
+export declare const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open">;

package/lib/components/Table/components/TableFeatures/ColumnFilter/constants.js

@@ -0,0 +1,14 @@
+export const MENU_PROPS = {
+    anchorOrigin: {
+        horizontal: "right",
+        vertical: "bottom",
+    },
+    marginThreshold: 8,
+    slotProps: {
+        paper: { variant: "menu" },
+    },
+    transformOrigin: {
+        horizontal: "right",
+        vertical: "top",
+    },
+};