@hortiview/shared-components 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.10.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.9.0...v1.10.0) (2025-05-26)
+
+### Features
+
+* add hint prop to BaseView and update story ([d466795](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d4667958fe9739be4a9db3e249e31cbbc8387946))
+* provide close button for alert banner ([52958aa](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/52958aa7f3bbfb3beab3fbf97147f81b236edafb))
+
+### Styles
+
+* fix vertical divider in BaseView ([8b82d3a](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8b82d3a0a19e215fe92ee46eeb83714a2e5df4e7))
+
 ## [1.9.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.8.1...v1.9.0) (2025-05-23)
 
 ### Features

package/dist/assets/AlertBanner.css

@@ -1 +1 @@
-._messageContainer_1seos_1{border-radius:.25rem;padding:.5rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_1seos_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_1seos_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_1seos_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_1seos_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}
+._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}

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._divider_dw2rc_1{margin:0 2rem}._maxWidth_dw2rc_5{max-width:55vw}._desktopList_dw2rc_9{width:30%}._mobileList_dw2rc_13{width:100%}._desktopDetail_dw2rc_17{width:70%}._mobileDetail_dw2rc_21{width:100%}
+._parentGroup_w7vsz_1{align-items:stretch}._divider_w7vsz_5{margin:0 1.5rem;align-self:stretch}._maxWidth_w7vsz_10{max-width:55vw}._desktopList_w7vsz_14{width:30%;align-self:stretch}._mobileList_w7vsz_19{width:100%}._desktopDetail_w7vsz_23{width:70%;align-self:stretch}._mobileDetail_w7vsz_28{width:100%}

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

@@ -2,8 +2,15 @@ type AlertBannerProps = {
     text: string | JSX.Element;
     color?: 'danger' | 'info' | 'success' | 'warning';
     isOpen?: boolean;
-    action?: JSX.Element;
     isBold?: boolean;
+    /**
+     * if defined, the close button will be displayed
+     */
+    onClose?: () => void;
+    /**
+     * @deprecated will be removed in the next major version - please use onClose if you need a close button
+     */
+    action?: JSX.Element;
 };
-export declare const AlertBanner: ({ text, color, isOpen, action, isBold, }: AlertBannerProps) => import("react/jsx-runtime").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,34 +1,24 @@
-import { jsx as e, Fragment as c, jsxs as d } from "react/jsx-runtime";
+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 { b as m } from "../../index.es-CF_xy2ns.js";
-import { u as _ } from "../../useBreakpoints-MzTZ0tCT.js";
-import '../../assets/AlertBanner.css';const g = "_messageContainer_1seos_1", p = "_info_1seos_9", f = "_danger_1seos_14", u = "_success_1seos_19", y = "_warning_1seos_24", n = {
-  messageContainer: g,
-  info: p,
-  danger: f,
-  success: u,
-  warning: y
+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
 }, C = ({
   text: s,
   color: r = "info",
-  isOpen: o = !0,
-  action: i,
-  isBold: t = !0
-}) => {
-  const { isDesktop: a } = _();
-  return o ? /* @__PURE__ */ e("div", { "data-testid": "alert-banner", className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ d(
-    l,
-    {
-      direction: a ? "horizontal" : "vertical",
-      primaryAlign: "space-between",
-      secondaryAlign: "center",
-      children: [
-        typeof s == "string" ? /* @__PURE__ */ e(m, { bold: t, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
-        i
-      ]
-    }
-  ) }) : /* @__PURE__ */ e(c, {});
-};
+  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, {});
 export {
   C as AlertBanner
 };

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

@@ -1,32 +1,32 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-CX1WJ2Pp.js";
-import { a } from "../../useBreakpoints-MzTZ0tCT.js";
+import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
 import { AlertBanner as n } from "./AlertBanner.js";
-import { d as p, b as c, v as l, t as r, g as o } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as p, b as c, v as l, t as r, g as a } from "../../vi.CjhMlMwf-BCJNwXvu.js";
 p("AlertBanner Test", () => {
   c(() => {
-    l.spyOn(a, "useBreakpoints").mockReturnValue({
+    l.spyOn(o, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
       isDesktop: !0,
       isDesktopNavbar: !0
     });
   }), r("render AlertBanner with text", () => {
-    t(/* @__PURE__ */ e(n, { text: "Test" })), o(s.getByText("Test")).toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: "Test" })), a(s.getByText("Test")).toBeInTheDocument();
   }), r("render AlertBanner with element", () => {
-    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), o(s.getByText("Element")).toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), a(s.getByText("Element")).toBeInTheDocument();
   }), r("renders AlertBanner with vertical style (flex-direction: column) when screen is small", () => {
-    l.spyOn(a, "useBreakpoints").mockReturnValue({
+    l.spyOn(o, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
       isDesktop: !1,
       isDesktopNavbar: !1
     }), t(/* @__PURE__ */ e(n, { text: "Test" }));
     const i = s.getByText("Test").closest(".lmnt.lmnt-group");
-    o(i).toHaveStyle(
-      "display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px;"
+    a(i).toHaveStyle(
+      "display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px;"
     );
   }), r("renders nothing when isOpen is false", () => {
-    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), o(s.queryByText("Test")).not.toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), a(s.queryByText("Test")).not.toBeInTheDocument();
   });
 });

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

