@hortiview/shared-components 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [2.4.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.3.0...v2.4.0) (2025-08-21)
+
+### Features
+
+* add button and tests ([fe8ba0d](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/fe8ba0d7e6439e8c8abf163c4b16d8c9aef1d36a))
+* create OfflineView component ([b6ff2d7](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/b6ff2d78125216875f3d6345f06100aeb578f1b6))
+* import offlineView and create tests and stories ([b577ae6](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/b577ae69559b1e215f0888f6da921b7cedf1e1ce))
+
+### Code Refactoring
+
+* add new props and clarify prop descriptions and defaults ([e81d321](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e81d3219597a7aba649658dc055729eb6d6d5596))
+* change props and add tests and storybook ([e742da8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e742da85acec7163125b4817728a07d011093046))
+
+### Styles
+
+* adjust .bgGrey and .bgWhite text color and add new .subtitle class ([5cbfb14](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/5cbfb14cbd0c560b5e00efba09b4683ef8a7bc9d))
+
+## [2.3.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.2.0...v2.3.0) (2025-08-20)
+
+### Features
+
+* add additional props to the stepper and stepper buttons ([e7a404d](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e7a404df5f97ec90dbfc4055cef8026f6d84a136))
+* added new LinkBanner component ([86d5360](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/86d5360b713cff6abd2bf6658e1f934b972c7020))
+
 ## [2.2.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.1.0...v2.2.0) (2025-07-24)
 
 ### Features

package/README.md

