@trackunit/react-widgets 2.2.132 → 2.2.135
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 +11 -5
- package/index.esm.js +12 -6
- package/package.json +8 -8
package/index.cjs.js
CHANGED
|
@@ -235,7 +235,7 @@ const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCanc
|
|
|
235
235
|
}, children: t("widget.edit.save") })] })] }));
|
|
236
236
|
};
|
|
237
237
|
|
|
238
|
-
const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "flex", "flex-col"
|
|
238
|
+
const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "flex", "flex-col"], {
|
|
239
239
|
variants: {
|
|
240
240
|
variant: {
|
|
241
241
|
small: ["px-3"],
|
|
@@ -247,7 +247,7 @@ const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "fl
|
|
|
247
247
|
variant: "default",
|
|
248
248
|
},
|
|
249
249
|
});
|
|
250
|
-
const cvaWidgetKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "
|
|
250
|
+
const cvaWidgetKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "place-items-end", "gap-2", "min-h-[1.7lh]"]);
|
|
251
251
|
const cvaWidgetKPITitleText = cssClassVarianceUtilities.cvaMerge([
|
|
252
252
|
"leading-tight",
|
|
253
253
|
"!line-clamp-2",
|
|
@@ -258,7 +258,13 @@ const cvaWidgetKPITitleText = cssClassVarianceUtilities.cvaMerge([
|
|
|
258
258
|
"font-medium",
|
|
259
259
|
"text-neutral-500",
|
|
260
260
|
]);
|
|
261
|
-
const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge([
|
|
261
|
+
const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge([
|
|
262
|
+
"truncate",
|
|
263
|
+
"whitespace-nowrap",
|
|
264
|
+
"text-3xl",
|
|
265
|
+
"font-medium",
|
|
266
|
+
"!leading-none",
|
|
267
|
+
]);
|
|
262
268
|
const cvaWidgetKPITrendValueText = cssClassVarianceUtilities.cvaMerge([
|
|
263
269
|
"text-xs",
|
|
264
270
|
"font-normal",
|
|
@@ -308,10 +314,10 @@ const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate
|
|
|
308
314
|
* @returns {ReactElement} WidgetKPI component
|
|
309
315
|
*/
|
|
310
316
|
const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
|
|
311
|
-
return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId
|
|
317
|
+
return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": 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, { gap: 6, height: [16, 24, 16], lines: 3, width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { gap: 6, height: [16, 24], lines: 2, width: [100, 40] })) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-center gap-0.5", 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, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-baseline justify-start", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxRuntime.jsx("div", { className: cvaWidgetKPIValueContainer({
|
|
312
318
|
isDefaultAndHasTrendValue: Boolean(trend?.value),
|
|
313
319
|
className,
|
|
314
|
-
}), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }),
|
|
320
|
+
}), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), jsxRuntime.jsx("div", { className: "flex min-h-[1lh] items-center gap-1 overflow-hidden", children: trend ? (jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit })) : notice !== undefined ? (jsxRuntime.jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsxRuntime.jsx("span", { children: notice }) : notice })) : null })] })) }));
|
|
315
321
|
};
|
|
316
322
|
const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
|
|
317
323
|
if (!trend) {
|
package/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
|
|
3
3
|
import { EmptyState, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text } from '@trackunit/react-components';
|
|
4
4
|
import { useState } from 'react';
|
|
@@ -233,7 +233,7 @@ const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCanc
|
|
|
233
233
|
}, children: t("widget.edit.save") })] })] }));
|
|
234
234
|
};
|
|
235
235
|
|
|
236
|
-
const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col"
|
|
236
|
+
const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col"], {
|
|
237
237
|
variants: {
|
|
238
238
|
variant: {
|
|
239
239
|
small: ["px-3"],
|
|
@@ -245,7 +245,7 @@ const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col", "flex-1",
|
|
|
245
245
|
variant: "default",
|
|
246
246
|
},
|
|
247
247
|
});
|
|
248
|
-
const cvaWidgetKPIHeader = cvaMerge(["flex", "flex-row", "
|
|
248
|
+
const cvaWidgetKPIHeader = cvaMerge(["flex", "flex-row", "place-items-end", "gap-2", "min-h-[1.7lh]"]);
|
|
249
249
|
const cvaWidgetKPITitleText = cvaMerge([
|
|
250
250
|
"leading-tight",
|
|
251
251
|
"!line-clamp-2",
|
|
@@ -256,7 +256,13 @@ const cvaWidgetKPITitleText = cvaMerge([
|
|
|
256
256
|
"font-medium",
|
|
257
257
|
"text-neutral-500",
|
|
258
258
|
]);
|
|
259
|
-
const cvaWidgetKPIvalueText = cvaMerge([
|
|
259
|
+
const cvaWidgetKPIvalueText = cvaMerge([
|
|
260
|
+
"truncate",
|
|
261
|
+
"whitespace-nowrap",
|
|
262
|
+
"text-3xl",
|
|
263
|
+
"font-medium",
|
|
264
|
+
"!leading-none",
|
|
265
|
+
]);
|
|
260
266
|
const cvaWidgetKPITrendValueText = cvaMerge([
|
|
261
267
|
"text-xs",
|
|
262
268
|
"font-normal",
|
|
@@ -306,10 +312,10 @@ const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
|
|
|
306
312
|
* @returns {ReactElement} WidgetKPI component
|
|
307
313
|
*/
|
|
308
314
|
const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
|
|
309
|
-
return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId
|
|
315
|
+
return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": 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, { gap: 6, height: [16, 24, 16], lines: 3, width: [100, 40, 60] })) : (jsx(SkeletonLines, { gap: 6, height: [16, 24], lines: 2, width: [100, 40] })) })) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex flex-1 flex-col justify-center gap-0.5", 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, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom-start", children: jsx(Text, { className: cvaWidgetKPITitleText(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsx("div", { className: "flex items-baseline justify-start", children: jsx(Text, { className: cvaWidgetKPIvalueText(), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsx("div", { className: cvaWidgetKPIValueContainer({
|
|
310
316
|
isDefaultAndHasTrendValue: Boolean(trend?.value),
|
|
311
317
|
className,
|
|
312
|
-
}), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }),
|
|
318
|
+
}), children: jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), jsx("div", { className: "flex min-h-[1lh] items-center gap-1 overflow-hidden", children: trend ? (jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit })) : notice !== undefined ? (jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsx("span", { children: notice }) : notice })) : null })] })) }));
|
|
313
319
|
};
|
|
314
320
|
const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
|
|
315
321
|
if (!trend) {
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-widgets",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.135",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
7
|
-
"node": ">=
|
|
7
|
+
"node": ">=24.x"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"react": "19.0.0",
|
|
11
|
-
"@trackunit/react-components": "1.10.
|
|
12
|
-
"@trackunit/iris-app-runtime-core": "1.8.
|
|
13
|
-
"@trackunit/css-class-variance-utilities": "1.7.
|
|
14
|
-
"@trackunit/ui-design-tokens": "1.7.
|
|
15
|
-
"@trackunit/ui-icons": "1.7.
|
|
16
|
-
"@trackunit/i18n-library-translation": "1.7.
|
|
11
|
+
"@trackunit/react-components": "1.10.63",
|
|
12
|
+
"@trackunit/iris-app-runtime-core": "1.8.98",
|
|
13
|
+
"@trackunit/css-class-variance-utilities": "1.7.88",
|
|
14
|
+
"@trackunit/ui-design-tokens": "1.7.88",
|
|
15
|
+
"@trackunit/ui-icons": "1.7.89",
|
|
16
|
+
"@trackunit/i18n-library-translation": "1.7.106"
|
|
17
17
|
},
|
|
18
18
|
"module": "./index.esm.js",
|
|
19
19
|
"main": "./index.cjs.js",
|