@hortiview/shared-components 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.2.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.1.0...v2.2.0) (2025-07-24)
+
+### Features
+
+* add new data-testids and fix onboardingbanner test ([1ac90c1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1ac90c1c4db3ff909e6ac3beb52863e6a8e55937))
+
 ## [2.1.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.0.0...v2.1.0) (2025-06-11)
 
 ### Features

package/dist/{ListAreaService-Wq9IkwWN.js → ListAreaService-BVtuBN0K.js}

@@ -1,27 +1,27 @@
-import { jsx as r, jsxs as z } from "react/jsx-runtime";
-import { G as B } from "./index.es-DntoATwO.js";
-import { I as C } from "./index.es-3043KTnb.js";
-import { c as b, d as N, T as O } from "./index.es-D54RuMc_.js";
-import { Iconify as $ } from "./components/Iconify/Iconify.js";
-import { AvailableCustomIcons as k } from "./enums/AvailableCustomIcons.js";
-import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_mainElevation_zewqs_5", G = "_searchbar_zewqs_11", W = "_roundedBottom_zewqs_19", L = "_primaryText_zewqs_24", S = "_list_zewqs_28", A = "_listItem_zewqs_56", P = "_iconColor_zewqs_76", D = "_overlineTitle_zewqs_80", F = "_noOverlineTitle_zewqs_85", H = "_truncate_zewqs_89", J = "_truncateOverlineText_zewqs_100", n = {
-  fullWidth: E,
-  mainElevation: j,
-  searchbar: G,
-  roundedBottom: W,
-  primaryText: L,
-  list: S,
-  listItem: A,
-  iconColor: P,
-  overlineTitle: D,
-  noOverlineTitle: F,
-  truncate: H,
-  truncateOverlineText: J
-}, Z = (t, s, a, l) => {
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { G as C } from "./index.es-DntoATwO.js";
+import { I as b } from "./index.es-3043KTnb.js";
+import { c as N, d as O, T as $ } from "./index.es-D54RuMc_.js";
+import { Iconify as k } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as E } from "./enums/AvailableCustomIcons.js";
+import './assets/ListAreaService.css';const j = "_fullWidth_zewqs_1", G = "_mainElevation_zewqs_5", W = "_searchbar_zewqs_11", L = "_roundedBottom_zewqs_19", S = "_primaryText_zewqs_24", A = "_list_zewqs_28", P = "_listItem_zewqs_56", D = "_iconColor_zewqs_76", F = "_overlineTitle_zewqs_80", H = "_noOverlineTitle_zewqs_85", J = "_truncate_zewqs_89", K = "_truncateOverlineText_zewqs_100", n = {
+  fullWidth: j,
+  mainElevation: G,
+  searchbar: W,
+  roundedBottom: L,
+  primaryText: S,
+  list: A,
+  listItem: P,
+  iconColor: D,
+  overlineTitle: F,
+  noOverlineTitle: H,
+  truncate: J,
+  truncateOverlineText: K
+}, ee = (t, s, a, l) => {
   const i = t.reduce((o, c) => {
     const { groupName: e, ...m } = c;
     return !e || typeof e != "string" || (o[e] || (o[e] = {
-      groupName: /* @__PURE__ */ r(b, { children: e }),
+      groupName: /* @__PURE__ */ r(N, { children: e }),
       id: e,
       items: []
     }), o[e].items = [
@@ -30,7 +30,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
     ]), o;
   }, {});
   return Object.values(i);
-}, ee = (t, s, a, l) => t.map((i) => y(i, s, a, l)), y = (t, s, a, l) => {
+}, te = (t, s, a, l) => t.map((i) => y(i, s, a, l)), y = (t, s, a, l) => {
   const {
     id: i,
     title: o,
@@ -47,16 +47,17 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
     onClick: w,
     customTitle: T,
     listItemClassName: x,
-    overlineTitle: _
+    overlineTitle: _,
+    "data-testid": q
   } = t, u = s === e;
   return {
     id: i,
     key: i,
     select: u,
     primaryText: i,
-    secondaryText: /* @__PURE__ */ z(B, { direction: "vertical", gap: "none", children: [
+    secondaryText: /* @__PURE__ */ B(C, { direction: "vertical", gap: "none", children: [
       T ?? /* @__PURE__ */ r(
-        N,
+        O,
         {
           "data-testid": "title",
           level: 1,
@@ -66,7 +67,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
         }
       ),
       c && !T ? /* @__PURE__ */ r(
-        O,
+        $,
         {
           "data-testid": "subtitle",
           level: 2,
@@ -84,26 +85,26 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
         children: _
       }
     ) : void 0,
-    trailingBlock: I ?? f ?? /* @__PURE__ */ r(C, { icon: "arrow_right", className: n.iconColor }),
-    leadingBlock: K(g),
+    trailingBlock: I ?? f ?? /* @__PURE__ */ r(b, { icon: "arrow_right", className: n.iconColor }),
+    leadingBlock: M(g),
     value: m,
     componentProps: {
       id: i,
-      "data-testid": `${o}-list-item`,
+      "data-testid": `${q ?? o}-list-item`,
       key: i,
       leadingBlockType: p ?? "icon",
       trailingBlockType: h ?? "icon",
       className: `${p === "avatar" ? "" : n.listItem} ${a} ${x ?? ""} ${_ ? n.overlineTitle : n.noOverlineTitle}`,
-      onClick: (M, q) => w?.(q),
+      onClick: (Q, z) => w?.(z),
       tag: d || v ? void 0 : l ?? "a",
       to: d || v ? void 0 : e,
       disabled: d
     }
   };
-}, K = (t) => typeof t == "string" && t in k ? /* @__PURE__ */ r($, { icon: t }) : t;
+}, M = (t) => typeof t == "string" && t in E ? /* @__PURE__ */ r(k, { icon: t }) : t;
 export {
-  ee as a,
-  Z as g,
+  te as a,
+  ee as g,
   y as m,
   n as s
 };

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -15,9 +15,14 @@ type ContextMenuProps = {
      * Default is 'vertical'
      */
     iconOrientation?: 'vertical' | 'horizontal';
+    /**
+     * data-testid for testing
+     */
+    'data-testid'?: string;
 };
 export type ActionProps = ListItemProps & {
     closeOnClick?: boolean;
+    'data-testid'?: string;
 };
 /**
  *
@@ -32,5 +37,5 @@ export type ActionProps = ListItemProps & {
  * ];
  * @returns a context menu with the given actions as ListItems
  */
-export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,60 +1,61 @@
-import { jsx as n } from "react/jsx-runtime";
-import { I as f } from "../../index.es-0lQcz8m1.js";
-import { M as d, L as _, a as p } from "../../index.es-fnFnw2P1.js";
-import { useState as I, useCallback as a, useEffect as v } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { I as d } from "../../index.es-0lQcz8m1.js";
+import { M as f, L as _, a as I } from "../../index.es-fnFnw2P1.js";
+import { useState as p, useCallback as a, useEffect as v } from "react";
 import { u as C } from "../../uniqueId-NU3-C36A.js";
-import '../../assets/ContextMenu.css';const k = "_menu_ol91v_1", y = "_icon_ol91v_5", M = "_listItem_ol91v_9", l = {
+import '../../assets/ContextMenu.css';const k = "_menu_ol91v_1", y = "_icon_ol91v_5", M = "_listItem_ol91v_9", i = {
   menu: k,
   icon: y,
   listItem: M
-}, N = ({
-  triggerOpen: s = null,
+}, T = ({
+  triggerOpen: n = null,
   actions: c,
-  iconOrientation: m = "vertical"
+  iconOrientation: m = "vertical",
+  "data-testid": r
 }) => {
-  const [e, t] = I(!1), r = a(() => {
-    t(!e);
-  }, [e]), i = a(() => {
-    t(!1);
+  const [t, s] = p(!1), u = a(() => {
+    s(!t);
+  }, [t]), l = a(() => {
+    s(!1);
   }, []);
   return v(() => {
-    t(s !== null ? s : !1);
-  }, [s]), /* @__PURE__ */ n(
-    d,
+    s(n !== null ? n : !1);
+  }, [n]), /* @__PURE__ */ o(
+    f,
     {
-      className: l.menu,
-      "data-testid": "selection-menu",
-      open: e,
+      className: i.menu,
+      "data-testid": r ?? "selection-menu",
+      open: t,
       surfaceOnly: !0,
       hoistToBody: !0,
-      onClose: i,
-      trigger: /* @__PURE__ */ n(
-        f,
+      onClose: l,
+      trigger: /* @__PURE__ */ o(
+        d,
         {
-          className: l.icon,
-          variant: e ? "filled-primary" : void 0,
+          className: i.icon,
+          variant: t ? "filled-primary" : void 0,
           "data-testid": "open-button",
           icon: m === "vertical" ? "more_vert" : "more_horiz",
-          onClick: r
+          onClick: u
         }
       ),
-      children: /* @__PURE__ */ n(_, { children: c.map((o, u) => /* @__PURE__ */ n(
-        p,
+      children: /* @__PURE__ */ o(_, { "data-testid": "selection-list", children: c.map((e) => /* @__PURE__ */ o(
+        I,
         {
-          className: l.listItem,
-          ...o,
+          className: i.listItem,
+          ...e,
           leadingBlockType: "icon",
-          "data-testid": `list-item-button-${u}`,
+          "data-testid": e["data-testid"],
           onClick: () => {
-            o?.onClick?.(), o.closeOnClick !== !1 && i();
+            e?.onClick?.(), e.closeOnClick !== !1 && l();
           }
         },
-        C(`LI_${o.primaryText?.toString()}_`)
+        C(`LI_${e.primaryText?.toString()}_`)
       )) })
     },
     "selectionmenu"
   );
 };
 export {
-  N as ContextMenu
+  T as ContextMenu
 };

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -1,11 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
 import { a as B, s as t, f as o, w as s } from "../../react.esm-CX1WJ2Pp.js";
 import { ContextMenu as p } from "./ContextMenu.js";
-import { a as l, d as k, t as T, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-const C = l.fn(), a = l.fn(), i = l.fn(), g = [
-  { primaryText: "Open", onClick: C, leadingBlock: "add" },
-  { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline" },
-  { primaryText: "Edit", onClick: a, leadingBlock: "edit" }
+import { a as d, d as k, t as T, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+const C = d.fn(), a = d.fn(), i = d.fn(), g = [
+  { primaryText: "Open", onClick: C, leadingBlock: "add", "data-testid": "open-testid" },
+  { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline", "data-testid": "delete-testid" },
+  { primaryText: "Edit", onClick: a, leadingBlock: "edit", "data-testid": "edit-testid" }
 ];
 k("ContextMenu Test", () => {
   T("render contextMenu and close it", () => {
@@ -16,7 +16,7 @@ k("ContextMenu Test", () => {
     B(/* @__PURE__ */ r(p, { actions: g, triggerOpen: !0 }));
     const c = t.getByTestId("open-button"), n = t.getByTestId("selection-menu");
     e(n).toBeInTheDocument(), e(n).not.toHaveClass("mdc-menu-surface--open"), o.click(c), await s(() => e(n).toHaveClass("mdc-menu-surface--animating-open")), e(t.getByText("Open")).toBeInTheDocument(), e(t.getByText("Delete")).toBeInTheDocument(), e(t.getByText("Edit")).toBeInTheDocument();
-    const m = t.getByTestId("list-item-button-0"), u = t.getByTestId("list-item-button-1"), d = t.getByTestId("list-item-button-2");
-    e(m).toBeInTheDocument(), e(u).toBeInTheDocument(), e(d).toBeInTheDocument(), o.click(m), e(C).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(a).not.toHaveBeenCalled(), o.click(u), e(i).toHaveBeenCalled(), o.click(d), e(a).toHaveBeenCalled();
+    const l = t.getByTestId("open-testid"), m = t.getByTestId("delete-testid"), u = t.getByTestId("edit-testid");
+    e(l).toBeInTheDocument(), e(m).toBeInTheDocument(), e(u).toBeInTheDocument(), o.click(l), e(C).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(a).not.toHaveBeenCalled(), o.click(m), e(i).toHaveBeenCalled(), o.click(u), e(a).toHaveBeenCalled();
   });
 });

package/dist/components/ListArea/ListArea.d.ts

@@ -42,6 +42,10 @@ type ListAreaProps = {
      * noElementsView is the view to be displayed when the list is empty
      */
     noElementsView?: JSX.Element;
+    /**
+     * data-testid for testing
+     */
+    'data-testid'?: string;
     /**
      * routerLinkElement is the element to be used for the elements link, use react-router Link component for the best experience.
      * If the element has `noNavigation=false` and the `routerLinkElement` is undefined an `<a>` tag is used.
@@ -54,5 +58,5 @@ type ListAreaProps = {
  * list elements act as router links to the corresponding route.
  * The list will be displayed in the desktop view or when no detail view is selected (in mobile view).
  */
-export declare const ListArea: ({ elements, pathname, isGrouped, hasSearch, searchPlaceholder, isIntegrated, isSorted, itemClassName, maxHeight, noElementsView, routerLinkElement, }: ListAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListArea: ({ elements, pathname, isGrouped, hasSearch, searchPlaceholder, isIntegrated, isSorted, itemClassName, maxHeight, noElementsView, "data-testid": dataTestId, routerLinkElement, }: ListAreaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ListArea/ListArea.js

@@ -1,12 +1,12 @@
 import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import { D as u } from "../../index.es-BWgXLqXn.js";
-import { E as y } from "../../index.es-h2lMdt7G.js";
-import { L as C } from "../../index.es-fnFnw2P1.js";
+import { E as C } from "../../index.es-h2lMdt7G.js";
+import { L as b } from "../../index.es-fnFnw2P1.js";
 import { o as p } from "../../orderBy-Bd48bw88.js";
-import { useState as b, useMemo as v } from "react";
-import { SearchBar as B } from "../SearchBar/SearchBar.js";
-import { g as D, a as j, s as t } from "../../ListAreaService-Wq9IkwWN.js";
-const q = ({
+import { useState as B, useMemo as v } from "react";
+import { SearchBar as D } from "../SearchBar/SearchBar.js";
+import { g as j, a as E, s as e } from "../../ListAreaService-BVtuBN0K.js";
+const z = ({
   elements: r,
   pathname: o,
   isGrouped: i = !1,
@@ -17,31 +17,32 @@ const q = ({
   itemClassName: c = "",
   maxHeight: T = "100%",
   noElementsView: $,
+  "data-testid": g,
   routerLinkElement: d
 }) => {
-  const [e, g] = b(""), a = v(() => {
-    if (!e) return l ? p(r, "title") : r;
-    const n = r.filter((f) => f.title.toLowerCase().includes(e.toLowerCase()) || f.subTitle?.toLowerCase().includes(e.toLowerCase()) || f.overlineTitle?.toLowerCase().includes(e.toLowerCase()));
+  const [t, x] = B(""), a = v(() => {
+    if (!t) return l ? p(r, "title") : r;
+    const n = r.filter((f) => f.title.toLowerCase().includes(t.toLowerCase()) || f.subTitle?.toLowerCase().includes(t.toLowerCase()) || f.overlineTitle?.toLowerCase().includes(t.toLowerCase()));
     return l ? p(n, "title") : n;
-  }, [e, r, l]), x = v(
-    () => i ? D(a, o, c, d) : j(a, o, c, d),
+  }, [t, r, l]), y = v(
+    () => i ? j(a, o, c, d) : E(a, o, c, d),
     [a, o, c, i, d]
   );
   return /* @__PURE__ */ s(
-    y,
+    C,
     {
       "data-testid": "elevation",
       elevation: m ? 0 : 1,
-      className: `${t.mainElevation}`,
-      children: /* @__PURE__ */ h("div", { className: t.fullWidth, children: [
+      className: `${e.mainElevation}`,
+      children: /* @__PURE__ */ h("div", { className: e.fullWidth, children: [
         L && r.length > 0 && /* @__PURE__ */ h("span", { "data-testid": "search-bar-container", children: [
           m && /* @__PURE__ */ s(u, {}),
           /* @__PURE__ */ s(
-            B,
+            D,
             {
-              searchTerm: e,
-              setSearchTerm: g,
-              className: t.searchbar,
+              searchTerm: t,
+              setSearchTerm: x,
+              className: e.searchbar,
               placeholder: w
             }
           ),
@@ -49,11 +50,11 @@ const q = ({
         ] }),
         a.length === 0 && $,
         /* @__PURE__ */ s(
-          C,
+          b,
           {
-            "data-testid": "list",
-            items: x,
-            className: `${t.list} ${t.primaryText} ${i ? "" : t.roundedBottom}`,
+            "data-testid": g,
+            items: y,
+            className: `${e.list} ${e.primaryText} ${i ? "" : e.roundedBottom}`,
             style: { maxHeight: T },
             showDivider: !1
           }
@@ -63,5 +64,5 @@ const q = ({
   );
 };
 export {
-  q as ListArea
+  z as ListArea
 };

package/dist/components/ListArea/ListArea.test.js

@@ -2,7 +2,7 @@ import { jsx as r, Fragment as i } from "react/jsx-runtime";
 import { c as p } from "../../index.es-D54RuMc_.js";
 import { a as s, s as a, f as u } from "../../react.esm-CX1WJ2Pp.js";
 import { ListArea as c } from "./ListArea.js";
-import { g as h } from "../../ListAreaService-Wq9IkwWN.js";
+import { g as h } from "../../ListAreaService-BVtuBN0K.js";
 import { d as m, t as n, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 m("ListArea Test", () => {
   const o = [

package/dist/components/ListArea/ListAreaService.js

@@ -4,7 +4,7 @@ import "../../index.es-3043KTnb.js";
 import "../../index.es-D54RuMc_.js";
 import "../Iconify/Iconify.js";
 import "../../enums/AvailableCustomIcons.js";
-import { g as a, a as g, m as d } from "../../ListAreaService-Wq9IkwWN.js";
+import { g as a, a as g, m as d } from "../../ListAreaService-BVtuBN0K.js";
 export {
   a as getGroupedItems,
   g as getListedItems,

package/dist/components/OnboardingBanner/OnboardingBanner.test.js

@@ -1,12 +1,12 @@
-import { jsx as n, Fragment as a } from "react/jsx-runtime";
+import { jsx as n, Fragment as d } from "react/jsx-runtime";
 import { a as o, s as e } from "../../react.esm-CX1WJ2Pp.js";
-import { OnboardingBanner as s } from "./OnboardingBanner.js";
-import { d, t as i, a as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-d("Onboarding Banner Test", () => {
-  i("render OnboardingBanner with headline & description text", () => {
+import { OnboardingBanner as i } from "./OnboardingBanner.js";
+import { d as a, t as s, a as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+a("Onboarding Banner Test", () => {
+  s("render OnboardingBanner with headline & description text", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
@@ -15,56 +15,56 @@ d("Onboarding Banner Test", () => {
         }
       )
     ), t(e.getByText("test")).toBeInTheDocument(), t(e.getByText("test description")).toBeInTheDocument();
-  }), i("render OnboardingBanner with media content", () => {
+  }), s("render OnboardingBanner with media content", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
-          mediaContent: /* @__PURE__ */ n(a, { children: "Element" }),
+          mediaContent: /* @__PURE__ */ n(d, { children: "Element" }),
           isVisible: !0,
           onClose: r.fn()
         }
       )
     ), t(e.getByText("Element")).toBeInTheDocument();
-  }), i("render OnboardingBanner with buttons", () => {
+  }), s("render OnboardingBanner with buttons", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
           isVisible: !0,
           onClose: r.fn(),
-          buttons: [{ label: "button-1" }, { label: "button-2" }]
+          buttons: [{ label: "button-1", id: "1" }, { label: "button-2", id: "2" }]
         }
       )
     ), t(e.getByText("button-1")).toBeInTheDocument(), t(e.getByText("button-2")).toBeInTheDocument(), t(e.queryByText("button-3")).not.toBeInTheDocument();
-  }), i("calls onClose when close button is clicked", () => {
+  }), s("calls onClose when close button is clicked", () => {
     const l = r.fn();
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
           isVisible: !0,
           onClose: l,
-          buttons: [{ label: "button-1" }, { label: "button2" }]
+          buttons: [{ label: "button-1", id: "1" }, { label: "button-2", id: "2" }]
         }
       )
     ), e.getByTestId("onboarding-banner-close-button").click(), t(l).toHaveBeenCalledTimes(1);
-  }), i("renders nothing when isVisibility is false", () => {
+  }), s("renders nothing when isVisibility is false", () => {
     o(
       /* @__PURE__ */ n(
-        s,
+        i,
         {
           headline: "test",
           description: "test description",
           isVisible: !1,
           onClose: r.fn(),
-          buttons: [{ label: "button-1" }, { label: "button-2" }]
+          buttons: [{ label: "button-1", id: "1" }, { label: "button-2", id: "2" }]
         }
       )
     ), t(e.queryByText("test")).not.toBeInTheDocument();

package/dist/types/ListElement.d.ts

@@ -95,4 +95,8 @@ export type ListElement = Omit<BaseListElement, 'component'> & {
      * a custom class name for the list item
      */
     listItemClassName?: string;
+    /**
+     * data-testid for testing
+     */
+    'data-testid'?: string;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",