@@ -51,6 +51,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [LoadingSpinner](#loadingspinner)
 1. [Modal](#modal)
 1. [ModulePadding](#modulepadding)
+1. [OfflineView](#offlineview)
 1. [OnboardingBanner](#onboardingbanner)
 1. [OverflowTooltip](#overflowtooltip)
 1. [ScrollBar](#scrollbar)
@@ -888,6 +889,16 @@ import { ModulePadding } from '@hortiview/shared-components';
 </ModulePadding>;
 ```
 
+### OfflineView
+
+Shows an offline state with icon, title, and optional subtitle. Use `size` 'small' inline and 'large' for full pages.
+
+```jsx
+import { OfflineView } from '@hortiview/shared-components';
+
+<OfflineView title="Title" subtitle="Subtitle" />
+```
+
 ### OnboardingBanner
 
 A responsive onboarding banner that adapts its layout for desktop and mobile.

package/dist/AlertBanner-75jjene1.js

@@ -0,0 +1,26 @@
+import { jsx as n, Fragment as i, jsxs as t } from "react/jsx-runtime";
+import { G as l } from "./index.es-DntoATwO.js";
+import { I as _ } from "./index.es-3043KTnb.js";
+import { T as d } from "./index.es-D54RuMc_.js";
+import './assets/AlertBanner.css';const m = "_messageContainer_2hnjr_1", g = "_info_2hnjr_9", h = "_danger_2hnjr_14", p = "_success_2hnjr_19", f = "_warning_2hnjr_24", u = "_closeIcon_2hnjr_29", j = "_linkBanner_2hnjr_34", s = {
+  messageContainer: m,
+  info: g,
+  danger: h,
+  success: p,
+  warning: f,
+  closeIcon: u,
+  linkBanner: j
+}, k = ({
+  text: e,
+  color: o = "info",
+  isOpen: a = !0,
+  isBold: c = !0,
+  onClose: r
+}) => a ? /* @__PURE__ */ n("div", { "data-testid": "alert-banner", className: `${s.messageContainer} ${s[o]}`, children: /* @__PURE__ */ t(l, { primaryAlign: "space-between", secondaryAlign: "top", gap: "dense", fullWidth: !0, children: [
+  typeof e == "string" ? /* @__PURE__ */ n(d, { bold: c, level: 2, children: e }) : /* @__PURE__ */ n("div", { style: { width: "100%" }, children: e }),
+  r && /* @__PURE__ */ n(_, { icon: "close", iconSize: "small", onClick: r, className: s.closeIcon })
+] }) }) : /* @__PURE__ */ n(i, {});
+export {
+  k as A,
+  s
+};

package/dist/OfflineView-BW19N4Cu.js

@@ -0,0 +1,48 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { G as s } from "./index.es-DntoATwO.js";
+import { Iconify as _ } from "./components/Iconify/Iconify.js";
+import { b as m, d as y, T as h } from "./index.es-D54RuMc_.js";
+import { B as v } from "./index.es-CiqbARoC.js";
+import './assets/OfflineView.css';const w = "_gap_18we6_1", G = "_container_18we6_5", T = "_bgWhite_18we6_11", x = "_bgGrey_18we6_16", W = "_subtitle_18we6_21", i = {
+  gap: w,
+  container: G,
+  bgWhite: T,
+  bgGrey: x,
+  subtitle: W
+}, z = ({
+  title: t = "You’re currently offline",
+  subtitle: a = "This feature is unavailable until you reconnect",
+  icon: l = "cloud_off",
+  size: c = "large",
+  variant: d = "basic",
+  "data-testid": f = "offline-view-container",
+  buttonLabel: n,
+  fullWidth: g = !1,
+  className: b,
+  onClick: p
+}) => {
+  const r = c === "large", u = d === "filled";
+  return /* @__PURE__ */ o(
+    s,
+    {
+      className: `${b} ${i.container} ${u ? i.bgGrey : i.bgWhite}`,
+      gap: "standard",
+      direction: "vertical",
+      "data-testid": f,
+      secondaryAlign: "center",
+      fullWidth: g,
+      children: [
+        /* @__PURE__ */ o(s, { direction: "vertical", secondaryAlign: "center", className: i.gap, children: [
+          /* @__PURE__ */ e(_, { icon: l, iconSize: r ? "xlarge" : "medium" }),
+          r ? /* @__PURE__ */ e(m, { level: 6, children: t }) : /* @__PURE__ */ e(y, { level: 1, bold: !0, children: t })
+        ] }),
+        a && /* @__PURE__ */ e(h, { className: i.subtitle, level: 2, children: a }),
+        n && /* @__PURE__ */ e(v, { "data-testid": "offline-view-action-button", label: n, onClick: p })
+      ]
+    }
+  );
+};
+export {
+  z as O,
+  i as s
+};

package/dist/assets/AlertBanner.css

@@ -1 +1 @@
-._messageContainer_1i2s1_1{border-radius:.25rem;padding:.75rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_1i2s1_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_1i2s1_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_1i2s1_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_1i2s1_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}._closeIcon_1i2s1_29{align-self:flex-start;margin-right:-.15rem}
+._messageContainer_2hnjr_1{border-radius:.25rem;padding:.75rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_2hnjr_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_2hnjr_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_2hnjr_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_2hnjr_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}._closeIcon_2hnjr_29{align-self:flex-start;margin-right:-.15rem}._linkBanner_2hnjr_34{cursor:pointer}

package/dist/assets/ContextMenu.css

@@ -1 +1 @@
-._menu_ol91v_1{width:15.875rem}._icon_ol91v_5{color:var(--lmnt-theme-on-secondary-inactive)}._listItem_ol91v_9 [class*=mdc-list-item__start]{color:var(--lmnt-theme-on-secondary-inactive);align-self:center!important;margin:0 1rem!important}._listItem_ol91v_9 [class*=mdc-list-item__end]{color:var(--lmnt-theme-on-secondary-inactive)}
+._menu_1xwk3_1{width:15.875rem}._icon_1xwk3_5{color:var(--lmnt-theme-on-secondary-inactive)}._listItem_1xwk3_9 [class*=mdc-list-item__start]{color:var(--lmnt-theme-on-secondary-inactive);align-self:center!important;margin:0 1rem!important}._listItem_1xwk3_9 [class*=mdc-list-item__end]{color:var(--lmnt-theme-on-secondary-inactive)}._offlineViewMargin_1xwk3_19{margin:.5rem}

package/dist/assets/Modal.css

@@ -1 +1 @@
-._modal_18rd0_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._title_18rd0_6{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_18rd0_18{margin-left:1rem!important}
+._modal_fr8bw_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._title_fr8bw_6{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_fr8bw_18{margin-left:1rem!important}._closeButton_fr8bw_22:before{display:none!important}._closeButton_fr8bw_22:hover{background-color:var(--lmnt-theme-surface-variant)!important}

package/dist/assets/OfflineView.css

@@ -0,0 +1 @@
+._gap_18we6_1{gap:.125rem!important}._container_18we6_5{border-radius:.5rem;padding:2.5rem 2rem;width:auto}._bgWhite_18we6_11{background:var(--lmnt-theme-surface);color:var(--lmnt-theme-on-surface-active)}._bgGrey_18we6_16{background:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-active)}._subtitle_18we6_21{color:var(--on-colors-on-surface-inactive-medium, #000000BA);font-weight:500}

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -1,4 +1,4 @@
-type AlertBannerProps = {
+export type AlertBannerProps = {
     text: string | JSX.Element;
     color?: 'danger' | 'info' | 'success' | 'warning';
     isOpen?: boolean;
@@ -13,4 +13,3 @@ type AlertBannerProps = {
     action?: JSX.Element;
 };
 export declare const AlertBanner: ({ text, color, isOpen, isBold, onClose, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,24 +1,8 @@
-import { jsx as n, Fragment as a, jsxs as t } from "react/jsx-runtime";
-import { G as l } from "../../index.es-DntoATwO.js";
-import { I as _ } from "../../index.es-3043KTnb.js";
-import { T as m } from "../../index.es-D54RuMc_.js";
-import '../../assets/AlertBanner.css';const d = "_messageContainer_1i2s1_1", g = "_info_1i2s1_9", p = "_danger_1i2s1_14", f = "_success_1i2s1_19", u = "_warning_1i2s1_24", y = "_closeIcon_1i2s1_29", e = {
-  messageContainer: d,
-  info: g,
-  danger: p,
-  success: f,
-  warning: u,
-  closeIcon: y
-}, b = ({
-  text: s,
-  color: r = "info",
-  isOpen: i = !0,
-  isBold: c = !0,
-  onClose: o
-}) => i ? /* @__PURE__ */ n("div", { "data-testid": "alert-banner", className: `${e.messageContainer} ${e[r]}`, children: /* @__PURE__ */ t(l, { primaryAlign: "space-between", secondaryAlign: "top", gap: "dense", children: [
-  typeof s == "string" ? /* @__PURE__ */ n(m, { bold: c, level: 2, children: s }) : /* @__PURE__ */ n("div", { children: s }),
-  o && /* @__PURE__ */ n(_, { icon: "close", iconSize: "small", onClick: o, className: e.closeIcon })
-] }) }) : /* @__PURE__ */ n(a, {});
+import "react/jsx-runtime";
+import "../../index.es-DntoATwO.js";
+import "../../index.es-3043KTnb.js";
+import "../../index.es-D54RuMc_.js";
+import { A as e } from "../../AlertBanner-75jjene1.js";
 export {
-  b as AlertBanner
+  e as AlertBanner
 };

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,7 +1,7 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-CX1WJ2Pp.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
-import { AlertBanner as n } from "./AlertBanner.js";
+import { A as n } from "../../AlertBanner-75jjene1.js";
 import { d as p, b as c, a as l, t as r, g as a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 p("AlertBanner Test", () => {
   c(() => {

package/dist/components/AlertBanner/LinkBanner.d.ts

@@ -0,0 +1,21 @@
+import { AlertBannerProps } from './AlertBanner';
+
+/**
+ * LinkBanner component, shows an alert banner but with a link as text
+ * @param text - The text of the link.
+ * @param url - The URL the link points to.
+ * @param color - The color of the link banner.
+ * @param isOpen - Whether the link banner is open or not.
+ * @param isBold - Whether the text is bold or not.
+ * @returns
+ */
+export declare const LinkBanner: ({ text, color, isOpen, isBold, url, }: Omit<AlertBannerProps, "onClose" | "action" | "text"> & {
+    /**
+     * the given text is shown as a link, in addition a link icon is displayed
+     */
+    url: string;
+    /**
+     * the text of the link
+     */
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AlertBanner/LinkBanner.js

@@ -0,0 +1,37 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { G as l } from "../../index.es-DntoATwO.js";
+import { T as s } from "../../index.es-D54RuMc_.js";
+import { Iconify as p } from "../Iconify/Iconify.js";
+import { A as m, s as c } from "../../AlertBanner-75jjene1.js";
+const g = ({
+  text: n,
+  color: o = "info",
+  isOpen: t = !0,
+  isBold: e = !0,
+  url: i
+}) => /* @__PURE__ */ r(
+  m,
+  {
+    color: o,
+    isOpen: t,
+    isBold: e,
+    text: /* @__PURE__ */ r("a", { href: i, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ a(
+      l,
+      {
+        direction: "horizontal",
+        primaryAlign: "space-between",
+        gap: "dense",
+        secondaryAlign: "center",
+        className: c.linkBanner,
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ r(s, { bold: e, level: 2, children: n }),
+          /* @__PURE__ */ r(p, { icon: "open_in_new", pointer: !0 })
+        ]
+      }
+    ) })
+  }
+);
+export {
+  g as LinkBanner
+};

package/dist/components/AlertBanner/LinkBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AlertBanner/LinkBanner.test.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import { a as r, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
+import { LinkBanner as a } from "./LinkBanner.js";
+import { d as n, b as i, a as m, t as p, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+n("LinkBanner Test", () => {
+  i(() => {
+    m.spyOn(o, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0,
+      isDesktopNavbar: !0
+    });
+  }), p("render LinkBanner with text", () => {
+    r(/* @__PURE__ */ s(a, { text: "Test", url: "#" })), t(e.getByText("Test")).toBeInTheDocument(), t(e.getByText("open_in_new")).toBeInTheDocument(), t(e.getByRole("link")).toHaveAttribute("href", "#");
+  });
+});

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

@@ -1,5 +1,6 @@
 import { BaseListElement } from '../../types/ListElement';
 import { LinkProps } from '../../types/internal/ReactRouterTypes';
+import { OfflineViewProps } from '../OfflineView/OfflineView';
 
 type BaseViewProps = {
     /**
@@ -50,6 +51,14 @@ type BaseViewProps = {
      * searchPlaceholder is the placeholder of the search input, @default ''
      */
     searchPlaceholder?: string;
+    /**
+     * Whether the user is online; shows OfflineView when false.
+     */
+    isOnline?: boolean;
+    /**
+     * Props forwarded to <OfflineView /> when offline.
+     */
+    offlineViewProps?: Partial<OfflineViewProps>;
     /**
      * routerLinkElement is the element to be used for the elements link, use react-router Link component for the best experience.
      * If the element has `noNavigation=false` and the `routerLinkElement` is undefined an `<a>` tag is used.
@@ -62,5 +71,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, pathname, routerLinkElement, searchPlaceholder, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseView: ({ heading, action, hint, elements, emptyText, hasSearch, isSorted, className, withAvatar, listMaxHeight, pathname, isOnline, offlineViewProps, routerLinkElement, searchPlaceholder, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BaseView/BaseView.js

@@ -1,70 +1,73 @@
 import { jsx as i, Fragment as d, jsxs as s } from "react/jsx-runtime";
 import { G as r } from "../../index.es-DntoATwO.js";
 import { useMemo as a } from "react";
-import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
-import { EmptyView as W } from "../EmptyView/EmptyView.js";
-import { ListArea as B } from "../ListArea/ListArea.js";
-import { u as G } from "../../useBreakpoints-MzTZ0tCT.js";
-import { VerticalDivider as N } from "../VerticalDivider/VerticalDivider.js";
-import '../../assets/BaseView.css';const A = "_parentGroup_w7vsz_1", V = "_divider_w7vsz_5", j = "_maxWidth_w7vsz_10", E = "_desktopList_w7vsz_14", H = "_mobileList_w7vsz_19", I = "_desktopDetail_w7vsz_23", $ = "_mobileDetail_w7vsz_28", o = {
-  parentGroup: A,
-  divider: V,
-  maxWidth: j,
-  desktopList: E,
-  mobileList: H,
-  desktopDetail: I,
-  mobileDetail: $
-}, P = ({
+import { BasicHeading as h } from "../BasicHeading/BasicHeading.js";
+import { EmptyView as G } from "../EmptyView/EmptyView.js";
+import { ListArea as N } from "../ListArea/ListArea.js";
+import { u as A } from "../../useBreakpoints-MzTZ0tCT.js";
+import { VerticalDivider as V } from "../VerticalDivider/VerticalDivider.js";
+import { O as j } from "../../OfflineView-BW19N4Cu.js";
+import '../../assets/BaseView.css';const E = "_parentGroup_w7vsz_1", H = "_divider_w7vsz_5", I = "_maxWidth_w7vsz_10", $ = "_desktopList_w7vsz_14", y = "_mobileList_w7vsz_19", F = "_desktopDetail_w7vsz_23", M = "_mobileDetail_w7vsz_28", o = {
+  parentGroup: E,
+  divider: H,
+  maxWidth: I,
+  desktopList: $,
+  mobileList: y,
+  desktopDetail: F,
+  mobileDetail: M
+}, U = ({
   heading: c,
   action: m = /* @__PURE__ */ i(d, {}),
-  hint: v = /* @__PURE__ */ i(d, {}),
+  hint: _ = /* @__PURE__ */ i(d, {}),
   elements: n,
   emptyText: p,
-  hasSearch: _ = !0,
-  isSorted: h = !0,
-  className: f,
-  withAvatar: b = !1,
-  listMaxHeight: w = "calc(100vh - 200px)",
+  hasSearch: f = !0,
+  isSorted: b = !0,
+  className: w,
+  withAvatar: D = !1,
+  listMaxHeight: g = "calc(100vh - 200px)",
   pathname: l,
-  routerLinkElement: D,
-  searchPlaceholder: g
+  isOnline: u = !0,
+  offlineViewProps: v,
+  routerLinkElement: k,
+  searchPlaceholder: L
 }) => {
-  const { isDesktopNavbar: e } = G(), t = a(() => n.find((z) => z.route === l), [l, n]), k = a(() => t?.component ?? (e ? /* @__PURE__ */ i(W, { subtitle: p }) : /* @__PURE__ */ i(d, {})), [t, e, p]), L = a(() => e ? !0 : !t, [t, e]), x = a(() => e ? !0 : t, [t, e]);
+  const { isDesktopNavbar: e } = A(), t = a(() => n.find((B) => B.route === l), [l, n]), x = a(() => u ? t?.component ?? (e ? /* @__PURE__ */ i(G, { subtitle: p }) : /* @__PURE__ */ i(d, {})) : /* @__PURE__ */ i(j, { ...v, fullWidth: !0 }), [t?.component, p, e, u, v]), W = a(() => e ? !0 : !t, [t, e]), z = a(() => e ? !0 : t, [t, e]);
   return /* @__PURE__ */ s(
     r,
     {
       "data-testid": "base-view-container",
-      className: `${o.parentGroup} ${f ?? ""}`,
+      className: `${o.parentGroup} ${w ?? ""}`,
       gap: "none",
       fullWidth: !0,
       children: [
-        L && /* @__PURE__ */ i(r, { gap: "none", className: e ? o.desktopList : o.mobileList, children: /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, gap: e ? "standard" : "dense", children: [
-          c && /* @__PURE__ */ i(u, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: m }),
-          v,
+        W && /* @__PURE__ */ i(r, { gap: "none", className: e ? o.desktopList : o.mobileList, children: /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, gap: e ? "standard" : "dense", children: [
+          c && /* @__PURE__ */ i(h, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: m }),
+          _,
           /* @__PURE__ */ i(
-            B,
+            N,
             {
               elements: n,
-              hasSearch: _,
-              maxHeight: w,
-              isSorted: h,
+              hasSearch: f,
+              maxHeight: g,
+              isSorted: b,
               pathname: l,
-              routerLinkElement: D,
-              searchPlaceholder: g
+              routerLinkElement: k,
+              searchPlaceholder: L
             }
           )
         ] }) }),
-        x && /* @__PURE__ */ s(
+        z && /* @__PURE__ */ s(
           r,
           {
             "data-testid": "details",
             gap: "none",
             className: e ? o.desktopDetail : o.mobileDetail,
             children: [
-              e && /* @__PURE__ */ i(N, { className: o.divider, height: "100%" }),
+              e && /* @__PURE__ */ i(V, { className: o.divider, height: "100%" }),
               /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
                 /* @__PURE__ */ i(
-                  u,
+                  h,
                   {
                     className: o.maxWidth,
                     heading: t?.detailTitle ?? t?.title ?? "",
@@ -72,11 +75,11 @@ import '../../assets/BaseView.css';const A = "_parentGroup_w7vsz_1", V = "_divid
                     icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
                     marginBottom: 0,
                     invisibleButton: t?.detailAction === void 0,
-                    withAvatar: b,
+                    withAvatar: D,
                     children: t?.detailAction ?? m
                   }
                 ),
-                k
+                x
               ] })
             ]
           }
@@ -86,5 +89,5 @@ import '../../assets/BaseView.css';const A = "_parentGroup_w7vsz_1", V = "_divid
   );
 };
 export {
-  P as BaseView
+  U as BaseView
 };

package/dist/components/BaseView/BaseView.test.js

@@ -1,10 +1,10 @@
-import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { a as r, s as e, f as p } from "../../react.esm-CX1WJ2Pp.js";
+import { jsx as o, Fragment as s } from "react/jsx-runtime";
+import { a as n, s as e, f as p } from "../../react.esm-CX1WJ2Pp.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
-import { BaseView as i } from "./BaseView.js";
-import { d as u, b as m, a as c, t as n, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+import { BaseView as r } from "./BaseView.js";
+import { d as u, b as f, a as c, t as i, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 u("BaseView Test", () => {
-  m(() => {
+  f(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
@@ -12,20 +12,20 @@ u("BaseView Test", () => {
       isDesktopNavbar: !0
     });
   });
-  const o = [
+  const a = [
     {
       id: "1",
       title: "user.personal_information",
       icon: "account_circle",
       route: "/personal-profile/personal-information",
-      component: /* @__PURE__ */ a(s, { children: "Personal information selected" })
+      component: /* @__PURE__ */ o(s, { children: "Personal information selected" })
     },
     {
       id: "2",
       title: "user.data_privacy",
       icon: "privacy_tip",
       route: "/personal-profile/data-privacy",
-      component: /* @__PURE__ */ a(s, { children: "Data Privacy selected" }),
+      component: /* @__PURE__ */ o(s, { children: "Data Privacy selected" }),
       detailTitle: "Data Privacy 2000",
       hideIconInDetail: !0
     },
@@ -34,16 +34,16 @@ u("BaseView Test", () => {
       title: "user.security",
       icon: "security",
       route: "/personal-profile/security",
-      component: /* @__PURE__ */ a(s, { children: "Security selected" })
+      component: /* @__PURE__ */ o(s, { children: "Security selected" })
     }
   ];
-  n("render BaseView with empty view and navigation list", () => {
-    r(
-      /* @__PURE__ */ a(
-        i,
+  i("render BaseView with empty view and navigation list", () => {
+    n(
+      /* @__PURE__ */ o(
+        r,
         {
           pathname: "/personal-profile",
-          elements: o,
+          elements: a,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -52,13 +52,13 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("user.noselection")).toBeInTheDocument(), t(e.getByText("user.personal-profile")).toBeInTheDocument(), t(e.getByText("user.personal_information")).toBeInTheDocument(), t(e.getByText("user.data_privacy")).toBeInTheDocument(), t(e.getByText("user.security")).toBeInTheDocument();
-  }), n("render BaseView with data and navigation list", () => {
-    r(
-      /* @__PURE__ */ a(
-        i,
+  }), i("render BaseView with data and navigation list", () => {
+    n(
+      /* @__PURE__ */ o(
+        r,
         {
           pathname: "/personal-profile/personal-information",
-          elements: o,
+          elements: a,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -67,13 +67,13 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("Personal information selected")).toBeInTheDocument(), t(e.getAllByText("account_circle")).toHaveLength(2), t(e.getAllByText("user.personal_information")).toHaveLength(2);
-  }), n("render BaseView with custom detail title and no detail icon", () => {
-    r(
-      /* @__PURE__ */ a(
-        i,
+  }), i("render BaseView with custom detail title and no detail icon", () => {
+    n(
+      /* @__PURE__ */ o(
+        r,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: o,
+          elements: a,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -82,18 +82,18 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("Data Privacy selected")).toBeInTheDocument(), t(e.getByText("Data Privacy 2000")).toBeInTheDocument(), t(e.getAllByText("privacy_tip")).toHaveLength(1), t(e.getAllByText("user.data_privacy")).toHaveLength(1);
-  }), n("hide empty view when screen is small", () => {
+  }), i("hide empty view when screen is small", () => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
       isDesktop: !1,
       isDesktopNavbar: !1
-    }), r(
-      /* @__PURE__ */ a(
-        i,
+    }), n(
+      /* @__PURE__ */ o(
+        r,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: o,
+          elements: a,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -102,13 +102,13 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.queryByText("user.noselection")).not.toBeInTheDocument();
-  }), n("render BaseView with selected detail section", () => {
-    r(
-      /* @__PURE__ */ a(
-        i,
+  }), i("render BaseView with selected detail section", () => {
+    n(
+      /* @__PURE__ */ o(
+        r,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: o,
+          elements: a,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -117,5 +117,22 @@ u("BaseView Test", () => {
         }
       )
     ), p.click(e.getAllByRole("option")[1]), t(e.getByText("Data Privacy selected")).toBeInTheDocument();
+  }), i("renders only offline view when offline", () => {
+    n(
+      /* @__PURE__ */ o(
+        r,
+        {
+          pathname: "/personal-profile/personal-information",
+          elements: a,
+          heading: "user.personal-profile",
+          hasSearch: !1,
+          emptyText: "user.noselection",
+          isSorted: !1,
+          isOnline: !1,
+          offlineViewProps: { "data-testid": "offline-test" },
+          routerLinkElement: void 0
+        }
+      )
+    ), t(e.queryByText("Personal information selected")).not.toBeInTheDocument(), t(e.getByTestId("offline-test")).toBeInTheDocument();
   });
 });

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

@@ -1,4 +1,5 @@
 import { ListItemProps } from '@element-public/react-list';
+import { OfflineViewProps } from '../OfflineView/OfflineView';
 
 type ContextMenuProps = {
     /**
@@ -19,6 +20,14 @@ type ContextMenuProps = {
      * data-testid for testing
      */
     'data-testid'?: string;
+    /**
+     * Whether the user is online; shows OfflineView when false.
+     */
+    isOnline?: boolean;
+    /**
+     * Props forwarded to <OfflineView /> when offline.
+     */
+    offlineViewProps?: Partial<OfflineViewProps>;
 };
 export type ActionProps = ListItemProps & {
     closeOnClick?: boolean;
@@ -35,7 +44,9 @@ export type ActionProps = ListItemProps & {
  *  { 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
  */
-export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};