@trackunit/react-table-base-components 1.7.64 → 1.7.66

package/index.cjs.js

@@ -75,30 +75,12 @@ const HighlightCell = ({ className, highlights, dataTestId }) => {
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
 };
 
-const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm"], {
+const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
     variants: {
         hasThumbnail: {
             true: "grid-cols-[min-content_1fr]",
             false: "grid-cols-[1fr]",
         },
-        density: {
-            default: "gap-2",
-            compact: "gap-2",
-        },
-    },
-    defaultVariants: {
-        density: "default",
-    },
-});
-const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm"], {
-    variants: {
-        density: {
-            default: "grid-rows-[min-content_auto]",
-            compact: "grid-cols-[min-content_auto]",
-        },
-    },
-    defaultVariants: {
-        density: "default",
     },
 });
 
@@ -111,14 +93,14 @@ const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IdentityCell = ({ link, className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, dataTestId, 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) => {
+    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, 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: "grid grid-rows-[min-content_auto] items-center text-sm", 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) => {
                                     // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
                                     const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
                                     const isMiddleClick = e.button === 1;
@@ -129,7 +111,7 @@ const IdentityCell = ({ link, className, dataTestId, density = "default", title,
                                     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 }))] })] }));
+                                }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && jsxRuntime.jsx(reactComponents.DetailsList, { className: className, details: details, hasLink: !!link })] })] }));
 };
 
 /**

package/index.esm.js

@@ -73,30 +73,12 @@ const HighlightCell = ({ className, highlights, dataTestId }) => {
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
 };
 
-const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm"], {
+const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
     variants: {
         hasThumbnail: {
             true: "grid-cols-[min-content_1fr]",
             false: "grid-cols-[1fr]",
         },
-        density: {
-            default: "gap-2",
-            compact: "gap-2",
-        },
-    },
-    defaultVariants: {
-        density: "default",
-    },
-});
-const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "text-sm"], {
-    variants: {
-        density: {
-            default: "grid-rows-[min-content_auto]",
-            compact: "grid-cols-[min-content_auto]",
-        },
-    },
-    defaultVariants: {
-        density: "default",
     },
 });
 
@@ -109,14 +91,14 @@ const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "text-sm"], {
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IdentityCell = ({ link, className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, dataTestId, 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) => {
+    return (jsxs("div", { className: cvaIdentityCell({ className, 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: "grid grid-rows-[min-content_auto] items-center text-sm", 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) => {
                                     // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
                                     const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
                                     const isMiddleClick = e.button === 1;
@@ -127,7 +109,7 @@ const IdentityCell = ({ link, className, dataTestId, density = "default", title,
                                     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 }))] })] }));
+                                }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && jsx(DetailsList, { className: className, details: details, hasLink: !!link })] })] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.7.64",
+  "version": "1.7.66",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,7 +10,7 @@
     "react": "19.0.0",
     "@trackunit/react-components": "1.10.3",
     "@trackunit/ui-icons": "1.7.44",
-    "@trackunit/react-form-components": "1.8.63",
+    "@trackunit/react-form-components": "1.8.64",
     "@trackunit/css-class-variance-utilities": "1.7.43",
     "@trackunit/date-and-time-utils": "1.7.43",
     "@trackunit/shared-utils": "1.9.43",

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

@@ -3,13 +3,17 @@ import { ReactElement, ReactNode } from "react";
 export interface IdentityCellProps extends CommonProps {
     className?: string;
     dataTestId?: string;
-    density?: "compact" | "default";
+    /** The main title or name to display */
     title?: ReactNode;
+    /** Array of detail strings to display below the title (e.g., model, brand, serial number) */
     details?: Array<string>;
+    /** Optional thumbnail image or icon to display on the left side (e.g. asset image)*/
     thumbnail?: ReactNode;
+    /** Optional link configuration to make the title clickable */
     link?: {
         href: () => Promise<string>;
         goto: () => Promise<boolean>;
+        /** Accessible title/label for the link */
         title?: string;
     };
 }
@@ -22,4 +26,4 @@ export interface IdentityCellProps extends CommonProps {
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-export declare const IdentityCell: ({ link, className, dataTestId, density, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
+export declare const IdentityCell: ({ link, className, dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;

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

@@ -4,7 +4,7 @@ import { IdentityCellProps } from "./IdentityCell";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ link, className, dataTestId, density, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
+    component: ({ link, className, dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
     argTypes: {};
     parameters: {
         docs: {
@@ -20,3 +20,4 @@ export declare const PackageName: () => ReactElement;
 export declare const Default: Story;
 export declare const WithoutLink: Story;
 export declare const WithLink: Story;
+export declare const Minimal: Story;

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

@@ -1,7 +1,3 @@
 export declare const cvaIdentityCell: (props?: ({
     hasThumbnail?: boolean | null | undefined;
-    density?: "default" | "compact" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaIdentityCellLayout: (props?: ({
-    density?: "default" | "compact" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;