@hortiview/shared-components 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [2.3.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.2.0...v2.3.0) (2025-08-20)
+
+### Features
+
+* add additional props to the stepper and stepper buttons ([e7a404d](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e7a404df5f97ec90dbfc4055cef8026f6d84a136))
+* added new LinkBanner component ([86d5360](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/86d5360b713cff6abd2bf6658e1f934b972c7020))
+
+## [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/AlertBanner-75jjene1.js

@@ -0,0 +1,26 @@
+import { jsx as n, Fragment as i, jsxs as t } from "react/jsx-runtime";
+import { G as l } from "./index.es-DntoATwO.js";
+import { I as _ } from "./index.es-3043KTnb.js";
+import { T as d } from "./index.es-D54RuMc_.js";
+import './assets/AlertBanner.css';const m = "_messageContainer_2hnjr_1", g = "_info_2hnjr_9", h = "_danger_2hnjr_14", p = "_success_2hnjr_19", f = "_warning_2hnjr_24", u = "_closeIcon_2hnjr_29", j = "_linkBanner_2hnjr_34", s = {
+  messageContainer: m,
+  info: g,
+  danger: h,
+  success: p,
+  warning: f,
+  closeIcon: u,
+  linkBanner: j
+}, k = ({
+  text: e,
+  color: o = "info",
+  isOpen: a = !0,
+  isBold: c = !0,
+  onClose: r
+}) => a ? /* @__PURE__ */ n("div", { "data-testid": "alert-banner", className: `${s.messageContainer} ${s[o]}`, children: /* @__PURE__ */ t(l, { primaryAlign: "space-between", secondaryAlign: "top", gap: "dense", fullWidth: !0, children: [
+  typeof e == "string" ? /* @__PURE__ */ n(d, { bold: c, level: 2, children: e }) : /* @__PURE__ */ n("div", { style: { width: "100%" }, children: e }),
+  r && /* @__PURE__ */ n(_, { icon: "close", iconSize: "small", onClick: r, className: s.closeIcon })
+] }) }) : /* @__PURE__ */ n(i, {});
+export {
+  k as A,
+  s
+};

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/assets/AlertBanner.css

@@ -1 +1 @@
-._messageContainer_1i2s1_1{border-radius:.25rem;padding:.75rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_1i2s1_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_1i2s1_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_1i2s1_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_1i2s1_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}._closeIcon_1i2s1_29{align-self:flex-start;margin-right:-.15rem}
+._messageContainer_2hnjr_1{border-radius:.25rem;padding:.75rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_2hnjr_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_2hnjr_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_2hnjr_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_2hnjr_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}._closeIcon_2hnjr_29{align-self:flex-start;margin-right:-.15rem}._linkBanner_2hnjr_34{cursor:pointer}

package/dist/assets/Modal.css

