@hortiview/shared-components 2.29.0-alpha.df46fcc5.1 → 2.30.0

package/CHANGELOG.md

@@ -1,4 +1,34 @@
-## [2.29.0-alpha.df46fcc5.1](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.28.0...v2.29.0-alpha.df46fcc5.1) (2026-07-21)
+## [2.30.0](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.29.0...v2.30.0) (2026-07-29)
+
+### Features
+
+* add constrained height option and enhanced max-height behavior for GenericTable, improve resizable column handling, and update sticky column z-index styles ([7523e1c](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7523e1c08649277473d2cf5732c05828cad49c55))
+* add large icon font-size fix ([93e0332](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/93e03323297b6ec38f935ed8dd6c5fb4fcb9529a))
+* add resizable and sticky column functionality to GenericTable, update docs and styles ([4b1fc39](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/4b1fc39483626e4da698a4e01e75ab4e406b0f0e))
+* change filter icon ([8f0ba94](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8f0ba941e5cf532e60839aa2735f57a69af4ac12))
+* enhance GenericTable with resizable column keys, no-border option, and updated styles ([a3efed8](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a3efed82a5e1606e5ae2ae09e5d6cc72c8e897a1))
+* enhance Modal with better footerSupplemental and action alignment styling, clsx refactor ([a682aaf](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a682aafec611d4011f3256d4b1981a12d997c2b4))
+* replace season-end icon with new version ([76957d3](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/76957d3541b0b793daa22808b7163d3f3c8932d2))
+* update GenericTable styles for better sticky header and column handling, remove unused scrollWrapper styling ([5d95a74](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/5d95a74a9ada59333a6357c599d575a183fadfed))
+
+### Bug Fixes
+
+* appply PR suggestions; icon color, style comments, docs ([c319f59](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/c319f59a41ccb78375261ad5282e05901e0361cf))
+* style overrride for the sticky actions header ([7d71668](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7d716684a7b53b8b8c4d1bb08e3c512ab750c4de))
+* update fallback offsetHeight in GenericTable pagination calculation to prevent layout issues ([38128e5](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/38128e521590675c1787291dbe420f88def4d438))
+* use currentColor for svg fill ([0a7cb31](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0a7cb3152b7a6e1dd3b076c0fb5ce411b1ef3473))
+
+### Documentation
+
+* generic table dynamic height calculations ([2927482](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/2927482853b12d57b921719ba642fe29991280fd))
+
+### Code Refactoring
+
+* deprecate `tableElevationLevel`, update table styles, and remove unused code ([9086f5f](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/9086f5f2ef481a2da3d8f3b345295040b6c781cf))
+* remove unnecessary overflow-y styling updates in GenericTable maxHeight logic ([f339105](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f339105a7fcef87583eb19fdd85ffeb2af7aadd6))
+* update filterButtonSize control to use select with options ([589bfa5](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/589bfa5c7dbc72632dd12177f21842f3be7ce17c))
+
+## [2.29.0](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.28.3...v2.29.0) (2026-07-22)
 
 ### Features
 
@@ -6,9 +36,35 @@
 
 ### Code Refactoring
 
-* add additional type exports to main ([b9db9ef](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/b9db9ef2dda1f20afd80cd46c741e4c73b9c7fd5))
 * update yarnrc ([e510d88](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e510d88d94d7b9a7d5c94e60a85dc01985745bb7))
 
