@databiosphere/findable-ui 38.3.0 → 39.1.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [39.1.0](https://github.com/DataBiosphere/findable-ui/compare/v39.0.0...v39.1.0) (2025-07-24)
+
+
+### Features
+
+* add row ids to data dictionary table for anchor link scrolling ([#576](https://github.com/DataBiosphere/findable-ui/issues/576)) ([#577](https://github.com/DataBiosphere/findable-ui/issues/577)) ([bd7d05b](https://github.com/DataBiosphere/findable-ui/commit/bd7d05b451a7d9190b92fb682d892600cde17ba2))
+
+## [39.0.0](https://github.com/DataBiosphere/findable-ui/compare/v38.3.0...v39.0.0) (2025-07-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* fix global search when a marked value is inside another HTML tag ([#539](https://github.com/DataBiosphere/findable-ui/issues/539)) (#573)
+
+### Features
+
+* fix global search when a marked value is inside another HTML tag ([#539](https://github.com/DataBiosphere/findable-ui/issues/539)) ([#573](https://github.com/DataBiosphere/findable-ui/issues/573)) ([7b58c24](https://github.com/DataBiosphere/findable-ui/commit/7b58c2429ba947e752358a012a6a7d545f0ffc28))
+
 ## [38.3.0](https://github.com/DataBiosphere/findable-ui/compare/v38.2.0...v38.3.0) (2025-07-22)
 
 

package/lib/components/DataDictionary/components/Entities/entities.d.ts

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
 import { ClassesProps } from "./types";
-export declare const Entities: <T extends RowData = Attribute>({ spacing, table, }: ClassesProps<T>) => JSX.Element;
+export declare const Entities: <T extends RowData = Attribute>({ table, }: ClassesProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -3,10 +3,10 @@ import React from "react";
 import { NoResults } from "../../../NoResults/noResults";
 import { Entity } from "../Entity/entity";
 import { GRID_PROPS, NO_RESULTS_PROPS } from "./constants";
-export const Entities = ({ spacing, table, }) => {
+export const Entities = ({ table, }) => {
     const { getGroupedRowModel } = table;
     const { rows } = getGroupedRowModel();
     if (rows.length === 0)
         return React.createElement(NoResults, { ...NO_RESULTS_PROPS });
-    return (React.createElement(Grid, { ...GRID_PROPS }, rows.map((row) => (React.createElement(Entity, { key: row.id, row: row, spacing: spacing, table: table })))));
+    return (React.createElement(Grid, { ...GRID_PROPS }, rows.map((row) => (React.createElement(Entity, { key: row.id, row: row, table: table })))));
 };

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

@@ -1,7 +1,5 @@
 import { RowData, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 export interface ClassesProps<T extends RowData = Attribute> {
-    spacing?: LayoutSpacing;
     table: Table<T>;
 }

package/lib/components/DataDictionary/components/Entity/entity.d.ts

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
 import { EntityProps } from "./types";
-export declare const Entity: <T extends RowData = Attribute>({ row, spacing, table, }: EntityProps<T>) => JSX.Element | null;
+export declare const Entity: <T extends RowData = Attribute>({ row, table, }: EntityProps<T>) => JSX.Element | null;

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -6,7 +6,7 @@ import { Table } from "../Table/table";
 import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
 import { getClassMeta } from "./utils";
-export const Entity = ({ row, spacing, table, }) => {
+export const Entity = ({ row, table, }) => {
     // Get class key from row.
     const classKey = row.getValue("classKey");
     // Get class metadata from table options.
@@ -16,10 +16,10 @@ export const Entity = ({ row, spacing, table, }) => {
         return null;
     return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
         React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
-            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
+            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },
                 cls.title,
                 " ",
                 React.createElement(AnchorLink, { anchorLink: classKey })),
-            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, cls.description)),
+            cls.description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, cls.description))),
         React.createElement(Table, { row: row, table: table })));
 };

package/lib/components/DataDictionary/components/Entity/entity.styles.js

@@ -1,8 +1,6 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 export const StyledTypography = styled(Typography) `
-  scroll-margin-top: ${({ top = 0 }) => top}px;
-
   &:hover a {
     opacity: 1;
   }

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

@@ -1,8 +1,6 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 export interface EntityProps<T extends RowData = Attribute> {
     row: Row<T>;
-    spacing?: LayoutSpacing;
     table: Table<T>;
 }

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

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

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

@@ -0,0 +1,7 @@
+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;
+}, {}, {}>;

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

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  background-color: ${PALETTE.SMOKE_MAIN};
+  display: grid;
+  gap: 1px;
+`;

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,5 +1,7 @@
 import { Fade } from "@mui/material";
 import React from "react";
+import { PROPERTY } from "../../hooks/useHtmlStyle/constants";
+import { useHtmlStyle } from "../../hooks/useHtmlStyle/hook";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
@@ -30,6 +32,9 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
     const table = useTable(dictionary, classes, tableOptions);
     // Dictionary outline.
     const outline = buildClassesOutline(table);
+    // Update scroll-padding-top on the HTML element.
+    // Scroll-snaps table rows to below the sticky filters.
+    useHtmlStyle(PROPERTY.SCROLL_PADDING_TOP, `${dimensions.height}px`);
     return (React.createElement(Fade, { in: spacing.top > 0 },
         React.createElement(View, { className: className },
             React.createElement(TitleLayout, { ...spacing },
@@ -42,5 +47,5 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
             React.createElement(Fade, { in: dimensions.height > 0 },
                 React.createElement(EntitiesLayout, { spacing: entitiesSpacing },
                     React.createElement(Description, { description: description }),
-                    React.createElement(Entities, { spacing: entitiesSpacing, table: table }))))));
+                    React.createElement(Entities, { table: table }))))));
 };

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

