@databiosphere/findable-ui 3.1.0 → 4.0.0

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

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

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

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,10 +20,11 @@ const paper_styles_1 = require("../../../common/Paper/paper.styles");
 const noResults_1 = require("../../../NoResults/noResults");
 const tableToolbar_styles_1 = require("../../../Table/components/TableToolbar/tableToolbar.styles");
 const table_1 = require("../Table/table");
-const DetailViewTable = ({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper = paper_styles_1.RoundedPaper, tools, }) => {
+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 },
         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, { columns: columns, gridTemplateColumns: gridTemplateColumns, items: items })))) : (react_1.default.createElement(noResults_1.NoResults, { Paper: Paper, title: noResultsTitle }));
+            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 }));
 };
 exports.DetailViewTable = DetailViewTable;

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

@@ -27,14 +27,17 @@ 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 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}` },
-            react_1.default.createElement(collapsableCell_1.CollapsableCell, { row: row })));
+            react_1.default.createElement(collapsableCell_1.CollapsableCell, { isDisabled: (0, utils_1.isCollapsableRowDisabled)(tableInstance), row: row })));
     })));
 };
 exports.CollapsableRows = CollapsableRows;

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

@@ -5,4 +5,4 @@ export interface TableRowsProps<T> {
     tableInstance: Table<T>;
     tableView?: TableView;
 }
-export declare const TableRows: <T extends object>({ tableInstance, tableView, }: TableRowsProps<T>) => JSX.Element;
+export declare const TableRows: <T extends unknown>({ tableInstance, tableView, }: TableRowsProps<T>) => JSX.Element;

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

@@ -27,15 +27,34 @@ exports.TableRows = void 0;
 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 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, { key: row.id }, row.getVisibleCells().map((cell) => {
-            return (react_1.default.createElement(material_1.TableCell, { key: cell.id, size: tableCellSize }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+        return (react_1.default.createElement(material_1.TableRow, { id: getRowId(row), key: row.id }, row.getVisibleCells().map((cell) => {
+            if (cell.getIsAggregated())
+                return null; // Display of aggregated cells is currently not supported.
+            if (cell.getIsPlaceholder())
+                return null; // Display of placeholder cells is currently not supported.
+            return (react_1.default.createElement(material_1.TableCell, { key: cell.id, padding: (0, utils_1.getTableCellPadding)(cell.column.id), size: tableCellSize }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 };
 exports.TableRows = TableRows;
+/**
+ * Returns identifier for a row.
+ * @param row - Row.
+ * @returns row identifier.
+ */
+function getRowId(row) {
+    const { depth, getIsGrouped, id } = row;
+    if (getIsGrouped()) {
+        return `grouped-row-${id}`;
+    }
+    if (depth > 0) {
+        return `sub-row-${id}`;
+    }
+}

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

@@ -1,6 +1,7 @@
 /// <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";
 export interface TableView {
     table?: Partial<MTableProps>;
     tableCell?: Partial<MTableCellProps>;
@@ -12,6 +13,7 @@ export interface TableProps<T extends object> {
     columns: ColumnDef<T>[];
     gridTemplateColumns: string;
     items: T[];
+    tableOptions?: Partial<TableOptions<T>>;
     tableView?: TableView;
 }
-export declare const Table: <T extends object>({ className, collapsable, columns, gridTemplateColumns, items, tableView, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends object>({ className, collapsable, columns, gridTemplateColumns, items, tableOptions, tableView, }: TableProps<T>) => JSX.Element;

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

@@ -10,21 +10,17 @@ const react_1 = __importDefault(require("react"));
 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 table_styles_1 = require("../../../Table/table.styles");
 const utils_1 = require("./common/utils");
 const tableBody_1 = require("./components/TableBody/tableBody");
-const tableHead_1 = require("./components/TableHead/tableHead");
-const Table = ({ className, collapsable = true, columns, gridTemplateColumns, items, tableView, }) => {
+const Table = ({ className, collapsable = true, columns, gridTemplateColumns, items, tableOptions, tableView, }) => {
     const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.TABLET);
     const rowDirection = collapsable && tabletDown ? entities_1.ROW_DIRECTION.VERTICAL : entities_1.ROW_DIRECTION.DEFAULT;
     const { table, tableContainer } = tableView || {};
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};
-    const tableInstance = (0, react_table_1.useReactTable)({
-        columns: (0, utils_1.generateColumnDefinitions)(columns),
-        data: items,
-        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
-    });
+    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));
     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/Links/common/constants.d.ts

@@ -0,0 +1 @@
+export declare const URL_OBJECT_KEYS: string[];

package/lib/components/Links/common/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.URL_OBJECT_KEYS = void 0;
+exports.URL_OBJECT_KEYS = ["href", "query"];

package/lib/components/Links/common/entities.d.ts

@@ -1,4 +1,12 @@
+/// <reference types="node" />
+import { UrlObject } from "url";
 export declare enum ANCHOR_TARGET {
     BLANK = "_blank",
     SELF = "_self"
 }
+export declare type StrictUrlObject = Omit<UrlObject, "href" | "query"> & {
+    href: string;
+    query: string;
+};
+export declare type Url = string | UrlObjectWithHrefAndQuery;
+export declare type UrlObjectWithHrefAndQuery = Pick<StrictUrlObject, "href" | "query">;

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

@@ -1,6 +1,19 @@
+import { Url, UrlObjectWithHrefAndQuery } from "./entities";
 /**
  * Returns true if the given link is an internal link.
  * @param link - Link.
  * @returns true if the given link is an internal link.
  */
 export declare function isClientSideNavigation(link: string): boolean;
+/**
+ * Returns true if the given url is a URL object with href and query.
+ * @param value - URL.
+ * @returns true if the given url is a URL object with href and query.
+ */
+export declare function isURLObjectWithHrefAndQuery(value: Url): value is UrlObjectWithHrefAndQuery;
+/**
+ * Returns true if the given url is a string.
+ * @param value - URL.
+ * @returns true if the given url is a string.
+ */
+export declare function isURLString(value: Url): value is string;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isClientSideNavigation = void 0;
+exports.isURLString = exports.isURLObjectWithHrefAndQuery = exports.isClientSideNavigation = void 0;
+const constants_1 = require("./constants");
 /**
  * Returns true if the given link is an internal link.
  * @param link - Link.
@@ -10,3 +11,22 @@ function isClientSideNavigation(link) {
     return /^\/(?!\/)/.test(link);
 }
 exports.isClientSideNavigation = isClientSideNavigation;
+/**
+ * Returns true if the given url is a URL object with href and query.
+ * @param value - URL.
+ * @returns true if the given url is a URL object with href and query.
+ */
+function isURLObjectWithHrefAndQuery(value) {
+    return (typeof value !== "string" &&
+        Object.entries(value).every(([key, value]) => constants_1.URL_OBJECT_KEYS.includes(key) && !!value));
+}
+exports.isURLObjectWithHrefAndQuery = isURLObjectWithHrefAndQuery;
+/**
+ * Returns true if the given url is a string.
+ * @param value - URL.
+ * @returns true if the given url is a string.
+ */
+function isURLString(value) {
+    return typeof value === "string";
+}
+exports.isURLString = isURLString;

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

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

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -0,0 +1,148 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExploreViewLink = void 0;
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importStar(require("react"));
+const useExploreState_1 = require("../../../../../../hooks/useExploreState");
+const exploreState_1 = require("../../../../../../providers/exploreState");
+const entities_1 = require("../../../../common/entities");
+const PARAM_FILTER = "filter";
+const ExploreViewLink = ({ className, label, onClick, target = entities_1.ANCHOR_TARGET.SELF, url, }) => {
+    const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
+    if (!isValidExploreURL(url, exploreState)) {
+        throwError(url);
+    }
+    const onNavigate = (0, react_1.useCallback)(() => {
+        const entityListType = getEntityListType(url.href);
+        const filters = getSelectedFilters(url.query);
+        exploreDispatch({
+            payload: { entityListType, filters },
+            type: exploreState_1.ExploreActionKind.UpdateEntityFilters,
+        });
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [exploreDispatch, onClick, url]);
+    return (react_1.default.createElement(link_1.default, { className: className, href: url.href, onClick: onNavigate, rel: "noopener", target: target }, label));
+};
+exports.ExploreViewLink = ExploreViewLink;
+/**
+ * Returns the entity list type "entityListType" inferred from the given href.
+ * @param href - Href.
+ * @returns entity list type.
+ */
+function getEntityListType(href) {
+    return href.substring(1);
+}
+/**
+ * Returns the selected filters from the given query.
+ * @param query - Query.
+ * @returns selected filters.
+ */
+function getSelectedFilters(query) {
+    const decodedQuery = decodeURIComponent(query);
+    const parsedQuery = JSON.parse(decodedQuery);
+    return parsedQuery[PARAM_FILTER];
+}
+/**
+ * Returns true if the given value is a SelectedFilter.
+ * @param value - Value.
+ * @returns true if the given value is a SelectedFilter.
+ */
+function isSelectedFilter(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "categoryKey" in value &&
+        "value" in value);
+}
+/**
+ * Returns true if the given query string is a valid JSON string.
+ * @param query - Query string.
+ * @returns true if the given query string is a valid JSON string.
+ */
+function isValidJsonString(query) {
+    try {
+        JSON.parse(query);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+}
+/**
+ * Returns true if the given explore link is valid.
+ * @param url - Explore link URL.
+ * @param exploreState - Explore state.
+ * @returns true if the given explore link is valid.
+ */
+function isValidExploreURL(url, exploreState) {
+    const validHref = isValidHref(url, exploreState);
+    const validQuery = isValidQuery(url);
+    return validHref && validQuery;
+}
+/**
+ * Returns true if the given href is a configured key in the explore state's entityPageState.
+ * @param url - Explore link URL.
+ * @param exploreState - Explore state.
+ * @returns true if the given href is configured in the explore state.
+ */
+function isValidHref(url, exploreState) {
+    const { entityPageState } = exploreState;
+    const { href } = url;
+    return href.startsWith("/") && href.substring(1) in entityPageState;
+}
+/**
+ * Returns true if the given explore query is valid.
+ * @param url - Explore link URL.
+ * @returns true if the given explore query is valid.
+ */
+function isValidQuery(url) {
+    const { query } = url;
+    // Decode and parse the query.
+    const decodedQuery = decodeURIComponent(query);
+    // Query should be a valid JSON string.
+    if (isValidJsonString(decodedQuery)) {
+        const parsedQuery = JSON.parse(decodedQuery);
+        // Query should contain "filter" key.
+        if (PARAM_FILTER in parsedQuery) {
+            const filters = parsedQuery[PARAM_FILTER];
+            // Filter should be an array.
+            if (Array.isArray(filters)) {
+                // Filter should contain only SelectedFilter objects.
+                return filters.every(isSelectedFilter);
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Throws an error with the given URL object.
+ * @param url - URL object.
+ */
+function throwError(url) {
+    throw new Error(`Invalid explore URL href or query: ${url.href}, ${url.query}`);
+}

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

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

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

@@ -11,12 +11,28 @@ const utils_1 = require("../../../../common/utils");
 const copyToClipboard_1 = require("../../../common/CopyToClipboard/copyToClipboard");
 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, }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null, (0, utils_2.isClientSideNavigation)(url) ? (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)),
-        copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url }))) : (0, utils_1.isValidUrl)(url) ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Link, { className: className, href: url, rel: "noopener noreferrer", noWrap: noWrap, target: target || entities_1.ANCHOR_TARGET.BLANK, onClick: onClick }, label),
-        copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url }))) : (label)));
+    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 }));
+    }
+    if ((0, utils_2.isURLString)(url)) {
+        if ((0, utils_2.isClientSideNavigation)(url)) {
+            /* 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)),
+                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),
+                copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url })));
+        }
+    }
+    /* Invalid URL */
+    return react_1.default.createElement(react_1.default.Fragment, null, label);
 };
 exports.Link = Link;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTable = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const material_1 = require("@mui/material");
+const colors_1 = require("../../../styles/common/mixins/colors");
 exports.GridTable = (0, styled_1.default)(material_1.Table, {
     shouldForwardProp: (prop) => prop !== "gridTemplateColumns",
 }) `
