@trackunit/react-table-base-components 1.6.90 → 1.6.91

package/index.cjs.js

@@ -166,13 +166,58 @@ const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
     return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
+/**
+ * Generic list to be used as tooltip content.
+ * The component is data-shape agnostic. It supports primitives, React elements,
+ * and arbitrary objects (with a JSON.stringify fallback).
+ *
+ * @template TItem Element type of the list.
+ * @param {ListTooltipProps<TItem>} props Component props.
+ * @returns {ReactNode} Tooltip list markup.
+ */
+const ListTooltip = ({ items, dataTestId, getLabel, getKey, loading, }) => {
+    const toDisplay = (item, index) => {
+        if (getLabel) {
+            return getLabel(item, index);
+        }
+        if (react.isValidElement(item)) {
+            return item;
+        }
+        const kind = typeof item;
+        if (kind === "string" || kind === "number" || kind === "boolean") {
+            return String(item);
+        }
+        if (item === null) {
+            return "";
+        }
+        try {
+            return JSON.stringify(item);
+        }
+        catch {
+            return String(item);
+        }
+    };
+    const toKey = (item, index) => {
+        if (getKey) {
+            return getKey(item, index);
+        }
+        const val = toDisplay(item, index);
+        return typeof val === "string" || typeof val === "number" ? `${val}-${index}` : index;
+    };
+    if (loading) {
+        return jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", mode: "dark" });
+    }
+    return (jsxRuntime.jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, children: items.map((item, index) => {
+            const label = toDisplay(item, index);
+            if (label === "" || label === null || label === undefined) {
+                return null;
+            }
+            return (jsxRuntime.jsx("li", { className: "list-disc font-normal", children: label }, toKey(item, index)));
+        }) }));
+};
+
 const cvaMultiValueTextCellWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
-const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge([
-    "whitespace-no-wrap",
-    "overflow-hidden",
-    "text-ellipsis",
-    "text-sm",
-]);
+const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
 
 /**
  * The `<MultiValueTextCell>` component is used for displaying the text values with multiple values in a table cell. First element is displayed as a text, the rest of the values are displayed as a number. Icon can be passed as an optional prop.
@@ -580,6 +625,7 @@ exports.IdentityCell = IdentityCell;
 exports.ImageCell = ImageCell;
 exports.IndicatorCell = IndicatorCell;
 exports.LinkCell = LinkCell;
+exports.ListTooltip = ListTooltip;
 exports.MultiRowTableCell = MultiRowTableCell;
 exports.MultiValueTextCell = MultiValueTextCell;
 exports.NoticeCell = NoticeCell;

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Icon, Highlight, Heading, DetailsList, Indicator, ExternalLink, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, Spinner } from '@trackunit/react-components';
+import { Button, Icon, Highlight, Heading, DetailsList, Indicator, ExternalLink, 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 { useState, isValidElement, cloneElement } from 'react';
+import { isValidElement, useState, cloneElement } from 'react';
 import { Temporal } from '@js-temporal/polyfill';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
@@ -164,13 +164,58 @@ const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
     return (jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
+/**
+ * Generic list to be used as tooltip content.
+ * The component is data-shape agnostic. It supports primitives, React elements,
+ * and arbitrary objects (with a JSON.stringify fallback).
+ *
+ * @template TItem Element type of the list.
+ * @param {ListTooltipProps<TItem>} props Component props.
+ * @returns {ReactNode} Tooltip list markup.
+ */
+const ListTooltip = ({ items, dataTestId, getLabel, getKey, loading, }) => {
+    const toDisplay = (item, index) => {
+        if (getLabel) {
+            return getLabel(item, index);
+        }
+        if (isValidElement(item)) {
+            return item;
+        }
+        const kind = typeof item;
+        if (kind === "string" || kind === "number" || kind === "boolean") {
+            return String(item);
+        }
+        if (item === null) {
+            return "";
+        }
+        try {
+            return JSON.stringify(item);
+        }
+        catch {
+            return String(item);
+        }
+    };
+    const toKey = (item, index) => {
+        if (getKey) {
+            return getKey(item, index);
+        }
+        const val = toDisplay(item, index);
+        return typeof val === "string" || typeof val === "number" ? `${val}-${index}` : index;
+    };
+    if (loading) {
+        return jsx(Spinner, { centering: "centered", mode: "dark" });
+    }
+    return (jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, children: items.map((item, index) => {
+            const label = toDisplay(item, index);
+            if (label === "" || label === null || label === undefined) {
+                return null;
+            }
+            return (jsx("li", { className: "list-disc font-normal", children: label }, toKey(item, index)));
+        }) }));
+};
+
 const cvaMultiValueTextCellWrapper = cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
