@hortiview/shared-components 2.24.3 → 2.26.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [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
+
+* add standalone FloatingActionButton and adjust existing components ([6164fa7](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/6164fa763e7943ae58d33179ab791dee823900d2)), closes [#20679](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/20679)
+
 ## [2.24.3](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.24.2...v2.24.3) (2026-05-07)
 
 ### Bug Fixes

package/README.md

@@ -33,6 +33,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [EmptyView](#emptyview)
 1. [ErrorBanner] (#errorbanner)
 1. [Filter](#filter)
+1. [FloatingActionButton](#floatingactionbutton)
 1. [FormattedNumberDisplay](#formattednumberdisplay)
 1. [FormComponents](#formcomponents)
     1. [FormCheckBox](#formcheckbox)
@@ -202,32 +203,6 @@ 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.
@@ -374,6 +349,35 @@ const MyComponent = () => {
 export default MyComponent;
 ```
 
+### FloatingActionButton
+
+A component to show a floating action button for mobile and tablet views, giving users quick access to one or 
+more contextual actions without taking permanent space in layout. 
+
+It automatically hides when no visible/allowed actions exist, 
+can trigger a single action directly or open a menu for multiple actions, 
+supports an offline fallback view.
+
+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 { FloatingActionButton } from '@hortiview/shared-components';
+
+const actions = [...];
+
+<FloatingActionButton
+     actions={actions}
+     floatingButtonPaddingInsertTarget={'#fab-padding-target'}
+     isSingleActionTriggeredOnClick={false}
+     hasActionIconForSingleAction={false}
+/>;
+```
+
 ### FormattedNumberDisplay
 
 A component to display a formatted number based on the given language code, wrapped in a given typography component to style it as needed.
@@ -1124,12 +1128,6 @@ 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/ContextMenu.css

@@ -0,0 +1 @@
+._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/AllowedIconButton/AllowedIconButton.d.ts

@@ -1,7 +1,5 @@
 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'> & {
     /**
@@ -36,21 +34,10 @@ export type AllowedIconButtonProps = Omit<IconButtonProps & React.HTMLProps<HTML
      * Default: 'medium'
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-} & FloatingActionButtonProps;
+};
 /**
- * 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.
+ * 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
  */
-export declare const AllowedIconButton: (props: AllowedIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AllowedIconButton: ({ "data-testid": testId, variant, iconType, size, ...props }: AllowedIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AllowedIconButton/AllowedIconButton.js

@@ -1,58 +1,23 @@
-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 });
-};
+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
+  }
+) });
 export {
-  O as AllowedIconButton
+  f as AllowedIconButton
 };

package/dist/components/BaseView/BaseView.d.ts

@@ -1,6 +1,7 @@
 import { BaseListElement } from '../../types/ListElement';
 import { LinkProps } from '../../types/internal/ReactRouterTypes';
 import { OfflineViewProps } from '../OfflineView/OfflineView';
+import { FloatingActionButton } from '../FloatingActionButton/FloatingActionButton.tsx';
 
 type BaseViewProps = {
     /**
@@ -32,6 +33,13 @@ type BaseViewProps = {
      * action to be displayed in the headings ActionButton
      */
     action?: JSX.Element;
+    /**
+     * An additional action element that is rendered outside conditional wrappers, so it is always visible
+     * Only rendered on mobile devices.
+     *
+     * @Used to render FloatingActionButtons when the header is hidden (which hides the action)
+     */
+    floatingActionButton?: React.ReactElement<typeof FloatingActionButton>;
     /**
      * hint to be displayed below the heading
      */
@@ -96,5 +104,5 @@ type BaseViewProps = {
 /**
  * `BaseView` is a layout component that displays a main (a list) and a detail section.
  */
-export declare const BaseView: ({ heading, action, hint, elements, emptyText, hasSearch, isSorted, className, withAvatar, listMaxHeight, titleLevel, detailTitleLevel, pathname, basicHeadingIcon, isOnline, offlineViewProps, noRoundedListItemEdges, routerLinkElement, searchPlaceholder, isGrouped, isHeaderVisibleOnMobile, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseView: ({ heading, action, floatingActionButton, hint, elements, emptyText, hasSearch, isSorted, className, withAvatar, listMaxHeight, titleLevel, detailTitleLevel, pathname, basicHeadingIcon, isOnline, offlineViewProps, noRoundedListItemEdges, routerLinkElement, searchPlaceholder, isGrouped, isHeaderVisibleOnMobile, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BaseView/BaseView.js

@@ -1,133 +1,138 @@
-import { jsx as e, Fragment as d, jsxs as c } from "react/jsx-runtime";
+import { jsx as e, Fragment as l, jsxs as n } from "react/jsx-runtime";
 import { D as $ } from "../../index.es-C27R5Xae.js";
-import { G as s } from "../../index.es-Z0aF-7Cn.js";
-import { P as F } from "../../index.es-DgncYOqO.js";
+import { G as a } from "../../index.es-Z0aF-7Cn.js";
+import { P as M } from "../../index.es-DgncYOqO.js";
 import { c as v } from "../../index-Df2FYN-K.js";
-import { useMemo as l } from "react";
+import { useMemo as d } from "react";
 import { BasicHeading as D } from "../BasicHeading/BasicHeading.js";
-import { EmptyView as M } from "../EmptyView/EmptyView.js";
-import { ListArea as P } from "../ListArea/ListArea.js";
-import { useBreakpoints as T } from "../../hooks/useBreakpoints.js";
-import { OfflineView as q } from "../OfflineView/OfflineView.js";
-import { useScrollableInfo as z } from "./BaseView.service.js";
-import '../../assets/BaseView.css';const J = "_fullHeight_1yui7_1", K = "_fullWidth_1yui7_5", O = "_heading_1yui7_9", Q = "_list_1yui7_18", U = "_desktopList_1yui7_27", X = "_noRoundedCorners_1yui7_32", Y = "_detail_1yui7_36", Z = "_desktopDetail_1yui7_44", i = {
-  fullHeight: J,
-  fullWidth: K,
-  heading: O,
-  list: Q,
-  desktopList: U,
-  noRoundedCorners: X,
-  detail: Y,
-  desktopDetail: Z
-}, mt = ({
-  heading: u,
-  action: m = /* @__PURE__ */ e(d, {}),
-  hint: k = /* @__PURE__ */ e(d, {}),
-  elements: f,
-  emptyText: h,
-  hasSearch: y = !0,
-  isSorted: L = !0,
-  className: b,
+import { EmptyView as P } from "../EmptyView/EmptyView.js";
+import { ListArea as T } from "../ListArea/ListArea.js";
+import { useBreakpoints as q } from "../../hooks/useBreakpoints.js";
+import { OfflineView as z } from "../OfflineView/OfflineView.js";
+import { useScrollableInfo as J } from "./BaseView.service.js";
+import '../../assets/BaseView.css';const K = "_fullHeight_1yui7_1", O = "_fullWidth_1yui7_5", Q = "_heading_1yui7_9", U = "_list_1yui7_18", X = "_desktopList_1yui7_27", Y = "_noRoundedCorners_1yui7_32", Z = "_detail_1yui7_36", tt = "_desktopDetail_1yui7_44", i = {
+  fullHeight: K,
+  fullWidth: O,
+  heading: Q,
+  list: U,
+  desktopList: X,
+  noRoundedCorners: Y,
+  detail: Z,
+  desktopDetail: tt
+}, ft = ({
+  heading: m,
+  action: f = /* @__PURE__ */ e(l, {}),
+  floatingActionButton: k,
+  hint: y = /* @__PURE__ */ e(l, {}),
+  elements: h,
+  emptyText: p,
+  hasSearch: L = !0,
+  isSorted: b = !0,
+  className: B,
   withAvatar: H = !1,
   listMaxHeight: N = "calc(100vh - 220px)",
   titleLevel: W = 5,
-  detailTitleLevel: B,
+  detailTitleLevel: x,
   pathname: r,
-  basicHeadingIcon: x,
-  isOnline: p = !0,
-  offlineViewProps: _,
-  noRoundedListItemEdges: g = !0,
+  basicHeadingIcon: A,
+  isOnline: _ = !0,
+  offlineViewProps: g,
+  noRoundedListItemEdges: w = !0,
   routerLinkElement: R,
-  searchPlaceholder: A,
-  isGrouped: C = !1,
-  isHeaderVisibleOnMobile: I = !0
+  searchPlaceholder: C,
+  isGrouped: I = !1,
+  isHeaderVisibleOnMobile: S = !0
 }) => {
-  const { isDesktopNavbar: o, isDesktop: w } = T(), n = l(() => f.filter((a) => a.isAllowed !== !1), [f]), t = l(() => n.find((a) => a.route === r), [r, n]), S = l(() => p ? t?.component ? t.component : o ? /* @__PURE__ */ e(F, { className: i.fullWidth, children: /* @__PURE__ */ e(M, { title: h }) }) : /* @__PURE__ */ e(d, {}) : /* @__PURE__ */ e(q, { ..._, fullWidth: !0 }), [t?.component, h, o, p, _]), { showList: E, showDetail: j } = l(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: G, hasScrolled: V } = z([
+  const { isDesktopNavbar: o, isDesktop: s } = q(), c = d(() => h.filter((u) => u.isAllowed !== !1), [h]), t = d(() => c.find((u) => u.route === r), [r, c]), E = d(() => _ ? t?.component ? t.component : o ? /* @__PURE__ */ e(M, { className: i.fullWidth, children: /* @__PURE__ */ e(P, { title: p }) }) : /* @__PURE__ */ e(l, {}) : /* @__PURE__ */ e(z, { ...g, fullWidth: !0 }), [t?.component, p, o, _, g]), { showList: j, showDetail: F } = d(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: G, hasScrolled: V } = J([
     r,
     o
   ]);
-  return /* @__PURE__ */ c(
-    s,
+  return /* @__PURE__ */ n(
+    a,
     {
       "data-testid": "base-view-container",
-      className: `${w ? i.fullHeight : ""} ${b ?? ""}`,
+      className: `${s ? i.fullHeight : ""} ${B ?? ""}`,
       fullWidth: !0,
       children: [
-        E && /* @__PURE__ */ c(
-          s,
-          {
-            "data-testid": "show-list-container",
-            gap: "none",
-            direction: "vertical",
-            className: v(
-              i.list,
-              o && i.desktopList,
-              g && i.noRoundedCorners
-            ),
-            children: [
-              u && /* @__PURE__ */ e(
-                D,
-                {
-                  icon: x,
-                  "data-testid": "heading",
-                  heading: u,
-                  level: W,
-                  marginBottom: 0,
-                  inList: !0,
-                  children: m
-                }
+        j && /* @__PURE__ */ n(l, { children: [
+          /* @__PURE__ */ n(
+            a,
+            {
+              "data-testid": "show-list-container",
+              gap: "none",
+              direction: "vertical",
+              className: v(
+                i.list,
+                o && i.desktopList,
+                w && i.noRoundedCorners
               ),
-              k,
-              /* @__PURE__ */ e(
-                P,
-                {
-                  hasLastItemNoRoundedEdges: g,
-                  elements: n,
-                  hasSearch: y,
-                  maxHeight: N,
-                  isSorted: L,
-                  pathname: r,
-                  routerLinkElement: R,
-                  searchPlaceholder: A,
-                  isGrouped: C
-                }
-              )
-            ]
-          }
-        ),
-        j && /* @__PURE__ */ c(
-          s,
+              children: [
+                m && /* @__PURE__ */ e(
+                  D,
+                  {
+                    icon: A,
+                    "data-testid": "heading",
+                    heading: m,
+                    level: W,
+                    marginBottom: 0,
+                    inList: !0,
+                    children: f
+                  }
+                ),
+                y,
+                /* @__PURE__ */ e(
+                  T,
+                  {
+                    hasLastItemNoRoundedEdges: w,
+                    elements: c,
+                    hasSearch: L,
+                    maxHeight: N,
+                    isSorted: b,
+                    pathname: r,
+                    routerLinkElement: R,
+                    searchPlaceholder: C,
+                    isGrouped: I
+                  }
+                )
+              ]
+            }
+          ),
+          !s && k
+        ] }),
+        F && /* @__PURE__ */ n(
+          a,
           {
             "data-testid": "show-details-container",
             gap: "none",
             direction: "vertical",
             className: v(i.detail, o && i.desktopDetail),
             children: [
-              (I || w) && /* @__PURE__ */ e(
+              (S || s) && /* @__PURE__ */ e(
                 D,
                 {
                   className: i.heading,
                   heading: t?.detailTitle ?? t?.title ?? "",
-                  level: B,
+                  level: x,
                   icon: t?.hideIconInDetail === !0 ? void 0 : t?.detailIcon ?? t?.icon,
                   marginBottom: 0,
                   invisibleButton: t?.detailAction === void 0,
                   withAvatar: H,
                   subHeading: t?.detailSubTitle,
-                  children: t?.detailAction ?? m
+                  children: t?.detailAction ?? f
                 }
               ),
               V && /* @__PURE__ */ e($, {}),
               /* @__PURE__ */ e(
-                s,
+                a,
                 {
                   "data-testid": "base-view-show-details-scroll-component-group",
                   fullWidth: !0,
                   direction: "vertical",
                   ref: G,
-                  children: S
+                  children: E
                 }
-              )
+              ),
+              !s && t?.detailFloatingActionButton
             ]
           }
         )
@@ -136,5 +141,5 @@ import '../../assets/BaseView.css';const J = "_fullHeight_1yui7_1", K = "_fullWi
   );
 };
 export {
-  mt as BaseView
+  ft as BaseView
 };

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

@@ -1,5 +1,6 @@
 import { ListItemProps } from '@element-public/react-list';
 import { OfflineViewProps } from '../OfflineView/OfflineView';
+import { IsAllowedProps } from '../PermissionChecks/PermissionService.tsx';
 
 type ContextMenuProps = {
     /**
@@ -16,9 +17,6 @@ type ContextMenuProps = {
      * Default is 'vertical'
      */
     iconOrientation?: 'vertical' | 'horizontal';
-    /**
-     * data-testid for testing
-     */
     'data-testid'?: string;
     /**
      * Whether the user is online; shows OfflineView when false.
@@ -28,40 +26,6 @@ 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;
@@ -70,35 +34,38 @@ export type ActionProps = ListItemProps & {
     dividerAfter?: boolean;
     /**
      * whether the user has the permission to trigger the action, if false the action will not be shown
+     * @deprecated Use `permissionConfiguration` to simplify or `isHidden` instead
      */
     isAllowed?: boolean;
+    /**
+     * Permission configuration used to determine whether this action is shown.
+     * If the current user does not meet them, the action is hidden.
+     *
+     * Leave blank to always show the action.
+     */
+    permissionConfiguration?: IsAllowedProps;
+    /**
+     * Whether the action should be hidden. If true, the action will not be shown.
+     * @remarks Use to control visibility based on specific conditions (aside from permissions)
+     * @default false
+     */
+    isHidden?: boolean;
 };
 /**
- * Renders action menu with optional permission-aware filtering, offline fallback,
- * and mobile FAB presentation.
  *
- * 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.
+ * @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
+ * @recommended `primaryText`, `onClick`, `leadingBlock`
+ * @requires `ListItemProps` from `@element-public/react-components`
  * @example const actions = [
  *  { primaryText: 'Open', onClick: () => openSomeModal(), leadingBlock: 'add' },
  *  { primaryText: 'Delete', onClick: () => DeleteSomeThing(), leadingBlock: 'delete_outline'},
  *  { primaryText: 'Edit', onClick: () => EditSomeThing(), leadingBlock: 'edit'},
  * ];
- *
- * @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.
+ * @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
  */
-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 declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};