@trackunit/react-table-base-components 2.1.7-alpha-13587994969.0 → 2.1.8

package/index.cjs.js

@@ -632,12 +632,19 @@ const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whites
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip = false, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count !== null && count !== undefined && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsxRuntime.jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    const isCountDefined = count !== undefined && count !== null;
+    const isMultiValueCell = isCountDefined && count > 1;
+    const unifiedTooltipLabel = isMultiValueCell ? (countTooltip ?? "") : (countTooltip ?? content ?? "");
+    const hasUnifiedTooltipLabel = isMultiValueCell
+        ? countTooltip !== undefined && countTooltip !== null
+        : Boolean(unifiedTooltipLabel);
+    const isUnifiedTooltipEnabled = unifiedTooltip && isCountDefined && (isMultiValueCell || isTooltipVisible) && hasUnifiedTooltipLabel;
+    return count !== null && count !== undefined && count > 0 ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-unified-tooltip` : undefined, disabled: !isUnifiedTooltipEnabled, label: unifiedTooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, onMouseEnter: unifiedTooltip ? onMouseEnter : undefined, ref: ref, style: style, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: isUnifiedTooltipEnabled || !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsxRuntime.jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: updateTooltipVisibility, children: unifiedTooltip ? (jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" })) : (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" }) })) }), count > 1 ? (unifiedTooltip ? (jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", size: "small", children: ["+", count - 1] })) : (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) }))) : null] }) })) : null;
 };
 
 /**

package/index.esm.js

@@ -630,12 +630,19 @@ const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-h
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip = false, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count !== null && count !== undefined && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [icon ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsx(Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    const isCountDefined = count !== undefined && count !== null;
+    const isMultiValueCell = isCountDefined && count > 1;
+    const unifiedTooltipLabel = isMultiValueCell ? (countTooltip ?? "") : (countTooltip ?? content ?? "");
+    const hasUnifiedTooltipLabel = isMultiValueCell
+        ? countTooltip !== undefined && countTooltip !== null
+        : Boolean(unifiedTooltipLabel);
+    const isUnifiedTooltipEnabled = unifiedTooltip && isCountDefined && (isMultiValueCell || isTooltipVisible) && hasUnifiedTooltipLabel;
+    return count !== null && count !== undefined && count > 0 ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-unified-tooltip` : undefined, disabled: !isUnifiedTooltipEnabled, label: unifiedTooltipLabel, placement: "bottom", children: jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, onMouseEnter: unifiedTooltip ? onMouseEnter : undefined, ref: ref, style: style, children: [icon ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: isUnifiedTooltipEnabled || !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: updateTooltipVisibility, children: unifiedTooltip ? (jsx(Text, { className: "inline", children: content ?? "" })) : (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsx(Text, { className: "inline", children: content ?? "" }) })) }), count > 1 ? (unifiedTooltip ? (jsxs(Tag, { className: "inline", color: "neutral", size: "small", children: ["+", count - 1] })) : (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) }))) : null] }) })) : null;
 };
 
 /**

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "2.1.7-alpha-13587994969.0",
+  "version": "2.1.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.1.6-alpha-13587994969.0",
-    "@trackunit/ui-icons": "1.13.17-alpha-13587994969.0",
-    "@trackunit/react-form-components": "2.1.7-alpha-13587994969.0",
-    "@trackunit/css-class-variance-utilities": "1.13.16-alpha-13587994969.0",
-    "@trackunit/date-and-time-utils": "1.13.17-alpha-13587994969.0",
-    "@trackunit/react-date-and-time-hooks": "2.1.7-alpha-13587994969.0",
-    "@trackunit/shared-utils": "1.15.16-alpha-13587994969.0",
-    "@trackunit/i18n-library-translation": "2.0.8-alpha-13587994969.0",
+    "@trackunit/react-components": "2.1.6",
+    "@trackunit/ui-icons": "1.13.17",
+    "@trackunit/react-form-components": "2.1.7",
+    "@trackunit/css-class-variance-utilities": "1.13.16",
+    "@trackunit/date-and-time-utils": "1.13.17",
+    "@trackunit/react-date-and-time-hooks": "2.1.7",
+    "@trackunit/shared-utils": "1.15.16",
+    "@trackunit/i18n-library-translation": "2.0.8",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

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

@@ -1,6 +1,6 @@
 import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
-export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
+type MultiValueTextCellBaseProps = CommonProps & Refable<HTMLDivElement> & Styleable & {
     /**
      * Icon rendered to the left of the text.
      * Provides visual context for the primary value.
@@ -9,6 +9,8 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
     /**
      * Tooltip text for the icon.
      * If omitted, the icon tooltip is disabled.
+     * When `unifiedTooltip` is true and the unified cell tooltip is active, `iconTooltip` is
+     * suppressed so only the unified tooltip is shown (including over the icon).
      */
     iconTooltip?: string;
     /**
@@ -22,19 +24,57 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
      * - If count > 1, a +N badge is shown where N = count - 1.
      */
     count?: number | null;
+};
+type MultiValueTextCellDefaultProps = MultiValueTextCellBaseProps & {
     /**
-     *   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.
+     * 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).
+     * Mouse enter handler for lazy-loading tooltip content (e.g., fetching the remaining items).
+     * Runs on the +N badge by default; when `unifiedTooltip` is true, runs on the cell wrapper instead
+     * (fires once when the cell is first entered).
      */
     onMouseEnter?: MouseEventHandler<HTMLDivElement>;
-}
+    /**
+     * When true, primary text, the optional icon, and the +N badge share one tooltip over the
+     * whole cell. When false, separate tooltips are shown on the truncated content, icon, and +N badge.
+     * When true, `iconTooltip` is not shown while the unified tooltip is active.
+     * Defaults to false.
+     */
+    unifiedTooltip?: false;
+};
+type MultiValueTextCellUnifiedProps = MultiValueTextCellBaseProps & {
+    /**
+     * Tooltip content for the unified cell tooltip and the +N badge (when `unifiedTooltip` is false).
+     * Required when `unifiedTooltip` is true and `count` > 1 (unless lazy-loading via `onMouseEnter`).
+     * When `count` is 1 and the primary text is truncated, `content` is used if `countTooltip` is omitted.
+     */
+    countTooltip?: ReactNode;
+    /**
+     * Mouse enter handler for lazy-loading tooltip content (e.g., fetching the remaining items).
+     * Runs on the cell wrapper (fires once when the cell is first entered).
+     */
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * When true, primary text, the optional icon, and the +N badge share one tooltip over the
+     * whole cell. `iconTooltip` is not shown while the unified tooltip is active.
+     */
+    unifiedTooltip: true;
+} & ({
+    count: 1;
+} | {
+    countTooltip: ReactNode;
+} | {
+    onMouseEnter: MouseEventHandler<HTMLDivElement>;
+});
+/**
+ * When `unifiedTooltip` is true and `count` is not the literal `1`, provide `countTooltip` or `onMouseEnter`.
+ */
+export type MultiValueTextCellProps = MultiValueTextCellDefaultProps | MultiValueTextCellUnifiedProps;
 /**
  * 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.
  * The text content is not editable and will be truncated if the cell is too narrow.
@@ -42,4 +82,5 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};