-const cvaMultiValueTextCellTooltip = cvaMerge([
-    "whitespace-no-wrap",
-    "overflow-hidden",
-    "text-ellipsis",
-    "text-sm",
-]);
+const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
 
 /**
  * The `<MultiValueTextCell>` component is used for displaying the text values with multiple values in a table cell. First element is displayed as a text, the rest of the values are displayed as a number. Icon can be passed as an optional prop.
@@ -570,4 +615,4 @@ const cvaTr = cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
     },
 });
 
-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 };
+export { ButtonCell, CheckboxCell, DateTimeCell, HighlightCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, ListTooltip, 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.90",
+  "version": "1.6.91",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.8.38",
+    "@trackunit/react-components": "1.8.39",
     "@trackunit/ui-icons": "1.6.59",
-    "@trackunit/react-form-components": "1.7.54",
+    "@trackunit/react-form-components": "1.7.55",
     "@trackunit/css-class-variance-utilities": "1.6.60",
     "@trackunit/date-and-time-utils": "1.6.60",
     "@trackunit/shared-utils": "1.8.61",

package/src/components/MultiValueTextCell/ListTooltip.d.ts

@@ -0,0 +1,34 @@
+import { Key, ReactNode } from "react";
+/**
+ * Props for a generic tooltip list component.
+ *
+ * @template TItem Element type of the list.
+ */
+export type ListTooltipProps<TItem = unknown> = {
+    /** Items to render inside the tooltip. */
+    items: Array<TItem>;
+    /** Data test id for testing. */
+    dataTestId?: string;
+    /**
+     * Custom label extractor. If omitted, strings/numbers/booleans are stringified,
+     * React elements are returned as-is, and other objects are serialized.
+     */
+    getLabel?: (item: TItem, index: number) => ReactNode;
+    /** Custom key generator for list items. */
+    getKey?: (item: TItem, index: number) => Key;
+    /**
+     * Controls the loading state. When true, the list is replaced with a centered dark Spinner.
+     * Useful while data is being fetched. Defaults to false.
+     */
+    loading?: boolean;
+};
+/**
+ * Generic list to be used as tooltip content.
+ * The component is data-shape agnostic. It supports primitives, React elements,
+ * and arbitrary objects (with a JSON.stringify fallback).
+ *
+ * @template TItem Element type of the list.
+ * @param {ListTooltipProps<TItem>} props Component props.
+ * @returns {ReactNode} Tooltip list markup.
+ */
+export declare const ListTooltip: <TItem = unknown>({ items, dataTestId, getLabel, getKey, loading, }: ListTooltipProps<TItem>) => import("react/jsx-runtime").JSX.Element;

package/src/components/MultiValueTextCell/MultiValueTextCell.d.ts

@@ -1,11 +1,38 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 export interface MultiValueTextCellProps extends CommonProps {
+    /**
+     * Icon rendered to the left of the text.
+     * Provides visual context for the primary value.
+     */
     icon?: ReactElement;
+    /**
+     * Tooltip text for the icon.
+     * If omitted, the icon tooltip is disabled.
+     */
     iconTooltip?: string;
+    /**
+     * The first (primary) value displayed as plain text in the cell.
+     * The text is truncated to fit the cell and, when clipped, is shown in a tooltip.
+     */
     content?: string;
+    /**
+     * Total number of values.
+     * - The component renders only when count > 0.
+     * - If count > 1, a +N badge is shown where N = count - 1.
+     */
     count?: number | null;
+    /**
+     *   Tooltip content for the +N badge.
+     *   Accepts strings, React elements, or any ReactNode.
+     *   If omitted, the badge tooltip is disabled.
+     *   Recommended: use the `ListTooltip` component to render a list of the remaining items.
+     */
     countTooltip?: ReactNode;
+    /**
+     * Mouse enter handler for the badge.
+     * Useful for lazy-loading tooltip content (e.g., fetching the remaining items).
+     */
     onMouseEnter?: MouseEventHandler<HTMLDivElement>;
 }
 /**

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

@@ -7,3 +7,6 @@ export default meta;
 export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
 export declare const Default: Story;
 export declare const Example: Story;
+export declare const PlusBadgeWithTooltip: Story;
+export declare const LazyLoadedOnHover: Story;
+export declare const WithIcon: Story;

package/src/index.d.ts

@@ -7,6 +7,7 @@ export * from "./components/ImageCell/ImageCell";
 export * from "./components/IndicatorCell/IndicatorCell";
 export * from "./components/LinkCell/LinkCell";
 export * from "./components/MultiRowTableCell/MultiRowTableCell";
+export * from "./components/MultiValueTextCell/ListTooltip";
 export * from "./components/MultiValueTextCell/MultiValueTextCell";
 export * from "./components/NoticeCell/NoticeCell";
 export * from "./components/NumberCell/NumberCell";