@trackunit/utilization-indicator 1.24.7 → 1.24.8

package/index.cjs.js

@@ -62,10 +62,9 @@ const setupLibraryTranslations = () => {
  * Returns the activity indicator props.
  *
  * @param state - The activity state.
- * @param size - The size of the icon.
  * @returns {UseActivity} - The activity indicator props.
  */
-const useActivity = (state, size = "medium") => {
+const useActivity = (state, _size) => {
     const [t] = useTranslation();
     return react.useMemo(() => {
         switch (state) {
@@ -73,7 +72,7 @@ const useActivity = (state, size = "medium") => {
             case "WORKING":
                 return {
                     activityIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "PlayCircle", size: size }),
+                        iconName: "PlayCircle",
                         label: t("indicator.activity.working"),
                         color: "working",
                     },
@@ -82,7 +81,7 @@ const useActivity = (state, size = "medium") => {
             case "IDLING":
                 return {
                     activityIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "PauseCircle", size: size }),
+                        iconName: "PauseCircle",
                         label: t("indicator.activity.idle"),
                         color: "idle",
                     },
@@ -91,7 +90,7 @@ const useActivity = (state, size = "medium") => {
             case "STOPPED":
                 return {
                     activityIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "StopCircle", size: size }),
+                        iconName: "StopCircle",
                         label: t("indicator.activity.stopped"),
                         color: "stopped",
                     },
@@ -100,7 +99,7 @@ const useActivity = (state, size = "medium") => {
             case "UNKNOWN":
                 return {
                     activityIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "QuestionMarkCircle", size: size }),
+                        iconName: "QuestionMarkCircle",
                         label: t("indicator.activity.unknown"),
                         color: "unknown",
                     },
@@ -108,7 +107,7 @@ const useActivity = (state, size = "medium") => {
             default:
                 return { activityIndicator: undefined };
         }
-    }, [state, size, t]);
+    }, [state, t]);
 };
 
 /**
@@ -118,8 +117,11 @@ const useActivity = (state, size = "medium") => {
  * @returns {ReactElement | null } - Activity indicator.
  */
 const ActivityIndicator = (props) => {
-    const { activityIndicator } = useActivity(props.state, props.size);
-    return activityIndicator ? jsxRuntime.jsx(reactComponents.Indicator, { ...activityIndicator, ...props }) : null;
+    const { activityIndicator } = useActivity(props.state);
+    if (!activityIndicator)
+        return null;
+    const { iconName, ...indicatorProps } = activityIndicator;
+    return jsxRuntime.jsx(reactComponents.Indicator, { ...indicatorProps, ...props, icon: jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: props.size }) });
 };
 
 /**
@@ -134,7 +136,7 @@ const useUtilization = state => {
             case utilizationTokens.UtilizationState.Unused:
                 return {
                     utilizationIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "ExclamationTriangle", size: "medium" }),
+                        iconName: "ExclamationTriangle",
                         label: t("indicator.utilization.unused"),
                         color: "unused",
                     },
@@ -142,7 +144,7 @@ const useUtilization = state => {
             case utilizationTokens.UtilizationState.Utilized:
                 return {
                     utilizationIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "CheckCircle", size: "medium" }),
+                        iconName: "CheckCircle",
                         label: t("indicator.utilization.utilized"),
                         color: "utilized",
                     },
@@ -150,7 +152,7 @@ const useUtilization = state => {
             case utilizationTokens.UtilizationState.HeavilyUtilized:
                 return {
                     utilizationIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "ShieldExclamation", size: "medium" }),
+                        iconName: "ShieldExclamation",
                         label: t("indicator.utilization.heavilyUtilized"),
                         color: "heavily_utilized",
                     },
@@ -158,7 +160,7 @@ const useUtilization = state => {
             case utilizationTokens.UtilizationState.Unknown:
                 return {
                     utilizationIndicator: {
-                        icon: jsxRuntime.jsx(reactComponents.Icon, { name: "QuestionMarkCircle", size: "medium" }),
+                        iconName: "QuestionMarkCircle",
                         label: "N/A",
                         color: "unknown_utilization",
                     },
@@ -177,7 +179,10 @@ const useUtilization = state => {
  */
 const UtilizationIndicator = (props) => {
     const { utilizationIndicator } = useUtilization(props.state);
-    return utilizationIndicator ? jsxRuntime.jsx(reactComponents.Indicator, { ...utilizationIndicator, ...props }) : null;
+    if (!utilizationIndicator)
+        return null;
+    const { iconName, ...indicatorProps } = utilizationIndicator;
+    return jsxRuntime.jsx(reactComponents.Indicator, { ...indicatorProps, ...props, icon: jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: "medium" }) });
 };
 
 /*

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { Icon, Indicator } from '@trackunit/react-components';
+import { Indicator, Icon } from '@trackunit/react-components';
 import { assetActivityState, UtilizationState } from '@trackunit/utilization-tokens';
 import { useMemo } from 'react';
 
@@ -60,10 +60,9 @@ const setupLibraryTranslations = () => {
  * Returns the activity indicator props.
  *
  * @param state - The activity state.
- * @param size - The size of the icon.
  * @returns {UseActivity} - The activity indicator props.
  */
