@trackunit/react-widgets 2.1.73 → 2.1.74

package/index.cjs.js

@@ -302,11 +302,11 @@ const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
+const WidgetKPI = ({ title, value, loading = false, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
     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: typeof notice === "string" || typeof notice === "number" ? jsxRuntime.jsx("span", { children: notice }) : 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 !== undefined ? (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

@@ -300,11 +300,11 @@ const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
+const WidgetKPI = ({ title, value, loading = false, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", notice, ...rest }) => {
     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: typeof notice === "string" || typeof notice === "number" ? jsx("span", { children: notice }) : 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 !== undefined ? (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.73",
+  "version": "2.1.74",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,15 +8,15 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.8.22",
-    "@trackunit/iris-app-runtime-core": "1.7.51",
-    "@trackunit/css-class-variance-utilities": "1.6.49",
-    "@trackunit/ui-design-tokens": "1.6.51",
-    "@trackunit/ui-icons": "1.6.48",
-    "@trackunit/react-table-pagination": "1.6.48",
-    "@trackunit/shared-utils": "1.8.49",
-    "@trackunit/i18n-library-translation": "1.6.53",
-    "@trackunit/react-test-setup": "1.3.49"
+    "@trackunit/react-components": "1.8.23",
+    "@trackunit/iris-app-runtime-core": "1.7.52",
+    "@trackunit/css-class-variance-utilities": "1.6.50",
+    "@trackunit/ui-design-tokens": "1.6.52",
+    "@trackunit/ui-icons": "1.6.49",
+    "@trackunit/react-table-pagination": "1.6.49",
+    "@trackunit/shared-utils": "1.8.50",
+    "@trackunit/i18n-library-translation": "1.6.54",
+    "@trackunit/react-test-setup": "1.3.50"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",