@trackunit/react-widgets 2.2.119 → 2.2.121

package/index.cjs.js

@@ -186,7 +186,7 @@ const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "over
  * @param {WidgetContentProps} props - The props for the WidgetContent component
  * @returns {ReactNode} WidgetContent component
  */
-const WidgetContent = ({ children, dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", }) => {
+const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", }) => {
     return (jsxRuntime.jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, children: children }));
 };
 
@@ -221,7 +221,7 @@ const cvaWidgetEditBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["a
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
  * @returns {ReactNode} WidgetEditBody component
  */
-const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
+const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
     const [t] = useTranslation();
     const [saving, setSaving] = React.useState(false);
     return (jsxRuntime.jsxs(reactComponents.Card, { className: cvaWidgetEditBodyDensityContainer({ density: "none", className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.CardHeader, { density: "comfortable", heading: title || t("widget.edit.title"), onClose: onCancel }), jsxRuntime.jsx(reactComponents.CardBody, { density: "comfortable", children: children }), jsxRuntime.jsxs(reactComponents.CardFooter, { density: "comfortable", children: [jsxRuntime.jsx(reactComponents.Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsxRuntime.jsx(reactComponents.Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
@@ -307,8 +307,8 @@ const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-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, { 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("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({
+const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": 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, { 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("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, { "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-end", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), "data-testid": 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 !== undefined ? (jsxRuntime.jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsxRuntime.jsx("span", { children: notice }) : notice })) : null] })) }));
@@ -317,7 +317,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendValueText(), dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(reactComponents.Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendValueText(), "data-testid": "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(reactComponents.Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
 };
 
 /*

package/index.esm.js

@@ -184,7 +184,7 @@ const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w
  * @param {WidgetContentProps} props - The props for the WidgetContent component
  * @returns {ReactNode} WidgetContent component
  */
-const WidgetContent = ({ children, dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", }) => {
+const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", }) => {
     return (jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, children: children }));
 };
 
@@ -219,7 +219,7 @@ const cvaWidgetEditBodyDensityContainer = cvaMerge(["absolute", "left-1/2", "top
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
  * @returns {ReactNode} WidgetEditBody component
  */
-const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
+const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
     const [t] = useTranslation();
     const [saving, setSaving] = useState(false);
     return (jsxs(Card, { className: cvaWidgetEditBodyDensityContainer({ density: "none", className }), "data-testid": dataTestId, children: [jsx(CardHeader, { density: "comfortable", heading: title || t("widget.edit.title"), onClose: onCancel }), jsx(CardBody, { density: "comfortable", children: children }), jsxs(CardFooter, { density: "comfortable", children: [jsx(Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsx(Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
@@ -305,8 +305,8 @@ const cvaWidgetKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-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, { 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("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({
+const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": 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, { 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("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, { "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-end", children: jsx(Text, { className: cvaWidgetKPIvalueText(), "data-testid": 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 !== undefined ? (jsx("div", { className: cvaWidgetKPINotice(), children: typeof notice === "string" || typeof notice === "number" ? jsx("span", { children: notice }) : notice })) : null] })) }));
@@ -315,7 +315,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {
         return null;
     }
-    return (jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { className: cvaWidgetKPITrendValueText(), dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
+    return (jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { className: cvaWidgetKPITrendValueText(), "data-testid": "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.2.119",
+  "version": "2.2.121",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.10.49",
-    "@trackunit/iris-app-runtime-core": "1.8.84",
-    "@trackunit/css-class-variance-utilities": "1.7.75",
-    "@trackunit/ui-design-tokens": "1.7.75",
-    "@trackunit/ui-icons": "1.7.76",
-    "@trackunit/i18n-library-translation": "1.7.92"
+    "@trackunit/react-components": "1.10.51",
+    "@trackunit/iris-app-runtime-core": "1.8.86",
+    "@trackunit/css-class-variance-utilities": "1.7.77",
+    "@trackunit/ui-design-tokens": "1.7.77",
+    "@trackunit/ui-icons": "1.7.78",
+    "@trackunit/i18n-library-translation": "1.7.94"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Widget/WidgetContent.d.ts

@@ -41,4 +41,4 @@ export interface WidgetContentProps extends CommonProps {
  * @param {WidgetContentProps} props - The props for the WidgetContent component
  * @returns {ReactNode} WidgetContent component
  */
-export declare const WidgetContent: ({ children, dataTestId, layout, padding, gap, className, centering, }: WidgetContentProps) => ReactElement;
+export declare const WidgetContent: ({ children, "data-testid": dataTestId, layout, padding, gap, className, centering, }: WidgetContentProps) => ReactElement;

package/src/Widget/WidgetEditBody.d.ts

@@ -30,4 +30,4 @@ export interface WidgetEditBodyProps extends CommonProps {
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
  * @returns {ReactNode} WidgetEditBody component
  */
-export declare const WidgetEditBody: ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }: WidgetEditBodyProps) => ReactElement;
+export declare const WidgetEditBody: ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }: WidgetEditBodyProps) => ReactElement;

package/src/WidgetKPI/WidgetKPI.d.ts

@@ -70,4 +70,4 @@ export interface WidgetKPIProps extends CommonProps {
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
  * @returns {ReactElement} WidgetKPI component
  */
-export declare const WidgetKPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor, notice, ...rest }: WidgetKPIProps) => ReactElement;
+export declare const WidgetKPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, trend, iconName, iconColor, notice, ...rest }: WidgetKPIProps) => ReactElement;