@hortiview/shared-components 0.0.5404 → 0.0.5431

package/dist/assets/InfoGroup.css

@@ -1 +1 @@
-._container_7ypbj_1{width:100%;padding:0;@media only screen and (max-width: 838px){padding-top:.5rem}}._dividerContainer_7ypbj_10{width:100%;padding:0rem 1rem;margin:-1rem 0rem}._mainGroup_7ypbj_16{border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._row_7ypbj_21{min-height:5.5vh;padding:1rem}._row_7ypbj_21 input:not([type=checkbox]){@media only screen and (max-width: 839px){height:80%}}._row_7ypbj_21 input{padding-top:.2rem;border:none;color:#000!important;font-size:1.2rem;margin-top:1rem!important;@media only screen and (min-width: 839px){margin-top:1.5rem!important}}._row_7ypbj_21 label{font-size:1.2rem}:before{border:none!important}._component_7ypbj_51{width:95%!important;background-color:var(--lmnt-theme-on-primary);padding-left:.4rem!important;justify-content:flex-end;min-height:3rem;height:4vh;align-items:center;text-align:center;display:flex;border-radius:.5rem;box-shadow:0 .125rem .25rem #00000040;padding:1rem;margin-right:1rem;@media only screen and (max-width: 839px){margin-bottom:1.6rem!important;margin-left:1rem}}._component_7ypbj_51>div{display:flex;justify-content:space-between;width:100%}._component_7ypbj_51>div label{font-size:1rem;color:#00000061;font-weight:500}._componentContainer_7ypbj_84{width:100%!important;@media only screen and (max-width: 839px){margin-top:1rem;margin-bottom:-.5rem}}._field_7ypbj_92{width:100%;padding:0rem .5rem;align-self:center;display:flex;flex-direction:column}
+._container_egebs_1{width:100%;padding:0;@media only screen and (max-width: 838px){padding-top:.5rem}}._dividerContainer_egebs_10{width:100%;padding:0rem 1rem;margin:-1rem 0rem}._mainGroup_egebs_16{border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._row_egebs_21{min-height:5.5vh;padding:1rem}._row_egebs_21 input:not([type=checkbox]){@media only screen and (max-width: 839px){height:80%}}._row_egebs_21 input{padding-top:.2rem;border:none;color:#000!important;font-size:1.2rem;margin-top:1rem!important;@media only screen and (min-width: 839px){margin-top:1.5rem!important}}._row_egebs_21 label{font-size:1.2rem}._row_egebs_21 ._valueText_egebs_46{line-height:1rem}:before{border:none!important}._component_egebs_54{width:95%!important;background-color:var(--lmnt-theme-on-primary);padding-left:.4rem!important;justify-content:flex-end;min-height:3rem;height:4vh;align-items:center;text-align:center;display:flex;border-radius:.5rem;box-shadow:0 .125rem .25rem #00000040;padding:1rem;margin-right:1rem;@media only screen and (max-width: 839px){margin-bottom:1.6rem!important;margin-left:1rem}}._component_egebs_54>div{display:flex;justify-content:space-between;width:100%}._component_egebs_54>div label{font-size:1rem;color:#00000061;font-weight:500}._componentContainer_egebs_87{width:100%!important;@media only screen and (max-width: 839px){margin-top:1rem;margin-bottom:-.5rem}}._field_egebs_95{width:100%;padding:0rem .5rem;align-self:center;display:flex;flex-direction:column}

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,49 +1,51 @@
 import "../../assets/ContextMenu.css";
 import { jsx as n } from "react/jsx-runtime";
-import { Menu as a, IconButton as m, List as d, ListItem as f } from "@element/react-components";
-import { useState as p, useCallback as i, useEffect as C } from "react";
-const k = "_menu_1rfel_1", v = {
-  menu: k
+import { Menu as c, IconButton as a, List as d, ListItem as f } from "@element/react-components";
+import { useState as p, useCallback as s, useEffect as _ } from "react";
+import { uniqueId as y } from "lodash";
+const C = "_menu_1rfel_1", k = {
+  menu: C
 }, M = ({
   triggerOpen: o = null,
-  actions: c,
-  iconOrientation: r = "vertical"
+  actions: r,
+  iconOrientation: u = "vertical"
 }) => {
-  const [e, t] = p(!1), u = i(() => {
+  const [e, t] = p(!1), m = s(() => {
     t(!e);
-  }, [e]), l = i(() => {
+  }, [e]), l = s(() => {
     t(!1);
   }, []);
-  return C(() => {
+  return _(() => {
     t(o !== null ? o : !1);
   }, [o]), /* @__PURE__ */ n(
-    a,
+    c,
     {
-      className: v.menu,
+      className: k.menu,
       "data-testid": "selectionmenu",
       open: e,
       surfaceOnly: !0,
       hoistToBody: !0,
       onClose: l,
       trigger: /* @__PURE__ */ n(
-        m,
+        a,
         {
           variant: e ? "filled-primary" : void 0,
           "data-testid": "openButton",
-          icon: r === "vertical" ? "more_vert" : "more_horiz",
-          onClick: u
+          icon: u === "vertical" ? "more_vert" : "more_horiz",
+          onClick: m
         }
       ),
-      children: /* @__PURE__ */ n(d, { children: c.map((s) => /* @__PURE__ */ n(
+      children: /* @__PURE__ */ n(d, { children: r.map((i) => /* @__PURE__ */ n(
         f,
         {
-          ...s,
+          ...i,
           leadingBlockType: "icon",
           "data-testid": "listItemButton",
           onClick: () => {
-            s?.onClick?.(), l();
+            i?.onClick?.(), l();
           }
-        }
+        },
+        y(`LI_${i.primaryText?.toString()}_`)
       )) })
     },
     "selectionmenu"

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

@@ -1,22 +1,22 @@
-import { jsx as d } from "react/jsx-runtime";
-import { r, s as n, f as o, w as a } from "../../react.esm-C0LtovhP.js";
+import { jsx as m } from "react/jsx-runtime";
+import { r as d, s as n, f as o, w as a } from "../../react.esm-C0LtovhP.js";
 import { ContextMenu as u } from "./ContextMenu.js";
-import { v as m, d as C, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
-const T = m.fn(), l = m.fn(), i = m.fn(), p = [
+import { v as r, d as g, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+const T = r.fn(), l = r.fn(), i = r.fn(), p = [
   { primaryText: "Open", onClick: T, leadingBlock: "add" },
   { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline" },
   { primaryText: "Edit", onClick: l, leadingBlock: "edit" }
 ];
-C("ContextMenu Test", () => {
-  B("render ContextMenu and open it", () => {
-    r(/* @__PURE__ */ d(u, { actions: p }));
+g("ContextMenu Test", () => {
+  B("render contextMenu and close it", () => {
+    d(/* @__PURE__ */ m(u, { actions: p }));
+    const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
+    e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open")), o.click(c), a(() => e(t).not.toHaveClass("mdc-menu-surface--open"));
+  }), B("render ContextMenu and open it", async () => {
+    d(/* @__PURE__ */ m(u, { actions: p, triggerOpen: !0 }));
     const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
     e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open"));
     const s = n.getAllByTestId("listItemButton");
     e(s.length).toBe(3), e(n.getByText("Open")).toBeInTheDocument(), e(n.getByText("Delete")).toBeInTheDocument(), e(n.getByText("Edit")).toBeInTheDocument(), o.click(s[0]), e(T).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(l).not.toHaveBeenCalled(), o.click(s[1]), e(i).toHaveBeenCalled(), o.click(s[2]), e(l).toHaveBeenCalled();
-  }), B("render contextMenu and close it", () => {
-    r(/* @__PURE__ */ d(u, { actions: p }));
-    const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
-    e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open")), o.click(c), a(() => e(t).not.toHaveClass("mdc-menu-surface--open"));
   });
 });

package/dist/components/EmptyView/EmptyView.d.ts

@@ -1,14 +1,21 @@
-export declare const EmptyView: ({ title, subtitle, icon, }: {
+import { ReactNode } from 'react';
+type EmptyViewProps = {
     /**
-     * the title of the empty view
+     * The title of the empty view, optional, default is empty string
      */
-    title?: string | undefined;
+    title?: string;
     /**
-     * the subtitle of the empty view
+     * The subtitle of the empty view, optional, default is empty string
      */
-    subtitle?: string | undefined;
+    subtitle?: string;
     /**
-     * the icon of the empty view
+     * The icon of the empty view, optional, default is 'dashbord'
      */
-    icon?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+    icon?: string;
+    /**
+     * The action of the empty view, optional, default is empty
+     */
+    action?: ReactNode;
+};
+export declare const EmptyView: ({ title, subtitle, icon, action, }: EmptyViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EmptyView/EmptyView.js

@@ -1,10 +1,20 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Hero as i, HeroContent as n, Icon as h } from "@element/react-components";
-const c = ({
+import { Hero as n, HeroContent as h, Icon as l } from "@element/react-components";
+const d = ({
   title: e = "",
   subtitle: r = "",
-  icon: t = "dashbord"
-}) => /* @__PURE__ */ o(i, { style: { width: "100%", height: "25vh" }, children: /* @__PURE__ */ o(n, { logo: /* @__PURE__ */ o(h, { iconSize: "large", icon: t }), overline: "", subtitle: r, title: e }) });
+  icon: t = "dashbord",
+  action: i
+}) => /* @__PURE__ */ o(n, { style: { width: "100%", height: "25vh" }, children: /* @__PURE__ */ o(
+  h,
+  {
+    logo: /* @__PURE__ */ o(l, { iconSize: "large", icon: t }),
+    overline: "",
+    subtitle: r,
+    title: e,
+    heroBtn: i
+  }
+) });
 export {
-  c as EmptyView
+  d as EmptyView
 };

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,19 +1,24 @@
 import { jsx as o } from "react/jsx-runtime";
-import { r as s, s as d } from "../../react.esm-C0LtovhP.js";
-import { EmptyView as n } from "./EmptyView.js";
-import { d as i, t as r, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
-i("EmptyView", () => {
-  r("should render", () => {
-    s(/* @__PURE__ */ o(n, {})), e(d.getByText("dashbord")).toBeInTheDocument();
-  }), r("should render with custom icon", () => {
-    s(/* @__PURE__ */ o(n, { icon: "add" })), e(d.getByText("add")).toBeInTheDocument();
-  }), r("should render with title", () => {
-    s(/* @__PURE__ */ o(n, { icon: "add", title: "TITLE" }));
-    const t = d.getByText("TITLE");
-    e(t).toBeInTheDocument(), e(t).toHaveClass(/headline2/);
-  }), r("should render with subtitle", () => {
-    s(/* @__PURE__ */ o(n, { icon: "add", subtitle: "SUB_TITLE" }));
-    const t = d.getByText("SUB_TITLE");
-    e(t).toBeInTheDocument(), e(t).toHaveClass(/headline6/);
+import { r as n, s, w as r, f as c } from "../../react.esm-C0LtovhP.js";
+import { EmptyView as i } from "./EmptyView.js";
+import { d as T, t as a, g as t, v as l } from "../../vi.JYQecGiw-BbUbJcT8.js";
+T("EmptyView", () => {
+  a("should render", () => {
+    n(/* @__PURE__ */ o(i, {})), t(s.getByText("dashbord")).toBeInTheDocument();
+  }), a("should render with custom icon", () => {
+    n(/* @__PURE__ */ o(i, { icon: "add" })), t(s.getByText("add")).toBeInTheDocument();
+  }), a("should render with title", () => {
+    n(/* @__PURE__ */ o(i, { icon: "add", title: "TITLE" }));
+    const e = s.getByText("TITLE");
+    t(e).toBeInTheDocument(), t(e).toHaveClass(/headline2/);
+  }), a("should render with subtitle", () => {
+    n(/* @__PURE__ */ o(i, { icon: "add", subtitle: "SUB_TITLE" }));
+    const e = s.getByText("SUB_TITLE");
+    t(e).toBeInTheDocument(), t(e).toHaveClass(/headline6/);
+  }), a("should render with an action", async () => {
+    const e = l.fn();
+    n(/* @__PURE__ */ o(i, { icon: "add", action: /* @__PURE__ */ o("button", { onClick: e, children: "BUTTON" }) }));
+    const d = s.getByText("BUTTON");
+    t(d).toBeInTheDocument(), await r(() => c.click(d)), t(e).toHaveBeenCalledTimes(1);
   });
 });

package/dist/components/InfoGroup/InfoGroup.js

@@ -1,60 +1,72 @@
 import "../../assets/InfoGroup.css";
-import { jsxs as m, Fragment as s, jsx as t } from "react/jsx-runtime";
-import { Divider as p, Group as d, TypoCaption as u, TypoSubtitle as v } from "@element/react-components";
-import { a as h } from "../../useBreakpoint-DROHPVxO.js";
-import { VerticalDivider as _ } from "../VerticalDivider/VerticalDivider.js";
-const y = "_container_7ypbj_1", C = "_dividerContainer_7ypbj_10", b = "_mainGroup_7ypbj_16", j = "_row_7ypbj_21", N = "_component_7ypbj_51", g = "_componentContainer_7ypbj_84", w = "_field_7ypbj_92", e = {
-  container: y,
+import { jsxs as s, Fragment as l, jsx as n } from "react/jsx-runtime";
+import { Divider as p, Group as m, TypoCaption as u, TypoSubtitle as v } from "@element/react-components";
+import { a as _ } from "../../useBreakpoint-DROHPVxO.js";
+import { VerticalDivider as h } from "../VerticalDivider/VerticalDivider.js";
+const g = "_container_egebs_1", C = "_dividerContainer_egebs_10", b = "_mainGroup_egebs_16", y = "_row_egebs_21", w = "_valueText_egebs_46", G = "_component_egebs_54", N = "_componentContainer_egebs_87", x = "_field_egebs_95", t = {
+  container: g,
   dividerContainer: C,
   mainGroup: b,
-  row: j,
-  component: N,
-  componentContainer: g,
-  field: w
-}, S = ({ fields: n, bold: o }) => {
-  const a = n.length > 1 && Array.isArray(n.at(0)) ? n.map((c, r) => /* @__PURE__ */ m(s, { children: [
-    r != 0 && /* @__PURE__ */ t("div", { "data-testid": "test-divider", className: e.dividerContainer, children: /* @__PURE__ */ t(p, {}) }),
-    /* @__PURE__ */ t(l, { fields: c, bold: o }, `row${r}`)
-  ] })) : /* @__PURE__ */ t(l, { fields: n, bold: o });
-  return /* @__PURE__ */ t(d, { direction: "vertical", fullWidth: !0, className: e.mainGroup, children: a });
-}, l = ({ fields: n, bold: o }) => {
-  const { isLg: i } = h();
-  return /* @__PURE__ */ t(
-    d,
+  row: y,
+  valueText: w,
+  component: G,
+  componentContainer: N,
+  field: x
+}, I = ({ fields: e, bold: r }) => {
+  const a = e.length > 1 && Array.isArray(e.at(0)) ? e.map((c, o) => /* @__PURE__ */ s(l, { children: [
+    o != 0 && /* @__PURE__ */ n("div", { "data-testid": "test-divider", className: t.dividerContainer, children: /* @__PURE__ */ n(p, {}) }),
+    /* @__PURE__ */ n(d, { fields: c, bold: r }, `row${o}`)
+  ] })) : /* @__PURE__ */ n(d, { fields: e, bold: r });
+  return /* @__PURE__ */ n(m, { direction: "vertical", fullWidth: !0, className: t.mainGroup, children: a });
+}, d = ({ fields: e, bold: r }) => {
+  const { isLg: i } = _();
+  return /* @__PURE__ */ n(
+    m,
     {
       direction: i ? "horizontal" : "vertical",
-      className: e.row,
+      className: t.row,
       fullWidth: !0,
       primaryAlign: "center",
       secondaryAlign: "center",
-      children: n.map((a, c) => {
-        const r = i ? /* @__PURE__ */ t(_, { className: e.divider, height: "3rem" }) : /* @__PURE__ */ t(p, {});
-        return /* @__PURE__ */ m(s, { children: [
-          c != 0 && r,
-          /* @__PURE__ */ t(G, { field: a, bold: o })
+      children: e.map((a, c) => {
+        const o = i ? /* @__PURE__ */ n(h, { className: t.divider, height: "3rem" }) : /* @__PURE__ */ n(p, {});
+        return /* @__PURE__ */ s(l, { children: [
+          c != 0 && o,
+          /* @__PURE__ */ n(A, { field: a, bold: r })
         ] });
       })
     }
   );
-}, G = ({ field: n, bold: o }) => {
-  if (n.variant || (n.variant = "default"), !n.component || n.variant === "embedded")
-    return /* @__PURE__ */ m("div", { className: e.field, "data-testid": "infoGroupItem", children: [
-      /* @__PURE__ */ t(u, { className: e.label, themeColor: "text-hint-on-light", children: n.label }),
-      n.value ? /* @__PURE__ */ t(
-        v,
-        {
-          level: 1,
-          "data-testid": "infoGroupValue",
-          className: e.value,
-          themeColor: n.themeColor,
-          bold: o,
-          children: n.value
-        }
-      ) : /* @__PURE__ */ t(s, { children: n.component })
-    ] });
-  if (n.component && n.variant === "default")
-    return /* @__PURE__ */ t("div", { className: e.componentContainer, children: /* @__PURE__ */ t("div", { className: e.component, children: n.component }) });
+}, A = ({ field: e, bold: r }) => {
+  if (e.variant || (e.variant = "default"), !e.component || e.variant === "embedded")
+    return /* @__PURE__ */ s(
+      m,
+      {
+        "data-testid": "infoGroupItem",
+        direction: "vertical",
+        primaryAlign: "center",
+        secondaryAlign: "space-between",
+        fullWidth: !0,
+        gap: "dense",
+        children: [
+          /* @__PURE__ */ n(u, { className: t.label, themeColor: "text-hint-on-light", children: e.label }),
+          e.value ? /* @__PURE__ */ n(
+            v,
+            {
+              level: 1,
+              "data-testid": "infoGroupValue",
+              themeColor: e.themeColor,
+              bold: r,
+              className: t.valueText,
+              children: e.value
+            }
+          ) : /* @__PURE__ */ n(l, { children: e.component })
+        ]
+      }
+    );
+  if (e.component && e.variant === "default")
+    return /* @__PURE__ */ n("div", { className: t.componentContainer, children: /* @__PURE__ */ n("div", { className: t.component, children: e.component }) });
 };
 export {
-  S as InfoGroup
+  I as InfoGroup
 };

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