@@ -22,7 +23,7 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
 
   td,
   th {
-    background-color: ${({ theme }) => theme.palette.common.white};
+    background-color: ${colors_1.white};
   }
 
   td,
@@ -36,4 +37,11 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
+
+  [id^="grouped-row"] {
+    td {
+      background-color: ${colors_1.smokeLightest};
+      grid-column: 1 / -1;
+    }
+  }
 `;

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

@@ -103,6 +103,12 @@ export declare function isAnyRowSelected<T>(table: Table<T>): boolean;
  * @returns true if client-side filtering is enabled.
  */
 export declare function isClientFilteringEnabled(exploreMode: ExploreMode): boolean;
+/**
+ * Returns true if the collapsable row is disabled; i.e. only one column is visible.
+ * @param tableInstance - Table instance.
+ * @returns true if the collapsable row is disabled.
+ */
+export declare function isCollapsableRowDisabled<T>(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.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.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");
@@ -283,6 +283,15 @@ function isClientFilteringEnabled(exploreMode) {
         exploreMode === useExploreMode_1.EXPLORE_MODE.SS_FETCH_CS_FILTERING);
 }
 exports.isClientFilteringEnabled = isClientFilteringEnabled;
+/**
+ * Returns true if the collapsable row is disabled; i.e. only one column is visible.
+ * @param tableInstance - Table instance.
+ * @returns true if the collapsable row is disabled.
+ */
+function isCollapsableRowDisabled(tableInstance) {
+    return tableInstance.getVisibleLeafColumns().length === 1;
+}
+exports.isCollapsableRowDisabled = isCollapsableRowDisabled;
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { Row } from "@tanstack/react-table";
-export interface CollapsableCellProps<T> {
+import { Row, RowData } from "@tanstack/react-table";
+export interface CollapsableCellProps<T extends RowData> {
+    isDisabled?: boolean;
     row: Row<T>;
 }
-export declare const CollapsableCell: <T extends object>({ row, }: CollapsableCellProps<T>) => JSX.Element;
+export declare const CollapsableCell: <T extends unknown>({ isDisabled, row, }: CollapsableCellProps<T>) => JSX.Element;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.js

@@ -31,7 +31,7 @@ const typography_1 = require("../../../../../../theme/common/typography");
 const unfoldMoreIcon_1 = require("../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon");
 const utils_1 = require("../../../../common/utils");
 const collapsableCell_styles_1 = require("./collapsableCell.styles");
-const CollapsableCell = ({ row, }) => {
+const CollapsableCell = ({ isDisabled = false, row, }) => {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const [pinnedCell, pinnedIndex] = (0, utils_1.getPinnedCellIndex)(row);
     // Toggles open/close table cell.
@@ -41,11 +41,15 @@ const CollapsableCell = ({ row, }) => {
     return (react_1.default.createElement(collapsableCell_styles_1.TableCell, { isExpanded: isExpanded },
         react_1.default.createElement(collapsableCell_styles_1.PinnedCell, null,
             (0, react_table_1.flexRender)(pinnedCell.column.columnDef.cell, pinnedCell.getContext()),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", edge: "end", onClick: onToggleExpanded, size: "large" },
+            react_1.default.createElement(material_1.IconButton, { color: "ink", disabled: isDisabled, edge: "end", onClick: onToggleExpanded, size: "large" },
                 react_1.default.createElement(unfoldMoreIcon_1.UnfoldMoreIcon, { fontSize: "small" }))),
         react_1.default.createElement(material_1.Collapse, { in: isExpanded },
-            react_1.default.createElement(collapsableCell_styles_1.CollapsedContents, null, row.getVisibleCells().map((cell, i) => {
+            react_1.default.createElement(collapsableCell_styles_1.CollapsedContents, null, getRowVisibleCells(row).map((cell, i) => {
                 var _a;
+                if (cell.getIsAggregated())
+                    return null; // Display of aggregated cells is currently not supported.
+                if (cell.getIsPlaceholder())
+                    return null; // Display of placeholder cells is currently not supported.
                 const header = (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.header;
                 return (i !== pinnedIndex && (react_1.default.createElement(collapsableCell_styles_1.Content, { key: cell.id },
                     header && (react_1.default.createElement(material_1.Typography, { component: "div", color: "ink.light", variant: typography_1.TEXT_BODY_400_2_LINES }, header)),
@@ -53,3 +57,17 @@ const CollapsableCell = ({ row, }) => {
             })))));
 };
 exports.CollapsableCell = CollapsableCell;
+/**
+ * Returns row or sub row visible cells.
+ * @param row - Row.
+ * @returns row or sub row visible cells.
+ */
+function getRowVisibleCells(row) {
+    if (row.getIsGrouped()) {
+        return row
+            .getLeafRows()
+            .map((leafRow) => leafRow.getVisibleCells())
+            .flat();
+    }
+    return row.getVisibleCells();
+}

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.js

@@ -48,6 +48,10 @@ exports.PinnedCell = styled_1.default.div `
   justify-content: space-between;
   padding: 12px 16px;
   word-break: break-word;