+## [2.28.3](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.28.2...v2.28.3) (2026-07-17)
+
+### Bug Fixes
+
+* close context menu on scroll and allow passing more props ([389de23](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/389de23e690f3cafe9724bafb1bb08e09ca33eec))
+* handle repositioning of hoisted ContextMenu on scroll ([1f8025a](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1f8025a545946014c0dd80f6982611c58c07fc29))
+
+### Documentation
+
+* update ContextMenu prop documentation ([c0d063c](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/c0d063c62ab3cad6c2b6f498d4241c4f8aeb8823))
+
+### Code Refactoring
+
+* remove hoistToBody prop and update context menu story for clarity ([d1155bc](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d1155bcf18753ee7029a166421bf08820692482d))
+
+## [2.28.2](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.28.1...v2.28.2) (2026-07-17)
+
+### Bug Fixes
+
+* handle null and undefined values in CustomTextField and enhance FormNumber tests ([819db7e](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/819db7ee8dded41e96423c799c19de26e82742f0))
+
+## [2.28.1](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.28.0...v2.28.1) (2026-07-06)
+
+### Code Refactoring
+
+* add additional type exports to main ([b9db9ef](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/commit/b9db9ef2dda1f20afd80cd46c741e4c73b9c7fd5))
+
 ## [2.28.0](https://sdundc.visualstudio.com/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.27.4...v2.28.0) (2026-07-06)
 
 ### Features

package/GenericTableService-svNuHOet.js

@@ -0,0 +1,98 @@
+import { jsx as u } from "react/jsx-runtime";
+import { useMemo as p } from "react";
+import { ContextMenu as q } from "./components/ContextMenu/ContextMenu.js";
+import './assets/GenericTableService.css';const g = "_topBar_7lsq9_1", B = "_leadingContent_7lsq9_5", v = "_filterBar_7lsq9_9", x = "_rowActions_7lsq9_14", y = "_start_7lsq9_20", C = "_emptyTable_7lsq9_25", A = "_tableContainer_7lsq9_33", m = "_table_7lsq9_33", w = "_noBorder_7lsq9_47", z = "_fullWidth_7lsq9_75", P = "_hasActions_7lsq9_104", F = "_resizable_7lsq9_112", I = "_stickyColumns_7lsq9_112", L = "_stickyFirst_7lsq9_113", N = "_stickyLast_7lsq9_114", j = {
+  topBar: g,
+  leadingContent: B,
+  filterBar: v,
+  rowActions: x,
+  start: y,
+  emptyTable: C,
+  tableContainer: A,
+  table: m,
+  noBorder: w,
+  fullWidth: z,
+  hasActions: P,
+  resizable: F,
+  stickyColumns: I,
+  stickyFirst: L,
+  stickyLast: N
+}, K = ({
+  data: t = [],
+  order: s = [],
+  cellTemplates: e = void 0,
+  headerTranslation: r = (_) => _,
+  getRowActions: i = void 0,
+  customColumnWidth: o,
+  cardTitleColumn: c,
+  cardSubTitleColumn: a,
+  stickyColumns: f,
+  resizableColumns: d = []
+}) => p(() => {
+  if (t?.length === 0) return [];
+  const _ = M(t[0], s).map((n) => {
+    const l = o ? o[n] : void 0, b = d ? d.includes(n) : !1;
+    return {
+      id: n,
+      header: r(n),
+      accessor: n,
+      cellTemplate: e ? e[n] : void 0,
+      cellProps: l ? { width: l } : void 0,
+      headerCellProps: l ? { width: l } : void 0,
+      asCardTitle: n === c,
+      asCardSubtitle: n === a,
+      disableResizing: !b,
+      width: Number.isInteger(l) ? Number(l) : 150
+    };
+  }), h = i ? [
+    ..._,
+    {
+      id: "actions",
+      header: " ",
+      accessor: "actions",
+      cellProps: { id: "actions" },
+      headerCellProps: { id: "actions" },
+      disableResizing: !0,
+      width: 64
+      // 4rem
+    }
+  ] : _;
+  return G(h, f);
+}, [
+  t,
+  s,
+  i,
+  f,
+  o,
+  r,
+  e,
+  c,
+  a,
+  d
+]), G = (t, s) => !s?.first && !s?.last || t.length === 0 ? t : t.map((e, r) => r === 0 && s?.first ? {
+  ...e,
+  fixed: "leading"
+} : r === t.length - 1 && s?.last ? {
+  ...e,
+  fixed: "trailing"
+} : e), S = ({
+  data: t = [],
+  getRowActions: s = void 0
+}) => p(() => s ? t.map((e) => {
+  const r = s(e);
+  if (!r || r.length === 0) return e;
+  const i = /* @__PURE__ */ u("div", { className: j.rowActions, children: /* @__PURE__ */ u(q, { hoistToBody: !0, actions: r, iconOrientation: "horizontal" }) });
+  return { ...e, actions: i };
+}) : t, [t, s]), M = (t, s) => {
+  if (!t) return [];
+  let e = Object.keys(t).map((r) => r);
+  return s?.length > 0 && (e = e.sort((r, i) => {
+    const o = s.findIndex((a) => a === r), c = s.findIndex((a) => a === i);
+    return o === -1 ? 1 : c === -1 ? -1 : o - c;
+  })), e;
+};
+export {
+  S as a,
+  j as s,
+  K as u
+};

