@hortiview/shared-components 2.3.0 → 2.4.0

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;