+
+  .MuiIconButton-root.Mui-disabled {
+    opacity: 0.5;
+  }
 `;
 exports.CollapsedContents = styled_1.default.div `
   ${fonts_1.textBody4002Lines};

package/lib/components/Table/components/TableHead/tableHead.js

@@ -33,6 +33,9 @@ const utils_2 = require("../TableCell/common/utils");
 const TableHead = ({ rowDirection, tableInstance, }) => {
     return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
         tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
-            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id, padding: (0, utils_2.getTableCellPadding)(header.id) }, header.column.getCanSort() ? (react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))) : ((0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext())))))))))));
+            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => {
+                const { column: { columnDef: { meta: { enableSortingInteraction = true } = {}, }, }, } = header;
+                return header.column.getIsGrouped() ? null : (react_1.default.createElement(material_1.TableCell, { key: header.id, padding: (0, utils_2.getTableCellPadding)(header.id) }, header.column.getCanSort() && enableSortingInteraction ? (react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))) : ((0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))));
+            })))))));
 };
 exports.TableHead = TableHead;

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsableRows = void 0;
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
+const utils_1 = require("../../../../common/utils");
 const collapsableCell_1 = require("../../../TableCell/components/CollapsableCell/collapsableCell");
 const CollapsableRows = ({ tableInstance, virtualizer, }) => {
     const { getRowModel } = tableInstance;
@@ -34,7 +35,7 @@ const CollapsableRows = ({ tableInstance, virtualizer, }) => {
     return (react_1.default.createElement(react_1.Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
         return (react_1.default.createElement(material_1.TableRow, { key: row.id, "data-index": virtualRow.index, ref: virtualizer.measureElement },
-            react_1.default.createElement(collapsableCell_1.CollapsableCell, { row: row })));
+            react_1.default.createElement(collapsableCell_1.CollapsableCell, { isDisabled: (0, utils_1.isCollapsableRowDisabled)(tableInstance), row: row })));
     })));
 };
 exports.CollapsableRows = CollapsableRows;

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

@@ -14,11 +14,7 @@ function buildBaseColumnDef(baseColumnConfig) {
         enableSorting: !disableSorting,
         header,
         id,
-        meta: {
-            columnPinned,
-            header: meta ? meta.header : header,
-            width,
-        },
+        meta: Object.assign(Object.assign({}, meta), { columnPinned, header: meta ? meta.header : header, width }),
     };
 }
 exports.buildBaseColumnDef = buildBaseColumnDef;

package/lib/components/common/CustomIcon/components/AddLinkIcon/addLinkIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CustomSVGIconProps } from "../../common/entities";
+export declare const AddLinkIcon: ({ fontSize, viewBox, ...props }: CustomSVGIconProps) => JSX.Element;