@trackunit/react-table-base-components 1.6.5 → 1.6.7

package/index.cjs.js

@@ -59,6 +59,20 @@ const TimeSince = ({ date, timeZone, locale }) => {
     }
 };
 
+const cvaHighlightCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
+
+/**
+ * The HighlightCell is used for rendering a list of highlights in a table cell
+ *
+ * @param {HighlightCellProps} props - The props for the HighlightCell component
+ * @returns {ReactElement} HighlightCell component
+ */
+const HighlightCell = ({ className, highlights, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, children: highlights.map((highlight, index) => (jsxRuntime.jsx(reactComponents.Highlight, { color: "warning",
+            dataTestId: `${dataTestId}-${index}`,
+            ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
+};
+
 const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm"], {
     variants: {
         hasThumbnail: {
@@ -575,6 +589,7 @@ const cvaTr = cssClassVarianceUtilities.cvaMerge(["w-full", "h-max", "border-b",
 exports.ButtonCell = ButtonCell;
 exports.CheckboxCell = CheckboxCell;
 exports.DateTimeCell = DateTimeCell;
+exports.HighlightCell = HighlightCell;
 exports.IdentityCell = IdentityCell;
 exports.ImageCell = ImageCell;
 exports.IndicatorCell = IndicatorCell;

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Icon, Heading, Indicator, ExternalLink, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, Spinner } from '@trackunit/react-components';
+import { Button, Icon, Highlight, Heading, Indicator, ExternalLink, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, Spinner } from '@trackunit/react-components';
 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';
@@ -57,6 +57,20 @@ const TimeSince = ({ date, timeZone, locale }) => {
     }
 };
 
+const cvaHighlightCell = cvaMerge(["flex", "gap-2"]);
+
+/**
+ * The HighlightCell is used for rendering a list of highlights in a table cell
+ *
+ * @param {HighlightCellProps} props - The props for the HighlightCell component
+ * @returns {ReactElement} HighlightCell component
+ */
+const HighlightCell = ({ className, highlights, dataTestId }) => {
+    return (jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, children: highlights.map((highlight, index) => (jsx(Highlight, { color: "warning",
+            dataTestId: `${dataTestId}-${index}`,
+            ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
+};
+
 const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm"], {
     variants: {
         hasThumbnail: {
@@ -570,4 +584,4 @@ const cvaTr = cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
     },
 });
 
-export { ButtonCell, CheckboxCell, DateTimeCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, RowActions, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { ButtonCell, CheckboxCell, DateTimeCell, HighlightCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, RowActions, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,13 +9,13 @@
   "dependencies": {
     "react": "19.0.0",
     "@js-temporal/polyfill": "^0.4.4",
-    "@trackunit/react-components": "1.7.5",
-    "@trackunit/ui-icons": "1.6.4",
-    "@trackunit/react-form-components": "1.6.5",
-    "@trackunit/css-class-variance-utilities": "1.6.4",
-    "@trackunit/date-and-time-utils": "1.6.4",
-    "@trackunit/shared-utils": "1.8.4",
-    "@trackunit/react-test-setup": "1.3.4"
+    "@trackunit/react-components": "1.7.7",
+    "@trackunit/ui-icons": "1.6.6",
+    "@trackunit/react-form-components": "1.6.7",
+    "@trackunit/css-class-variance-utilities": "1.6.6",
+    "@trackunit/date-and-time-utils": "1.6.6",
+    "@trackunit/shared-utils": "1.8.6",
+    "@trackunit/react-test-setup": "1.3.6"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/HighlightCell/HighlightCell.d.ts

@@ -0,0 +1,27 @@
+import { CommonProps } from "@trackunit/react-components";
+import { HTMLAttributes } from "react";
+export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Array of highlights that the component should show.
+     * Can be strings (which will use default warning color) or objects with Highlight props.
+     */
+    highlights: Array<string> | Array<{
+        color?: "info" | "success" | "warning" | "danger" | "unknown";
+        children: string;
+    }>;
+}
+/**
+ * The HighlightCell is used for rendering a list of highlights in a table cell
+ *
+ * @param {HighlightCellProps} props - The props for the HighlightCell component
+ * @returns {ReactElement} HighlightCell component
+ */
+export declare const HighlightCell: ({ className, highlights, dataTestId }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react-webpack5";
+import { HighlightCell } from "./HighlightCell";
+type Story = StoryObj<typeof HighlightCell>;
+declare const meta: Meta<typeof HighlightCell>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;
+export declare const WithCustomColors: Story;
+export declare const SingleHighlight: Story;

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

@@ -0,0 +1 @@
+export declare const cvaHighlightCell: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/HighlightCell/index.d.ts

@@ -0,0 +1,2 @@
+export { HighlightCell } from "./HighlightCell";
+export type { HighlightCellProps } from "./HighlightCell";

package/src/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/ButtonCell/ButtonCell";
 export * from "./components/CheckboxCell/CheckboxCell";
 export * from "./components/DateTimeCell/DateTimeCell";
+export * from "./components/HighlightCell";
 export * from "./components/IdentityCell/IdentityCell";
 export * from "./components/ImageCell/ImageCell";
 export * from "./components/IndicatorCell/IndicatorCell";