@trackunit/react-widgets 2.18.7 → 2.19.3

package/index.cjs.js

@@ -4,8 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
 var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var reactCoreHooks = require('@trackunit/react-core-hooks');
 var react = require('react');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var tailwindMerge = require('tailwind-merge');
 
 var defaultTranslations = {
@@ -162,6 +163,38 @@ const WidgetNoData = ({ type = "Neutral", description, ref }) => {
     return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
 };
 
+const MY_HOME_PAGE_NAME = "My Home";
+const widgetListItemClickEvents = {
+    "Widget - List item clicked": irisAppRuntimeCore.createEvent({
+        description: "List item inside a widget is clicked",
+    }),
+};
+/**
+ * Track widget list item interactions with page and widget metadata.
+ *
+ * Fires the `Widget - List item clicked` Amplitude event with the page name
+ * and the widget's `irisAppExtensionId`.
+ */
+const useWidgetListItemClickAnalytics = ({ pageName, }) => {
+    const { logEvent } = reactCoreHooks.useAnalytics(widgetListItemClickEvents);
+    const widgetIrisAppExtensionId = react.useMemo(() => {
+        const rawHash = globalThis.location.hash;
+        const hash = rawHash.startsWith("#") ? rawHash.slice(1) : rawHash;
+        return new URLSearchParams(hash).get("irisAppExtensionId") ?? undefined;
+    }, []);
+    const trackWidgetListItemClick = react.useCallback((context) => {
+        if (!pageName || !widgetIrisAppExtensionId) {
+            return;
+        }
+        logEvent("Widget - List item clicked", {
+            pageName,
+            widgetName: widgetIrisAppExtensionId,
+            ...context,
+        });
+    }, [logEvent, pageName, widgetIrisAppExtensionId]);
+    return react.useMemo(() => ({ trackWidgetListItemClick }), [trackWidgetListItemClick]);
+};
+
 const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
     variants: {
         layout: {
@@ -402,9 +435,11 @@ const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testi
  */
 setupLibraryTranslations();
 
+exports.MY_HOME_PAGE_NAME = MY_HOME_PAGE_NAME;
 exports.WidgetContent = WidgetContent;
 exports.WidgetEditBody = WidgetEditBody;
 exports.WidgetError = WidgetError;
 exports.WidgetKPI = WidgetKPI;
 exports.WidgetMissingConfiguration = WidgetMissingConfiguration;
 exports.WidgetNoData = WidgetNoData;
+exports.useWidgetListItemClickAnalytics = useWidgetListItemClickAnalytics;

package/index.esm.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { EmptyState, Card, CardHeader, CardBody, CardFooter, Button, cvaInteractableItem, SkeletonLines, Icon, Tooltip, Text, TrendIndicators, Notice } from '@trackunit/react-components';
-import { WidgetConfigRuntime } from '@trackunit/iris-app-runtime-core';
+import { WidgetConfigRuntime, createEvent } from '@trackunit/iris-app-runtime-core';
+import { useAnalytics } from '@trackunit/react-core-hooks';
+import { useMemo, useCallback, useState } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { useState, useCallback } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 var defaultTranslations = {
@@ -160,6 +161,38 @@ const WidgetNoData = ({ type = "Neutral", description, ref }) => {
     return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsx(EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
 };
 
+const MY_HOME_PAGE_NAME = "My Home";
+const widgetListItemClickEvents = {
+    "Widget - List item clicked": createEvent({
+        description: "List item inside a widget is clicked",
+    }),
+};
+/**
+ * Track widget list item interactions with page and widget metadata.
+ *
+ * Fires the `Widget - List item clicked` Amplitude event with the page name
+ * and the widget's `irisAppExtensionId`.
+ */
+const useWidgetListItemClickAnalytics = ({ pageName, }) => {
+    const { logEvent } = useAnalytics(widgetListItemClickEvents);
+    const widgetIrisAppExtensionId = useMemo(() => {
+        const rawHash = globalThis.location.hash;
+        const hash = rawHash.startsWith("#") ? rawHash.slice(1) : rawHash;
+        return new URLSearchParams(hash).get("irisAppExtensionId") ?? undefined;
+    }, []);
+    const trackWidgetListItemClick = useCallback((context) => {
+        if (!pageName || !widgetIrisAppExtensionId) {
+            return;
+        }
+        logEvent("Widget - List item clicked", {
+            pageName,
+            widgetName: widgetIrisAppExtensionId,
+            ...context,
+        });
+    }, [logEvent, pageName, widgetIrisAppExtensionId]);
+    return useMemo(() => ({ trackWidgetListItemClick }), [trackWidgetListItemClick]);
+};
+
 const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
     variants: {
         layout: {
@@ -400,4 +433,4 @@ const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testi
  */
 setupLibraryTranslations();
 
-export { WidgetContent, WidgetEditBody, WidgetError, WidgetKPI, WidgetMissingConfiguration, WidgetNoData };
+export { MY_HOME_PAGE_NAME, WidgetContent, WidgetEditBody, WidgetError, WidgetKPI, WidgetMissingConfiguration, WidgetNoData, useWidgetListItemClickAnalytics };

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "2.18.7",
+  "version": "2.19.3",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "1.22.29",
-    "@trackunit/iris-app-runtime-core": "1.15.34",
-    "@trackunit/css-class-variance-utilities": "1.11.118",
-    "@trackunit/ui-design-tokens": "1.11.115",
-    "@trackunit/ui-icons": "1.11.114",
-    "@trackunit/i18n-library-translation": "1.19.6",
+    "@trackunit/react-components": "1.23.2",
+    "@trackunit/react-core-hooks": "1.16.3",
+    "@trackunit/iris-app-runtime-core": "1.16.2",
+    "@trackunit/css-class-variance-utilities": "1.12.1",
+    "@trackunit/ui-design-tokens": "1.12.1",
+    "@trackunit/ui-icons": "1.12.2",
+    "@trackunit/i18n-library-translation": "1.20.3",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

package/src/hooks/useWidgetListItemClickAnalytics.d.ts

@@ -0,0 +1,32 @@
+import { BaseEvent } from "@trackunit/iris-app-runtime-core";
+interface WidgetListItemClickedEvent extends BaseEvent {
+    pageName: string;
+    widgetName: string;
+    /**
+     * The clicked row's primary identifier — its meaning is determined by the
+     * widget (e.g. asset ID for asset/attention/inspection/service lists, site
+     * ID for the site list, customer ID for the excessive-usage list). Use
+     * `widgetName` to disambiguate the entity type when querying in Amplitude.
+     */
+    id: string;
+    /**
+     * Optional per-row category for widgets whose rows are typed (e.g. alert
+     * subtype for the attention list, site type for the site list). Omit for
+     * widgets without a natural per-row classification.
+     */
+    type?: string;
+}
+export declare const MY_HOME_PAGE_NAME = "My Home";
+type UseWidgetListItemClickAnalyticsResult = {
+    trackWidgetListItemClick: (context: Pick<WidgetListItemClickedEvent, "id" | "type">) => void;
+};
+/**
+ * Track widget list item interactions with page and widget metadata.
+ *
+ * Fires the `Widget - List item clicked` Amplitude event with the page name
+ * and the widget's `irisAppExtensionId`.
+ */
+export declare const useWidgetListItemClickAnalytics: ({ pageName, }: {
+    pageName?: string;
+}) => UseWidgetListItemClickAnalyticsResult;
+export {};

package/src/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./EmptyStates/Error/WidgetError";
 export * from "./EmptyStates/MissingConfiguration/WidgetMissingConfiguration";
 export * from "./EmptyStates/NoData/WidgetNoData";
+export * from "./hooks/useWidgetListItemClickAnalytics";
 export * from "./Widget/WidgetContent";
 export * from "./Widget/WidgetEditBody";
 export * from "./WidgetKPI/WidgetKPI";