@trackunit/react-table-base-components 2.1.6 → 2.1.7
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.
package/index.cjs.js
CHANGED
|
@@ -632,12 +632,19 @@ const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whites
|
|
|
632
632
|
* @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
|
|
633
633
|
* @returns {ReactElement} MultiValueTextCell component
|
|
634
634
|
*/
|
|
635
|
-
const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
|
|
635
|
+
const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip = false, }) => {
|
|
636
636
|
const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
|
|
637
637
|
const updateTooltipVisibility = (element) => {
|
|
638
638
|
setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
|
|
639
639
|
};
|
|
640
|
-
|
|
640
|
+
const isCountDefined = count !== undefined && count !== null;
|
|
641
|
+
const isMultiValueCell = isCountDefined && count > 1;
|
|
642
|
+
const unifiedTooltipLabel = isMultiValueCell ? (countTooltip ?? "") : (countTooltip ?? content ?? "");
|
|
643
|
+
const hasUnifiedTooltipLabel = isMultiValueCell
|
|
644
|
+
? countTooltip !== undefined && countTooltip !== null
|
|
645
|
+
: Boolean(unifiedTooltipLabel);
|
|
646
|
+
const isUnifiedTooltipEnabled = unifiedTooltip && isCountDefined && (isMultiValueCell || isTooltipVisible) && hasUnifiedTooltipLabel;
|
|
647
|
+
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;
|
|
641
648
|
};
|
|
642
649
|
|
|
643
650
|
/**
|
package/index.esm.js
CHANGED
|
@@ -630,12 +630,19 @@ const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-h
|
|
|
630
630
|
* @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
|
|
631
631
|
* @returns {ReactElement} MultiValueTextCell component
|
|
632
632
|
*/
|
|
633
|
-
const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
|
|
633
|
+
const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, unifiedTooltip = false, }) => {
|
|
634
634
|
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
|
|
635
635
|
const updateTooltipVisibility = (element) => {
|
|
636
636
|
setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
|
|
637
637
|
};
|
|
638
|
-
|
|
638
|
+
const isCountDefined = count !== undefined && count !== null;
|
|
639
|
+
const isMultiValueCell = isCountDefined && count > 1;
|
|
640
|
+
const unifiedTooltipLabel = isMultiValueCell ? (countTooltip ?? "") : (countTooltip ?? content ?? "");
|
|
641
|
+
const hasUnifiedTooltipLabel = isMultiValueCell
|
|
642
|
+
? countTooltip !== undefined && countTooltip !== null
|
|
643
|
+
: Boolean(unifiedTooltipLabel);
|
|
644
|
+
const isUnifiedTooltipEnabled = unifiedTooltip && isCountDefined && (isMultiValueCell || isTooltipVisible) && hasUnifiedTooltipLabel;
|
|
645
|
+
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;
|
|
639
646
|
};
|
|
640
647
|
|
|
641
648
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
|
|
2
2
|
import { MouseEventHandler, ReactElement, ReactNode } from "react";
|
|
3
|
-
|
|
3
|
+
type MultiValueTextCellBaseProps = CommonProps & Refable<HTMLDivElement> & Styleable & {
|
|
4
4
|
/**
|
|
5
5
|
* Icon rendered to the left of the text.
|
|
6
6
|
* Provides visual context for the primary value.
|
|
@@ -9,6 +9,8 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
|
|
|
9
9
|
/**
|
|
10
10
|
* Tooltip text for the icon.
|
|
11
11
|
* If omitted, the icon tooltip is disabled.
|
|
12
|
+
* When `unifiedTooltip` is true and the unified cell tooltip is active, `iconTooltip` is
|
|
13
|
+
* suppressed so only the unified tooltip is shown (including over the icon).
|
|
12
14
|
*/
|
|
13
15
|
iconTooltip?: string;
|
|
14
16
|
/**
|
|
@@ -22,19 +24,57 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
|
|
|
22
24
|
* - If count > 1, a +N badge is shown where N = count - 1.
|
|
23
25
|
*/
|
|
24
26
|
count?: number | null;
|
|
27
|
+
};
|
|
28
|
+
type MultiValueTextCellDefaultProps = MultiValueTextCellBaseProps & {
|
|
25
29
|
/**
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
+
* Tooltip content for the +N badge.
|
|
31
|
+
* Accepts strings, React elements, or any ReactNode.
|
|
32
|
+
* If omitted, the badge tooltip is disabled.
|
|
33
|
+
* Recommended: use the `ListTooltip` component to render a list of the remaining items.
|
|
30
34
|
*/
|
|
31
35
|
countTooltip?: ReactNode;
|
|
32
36
|
/**
|
|
33
|
-
* Mouse enter handler for the
|
|
34
|
-
*
|
|
37
|
+
* Mouse enter handler for lazy-loading tooltip content (e.g., fetching the remaining items).
|
|
38
|
+
* Runs on the +N badge by default; when `unifiedTooltip` is true, runs on the cell wrapper instead
|
|
39
|
+
* (fires once when the cell is first entered).
|
|
35
40
|
*/
|
|
36
41
|
onMouseEnter?: MouseEventHandler<HTMLDivElement>;
|
|
37
|
-
|
|
42
|
+
/**
|
|
43
|
+
* When true, primary text, the optional icon, and the +N badge share one tooltip over the
|
|
44
|
+
* whole cell. When false, separate tooltips are shown on the truncated content, icon, and +N badge.
|
|
45
|
+
* When true, `iconTooltip` is not shown while the unified tooltip is active.
|
|
46
|
+
* Defaults to false.
|
|
47
|
+
*/
|
|
48
|
+
unifiedTooltip?: false;
|
|
49
|
+
};
|
|
50
|
+
type MultiValueTextCellUnifiedProps = MultiValueTextCellBaseProps & {
|
|
51
|
+
/**
|
|
52
|
+
* Tooltip content for the unified cell tooltip and the +N badge (when `unifiedTooltip` is false).
|
|
53
|
+
* Required when `unifiedTooltip` is true and `count` > 1 (unless lazy-loading via `onMouseEnter`).
|
|
54
|
+
* When `count` is 1 and the primary text is truncated, `content` is used if `countTooltip` is omitted.
|
|
55
|
+
*/
|
|
56
|
+
countTooltip?: ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* Mouse enter handler for lazy-loading tooltip content (e.g., fetching the remaining items).
|
|
59
|
+
* Runs on the cell wrapper (fires once when the cell is first entered).
|
|
60
|
+
*/
|
|
61
|
+
onMouseEnter?: MouseEventHandler<HTMLDivElement>;
|
|
62
|
+
/**
|
|
63
|
+
* When true, primary text, the optional icon, and the +N badge share one tooltip over the
|
|
64
|
+
* whole cell. `iconTooltip` is not shown while the unified tooltip is active.
|
|
65
|
+
*/
|
|
66
|
+
unifiedTooltip: true;
|
|
67
|
+
} & ({
|
|
68
|
+
count: 1;
|
|
69
|
+
} | {
|
|
70
|
+
countTooltip: ReactNode;
|
|
71
|
+
} | {
|
|
72
|
+
onMouseEnter: MouseEventHandler<HTMLDivElement>;
|
|
73
|
+
});
|
|
74
|
+
/**
|
|
75
|
+
* When `unifiedTooltip` is true and `count` is not the literal `1`, provide `countTooltip` or `onMouseEnter`.
|
|
76
|
+
*/
|
|
77
|
+
export type MultiValueTextCellProps = MultiValueTextCellDefaultProps | MultiValueTextCellUnifiedProps;
|
|
38
78
|
/**
|
|
39
79
|
* 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.
|
|
40
80
|
* 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
|
|
|
42
82
|
* @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
|
|
43
83
|
* @returns {ReactElement} MultiValueTextCell component
|
|
44
84
|
*/
|
|
45
|
-
export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
85
|
+
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;
|
|
86
|
+
export {};
|