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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/index.cjs.js +4 -22
  2. package/index.esm.js +4 -22
  3. package/package.json +1 -1
  4. package/src/components/IdentityCell/IdentityCell.d.ts +6 -2
  5. package/src/components/IdentityCell/IdentityCell.stories.d.ts +2 -1
  6. package/src/components/IdentityCell/IdentityCell.variants.d.ts +0 -4
package/index.cjs.js CHANGED
@@ -75,30 +75,12 @@ const HighlightCell = ({ className, highlights, dataTestId }) => {
75
75
  ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
76
76
  };
77
77
 
78
- const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm"], {
78
+ const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
79
79
  variants: {
80
80
  hasThumbnail: {
81
81
  true: "grid-cols-[min-content_1fr]",
82
82
  false: "grid-cols-[1fr]",
83
83
  },
84
- density: {
85
- default: "gap-2",
86
- compact: "gap-2",
87
- },
88
- },
89
- defaultVariants: {
90
- density: "default",
91
- },
92
- });
93
- const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm"], {
94
- variants: {
95
- density: {
96
- default: "grid-rows-[min-content_auto]",
97
- compact: "grid-cols-[min-content_auto]",
98
- },
99
- },
100
- defaultVariants: {
101
- density: "default",
102
84
  },
103
85
  });
104
86
 
@@ -111,14 +93,14 @@ const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items
111
93
  * @param {IdentityCellProps} props - The props for the LinkCell component
112
94
  * @returns {ReactElement} LinkCell component
113
95
  */
114
- const IdentityCell = ({ link, className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
96
+ const IdentityCell = ({ link, className, dataTestId, title, details = [], thumbnail, }) => {
115
97
  const [href, setHref] = react.useState(undefined);
116
98
  react.useEffect(() => {
117
99
  if (link) {
118
100
  link.href().then(setHref);
119
101
  }
120
102
  }, [link]);
121
- 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) => {
103
+ 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) => {
122
104
  // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
123
105
  const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
124
106
  const isMiddleClick = e.button === 1;
@@ -129,7 +111,7 @@ const IdentityCell = ({ link, className, dataTestId, density = "default", title,
129
111
  e.preventDefault();
130
112
  e.stopPropagation();
131
113
  await link.goto();
132
- }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && (jsxRuntime.jsx(reactComponents.DetailsList, { className: className, density: density, details: details, hasLink: !!link }))] })] }));
114
+ }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && jsxRuntime.jsx(reactComponents.DetailsList, { className: className, details: details, hasLink: !!link })] })] }));
133
115
  };
134
116
 
135
117
  /**
package/index.esm.js CHANGED
@@ -73,30 +73,12 @@ const HighlightCell = ({ className, highlights, dataTestId }) => {
73
73
  ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
74
74
  };
75
75
 
76
- const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm"], {
76
+ const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
77
77
  variants: {
78
78
  hasThumbnail: {
79
79
  true: "grid-cols-[min-content_1fr]",
80
80
  false: "grid-cols-[1fr]",
81
81
  },
82
- density: {
83
- default: "gap-2",
84
- compact: "gap-2",
85
- },
86
- },
87
- defaultVariants: {
88
- density: "default",
89
- },
90
- });
91
- const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "text-sm"], {
92
- variants: {
93
- density: {
94
- default: "grid-rows-[min-content_auto]",
95
- compact: "grid-cols-[min-content_auto]",
96
- },
97
- },
98
- defaultVariants: {
99
- density: "default",
100
82
  },
101
83
  });
102
84
 
@@ -109,14 +91,14 @@ const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "text-sm"], {
109
91
  * @param {IdentityCellProps} props - The props for the LinkCell component
110
92
  * @returns {ReactElement} LinkCell component
111
93
  */
112
- const IdentityCell = ({ link, className, dataTestId, density = "default", title, details = [], thumbnail, }) => {
94
+ const IdentityCell = ({ link, className, dataTestId, title, details = [], thumbnail, }) => {
113
95
  const [href, setHref] = useState(undefined);
114
96
  useEffect(() => {
115
97
  if (link) {
116
98
  link.href().then(setHref);
117
99
  }
118
100
  }, [link]);
119
- 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) => {
101
+ 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) => {
120
102
  // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
121
103
  const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
122
104
  const isMiddleClick = e.button === 1;
@@ -127,7 +109,7 @@ const IdentityCell = ({ link, className, dataTestId, density = "default", title,
127
109
  e.preventDefault();
128
110
  e.stopPropagation();
129
111
  await link.goto();
130
- }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && (jsx(DetailsList, { className: className, density: density, details: details, hasLink: !!link }))] })] }));
112
+ }, target: "_blank", title: link.title, children: title })) }) }), details.length > 0 && jsx(DetailsList, { className: className, details: details, hasLink: !!link })] })] }));
131
113
  };
132
114
 
133
115
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table-base-components",
3
- "version": "1.7.65",
3
+ "version": "1.7.66",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/components/IdentityCell/IdentityCell.d.ts CHANGED
@@ -3,13 +3,17 @@ import { ReactElement, ReactNode } from "react";
3
3
  export interface IdentityCellProps extends CommonProps {
4
4
  className?: string;
5
5
  dataTestId?: string;
6
- density?: "compact" | "default";
6
+ /** The main title or name to display */
7
7
  title?: ReactNode;
8
+ /** Array of detail strings to display below the title (e.g., model, brand, serial number) */
8
9
  details?: Array<string>;
10
+ /** Optional thumbnail image or icon to display on the left side (e.g. asset image)*/
9
11
  thumbnail?: ReactNode;
12
+ /** Optional link configuration to make the title clickable */
10
13
  link?: {
11
14
  href: () => Promise<string>;
12
15
  goto: () => Promise<boolean>;
16
+ /** Accessible title/label for the link */
13
17
  title?: string;
14
18
  };
15
19
  }
@@ -22,4 +26,4 @@ export interface IdentityCellProps extends CommonProps {
22
26
  * @param {IdentityCellProps} props - The props for the LinkCell component
23
27
  * @returns {ReactElement} LinkCell component
24
28
  */
25
- export declare const IdentityCell: ({ link, className, dataTestId, density, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
29
+ export declare const IdentityCell: ({ link, className, dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
package/src/components/IdentityCell/IdentityCell.stories.d.ts CHANGED
@@ -4,7 +4,7 @@ import { IdentityCellProps } from "./IdentityCell";
4
4
  type Story = StoryObj<typeof meta>;
5
5
  declare const meta: {
6
6
  title: string;
7
- component: ({ link, className, dataTestId, density, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
7
+ component: ({ link, className, dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
8
8
  argTypes: {};
9
9
  parameters: {
10
10
  docs: {
@@ -20,3 +20,4 @@ export declare const PackageName: () => ReactElement;
20
20
  export declare const Default: Story;
21
21
  export declare const WithoutLink: Story;
22
22
  export declare const WithLink: Story;
23
+ export declare const Minimal: Story;
package/src/components/IdentityCell/IdentityCell.variants.d.ts CHANGED
@@ -1,7 +1,3 @@
1
1
  export declare const cvaIdentityCell: (props?: ({
2
2
  hasThumbnail?: boolean | null | undefined;
3
- density?: "default" | "compact" | null | undefined;
4
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
5
- export declare const cvaIdentityCellLayout: (props?: ({
6
- density?: "default" | "compact" | null | undefined;
7
3
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;