@hortiview/shared-components 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [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

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

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,48 +1,52 @@
-import { jsx as o } from "react/jsx-runtime";
-import { I as d } from "../../index.es-0lQcz8m1.js";
-import { M as f, L as _, a as I } from "../../index.es-fnFnw2P1.js";
-import { useState as p, useCallback as a, useEffect as v } from "react";
-import { u as C } from "../../uniqueId-NU3-C36A.js";
-import '../../assets/ContextMenu.css';const k = "_menu_ol91v_1", y = "_icon_ol91v_5", M = "_listItem_ol91v_9", i = {
-  menu: k,
+import { jsx as t } from "react/jsx-runtime";
+import { I as _ } from "../../index.es-0lQcz8m1.js";
+import { M as k, L as p, a as w } from "../../index.es-fnFnw2P1.js";
+import { useState as I, useCallback as a, useEffect as M } from "react";
+import { u as x } from "../../uniqueId-NU3-C36A.js";
+import { O as C } from "../../OfflineView-BW19N4Cu.js";
+import '../../assets/ContextMenu.css';const v = "_menu_1xwk3_1", y = "_icon_1xwk3_5", V = "_listItem_1xwk3_9", g = "_offlineViewMargin_1xwk3_19", s = {
+  menu: v,
   icon: y,
-  listItem: M
-}, T = ({
-  triggerOpen: n = null,
-  actions: c,
-  iconOrientation: m = "vertical",
-  "data-testid": r
+  listItem: V,
+  offlineViewMargin: g
+}, b = ({
+  triggerOpen: o = null,
+  actions: r,
+  iconOrientation: c = "vertical",
+  "data-testid": m,
+  isOnline: f = !0,
+  offlineViewProps: u
 }) => {
-  const [t, s] = p(!1), u = a(() => {
-    s(!t);
-  }, [t]), l = a(() => {
-    s(!1);
+  const [i, n] = I(!1), d = a(() => {
+    n(!i);
+  }, [i]), l = a(() => {
+    n(!1);
   }, []);
-  return v(() => {
-    s(n !== null ? n : !1);
-  }, [n]), /* @__PURE__ */ o(
-    f,
+  return M(() => {
+    n(o !== null ? o : !1);
+  }, [o]), /* @__PURE__ */ t(
+    k,
     {
-      className: i.menu,
-      "data-testid": r ?? "selection-menu",
-      open: t,
+      className: s.menu,
+      "data-testid": m ?? "selection-menu",
+      open: i,
       surfaceOnly: !0,
       hoistToBody: !0,
       onClose: l,
-      trigger: /* @__PURE__ */ o(
-        d,
+      trigger: /* @__PURE__ */ t(
+        _,
         {
-          className: i.icon,
-          variant: t ? "filled-primary" : void 0,
+          className: s.icon,
+          variant: i ? "filled-primary" : void 0,
           "data-testid": "open-button",
-          icon: m === "vertical" ? "more_vert" : "more_horiz",
-          onClick: u
+          icon: c === "vertical" ? "more_vert" : "more_horiz",
+          onClick: d
         }
       ),
-      children: /* @__PURE__ */ o(_, { "data-testid": "selection-list", children: c.map((e) => /* @__PURE__ */ o(
-        I,
+      children: f ? /* @__PURE__ */ t(p, { "data-testid": "selection-list", children: r.map((e) => /* @__PURE__ */ t(
+        w,
         {
-          className: i.listItem,
+          className: s.listItem,
           ...e,
           leadingBlockType: "icon",
           "data-testid": e["data-testid"],
@@ -50,12 +54,12 @@ import '../../assets/ContextMenu.css';const k = "_menu_ol91v_1", y = "_icon_ol91
             e?.onClick?.(), e.closeOnClick !== !1 && l();
           }
         },
-        C(`LI_${e.primaryText?.toString()}_`)
-      )) })
+        x(`LI_${e.primaryText?.toString()}_`)
+      )) }) : /* @__PURE__ */ t(C, { size: "small", variant: "filled", className: s.offlineViewMargin, ...u })
     },
     "selectionmenu"
   );
 };
 export {
-  T as ContextMenu
+  b as ContextMenu
 };

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -1,22 +1,45 @@
-import { jsx as r } from "react/jsx-runtime";
-import { a as B, s as t, f as o, w as s } from "../../react.esm-CX1WJ2Pp.js";
-import { ContextMenu as p } from "./ContextMenu.js";
-import { a as d, d as k, t as T, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-const C = d.fn(), a = d.fn(), i = d.fn(), g = [
-  { primaryText: "Open", onClick: C, leadingBlock: "add", "data-testid": "open-testid" },
-  { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline", "data-testid": "delete-testid" },
-  { primaryText: "Edit", onClick: a, leadingBlock: "edit", "data-testid": "edit-testid" }
+import { jsx as a } from "react/jsx-runtime";
+import { a as i, s as t, f as o, w as c } from "../../react.esm-CX1WJ2Pp.js";
+import { ContextMenu as d } from "./ContextMenu.js";
+import { a as B, d as I, t as l, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+const g = B.fn(), m = B.fn(), r = B.fn(), u = [
+  { primaryText: "Open", onClick: g, leadingBlock: "add", "data-testid": "open-testid" },
+  {
+    primaryText: "Delete",
+    onClick: r,
+    leadingBlock: "delete_outline",
+    "data-testid": "delete-testid"
+  },
+  { primaryText: "Edit", onClick: m, leadingBlock: "edit", "data-testid": "edit-testid" }
 ];
-k("ContextMenu Test", () => {
-  T("render contextMenu and close it", () => {
-    B(/* @__PURE__ */ r(p, { actions: g }));
-    const c = t.getByTestId("open-button"), n = t.getByTestId("selection-menu");
-    e(n).toBeInTheDocument(), e(n).not.toHaveClass("mdc-menu-surface--open"), o.click(c), s(() => e(n).toHaveClass("mdc-menu-surface--open")), o.click(c), s(() => e(n).not.toHaveClass("mdc-menu-surface--open"));
-  }), T("render ContextMenu and open it", async () => {
-    B(/* @__PURE__ */ r(p, { actions: g, triggerOpen: !0 }));
-    const c = t.getByTestId("open-button"), n = t.getByTestId("selection-menu");
-    e(n).toBeInTheDocument(), e(n).not.toHaveClass("mdc-menu-surface--open"), o.click(c), await s(() => e(n).toHaveClass("mdc-menu-surface--animating-open")), e(t.getByText("Open")).toBeInTheDocument(), e(t.getByText("Delete")).toBeInTheDocument(), e(t.getByText("Edit")).toBeInTheDocument();
-    const l = t.getByTestId("open-testid"), m = t.getByTestId("delete-testid"), u = t.getByTestId("edit-testid");
-    e(l).toBeInTheDocument(), e(m).toBeInTheDocument(), e(u).toBeInTheDocument(), o.click(l), e(C).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(a).not.toHaveBeenCalled(), o.click(m), e(i).toHaveBeenCalled(), o.click(u), e(a).toHaveBeenCalled();
+I("ContextMenu Test", () => {
+  l("render contextMenu and close it", () => {
+    i(/* @__PURE__ */ a(d, { actions: u }));
+    const s = t.getByTestId("open-button"), n = t.getByTestId("selection-menu");
+    e(n).toBeInTheDocument(), e(n).not.toHaveClass("mdc-menu-surface--open"), o.click(s), c(() => e(n).toHaveClass("mdc-menu-surface--open")), o.click(s), c(() => e(n).not.toHaveClass("mdc-menu-surface--open"));
+  }), l("render ContextMenu and open it", async () => {
+    i(/* @__PURE__ */ a(d, { actions: u, triggerOpen: !0 }));
+    const s = t.getByTestId("open-button"), n = t.getByTestId("selection-menu");
+    e(n).toBeInTheDocument(), e(n).not.toHaveClass("mdc-menu-surface--open"), o.click(s), await c(() => e(n).toHaveClass("mdc-menu-surface--animating-open")), e(t.getByText("Open")).toBeInTheDocument(), e(t.getByText("Delete")).toBeInTheDocument(), e(t.getByText("Edit")).toBeInTheDocument();
+    const p = t.getByTestId("open-testid"), T = t.getByTestId("delete-testid"), f = t.getByTestId("edit-testid");
+    e(p).toBeInTheDocument(), e(T).toBeInTheDocument(), e(f).toBeInTheDocument(), o.click(p), e(g).toHaveBeenCalled(), e(r).not.toHaveBeenCalled(), e(m).not.toHaveBeenCalled(), o.click(T), e(r).toHaveBeenCalled(), o.click(f), e(m).toHaveBeenCalled();
+  }), l("render ContextMenu with offlineView", async () => {
+    i(
+      /* @__PURE__ */ a(
+        d,
+        {
+          actions: u,
+          triggerOpen: !0,
+          isOnline: !1,
+          offlineViewProps: {
+            "data-testid": "offline-test"
+          }
+        }
+      )
+    );
+    const s = t.getByTestId("open-button");
+    o.click(s);
+    const n = t.getByTestId("selection-menu");
+    await c(() => e(n).toHaveClass("mdc-menu-surface--animating-open")), e(t.getByTestId("offline-test")).toBeInTheDocument();
   });
 });