@hortiview/shared-components 2.2.0 → 2.4.0

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

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

@@ -1,3 +1,5 @@
+import { OfflineViewProps } from '../OfflineView/OfflineView';
+
 type DeleteModalProps = {
     /**
      * The title of the modal.
@@ -58,6 +60,14 @@ type DeleteModalProps = {
      * Default is _true_.
      */
     isDeletePossible?: boolean;
+    /**
+     * Whether the user is online; shows OfflineView when false.
+     */
+    isOnline?: boolean;
+    /**
+     * Props forwarded to <OfflineView /> when offline.
+     */
+    offlineViewProps?: Partial<OfflineViewProps>;
 };
 /**
  * A modal component for deleting items.
@@ -75,7 +85,9 @@ type DeleteModalProps = {
  * @prop {function} onDelete - The function to call when the confirm button is clicked.
  * @prop {function} onCancel - A optional function to call when the cancel button is clicked.
  * @prop {boolean} isDeletePossible - If true, the delete button will be enabled. If false, the delete button will be disabled and the {@link impossibleDeleteHeader} will be displayed. Default is _true_.
+ * @prop {boolean} isOnline - Whether the user is online; shows OfflineView when false.
+ * @prop {Partial} offlineViewProps - Props forwarded to OfflineView when offline.
  * @returns {ReactElement} A modal component for deleting items.
  */
