@databiosphere/findable-ui 5.0.0 → 6.0.0

package/README.md

@@ -28,4 +28,8 @@
     - Run `npm link ../../findable-ui`, which will create a symlink in node_modules pointing
       to findable-ui.
     - If any packages are later installed or uninstalled, the symlink will need to be created again, which can be done
-      with the same command or by running `npm link @databiosphere/findable-ui`.
+      with the same command or by running `npm link @databiosphere/findable-ui`. 
+    - To successfully link to findable-ui, you may need to comment out the following packages from the `next.config.mjs` webpack configuration:
+      - `@tanstack/react-table`
+      - `axios`
+

package/lib/components/ComponentCreator/ComponentCreator.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { ComponentsConfig } from "../../config/entities";
+import { ComponentsConfig, ViewContext } from "../../config/entities";
 export interface ComponentCreatorProps<T> {
     components: ComponentsConfig;
     response: T;
+    viewContext?: Partial<ViewContext<T>>;
 }
 /**
  * ComponentCreator uses React API to create components based on the component configs, instead of using JSX.
@@ -11,6 +12,7 @@ export interface ComponentCreatorProps<T> {
  * @param componentCreatorProps - Custom props required for creating component.
  * @param componentCreatorProps.components - Component config to render as React elements.
  * @param componentCreatorProps.response - Response returned from API endpoint, used to populate component props.
+ * @param componentCreatorProps.viewContext - Additional context to pass to the component.
  * @returns A set of React components.
  */
-export declare const ComponentCreator: <T>({ components, response, }: ComponentCreatorProps<T>) => JSX.Element;
+export declare const ComponentCreator: <T>({ components, response, viewContext, }: ComponentCreatorProps<T>) => JSX.Element;

package/lib/components/ComponentCreator/ComponentCreator.js

@@ -17,9 +17,10 @@ const useSystemStatus_1 = require("../../hooks/useSystemStatus");
  * @param componentCreatorProps - Custom props required for creating component.
  * @param componentCreatorProps.components - Component config to render as React elements.
  * @param componentCreatorProps.response - Response returned from API endpoint, used to populate component props.
+ * @param componentCreatorProps.viewContext - Additional context to pass to the component.
  * @returns A set of React components.
  */
-const ComponentCreator = ({ components, response, }) => {
+const ComponentCreator = ({ components, response, viewContext, }) => {
     const { authenticationStatus, isAuthenticated } = (0, useAuthentication_1.useAuthentication)();
     const { config, entityConfig } = (0, useConfig_1.useConfig)();
     const { exploreState } = (0, useExploreState_1.useExploreState)();
@@ -30,18 +31,15 @@ const ComponentCreator = ({ components, response, }) => {
         // Using uuid as the component's key causes the component to re-mount on re-render.
         // An interim solution is to use the array item's index as its key; however, this may lead to subtle bugs.
         // See issue https://github.com/clevercanary/data-explorer/issues/363.
-        const children = c.children ? (react_1.default.createElement(exports.ComponentCreator, { key: k, components: c.children, response: response })) : null;
+        const children = c.children ? (react_1.default.createElement(exports.ComponentCreator, { key: k, components: c.children, response: response, viewContext: viewContext })) : null;
         const props = c.viewBuilder
-            ? c.viewBuilder(response, {
-                authState: {
+            ? c.viewBuilder(response, Object.assign(Object.assign({}, viewContext), { authState: {
                     authenticationStatus,
                     isAuthenticated,
-                },
-                entityConfig,
+                }, entityConfig,
                 exploreState,
                 fileManifestState,
-                systemStatus,
-            })
+                systemStatus }))
             : {};
         return react_1.default.createElement(c.component, Object.assign(Object.assign(Object.assign({}, c.props), props), { key: k }), [children !== null && children !== void 0 ? children : props.children]);
     })));

package/lib/components/Detail/components/DetailViewTable/detailViewTable.d.ts

@@ -1,8 +1,8 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 import { ReactNode } from "react";
 import { FlatPaper, FluidPaper, RoundedPaper } from "../../../common/Paper/paper.styles";
 import { TableProps } from "../Table/table";