@@ -1 +1 @@
-._modal_18rd0_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._title_18rd0_6{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_18rd0_18{margin-left:1rem!important}
+._modal_fr8bw_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._title_fr8bw_6{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_fr8bw_18{margin-left:1rem!important}._closeButton_fr8bw_22:before{display:none!important}._closeButton_fr8bw_22:hover{background-color:var(--lmnt-theme-surface-variant)!important}

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -1,4 +1,4 @@
-type AlertBannerProps = {
+export type AlertBannerProps = {
     text: string | JSX.Element;
     color?: 'danger' | 'info' | 'success' | 'warning';
     isOpen?: boolean;
@@ -13,4 +13,3 @@ type AlertBannerProps = {
     action?: JSX.Element;
 };
 export declare const AlertBanner: ({ text, color, isOpen, isBold, onClose, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,24 +1,8 @@
-import { jsx as n, Fragment as a, jsxs as t } from "react/jsx-runtime";
-import { G as l } from "../../index.es-DntoATwO.js";
-import { I as _ } from "../../index.es-3043KTnb.js";
-import { T as m } from "../../index.es-D54RuMc_.js";
-import '../../assets/AlertBanner.css';const d = "_messageContainer_1i2s1_1", g = "_info_1i2s1_9", p = "_danger_1i2s1_14", f = "_success_1i2s1_19", u = "_warning_1i2s1_24", y = "_closeIcon_1i2s1_29", e = {
-  messageContainer: d,
-  info: g,
-  danger: p,
-  success: f,
-  warning: u,
-  closeIcon: y
-}, b = ({
-  text: s,
-  color: r = "info",
-  isOpen: i = !0,
-  isBold: c = !0,
-  onClose: o
-}) => i ? /* @__PURE__ */ n("div", { "data-testid": "alert-banner", className: `${e.messageContainer} ${e[r]}`, children: /* @__PURE__ */ t(l, { primaryAlign: "space-between", secondaryAlign: "top", gap: "dense", children: [
-  typeof s == "string" ? /* @__PURE__ */ n(m, { bold: c, level: 2, children: s }) : /* @__PURE__ */ n("div", { children: s }),
-  o && /* @__PURE__ */ n(_, { icon: "close", iconSize: "small", onClick: o, className: e.closeIcon })
-] }) }) : /* @__PURE__ */ n(a, {});
+import "react/jsx-runtime";
+import "../../index.es-DntoATwO.js";
+import "../../index.es-3043KTnb.js";
+import "../../index.es-D54RuMc_.js";
+import { A as e } from "../../AlertBanner-75jjene1.js";
 export {
-  b as AlertBanner
+  e as AlertBanner
 };

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,7 +1,7 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-CX1WJ2Pp.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
-import { AlertBanner as n } from "./AlertBanner.js";
+import { A as n } from "../../AlertBanner-75jjene1.js";
 import { d as p, b as c, a as l, t as r, g as a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 p("AlertBanner Test", () => {
   c(() => {

package/dist/components/AlertBanner/LinkBanner.d.ts

@@ -0,0 +1,21 @@
+import { AlertBannerProps } from './AlertBanner';
+
+/**
+ * LinkBanner component, shows an alert banner but with a link as text
+ * @param text - The text of the link.
+ * @param url - The URL the link points to.
+ * @param color - The color of the link banner.
+ * @param isOpen - Whether the link banner is open or not.
+ * @param isBold - Whether the text is bold or not.
+ * @returns
+ */
+export declare const LinkBanner: ({ text, color, isOpen, isBold, url, }: Omit<AlertBannerProps, "onClose" | "action" | "text"> & {
+    /**
+     * the given text is shown as a link, in addition a link icon is displayed
+     */
+    url: string;
+    /**
+     * the text of the link
+     */
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AlertBanner/LinkBanner.js

@@ -0,0 +1,37 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { G as l } from "../../index.es-DntoATwO.js";
+import { T as s } from "../../index.es-D54RuMc_.js";
+import { Iconify as p } from "../Iconify/Iconify.js";
+import { A as m, s as c } from "../../AlertBanner-75jjene1.js";
+const g = ({
+  text: n,
+  color: o = "info",
+  isOpen: t = !0,
+  isBold: e = !0,
+  url: i
+}) => /* @__PURE__ */ r(
+  m,
+  {
+    color: o,
+    isOpen: t,
+    isBold: e,
+    text: /* @__PURE__ */ r("a", { href: i, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ a(
+      l,
+      {
+        direction: "horizontal",
+        primaryAlign: "space-between",
+        gap: "dense",
+        secondaryAlign: "center",
+        className: c.linkBanner,
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ r(s, { bold: e, level: 2, children: n }),
+          /* @__PURE__ */ r(p, { icon: "open_in_new", pointer: !0 })
+        ]
+      }
+    ) })
+  }
+);
+export {
+  g as LinkBanner
+};

package/dist/components/AlertBanner/LinkBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AlertBanner/LinkBanner.test.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { a as r, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
+import { LinkBanner as a } from "./LinkBanner.js";
+import { d as n, b as i, a as m, t as p, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+n("LinkBanner Test", () => {
+  i(() => {
+    m.spyOn(o, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0,
+      isDesktopNavbar: !0
+    });
+  }), p("render LinkBanner with text", () => {
+    r(/* @__PURE__ */ s(a, { text: "Test", url: "#" })), t(e.getByText("Test")).toBeInTheDocument(), t(e.getByText("open_in_new")).toBeInTheDocument(), t(e.getByRole("link")).toHaveAttribute("href", "#");
+  });
+});

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,