@databiosphere/findable-ui 34.1.0 → 35.0.2

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "34.1.0"
+  ".": "35.0.2"
 }

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [35.0.2](https://github.com/DataBiosphere/findable-ui/compare/v35.0.1...v35.0.2) (2025-06-03)
+
+
+### Bug Fixes
+
+* fix explore state entity list type error ([#517](https://github.com/DataBiosphere/findable-ui/issues/517)) ([#518](https://github.com/DataBiosphere/findable-ui/issues/518)) ([bffe1cf](https://github.com/DataBiosphere/findable-ui/commit/bffe1cf876304e848a59353c726da889c1d59f97))
+
+## [35.0.1](https://github.com/DataBiosphere/findable-ui/compare/v35.0.0...v35.0.1) (2025-06-03)
+
+
+### Code Refactoring
+
+* linting ([#510](https://github.com/DataBiosphere/findable-ui/issues/510)) ([#515](https://github.com/DataBiosphere/findable-ui/issues/515)) ([52d69d7](https://github.com/DataBiosphere/findable-ui/commit/52d69d791358e822e29268b6f0c31555fc296608))
+
+## [35.0.0](https://github.com/DataBiosphere/findable-ui/compare/v34.1.0...v35.0.0) (2025-06-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* integrate beforepopstatebus with generic state sync for url ↔ state e.g. explore ([#510](https://github.com/DataBiosphere/findable-ui/issues/510)) (#514)
+
+### Features
+
+* add global 'beforepopstate' bus to intercept browser back/forward navigation ([#509](https://github.com/DataBiosphere/findable-ui/issues/509)) ([#511](https://github.com/DataBiosphere/findable-ui/issues/511)) ([0b851fd](https://github.com/DataBiosphere/findable-ui/commit/0b851fd55e29568bd498cdd3184107e4f0eea880))
+* integrate beforepopstatebus with generic state sync for url ↔ state e.g. explore ([#510](https://github.com/DataBiosphere/findable-ui/issues/510)) ([#514](https://github.com/DataBiosphere/findable-ui/issues/514)) ([91f7731](https://github.com/DataBiosphere/findable-ui/commit/91f77318c5197ee43c9e690566a1032bb2301b18))
+
 ## [34.1.0](https://github.com/DataBiosphere/findable-ui/compare/v34.0.0...v34.1.0) (2025-05-29)
 
 

package/lib/components/DataDictionary/components/Table/columns/columnDef.d.ts

@@ -0,0 +1,6 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+import { AttributeValue } from "./types";
+export declare const COLUMN_DEF: Record<keyof typeof COLUMN_IDENTIFIER, ColumnDef<Attribute, AttributeValue>>;
+export declare const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[];

package/lib/components/DataDictionary/components/Table/columns/columnDef.js

@@ -0,0 +1,33 @@
+import { BasicCell } from "../components/BasicCell/basicCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+const COLUMN_DEF_DESCRIPTION = {
+    accessorFn: (row) => row.description,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Description",
+    id: COLUMN_IDENTIFIER.DESCRIPTION,
+    meta: { width: { max: "2fr", min: "480px" } },
+};
+const COLUMN_DEF_KEY = {
+    accessorFn: (row) => row.key,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Key",
+    id: COLUMN_IDENTIFIER.KEY,
+    meta: { width: { max: "1fr", min: "180px" } },
+};
+const COLUMN_DEF_LABEL = {
+    accessorFn: (row) => row.label,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Label",
+    id: COLUMN_IDENTIFIER.LABEL,
+    meta: { width: { max: "1fr", min: "200px" } },
+};
+export const COLUMN_DEF = {
+    DESCRIPTION: COLUMN_DEF_DESCRIPTION,
+    KEY: COLUMN_DEF_KEY,
+    LABEL: COLUMN_DEF_LABEL,
+};
+export const COLUMN_DEFS = [
+    COLUMN_DEF.LABEL,
+    COLUMN_DEF.KEY,
+    COLUMN_DEF.DESCRIPTION,
+];

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.d.ts

@@ -0,0 +1,5 @@
+export declare const COLUMN_IDENTIFIER: {
+    readonly DESCRIPTION: "description";
+    readonly KEY: "key";
+    readonly LABEL: "label";
+};

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.js

@@ -0,0 +1,5 @@
+export const COLUMN_IDENTIFIER = {
+    DESCRIPTION: "description",
+    KEY: "key",
+    LABEL: "label",
+};

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

@@ -0,0 +1,2 @@
+import { Attribute } from "../../../../../common/entities";
+export type AttributeValue = Attribute[keyof Attribute];

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

@@ -0,0 +1,4 @@
+import { CellContext } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { AttributeValue } from "../../columns/types";
+export type BasicCellProps = CellContext<Attribute, AttributeValue>;

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.js

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

package/lib/components/Detail/components/Table/components/TableHead/tableHead.d.ts

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

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

@@ -0,0 +1,36 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHead = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../../../../Table/common/entities");
+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 }, (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))))))))));
+};
+exports.TableHead = TableHead;

