@trackunit/react-widgets 2.1.73 → 2.1.75

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) {
@@ -316,7 +316,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
 };
 
 const cvaWidgetList = cssClassVarianceUtilities.cvaMerge(["min-h-0"]);
-const cvaWidgetListVirtualizedList = cssClassVarianceUtilities.cvaMerge(["w-full"]);
+const cvaWidgetListList = cssClassVarianceUtilities.cvaMerge(["w-full"]);
 
 /**
  *  WidgetList used for rendering a list of in a widget. It is a wrapper component for the ListItem components.
@@ -325,7 +325,7 @@ const cvaWidgetListVirtualizedList = cssClassVarianceUtilities.cvaMerge(["w-full
  * @returns {Element}  WidgetList component
  */
 const WidgetList = ({ dataTestId, pagination, count, children, className, rowHeight = 56, scrollRef, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaWidgetList({ className }), children: jsxRuntime.jsx(reactComponents.VirtualizedList, { className: cvaWidgetListVirtualizedList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
+    return (jsxRuntime.jsx("div", { className: cvaWidgetList({ className }), children: jsxRuntime.jsx(reactComponents.List, { className: cvaWidgetListList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
                 return children(index);
             } }) }));
 };

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { EmptyState, useScrollDetection, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text, VirtualizedList } from '@trackunit/react-components';
+import { EmptyState, useScrollDetection, Card, CardHeader, CardBody, CardFooter, Button, SkeletonLines, Icon, Tooltip, Text, List } from '@trackunit/react-components';
 import { Children, Fragment, useState } from 'react';
 import { WidgetConfigRuntime } from '@trackunit/iris-app-runtime-core';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -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) {
@@ -314,7 +314,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
 };
 
 const cvaWidgetList = cvaMerge(["min-h-0"]);
-const cvaWidgetListVirtualizedList = cvaMerge(["w-full"]);
+const cvaWidgetListList = cvaMerge(["w-full"]);
 
 /**
  *  WidgetList used for rendering a list of in a widget. It is a wrapper component for the ListItem components.
@@ -323,7 +323,7 @@ const cvaWidgetListVirtualizedList = cvaMerge(["w-full"]);
  * @returns {Element}  WidgetList component
  */
 const WidgetList = ({ dataTestId, pagination, count, children, className, rowHeight = 56, scrollRef, }) => {
-    return (jsx("div", { className: cvaWidgetList({ className }), children: jsx(VirtualizedList, { className: cvaWidgetListVirtualizedList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
+    return (jsx("div", { className: cvaWidgetList({ className }), children: jsx(List, { className: cvaWidgetListList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
                 return children(index);
             } }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.1.73",
+  "version": "2.1.75",
   "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.24",
+    "@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",

package/src/WidgetList/WidgetList.variants.d.ts

@@ -1,2 +1,2 @@
 export declare const cvaWidgetList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaWidgetListVirtualizedList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaWidgetListList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;