@hortiview/shared-components 2.24.2 → 2.25.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [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
+
+* prevent unwanted prop overriding in AllowedButton ([a150166](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a150166d841ee4c8f89298c2f2234380a3af4e7f))
+
+### Styles
+
+* show loading spinner on next button in stepper ([47b8dda](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/47b8dda08a8c93f4036ed4aaec734e1265f4fedf))
+
 ## [2.24.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.24.1...v2.24.2) (2026-05-06)
 
 ### 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_x6qd9_1{width:15.875rem;border-radius:.5rem!important}._icon_x6qd9_6{color:var(--lmnt-theme-on-secondary-inactive)}._listItem_x6qd9_10 [class*=mdc-list-item__start]{color:var(--lmnt-theme-on-secondary-inactive);align-self:center!important;margin:0 1rem!important}._listItem_x6qd9_10 [class*=mdc-list-item__end]{color:var(--lmnt-theme-on-secondary-inactive)}._offlineViewMargin_x6qd9_20{margin:.5rem}

package/dist/assets/stepper.css

@@ -1 +1 @@
-._stepperIndicatorItem_1tz4b_1{height:var(--lmnt-stepper-indicator__size);width:var(--lmnt-stepper-indicator__size);background-color:#c7c7c7;border-radius:50%}._stepperIndicatorItemActive_1tz4b_8{background-color:var(--lmnt-theme-primary)}._stepperIndicatorItemOptional_1tz4b_12{border:1.5px dashed #7e7e7e}._stepperContainer_1tz4b_16{background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke);border-radius:.25rem;padding:.75rem 1rem}._stepperTitle_1tz4b_23{text-align:center;color:var(--lmnt-theme-on-secondary-inactive)}._stepperButton_1tz4b_28{margin-bottom:0}._stepperButtonLoading_1tz4b_32{padding-top:.375rem!important;padding-bottom:.375rem!important}._stepperButtonLoading_1tz4b_32 svg{stroke:var(--lmnt-theme-white)!important}._stepperDescriptionContainer_1tz4b_43{border-radius:.2rem;background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke)}._stepperDescriptionProgress_1tz4b_49{padding:0 1rem;min-width:3.5rem;background:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary);border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}._stepperDescriptionText_1tz4b_60{padding:.7rem}._stepperDesktopHeaderContainer_1tz4b_66{border-radius:.5rem;padding:1rem;background-color:#ecf4f4}._stepperItem_1tz4b_73 ._stepperItemNumber_1tz4b_73{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border-radius:50%;background-color:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-inactive);transition:background-color .6s ease}._stepperItem_1tz4b_73 ._stepperItemNumberActive_1tz4b_91{background-color:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary)}._stepperItem_1tz4b_73 ._itemText_1tz4b_96{transition:color .6s ease;color:var(--lmnt-theme-on-surface-inactive)}._stepperItem_1tz4b_73 ._itemTextActive_1tz4b_101{color:var(--lmnt-theme-on-surface-active)}._stepperItemConnector_1tz4b_105{flex:1;height:4px;border:none;border-radius:2px;background:linear-gradient(90deg,var(--lmnt-theme-primary) 0%,var(--lmnt-theme-primary) 50%,var(--lmnt-theme-on-surface-stroke) 50%,var(--lmnt-theme-on-surface-stroke) 100%);background-size:200% 100%;background-position:100% 0;transition:background-position .6s cubic-bezier(.4,0,.2,1)}._stepperItemConnectorCompleted_1tz4b_125{background-position:0% 0}
+._stepperIndicatorItem_y9y8z_1{height:var(--lmnt-stepper-indicator__size);width:var(--lmnt-stepper-indicator__size);background-color:#c7c7c7;border-radius:50%}._stepperIndicatorItemActive_y9y8z_8{background-color:var(--lmnt-theme-primary)}._stepperIndicatorItemOptional_y9y8z_12{border:1.5px dashed #7e7e7e}._stepperContainer_y9y8z_16{background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke);border-radius:.25rem;padding:.75rem 1rem}._stepperTitle_y9y8z_23{text-align:center;color:var(--lmnt-theme-on-secondary-inactive)}._stepperButton_y9y8z_28{margin-bottom:0}._stepperDescriptionContainer_y9y8z_34{border-radius:.2rem;background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke)}._stepperDescriptionProgress_y9y8z_40{padding:0 1rem;min-width:3.5rem;background:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary);border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}._stepperDescriptionText_y9y8z_51{padding:.7rem}._stepperDesktopHeaderContainer_y9y8z_57{border-radius:.5rem;padding:1rem;background-color:#ecf4f4}._stepperItem_y9y8z_64 ._stepperItemNumber_y9y8z_64{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border-radius:50%;background-color:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-inactive);transition:background-color .6s ease}._stepperItem_y9y8z_64 ._stepperItemNumberActive_y9y8z_82{background-color:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary)}._stepperItem_y9y8z_64 ._itemText_y9y8z_87{transition:color .6s ease;color:var(--lmnt-theme-on-surface-inactive)}._stepperItem_y9y8z_64 ._itemTextActive_y9y8z_92{color:var(--lmnt-theme-on-surface-active)}._stepperItemConnector_y9y8z_96{flex:1;height:4px;border:none;border-radius:2px;background:linear-gradient(90deg,var(--lmnt-theme-primary) 0%,var(--lmnt-theme-primary) 50%,var(--lmnt-theme-on-surface-stroke) 50%,var(--lmnt-theme-on-surface-stroke) 100%);background-size:200% 100%;background-position:100% 0;transition:background-position .6s cubic-bezier(.4,0,.2,1)}._stepperItemConnectorCompleted_y9y8z_116{background-position:0% 0}

package/dist/components/AllowedButton/AllowedButton.js

@@ -1,26 +1,26 @@
 import { jsx as e } from "react/jsx-runtime";
-import { B as r } from "../../index.es-B19PQgzU.js";
+import { B as l } from "../../index.es-B19PQgzU.js";
 import { Allowed as s } from "../Allowed/Allowed.js";
 import { LoadingSpinner as a } from "../LoadingSpinner/Default/LoadingSpinner.js";
 const c = ({
   buttonType: d = "button",
   variant: n = "filled",
   "data-testid": o,
-  label: m,
-  size: l = "medium",
+  label: r,
+  size: m = "medium",
   isLoading: i = !1,
   ...t
 }) => /* @__PURE__ */ e(s, { neededPermissions: t.permissions, entityIds: t.entityIds, children: /* @__PURE__ */ e(
-  r,
+  l,
   {
-    buttonSize: l,
+    ...t,
+    buttonSize: m,
     "data-testid": `allowed-button-${o}`,
     disabled: t.disabled || i,
     form: t.formId,
     type: d,
     variant: n,
-    ...t,
-    children: i ? /* @__PURE__ */ e(a, { size: "sm", spinnerOnly: !0 }) : m
+    children: i ? /* @__PURE__ */ e(a, { size: "sm", spinnerOnly: !0 }) : r
   }
 ) });
 export {

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