@@ -10,7 +10,7 @@ export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.
-        return (React.createElement(StyledTableRow, { key: row.id, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

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

@@ -10,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, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { key: row.id, id: 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/Index/index.styles.js

@@ -3,7 +3,9 @@ import { Grid } from "@mui/material";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
-export const StyledGridEntityView = styled(Grid) `
+export const StyledGridEntityView = styled(Grid, {
+    shouldForwardProp: (prop) => prop !== "bottom" && prop !== "top",
+}) `
   align-content: flex-start;
   display: grid;
   flex: 1;

package/lib/components/MarkdownRenderer/markdownRenderer.d.ts

@@ -11,4 +11,4 @@ import { MarkdownRendererProps } from "./types";
  * rehype plug-ins are chosen from versions that still target Unified 10:
  * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
  */
-export declare const MarkdownRenderer: ({ className, components: componentOptions, value, }: MarkdownRendererProps) => JSX.Element;
+export declare const MarkdownRenderer: ({ className, components: componentOptions, regex: markdownRegex, value, }: MarkdownRendererProps) => JSX.Element;

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -1,5 +1,5 @@
 import { Typography } from "@mui/material";
-import React, { Fragment, createElement, useEffect, useState } from "react";
+import React, { Fragment, createElement, useEffect, useMemo, useState, } from "react";
 import rehypeRaw from "rehype-raw";
 import rehypeReact from "rehype-react";
 import rehypeSanitize from "rehype-sanitize";
@@ -10,6 +10,7 @@ import { unified } from "unified";
 import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { COMPONENTS } from "./constants";
 import { StyledContainer } from "./markdownRenderer.styles";
+import { rehypeHighlight } from "./rehypeHighlight";
 /**
  * Markdown Rendering - Pipeline Version Constraints
  *
@@ -22,10 +23,11 @@ import { StyledContainer } from "./markdownRenderer.styles";
  * rehype plug-ins are chosen from versions that still target Unified 10:
  * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
  */
-export const MarkdownRenderer = ({ className, components: componentOptions = COMPONENTS, value, }) => {
+export const MarkdownRenderer = ({ className, components: componentOptions = COMPONENTS, regex: markdownRegex, value, }) => {
     const [element, setElement] = useState(null);
     const [error, setError] = useState(null);
     const [components] = useState(componentOptions);
+    const regex = useMemo(() => markdownRegex, [markdownRegex]);
     useEffect(() => {
         let cancelled = false;
         setError(null);
@@ -35,6 +37,7 @@ export const MarkdownRenderer = ({ className, components: componentOptions = COM
             .use(remarkRehype, { allowDangerousHtml: true })
             .use(rehypeRaw)
             .use(rehypeSanitize)
+            .use(rehypeHighlight, { regex })
             .use(rehypeReact, { Fragment, components, createElement });
         processor
             .process(value)
@@ -49,7 +52,7 @@ export const MarkdownRenderer = ({ className, components: componentOptions = COM
         return () => {
             cancelled = true;
         };
-    }, [components, value]);
+    }, [components, regex, value]);
     if (error)
         return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, error));
     return React.createElement(StyledContainer, { className: className }, element);

package/lib/components/MarkdownRenderer/rehypeHighlight.d.ts

@@ -0,0 +1,10 @@
+import { Root } from "hast";
+/**
+ * Custom rehype plugin to highlight markdown from given regex.
+ * @param options - Options.
+ * @param options.regex - Regex to match.
+ * @returns A rehype plugin.
+ */
+export declare function rehypeHighlight(options: {
+    regex: RegExp | undefined;
+}): (tree: Root) => void;

package/lib/components/MarkdownRenderer/rehypeHighlight.js

@@ -0,0 +1,49 @@
+import { visit } from "unist-util-visit";
+/**
+ * Custom rehype plugin to highlight markdown from given regex.
+ * @param options - Options.
+ * @param options.regex - Regex to match.
+ * @returns A rehype plugin.
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity -- ignoring for readability
+export function rehypeHighlight(options) {
+    const { regex } = options;
+    if (!regex)
+        return () => { };
+    return (tree) => {
+        visit(tree, "text", (node, index, parent) => {
+            if (!parent)
+                return;
+            if (typeof index !== "number")
+                return;
+            // Avoid double marking, breaking scripts, and breaking styles.
+            if ("tagName" in parent &&
+                ["mark", "script", "style"].includes(parent.tagName)) {
+                return;
+            }
+            const parts = node.value.split(regex);
+            if (parts.length === 1)
+                return; // No text to highlight.
+            const newNodes = [];
+            parts.forEach((part, i) => {
+                if (!part)
+                    return; // Skip empties.
+                if (i % 2) {
+                    // Captured text.
+                    newNodes.push({
+                        children: [{ type: "text", value: part }],
+                        properties: {},
+                        tagName: "mark",
+                        type: "element",
+                    });
+                }
+                else {
+                    // Normal text.
+                    newNodes.push({ type: "text", value: part });
+                }
+            });
+            // Replace the original text node with the new nodes.
+            parent.children.splice(index, 1, ...newNodes);
+        });
+    };
+}

package/lib/components/MarkdownRenderer/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { MarkdownRenderer } from "../markdownRenderer";
+export declare const DEFAULT_ARGS: ComponentProps<typeof MarkdownRenderer>;

package/lib/components/MarkdownRenderer/stories/args.js

@@ -0,0 +1,4 @@
+export const DEFAULT_ARGS = {
+    regex: /(UBERON|955)/gi,
+    value: '| Key | Annotator | Value |\n| --- | --- | --- |\n| `tissue_ontology_term_id` | Curator | categorical with `str` categories. This **MUST** be the UBERON or CL term that best describes the tissue the cell was derived from, depending on the sample type. |\n\n**Mapping guidance**\n\n| For | Use |\n| --- | --- |\n| Tissue | STRONGLY RECOMMENDED to be an UBERON term&nbsp;<br />(e.g. [`UBERON:0008930`](http://purl.obolibrary.org/obo/UBERON_0008930) for a *somatosensory cortex* tissue sample) |\n| Cell culture | MUST be a CL term appended with \\" (cell culture)\\"&nbsp;<br />(e.g. [`CL:0000057`](http://purl.obolibrary.org/obo/CL_0000057) **(cell culture)** for the *WTC-11* cell line) |\n| Organoid | MUST be an UBERON term appended with \\" (organoid)\\"&nbsp;<br />(e.g. [`UBERON:0000955`](http://purl.obolibrary.org/obo/UBERON_0000955) **(organoid)** for a *brain organoid*) |\n| Enriched / sorted / isolated cells from a tissue | MUST be an UBERON or CL term and **SHOULD NOT** use terms that do not capture the tissue of origin.<br /><br />• *CD3+ kidney cells* → [`UBERON:0002113`](https://www.ebi.ac.uk/ols/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/UBERON_0002113) (*kidney*) instead of [`CL:000084`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000084) (*T cell*).<br />• *EPCAM+ cervical cells* → [`CL:0000066`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000066) (*epithelial cell* of the cervix). |\n\n---\n\nWhen a dataset is uploaded, the **cellxgene Data Portal** MUST automatically add the matching human-readable name for the corresponding ontology term to the `obs` dataframe. Curators **MUST NOT** annotate the following columns.\n\n### `assay`\n\n| Key | Annotator | Value |\n| --- | --- | --- |\n| `assay` | Data Portal | categorical with `str` categories. This **MUST** be the human-readable name assigned to the value of `assay_ontology_term_id`. |',
+};

package/lib/components/MarkdownRenderer/stories/markdownRenderer.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MarkdownRenderer } from "../markdownRenderer";
+declare const meta: Meta<typeof MarkdownRenderer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/components/MarkdownRenderer/stories/markdownRenderer.stories.js

@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { MarkdownRenderer } from "../markdownRenderer";
+import { DEFAULT_ARGS } from "./args";
+const meta = {
+    component: MarkdownRenderer,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: {
+                backgroundColor: PALETTE.COMMON_WHITE,
+                fontSize: "14px",
+                lineHeight: "20px",
+                padding: 3,
+                width: 480,
+            } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};

package/lib/components/MarkdownRenderer/types.d.ts

@@ -3,5 +3,6 @@ import { BaseComponentProps } from "../types";
 export type MarkdownRendererComponents = Record<string, ComponentType<any>>;
 export interface MarkdownRendererProps extends BaseComponentProps {
     components?: MarkdownRendererComponents;
+    regex?: RegExp;
     value: string;
 }

package/lib/components/Table/columnDef/globalFilter/utils.js

@@ -6,11 +6,14 @@ import { RANK_ITEM_OPTIONS } from "./constants";
  * @returns Array of terms.
  */
 export function parseSearchTerms(value) {
-    return String(value ?? "")
+    const terms = String(value ?? "")
         .toLowerCase()
         .trim()
         .split(/\s+/)
-        .filter(Boolean);
+        .filter(Boolean)
+        .sort((a, b) => b.length - a.length);
+    const termsSet = new Set(terms);
+    return [...termsSet];
 }
 /**
  * Ranks a column's value against search terms.
@@ -38,7 +41,6 @@ export function rankColumnValue(row, columnId, terms) {
  * @param terms - Search terms to match against.
  */
 export function rankRowColumns(row, columnId, terms) {
-    const columnFiltersMeta = row.columnFiltersMeta;
     // Process other columns.
     for (const { column } of row.getAllCells()) {
         // Column is not searchable.
@@ -47,8 +49,6 @@ export function rankRowColumns(row, columnId, terms) {
         // Column has already been processed.
         if (column.id === columnId)
             continue;
-        if (column.id in columnFiltersMeta)
-            continue;
         // Rank the column value.
         const passed = rankColumnValue(row, column.id, terms);
         // Add the filter metadata.

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.d.ts

@@ -1,4 +1,3 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { BaseComponentProps } from "components/types";
-import { MarkdownCellProps } from "./types";
-export declare const MarkdownCell: <T extends RowData, TValue extends MarkdownCellProps = MarkdownCellProps>({ className, column, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;
+import { BaseComponentProps } from "../../../../../types";
+export declare const MarkdownCell: <T extends RowData, TValue extends string = string>({ className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.js

@@ -1,13 +1,18 @@
 import React from "react";
 import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { getTokens, getTokensRegex, isRankedCell } from "../RankedCell/utils";
 import { StyledMarkdownRenderer } from "./markdownCell.styles";
-export const MarkdownCell = ({ className, column, getValue, }) => {
-    const props = getValue();
-    if (!props)
+export const MarkdownCell = ({ className, column, getValue, row, table, }) => {
+    const value = getValue();
+    if (!value)
         return null;
-    const { values } = props;
+    // Get column metadata (components to be rendered in MarkdownRenderer).
     const columnDef = column?.columnDef;
     const columnMeta = columnDef?.meta;
     const components = columnMeta?.components;
-    return (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, value: values }));
+    // Determine if the cell is ranked.
+    const isRanked = isRankedCell(table, row, column.id);
+    // Build regex for markdown highlighting.
+    const regex = isRanked ? getTokensRegex(getTokens(table)) : undefined;
+    return (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, regex: regex, value: value }));
 };

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/args.js

@@ -1,10 +1,12 @@
 export const DEFAULT_ARGS = {
-    getValue: (() => ({
-        values: '| Key | Annotator | Value |\n| --- | --- | --- |\n| `tissue_ontology_term_id` | Curator | categorical with `str` categories. This **MUST** be the UBERON or CL term that best describes the tissue the cell was derived from, depending on the sample type. |\n\n**Mapping guidance**\n\n| For | Use |\n| --- | --- |\n| Tissue | STRONGLY RECOMMENDED to be an UBERON term&nbsp;<br />(e.g. [`UBERON:0008930`](http://purl.obolibrary.org/obo/UBERON_0008930) for a *somatosensory cortex* tissue sample) |\n| Cell culture | MUST be a CL term appended with \\" (cell culture)\\"&nbsp;<br />(e.g. [`CL:0000057`](http://purl.obolibrary.org/obo/CL_0000057) **(cell culture)** for the *WTC-11* cell line) |\n| Organoid | MUST be an UBERON term appended with \\" (organoid)\\"&nbsp;<br />(e.g. [`UBERON:0000955`](http://purl.obolibrary.org/obo/UBERON_0000955) **(organoid)** for a *brain organoid*) |\n| Enriched / sorted / isolated cells from a tissue | MUST be an UBERON or CL term and **SHOULD NOT** use terms that do not capture the tissue of origin.<br /><br />• *CD3+ kidney cells* → [`UBERON:0002113`](https://www.ebi.ac.uk/ols/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/UBERON_0002113) (*kidney*) instead of [`CL:000084`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000084) (*T cell*).<br />• *EPCAM+ cervical cells* → [`CL:0000066`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000066) (*epithelial cell* of the cervix). |\n\n---\n\nWhen a dataset is uploaded, the **cellxgene Data Portal** MUST automatically add the matching human-readable name for the corresponding ontology term to the `obs` dataframe. Curators **MUST NOT** annotate the following columns.\n\n### `assay`\n\n| Key | Annotator | Value |\n| --- | --- | --- |\n| `assay` | Data Portal | categorical with `str` categories. This **MUST** be the human-readable name assigned to the value of `assay_ontology_term_id`. |',
-    })),
+    column: { id: "description" },
+    getValue: () => '| Key | Annotator | Value |\n| --- | --- | --- |\n| `tissue_ontology_term_id` | Curator | categorical with `str` categories. This **MUST** be the UBERON or CL term that best describes the tissue the cell was derived from, depending on the sample type. |\n\n**Mapping guidance**\n\n| For | Use |\n| --- | --- |\n| Tissue | STRONGLY RECOMMENDED to be an UBERON term&nbsp;<br />(e.g. [`UBERON:0008930`](http://purl.obolibrary.org/obo/UBERON_0008930) for a *somatosensory cortex* tissue sample) |\n| Cell culture | MUST be a CL term appended with \\" (cell culture)\\"&nbsp;<br />(e.g. [`CL:0000057`](http://purl.obolibrary.org/obo/CL_0000057) **(cell culture)** for the *WTC-11* cell line) |\n| Organoid | MUST be an UBERON term appended with \\" (organoid)\\"&nbsp;<br />(e.g. [`UBERON:0000955`](http://purl.obolibrary.org/obo/UBERON_0000955) **(organoid)** for a *brain organoid*) |\n| Enriched / sorted / isolated cells from a tissue | MUST be an UBERON or CL term and **SHOULD NOT** use terms that do not capture the tissue of origin.<br /><br />• *CD3+ kidney cells* → [`UBERON:0002113`](https://www.ebi.ac.uk/ols/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/UBERON_0002113) (*kidney*) instead of [`CL:000084`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000084) (*T cell*).<br />• *EPCAM+ cervical cells* → [`CL:0000066`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000066) (*epithelial cell* of the cervix). |\n\n---\n\nWhen a dataset is uploaded, the **cellxgene Data Portal** MUST automatically add the matching human-readable name for the corresponding ontology term to the `obs` dataframe. Curators **MUST NOT** annotate the following columns.\n\n### `assay`\n\n| Key | Annotator | Value |\n| --- | --- | --- |\n| `assay` | Data Portal | categorical with `str` categories. This **MUST** be the human-readable name assigned to the value of `assay_ontology_term_id`. |',
+    row: { columnFiltersMeta: { description: { passed: false } } },
+    table: { getState: () => ({ globalFilter: "" }) },
 };
 export const WITH_HTML_ARGS = {
-    getValue: (() => ({
-        values: "Hello <br />World <a href='https://www.example.com'>example link</a>",
-    })),
+    column: { id: "description" },
+    getValue: () => "Hello <br />World <a href='https://www.example.com'>example link</a>",
+    row: { columnFiltersMeta: { description: { passed: false } } },
+    table: { getState: () => ({ globalFilter: "" }) },
 };

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.d.ts

@@ -1,3 +1,3 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { BaseComponentProps } from "../../../../../types";
-export declare const RankedCell: <T extends RowData, TValue = string | undefined | null>({ className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;
+import { BaseComponentProps, ChildrenProps } from "../../../../../types";
+export declare const RankedCell: <T extends RowData, TValue = string | undefined | null>({ children, className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue> & ChildrenProps) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.js

@@ -1,6 +1,8 @@
 import React, { Fragment } from "react";
 import { getTokens, getTokensRegex, isRankedCell } from "./utils";
-export const RankedCell = ({ className, column, getValue, row, table, }) => {
+export const RankedCell = ({ 
+/* children - e.g. AnchorLink component */
+children, className, column, getValue, row, table, }) => {
     // Get the cell value.
     const value = getValue();
     // If the cell value is undefined or null, return null.
@@ -12,14 +14,20 @@ export const RankedCell = ({ className, column, getValue, row, table, }) => {
     const isRanked = isRankedCell(table, row, column.id);
     // Return the unranked cell, as-is.
     if (!isRanked)
-        return React.createElement(Fragment, null, stringValue);
+        return (React.createElement(Fragment, null,
+            stringValue,
+            children));
     // Tokenise the current global filter.
     const tokens = getTokens(table);
     // If there are no tokens, return the value as-is.
     if (tokens.length === 0)
-        return React.createElement(Fragment, null, stringValue);
+        return (React.createElement(Fragment, null,
+            stringValue,
+            children));
     // Create regex pattern.
     const regex = getTokensRegex(tokens);
     // Return the ranked cell, with highlighting.
-    return (React.createElement("span", { className: className }, stringValue.split(regex).map((part, i) => (React.createElement(Fragment, { key: i }, part.match(regex) ? React.createElement("mark", null, part) : part)))));
+    return (React.createElement("span", { className: className },
+        stringValue.split(regex).map((part, i) => (React.createElement(Fragment, { key: i }, part.match(regex) ? React.createElement("mark", null, part) : part))),
+        children));
 };

package/lib/components/Table/components/TableCell/components/RankedCell/utils.d.ts

@@ -1,13 +1,4 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
-/**
- * Renders a cell value with highlighting if it matches item rank filter criteria.
- * @param table - Table.
- * @param row - Row.
- * @param columnId - Column identifier.
- * @param value - Cell value.
- * @returns Rendered cell value with highlighting.
- */
-export declare function renderRankedCell<T extends RowData>(table: Table<T>, row: Row<T>, columnId: string, value: string | undefined | null): string;
 /**
  * Returns the current global filter tokens from the table.
  * @param table - Table.

package/lib/components/Table/components/TableCell/components/RankedCell/utils.js

@@ -1,32 +1,5 @@
 import { escapeRegExp } from "../../../../../../common/utils";
 import { parseSearchTerms } from "../../../../columnDef/globalFilter/utils";
-/**
- * Renders a cell value with highlighting if it matches item rank filter criteria.
- * @param table - Table.
- * @param row - Row.
- * @param columnId - Column identifier.
- * @param value - Cell value.
- * @returns Rendered cell value with highlighting.
- */
-export function renderRankedCell(table, row, columnId, value) {
-    // If the cell value is undefined or null, return an empty string.
-    if (value === undefined || value === null)
-        return "";
-    const stringValue = String(value);
-    // Check if the cell is ranked.
-    const isRanked = isRankedCell(table, row, columnId);
-    // Return the unranked cell, as-is, in string form.
-    if (!isRanked)
-        return stringValue;
-    // Tokenise the current global filter.
-    const tokens = getTokens(table);
-    // If there are no tokens, return the value as-is, in string form.
-    if (tokens.length === 0)
-        return stringValue;
-    // Create regex pattern.
-    const regex = getTokensRegex(tokens);
-    return stringValue.replace(regex, "<mark>$1</mark>");
-}
 /**
  * Returns the current global filter tokens from the table.
  * @param table - Table.

package/lib/components/common/AnchorLink/anchorLink.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent } from "react";
 /**
  * An anchor link component that provides deep linking functionality.
  * @important The parent element must have `position: relative` CSS property
@@ -7,6 +8,7 @@
 interface AnchorLinkProps {
     anchorLink: string;
     className?: string;
+    onClick?: (e: MouseEvent) => void;
 }
-export declare const AnchorLink: ({ anchorLink, className, }: AnchorLinkProps) => JSX.Element;
+export declare const AnchorLink: ({ anchorLink, className, onClick, }: AnchorLinkProps) => JSX.Element;
 export {};

package/lib/components/common/AnchorLink/anchorLink.js

@@ -2,8 +2,8 @@ import { LinkRounded } from "@mui/icons-material";
 import { useRouter } from "next/router";
 import React from "react";
 import { StyledNextLink } from "./anchorLink.styles";
-export const AnchorLink = ({ anchorLink, className, }) => {
+export const AnchorLink = ({ anchorLink, className, onClick, }) => {
     const { query } = useRouter();
-    return (React.createElement(StyledNextLink, { "aria-label": anchorLink, className: className, href: { hash: anchorLink, query } },
+    return (React.createElement(StyledNextLink, { "aria-label": anchorLink, className: className, href: { hash: anchorLink, query }, onClick: onClick },
         React.createElement(LinkRounded, { fontSize: "xsmall" })));
 };

package/lib/components/common/AnchorLink/anchorLink.styles.js

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
 import Link from "next/link";
-import { inkLight } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 export const StyledNextLink = styled(Link) `
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
   margin-left: 4px;
   opacity: 0;
   position: absolute;

package/lib/hooks/useHtmlStyle/constants.d.ts

@@ -0,0 +1,2 @@
+import { CSSPropHyphen } from "./types";
+export declare const PROPERTY: Record<string, CSSPropHyphen>;

package/lib/hooks/useHtmlStyle/constants.js

@@ -0,0 +1,3 @@
+export const PROPERTY = {
+    SCROLL_PADDING_TOP: "scroll-padding-top",
+};

package/lib/hooks/useHtmlStyle/hook.d.ts

@@ -0,0 +1,2 @@
+import { CSSPropHyphen } from "./types";
+export declare const useHtmlStyle: (property: CSSPropHyphen, value: string | null) => void;