@hortiview/shared-components 2.23.5 → 2.24.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.24.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.23.5...v2.24.0) (2026-04-30)
+
+### Features
+
+* extend contextMenu and allowedIconButton for FAB display on mobile and tablet devices ([f194914](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f1949142376af9f4ce12324b8bf7c074ef892ff3))
+
 ## [2.23.5](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.23.4...v2.23.5) (2026-04-27)
 
 ### Code Refactoring

package/README.md

@@ -35,13 +35,13 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [Filter](#filter)
 1. [FormattedNumberDisplay](#formattednumberdisplay)
 1. [FormComponents](#formcomponents)
-   1. [FormCheckBox](#formcheckbox)
-   1. [FormDatePicker](#formdatepicker)
-   1. [FormNumber](#formnumber)
-   1. [FormRadio](#formradio)
-   1. [FormSelect](#formselect)
-   1. [FormSlider](#formslider)
-   1. [FormText](#formtext)
+    1. [FormCheckBox](#formcheckbox)
+    1. [FormDatePicker](#formdatepicker)
+    1. [FormNumber](#formnumber)
+    1. [FormRadio](#formradio)
+    1. [FormSelect](#formselect)
+    1. [FormSlider](#formslider)
+    1. [FormText](#formtext)
 1. [GenericTable](#generictable)
 1. [HashTabView](#hashtabview)
 1. [HeaderFilter](#headerfilter)
@@ -202,6 +202,32 @@ const actions = [
 <ContextMenu actions={actions} />;
 ```
 
+#### Render ContextMenu as a Floating Action Button (FAB)
+
+On mobile and tablet devices, you can display the context menu as a floating action button (FAB) by setting
+`isFloatingActionButtonOnMobile` to true. This removes the context menu from the DOM and positions it
+statically in the bottom right corner of the screen.
+
+You can control the offset from the screen edges using `floatingButtonScreenOffsetType`, which includes
+presets for full-screen implementations and screens with a BottomAppBar.
+
+To prevent the FAB from blocking any elements in the rendered view, provide a DOM element selector to
+`floatingButtonPaddingInsertTarget`. A spacer element will be attached to this target, increasing its
+height by the appropriate amount.
+
+```jsx
+import { ContextMenu } from '@hortiview/shared-components';
+
+const actions = [...];
+
+<ContextMenu
+    actions={actions}
+    isFloatingActionButtonOnMobile={true}
+    floatingButtonScreenOffsetType={'buttonAppBar'}
+    floatingButtonPaddingInsertTarget={'#layout-container'}
+/>;
+```
+
 ### DeleteModal
 
 A modal to confirm a deletion.
@@ -1098,6 +1124,12 @@ function BlockActions({ blockId, farmId }) {
 }
 ```
 
+#### Render AllowedIconButton as Floating Action Button (FAB)
+
+On mobile and tablet devices, you can display the AllowedIconButton as a floating action button (FAB).
+For more information, see the [Context Menu documentation](#render-contextmenu-as-a-floating-action-button-fab),
+as both implementations are identical.
+
 ### SafeForm
 
 A wrapper around a form that prevents accidental submission when pressing Enter in input fields.

package/dist/assets/Modal.css

@@ -1 +1 @@
-._modal_lk11w_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_lk11w_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_lk11w_1 footer{margin-bottom:0!important}._gap_lk11w_14{gap:4px!important;padding-left:.5rem!important}._title_lk11w_19{header{display:flex;justify-content:start;padding-inline:0!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_lk11w_32{margin-left:1rem!important}._closeButton_lk11w_36{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_lk11w_36:before{display:none!important}._closeButton_lk11w_36:hover{background-color:var(--lmnt-theme-surface-variant)!important}._errorBanner_lk11w_48{width:100%}._headerActions_lk11w_52{margin-left:.5rem}
+._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}

package/dist/assets/contextMenu.css

@@ -0,0 +1 @@
+._menu_1bdpq_1{width:15.875rem;border-radius:.5rem!important}._icon_1bdpq_6{color:var(--lmnt-theme-on-secondary-inactive)}._listItem_1bdpq_10 [class*=mdc-list-item__start]{color:var(--lmnt-theme-on-secondary-inactive);align-self:center!important;margin:0 1rem!important}._listItem_1bdpq_10 [class*=mdc-list-item__end]{color:var(--lmnt-theme-on-secondary-inactive)}._offlineViewMargin_1bdpq_20{margin:.5rem}._fabContainer_1bdpq_24{position:fixed;z-index:51}._fabContainer_1bdpq_24._buttonAppBar_1bdpq_29{bottom:5.4rem;right:1rem}._fabContainer_1bdpq_24._fullScreen_1bdpq_34{bottom:1.5rem;right:1rem}._fabIcon_1bdpq_39{box-shadow:0 4px 10px #0000004d}._fabMenu_1bdpq_43{margin-bottom:.5rem}._scrim_1bdpq_47{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0000004d;z-index:50;opacity:0;pointer-events:none;transition:opacity .15s ease-in}._scrimVisible_1bdpq_60{opacity:1;pointer-events:auto}._fabSpacer_1bdpq_65{height:5.2rem}

package/dist/components/AllowedIconButton/AllowedIconButton.d.ts

@@ -1,5 +1,7 @@
 import { IconButtonProps } from '@element-public/react-icon-button';
+import { FloatingActionButtonProps } from '../ContextMenu/ContextMenu';
 import { IsAllowedProps } from '../PermissionChecks/PermissionService';
+import { default as React } from 'react';
 
 export type AllowedIconButtonProps = Omit<IconButtonProps & React.HTMLProps<HTMLButtonElement>, 'variant' | 'iconType' | 'iconSize' | 'size'> & {
     /**
@@ -34,10 +36,21 @@ export type AllowedIconButtonProps = Omit<IconButtonProps & React.HTMLProps<HTML
      * Default: 'medium'
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-};
+} & FloatingActionButtonProps;
 /**
- * A permission-gated icon button component that only renders when the user has the required permissions.
- * @param {AllowedIconButtonProps} props - Component properties
- * @returns {JSX.Element | null} The icon button component or null if permissions are not met
+ * Renders an icon button only when the required permissions are granted.
+ *
+ * Supports optional mobile floating action button behavior through
+ * `FloatingActionButtonProps` -> {@link FloatingActionButtonProps}
+ *
+ * @param props Component props.
+ * @param props.data-testid Test id suffix used to generate the rendered button test id.
+ * @param props.entityIds Entity id or ids used for permission evaluation.
+ * @param props.formId Optional form id used to associate the button with a form.
+ * @param props.variant Visual variant of the icon button.
+ * @param props.iconType Icon style variant.
+ * @param props.permissions Permissions required to render the button.
+ * @param props.size Size of the icon button.
+ * @returns The rendered icon button, or `null` when access is not allowed.
  */
-export declare const AllowedIconButton: ({ "data-testid": testId, variant, iconType, size, ...props }: AllowedIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AllowedIconButton: (props: AllowedIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AllowedIconButton/AllowedIconButton.js

@@ -1,23 +1,58 @@
-import { jsx as i } from "react/jsx-runtime";
-import { I as m } from "../../index.es-CkB4776y.js";
-import { Allowed as l } from "../Allowed/Allowed.js";
-const f = ({
-  "data-testid": o,
-  variant: e = "filled-primary",
-  iconType: d = "filled",
-  size: n = "medium",
-  ...t
-}) => /* @__PURE__ */ i(l, { neededPermissions: t.permissions, entityIds: t.entityIds, children: /* @__PURE__ */ i(
-  m,
-  {
-    "data-testid": `allowed-icon-button-${o}`,
-    form: t.formId,
-    iconSize: n,
-    iconType: d,
-    variant: e,
-    ...t
-  }
-) });
+import { jsx as e, jsxs as A, Fragment as S } from "react/jsx-runtime";
+import { I as x } from "../../index.es-CkB4776y.js";
+import { c as i } from "../../index-Df2FYN-K.js";
+import { createPortal as d } from "react-dom";
+import { useBreakpoints as P } from "../../hooks/useBreakpoints.js";
+import { Allowed as T } from "../Allowed/Allowed.js";
+import { s as t } from "../../contextMenu.module-RWPDK7Ds.js";
+import { useMemo as h } from "react";
+const O = (c) => {
+  const {
+    "data-testid": l,
+    variant: m = "filled-primary",
+    iconType: f = "filled",
+    size: p = "medium",
+    permissions: u,
+    entityIds: b,
+    formId: B,
+    isFloatingActionButtonOnMobile: g = !1,
+    floatingButtonPaddingInsertTarget: o,
+    floatingButtonScreenOffsetType: n = "buttonAppBar",
+    ...I
+  } = c, { isDesktop: y } = P(), r = g && !y, a = /* @__PURE__ */ e(
+    x,
+    {
+      className: i(r && t.fabIcon),
+      "data-testid": `allowed-icon-button-${l}`,
+      form: B,
+      iconSize: r ? "xlarge" : p,
+      iconType: f,
+      variant: m,
+      ...I
+    }
+  ), s = h(() => o ? document.querySelector(o) : null, [o]);
+  return /* @__PURE__ */ e(T, { neededPermissions: u, entityIds: b, children: r ? /* @__PURE__ */ A(S, { children: [
+    d(
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: i(
+            t.fabContainer,
+            n === "buttonAppBar" && t.buttonAppBar,
+            n === "fullScreen" && t.fullScreen
+          ),
+          "data-testid": "fab-container",
+          children: a
+        }
+      ),
+      document.body
+    ),
+    s && d(
+      /* @__PURE__ */ e("div", { className: t.fabSpacer, "data-testid": "fab-spacer" }),
+      s
+    )
+  ] }) : a });
+};
 export {
-  f as AllowedIconButton
+  O as AllowedIconButton
 };

package/dist/components/BaseView/BaseView.js

@@ -1,9 +1,9 @@
 import { jsx as e, Fragment as d, jsxs as c } from "react/jsx-runtime";
 import { D as V } from "../../index.es-C27R5Xae.js";
-import { G as l } from "../../index.es-Z0aF-7Cn.js";
+import { G as s } from "../../index.es-Z0aF-7Cn.js";
 import { P as $ } from "../../index.es-DgncYOqO.js";
 import { c as w } from "../../index-Df2FYN-K.js";
-import { useMemo as n } from "react";
+import { useMemo as l } from "react";
 import { BasicHeading as v } from "../BasicHeading/BasicHeading.js";
 import { EmptyView as F } from "../EmptyView/EmptyView.js";
 import { ListArea as M } from "../ListArea/ListArea.js";
@@ -32,7 +32,7 @@ import '../../assets/BaseView.css';const z = "_fullHeight_1yui7_1", J = "_fullWi
   listMaxHeight: H = "calc(100vh - 220px)",
   titleLevel: N = 5,
   detailTitleLevel: W,
-  pathname: s,
+  pathname: r,
   basicHeadingIcon: B,
   isOnline: p = !0,
   offlineViewProps: _,
@@ -41,19 +41,19 @@ import '../../assets/BaseView.css';const z = "_fullHeight_1yui7_1", J = "_fullWi
   searchPlaceholder: R,
   isGrouped: A = !1
 }) => {
-  const { isDesktopNavbar: o, isDesktop: C } = P(), r = n(() => f.filter((a) => a.isAllowed !== !1), [f]), t = n(() => r.length === 1 ? r?.at(0) : r.find((a) => a.route === s), [s, r]), I = n(() => p ? t?.component ? t.component : o ? /* @__PURE__ */ e($, { className: i.fullWidth, children: /* @__PURE__ */ e(F, { title: h }) }) : /* @__PURE__ */ e(d, {}) : /* @__PURE__ */ e(T, { ..._, fullWidth: !0 }), [t?.component, h, o, p, _]), { showList: S, showDetail: E } = n(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: j, hasScrolled: G } = q([
-    s,
+  const { isDesktopNavbar: o, isDesktop: C } = P(), n = l(() => f.filter((a) => a.isAllowed !== !1), [f]), t = l(() => n.find((a) => a.route === r), [r, n]), I = l(() => p ? t?.component ? t.component : o ? /* @__PURE__ */ e($, { className: i.fullWidth, children: /* @__PURE__ */ e(F, { title: h }) }) : /* @__PURE__ */ e(d, {}) : /* @__PURE__ */ e(T, { ..._, fullWidth: !0 }), [t?.component, h, o, p, _]), { showList: S, showDetail: E } = l(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: j, hasScrolled: G } = q([
+    r,
     o
   ]);
   return /* @__PURE__ */ c(
-    l,
+    s,
     {
       "data-testid": "base-view-container",
       className: `${C ? i.fullHeight : ""} ${L ?? ""}`,
       fullWidth: !0,
       children: [
         S && /* @__PURE__ */ c(
-          l,
+          s,
           {
             "data-testid": "show-list-container",
             gap: "none",
@@ -81,11 +81,11 @@ import '../../assets/BaseView.css';const z = "_fullHeight_1yui7_1", J = "_fullWi
                 M,
                 {
                   hasLastItemNoRoundedEdges: g,
-                  elements: r,
+                  elements: n,
                   hasSearch: k,
                   maxHeight: H,
                   isSorted: y,
-                  pathname: s,
+                  pathname: r,
                   routerLinkElement: x,
                   searchPlaceholder: R,
                   isGrouped: A
@@ -95,7 +95,7 @@ import '../../assets/BaseView.css';const z = "_fullHeight_1yui7_1", J = "_fullWi
           }
         ),
         E && /* @__PURE__ */ c(
-          l,
+          s,
           {
             "data-testid": "show-details-container",
             gap: "none",
@@ -118,7 +118,7 @@ import '../../assets/BaseView.css';const z = "_fullHeight_1yui7_1", J = "_fullWi
               ),
               G && /* @__PURE__ */ e(V, {}),
               /* @__PURE__ */ e(
-                l,
+                s,
                 {
                   "data-testid": "base-view-show-details-scroll-component-group",
                   fullWidth: !0,

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

@@ -28,6 +28,40 @@ type ContextMenuProps = {
      * Props forwarded to <OfflineView /> when offline.
      */
     offlineViewProps?: Partial<OfflineViewProps>;
+    /**
+     * If only one action is provided/allowed, trigger that action without opening the context menu
+     * @remarks Basically turns the component into an icon button
+     * @default false
+     */
+    isSingleActionTriggeredOnClick?: boolean;
+    /**
+     * If only one action is provided/allowed, show the icon of that action, instead of the default menu one
+     *
+     * @default true
+     */
+    hasActionIconForSingleAction?: boolean;
+} & FloatingActionButtonProps;
+export type FloatingActionButtonProps = {
+    /**
+     * Determines if the button should be rendered as a floating action button (FAB) on mobile devices.
+     * @default false
+     */
+    isFloatingActionButtonOnMobile?: boolean;
+    /**
+     * Specify a target element (query selector) to insert an extra padding element below.
+     * The padding element is used to make sure the FAB doesn't block any elements at the end of a view.
+     * @example '#layout-container'
+     * @remarks This padding attribute is not related to floatingButtonScreenOffsetType. The inserted padding is always the same size, slightly taller than the button height
+     */
+    floatingButtonPaddingInsertTarget?: string;
+    /**
+     * Determines the distance/offset of the floating action button from the bottom and right edge of the screen
+     * - 'buttonAppBar' adds offset for when the element ButtonAppBar is used, so the button stays slightly above the bar
+     * - 'fullScreen' adds offset for a full-screen view, with the button sitting slightly above the screen edges
+     * @default 'buttonAppBar'
+     * @remarks This padding attribute is not related to floatingButtonPaddingInsertTarget. The paddingType just controls the offset of the button to the screen edges.
+     */
+    floatingButtonScreenOffsetType?: 'buttonAppBar' | 'fullScreen';
 };
 export type ActionProps = ListItemProps & {
     closeOnClick?: boolean;
@@ -40,19 +74,31 @@ export type ActionProps = ListItemProps & {
     isAllowed?: boolean;
 };
 /**
+ * Renders action menu with optional permission-aware filtering, offline fallback,
+ * and mobile FAB presentation.
  *
- * @param {boolean} triggerOpen indicates if the menu should be open
- * @param {ListItemProps[]} actions list of actions to display in the context menu as ListItems
- * @recommended `primaryText`, `onClick`, `leadingBlock`
- * @requires `ListItemProps` from `@element-public/react-components`
+ * On mobile, the button can be rendered as a floating action button by enabling
+ * `isFloatingActionButtonOnMobile`. If exactly one allowed action is available,
+ * trigger can optionally execute the action directly and reuse the action icon.
+ *
+ * @param triggerOpen External open-state control. Leave blank for uncontrolled mode.
+ * @param actions Menu actions to render.
  * @example const actions = [
  *  { primaryText: 'Open', onClick: () => openSomeModal(), leadingBlock: 'add' },
  *  { primaryText: 'Delete', onClick: () => DeleteSomeThing(), leadingBlock: 'delete_outline'},
  *  { primaryText: 'Edit', onClick: () => EditSomeThing(), leadingBlock: 'edit'},
  * ];
- * @param {boolean} isOnline Whether the user is online; shows OfflineView when false.
- * @param {OfflineViewProps} offlineViewProps Props forwarded to OfflineView when offline.
- * @returns a context menu with the given actions as ListItems
+ *
+ * @param iconOrientation Orientation of default menu icon.
+ * @param isOnline Whether menu should render actions or offline placeholder.
+ * @param offlineViewProps Props forwarded to `OfflineView`.
+ *
+ * @param isSingleActionTriggeredOnClick Whether single allowed action should execute immediately.
+ * @param hasActionIconForSingleAction Whether single allowed action icon should replace default button icon.
+ * @param isFloatingActionButtonOnMobile Whether to render the button as a FAB on mobile.
+ * @param floatingButtonPaddingInsertTarget Selector for optional spacer insertion target.
+ * @param floatingButtonScreenOffsetType FAB offset preset for bottom spacing.
+ * @returns Context menu trigger and menu content, or `null` when no allowed actions exist.
  */
-export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, hasActionIconForSingleAction, isSingleActionTriggeredOnClick, isFloatingActionButtonOnMobile, floatingButtonPaddingInsertTarget, floatingButtonScreenOffsetType, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,59 +1,74 @@
-import { jsx as t, jsxs as v } from "react/jsx-runtime";
-import { I } from "../../index.es-CkB4776y.js";
-import { M as p, L as w, a as m, b as C } from "../../index.es-Cg57snrN.js";
-import { useState as g, useCallback as f, useEffect as h, useMemo as k, Fragment as y } from "react";
-import { u as x } from "../../uniqueId-CJo-XRQb.js";
-import { OfflineView as L } from "../OfflineView/OfflineView.js";
-import '../../assets/ContextMenu.css';const V = "_menu_148i2_1", B = "_icon_148i2_6", N = "_listItem_148i2_10", b = "_offlineViewMargin_148i2_20", l = {
-  menu: V,
-  icon: B,
-  listItem: N,
-  offlineViewMargin: b
-}, q = ({
-  triggerOpen: s = null,
-  actions: o,
-  iconOrientation: c = "vertical",
-  "data-testid": u,
-  isOnline: d = !0,
-  offlineViewProps: _
+import { jsx as i, jsxs as g, Fragment as _ } from "react/jsx-runtime";
+import { I as z } from "../../index.es-CkB4776y.js";
+import { M as F, L as V, a as h, b as $ } from "../../index.es-Cg57snrN.js";
+import { c as o } from "../../index-Df2FYN-K.js";
+import { useState as j, useCallback as x, useEffect as D, useMemo as d, Fragment as q } from "react";
+import { createPortal as f } from "react-dom";
+import { useBreakpoints as E } from "../../hooks/useBreakpoints.js";
+import { OfflineView as T } from "../OfflineView/OfflineView.js";
+import { s as t } from "../../contextMenu.module-RWPDK7Ds.js";
+const X = ({
+  triggerOpen: c = null,
+  actions: u,
+  iconOrientation: p = "vertical",
+  "data-testid": M,
+  isOnline: B = !0,
+  offlineViewProps: N,
+  hasActionIconForSingleAction: b = !0,
+  isSingleActionTriggeredOnClick: L = !0,
+  isFloatingActionButtonOnMobile: S = !1,
+  floatingButtonPaddingInsertTarget: m,
+  floatingButtonScreenOffsetType: v = "buttonAppBar"
 }) => {
-  const [i, n] = g(!1), M = f(() => {
-    n(!i);
-  }, [i]), a = f(() => {
+  const [r, n] = j(!1), a = x(() => {
     n(!1);
-  }, []);
-  h(() => {
-    n(s !== null ? s : !1);
-  }, [s]);
-  const r = k(
-    () => o.filter((e) => e.isAllowed !== !1),
-    [o]
-  );
-  return r.length === 0 ? null : /* @__PURE__ */ t(
-    p,
+  }, []), w = x(() => {
+    r ? a() : n(!0);
+  }, [r, a]);
+  D(() => {
+    n(c !== null ? !!c : !1);
+  }, [c]);
+  const s = d(
+    () => u.filter((e) => e.isAllowed !== !1),
+    [u]
+  ), { isDesktop: A } = E(), l = S && !A, k = d(() => {
+    if (s.length === 1 && b) {
+      const e = s[0];
+      if (typeof e.leadingBlock == "string")
+        return e.leadingBlock;
+    }
+    return p === "vertical" ? "more_vert" : "more_horiz";
+  }, [s, p, b]), C = d(() => m ? document.querySelector(m) : null, [m]);
+  if (s.length === 0) return null;
+  const y = /* @__PURE__ */ i(
+    F,
     {
-      className: l.menu,
-      "data-testid": u ?? "selection-menu",
-      open: i,
+      className: o(t.menu, l && t.fabMenu),
+      "data-testid": M ?? "selection-menu",
+      open: r,
       surfaceOnly: !0,
-      hoistToBody: !0,
+      hoistToBody: !l,
       onClose: a,
-      trigger: /* @__PURE__ */ t(
-        I,
+      trigger: /* @__PURE__ */ i(
+        z,
         {
-          className: l.icon,
-          variant: i ? "filled-primary" : void 0,
+          className: o(t.icon, l && t.fabIcon),
+          variant: r || l ? "filled-primary" : void 0,
+          iconSize: l ? "xlarge" : void 0,
           "data-testid": "open-button",
-          icon: c === "vertical" ? "more_vert" : "more_horiz",
-          onClick: M
+          icon: k,
+          onClick: () => {
+            s.length === 1 && L ? (s[0].onClick?.(), a()) : w();
+          },
+          "data-icon": k
         }
       ),
-      children: d ? /* @__PURE__ */ t(w, { "data-testid": "selection-list", children: r.map((e) => /* @__PURE__ */ v(y, { children: [
-        e.dividerBefore && /* @__PURE__ */ t(m, {}),
-        /* @__PURE__ */ t(
-          C,
+      children: B ? /* @__PURE__ */ i(V, { "data-testid": "selection-list", children: s.map((e, I) => /* @__PURE__ */ g(q, { children: [
+        e.dividerBefore && /* @__PURE__ */ i(h, {}),
+        /* @__PURE__ */ i(
+          $,
           {
-            className: l.listItem,
+            className: t.listItem,
             ...e,
             leadingBlockType: "icon",
             "data-testid": e["data-testid"],
@@ -62,20 +77,53 @@ import '../../assets/ContextMenu.css';const V = "_menu_148i2_1", B = "_icon_148i
             }
           }
         ),
-        e.dividerAfter && /* @__PURE__ */ t(m, {})
-      ] }, x(`LI_${e.primaryText?.toString()}_`))) }) : /* @__PURE__ */ t(
-        L,
+        e.dividerAfter && /* @__PURE__ */ i(h, {})
+      ] }, `LI_${e.primaryText?.toString()}_${I}`)) }) : /* @__PURE__ */ i(
+        T,
         {
           size: "small",
           variant: "filled",
-          className: l.offlineViewMargin,
-          ..._
+          className: t.offlineViewMargin,
+          ...N
         }
       )
     },
     "selectionmenu"
   );
+  if (l) {
+    const e = /* @__PURE__ */ i(
+      "div",
+      {
+        className: o(
+          t.fabContainer,
+          v === "buttonAppBar" && t.buttonAppBar,
+          v === "fullScreen" && t.fullScreen
+        ),
+        "data-testid": "fab-container",
+        children: y
+      }
+    );
+    return /* @__PURE__ */ g(_, { children: [
+      f(e, document.body),
+      f(
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: o(t.scrim, r && t.scrimVisible),
+            onClick: a,
+            "data-testid": "context-menu-scrim"
+          }
+        ),
+        document.body
+      ),
+      C && f(
+        /* @__PURE__ */ i("div", { className: t.fabSpacer, "data-testid": "fab-spacer" }),
+        C
+      )
+    ] });
+  }
+  return y;
 };
 export {
-  q as ContextMenu
+  X as ContextMenu
 };

package/dist/components/DeleteModal/DeleteModal.js

@@ -13,6 +13,7 @@ import "../../orderBy-Ce85KqD6.js";
 import "../../index-CuHybtft.js";
 import "../SharedComponentsPermissionProvider/PermissionContext.js";
 import { Modal as B } from "../Modal/Modal.js";
+import "react-dom";
 import { LoadingSpinner as M } from "../LoadingSpinner/Default/LoadingSpinner.js";
 import "react-hook-form";
 import "../../get-CBFiuc3f.js";
@@ -26,7 +27,7 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
   modal: A,
   colorDanger: G,
   crossedOut: q
-}, co = ({
+}, mo = ({
   title: r,
   confirmButtonLabel: t,
   cancelButtonLabel: n,
@@ -123,5 +124,5 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
   impossibleDeleteHeader: r
 }) => /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: r });
 export {
-  co as DeleteModal
+  mo as DeleteModal
 };

package/dist/components/EmptyView/EmptyView.js

@@ -8,6 +8,7 @@ import "../../react-tooltip.min-Dkz5ltCC.js";
 import "../../orderBy-Ce85KqD6.js";
 import "../../index-CuHybtft.js";
 import "../SharedComponentsPermissionProvider/PermissionContext.js";
+import "react-dom";
 import "../../uniqueId-CJo-XRQb.js";
 import { LoadingSpinner as w } from "../LoadingSpinner/Default/LoadingSpinner.js";
 import "react-hook-form";
@@ -23,7 +24,7 @@ import '../../assets/EmptyView.css';const C = "_emptyViewContainer_19inl_1", V =
   medium: x,
   small: N,
   title: g
-}, H = ({
+}, J = ({
   title: e,
   subtitle: r,
   height: m = "medium",
@@ -57,5 +58,5 @@ import '../../assets/EmptyView.css';const C = "_emptyViewContainer_19inl_1", V =
   }
 );
 export {
-  H as EmptyView
+  J as EmptyView
 };

package/dist/components/Filter/Filter.js

@@ -14,6 +14,7 @@ import { SearchBar as I } from "../SearchBar/SearchBar.js";
 import "../../index-CuHybtft.js";
 import "../SharedComponentsPermissionProvider/PermissionContext.js";
 import { Modal as K } from "../Modal/Modal.js";
+import "react-dom";
 import "../../uniqueId-CJo-XRQb.js";
 import { Select as M } from "../Select/Select.js";
 import "react-hook-form";
@@ -31,7 +32,7 @@ import '../../assets/Filter.css';const T = "_filterButton_1qtzn_1", V = "_relati
   dense: Q,
   filterModal: U,
   borderRadius: X
-}, xt = ({
+}, yt = ({
   clearFilterText: u,
   closeCallback: d,
   currentFilter: i,
@@ -203,5 +204,5 @@ import '../../assets/Filter.css';const T = "_filterButton_1qtzn_1", V = "_relati
   );
 };
 export {
-  xt as Filter
+  yt as Filter
 };

package/dist/components/Modal/Modal.js

@@ -806,7 +806,7 @@ var f = Gt.strings, ye = (
 });
 ot.displayName = "Modal";
 ot.propTypes = Oe;
-const be = "_modal_lk11w_1", Ie = "_gap_lk11w_14", Ne = "_title_lk11w_19", Be = "_titleWithoutCloseIcon_lk11w_32", De = "_closeButton_lk11w_36", Fe = "_errorBanner_lk11w_48", y = {
+const be = "_modal_1l955_1", Ie = "_gap_1l955_18", Ne = "_title_1l955_23", Be = "_titleWithoutCloseIcon_1l955_36", De = "_closeButton_1l955_40", Fe = "_errorBanner_1l955_52", y = {
   modal: be,
   gap: Ie,
   title: Ne,

package/dist/components/ModulePadding/ModulePadding.js

@@ -7,6 +7,7 @@ import "../../react-tooltip.min-Dkz5ltCC.js";
 import "../../orderBy-Ce85KqD6.js";
 import "../../index-CuHybtft.js";
 import "../SharedComponentsPermissionProvider/PermissionContext.js";
+import "react-dom";
 import "../../uniqueId-CJo-XRQb.js";
 import "react-hook-form";
 import "../../get-CBFiuc3f.js";
@@ -15,7 +16,7 @@ import "../../isString-BNdV0Jpg.js";
 import "../../omit-BWQrFyQ-.js";
 import "../../types/Time.js";
 import "../../react.esm-DF7i80eN.js";
-const D = ({ children: o }) => {
+const M = ({ children: o }) => {
   const { isDesktop: t } = m();
   return /* @__PURE__ */ i(
     r,
@@ -28,5 +29,5 @@ const D = ({ children: o }) => {
   );
 };
 export {
-  D as ModulePadding
+  M as ModulePadding
 };

package/dist/contextMenu.module-RWPDK7Ds.js

@@ -0,0 +1,17 @@
+import './assets/contextMenu.css';const n = "_menu_1bdpq_1", _ = "_icon_1bdpq_6", e = "_listItem_1bdpq_10", c = "_offlineViewMargin_1bdpq_20", b = "_fabContainer_1bdpq_24", i = "_buttonAppBar_1bdpq_29", t = "_fullScreen_1bdpq_34", o = "_fabIcon_1bdpq_39", s = "_fabMenu_1bdpq_43", a = "_scrim_1bdpq_47", p = "_scrimVisible_1bdpq_60", r = "_fabSpacer_1bdpq_65", f = {
+  menu: n,
+  icon: _,
+  listItem: e,
+  offlineViewMargin: c,
+  fabContainer: b,
+  buttonAppBar: i,
+  fullScreen: t,
+  fabIcon: o,
+  fabMenu: s,
+  scrim: a,
+  scrimVisible: p,
+  fabSpacer: r
+};
+export {
+  f as s
+};

package/dist/services/UtilService.js

@@ -8,25 +8,26 @@ import "../react-tooltip.min-Dkz5ltCC.js";
 import "../orderBy-Ce85KqD6.js";
 import "../index-CuHybtft.js";
 import "../components/SharedComponentsPermissionProvider/PermissionContext.js";
+import "react-dom";
 import "../uniqueId-CJo-XRQb.js";
 import "react-hook-form";
 import "../get-CBFiuc3f.js";
 import "../omit-BWQrFyQ-.js";
 import { DATE_FORMAT as c } from "../types/Time.js";
 import "../react.esm-DF7i80eN.js";
-const d = (t) => t.split(" ").map((r) => r.charAt(0).toUpperCase() + r.slice(1).toLowerCase()).join(" "), f = (t) => Object.fromEntries(
+const P = (t) => t.split(" ").map((r) => r.charAt(0).toUpperCase() + r.slice(1).toLowerCase()).join(" "), f = (t) => Object.fromEntries(
   Object.entries(t).map(([r, i]) => [r, o(i)])
-), o = (t) => n(t) ? t.map(o) : p(t) ? f(t) : s(t) ? t.trim() : t, P = (t, r, i = 2) => {
+), o = (t) => n(t) ? t.map(o) : p(t) ? f(t) : s(t) ? t.trim() : t, U = (t, r, i = 2) => {
   if (!r) return "0";
   const m = e[t];
   return r.toLocaleString(m, { maximumFractionDigits: i });
-}, U = (t, r = "en-US", i = c) => a.includes(r) ? new Intl.DateTimeFormat(
+}, y = (t, r = "en-US", i = c) => a.includes(r) ? new Intl.DateTimeFormat(
   e[r],
   i
 ).format(new Date(t)) : new Intl.DateTimeFormat(r, i).format(new Date(t));
 export {
-  d as capitalizeFirstLetters,
-  U as getFormattedDateTime,
-  P as getNumberAsLocaleString,
+  P as capitalizeFirstLetters,
+  y as getFormattedDateTime,
+  U as getNumberAsLocaleString,
   f as trimLeadingAndTrailingSpaces
 };

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

package/dist/assets/ContextMenu.css

@@ -1 +0,0 @@
-._menu_148i2_1{width:15.875rem;border-radius:.5rem!important}._icon_148i2_6{color:var(--lmnt-theme-on-secondary-inactive)}._listItem_148i2_10 [class*=mdc-list-item__start]{color:var(--lmnt-theme-on-secondary-inactive);align-self:center!important;margin:0 1rem!important}._listItem_148i2_10 [class*=mdc-list-item__end]{color:var(--lmnt-theme-on-secondary-inactive)}._offlineViewMargin_148i2_20{margin:.5rem}