@hortiview/shared-components 2.25.0 → 2.26.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.26.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.25.0...v2.26.0) (2026-05-11)
+
+### Features
+
+* add truncation handling for primary text in ContextMenu and update styles and tests ([9ed40a5](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/9ed40a5e66e49bd42cfd94fd1213a60ebcf8c4a9))
+* enhance ContextMenu with responsive styles and add story for long text handling ([c712489](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/c7124897ced3931f32e65b65c16654053417ae9d))
+
 ## [2.25.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.24.3...v2.25.0) (2026-05-07)
 
 ### Features

package/dist/assets/ContextMenu.css

@@ -1 +1 @@
-._menu_x6qd9_1{width:15.875rem;border-radius:.5rem!important}._icon_x6qd9_6{color:var(--lmnt-theme-on-secondary-inactive)}._listItem_x6qd9_10 [class*=mdc-list-item__start]{color:var(--lmnt-theme-on-secondary-inactive);align-self:center!important;margin:0 1rem!important}._listItem_x6qd9_10 [class*=mdc-list-item__end]{color:var(--lmnt-theme-on-secondary-inactive)}._offlineViewMargin_x6qd9_20{margin:.5rem}
+._menu_52omh_1{min-width:10rem;width:max-content;border-radius:.5rem!important}._mobile_52omh_7{max-width:12.5rem}._desktop_52omh_11{max-width:21.25rem}._icon_52omh_15{color:var(--lmnt-theme-on-secondary-inactive)}._listItem_52omh_19 [class*=mdc-list-item__primary-text],._listItem_52omh_19 [class*=mdc-list-item__secondary-text]{display:-webkit-box!important;-webkit-line-clamp:2!important;line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important}._listItem_52omh_19 [class*=mdc-list-item__start]{color:var(--lmnt-theme-on-secondary-inactive);align-self:center!important;margin:0 1rem!important}._listItem_52omh_19 [class*=mdc-list-item__end]{color:var(--lmnt-theme-on-secondary-inactive)}._offlineViewMargin_52omh_51{margin:.5rem}._primaryTextTruncated_52omh_55 [class*=mdc-list-item__secondary-text]{padding-top:1rem!important}

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,90 +1,120 @@
-import { jsx as t, jsxs as I } from "react/jsx-runtime";
-import { I as A } from "../../index.es-CkB4776y.js";
-import { M as h, L as k, a as c, b as y } from "../../index.es-Cg57snrN.js";
-import { useState as q, useCallback as m, useEffect as L, useMemo as V, Fragment as B } from "react";
-import { u as N } from "../../uniqueId-CJo-XRQb.js";
-import { OfflineView as b } from "../OfflineView/OfflineView.js";
-import { useIsAllowed as $ } from "../PermissionChecks/PermissionService.js";
-import '../../assets/ContextMenu.css';const j = "_menu_x6qd9_1", z = "_icon_x6qd9_6", H = "_listItem_x6qd9_10", O = "_offlineViewMargin_x6qd9_20", n = {
-  menu: j,
-  icon: z,
-  listItem: H,
-  offlineViewMargin: O
-}, U = ({
-  triggerOpen: s = null,
-  actions: r,
-  iconOrientation: _ = "vertical",
-  "data-testid": a,
-  isOnline: p = !0,
-  offlineViewProps: M
+import { jsx as i, jsxs as M } from "react/jsx-runtime";
+import { I as k } from "../../index.es-CkB4776y.js";
+import { M as v, L as w, a as x, b as C } from "../../index.es-Cg57snrN.js";
+import { useState as g, useCallback as T, useEffect as I, useMemo as b, Fragment as A, useRef as L, useLayoutEffect as B } from "react";
+import { c as V } from "../../index-Df2FYN-K.js";
+import { u as z } from "../../uniqueId-CJo-XRQb.js";
+import { OfflineView as H } from "../OfflineView/OfflineView.js";
+import { useIsAllowed as N } from "../PermissionChecks/PermissionService.js";
+import { useBreakpoints as O } from "../../hooks/useBreakpoints.js";
+import '../../assets/ContextMenu.css';const E = "_menu_52omh_1", R = "_mobile_52omh_7", S = "_desktop_52omh_11", $ = "_icon_52omh_15", j = "_listItem_52omh_19", q = "_offlineViewMargin_52omh_51", D = "_primaryTextTruncated_52omh_55", n = {
+  menu: E,
+  mobile: R,
+  desktop: S,
+  icon: $,
+  listItem: j,
+  offlineViewMargin: q,
+  primaryTextTruncated: D
+}, P = ({
+  triggerOpen: t = null,
+  actions: l,
+  iconOrientation: a = "vertical",
+  "data-testid": c,
+  isOnline: m = !0,
+  offlineViewProps: f
 }) => {
-  const [f, i] = q(!1), u = $(), d = m(() => {
-    i(!1);
-  }, []), g = m(() => {
-    i((e) => !e);
+  const { isMobile: d } = O(), [u, o] = g(!1), _ = N(), p = T(() => {
+    o(!1);
+  }, []), h = T(() => {
+    o((e) => !e);
   }, []);
-  L(() => {
-    i(s !== null ? s : !1);
-  }, [s]);
-  const o = V(() => r.filter((e) => e.isHidden || e.isAllowed === !1 ? !1 : !(e.permissionConfiguration && !u(e.permissionConfiguration))), [r, u]);
-  return o.length === 0 ? null : /* @__PURE__ */ t(
-    h,
+  I(() => {
+    o(t !== null ? t : !1);
+  }, [t]);
+  const r = b(() => l.filter((e) => e.isHidden || e.isAllowed === !1 ? !1 : !(e.permissionConfiguration && !_(e.permissionConfiguration))), [l, _]);
+  return r.length === 0 ? null : /* @__PURE__ */ i(
+    v,
     {
       className: n.menu,
-      "data-testid": a ?? "contextMenu-undefined",
-      open: f,
+      "data-testid": c ?? "contextMenu-undefined",
+      open: u,
       surfaceOnly: !0,
       hoistToBody: !0,
-      onClose: d,
-      trigger: /* @__PURE__ */ t(
-        A,
+      onClose: p,
+      trigger: /* @__PURE__ */ i(
+        k,
         {
           className: n.icon,
-          variant: f ? "filled-primary" : void 0,
+          variant: u ? "filled-primary" : void 0,
           "data-testid": "open-button",
-          icon: _ === "vertical" ? "more_vert" : "more_horiz",
-          onClick: g
+          icon: a === "vertical" ? "more_vert" : "more_horiz",
+          onClick: h
         }
       ),
-      children: p ? /* @__PURE__ */ t(k, { "data-testid": "selection-list", children: o.map((e, l) => {
-        const {
-          closeOnClick: w,
-          dividerBefore: x,
-          dividerAfter: C,
-          permissionConfiguration: S,
-          isAllowed: T,
-          isHidden: D,
-          ...v
-        } = e;
-        return /* @__PURE__ */ I(B, { children: [
-          x && l !== 0 && /* @__PURE__ */ t(c, {}),
-          /* @__PURE__ */ t(
-            y,
-            {
-              className: n.listItem,
-              ...v,
-              leadingBlockType: "icon",
-              "data-testid": e["data-testid"] ?? `contextMenu-action-${l}`,
-              onClick: () => {
-                e?.onClick?.(), w !== !1 && d();
-              }
-            }
-          ),
-          C && l !== o.length - 1 && /* @__PURE__ */ t(c, {})
-        ] }, N(`LI_${e.primaryText?.toString()}_`));
-      }) }) : /* @__PURE__ */ t(
-        b,
+      children: m ? /* @__PURE__ */ i(w, { "data-testid": "selection-list", children: r.map((e, s) => /* @__PURE__ */ M(A, { children: [
+        e.dividerBefore && s !== 0 && /* @__PURE__ */ i(x, {}),
+        /* @__PURE__ */ i(
+          F,
+          {
+            actionProps: e,
+            index: s,
+            isMobile: d,
+            closeMenu: p
+          }
+        ),
+        e.dividerAfter && s !== r.length - 1 && /* @__PURE__ */ i(x, {})
+      ] }, z(`LI_${e.primaryText?.toString()}_`))) }) : /* @__PURE__ */ i(
+        H,
         {
           size: "small",
           variant: "filled",
           className: n.offlineViewMargin,
-          ...M
+          ...f
         }
       )
     },
-    `contextMenu-${a ?? "undefined"}`
+    `contextMenu-${c ?? "undefined"}`
+  );
+}, F = ({
+  actionProps: t,
+  index: l,
+  isMobile: a,
+  closeMenu: c
+}) => {
+  const m = L(null), [f, d] = g(!1), { closeOnClick: u, permissionConfiguration: o, isAllowed: _, isHidden: p, ...h } = t;
+  return B(() => {
+    const r = m.current;
+    if (!r) return;
+    const e = r.querySelector(
+      "[class*='mdc-list-item__primary-text']"
+    );
+    if (!e) return;
+    const s = () => {
+      d(e.scrollHeight > e.clientHeight);
+    };
+    s();
+    const y = new ResizeObserver(s);
+    return y.observe(e), () => {
+      y.disconnect();
+    };
+  }, [t.primaryText, a]), /* @__PURE__ */ i(
+    C,
+    {
+      ref: m,
+      "data-testid": t["data-testid"] ?? `contextMenu-action-${l}`,
+      className: V(
+        n.listItem,
+        f && n.primaryTextTruncated,
+        a ? n.mobile : n.desktop
+      ),
+      ...h,
+      leadingBlockType: "icon",
+      onClick: () => {
+        t?.onClick?.(), u !== !1 && c();
+      }
+    }
   );
 };
 export {
-  U as ContextMenu
+  P as ContextMenu
 };

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.25.0",
+  "version": "2.26.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",