-export declare const DeleteModal: ({ title, confirmButtonLabel, cancelButtonLabel, deleteHeader, deleteBody, deleteText, icon, isIconCrossedOut, impossibleDeleteHeader, open, setOpen, onDelete, onCancel, isDeletePossible, }: DeleteModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeleteModal: ({ title, confirmButtonLabel, cancelButtonLabel, deleteHeader, deleteBody, deleteText, icon, isIconCrossedOut, impossibleDeleteHeader, open, setOpen, onDelete, onCancel, isDeletePossible, isOnline, offlineViewProps, }: DeleteModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DeleteModal/DeleteModal.js

@@ -1,96 +1,100 @@
-import { jsx as o, jsxs as p, Fragment as i } from "react/jsx-runtime";
-import { B as u } from "../../index.es-CiqbARoC.js";
-import { G as c } from "../../index.es-DntoATwO.js";
-import { I as D } from "../../index.es-3043KTnb.js";
+import { jsx as o, jsxs as f, Fragment as c } from "react/jsx-runtime";
+import { B as p } from "../../index.es-CiqbARoC.js";
+import { G as i } from "../../index.es-DntoATwO.js";
+import { I } from "../../index.es-3043KTnb.js";
 import { T as l } from "../../index.es-D54RuMc_.js";
-import { u as k } from "../../uniqueId-NU3-C36A.js";
-import { AvailableCustomIcons as I } from "../../enums/AvailableCustomIcons.js";
-import { u as N } from "../../useBreakpoints-MzTZ0tCT.js";
-import { Iconify as O } from "../Iconify/Iconify.js";
-import { Modal as S } from "../Modal/Modal.js";
-import '../../assets/DeleteModal.css';const x = "_bulletPoint_bd412_1", B = "_modal_bd412_7", M = "_colorDanger_bd412_11", j = "_crossedOut_bd412_15", t = {
-  bulletPoint: x,
-  modal: B,
-  colorDanger: M,
-  crossedOut: j
-}, R = ({
+import { u as N } from "../../uniqueId-NU3-C36A.js";
+import { AvailableCustomIcons as S } from "../../enums/AvailableCustomIcons.js";
+import { u as x } from "../../useBreakpoints-MzTZ0tCT.js";
+import { Iconify as B } from "../Iconify/Iconify.js";
+import { Modal as M } from "../Modal/Modal.js";
+import '../../assets/DeleteModal.css';const O = "_bulletPoint_bd412_1", j = "_modal_bd412_7", z = "_colorDanger_bd412_11", P = "_crossedOut_bd412_15", t = {
+  bulletPoint: O,
+  modal: j,
+  colorDanger: z,
+  crossedOut: P
+}, V = ({
   title: r,
   confirmButtonLabel: e,
   cancelButtonLabel: n,
   deleteHeader: a,
   deleteBody: s,
-  deleteText: f,
-  icon: b,
-  isIconCrossedOut: g,
-  impossibleDeleteHeader: h,
-  open: v,
+  deleteText: b,
+  icon: g,
+  isIconCrossedOut: h,
+  impossibleDeleteHeader: v,
+  open: y,
   setOpen: d,
-  onDelete: y,
-  onCancel: _,
-  isDeletePossible: m = !0
+  onDelete: _,
+  onCancel: C,
+  isDeletePossible: m = !0,
+  isOnline: u = !0,
+  offlineViewProps: D
 }) => {
-  const { isDesktop: C } = N();
+  const { isDesktop: k } = x();
   return /* @__PURE__ */ o(
-    S,
+    M,
     {
+      isOnline: u,
+      offlineViewProps: D,
       className: `${t.modal}`,
-      modalSize: C ? "small" : "fullscreen",
-      open: v,
+      modalSize: k ? "small" : "fullscreen",
+      open: y,
       title: r,
       onClose: () => d(!1),
       primaryButton: /* @__PURE__ */ o(
-        u,
+        p,
         {
           "data-testid": "delete-button",
           variant: "danger",
           label: e,
-          onClick: y,
-          disabled: !m
+          onClick: _,
+          disabled: !m || !u
         }
       ),
       footerSupplemental: /* @__PURE__ */ o(
-        u,
+        p,
         {
           "data-testid": "cancel-button",
           variant: "text",
           label: n,
           onClick: () => {
-            _?.(), d(!1);
+            C?.(), d(!1);
           }
         }
       ),
-      children: /* @__PURE__ */ p(c, { direction: "vertical", secondaryAlign: "center", children: [
-        /* @__PURE__ */ o(z, { element: /* @__PURE__ */ o(P, { icon: b }), isCrossedOut: g }),
-        /* @__PURE__ */ o(c, { direction: "vertical", children: m ? /* @__PURE__ */ o(
-          A,
+      children: /* @__PURE__ */ f(i, { direction: "vertical", secondaryAlign: "center", children: [
+        /* @__PURE__ */ o(A, { element: /* @__PURE__ */ o(G, { icon: g }), isCrossedOut: h }),
+        /* @__PURE__ */ o(i, { direction: "vertical", children: m ? /* @__PURE__ */ o(
+          q,
           {
             deleteHeader: a,
-            deleteText: f,
+            deleteText: b,
             deleteBody: s
           }
-        ) : /* @__PURE__ */ o(G, { impossibleDeleteHeader: h }) })
+        ) : /* @__PURE__ */ o(F, { impossibleDeleteHeader: v }) })
       ] })
     }
   );
-}, z = ({
+}, A = ({
   element: r,
   isCrossedOut: e = !1
-}) => e ? /* @__PURE__ */ o("span", { className: t.crossedOut, children: r }) : r, P = ({ icon: r }) => r ? typeof r != "string" ? r : Object.values(I).includes(r) ? /* @__PURE__ */ o(
-  O,
+}) => e ? /* @__PURE__ */ o("span", { className: t.crossedOut, children: r }) : r, G = ({ icon: r }) => r ? typeof r != "string" ? r : Object.values(S).includes(r) ? /* @__PURE__ */ o(
+  B,
   {
     icon: r,
     iconSize: "xlarge",
     className: t.colorDanger
   }
-) : /* @__PURE__ */ o(D, { icon: r, iconSize: "xlarge", className: t.colorDanger }) : /* @__PURE__ */ o(i, {}), A = ({
+) : /* @__PURE__ */ o(I, { icon: r, iconSize: "xlarge", className: t.colorDanger }) : /* @__PURE__ */ o(c, {}), q = ({
   deleteHeader: r,
   deleteText: e,
   deleteBody: n
-}) => /* @__PURE__ */ p(i, { children: [
+}) => /* @__PURE__ */ f(c, { children: [
   /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: r }),
   e && typeof e == "string" && /* @__PURE__ */ o(l, { level: 2, themeColor: "text-secondary-on-background", children: e }),
-  e && typeof e != "string" && /* @__PURE__ */ o(i, { children: e }),
-  n && e === void 0 && /* @__PURE__ */ o(c, { direction: "vertical", gap: "none", children: n.map((a, s) => /* @__PURE__ */ o(
+  e && typeof e != "string" && /* @__PURE__ */ o(c, { children: e }),
+  n && e === void 0 && /* @__PURE__ */ o(i, { direction: "vertical", gap: "none", children: n.map((a, s) => /* @__PURE__ */ o(
     l,
     {
       level: 2,
@@ -98,11 +102,11 @@ import '../../assets/DeleteModal.css';const x = "_bulletPoint_bd412_1", B = "_mo
       themeColor: "text-secondary-on-background",
       children: a
     },
-    k(s.toString())
+    N(s.toString())
   )) })
-] }), G = ({
+] }), F = ({
   impossibleDeleteHeader: r
 }) => /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: r });
 export {
-  R as DeleteModal
+  V as DeleteModal
 };

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as c, s as e } from "../../react.esm-CX1WJ2Pp.js";
-import { DeleteModal as b } from "./DeleteModal.js";
-import { d as B, t as a, a as o, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-B("DeleteModal Test", () => {
-  a("should render the DeleteModal properly", () => {
+import { DeleteModal as a } from "./DeleteModal.js";
+import { d, t as b, a as o, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+d("DeleteModal Test", () => {
+  b("should render the DeleteModal properly", () => {
     c(
       /* @__PURE__ */ n(
-        b,
+        a,
         {
           icon: "block",
           open: !0,
@@ -22,10 +22,10 @@ B("DeleteModal Test", () => {
         }
       )
     ), t(e.getByText("DELETE")).toBeInTheDocument(), t(e.getByTestId("block")).toBeInTheDocument(), t(e.getByText("block 1")).toBeInTheDocument(), t(e.getByText("block 2")).toBeInTheDocument(), t(e.getByText("block 3")).toBeInTheDocument(), t(e.getByText("Remove")).toBeInTheDocument(), t(e.getByText("Cancel")).toBeInTheDocument(), t(e.queryByText("block cant be deleted")).not.toBeInTheDocument();
-  }), a("should render the DeleteModal properly when isDeletePossible = false", () => {
+  }), b("should render the DeleteModal properly when isDeletePossible = false", () => {
     c(
       /* @__PURE__ */ n(
-        b,
+        a,
         {
           icon: "block",
           open: !0,
@@ -41,11 +41,11 @@ B("DeleteModal Test", () => {
         }
       )
     ), t(e.getByText("DELETE")).toBeInTheDocument(), t(e.getByTestId("block")).toBeInTheDocument(), t(e.queryByText("block 1")).not.toBeInTheDocument(), t(e.queryByText("block 2")).not.toBeInTheDocument(), t(e.queryByText("block 3")).not.toBeInTheDocument(), t(e.getByText("Remove")).toBeInTheDocument(), t(e.getByText("Remove").parentElement).toBeDisabled(), t(e.getByText("Cancel")).toBeInTheDocument(), t(e.queryByText("block cant be deleted")).toBeInTheDocument();
-  }), a("should call setOpen with false when clicking on cancel button", () => {
+  }), b("should call setOpen with false when clicking on cancel button", () => {
     const l = o.fn();
     c(
       /* @__PURE__ */ n(
-        b,
+        a,
         {
           icon: "block",
           open: !0,
@@ -61,11 +61,11 @@ B("DeleteModal Test", () => {
         }
       )
     ), e.getByText("Cancel").click(), t(l).toHaveBeenCalledWith(!1);
-  }), a("should call onDelete when clicking on delete button", () => {
+  }), b("should call onDelete when clicking on delete button", () => {
     const l = o.fn();
     c(
       /* @__PURE__ */ n(
-        b,
+        a,
         {
           icon: "block",
           open: !0,
@@ -81,5 +81,29 @@ B("DeleteModal Test", () => {
         }
       )
     ), e.getByText("Remove").click(), t(l).toHaveBeenCalled();
+  }), b("render DeleteModal with OfflineView", () => {
+    const l = o.fn();
+    c(
+      /* @__PURE__ */ n(
+        a,
+        {
+          icon: "block",
+          open: !0,
+          setOpen: o.fn(),
+          onDelete: l,
+          title: "DELETE",
+          confirmButtonLabel: "Remove",
+          cancelButtonLabel: "Cancel",
+          deleteHeader: "Delete my block",
+          impossibleDeleteHeader: "block cant be deleted",
+          deleteBody: ["block 1", "block 2", "block 3"],
+          isDeletePossible: !0,
+          isOnline: !1,
+          offlineViewProps: {
+            "data-testid": "offline-test"
+          }
+        }
+      )
+    ), e.getByText("Remove").click(), t(l).not.toHaveBeenCalled(), t(e.getByTestId("offline-test")).toBeInTheDocument();
   });
 });

package/dist/components/GenericTable/GenericTable.d.ts

@@ -60,6 +60,8 @@ import { TableLayoutProps } from '../../types/GenericTable';
  * @param tableActionPosition position of the table actions, can be 'start' or 'end'
  * @param tableElevationLevel elevation level of the table
  * @param tableLayout layout of the table, can be 'standard' or 'flex'
+ * @param isOnline Whether the user is online; shows OfflineView when false.
+ * @param offlineViewProps Props forwarded to OfflineView when offline.
  * @returns a table based on a given type and data
  */
-export declare const GenericTable: <T>({ data, hiddenColumns, order, cellTemplates, tableActions, noContentText, headerTranslation, pagination, getRowActions, customColumnWidth, title, cardTitleColumn, cardSubTitleColumn, pageTranslation, pageOfTranslation, rowsPerPageTranslation, tableActionPosition, tableElevationLevel, tableLayout, }: TableLayoutProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const GenericTable: <T>({ data, hiddenColumns, order, cellTemplates, tableActions, noContentText, headerTranslation, pagination, getRowActions, customColumnWidth, title, cardTitleColumn, cardSubTitleColumn, pageTranslation, pageOfTranslation, rowsPerPageTranslation, tableActionPosition, tableElevationLevel, tableLayout, isOnline, offlineViewProps, }: TableLayoutProps<T>) => import("react/jsx-runtime").JSX.Element;