@@ -22,6 +22,10 @@ type BaseViewProps = {
      * action to be displayed in the headings ActionButton
      */
     action?: JSX.Element;
+    /**
+     * hint to be displayed below the heading
+     */
+    hint?: JSX.Element;
     /**
      * isSorted is true if the list should be sorted, @default true
      */
@@ -58,5 +62,5 @@ type BaseViewProps = {
 /**
  * `BaseView` is a layout component that displays a main (a list) and a detail section.
  */
-export declare const BaseView: ({ action, heading, 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, routerLinkElement, searchPlaceholder, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BaseView/BaseView.js

@@ -1,77 +1,89 @@
-import { jsx as e, Fragment as x, jsxs as s } from "react/jsx-runtime";
+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 d } from "react";
+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 { u as A } from "../../useBreakpoints-MzTZ0tCT.js";
-import '../../assets/BaseView.css';const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9", G = "_mobileList_dw2rc_13", H = "_desktopDetail_dw2rc_17", I = "_mobileDetail_dw2rc_21", o = {
+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: G,
-  desktopDetail: H,
-  mobileDetail: I
+  mobileList: H,
+  desktopDetail: I,
+  mobileDetail: $
 }, P = ({
-  action: l,
   heading: c,
-  elements: a,
-  emptyText: m,
-  hasSearch: p = !0,
+  action: m = /* @__PURE__ */ i(d, {}),
+  hint: v = /* @__PURE__ */ i(d, {}),
+  elements: n,
+  emptyText: p,
+  hasSearch: _ = !0,
   isSorted: h = !0,
-  className: _,
-  withAvatar: v = !1,
-  listMaxHeight: f = "calc(100vh - 200px)",
-  pathname: n,
-  routerLinkElement: w,
-  searchPlaceholder: b
+  className: f,
+  withAvatar: b = !1,
+  listMaxHeight: w = "calc(100vh - 200px)",
+  pathname: l,
+  routerLinkElement: D,
+  searchPlaceholder: g
 }) => {
-  const { isDesktopNavbar: i } = A(), t = d(() => a.find((L) => L.route === n), [n, a]), D = d(() => t?.component ?? (i ? /* @__PURE__ */ e(W, { subtitle: m }) : /* @__PURE__ */ e(x, {})), [t, i, m]), g = d(() => i ? !0 : !t, [t, i]), k = d(() => i ? !0 : t, [t, i]);
-  return /* @__PURE__ */ s(r, { "data-testid": "base-view-container", className: _ ?? "", gap: "none", fullWidth: !0, children: [
-    g && /* @__PURE__ */ e(r, { gap: "none", className: i ? o.desktopList : o.mobileList, children: /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, gap: i ? "standard" : "dense", children: [
-      c && /* @__PURE__ */ e(u, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: l }),
-      /* @__PURE__ */ e(
-        B,
-        {
-          elements: a,
-          hasSearch: p,
-          maxHeight: f,
-          isSorted: h,
-          pathname: n,
-          routerLinkElement: w,
-          searchPlaceholder: b
-        }
-      )
-    ] }) }),
-    k && /* @__PURE__ */ s(
-      r,
-      {
-        "data-testid": "details",
-        gap: "none",
-        className: i ? o.desktopDetail : o.mobileDetail,
-        children: [
-          i && /* @__PURE__ */ e(N, { className: o.divider, height: "100%" }),
-          /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
-            /* @__PURE__ */ e(
-              u,
-              {
-                className: o.maxWidth,
-                heading: t?.detailTitle ?? t?.title ?? "",
-                level: 4,
-                icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
-                marginBottom: 0,
-                invisibleButton: t?.detailAction === void 0,
-                withAvatar: v,
-                children: t?.detailAction ?? l
-              }
-            ),
-            D
-          ] })
-        ]
-      }
-    )
-  ] });
+  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]);
+  return /* @__PURE__ */ s(
+    r,
+    {
+      "data-testid": "base-view-container",
+      className: `${o.parentGroup} ${f ?? ""}`,
+      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,
+          /* @__PURE__ */ i(
+            B,
+            {
+              elements: n,
+              hasSearch: _,
+              maxHeight: w,
+              isSorted: h,
+              pathname: l,
+              routerLinkElement: D,
+              searchPlaceholder: g
+            }
+          )
+        ] }) }),
+        x && /* @__PURE__ */ s(
+          r,
+          {
+            "data-testid": "details",
+            gap: "none",
+            className: e ? o.desktopDetail : o.mobileDetail,
+            children: [
+              e && /* @__PURE__ */ i(N, { className: o.divider, height: "100%" }),
+              /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
+                /* @__PURE__ */ i(
+                  u,
+                  {
+                    className: o.maxWidth,
+                    heading: t?.detailTitle ?? t?.title ?? "",
+                    level: 4,
+                    icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
+                    marginBottom: 0,
+                    invisibleButton: t?.detailAction === void 0,
+                    withAvatar: b,
+                    children: t?.detailAction ?? m
+                  }
+                ),
+                k
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   P as BaseView

package/dist/components/Filter/Filter.js

@@ -6,8 +6,8 @@ import { I as W } from "../../index.es-0lQcz8m1.js";
 import { S as j } from "../../index.es-8GOVkuo-.js";
 import { useState as v } from "react";
 import '../../assets/main.css';import '../../assets/Filter.css';/* empty css                  */
-import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
 import { Iconify as z } from "../Iconify/Iconify.js";
+import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";
 import { SearchBar as G } from "../SearchBar/SearchBar.js";

package/dist/components/GenericTable/GenericTable.js

@@ -22,8 +22,8 @@ import { M as bi, a as wi } from "../../component-neHBNHRu.js";
 import { c as Ga } from "../../component-DsB0poTj.js";
 import { a as Cl } from "../../util-DA21pZXj.js";
 import '../../assets/main.css';import '../../assets/GenericTable.css';/* empty css                  */
-import { u as Sl } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../isEmpty-B4GG2s-V.js";
+import { u as Sl } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../uniqueId-NU3-C36A.js";
 import "react-hook-form";

package/dist/components/ModulePadding/ModulePadding.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { P as r } from "../../index.es-D-CKRzIB.js";
 import '../../assets/main.css';/* empty css                  */
-import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import "react";
 import "../../isEmpty-B4GG2s-V.js";
+import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";
 import "../../uniqueId-NU3-C36A.js";

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