@trackunit/react-widgets 2.1.36 → 2.1.38

package/index.cjs.js

@@ -273,7 +273,17 @@ const cvaWidgetKPITrendPercentage = cssClassVarianceUtilities.cvaMerge(["text-xs
         color: "success",
     },
 });
-const cvaWidgetKPINotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1", "text-xs", "font-normal"]);
+const cvaWidgetKPINotice = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "items-center",
+    "gap-1",
+    "text-xs",
+    "font-normal",
+    // Truncation of children and nested children
+    "truncate",
+    "*:truncate",
+    "**:truncate",
+]);
 const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
         isDefaultAndHasTrendValue: {
@@ -296,7 +306,7 @@ const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltip
     return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: cvaWidgetKPIHeader(), children: jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsxRuntime.jsx(reactComponents.Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-end", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxRuntime.jsx("div", { className: cvaWidgetKPIValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(trend?.value),
                                         className,
-                                    }), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : notice ? (jsxRuntime.jsx("div", { className: cvaWidgetKPINotice(), children: jsxRuntime.jsx("div", { className: "flex flex-1 items-center gap-1", children: notice }) })) : null] })) }));
+                                    }), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : notice ? (jsxRuntime.jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsxRuntime.jsx("span", { children: notice }) : notice })) : null] })) }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {

package/index.esm.js

@@ -271,7 +271,17 @@ const cvaWidgetKPITrendPercentage = cvaMerge(["text-xs", "font-semibold"], {
         color: "success",
     },
 });
-const cvaWidgetKPINotice = cvaMerge(["flex", "items-center", "gap-1", "text-xs", "font-normal"]);
+const cvaWidgetKPINotice = cvaMerge([
+    "flex",
+    "items-center",
+    "gap-1",
+    "text-xs",
+    "font-normal",
+    // Truncation of children and nested children
+    "truncate",
+    "*:truncate",
+    "**:truncate",
+]);
 const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
     variants: {
         isDefaultAndHasTrendValue: {
@@ -294,7 +304,7 @@ const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltip
     return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsx(SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsx(SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsx("div", { className: cvaWidgetKPIHeader(), children: jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsx(Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsx(Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsx("div", { className: "flex items-end", children: jsx(Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsx("div", { className: cvaWidgetKPIValueContainer({
                                         isDefaultAndHasTrendValue: Boolean(trend?.value),
                                         className,
-                                    }), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsx("div", { className: "flex items-center gap-1", children: jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : notice ? (jsx("div", { className: cvaWidgetKPINotice(), children: jsx("div", { className: "flex flex-1 items-center gap-1", children: notice }) })) : null] })) }));
+                                    }), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsx("div", { className: "flex items-center gap-1", children: jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : notice ? (jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsx("span", { children: notice }) : notice })) : null] })) }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.1.36",
+  "version": "2.1.38",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.7.31",
+    "@trackunit/react-components": "1.7.32",
     "@trackunit/iris-app-runtime-core": "1.7.25",
     "@trackunit/css-class-variance-utilities": "1.6.23",
     "@trackunit/ui-design-tokens": "1.6.24",

package/src/WidgetKPI/WidgetKPI.d.ts

@@ -60,6 +60,7 @@ export interface WidgetKPIProps extends CommonProps {
     /**
      * Custom notice or text to display in the trend area
      * If provided, this will override the trend display
+     * Text will be truncated to fit on a single line
      */
     notice?: ReactNode;
 }