@trackunit/react-table-base-components 1.7.46 → 1.7.48

package/index.cjs.js

@@ -111,8 +111,18 @@ const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IdentityCell = ({ className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsxRuntime.jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", dataTestId: dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: title }) }), details.length > 0 && jsxRuntime.jsx(reactComponents.DetailsList, { className: className, density: density, details: details })] })] }));
+const IdentityCell = ({ link, className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
+    const [href, setHref] = react.useState(undefined);
+    react.useEffect(() => {
+        if (link) {
+            link.href().then(setHref);
+        }
+    }, [link]);
+    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsxRuntime.jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", dataTestId: dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsxRuntime.jsx(reactComponents.ExternalLink, { color: "neutral", href: href ?? "", onClick: async (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    await link.goto();
+                                }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && (jsxRuntime.jsx(reactComponents.DetailsList, { className: className, density: density, details: details, hasLink: !!link }))] })] }));
 };
 
 /**
@@ -148,7 +158,7 @@ const LinkCell = ({ link, type, className, ...rest }) => {
     const handleClick = (event) => {
         event.stopPropagation();
     };
-    return (jsxRuntime.jsx(reactComponents.ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
+    return (jsxRuntime.jsx(reactComponents.ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
 const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Icon, Highlight, Heading, DetailsList, Indicator, ExternalLink, Spinner, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider } from '@trackunit/react-components';
+import { Button, Icon, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto, timeSinceInDays } from '@trackunit/date-and-time-utils';
-import { isValidElement, useState, cloneElement } from 'react';
+import { useState, useEffect, isValidElement, cloneElement } from 'react';
 import { Temporal } from '@js-temporal/polyfill';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
@@ -109,8 +109,18 @@ const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "text-sm"], {
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IdentityCell = ({ className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
-    return (jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", dataTestId: dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: title }) }), details.length > 0 && jsx(DetailsList, { className: className, density: density, details: details })] })] }));
+const IdentityCell = ({ link, className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
+    const [href, setHref] = useState(undefined);
+    useEffect(() => {
+        if (link) {
+            link.href().then(setHref);
+        }
+    }, [link]);
+    return (jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", dataTestId: dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsx(ExternalLink, { color: "neutral", href: href ?? "", onClick: async (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    await link.goto();
+                                }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && (jsx(DetailsList, { className: className, density: density, details: details, hasLink: !!link }))] })] }));
 };
 
 /**
@@ -146,7 +156,7 @@ const LinkCell = ({ link, type, className, ...rest }) => {
     const handleClick = (event) => {
         event.stopPropagation();
     };
-    return (jsx(ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, onClick: handleClick, children: link }));
+    return (jsx(ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
 const cvaMultiRowTableCellSection = cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.7.46",
+  "version": "1.7.48",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.9.44",
-    "@trackunit/ui-icons": "1.7.32",
-    "@trackunit/react-form-components": "1.8.46",
-    "@trackunit/css-class-variance-utilities": "1.7.30",
-    "@trackunit/date-and-time-utils": "1.7.30",
-    "@trackunit/shared-utils": "1.9.30",
-    "@trackunit/react-test-setup": "1.4.30",
+    "@trackunit/react-components": "1.9.46",
+    "@trackunit/ui-icons": "1.7.33",
+    "@trackunit/react-form-components": "1.8.48",
+    "@trackunit/css-class-variance-utilities": "1.7.31",
+    "@trackunit/date-and-time-utils": "1.7.31",
+    "@trackunit/shared-utils": "1.9.31",
+    "@trackunit/react-test-setup": "1.4.31",
     "tailwind-merge": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1"
   },

package/src/components/IdentityCell/IdentityCell.d.ts

@@ -7,6 +7,11 @@ export interface IdentityCellProps extends CommonProps {
     title?: ReactNode;
     details?: Array<string>;
     thumbnail?: ReactNode;
+    link?: {
+        href: () => Promise<string>;
+        goto: () => Promise<boolean>;
+        title?: string;
+    };
 }
 /**
  * The IdentityCell is used for render an identity in a table cell.
@@ -17,4 +22,4 @@ export interface IdentityCellProps extends CommonProps {
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-export declare const IdentityCell: ({ className, dataTestId, density, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
+export declare const IdentityCell: ({ link, className, dataTestId, density, title, details, thumbnail, }: IdentityCellProps) => ReactElement;

package/src/components/IdentityCell/IdentityCell.stories.d.ts

@@ -5,3 +5,5 @@ declare const meta: Meta<typeof IdentityCell>;
 export default meta;
 export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
 export declare const Default: Story;
+export declare const WithoutLink: Story;
+export declare const WithLink: Story;