-interface DetailViewTableProps<T extends object> extends TableProps<T> {
+interface DetailViewTableProps<T extends RowData> extends TableProps<T> {
     className?: string;
     columns: ColumnDef<T>[];
     gridTemplateColumns: string;
@@ -11,5 +11,5 @@ interface DetailViewTableProps<T extends object> extends TableProps<T> {
     Paper?: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper;
     tools?: ReactNode;
 }
-export declare const DetailViewTable: <T extends object>({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper, tools, ...tableProps }: DetailViewTableProps<T>) => JSX.Element;
+export declare const DetailViewTable: <T extends unknown>({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper, tools, ...tableProps }: DetailViewTableProps<T>) => JSX.Element;
 export {};

package/lib/components/Detail/components/DetailViewTable/detailViewTable.js

@@ -22,7 +22,7 @@ const tableToolbar_styles_1 = require("../../../Table/components/TableToolbar/ta
 const table_1 = require("../Table/table");
 const DetailViewTable = (_a) => {
     var { className, columns, gridTemplateColumns, items, noResultsTitle, Paper = paper_styles_1.RoundedPaper, tools } = _a, tableProps = __rest(_a, ["className", "columns", "gridTemplateColumns", "items", "noResultsTitle", "Paper", "tools"]);
-    return items.length > 0 ? (react_1.default.createElement(Paper, { className: className },
+    return items.length > 0 ? (react_1.default.createElement(Paper, { className: className, variant: "table" },
         react_1.default.createElement(paper_styles_1.GridPaper, null,
             tools && react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" }, tools),
             react_1.default.createElement(table_1.Table, Object.assign({ columns: columns, gridTemplateColumns: gridTemplateColumns, items: items }, tableProps))))) : (react_1.default.createElement(noResults_1.NoResults, { Paper: Paper, title: noResultsTitle }));

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

@@ -1,7 +1,7 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 /**
  * Generates columns from column definitions with meta associated with the column.
  * @param columns - Column configuration.
  * @returns generated column definitions.
  */
-export declare function generateColumnDefinitions<T>(columns: ColumnDef<T>[]): ColumnDef<T>[];
+export declare function generateColumnDefinitions<T extends RowData>(columns: ColumnDef<T>[]): ColumnDef<T>[];

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
-export interface TableBodyProps<T> {
+export interface TableBodyProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
     tableInstance: Table<T>;
     tableView?: TableView;
 }
-export declare const TableBody: <T extends object>({ rowDirection, tableInstance, tableView, }: TableBodyProps<T>) => JSX.Element;
+export declare const TableBody: <T extends unknown>({ rowDirection, tableInstance, tableView, }: TableBodyProps<T>) => JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
-export interface CollapsableRowsProps<T> {
+import { RowData, Table } from "@tanstack/react-table";
+export interface CollapsableRowsProps<T extends RowData> {
     tableInstance: Table<T>;
 }
-export declare const CollapsableRows: <T extends object>({ tableInstance, }: CollapsableRowsProps<T>) => JSX.Element;
+export declare const CollapsableRows: <T extends unknown>({ tableInstance, }: CollapsableRowsProps<T>) => JSX.Element;

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

@@ -24,19 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsableRows = void 0;
-const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
-const uuid_1 = require("uuid");
 const utils_1 = require("../../../../../../../Table/common/utils");
 const collapsableCell_1 = require("../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell");
+const tableRow_styles_1 = require("../../../../../../../Table/components/TableRow/tableRow.styles");
 const CollapsableRows = ({ tableInstance, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
-    const uuid = (0, uuid_1.v4)(); // Generate a unique ID for the collapsable rows.
     return (react_1.default.createElement(react_1.Fragment, null, rows.map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.
-        return (react_1.default.createElement(material_1.TableRow, { key: `${uuid}${row.id}` },
+        return (react_1.default.createElement(tableRow_styles_1.TableRow, { key: row.id, isPreview: row.getIsPreview() },
             react_1.default.createElement(collapsableCell_1.CollapsableCell, { isDisabled: (0, utils_1.isCollapsableRowDisabled)(tableInstance), row: row })));
     })));
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { TableView } from "../../table";
-export interface TableRowsProps<T> {
+export interface TableRowsProps<T extends RowData> {
     tableInstance: Table<T>;
     tableView?: TableView;
 }

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

@@ -28,13 +28,14 @@ const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../../../../../Table/components/TableCell/common/utils");
+const tableRow_styles_1 = require("../../../../../Table/components/TableRow/tableRow.styles");
 const TableRows = ({ tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (react_1.default.createElement(react_1.Fragment, null, rows.map((row) => {
-        return (react_1.default.createElement(material_1.TableRow, { id: getRowId(row), key: row.id }, row.getVisibleCells().map((cell) => {
+        return (react_1.default.createElement(tableRow_styles_1.TableRow, { id: getRowId(row), isPreview: row.getIsPreview(), key: row.id }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

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

@@ -1,13 +1,12 @@
 /// <reference types="react" />
 import { TableCellProps as MTableCellProps, TableContainerProps as MTableContainerProps, TableProps as MTableProps } from "@mui/material";
-import { ColumnDef } from "@tanstack/react-table";
-import { TableOptions } from "@tanstack/table-core";
+import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
 export interface TableView {
     table?: Partial<MTableProps>;
     tableCell?: Partial<MTableCellProps>;
     tableContainer?: Partial<MTableContainerProps>;
 }
-export interface TableProps<T extends object> {
+export interface TableProps<T extends RowData> {
     className?: string;
     collapsable?: boolean;
     columns: ColumnDef<T>[];
@@ -16,4 +15,4 @@ export interface TableProps<T extends object> {
     tableOptions?: Partial<TableOptions<T>>;
     tableView?: TableView;
 }
-export declare const Table: <T extends object>({ className, collapsable, columns, gridTemplateColumns, items, tableOptions, tableView, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends unknown>({ className, collapsable, columns, gridTemplateColumns, items, tableOptions, tableView, }: TableProps<T>) => JSX.Element;

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

@@ -11,6 +11,7 @@ const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
 const breakpoints_1 = require("../../../../theme/common/breakpoints");
 const entities_1 = require("../../../Table/common/entities");
 const tableHead_1 = require("../../../Table/components/TableHead/tableHead");
+const constants_1 = require("../../../Table/features/RowPreview/constants");
 const table_styles_1 = require("../../../Table/table.styles");
 const utils_1 = require("./common/utils");
 const tableBody_1 = require("./components/TableBody/tableBody");
@@ -20,7 +21,7 @@ const Table = ({ className, collapsable = true, columns, gridTemplateColumns, it
     const { table, tableContainer } = tableView || {};
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};
-    const tableInstance = (0, react_table_1.useReactTable)(Object.assign({ columns: (0, utils_1.generateColumnDefinitions)(columns), data: items, enableSorting: false, getCoreRowModel: (0, react_table_1.getCoreRowModel)() }, tableOptions));
+    const tableInstance = (0, react_table_1.useReactTable)(Object.assign({ _features: [constants_1.ROW_PREVIEW], columns: (0, utils_1.generateColumnDefinitions)(columns), data: items, enableSorting: false, getCoreRowModel: (0, react_table_1.getCoreRowModel)() }, tableOptions));
     return (react_1.default.createElement(material_1.TableContainer, { className: className, sx: tableContainerSx },
         react_1.default.createElement(table_styles_1.GridTable, { collapsable: collapsable, gridTemplateColumns: gridTemplateColumns, stickyHeader: rowDirection === entities_1.ROW_DIRECTION.DEFAULT && stickyHeader },
             react_1.default.createElement(tableHead_1.TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -9,7 +9,7 @@ export interface CategoryFilter {
 export interface FiltersProps {
     categoryFilters: CategoryFilter[];
     closeAncestor?: () => void;
-    disabled: boolean;
+    disabled?: boolean;
     onFilter: OnFilterFn;
     trackFilterOpened?: TrackFilterOpenedFunction;
 }

package/lib/components/Index/components/Cell/cell.d.ts

@@ -2,4 +2,7 @@
 export interface CellProps {
     value?: number | string | string[];
 }
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
 export declare const Cell: ({ value }: CellProps) => JSX.Element;

package/lib/components/Index/components/Cell/cell.js

@@ -5,6 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = void 0;
 const react_1 = __importDefault(require("react"));
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
 const Cell = ({ value = "Unspecified" }) => {
     if (typeof value === "string" || typeof value === "number") {
         return react_1.default.createElement("div", null, value);

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.d.ts

@@ -3,4 +3,7 @@ import { TooltipProps as MTooltipProps } from "@mui/material";
 export interface TooltipProps extends MTooltipProps {
     className?: string;
 }
+/**
+ * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
+ */
 export declare const Tooltip: ({ children, className, title, ...props }: TooltipProps) => JSX.Element;

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.js

@@ -53,6 +53,9 @@ const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
         padding: 16,
     },
 };
+/**
+ * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
+ */
 const Tooltip = (_a) => {
     var { children, className, title } = _a, props = __rest(_a, ["children", "className", "title"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
     const [maxHeight, setMaxHeight] = (0, react_1.useState)();

package/lib/components/Index/components/NTag/nTag.d.ts

@@ -4,4 +4,7 @@ export interface NTagProps {
     Tag: ReactElement;
     TooltipTitle: ReactElement;
 }
+/**
+ * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
+ */
 export declare const NTag: ({ className, Tag, TooltipTitle, ...props }: NTagProps) => JSX.Element;

package/lib/components/Index/components/NTag/nTag.js

@@ -17,6 +17,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NTag = void 0;
 const react_1 = __importDefault(require("react"));
 const tooltip_1 = require("./components/Tooltip/tooltip");
+/**
+ * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
+ */
 const NTag = (_a) => {
     var { className, Tag, TooltipTitle } = _a, props = __rest(_a, ["className", "Tag", "TooltipTitle"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
     return (react_1.default.createElement(tooltip_1.Tooltip, Object.assign({ className: className, title: TooltipTitle }, props), Tag));

package/lib/components/Index/components/NTagCell/nTagCell.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="react" />
+import { TypographyProps } from "../../../common/Typography/common/entities";
 export declare type MetadataValue = string;
 export interface NTagCellProps {
     label: string;
+    TypographyProps?: TypographyProps;
     values: MetadataValue[];
 }
-export declare const NTagCell: ({ label, values }: NTagCellProps) => JSX.Element;
+/**
+ * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
+ */
+export declare const NTagCell: ({ label, TypographyProps, values, }: NTagCellProps) => JSX.Element;

package/lib/components/Index/components/NTagCell/nTagCell.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NTagCell = void 0;
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
+const typography_1 = require("../../../../theme/common/typography");
 const nTag_1 = require("../NTag/nTag");
 // Template constants
 const MAX_DISPLAYABLE_VALUES = 1;
@@ -44,9 +45,12 @@ function stringifyMetadataValues(metadataValues) {
 const Tag = (0, react_1.forwardRef)(function Tag(props, ref) {
     return react_1.default.createElement(material_1.Chip, Object.assign({ ref: ref }, props));
 });
-const NTagCell = ({ label, values }) => {
+/**
+ * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
+ */
+const NTagCell = ({ label, TypographyProps, values, }) => {
     const metadataCount = values.length;
     const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
-    return (react_1.default.createElement(react_1.default.Fragment, null, showNTag ? (react_1.default.createElement(nTag_1.NTag, { Tag: react_1.default.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: react_1.default.createElement(material_1.Typography, { display: "block", variant: "text-body-small-400" }, stringifyMetadataValues(values)) })) : (values.map((value, v) => react_1.default.createElement("div", { key: `${value}${v}` }, value)))));
+    return (react_1.default.createElement(react_1.default.Fragment, null, showNTag ? (react_1.default.createElement(nTag_1.NTag, { Tag: react_1.default.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: react_1.default.createElement(material_1.Typography, { display: "block", variant: typography_1.TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (react_1.default.createElement(material_1.Typography, Object.assign({ key: `${value}${v}`, variant: "inherit" }, TypographyProps), value))))));
 };
 exports.NTagCell = NTagCell;

package/lib/components/Layout/components/Outline/common/constants.d.ts

@@ -1,2 +1,2 @@
-import { TabProps as MTabProps } from "@mui/material/Tab/Tab";
+import { TabProps as MTabProps } from "@mui/material";
 export declare const DEFAULT_TAB_VALUE: MTabProps["value"];

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { UrlObjectWithHrefAndQuery } from "../../../../common/entities";
 import { LinkProps } from "../../link";
-export interface ExploreViewLinkProps extends Omit<LinkProps, "copyable" | "noWrap" | "url"> {
+export interface ExploreViewLinkProps extends Omit<LinkProps, "copyable" | "noWrap" | "TypographyProps" | "url"> {
     url: UrlObjectWithHrefAndQuery;
 }
 export declare const ExploreViewLink: ({ className, label, onClick, target, url, }: ExploreViewLinkProps) => JSX.Element;

package/lib/components/Links/components/Link/link.d.ts

@@ -1,5 +1,6 @@
 import { LinkProps as MLinkProps } from "@mui/material";
 import { ReactNode } from "react";
+import { TypographyProps } from "../../../common/Typography/common/entities";
 import { ANCHOR_TARGET, Url } from "../../common/entities";
 export interface LinkProps {
     className?: string;
@@ -8,6 +9,7 @@ export interface LinkProps {
     noWrap?: MLinkProps["noWrap"];
     onClick?: () => void;
     target?: ANCHOR_TARGET;
+    TypographyProps?: TypographyProps;
     url: Url;
 }
-export declare const Link: ({ className, copyable, label, noWrap, onClick, target, url, }: LinkProps) => JSX.Element;
+export declare const Link: ({ className, copyable, label, noWrap, onClick, target, TypographyProps, url, }: LinkProps) => JSX.Element;

package/lib/components/Links/components/Link/link.js

@@ -12,7 +12,7 @@ const copyToClipboard_1 = require("../../../common/CopyToClipboard/copyToClipboa
 const entities_1 = require("../../common/entities");
 const utils_2 = require("../../common/utils");
 const exploreViewLink_1 = require("./components/ExploreViewLink/exploreViewLink");
-const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, url, }) => {
+const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, TypographyProps, url, }) => {
     if ((0, utils_2.isURLObjectWithHrefAndQuery)(url)) {
         /* Internal navigation - explore link */
         return (react_1.default.createElement(exploreViewLink_1.ExploreViewLink, { className: className, label: label, onClick: onClick, target: target, url: url }));
@@ -22,17 +22,17 @@ const Link = ({ className, copyable = false, label, noWrap = false, onClick, tar
             /* Client-side navigation */
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(link_1.default, { href: url, legacyBehavior: true, passHref: true },
-                    react_1.default.createElement(material_1.Link, { className: className, rel: "noopener", noWrap: noWrap, target: target || entities_1.ANCHOR_TARGET.SELF, onClick: onClick }, label)),
+                    react_1.default.createElement(material_1.Link, Object.assign({ className: className, rel: "noopener", noWrap: noWrap, target: target || entities_1.ANCHOR_TARGET.SELF, onClick: onClick }, TypographyProps), label)),
                 copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url })));
         }
         if ((0, utils_1.isValidUrl)(url)) {
             /* External navigation */
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Link, { className: className, href: url, noWrap: noWrap, onClick: onClick, rel: "noopener noreferrer", target: target || entities_1.ANCHOR_TARGET.BLANK }, label),
+                react_1.default.createElement(material_1.Link, Object.assign({ className: className, href: url, noWrap: noWrap, onClick: onClick, rel: "noopener noreferrer", target: target || entities_1.ANCHOR_TARGET.BLANK }, TypographyProps), label),
                 copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url })));
         }
     }
     /* Invalid URL */
-    return react_1.default.createElement(react_1.default.Fragment, null, label);
+    return (react_1.default.createElement(material_1.Typography, Object.assign({ component: "span", variant: "inherit" }, TypographyProps), label));
 };
 exports.Link = Link;

package/lib/components/Table/common/gridTable.styles.js

@@ -21,9 +21,13 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
     display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
   }
 
+  tr {
+    background-color: ${colors_1.white};
+  }
+
   td,
   th {
-    background-color: ${colors_1.white};
+    background-color: inherit;
   }
 
   td,
@@ -39,8 +43,10 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
   }
 
   [id^="grouped-row"] {
+    background-color: ${colors_1.smokeLightest};
+
     td {
-      background-color: ${colors_1.smokeLightest};
+      background-color: inherit;
       grid-column: 1 / -1;
     }
   }

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

@@ -1,7 +1,5 @@
-import { TableSortLabelProps } from "@mui/material/TableSortLabel/TableSortLabel";
-import { Cell, ColumnFiltersState, ColumnSort, InitialTableState, Row, RowData, SortDirection, Table } from "@tanstack/react-table";
-import { Column } from "@tanstack/table-core";
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import { TableSortLabelProps } from "@mui/material";
+import { Cell, Column, ColumnFiltersState, ColumnSort, InitialTableState, PaginationState, Row, RowData, SortDirection, Table, VisibilityState } from "@tanstack/react-table";
 import { SelectCategory } from "../../../common/entities";
 import { ColumnConfig } from "../../../config/entities";
 import { ExploreMode } from "../../../hooks/useExploreMode";
@@ -13,7 +11,7 @@ declare type CountByTerms = Map<any, number>;
 /**
  * Pinned cell and pinned cell index tuple.
  */
-declare type PinnedCell<T> = [Cell<T, unknown>, number];
+declare type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
 /**
  * Returns true if the row should be included in the filtered rows.
  * The row will be included if:
@@ -25,14 +23,14 @@ declare type PinnedCell<T> = [Cell<T, unknown>, number];
  * @param filterValue - Filter value or values.
  * @returns True if the row should be included in the filtered rows.
  */
-export declare function arrIncludesSome<T>(row: Row<T>, columnId: string, filterValue: unknown[]): boolean;
+export declare function arrIncludesSome<T extends RowData>(row: Row<T>, columnId: string, filterValue: unknown[]): boolean;
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.
  * @param columnFilters - Column filters state.
  * @returns Array of category views objects.
  */
-export declare function buildCategoryViews<T>(columns: Column<T>[], columnFilters: ColumnFiltersState): SelectCategory[];
+export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): SelectCategory[];
 /**
  * Returns the column sort direction.
  * @param sortDirection - Column sort direction.
@@ -44,13 +42,13 @@ export declare function getColumnSortDirection(sortDirection: false | SortDirect
  * @param rows - Table rows.
  * @returns filtered entity results as a blob.
  */
-export declare function generateDownloadBlob<T>(rows: Row<T>[]): Blob | undefined;
+export declare function generateDownloadBlob<T extends RowData>(rows: Row<T>[]): Blob | undefined;
 /**
  * Returns edit column checkbox menu options.
  * @param table - Table.
  * @returns a list of edit column options.
  */
-export declare function getEditColumnOptions<T>(table: Table<T>): CheckboxMenuListItem[];
+export declare function getEditColumnOptions<T extends RowData>(table: Table<T>): CheckboxMenuListItem[];
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -65,7 +63,7 @@ export declare function getFacetedUniqueValuesWithArrayValues<T extends RowData>
  * @param columns - Table columns.
  * @returns string value for the css property grid-template-columns.
  */
-export declare function getGridTemplateColumns<T>(columns: Column<T>[]): string;
+export declare function getGridTemplateColumns<T extends RowData>(columns: Column<T>[]): string;
 /**
  * Returns initial table state.
  * @param columns - Column configuration.
@@ -84,19 +82,26 @@ export declare function getInitialTableStateSorting(defaultSort: ColumnSort | un
  * @param row - Row.
  * @returns pinned cell and index tuple.
  */
-export declare function getPinnedCellIndex<T>(row: Row<T>): PinnedCell<T>;
+export declare function getPinnedCellIndex<T extends RowData>(row: Row<T>): PinnedCell<T>;
 /**
  * Returns table sort label props.
  * @param column - Table column.
  * @returns table sort label props.
  */
-export declare function getTableSortLabelProps<T>(column: Column<T>): TableSortLabelProps;
+export declare function getTableSortLabelProps<T extends RowData>(column: Column<T>): TableSortLabelProps;
+/**
+ * Returns table state pagination.
+ * @param pageIndex - Explore state page index.
+ * @param pageSize - Explore state page size.
+ * @returns table state pagination.
+ */
+export declare function getTableStatePagination(pageIndex: number | undefined, pageSize: number): PaginationState;
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.
  * @returns true if a row is selected.
  */
-export declare function isAnyRowSelected<T>(table: Table<T>): boolean;
+export declare function isAnyRowSelected<T extends RowData>(table: Table<T>): boolean;
 /**
  * Returns true if client-side filtering is enabled.
  * @param exploreMode - Explore mode.
@@ -108,7 +113,7 @@ export declare function isClientFilteringEnabled(exploreMode: ExploreMode): bool
  * @param tableInstance - Table instance.
  * @returns true if the collapsable row is disabled.
  */
-export declare function isCollapsableRowDisabled<T>(tableInstance: Table<T>): boolean;
+export declare function isCollapsableRowDisabled<T extends RowData>(tableInstance: Table<T>): boolean;
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialTableColumnVisibility = exports.sortingFn = exports.isColumnSortActive = exports.isCollapsableRowDisabled = exports.isClientFilteringEnabled = exports.isAnyRowSelected = exports.getTableSortLabelProps = exports.getPinnedCellIndex = exports.getInitialTableStateSorting = exports.getInitialState = exports.getGridTemplateColumns = exports.getFacetedUniqueValuesWithArrayValues = exports.getEditColumnOptions = exports.generateDownloadBlob = exports.getColumnSortDirection = exports.buildCategoryViews = exports.arrIncludesSome = void 0;
+exports.getInitialTableColumnVisibility = exports.sortingFn = exports.isColumnSortActive = exports.isCollapsableRowDisabled = exports.isClientFilteringEnabled = exports.isAnyRowSelected = exports.getTableStatePagination = exports.getTableSortLabelProps = exports.getPinnedCellIndex = exports.getInitialTableStateSorting = exports.getInitialState = exports.getGridTemplateColumns = exports.getFacetedUniqueValuesWithArrayValues = exports.getEditColumnOptions = exports.generateDownloadBlob = exports.getColumnSortDirection = exports.buildCategoryViews = exports.arrIncludesSome = void 0;
 const SouthRounded_1 = __importDefault(require("@mui/icons-material/SouthRounded"));
 const react_table_1 = require("@tanstack/react-table");
 const useExploreMode_1 = require("../../../hooks/useExploreMode");
@@ -140,19 +140,21 @@ exports.getEditColumnOptions = getEditColumnOptions;
  * @returns Unique category term counts keyed by category terms.
  */
 function getFacetedUniqueValuesWithArrayValues() {
-    return (table, columnId) => (0, react_table_1.memo)(() => [table.getColumn(columnId).getFacetedRowModel()], (facetedRowModel) => {
+    return (table, columnId) => (0, react_table_1.memo)(() => { var _a; return [(_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.getFacetedRowModel()]; }, (facetedRowModel) => {
         var _a;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This type matches react table getFacetedUniqueValues return type.
         const facetedUniqueValues = new Map();
-        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
-            const value = (_a = facetedRowModel.flatRows[i]) === null || _a === void 0 ? void 0 : _a.getValue(columnId);
-            if (Array.isArray(value)) {
-                value.map((val) => {
-                    updateCountByTerms(facetedUniqueValues, val);
-                });
-            }
-            else {
-                updateCountByTerms(facetedUniqueValues, value);
+        if (facetedRowModel) {
+            for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+                const value = (_a = facetedRowModel === null || facetedRowModel === void 0 ? void 0 : facetedRowModel.flatRows[i]) === null || _a === void 0 ? void 0 : _a.getValue(columnId);
+                if (Array.isArray(value)) {
+                    value.map((val) => {
+                        updateCountByTerms(facetedUniqueValues, val);
+                    });
+                }
+                else {
+                    updateCountByTerms(facetedUniqueValues, value);
+                }
             }
         }
         return facetedUniqueValues;
@@ -244,6 +246,19 @@ function getTableSortLabelProps(column) {
     };
 }
 exports.getTableSortLabelProps = getTableSortLabelProps;
+/**
+ * Returns table state pagination.
+ * @param pageIndex - Explore state page index.
+ * @param pageSize - Explore state page size.
+ * @returns table state pagination.
+ */
+function getTableStatePagination(pageIndex = 0, pageSize) {
+    return {
+        pageIndex,
+        pageSize,
+    };
+}
+exports.getTableStatePagination = getTableStatePagination;
 /**
  * Returns the list of visible table headers.
  * @param rows - Table rows.

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Row } from "@tanstack/react-table";
-export interface DownloadEntityResultsProps<T> {
+import { Row, RowData } from "@tanstack/react-table";
+export interface DownloadEntityResultsProps<T extends RowData> {
     entityName: string;
     rows: Row<T>[];
 }
-export declare const DownloadEntityResults: <T extends object>({ entityName, rows, }: DownloadEntityResultsProps<T>) => JSX.Element;
+export declare const DownloadEntityResults: <T extends unknown>({ entityName, rows, }: DownloadEntityResultsProps<T>) => JSX.Element;