@hortiview/shared-components 2.28.2 → 2.28.3

package/components/ContextMenu/ContextMenu.d.ts

@@ -1,7 +1,8 @@
 import { ListItemProps } from '@element-public/react-list';
+import { MenuProps } from '@element-public/react-menu';
 import { OfflineViewProps } from '../OfflineView/OfflineView';
 import { IsAllowedProps } from '../PermissionChecks/PermissionService.tsx';
-type ContextMenuProps = {
+type ContextMenuProps = MenuProps & {
     /**
      * If not null, the menu will be open
      */
@@ -25,6 +26,10 @@ type ContextMenuProps = {
      * Props forwarded to <OfflineView /> when offline.
      */
     offlineViewProps?: Partial<OfflineViewProps>;
+    /**
+     * Optional className to apply to the menu container
+     */
+    className?: string;
 };
 export type ActionProps = ListItemProps & {
     closeOnClick?: boolean;
@@ -54,7 +59,8 @@ export type ActionProps = ListItemProps & {
  *
  * @param {boolean} triggerOpen indicates if the menu should be open
  * @param {ListItemProps[]} actions list of actions to display in the context menu as ListItems
- * @param testId id for testing, automatically prefixed
+ * @param {'vertical' | 'horizontal'} iconOrientation determines if menu icon should be vertical or horizontal three dots. Default is 'vertical'
+ * @param {string} data-testid id for testing, automatically prefixed
  * @recommended `primaryText`, `onClick`, `leadingBlock`
  * @requires `ListItemProps` from `@element-public/react-components`
  * @example const actions = [
@@ -64,7 +70,9 @@ export type ActionProps = ListItemProps & {
  * ];
  * @param {boolean} isOnline Whether the user is online; shows OfflineView when false.
  * @param {OfflineViewProps} offlineViewProps Props forwarded to OfflineView when offline.
+ * @param {string} className Optional className to apply to the menu container
+ * @param {MenuProps} menuProps Element Menu props, e.g. `hoistToBody`, `themeColor`, etc.
  * @returns a context menu with the given actions as ListItems
  */
-export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, }: ContextMenuProps) => import("react").JSX.Element | null;
+export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, className, ...menuProps }: ContextMenuProps) => import("react").JSX.Element | null;
 export {};

package/components/ContextMenu/ContextMenu.js

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

package/components/ContextMenu/ContextMenuService.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Repositions the menu vertically to stick with the trigger while scrolling.
+ * Horizontal scrolling is ignored.
+ *
+ * @returns `true` if the trigger has scrolled outside the vertical boundary of
+ * its nearest scrollable ancestor (or the viewport), otherwise `false`.
+ */
+export declare const repositionMenuVertically: (triggerElement: HTMLElement | null, menuElement: HTMLElement | null) => boolean;

package/components/ContextMenu/ContextMenuService.js

@@ -0,0 +1,19 @@
+const c = (e, t) => {
+  const o = e?.getBoundingClientRect();
+  if (!o || !t) return !1;
+  t.style.top = `${o.bottom}px`;
+  const l = r(e), n = l ? l.getBoundingClientRect() : { top: 0, bottom: window.innerHeight };
+  return o.bottom < n.top || o.top > n.bottom;
+}, r = (e) => {
+  let t = e?.parentElement ?? null;
+  for (; t; ) {
+    const { overflow: o, overflowY: l } = getComputedStyle(t);
+    if (/(auto|scroll|overlay)/.test(o + l) && t.scrollHeight > t.clientHeight)
+      return t;
+    t = t.parentElement;
+  }
+  return null;
+};
+export {
+  c as repositionMenuVertically
+};

package/components/GenericTable/GenericTableService.js

@@ -1,32 +1,32 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useMemo as d } from "react";
+import { useMemo as a } from "react";
 import { ContextMenu as l } from "../ContextMenu/ContextMenu.js";
 const P = ({
   data: n = [],
   order: e = [],
   cellTemplates: r = void 0,
-  headerTranslation: t = (f) => f,
+  headerTranslation: t = (d) => d,
   getRowActions: c = void 0,
-  customColumnWidth: o,
+  customColumnWidth: i,
   cardTitleColumn: u,
   cardSubTitleColumn: s
-}) => d(() => {
+}) => a(() => {
   if (n?.length === 0) return [];
-  const f = v(n[0], e).map((i) => {
-    const a = o ? o[i] : void 0;
+  const d = h(n[0], e).map((o) => {
+    const f = i ? i[o] : void 0;
     return {
-      id: i,
-      header: t(i),
-      accessor: i,
-      cellTemplate: r ? r[i] : void 0,
-      cellProps: a ? { width: a } : void 0,
-      headerCellProps: a ? { width: a } : void 0,
-      asCardTitle: i === u,
-      asCardSubtitle: i === s
+      id: o,
+      header: t(o),
+      accessor: o,
+      cellTemplate: r ? r[o] : void 0,
+      cellProps: f ? { width: f } : void 0,
+      headerCellProps: f ? { width: f } : void 0,
+      asCardTitle: o === u,
+      asCardSubtitle: o === s
     };
   });
   return c ? [
-    ...f,
+    ...d,
     {
       id: "actions",
       header: " ",
@@ -34,28 +34,28 @@ const P = ({
       cellProps: { id: "actions" },
       headerCellProps: { id: "actions" }
     }
-  ] : f;
+  ] : d;
 }, [
   n,
   r,
   e,
   t,
   c,
-  o,
+  i,
   u,
   s
 ]), C = ({
   data: n = [],
   getRowActions: e = void 0
-}) => d(() => e ? n.map((r) => {
+}) => a(() => e ? n.map((r) => {
   const t = e(r);
-  return !t || t.length === 0 ? r : { ...r, actions: /* @__PURE__ */ p(l, { actions: t, iconOrientation: "horizontal" }) };
-}) : n, [n, e]), v = (n, e) => {
+  return !t || t.length === 0 ? r : { ...r, actions: /* @__PURE__ */ p(l, { hoistToBody: !0, actions: t, iconOrientation: "horizontal" }) };
+}) : n, [n, e]), h = (n, e) => {
   if (!n) return [];
   let r = Object.keys(n).map((t) => t);
   return e?.length > 0 && (r = r.sort((t, c) => {
-    const o = e.findIndex((s) => s === t), u = e.findIndex((s) => s === c);
-    return o === -1 ? 1 : u === -1 ? -1 : o - u;
+    const i = e.findIndex((s) => s === t), u = e.findIndex((s) => s === c);
+    return i === -1 ? 1 : u === -1 ? -1 : i - u;
   })), r;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortiview/shared-components",
-  "version": "2.28.2",
+  "version": "2.28.3",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
   "license": "GPL-3.0",
   "type": "module",