package/lib/components/Filter/components/Filter/filter.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    argTypes: {
+        tags: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: import("./filter").FilterProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        categorySection?: string | undefined;
+        categoryView: import("../../../../common/entities").SelectCategoryView;
+        closeAncestor?: (() => void) | undefined;
+        isFilterDrawer: boolean;
+        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        tags?: React.ReactNode;
+        trackFilterOpened?: import("../../../../config/entities").TrackFilterOpenedFunction | undefined;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterStory: Story;

package/lib/components/Filter/components/Filter/filter.stories.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { Filter } from "./filter";
+const meta = {
+    argTypes: {
+        tags: { control: { disable: true } },
+    },
+    component: Filter,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/Filter",
+};
+export default meta;
+const onFilter = () => {
+    // onFilter function
+};
+export const FilterStory = {
+    args: {
+        categoryView: {
+            isDisabled: false,
+            key: "genusSpecies",
+            label: "Genus Species",
+            values: [
+                {
+                    count: 12,
+                    key: "homoSapiens",
+                    label: "Homo sapiens",
+                    selected: false,
+                },
+                {
+                    count: 6,
+                    key: "musMusculus",
+                    label: "Mus musculus",
+                    selected: false,
+                },
+            ],
+        },
+        isFilterDrawer: false,
+        onFilter,
+    },
+};

package/lib/components/Filter/components/FilterTag/filterTag.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        superseded: {
+            control: "boolean";
+        };
+    };
+    component: ({ label, onRemove, superseded, }: import("./filterTag").FilterTagProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterTagStory: Story;

package/lib/components/Filter/components/FilterTag/filterTag.stories.js

@@ -0,0 +1,17 @@
+import { FilterTag } from "./filterTag";
+const meta = {
+    argTypes: {
+        label: { control: "text" },
+        superseded: { control: "boolean" },
+    },
+    component: FilterTag,
+    title: "Components/Filter/FilterTag",
+};
+export default meta;
+export const FilterTagStory = {
+    args: {
+        label: "Male",
+        onRemove: () => { },
+        superseded: false,
+    },
+};

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Filters } from "./filters";
+declare const _default: Meta<typeof Filters>;
+export default _default;
+type Story = StoryObj<typeof Filters>;
+export declare const FiltersStory: Story;

