@hortiview/shared-components 2.24.0 → 2.24.2

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [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
+
+* disable cancel button when delete is pending ([538317e](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/538317e474c0ce894eef736a9675a48279c1fa76))
+* mandatory isDeletePending prop ([96ee69b](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/96ee69bc4019b299a9da7901dad6bb69a9147ace))
+* mandatory isLoading prop ([1fd0cb2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1fd0cb241ce44f7ffc176b444be72708df214de1))
+* mandatory isStepLoading prop ([67b7d3b](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/67b7d3bed2e962ddd904559642042c20ae3d2f24))
+
+### Styles
+
+* ensure loading spinner can always have full size ([4c155f1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/4c155f1d4ca875a2ef5ec70373018444384133b9))
+
+## [2.24.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.24.0...v2.24.1) (2026-05-06)
+
+### Code Refactoring
+
+* add isHeaderVisibleOnMobile prop to BaseView and update stories ([877f3d0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/877f3d04e7c59964f7b4e34efd38783e5b5ca27f))
+* add tests for header visibility in BaseView on mobile devices ([4ce94fc](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/4ce94fcd192d631b9f61471024e634f672b99e2f))
+* update default value of isHeaderVisibleOnMobile to true in BaseView ([94be513](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/94be5132157bade01a66a885f9c10fed96c06875))
+* update header visibility logic in BaseView for mobile and desktop ([c878166](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/c8781667ddc509180565cece789ccaf5c07abd7e))
+
 ## [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

package/dist/components/AllowedButton/AllowedButton.d.ts

@@ -28,7 +28,7 @@ export type AllowedButtonProps = Omit<ButtonProps & React.HTMLProps<HTMLButtonEl
      * If true, the button shows a loading spinner instead of the label.
      * While true, the button is disabled.
      */
-    isLoading?: boolean;
+    isLoading: boolean;
     /**
      * Can be a string or JSX.Element for setting a loading spinner or custom component.
      */

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

@@ -88,9 +88,13 @@ type BaseViewProps = {
      * @default undefined
      */
     routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    /**
+     * isHeaderVisibleOnMobile is true if the header should be visible on mobile devices, @default false
+     */
+    isHeaderVisibleOnMobile?: boolean;
 };
 /**
  * `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, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
+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 {};

package/dist/components/BaseView/BaseView.js

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

package/dist/components/DeleteModal/DeleteModal.d.ts

@@ -63,7 +63,7 @@ type DeleteModalProps = {
     /**
      * Whether the delete action is pending; shows a loading state on the confirm button when true.
      */
-    isDeletePending?: boolean;
+    isDeletePending: boolean;
     /**
      * Whether the user is online; shows OfflineView when false.
      */

package/dist/components/DeleteModal/DeleteModal.js

@@ -2,10 +2,10 @@ import { jsx as o, jsxs as b, Fragment as c } from "react/jsx-runtime";
 import { B as f } from "../../index.es-B19PQgzU.js";
 import { G as m } from "../../index.es-Z0aF-7Cn.js";
 import { I as S } from "../../index.es-DEBGoIKX.js";
-import { T as l } from "../../index.es-DUrjyxNI.js";
-import { u as x } from "../../uniqueId-CJo-XRQb.js";
-import { AvailableCustomIcons as N } from "../../enums/AvailableCustomIcons.js";
-import { useBreakpoints as O } from "../../hooks/useBreakpoints.js";
+import { T as i } from "../../index.es-DUrjyxNI.js";
+import { u as N } from "../../uniqueId-CJo-XRQb.js";
+import { AvailableCustomIcons as O } from "../../enums/AvailableCustomIcons.js";
+import { useBreakpoints as x } from "../../hooks/useBreakpoints.js";
 import { Iconify as z } from "../Iconify/Iconify.js";
 import "react";
 import "../../react-tooltip.min-Dkz5ltCC.js";
@@ -31,7 +31,7 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
   title: r,
   confirmButtonLabel: t,
   cancelButtonLabel: n,
-  deleteHeader: i,
+  deleteHeader: l,
   deleteBody: a,
   deleteText: g,
   icon: h,
@@ -40,18 +40,18 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
   open: _,
   setOpen: d,
   onDelete: C,
-  onCancel: I,
+  onCancel: k,
   isDeletePossible: p = !0,
-  isDeletePending: s = !1,
+  isDeletePending: s,
   isOnline: u = !0,
-  offlineViewProps: k
+  offlineViewProps: I
 }) => {
-  const { isDesktop: D } = O();
+  const { isDesktop: D } = x();
   return /* @__PURE__ */ o(
     B,
     {
       isOnline: u,
-      offlineViewProps: k,
+      offlineViewProps: I,
       className: `${e.modal}`,
       modalSize: D ? "small" : "fullscreen",
       open: _,
@@ -62,10 +62,9 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
         {
           "data-testid": "delete-button",
           variant: "danger",
-          label: s ? "" : t,
           onClick: C,
           disabled: !p || s || !u,
-          trailingIcon: s ? /* @__PURE__ */ o(M, { size: "sm", text: "", spinnerOnly: !0 }) : null
+          children: s ? /* @__PURE__ */ o(M, { size: "sm", spinnerOnly: !0 }) : t
         }
       ),
       footerSupplemental: /* @__PURE__ */ o(
@@ -75,8 +74,9 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
           variant: "text",
           label: n,
           onClick: () => {
-            I?.(), d(!1);
-          }
+            k?.(), d(!1);
+          },
+          disabled: s
         }
       ),
       children: /* @__PURE__ */ b(m, { direction: "vertical", secondaryAlign: "center", children: [
@@ -84,7 +84,7 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
         /* @__PURE__ */ o(m, { direction: "vertical", children: p ? /* @__PURE__ */ o(
           L,
           {
-            deleteHeader: i,
+            deleteHeader: l,
             deleteText: g,
             deleteBody: a
           }
@@ -95,7 +95,7 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
 }, F = ({
   element: r,
   isCrossedOut: t = !1
-}) => t ? /* @__PURE__ */ o("span", { className: e.crossedOut, children: r }) : r, H = ({ icon: r }) => r ? typeof r != "string" ? r : Object.values(N).includes(r) ? /* @__PURE__ */ o(
+}) => t ? /* @__PURE__ */ o("span", { className: e.crossedOut, children: r }) : r, H = ({ icon: r }) => r ? typeof r != "string" ? r : Object.values(O).includes(r) ? /* @__PURE__ */ o(
   z,
   {
     icon: r,
@@ -107,22 +107,22 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_bd412_1", A = "_mo
   deleteText: t,
   deleteBody: n
 }) => /* @__PURE__ */ b(c, { children: [
-  /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: r }),
-  t && typeof t == "string" && /* @__PURE__ */ o(l, { level: 2, themeColor: "text-secondary-on-background", children: t }),
+  /* @__PURE__ */ o(i, { level: 1, themeColor: "text-primary-on-background", children: r }),
+  t && typeof t == "string" && /* @__PURE__ */ o(i, { level: 2, themeColor: "text-secondary-on-background", children: t }),
   t && typeof t != "string" && /* @__PURE__ */ o(c, { children: t }),
-  n && t === void 0 && /* @__PURE__ */ o(m, { direction: "vertical", gap: "none", children: n.map((i, a) => /* @__PURE__ */ o(
-    l,
+  n && t === void 0 && /* @__PURE__ */ o(m, { direction: "vertical", gap: "none", children: n.map((l, a) => /* @__PURE__ */ o(
+    i,
     {
       level: 2,
       className: e.bulletPoint,
       themeColor: "text-secondary-on-background",
-      children: i
+      children: l
     },
-    x(a.toString())
+    N(a.toString())
   )) })
 ] }), P = ({
   impossibleDeleteHeader: r
-}) => /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: r });
+}) => /* @__PURE__ */ o(i, { level: 1, themeColor: "text-primary-on-background", children: r });
 export {
   mo as DeleteModal
 };

package/dist/components/Stepper/components/StepperButton.d.ts

@@ -32,6 +32,6 @@ export declare const StepperPreviousButton: ({ label, variant, onClick, disabled
  * @returns
  */
 export declare const StepperNextButton: ({ label, variant, onClick, disabled, className, isStepLoading, isLastStep, showArrowIcon, leadingIcon, trailingIcon, buttonSize, fullWidth, }: StepperButtonProps & {
-    isStepLoading?: boolean;
+    isStepLoading: boolean;
     isLastStep?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/stepperTypes.d.ts

@@ -125,7 +125,7 @@ export type StepperProps = {
     /**
      * Flag which indicates if the current step is loading.
      */
-    isStepLoading?: boolean;
+    isStepLoading: boolean;
     /**
      * An indicator of whether to show the stepper header.
      * @default true

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