package/assets/AllowedIconButton.css

@@ -0,0 +1 @@
+._largeIconFix_10hc4_1 i[class*=lmnt-icon--large]{font-size:32px}

package/assets/Filter.css

@@ -1 +1 @@
-._filterButton_1qtzn_1{width:15rem;height:100%!important;margin:0;border-radius:.25rem!important}._filterButton_1qtzn_1,._filterButton_1qtzn_1:hover,._filterButton_1qtzn_1:focus,._filterButton_1qtzn_1:active,._filterButton_1qtzn_1:target,._filterButton_1qtzn_1 [class^=mdc-button__ripple],._filterButton_1qtzn_1:hover [class^=mdc-button__ripple],._filterButton_1qtzn_1:focus [class^=mdc-button__ripple],._filterButton_1qtzn_1:active [class^=mdc-button__ripple],._filterButton_1qtzn_1:target [class^=mdc-button__ripple]{border-radius:.25rem!important}._relativeParent_1qtzn_21{position:relative}._iconColor_1qtzn_25{color:var(--lmnt-theme-primary)}._filterBadge_1qtzn_29{position:absolute;top:0;right:0;transform:translate(50%,-50%)}._dense_1qtzn_36,._dense_1qtzn_36 div[class*=lmnt-select__anchor]{height:2.5rem!important}._filterModal_1qtzn_41 [class="lmnt-modal__actions mdc-dialog__actions"]{margin-bottom:0!important}._borderRadius_1qtzn_45 [class*=mdc-notched-outline__leading]{border-radius:.25rem 0 0 .25rem!important}._borderRadius_1qtzn_45 [class*=mdc-notched-outline__trailing]{border-radius:0 .25rem .25rem 0!important}
+._filterButton_1qsua_1{width:15rem;height:100%!important;margin:0;border-radius:.25rem!important}._filterButton_1qsua_1,._filterButton_1qsua_1:hover,._filterButton_1qsua_1:focus,._filterButton_1qsua_1:active,._filterButton_1qsua_1:target,._filterButton_1qsua_1 [class^=mdc-button__ripple],._filterButton_1qsua_1:hover [class^=mdc-button__ripple],._filterButton_1qsua_1:focus [class^=mdc-button__ripple],._filterButton_1qsua_1:active [class^=mdc-button__ripple],._filterButton_1qsua_1:target [class^=mdc-button__ripple]{border-radius:.25rem!important}._relativeParent_1qsua_21{position:relative}._iconColor_1qsua_25{color:var(--lmnt-theme-primary)}._largeIconFix_1qsua_29 i[class*=lmnt-icon--large]{font-size:32px}._filterBadge_1qsua_33{position:absolute;top:0;right:0;transform:translate(50%,-50%)}._dense_1qsua_40,._dense_1qsua_40 div[class*=lmnt-select__anchor]{height:2.5rem!important}._filterModal_1qsua_45 [class="lmnt-modal__actions mdc-dialog__actions"]{margin-bottom:0!important}._borderRadius_1qsua_49 [class*=mdc-notched-outline__leading]{border-radius:.25rem 0 0 .25rem!important}._borderRadius_1qsua_49 [class*=mdc-notched-outline__trailing]{border-radius:0 .25rem .25rem 0!important}

package/assets/GenericTableService.css