-const useActivity = (state, size = "medium") => {
+const useActivity = (state, _size) => {
     const [t] = useTranslation();
     return useMemo(() => {
         switch (state) {
@@ -71,7 +70,7 @@ const useActivity = (state, size = "medium") => {
             case "WORKING":
                 return {
                     activityIndicator: {
-                        icon: jsx(Icon, { name: "PlayCircle", size: size }),
+                        iconName: "PlayCircle",
                         label: t("indicator.activity.working"),
                         color: "working",
                     },
@@ -80,7 +79,7 @@ const useActivity = (state, size = "medium") => {
             case "IDLING":
                 return {
                     activityIndicator: {
-                        icon: jsx(Icon, { name: "PauseCircle", size: size }),
+                        iconName: "PauseCircle",
                         label: t("indicator.activity.idle"),
                         color: "idle",
                     },
@@ -89,7 +88,7 @@ const useActivity = (state, size = "medium") => {
             case "STOPPED":
                 return {
                     activityIndicator: {
-                        icon: jsx(Icon, { name: "StopCircle", size: size }),
+                        iconName: "StopCircle",
                         label: t("indicator.activity.stopped"),
                         color: "stopped",
                     },
@@ -98,7 +97,7 @@ const useActivity = (state, size = "medium") => {
             case "UNKNOWN":
                 return {
                     activityIndicator: {
-                        icon: jsx(Icon, { name: "QuestionMarkCircle", size: size }),
+                        iconName: "QuestionMarkCircle",
                         label: t("indicator.activity.unknown"),
                         color: "unknown",
                     },
@@ -106,7 +105,7 @@ const useActivity = (state, size = "medium") => {
             default:
                 return { activityIndicator: undefined };
         }
-    }, [state, size, t]);
+    }, [state, t]);
 };
 
 /**
@@ -116,8 +115,11 @@ const useActivity = (state, size = "medium") => {
  * @returns {ReactElement | null } - Activity indicator.
  */
 const ActivityIndicator = (props) => {
-    const { activityIndicator } = useActivity(props.state, props.size);
-    return activityIndicator ? jsx(Indicator, { ...activityIndicator, ...props }) : null;
+    const { activityIndicator } = useActivity(props.state);
+    if (!activityIndicator)
+        return null;
+    const { iconName, ...indicatorProps } = activityIndicator;
+    return jsx(Indicator, { ...indicatorProps, ...props, icon: jsx(Icon, { name: iconName, size: props.size }) });
 };
 
 /**
@@ -132,7 +134,7 @@ const useUtilization = state => {
             case UtilizationState.Unused:
                 return {
                     utilizationIndicator: {
-                        icon: jsx(Icon, { name: "ExclamationTriangle", size: "medium" }),
+                        iconName: "ExclamationTriangle",
                         label: t("indicator.utilization.unused"),
                         color: "unused",
                     },
@@ -140,7 +142,7 @@ const useUtilization = state => {
             case UtilizationState.Utilized:
                 return {
                     utilizationIndicator: {
-                        icon: jsx(Icon, { name: "CheckCircle", size: "medium" }),
+                        iconName: "CheckCircle",
                         label: t("indicator.utilization.utilized"),
                         color: "utilized",
                     },
@@ -148,7 +150,7 @@ const useUtilization = state => {
             case UtilizationState.HeavilyUtilized:
                 return {
                     utilizationIndicator: {
-                        icon: jsx(Icon, { name: "ShieldExclamation", size: "medium" }),
+                        iconName: "ShieldExclamation",
                         label: t("indicator.utilization.heavilyUtilized"),
                         color: "heavily_utilized",
                     },
@@ -156,7 +158,7 @@ const useUtilization = state => {
             case UtilizationState.Unknown:
                 return {
                     utilizationIndicator: {
-                        icon: jsx(Icon, { name: "QuestionMarkCircle", size: "medium" }),
+                        iconName: "QuestionMarkCircle",
                         label: "N/A",
                         color: "unknown_utilization",
                     },
@@ -175,7 +177,10 @@ const useUtilization = state => {
  */
 const UtilizationIndicator = (props) => {
     const { utilizationIndicator } = useUtilization(props.state);
-    return utilizationIndicator ? jsx(Indicator, { ...utilizationIndicator, ...props }) : null;
+    if (!utilizationIndicator)
+        return null;
+    const { iconName, ...indicatorProps } = utilizationIndicator;
+    return jsx(Indicator, { ...indicatorProps, ...props, icon: jsx(Icon, { name: iconName, size: "medium" }) });
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/utilization-indicator",
-  "version": "1.24.7",
+  "version": "1.24.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/ActivityIndicator.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps, IndicatorProps, type Styleable } from "@trackunit/react-components";
 import { AssetActivityState } from "@trackunit/utilization-tokens";
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 export interface ActivityIndicatorProps extends Pick<IndicatorProps, "withBackground" | "withLabel" | "ping" | "size" | "weight">, CommonProps, Styleable {
     state: AssetActivityState;
 }

package/src/UtilizationIndicator.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps, IndicatorProps, type Styleable } from "@trackunit/react-components";
 import { UtilizationState } from "@trackunit/utilization-tokens";
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 export interface UtilizationIndicatorProps extends Pick<IndicatorProps, "withBackground" | "withLabel" | "ping">, CommonProps, Styleable {
     state: UtilizationState;
 }

package/src/useActivity.d.ts

@@ -1,18 +1,19 @@
 import { ActivityColors } from "@trackunit/ui-design-tokens";
 import { AssetActivityState } from "@trackunit/utilization-tokens";
-import { ReactElement } from "react";
-type UseActivity = (state?: AssetActivityState, size?: "small" | "medium" | "large") => {
-    activityIndicator?: {
-        icon: ReactElement;
-        label: string;
-        color: ActivityColors;
-    };
+declare const activityIndicatorIconNames: readonly ["PlayCircle", "PauseCircle", "StopCircle", "QuestionMarkCircle"];
+type ActivityIndicatorIconName = (typeof activityIndicatorIconNames)[number];
+type ActivityIndicatorMetadata = Readonly<{
+    iconName: ActivityIndicatorIconName;
+    label: string;
+    color: ActivityColors;
+}>;
+type UseActivity = (state?: AssetActivityState, _size?: "small" | "medium" | "large") => {
+    activityIndicator?: ActivityIndicatorMetadata;
 };
 /**
  * Returns the activity indicator props.
  *
  * @param state - The activity state.
- * @param size - The size of the icon.
  * @returns {UseActivity} - The activity indicator props.
  */
 export declare const useActivity: UseActivity;

package/src/useUtilization.d.ts

@@ -1,12 +1,14 @@
 import { UtilizationColors } from "@trackunit/ui-design-tokens";
 import { UtilizationState } from "@trackunit/utilization-tokens";
-import { ReactElement } from "react";
+declare const utilizationIndicatorIconNames: readonly ["ExclamationTriangle", "CheckCircle", "ShieldExclamation", "QuestionMarkCircle"];
+type UtilizationIndicatorIconName = (typeof utilizationIndicatorIconNames)[number];
+type UtilizationIndicatorMetadata = Readonly<{
+    iconName: UtilizationIndicatorIconName;
+    label: string;
+    color: UtilizationColors;
+}>;
 type UseUtilization = (state?: UtilizationState) => {
-    utilizationIndicator?: {
-        icon: ReactElement;
-        label: string;
-        color: UtilizationColors;
-    };
+    utilizationIndicator?: UtilizationIndicatorMetadata;
 };
 /**
  * Returns the utilization indicator props.