@databiosphere/findable-ui 38.1.1 → 38.3.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "38.1.1"
+  ".": "38.3.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [38.3.0](https://github.com/DataBiosphere/findable-ui/compare/v38.2.0...v38.3.0) (2025-07-22)
+
+
+### Features
+
+* add table row expansion to table components ([#569](https://github.com/DataBiosphere/findable-ui/issues/569)) ([#570](https://github.com/DataBiosphere/findable-ui/issues/570)) ([d23c5b8](https://github.com/DataBiosphere/findable-ui/commit/d23c5b8c091a899295a3005ff80d7cd297949033))
+
+## [38.2.0](https://github.com/DataBiosphere/findable-ui/compare/v38.1.1...v38.2.0) (2025-07-11)
+
+
+### Features
+
+* add 'introduction' section to data dictionary ([#566](https://github.com/DataBiosphere/findable-ui/issues/566)) ([#567](https://github.com/DataBiosphere/findable-ui/issues/567)) ([5aeb758](https://github.com/DataBiosphere/findable-ui/commit/5aeb758792532a78fa4ec71dc0f7b3ad8c80c376))
+
+
+### Bug Fixes
+
+* align range filter toggle button styles with design ([#563](https://github.com/DataBiosphere/findable-ui/issues/563)) ([#564](https://github.com/DataBiosphere/findable-ui/issues/564)) ([1cc1ffd](https://github.com/DataBiosphere/findable-ui/commit/1cc1ffd88ae3b2f436717b494e425614412cface))
+
 ## [38.1.1](https://github.com/DataBiosphere/findable-ui/compare/v38.1.0...v38.1.1) (2025-07-09)
 
 

package/lib/components/DataDictionary/components/Description/description.d.ts

@@ -0,0 +1,2 @@
+import { DescriptionProps } from "./types";
+export declare const Description: ({ description, }: DescriptionProps) => JSX.Element | null;

package/lib/components/DataDictionary/components/Description/description.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledMarkdownRenderer, StyledRoundedPaper, } from "./description.styles";
+export const Description = ({ description, }) => {
+    if (!description)
+        return null;
+    return (React.createElement(StyledRoundedPaper, { elevation: 0 },
+        React.createElement(StyledMarkdownRenderer, { value: description })));
+};

package/lib/components/DataDictionary/components/Description/description.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledRoundedPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & 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;
+}, "style" | "className" | "classes" | "children" | "sx" | "elevation" | "square" | "variant"> & {
+    component?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledMarkdownRenderer: import("@emotion/styled").StyledComponent<import("../../../MarkdownRenderer/types").MarkdownRendererProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Description/description.styles.js

@@ -0,0 +1,51 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { mediaTabletDown, mediaTabletUp, } from "../../../../styles/common/mixins/breakpoints";
+import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  padding: 20px;
+
+  ${mediaTabletDown} {
+    padding: 20px 16px;
+  }
+`;
+export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  h2 {
+    ${textHeadingSmall};
+    font-size: 18px;
+    line-height: 26px;
+
+    ${mediaTabletUp} {
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

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

@@ -0,0 +1,3 @@
+export interface DescriptionProps {
+    description?: string;
+}

package/lib/components/DataDictionary/components/Description/types.js

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

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.js

@@ -4,6 +4,8 @@ import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
 export const Layout = styled("div") `
+  display: grid;
+  gap: 16px;
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;

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

@@ -1,2 +1,2 @@
 import { ExpandedOptions, RowData } from "@tanstack/react-table";
-export declare const EXPANDED_OPTIONS: Pick<ExpandedOptions<RowData>, "enableExpanding" | "getExpandedRowModel">;
+export declare const EXPANDED_OPTIONS: Pick<ExpandedOptions<RowData>, "enableExpanding" | "getExpandedRowModel" | "getRowCanExpand">;

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

@@ -2,4 +2,5 @@ import { getExpandedRowModel, } from "@tanstack/react-table";
 export const EXPANDED_OPTIONS = {
     enableExpanding: true,
     getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand: () => true,
 };

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,6 +1,7 @@
 import { Fade } from "@mui/material";
 import React from "react";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -17,7 +18,7 @@ import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
 import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
 export const DataDictionary = ({ className, dictionary, EntitiesLayout = DefaultEntitiesLayout, FiltersLayout = DefaultFiltersLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
     // Get dictionary configuration.
-    const { classes, tableOptions, title } = useDataDictionaryConfig(dictionary);
+    const { classes, description, tableOptions, title } = useDataDictionaryConfig(dictionary);
     // Layout measurements.
     // Get header and footer dimensions.
     const { spacing } = useLayoutSpacing();
@@ -40,5 +41,6 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
                 React.createElement(ColumnFilterTags, { table: table })),
             React.createElement(Fade, { in: dimensions.height > 0 },
                 React.createElement(EntitiesLayout, { spacing: entitiesSpacing },
+                    React.createElement(Description, { description: description }),
                     React.createElement(Entities, { spacing: entitiesSpacing, table: table }))))));
 };

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

@@ -20,6 +20,7 @@ export const useDataDictionaryConfig = (dictionary) => {
         // exists above and would have thrown an error if undefined.
         return {
             classes: dataDictionaryConfig.dataDictionary.classes,
+            description: dataDictionaryConfig.dataDictionary.description,
             tableOptions: dataDictionaryConfig.tableOptions,
             title: dataDictionaryConfig.dataDictionary.title,
         };

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

@@ -2,6 +2,7 @@ import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute, Class } from "../../../../common/entities";
 export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
     classes: Class<T>[];
+    description?: string;
     tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
     title: string;
 }

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

@@ -2,6 +2,7 @@ import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { getTableCellAlign, getTableCellPadding, } from "../../../../../Table/components/TableCell/common/utils";
+import { handleToggleExpanded } from "../../../../../Table/components/TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
@@ -9,7 +10,7 @@ export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) =>
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
-        return (React.createElement(StyledTableRow, { key: row.id, isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview() }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { key: row.id, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Filter/components/FilterRange/filterRange.styles.js

@@ -12,6 +12,7 @@ export const StyledForm = styled("form") `
 
     .MuiToggleButton-root {
       color: ${PALETTE.INK_LIGHT};
+      padding: 8px 12px;
       text-transform: capitalize;
 
       &.Mui-selected {

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

@@ -15,12 +15,12 @@ export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TAR
     const filters = getSelectedFilters(url.query);
     const grouping = getGrouping(url.query);
     const sorting = getSorting(url.query);
-    return (React.createElement(Link, { className: className, href: url.href, onClick: () => {
+    return (React.createElement(Link, { className: className, href: url.href, onClick: (e) => {
             exploreDispatch({
                 payload: { entityListType, filters, grouping, sorting },
                 type: ExploreActionKind.UpdateEntityFilters,
             });
-            onClick?.();
+            onClick?.(e);
         }, rel: REL_ATTRIBUTE.NO_OPENER, target: target }, label));
 };
 /**

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

@@ -6,7 +6,6 @@ import { ANCHOR_TARGET, Url } from "../../common/entities";
 export interface LinkProps extends BaseComponentProps, Omit<MLinkProps, "children" | "component"> {
     copyable?: boolean;
     label: ReactNode;
-    onClick?: () => void;
     target?: ANCHOR_TARGET;
     TypographyProps?: TypographyProps;
     url: Url;

package/lib/components/MarkdownRenderer/components/Anchor/anchor.js

@@ -17,5 +17,10 @@ import { Link } from "../../../Links/components/Link/link";
  * Note: This component currently does not support these excluded attributes.
  */
 export const Anchor = (props) => {
-    return (React.createElement(Link, { className: props.className, label: props.children, url: props.href || "" }));
+    return (React.createElement(Link, { className: props.className, label: props.children, 
+        /*
+         * Prevents click events from bubbling up to parent components
+         * (such as CardActionArea or Accordion) when the link is activated.
+         */
+        onClick: (e) => e.stopPropagation(), url: props.href || "" }));
 };

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.js

@@ -17,5 +17,10 @@ export const LinkCell = ({ className, getValue, }) => {
     if (!isValid)
         return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INHERIT, component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...linkProps }, children));
     // If the href is valid, return a Link component.
-    return (React.createElement(MLink, { className: className, color: color, component: getComponent(href, isClientSide), href: href, rel: getRelAttribute(rel, isClientSide), target: getTargetAttribute(target, isClientSide), underline: underline, ...linkProps }, children));
+    return (React.createElement(MLink, { className: className, color: color, component: getComponent(href, isClientSide), href: href, 
+        /*
+         * Prevents click events from bubbling up to parent components
+         * (such as CardActionArea or Accordion) when the link is activated.
+         */
+        onClick: (e) => e.stopPropagation(), rel: getRelAttribute(rel, isClientSide), target: getTargetAttribute(target, isClientSide), underline: underline, ...linkProps }, children));
 };

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -4,5 +4,10 @@ import { CheckedIcon } from "../../../../../common/CustomIcon/components/Checked
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 export const RowSelectionCell = ({ row, }) => {
     const { getIsSelected, getToggleSelectedHandler } = row;
-    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), onChange: getToggleSelectedHandler() }));
+    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), 
+        /*
+         * Prevents click events from bubbling up to parent components
+         * (such as CardActionArea or Accordion) when the checkbox is activated.
+         */
+        onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }));
 };

package/lib/components/Table/components/TableFeatures/RowExpanding/utils.d.ts

@@ -0,0 +1,10 @@
+import { Row, RowData } from "@tanstack/react-table";
+/**
+ * Handles toggling the expanded state of a row.
+ * Rows can not be expanded if:
+ * - the row can not be expanded.
+ * - the row is grouped (expanded rows are not supported on grouped rows).
+ * - the user is selecting text.
+ * @param row - Row.
+ */
+export declare function handleToggleExpanded<T extends RowData>(row: Row<T>): void;

package/lib/components/Table/components/TableFeatures/RowExpanding/utils.js

@@ -0,0 +1,22 @@
+/**
+ * Handles toggling the expanded state of a row.
+ * Rows can not be expanded if:
+ * - the row can not be expanded.
+ * - the row is grouped (expanded rows are not supported on grouped rows).
+ * - the user is selecting text.
+ * @param row - Row.
+ */
+export function handleToggleExpanded(row) {
+    const { getCanExpand, getIsGrouped, toggleExpanded } = row;
+    // Row can not be expanded.
+    if (!getCanExpand())
+        return;
+    // Row is grouped - row expansion not supported on a grouped row.
+    if (getIsGrouped())
+        return;
+    // User is selecting text - do not toggle row expanded state.
+    if (window.getSelection()?.toString())
+        return;
+    // Toggle row expanded state.
+    toggleExpanded();
+}

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -1,4 +1,6 @@
 export interface StyledTableRowProps {
+    canExpand?: boolean;
+    isExpanded?: boolean;
     isGrouped?: boolean;
     isPreview?: boolean;
 }

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -1,17 +1,20 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
-import { primaryLightest, smokeLightest, } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 export const StyledTableRow = styled(MTableRow, {
-    shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
+    shouldForwardProp: (prop) => prop !== "canExpand" &&
+        prop !== "isExpanded" &&
+        prop !== "isPreview" &&
+        prop !== "isGrouped",
 }) `
   && {
     transition: background-color 300ms ease-in;
 
     ${(props) => props.isGrouped &&
     css `
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
 
         td {
           ${textBodySmall500(props)};
@@ -20,9 +23,24 @@ export const StyledTableRow = styled(MTableRow, {
         }
       `}
 
-    ${(props) => props.isPreview &&
+    ${({ canExpand, isExpanded, isGrouped }) => !isGrouped &&
+    canExpand &&
     css `
-        background-color: ${primaryLightest(props)};
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f8fbfd;
+        }
+
+        ${isExpanded &&
+        css `
+          background-color: #f8fbfd;
+        `}
+      `}
+
+    ${({ isPreview }) => isPreview &&
+    css `
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
   }
 `;

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

@@ -3,14 +3,15 @@ import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
+import { handleToggleExpanded } from "../TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../TableRow/tableRow.styles";
 export const TableRows = ({ rows, virtualizer, }) => {
     const virtualItems = virtualizer.getVirtualItems();
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex];
-        const { getIsGrouped, getIsPreview } = row;
-        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
+        const { getCanExpand, getIsExpanded, getIsGrouped, getIsPreview } = row;
+        return (React.createElement(StyledTableRow, { key: row.id, canExpand: getCanExpand(), "data-index": rowIndex, isExpanded: getIsExpanded(), isGrouped: getIsGrouped(), isPreview: getIsPreview(), onClick: () => handleToggleExpanded(row), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "38.1.1",
+  "version": "38.3.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Description/description.styles.ts

@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import {
+  mediaTabletDown,
+  mediaTabletUp,
+} from "../../../../styles/common/mixins/breakpoints";
+import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  padding: 20px;
+
+  ${mediaTabletDown} {
+    padding: 20px 16px;
+  }
+`;
+
+export const StyledMarkdownRenderer = styled(MarkdownRenderer)`
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  h2 {
+    ${textHeadingSmall};
+    font-size: 18px;
+    line-height: 26px;
+
+    ${mediaTabletUp} {
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

package/src/components/DataDictionary/components/Description/description.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import {
+  StyledMarkdownRenderer,
+  StyledRoundedPaper,
+} from "./description.styles";
+import { DescriptionProps } from "./types";
+
+export const Description = ({
+  description,
+}: DescriptionProps): JSX.Element | null => {
+  if (!description) return null;
+  return (
+    <StyledRoundedPaper elevation={0}>
+      <StyledMarkdownRenderer value={description} />
+    </StyledRoundedPaper>
+  );
+};

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

@@ -0,0 +1,3 @@
+export interface DescriptionProps {
+  description?: string;
+}

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts

@@ -7,6 +7,8 @@ const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
 
 export const Layout = styled("div")<LayoutSpacing>`
+  display: grid;
+  gap: 16px;
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;

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

@@ -6,8 +6,9 @@ import {
 
 export const EXPANDED_OPTIONS: Pick<
   ExpandedOptions<RowData>,
-  "enableExpanding" | "getExpandedRowModel"
+  "enableExpanding" | "getExpandedRowModel" | "getRowCanExpand"
 > = {
   enableExpanding: true,
   getExpandedRowModel: getExpandedRowModel(),
+  getRowCanExpand: () => true,
 };

package/src/components/DataDictionary/dataDictionary.tsx

@@ -3,6 +3,7 @@ import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../common/entities";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -30,7 +31,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
   // Get dictionary configuration.
-  const { classes, tableOptions, title } =
+  const { classes, description, tableOptions, title } =
     useDataDictionaryConfig<T>(dictionary);
 
   // Layout measurements.
@@ -64,6 +65,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
         <Fade in={dimensions.height > 0}>
           {/* Fade in entities when filters are measured. */}
           <EntitiesLayout spacing={entitiesSpacing}>
+            <Description description={description} />
             <Entities spacing={entitiesSpacing} table={table} />
           </EntitiesLayout>
         </Fade>

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

@@ -31,6 +31,7 @@ export const useDataDictionaryConfig = <T extends RowData = Attribute>(
     // exists above and would have thrown an error if undefined.
     return {
       classes: dataDictionaryConfig!.dataDictionary.classes,
+      description: dataDictionaryConfig!.dataDictionary.description,
       tableOptions: dataDictionaryConfig!.tableOptions,
       title: dataDictionaryConfig!.dataDictionary.title,
     };

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

@@ -3,6 +3,7 @@ import { Attribute, Class } from "../../../../common/entities";
 
 export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
   classes: Class<T>[];
+  description?: string;
   tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
   title: string;
 }

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

@@ -5,6 +5,7 @@ import {
   getTableCellAlign,
   getTableCellPadding,
 } from "../../../../../Table/components/TableCell/common/utils";
+import { handleToggleExpanded } from "../../../../../Table/components/TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 import { TableView } from "../../table";
 
@@ -34,8 +35,11 @@ export const TableRows = <T extends RowData>({
         return (
           <StyledTableRow
             key={row.id}
+            canExpand={row.getCanExpand()}
+            isExpanded={row.getIsExpanded()}
             isGrouped={row.getIsGrouped()}
             isPreview={row.getIsPreview()}
+            onClick={() => handleToggleExpanded(row)}
           >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.

package/src/components/Filter/components/FilterRange/filterRange.styles.ts

@@ -13,6 +13,7 @@ export const StyledForm = styled("form")`
 
     .MuiToggleButton-root {
       color: ${PALETTE.INK_LIGHT};
+      padding: 8px 12px;
       text-transform: capitalize;
 
       &.Mui-selected {

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -46,12 +46,12 @@ export const ExploreViewLink = ({
     <Link
       className={className}
       href={url.href}
-      onClick={(): void => {
+      onClick={(e): void => {
         exploreDispatch({
           payload: { entityListType, filters, grouping, sorting },
           type: ExploreActionKind.UpdateEntityFilters,
         });
-        onClick?.();
+        onClick?.(e);
       }}
       rel={REL_ATTRIBUTE.NO_OPENER}
       target={target}

package/src/components/Links/components/Link/link.tsx

@@ -22,7 +22,6 @@ export interface LinkProps
     Omit<MLinkProps, "children" | "component"> {
   copyable?: boolean;
   label: ReactNode /* link label may be an element */;
-  onClick?: () => void;
   target?: ANCHOR_TARGET;
   TypographyProps?: TypographyProps;
   url: Url /* url specified as UrlObject with href and query defined, and is currently only used for internal links */;

package/src/components/MarkdownRenderer/components/Anchor/anchor.tsx

@@ -28,6 +28,11 @@ export const Anchor = (
     <Link
       className={props.className}
       label={props.children}
+      /*
+       * Prevents click events from bubbling up to parent components
+       * (such as CardActionArea or Accordion) when the link is activated.
+       */
+      onClick={(e) => e.stopPropagation()}
       url={props.href || ""}
     />
   );

package/src/components/Table/components/TableCell/components/LinkCell/linkCell.tsx

@@ -53,6 +53,11 @@ export const LinkCell = <
       color={color}
       component={getComponent(href, isClientSide)}
       href={href}
+      /*
+       * Prevents click events from bubbling up to parent components
+       * (such as CardActionArea or Accordion) when the link is activated.
+       */
+      onClick={(e) => e.stopPropagation()}
       rel={getRelAttribute(rel, isClientSide)}
       target={getTargetAttribute(target, isClientSide)}
       underline={underline}

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -13,6 +13,11 @@ export const RowSelectionCell = <T extends RowData, TValue = unknown>({
       checked={getIsSelected()}
       checkedIcon={<CheckedIcon />}
       icon={<UncheckedIcon />}
+      /*
+       * Prevents click events from bubbling up to parent components
+       * (such as CardActionArea or Accordion) when the checkbox is activated.
+       */
+      onClick={(e) => e.stopPropagation()}
       onChange={getToggleSelectedHandler()}
     />
   );

package/src/components/Table/components/TableFeatures/RowExpanding/utils.ts

@@ -0,0 +1,25 @@
+import { Row, RowData } from "@tanstack/react-table";
+
+/**
+ * Handles toggling the expanded state of a row.
+ * Rows can not be expanded if:
+ * - the row can not be expanded.
+ * - the row is grouped (expanded rows are not supported on grouped rows).
+ * - the user is selecting text.
+ * @param row - Row.
+ */
+export function handleToggleExpanded<T extends RowData>(row: Row<T>): void {
+  const { getCanExpand, getIsGrouped, toggleExpanded } = row;
+
+  // Row can not be expanded.
+  if (!getCanExpand()) return;
+
+  // Row is grouped - row expansion not supported on a grouped row.
+  if (getIsGrouped()) return;
+
+  // User is selecting text - do not toggle row expanded state.
+  if (window.getSelection()?.toString()) return;
+
+  // Toggle row expanded state.
+  toggleExpanded();
+}

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -1,19 +1,22 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
-import {
-  primaryLightest,
-  smokeLightest,
-} from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 
 export interface StyledTableRowProps {
+  canExpand?: boolean;
+  isExpanded?: boolean;
   isGrouped?: boolean;
   isPreview?: boolean;
 }
 
 export const StyledTableRow = styled(MTableRow, {
-  shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
+  shouldForwardProp: (prop) =>
+    prop !== "canExpand" &&
+    prop !== "isExpanded" &&
+    prop !== "isPreview" &&
+    prop !== "isGrouped",
 })<StyledTableRowProps>`
   && {
     transition: background-color 300ms ease-in;
@@ -21,7 +24,7 @@ export const StyledTableRow = styled(MTableRow, {
     ${(props) =>
       props.isGrouped &&
       css`
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
 
         td {
           ${textBodySmall500(props)};
@@ -30,10 +33,26 @@ export const StyledTableRow = styled(MTableRow, {
         }
       `}
 
-    ${(props) =>
-      props.isPreview &&
+    ${({ canExpand, isExpanded, isGrouped }) =>
+      !isGrouped &&
+      canExpand &&
+      css`
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f8fbfd;
+        }
+
+        ${isExpanded &&
+        css`
+          background-color: #f8fbfd;
+        `}
+      `}
+
+    ${({ isPreview }) =>
+      isPreview &&
       css`
-        background-color: ${primaryLightest(props)};
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
   }
 `;

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

@@ -7,6 +7,7 @@ import {
   getTableCellAlign,
   getTableCellPadding,
 } from "../TableCell/common/utils";
+import { handleToggleExpanded } from "../TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../TableRow/tableRow.styles";
 
 export interface TableRowsProps<T extends RowData> {
@@ -24,13 +25,16 @@ export const TableRows = <T extends RowData>({
       {virtualItems.map((virtualRow) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex] as Row<T>;
-        const { getIsGrouped, getIsPreview } = row;
+        const { getCanExpand, getIsExpanded, getIsGrouped, getIsPreview } = row;
         return (
           <StyledTableRow
             key={row.id}
+            canExpand={getCanExpand()}
             data-index={rowIndex}
+            isExpanded={getIsExpanded()}
             isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
+            onClick={() => handleToggleExpanded(row)}
             ref={virtualizer.measureElement}
           >
             {row.getVisibleCells().map((cell, i) => {