@@ -0,0 +1 @@
+._topBar_7lsq9_1 [class*=lmnt-table__top-bar__title]{display:none}._leadingContent_7lsq9_5{padding:.5rem 1rem}._filterBar_7lsq9_9{padding:unset;width:inherit!important}._rowActions_7lsq9_14{width:4rem;display:flex;justify-content:center}._start_7lsq9_20{padding-top:0;padding-bottom:0}._emptyTable_7lsq9_25{height:16rem}[class*=mnt-pagination][class*=mdc-data-table__pagination]{border-top:1px solid var(--lmnt-theme-on-secondary-stroke)}._tableContainer_7lsq9_33{display:contents}._elevation_7lsq9_37{border-radius:.4rem;width:100%}._elevation_7lsq9_37._noShadow_7lsq9_42{box-shadow:none!important;border-radius:0}._table_7lsq9_33._noBorder_7lsq9_47{border:none}._table_7lsq9_33,._table_7lsq9_33 [class*=mdc-data-table__table-container]{border-radius:.4rem}._table_7lsq9_33 *[id=actions]{width:44px;padding:0 2px;position:sticky;right:0;background-color:var(--lmnt-theme-background)}._table_7lsq9_33 tr:hover td[id=actions]{background-color:var(--table-bg-color-hover)}._noBorder_7lsq9_47{border:none}._fullWidth_7lsq9_75{width:100%}._table_7lsq9_33 [class*=mdc-data-table__row],._table_7lsq9_33 [class*=mdc-data-table__header-row]{width:-webkit-fill-available!important}._table_7lsq9_33 [class*=lmnt-table__header]{position:sticky;top:0;z-index:2!important;background-color:var(--lmnt-theme-background)}._table_7lsq9_33 [class*=lmnt-table__table]{min-width:max-content;width:100%}._table_7lsq9_33 [class*=mdc-data-table__row]>div:not(:last-child),._table_7lsq9_33 [class*=mdc-data-table__header-row]>div:not(:last-child){min-width:4.5rem}._table_7lsq9_33._hasActions_7lsq9_104 [class*=mdc-data-table__row]>div:last-child,._table_7lsq9_33._hasActions_7lsq9_104 [class*=mdc-data-table__header-row]>div:last-child{min-width:4rem}._table_7lsq9_33._resizable_7lsq9_112._stickyColumns_7lsq9_112 [class*=mdc-data-table__row]>div:not(:first-child):not(:last-child),._table_7lsq9_33._resizable_7lsq9_112._stickyColumns_7lsq9_112:not(._stickyFirst_7lsq9_113) [class*=mdc-data-table__row]>div:first-child,._table_7lsq9_33._resizable_7lsq9_112._stickyColumns_7lsq9_112:not(._stickyLast_7lsq9_114) [class*=mdc-data-table__row]>div:last-child{width:unset!important;flex:1!important;min-width:9.375rem}._table_7lsq9_33._resizable_7lsq9_112._stickyColumns_7lsq9_112 [class*=mdc-data-table__header-row]>div:not(:first-child):not(:last-child),._table_7lsq9_33._resizable_7lsq9_112._stickyColumns_7lsq9_112:not(._stickyFirst_7lsq9_113) [class*=mdc-data-table__header-row]>div:first-child,._table_7lsq9_33._resizable_7lsq9_112._stickyColumns_7lsq9_112:not(._stickyLast_7lsq9_114) [class*=mdc-data-table__header-row]>div:last-child{width:unset!important;flex:1!important;min-width:9.375rem}._table_7lsq9_33._stickyFirst_7lsq9_113 [class*=mdc-data-table__cell]:first-child,._table_7lsq9_33._stickyFirst_7lsq9_113 [class*=mdc-data-table__header-cell]:first-child{position:sticky!important;left:0;z-index:1!important;background-color:var(--lmnt-theme-background)}._table_7lsq9_33._stickyFirst_7lsq9_113 [class*=mdc-data-table__header-cell]:first-child{z-index:3!important}._table_7lsq9_33._stickyLast_7lsq9_114 [class*=mdc-data-table__cell]:last-child,._table_7lsq9_33._stickyLast_7lsq9_114 [class*=mdc-data-table__header-cell]:last-child{position:sticky!important;right:0;z-index:1!important;background-color:var(--lmnt-theme-background)}._table_7lsq9_33._stickyLast_7lsq9_114 [class*=mdc-data-table__header-cell]:last-child{z-index:3!important}._table_7lsq9_33._stickyFirst_7lsq9_113 tr:hover td:first-child,._table_7lsq9_33._stickyLast_7lsq9_114 tr:hover td:last-child{background-color:var(--table-bg-color-hover)}._table_7lsq9_33._resizable_7lsq9_112 [class*=lmnt-table__resize-handle]{border-left:.5rem solid transparent;border-right:.5rem solid transparent}._table_7lsq9_33 div[id=actions]{position:sticky!important}