package/lib/components/Filter/components/Filters/filters.stories.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { Filters } from "./filters";
+export default {
+    argTypes: {
+        categories: { control: { disable: true } },
+        onFilter: { control: { disable: true } },
+    },
+    component: Filters,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/Filters",
+};
+const onFilter = () => {
+    // onFilter function
+};
+const defaultValues = [
+    {
+        count: 1,
+        key: "item1",
+        label: "Item 1",
+        selected: false,
+    },
+    {
+        count: 10,
+        key: "item2",
+        label: "Item 2",
+        selected: false,
+    },
+];
+export const FiltersStory = {
+    args: {
+        categoryFilters: [
+            {
+                categoryViews: [
+                    {
+                        isDisabled: false,
+                        key: "genusSpecies",
+                        label: "Genus Species",
+                        values: [
+                            {
+                                count: 12,
+                                key: "homoSapiens",
+                                label: "Homo sapiens",
+                                selected: false,
+                            },
+                            {
+                                count: 6,
+                                key: "musMusculus",
+                                label: "Mus musculus",
+                                selected: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                categoryViews: [
+                    {
+                        isDisabled: false,
+                        key: "donorDisease",
+                        label: "Donor Disease",
+                        values: FilterMenuStory.args?.values || defaultValues,
+                    },
+                    {
+                        isDisabled: true,
+                        key: "anatomicalEntity",
+                        label: "Anatomical Entity",
+                        values: [
+                            {
+                                count: 12,
+                                key: "oralCavity",
+                                label: "oral cavity",
+                                selected: true,
+                            },
+                            {
+                                count: 6,
+                                key: "pancreas",
+                                label: "pancreas",
+                                selected: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        onFilter: onFilter,
+    },
+};

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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
+export const Cell = ({ value = "Unspecified" }) => {
+    if (typeof value === "string" || typeof value === "number") {
+        return React.createElement("div", null, value);
+    }
+    return (React.createElement(React.Fragment, null, value.map((v) => (React.createElement("div", { key: v }, v)))));
+};

package/lib/components/Index/components/EntitiesView/constants.d.ts

@@ -0,0 +1 @@
+export declare const ENTITIES_VIEW_TEST_ID = "entities-view";

package/lib/components/Index/components/EntitiesView/constants.js

@@ -0,0 +1 @@
+export const ENTITIES_VIEW_TEST_ID = "entities-view";

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        summaries: {
+            control: "object";
+        };
+    };
+    component: ({ summaries }: import("./summaries").SummariesProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SummariesStory: Story;

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.js

@@ -0,0 +1,18 @@
+import { Summaries } from "./summaries";
+const meta = {
+    argTypes: {
+        summaries: { control: "object" },
+    },
+    component: Summaries,
+    title: "Components/Summary",
+};
+export default meta;
+export const SummariesStory = {
+    args: {
+        summaries: [
+            { count: "1", label: "Species" },
+            { count: "1.1k", label: "Donors" },
+            { count: "508.5k", label: "Files" },
+        ],
+    },
+};

package/lib/components/Index/components/Hero/hero.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        Summaries: {
+            table: {
+                disable: true;
+            };
+        };
+        title: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ SideBarButton, Summaries, title, }: import("./hero").HeroProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HeroStory: Story;

package/lib/components/Index/components/Hero/hero.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Summaries } from "./components/Summaries/summaries";
+import { SummariesStory } from "./components/Summaries/summaries.stories";
+import { Hero } from "./hero";
+const meta = {
+    argTypes: {
+        Summaries: { table: { disable: true } },
+        title: { table: { disable: true } },
+    },
+    component: Hero,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Hero/ExploreView",
+};
+export default meta;
+export const HeroStory = {
+    args: {
+        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
+        title: "Data Explorer",
+    },
+};

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

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

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

@@ -0,0 +1,57 @@
+import { Tooltip as MTooltip, } from "@mui/material";
+import { detectOverflow } from "@popperjs/core";
+import React, { useMemo, useState } from "react";
+import { TooltipContent } from "./tooltip.styles";
+const DEFAULT_FLIP_MODIFIER = {
+    enabled: true,
+    name: "flip",
+    options: {
+        fallbackPlacements: ["bottom", "right", "left"],
+    },
+};
+const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
+    enabled: true,
+    name: "preventOverflow",
+    options: {
+        padding: 16,
+    },
+};
+/**
+ * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
+ */
+export const Tooltip = ({ children, className, title, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    const [maxHeight, setMaxHeight] = useState();
+    const modifiers = useMemo(() => [
+        {
+            enabled: true,
+            fn: ({ state }) => setMaxHeight(calculateMaxHeight(state)),
+            name: "maxHeight",
+            phase: "main",
+            requiresIfExists: ["offset"],
+        },
+        DEFAULT_FLIP_MODIFIER,
+        DEFAULT_PREVENT_OVERFLOW_MODIFIER,
+    ], []);
+    return (React.createElement(MTooltip, { arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+            popper: { modifiers },
+            tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
+        }, title: React.createElement(TooltipContent, null, title), ...props }, children));
+};
+/**
+ * Calculate the max height of the tooltip based on the current popper modifier state.
+ * @param state - Popper modifier state.
+ * @returns tooltip maximum height.
+ */
+function calculateMaxHeight(state) {
+    const overflow = detectOverflow(state);
+    const { placement } = state;
+    if (placement === "left" || placement === "right") {
+        return window.innerHeight - 32;
+    }
+    if (placement === "top") {
+        return state.rects.popper.height - overflow.top - 24;
+    }
+    if (placement === "bottom") {
+        return state.rects.popper.height - overflow.bottom - 24;
+    }
+}

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

@@ -0,0 +1,4 @@
+export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+export const TooltipContent = styled.span `
+  overflow: scroll;
+  overscroll-behavior: none;
+  padding: 8px 12px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

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

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { Tooltip } from "./components/Tooltip/tooltip";
+/**
+ * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
+ */
+export const NTag = ({ className, Tag, TooltipTitle, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    return (React.createElement(Tooltip, { className: className, title: TooltipTitle, ...props }, Tag));
+};

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

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

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

@@ -0,0 +1,29 @@
+import { Chip as MChip, Typography, } from "@mui/material";
+import React, { forwardRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
+import { NTag } from "../NTag/nTag";
+// Template constants
+const MAX_DISPLAYABLE_VALUES = 1;
+/**
+ * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
+ * @param metadataValues - List of metadata values.
+ * @returns the metadata values in a string, each value joined by a comma.
+ */
+function stringifyMetadataValues(metadataValues) {
+    return metadataValues.join(", ");
+}
+/**
+ * Renders tag for NTag component.
+ * Tooltip children require forward ref.
+ */
+const Tag = forwardRef(function Tag(props, ref) {
+    return React.createElement(MChip, { ref: ref, ...props });
+});
+/**
+ * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
+ */
+export const NTagCell = ({ label, TypographyProps, values, }) => {
+    const metadataCount = values.length;
+    const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
+    return (React.createElement(React.Fragment, null, showNTag ? (React.createElement(NTag, { Tag: React.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: React.createElement(Typography, { display: "block", variant: TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (React.createElement(Typography, { key: `${value}${v}`, variant: "inherit", ...TypographyProps }, value))))));
+};

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

@@ -0,0 +1,5 @@
+import { ComponentMeta } from "@storybook/react";
+import { NTagCell } from "./nTagCell";
+declare const _default: ComponentMeta<typeof NTagCell>;
+export default _default;
+export declare const NTagCellStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./nTagCell").NTagCellProps>;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { NTagCell } from "./nTagCell";
+export default {
+    argTypes: {
+        label: { control: "text" },
+        values: { control: "array" },
+    },
+    component: NTagCell,
+    title: "Components/Table/Cell/NTagCell",
+};
+const NTagCellTemplate = (args) => (React.createElement(NTagCell, { ...args }));
+export const NTagCellStory = NTagCellTemplate.bind({});
+NTagCellStory.args = {
+    label: "species",
+    values: ["Homo sapiens", "Mus musculus"],
+};

package/lib/components/Index/components/TitleCell/titleCell.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { LinkProps } from "../../../Links/components/Link/link";
+export interface TitleCellProps extends LinkProps {
+    title: ReactNode;
+}
+export declare const TitleCell: ({ title, ...props }: TitleCellProps) => JSX.Element;