package/assets/Modal.css

@@ -1 +1 @@
-._modal_1l955_1{z-index:75}._modal_1l955_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_1l955_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_1l955_1 footer{margin-bottom:0!important}._gap_1l955_18{gap:4px!important;padding-left:.5rem!important}._title_1l955_23{header{display:flex;justify-content:start;padding-inline:0!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_1l955_36{margin-left:1rem!important}._closeButton_1l955_40{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_1l955_40:before{display:none!important}._closeButton_1l955_40:hover{background-color:var(--lmnt-theme-surface-variant)!important}._errorBanner_1l955_52{width:100%}._headerActions_1l955_56{margin-left:.5rem}
+._modal_3lh36_1{z-index:75}._modal_3lh36_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_3lh36_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_3lh36_1 footer{margin-bottom:0!important}._gap_3lh36_18{gap:4px!important;padding-left:.5rem!important}._title_3lh36_23{header{display:flex;justify-content:start;padding-inline:0!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_3lh36_36{margin-left:1rem!important}._closeButton_3lh36_40{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_3lh36_40:before{display:none!important}._closeButton_3lh36_40:hover{background-color:var(--lmnt-theme-surface-variant)!important}._errorBanner_3lh36_52{width:100%}._headerActions_3lh36_56{margin-left:.5rem}._footerLayoutFixes_3lh36_66{footer[class*=lmnt-modal__actions]{justify-content:space-between!important;padding:0 .75rem .25rem}div[class*=lmnt-modal_actions_button]{margin:unset!important}}

package/components/AllowedIconButton/AllowedIconButton.js

@@ -1,26 +1,29 @@
-import { jsx as o } from "react/jsx-runtime";
-import { I as s } from "../../index.es-BwhRJBEH.js";
-import { Allowed as a } from "../Allowed/Allowed.js";
-const u = ({
+import { jsx as e } from "react/jsx-runtime";
+import { I as d } from "../../index.es-BwhRJBEH.js";
+import { Allowed as s } from "../Allowed/Allowed.js";
+import '../../assets/AllowedIconButton.css';const m = "_largeIconFix_10hc4_1", I = {
+  largeIconFix: m
+}, p = ({
   "data-testid": t,
-  variant: e = "filled-primary",
-  iconType: i = "filled",
-  size: d = "medium",
-  formId: r,
-  permissions: l,
-  entityIds: m,
-  ...n
-}) => /* @__PURE__ */ o(a, { neededPermissions: l, entityIds: m, children: /* @__PURE__ */ o(
-  s,
+  variant: i = "filled-primary",
+  iconType: l = "filled",
+  size: o = "medium",
+  formId: n,
+  permissions: r,
+  entityIds: a,
+  ...c
+}) => /* @__PURE__ */ e(s, { neededPermissions: r, entityIds: a, children: /* @__PURE__ */ e(
+  d,
   {
-    ...n,
+    ...c,
     "data-testid": `allowed-icon-button-${t}`,
-    form: r,
-    iconSize: d,
-    iconType: i,
-    variant: e
+    className: o === "large" ? I.largeIconFix : "",
+    form: n,
+    iconSize: o,
+    iconType: l,
+    variant: i
   }
 ) });
 export {
-  u as AllowedIconButton
+  p as AllowedIconButton
 };

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
+};