@hortiview/shared-components 2.18.1 → 2.19.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.19.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.18.1...v2.19.0) (2026-03-18)
+
+### Features
+
+* add loading state and custom spinner support to EmptyView component ([0bf67d8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0bf67d8b4c209a8a7248c68235faa20d9c9d6413))
+* add non-interactive prop to ListArea component and update styles ([7d93cca](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7d93cca72e59498b38f0f3b1b9512e463b5deb86))
+* add permission handling to row actions ([8d9a9b8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8d9a9b88b36ca94c885cbcb543ba4d6c44d50b2d))
+
+### Code Refactoring
+
+* allowedIconButtonProps to allow the usage of htmlButtonElement props like "type" ([3ff7b1e](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/3ff7b1e2c2ec685c36758069f6030e06c4d0348b))
+* update AllowedButtonProps to include HTML button element props ([0e019e5](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0e019e5ea019f860d6f667a9d0a3d9f12e9b5d8f))
+* update data handling in GenericTable and GenericTableService components ([0bdb591](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0bdb5911564efecc8f7861ec6206bdbf0faaf40b))
+* update LoadingSpinner component with new props and styles for centering ([1cde6e4](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1cde6e4a1e259f37ee37b867e35d6eac649fe56c))
+
 ## [2.18.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.18.0...v2.18.1) (2026-03-10)
 
 ### Bug Fixes

package/dist/ListAreaService-Y8wR14Xq.js

@@ -0,0 +1,126 @@
+import { jsx as r, jsxs as G } from "react/jsx-runtime";
+import { G as S } from "./index.es-Z0aF-7Cn.js";
+import { I as O } from "./index.es-DEBGoIKX.js";
+import { P as k } from "./index.es-DgncYOqO.js";
+import { e as $, c as w, T as A } from "./index.es-DUrjyxNI.js";
+import { c as j } from "./index-Df2FYN-K.js";
+import { Iconify as H } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as M } from "./enums/AvailableCustomIcons.js";
+import './assets/ListAreaService.css';const P = "_fullWidth_a185b_1", R = "_mainElevation_a185b_6", W = "_searchbar_a185b_13", L = "_roundedBottom_a185b_21", q = "_primaryText_a185b_26", z = "_list_a185b_30", D = "_listItem_a185b_41", F = "_isSelected_a185b_65", J = "_noGroupHeaderMargin_a185b_74", K = "_indentGroupedElement_a185b_78", Q = "_isNotSelected_a185b_82", U = "_iconColor_a185b_92", V = "_overlineTitle_a185b_96", X = "_noOverlineTitle_a185b_101", Y = "_truncate_a185b_105", Z = "_truncateOverlineText_a185b_116", ee = "_hasNoRoundedEdges_a185b_121", te = "_hideArrowIcon_a185b_125", t = {
+  fullWidth: P,
+  mainElevation: R,
+  searchbar: W,
+  roundedBottom: L,
+  primaryText: q,
+  list: z,
+  listItem: D,
+  isSelected: F,
+  noGroupHeaderMargin: J,
+  indentGroupedElement: K,
+  isNotSelected: Q,
+  iconColor: U,
+  overlineTitle: V,
+  noOverlineTitle: X,
+  truncate: Y,
+  truncateOverlineText: Z,
+  hasNoRoundedEdges: ee,
+  hideArrowIcon: te
+}, _e = (o, a, s, l) => {
+  const n = o.reduce((i, c) => {
+    const { groupName: e, groupComponent: _, ...d } = c;
+    return !e || typeof e != "string" || (i[e] || (i[e] = {
+      groupName: _ ?? /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r($, { children: e }) }),
+      id: e,
+      items: []
+    }), i[e].items = [
+      ...i[e].items,
+      b(d, a, s, l)
+    ]), i;
+  }, {});
+  return Object.values(n);
+}, ue = (o, a, s, l) => o.map((n) => b(n, a, s, l)), b = (o, a, s, l) => {
+  const {
+    id: n,
+    title: i,
+    subTitle: c,
+    route: e,
+    value: _,
+    noNavigation: d,
+    disabled: u,
+    icon: g,
+    iconType: v,
+    trailingIcon: h,
+    trailingIconType: y,
+    actionButton: f,
+    onClick: I,
+    customTitle: T,
+    listItemClassName: N,
+    overlineTitle: p,
+    "data-testid": x,
+    indentElement: E
+  } = o, m = a === e, C = j(
+    v !== "avatar" && t.listItem,
+    s,
+    N,
+    p ? t.overlineTitle : t.noOverlineTitle,
+    E && t.indentGroupedElement,
+    m ? t.isSelected : t.isNotSelected
+  );
+  return {
+    id: n,
+    key: n,
+    select: m,
+    primaryText: n,
+    secondaryText: /* @__PURE__ */ G(S, { direction: "vertical", gap: "none", children: [
+      T ?? /* @__PURE__ */ r(
+        w,
+        {
+          "data-testid": "title",
+          level: 1,
+          themeColor: m ? "primary" : void 0,
+          className: `${t.truncate} lmnt-theme-on-surface-active`,
+          children: i
+        }
+      ),
+      c && !T ? /* @__PURE__ */ r(
+        A,
+        {
+          "data-testid": "subtitle",
+          level: 2,
+          themeColor: m ? "primary" : void 0,
+          className: `${t.truncate} lmnt-theme-on-surface-inactive`,
+          children: c
+        }
+      ) : void 0
+    ] }),
+    overlineText: p ? /* @__PURE__ */ r(
+      "span",
+      {
+        "data-testid": "overline-title",
+        className: `${t.truncate} ${t.truncateOverlineText}`,
+        children: p
+      }
+    ) : void 0,
+    trailingBlock: f ?? h ?? /* @__PURE__ */ r(O, { icon: "arrow_right", className: t.iconColor }),
+    leadingBlock: oe(g),
+    value: _,
+    componentProps: {
+      id: n,
+      "data-testid": `${x ?? i}-list-item`,
+      key: n,
+      leadingBlockType: v ?? "icon",
+      trailingBlockType: y ?? "icon",
+      className: C,
+      onClick: (ne, B) => I?.(B),
+      tag: u || d ? void 0 : l ?? "a",
+      to: u || d ? void 0 : e,
+      disabled: u
+    }
+  };
+}, oe = (o) => typeof o == "string" && o in M ? /* @__PURE__ */ r(H, { icon: o }) : o;
+export {
+  ue as a,
+  _e as g,
+  b as m,
+  t as s
+};

package/dist/assets/ListAreaService.css

@@ -1 +1 @@
-._fullWidth_1abq6_1{width:100%;height:100%}._mainElevation_1abq6_6{background:var(--lmnt-theme-background);width:100%;height:100%}._searchbar_1abq6_13 div{border:none}._searchbar_1abq6_13 button{margin-right:.5rem}._roundedBottom_1abq6_21{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_1abq6_26 [class*=mdc-list-item__primary-text]{display:none!important}._list_1abq6_30{padding-top:0;padding-bottom:0;overflow-y:auto;scrollbar-width:thin}._list_1abq6_30 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._listItem_1abq6_41:hover{background-color:var(--lmnt-theme-surface-variant)}._listItem_1abq6_41 i:not(._trailingIcon_1abq6_45){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1abq6_41 [class^="lmnt mdc-list-item__end"] i{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1abq6_41:focus-within [class^="lmnt mdc-list-item__end"] i{color:var(--lmnt-theme-primary)!important}._listItem_1abq6_41 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._listItem_1abq6_41:focus [class^=mdc-list-item__start] i{color:var(--lmnt-theme-primary)!important}._listItem_1abq6_41._isSelected_1abq6_65 i,._listItem_1abq6_41[aria-selected=true] i{color:var(--lmnt-theme-primary)!important}._groupedListItem_1abq6_70{height:4.5rem!important}._noGroupHeaderMargin_1abq6_74 h3{margin:0}._indentGroupedElement_1abq6_78{padding-left:2.5rem!important}._isNotSelected_1abq6_82 [class*=mdc-list-item__ripple]:before{opacity:inherit!important;background-color:inherit!important}._isSelected_1abq6_65 [class*=mdc-list-item__ripple]:before{opacity:.2!important;background-color:var(--lmnt-theme-primary)!important}._iconColor_1abq6_92{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_1abq6_96 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}._noOverlineTitle_1abq6_101 [class*=mdc-list-item__secondary-text] [class*=lmnt-group]{margin-top:-.875rem}._truncate_1abq6_105{display:-webkit-box!important;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%;word-break:break-all}._truncateOverlineText_1abq6_116{margin-bottom:-1rem!important;margin-top:-1rem!important}._hasNoRoundedEdges_1abq6_121{border-radius:0rem!important}
+._fullWidth_a185b_1{width:100%;height:100%}._mainElevation_a185b_6{background:var(--lmnt-theme-background);width:100%;height:100%}._searchbar_a185b_13 div{border:none}._searchbar_a185b_13 button{margin-right:.5rem}._roundedBottom_a185b_21{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_a185b_26 [class*=mdc-list-item__primary-text]{display:none!important}._list_a185b_30{padding-top:0;padding-bottom:0;overflow-y:auto;scrollbar-width:thin}._list_a185b_30 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._listItem_a185b_41:hover{background-color:var(--lmnt-theme-surface-variant)}._listItem_a185b_41 i:not(._trailingIcon_a185b_45){color:var(--lmnt-theme-on-surface-inactive)}._listItem_a185b_41 [class^="lmnt mdc-list-item__end"] i{color:var(--lmnt-theme-on-surface-disabled)}._listItem_a185b_41:focus-within [class^="lmnt mdc-list-item__end"] i{color:var(--lmnt-theme-primary)!important}._listItem_a185b_41 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._listItem_a185b_41:focus [class^=mdc-list-item__start] i{color:var(--lmnt-theme-primary)!important}._listItem_a185b_41._isSelected_a185b_65 i,._listItem_a185b_41[aria-selected=true] i{color:var(--lmnt-theme-primary)!important}._groupedListItem_a185b_70{height:4.5rem!important}._noGroupHeaderMargin_a185b_74 h3{margin:0}._indentGroupedElement_a185b_78{padding-left:2.5rem!important}._isNotSelected_a185b_82 [class*=mdc-list-item__ripple]:before{opacity:inherit!important;background-color:inherit!important}._isSelected_a185b_65 [class*=mdc-list-item__ripple]:before{opacity:.2!important;background-color:var(--lmnt-theme-primary)!important}._iconColor_a185b_92{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_a185b_96 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}._noOverlineTitle_a185b_101 [class*=mdc-list-item__secondary-text] [class*=lmnt-group]{margin-top:-.875rem}._truncate_a185b_105{display:-webkit-box!important;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%;word-break:break-all}._truncateOverlineText_a185b_116{margin-bottom:-1rem!important;margin-top:-1rem!important}._hasNoRoundedEdges_a185b_121{border-radius:0rem!important}._hideArrowIcon_a185b_125 i{visibility:hidden}

package/dist/assets/LoadingSpinner.css

@@ -1 +1 @@
-._loadingSpinnerContainer_1f3ss_1{z-index:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lmnt-theme-on-surface-high)}
+._centered_1aq9c_1{width:100%;height:100%;display:grid;place-items:center}

package/dist/components/AllowedButton/AllowedButton.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from '@element-public/react-button';
 import { IsAllowedProps } from '../PermissionChecks/PermissionService';
 
-export type AllowedButtonProps = Omit<ButtonProps, 'buttonSize' | 'variant' | 'type' | 'label'> & {
+export type AllowedButtonProps = Omit<ButtonProps & React.HTMLProps<HTMLButtonElement>, 'buttonSize' | 'variant' | 'type' | 'label' | 'size'> & {
     /**
      * This applies the html button type (button, submit, reset) or the anchor media type when used with the href property.
      * Default: 'button'

package/dist/components/AllowedIconButton/AllowedIconButton.d.ts

@@ -1,7 +1,7 @@
 import { IconButtonProps } from '@element-public/react-icon-button';
 import { IsAllowedProps } from '../PermissionChecks/PermissionService';
 
-export type AllowedIconButtonProps = Omit<IconButtonProps, 'variant' | 'iconType' | 'iconSize'> & {
+export type AllowedIconButtonProps = Omit<IconButtonProps & React.HTMLProps<HTMLButtonElement>, 'variant' | 'iconType' | 'iconSize' | 'size'> & {
     /**
      * data-testid used for testing.
      */

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

@@ -33,6 +33,15 @@ type EmptyViewProps = {
      * The className of EmptyView
      */
     className?: string;
+    /**
+     * If true a loading spinner is shown instead of the empty view, default is false
+     */
+    isLoading?: boolean;
+    /**
+     * The spinner to be shown when isLoading is true,
+     * default is the LoadingSpinner component with spinnerOnly=true and size='sm'
+     */
+    loadingSpinner?: ReactNode;
 };
-export declare const EmptyView: ({ title, subtitle, height, icon, iconSize, action, className, }: EmptyViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyView: ({ title, subtitle, height, icon, iconSize, action, className, isLoading, loadingSpinner, }: EmptyViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EmptyView/EmptyView.js

@@ -1,45 +1,61 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { G as p } from "../../index.es-Z0aF-7Cn.js";
-import { a as o } from "../../index.es-DUrjyxNI.js";
-import { Iconify as d } from "../Iconify/Iconify.js";
-import { c as u } from "../../index-Df2FYN-K.js";
-import '../../assets/EmptyView.css';const y = "_emptyViewContainer_19inl_1", _ = "_full_19inl_7", f = "_medium_19inl_11", w = "_small_19inl_15", C = "_title_19inl_20", e = {
-  emptyViewContainer: y,
-  full: _,
-  medium: f,
-  small: w,
-  title: C
-}, A = ({
-  title: l,
-  subtitle: m,
-  height: t = "medium",
-  icon: n,
-  iconSize: r = "medium",
-  action: s,
-  className: a
-}) => /* @__PURE__ */ c(
-  p,
+import { jsx as t, jsxs as d, Fragment as u } from "react/jsx-runtime";
+import { G as y } from "../../index.es-Z0aF-7Cn.js";
+import { a as l } from "../../index.es-DUrjyxNI.js";
+import { c as _ } from "../../index-Df2FYN-K.js";
+import { Iconify as f } from "../Iconify/Iconify.js";
+import "react";
+import "../../react-tooltip.min-Dkz5ltCC.js";
+import "../../orderBy-Ce85KqD6.js";
+import "../../index-CuHybtft.js";
+import "../SharedComponentsPermissionProvider/PermissionContext.js";
+import "../../uniqueId-CJo-XRQb.js";
+import { LoadingSpinner as w } from "../LoadingSpinner/Default/LoadingSpinner.js";
+import "react-hook-form";
+import "../../get-CBFiuc3f.js";
+import "../../isArray-olhCpv2e.js";
+import "../../isString-BNdV0Jpg.js";
+import "../../omit-BWQrFyQ-.js";
+import "../../types/Time.js";
+import "../../react.esm-DF7i80eN.js";
+import '../../assets/EmptyView.css';const C = "_emptyViewContainer_19inl_1", V = "_full_19inl_7", x = "_medium_19inl_11", N = "_small_19inl_15", g = "_title_19inl_20", i = {
+  emptyViewContainer: C,
+  full: V,
+  medium: x,
+  small: N,
+  title: g
+}, H = ({
+  title: e,
+  subtitle: r,
+  height: m = "medium",
+  icon: o,
+  iconSize: n = "medium",
+  action: p,
+  className: s,
+  isLoading: a = !1,
+  loadingSpinner: c
+}) => /* @__PURE__ */ t(
+  y,
   {
     fullWidth: !0,
     direction: "vertical",
     secondaryAlign: "center",
     primaryAlign: "center",
     "data-testid": "empty-view-container",
-    className: u(
-      a,
-      e.emptyViewContainer,
-      t === "full" && e.full,
-      t === "medium" && e.medium,
-      t === "small" && e.small
+    className: _(
+      s,
+      i.emptyViewContainer,
+      m === "full" && i.full,
+      m === "medium" && i.medium,
+      m === "small" && i.small
     ),
-    children: [
-      n && /* @__PURE__ */ i(d, { icon: n, iconSize: r }),
-      l && /* @__PURE__ */ i(o, { type: "body1", className: e.title, children: l }),
-      m && /* @__PURE__ */ i(o, { type: "body1", className: e.title, children: m }),
-      s
-    ]
+    children: a ? c ?? /* @__PURE__ */ t(w, { spinnerOnly: !0, size: "sm" }) : /* @__PURE__ */ d(u, { children: [
+      o && /* @__PURE__ */ t(f, { icon: o, iconSize: n }),
+      e && /* @__PURE__ */ t(l, { type: "body1", className: i.title, children: e }),
+      r && /* @__PURE__ */ t(l, { type: "body1", className: i.title, children: r }),
+      p
+    ] })
   }
 );
 export {
-  A as EmptyView
+  H as EmptyView
 };

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

@@ -15,6 +15,9 @@ export declare const useGenerateColumns: <T>({ data, order, cellTemplates, heade
  * Adds row actions to the data for the table
  * @param data data to be used to generate the columns
  * @param getRowActions function that will be called to get the actions for a row to be displayed as actions in a context menu
+ *
+ * Note:
+ * If rowActions is undefined (e.g. missing permissions) the row item is returned without a contextMenu
  * @returns
  */
-export declare const useGenerateTableData: <T>({ data, getRowActions, }: TableLayoutProps<T>) => object[];
+export declare const useGenerateTableData: <T>({ data, getRowActions, }: TableLayoutProps<T>) => T[];

package/dist/components/GenericTable/GenericTableService.js

@@ -1,32 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useMemo as p } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import { useMemo as d } from "react";
 import { ContextMenu as l } from "../ContextMenu/ContextMenu.js";
 const P = ({
-  data: r = [],
+  data: n = [],
   order: e = [],
-  cellTemplates: n = void 0,
-  headerTranslation: t = (d) => d,
+  cellTemplates: r = void 0,
+  headerTranslation: t = (f) => f,
   getRowActions: c = void 0,
   customColumnWidth: o,
   cardTitleColumn: u,
   cardSubTitleColumn: s
-}) => p(() => {
-  if (r?.length === 0) return [];
-  const d = v(r[0], e).map((i) => {
-    const f = o ? o[i] : void 0;
+}) => d(() => {
+  if (n?.length === 0) return [];
+  const f = v(n[0], e).map((i) => {
+    const a = o ? o[i] : void 0;
     return {
       id: i,
       header: t(i),
       accessor: i,
-      cellTemplate: n ? n[i] : void 0,
-      cellProps: f ? { width: f } : void 0,
-      headerCellProps: f ? { width: f } : void 0,
+      cellTemplate: r ? r[i] : void 0,
+      cellProps: a ? { width: a } : void 0,
+      headerCellProps: a ? { width: a } : void 0,
       asCardTitle: i === u,
       asCardSubtitle: i === s
     };
   });
   return c ? [
-    ...d,
+    ...f,
     {
       id: "actions",
       header: " ",
@@ -34,10 +34,10 @@ const P = ({
       cellProps: { id: "actions" },
       headerCellProps: { id: "actions" }
     }
-  ] : d;
+  ] : f;
 }, [
-  r,
   n,
+  r,
   e,
   t,
   c,
@@ -45,18 +45,18 @@ const P = ({
   u,
   s
 ]), C = ({
-  data: r = [],
+  data: n = [],
   getRowActions: e = void 0
-}) => p(() => e ? r.map((n) => {
-  const t = /* @__PURE__ */ a(l, { actions: e(n), iconOrientation: "horizontal" });
-  return { ...n, actions: t };
-}) : r, [r, e]), v = (r, e) => {
-  if (!r) return [];
-  let n = Object.keys(r).map((t) => t);
-  return e?.length > 0 && (n = n.sort((t, c) => {
+}) => d(() => e ? n.map((r) => {
+  const t = e(r);
+  return !t || t.length === 0 ? r : { ...r, actions: /* @__PURE__ */ p(l, { actions: t, iconOrientation: "horizontal" }) };
+}) : n, [n, e]), v = (n, e) => {
+  if (!n) return [];
+  let r = Object.keys(n).map((t) => t);
+  return e?.length > 0 && (r = r.sort((t, c) => {
     const o = e.findIndex((s) => s === t), u = e.findIndex((s) => s === c);
     return o === -1 ? 1 : u === -1 ? -1 : o - u;
-  })), n;
+  })), r;
 };
 export {
   P as useGenerateColumns,

package/dist/components/ListArea/ListArea.d.ts

@@ -56,11 +56,15 @@ type ListAreaProps = {
      * @default undefined
      */
     routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    /**
+     * if true the list items will not have hover and active states and the cursor will be default, @default false
+     */
+    nonInteractive?: boolean;
 };
 /**
  * `ListArea` is a layout component that displays a list of items.
  * list elements act as router links to the corresponding route.
  * The list will be displayed in the desktop view or when no detail view is selected (in mobile view).
  */
-export declare const ListArea: ({ elements, pathname, isGrouped, hasSearch, searchPlaceholder, isIntegrated, isSorted, itemClassName, maxHeight, noElementsView, hasLastItemNoRoundedEdges, "data-testid": dataTestId, routerLinkElement, }: ListAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListArea: ({ elements, pathname, isGrouped, hasSearch, searchPlaceholder, isIntegrated, isSorted, itemClassName, maxHeight, noElementsView, hasLastItemNoRoundedEdges, "data-testid": dataTestId, nonInteractive, routerLinkElement, }: ListAreaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ListArea/ListArea.js

@@ -1,67 +1,70 @@
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { D as B } from "../../index.es-C27R5Xae.js";
-import { E as D } from "../../index.es-DhlgTSuU.js";
-import { L as j } from "../../index.es-Cg57snrN.js";
-import { c as h } from "../../index-Df2FYN-K.js";
-import { o as p } from "../../orderBy-Ce85KqD6.js";
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { D } from "../../index.es-C27R5Xae.js";
+import { E as j } from "../../index.es-DhlgTSuU.js";
+import { L as A } from "../../index.es-Cg57snrN.js";
+import { c as p } from "../../index-Df2FYN-K.js";
+import { o as w } from "../../orderBy-Ce85KqD6.js";
 import { useState as E, useMemo as v } from "react";
 import { SearchBar as I } from "../SearchBar/SearchBar.js";
-import { g as M, a as N, s as e } from "../../ListAreaService-DfxJ7jFs.js";
-const F = ({
-  elements: r,
+import { g as M, a as N, s as e } from "../../ListAreaService-Y8wR14Xq.js";
+const G = ({
+  elements: t,
   pathname: o,
   isGrouped: i = !1,
-  hasSearch: w = !1,
-  searchPlaceholder: L = "",
-  isIntegrated: g = !0,
+  hasSearch: L = !1,
+  searchPlaceholder: g = "",
+  isIntegrated: x = !0,
   isSorted: l = !0,
   itemClassName: c = "",
-  maxHeight: x = "100%",
-  noElementsView: T,
+  maxHeight: T = "100%",
+  noElementsView: y,
   hasLastItemNoRoundedEdges: m = !1,
-  "data-testid": y,
+  "data-testid": C,
+  nonInteractive: n = !1,
   routerLinkElement: d
 }) => {
-  const [t, C] = E(""), s = v(() => {
-    if (!t) return l ? p(r, "title") : r;
-    const n = r.filter((f) => f.title.toLowerCase().includes(t.toLowerCase()) || f.subTitle?.toLowerCase().includes(t.toLowerCase()) || f.overlineTitle?.toLowerCase().includes(t.toLowerCase()));
-    return l ? p(n, "title") : n;
-  }, [t, r, l]), b = v(
+  const [r, b] = E(""), s = v(() => {
+    if (!r) return l ? w(t, "title") : t;
+    const u = t.filter((f) => f.title.toLowerCase().includes(r.toLowerCase()) || f.subTitle?.toLowerCase().includes(r.toLowerCase()) || f.overlineTitle?.toLowerCase().includes(r.toLowerCase()));
+    return l ? w(u, "title") : u;
+  }, [r, t, l]), B = v(
     () => i ? M(s, o, c, d) : N(s, o, c, d),
     [s, o, c, i, d]
   );
   return /* @__PURE__ */ a(
-    D,
+    j,
     {
       "data-testid": "elevation",
-      elevation: g ? 0 : 1,
+      elevation: x ? 0 : 1,
       className: `${e.mainElevation}`,
-      children: /* @__PURE__ */ u("div", { className: h(e.fullWidth, e.noGroupHeaderMargin), children: [
-        w && r.length > 0 && /* @__PURE__ */ u("span", { "data-testid": "search-bar-container", children: [
+      children: /* @__PURE__ */ h("div", { className: p(e.fullWidth, e.noGroupHeaderMargin), children: [
+        L && t.length > 0 && /* @__PURE__ */ h("span", { "data-testid": "search-bar-container", children: [
           /* @__PURE__ */ a(
             I,
             {
-              searchTerm: t,
-              setSearchTerm: C,
+              searchTerm: r,
+              setSearchTerm: b,
               className: e.searchbar,
-              placeholder: L
+              placeholder: g
             }
           ),
-          /* @__PURE__ */ a(B, {})
+          /* @__PURE__ */ a(D, {})
         ] }),
-        s.length === 0 && T,
+        s.length === 0 && y,
         /* @__PURE__ */ a(
-          j,
+          A,
           {
-            "data-testid": y,
-            items: b,
-            className: h(
+            nonInteractive: n,
+            "data-testid": C,
+            items: B,
+            className: p(
               e.list,
               e.primaryText,
               !i && !m && e.roundedBottom,
-              m && e.hasNoRoundedEdges
+              m && e.hasNoRoundedEdges,
+              n && e.hideArrowIcon
             ),
-            style: { maxHeight: x },
+            style: { maxHeight: T },
             showDivider: !1
           }
         )
@@ -70,5 +73,5 @@ const F = ({
   );
 };
 export {
-  F as ListArea
+  G as ListArea
 };

package/dist/components/ListArea/ListAreaService.js

@@ -6,7 +6,7 @@ import "../../index.es-DUrjyxNI.js";
 import "../../index-Df2FYN-K.js";
 import "../Iconify/Iconify.js";
 import "../../enums/AvailableCustomIcons.js";
-import { g as d, a as I, m as L } from "../../ListAreaService-DfxJ7jFs.js";
+import { g as d, a as I, m as L } from "../../ListAreaService-Y8wR14Xq.js";
 export {
   d as getGroupedItems,
   I as getListedItems,

package/dist/components/LoadingSpinner/Default/LoadingSpinner.js

@@ -2,7 +2,7 @@ import { jsx as y, jsxs as Q } from "react/jsx-runtime";
 import { _ as X, a as Y, c as $, P as u } from "../../../index-Df2FYN-K.js";
 import { i as Z, _ as w, d as ee } from "../../../index.es-C6I3L4U4.js";
 import t, { forwardRef as re, useRef as H, useImperativeHandle as te, useEffect as T, useCallback as se, useState as ae, useMemo as ie } from "react";
-import { b as G, c as U } from "../../../tslib.es6-BDCynO9F.js";
+import { b as q, c as U } from "../../../tslib.es6-BDCynO9F.js";
 import { M as oe, a as ne } from "../../../component-By6nyiBU.js";
 import { G as ce } from "../../../index.es-Z0aF-7Cn.js";
 import { P as le } from "../../../index.es-DgncYOqO.js";
@@ -21,7 +21,7 @@ import '../../../assets/LoadingSpinner.css';var p = {
 var V = (
   /** @class */
   (function(s) {
-    G(e, s);
+    q(e, s);
     function e(r) {
       return s.call(this, U(U({}, e.defaultAdapter), r)) || this;
     }
@@ -85,7 +85,7 @@ var V = (
 var me = (
   /** @class */
   (function(s) {
-    G(e, s);
+    q(e, s);
     function e() {
       return s !== null && s.apply(this, arguments) || this;
     }
@@ -214,21 +214,21 @@ var me = (
   progress: 0,
   themeColor: "primary",
   variant: "indeterminate"
-}, fe = ["ariaLabel", "className", "open", "progress", "size", "indicatorSize", "themeColor", "variant"], h = he, P = /* @__PURE__ */ re(function(s, e) {
+}, fe = ["ariaLabel", "className", "open", "progress", "size", "indicatorSize", "themeColor", "variant"], h = he, W = /* @__PURE__ */ re(function(s, e) {
   var r, c = s.ariaLabel, a = c === void 0 ? h.ariaLabel : c, l = s.className, g = l === void 0 ? h.className : l, v = s.open, D = v === void 0 ? h.open : v, A = s.progress, d = A === void 0 ? h.progress : A;
   s.size;
-  var S = s.indicatorSize, W = S === void 0 ? h.indicatorSize : S, R = s.themeColor, k = R === void 0 ? h.themeColor : R, O = s.variant, E = O === void 0 ? h.variant : O, K = X(s, fe), L = H(), b = H();
+  var k = s.indicatorSize, P = k === void 0 ? h.indicatorSize : k, R = s.themeColor, E = R === void 0 ? h.themeColor : R, O = s.variant, b = O === void 0 ? h.variant : O, G = X(s, fe), L = H(), S = H();
   te(e, function() {
     return L.current;
   }, []), T(function() {
-    return b.current = me.attachTo(L.current), function() {
-      b.current.destroy();
+    return S.current = me.attachTo(L.current), function() {
+      S.current.destroy();
     };
   }, []), T(function() {
-    (E === "determinate" && d < 0 || d > 1) && Z("CircularProgress: `progress` must be between 0 and 1."), b.current.determinate = E === "determinate", b.current.progress = d;
-  }, [d, E]);
-  var q = function() {
-    switch (W) {
+    (b === "determinate" && d < 0 || d > 1) && Z("CircularProgress: `progress` must be between 0 and 1."), S.current.determinate = b === "determinate", S.current.progress = d;
+  }, [d, b]);
+  var K = function() {
+    switch (P) {
       case "xs":
         return {
           heightWidth: "16px",
@@ -302,7 +302,7 @@ var me = (
           halfStrokeDashoffset: "56.549"
         };
     }
-  }, o = q(), z = o.heightWidth, n = o.viewBox, i = o.cxCy, f = o.r, C = o.strokeWidth, B = o.strokeWidth80, _ = o.strokeDashArray, J = o.strokeDashoffset, x = o.halfStrokeDashoffset, N = se(function() {
+  }, o = K(), z = o.heightWidth, n = o.viewBox, i = o.cxCy, f = o.r, _ = o.strokeWidth, B = o.strokeWidth80, C = o.strokeDashArray, J = o.strokeDashoffset, x = o.halfStrokeDashoffset, N = se(function() {
     var I, F, j;
     return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left"
@@ -314,9 +314,9 @@ var me = (
       cx: i,
       cy: i,
       r: f,
-      strokeDasharray: _,
+      strokeDasharray: C,
       strokeDashoffset: x,
-      strokeWidth: C
+      strokeWidth: _
     }))), /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__gap-patch"
     }, /* @__PURE__ */ t.createElement("svg", {
@@ -327,7 +327,7 @@ var me = (
       cx: i,
       cy: i,
       r: f,
-      strokeDasharray: _,
+      strokeDasharray: C,
       strokeDashoffset: x,
       strokeWidth: B
     }))), /* @__PURE__ */ t.createElement("div", {
@@ -340,14 +340,14 @@ var me = (
       cx: i,
       cy: i,
       r: f,
-      strokeDasharray: _,
+      strokeDasharray: C,
       strokeDashoffset: x,
-      strokeWidth: C
+      strokeWidth: _
     }))));
-  }, [i, x, f, _, C, B, n]), M = k === "two-color" || k === "two-color-variant";
+  }, [i, x, f, C, _, B, n]), M = E === "two-color" || E === "two-color-variant";
   return /* @__PURE__ */ t.createElement("div", Y({
     ref: L,
-    className: $("lmnt", "mdc-circular-progress", E === "indeterminate" && "mdc-circular-progress--indeterminate", !D && "mdc-circular-progress--closed", k && "lmnt-circular-progress--".concat(k), g),
+    className: $("lmnt", "mdc-circular-progress", b === "indeterminate" && "mdc-circular-progress--indeterminate", !D && "mdc-circular-progress--closed", E && "lmnt-circular-progress--".concat(E), g),
     style: {
       width: z,
       height: z
@@ -357,7 +357,7 @@ var me = (
     "aria-valuemin": "0",
     "aria-valuemax": "1",
     "aria-valuenow": d
-  }, K), /* @__PURE__ */ t.createElement("div", {
+  }, G), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__determinate-container"
   }, /* @__PURE__ */ t.createElement("svg", {
     className: "mdc-circular-progress__determinate-circle-graphic",
@@ -368,15 +368,15 @@ var me = (
     cx: i,
     cy: i,
     r: f,
-    strokeWidth: C
+    strokeWidth: _
   }), /* @__PURE__ */ t.createElement("circle", {
     className: "mdc-circular-progress__determinate-circle",
     cx: i,
     cy: i,
     r: f,
-    strokeDasharray: _,
+    strokeDasharray: C,
     strokeDashoffset: J,
-    strokeWidth: C
+    strokeWidth: _
   }))), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__indeterminate-container"
   }, /* @__PURE__ */ t.createElement("div", {
@@ -389,10 +389,10 @@ var me = (
     className: "mdc-circular-progress__spinner-layer mdc-circular-progress__color-4"
   }, N()))));
 });
-P.displayName = "CircularProgress";
-P.propTypes = pe;
-const ge = "_loadingSpinnerContainer_1f3ss_1", ve = {
-  loadingSpinnerContainer: ge
+W.displayName = "CircularProgress";
+W.propTypes = pe;
+const ge = "_centered_1aq9c_1", ve = {
+  centered: ge
 }, Ne = ({
   size: s,
   center: e = !1,
@@ -406,14 +406,14 @@ const ge = "_loadingSpinnerContainer_1f3ss_1", ve = {
 }) => {
   const [D, A] = ae(0);
   T(() => {
-    const S = setInterval(() => {
-      A((W) => W + 1);
+    const k = setInterval(() => {
+      A((P) => P + 1);
     }, 1e3);
-    return () => clearInterval(S);
+    return () => clearInterval(k);
   }, []);
   const d = ie(() => g && D > v ? g : r, [g, v, r, D]);
   return s === "big" ? /* @__PURE__ */ y(ue, { text: d }) : l ? /* @__PURE__ */ y(
-    P,
+    W,
     {
       "data-testid": "loading-spinner",
       themeColor: a,
@@ -422,19 +422,21 @@ const ge = "_loadingSpinnerContainer_1f3ss_1", ve = {
   ) : /* @__PURE__ */ y(
     le,
     {
+      "data-testid": "loading-spinner-padding",
       variant: "standard",
-      style: { textAlign: "center" },
-      className: e ? ve.loadingSpinnerContainer : "",
+      className: e ? ve.centered : "",
       children: /* @__PURE__ */ Q(
         ce,
         {
+          "data-testid": "loading-spinner-group",
+          fullWidth: !0,
           direction: c === "right" ? "horizontal" : "vertical",
           gap: "dense",
           primaryAlign: "center",
           secondaryAlign: "center",
           children: [
             /* @__PURE__ */ y(
-              P,
+              W,
               {
                 "data-testid": "loading-spinner",
                 themeColor: a,

package/dist/types/GenericTable.d.ts

@@ -1,5 +1,5 @@
-import { ListItemProps } from '@element-public/react-list';
 import { OfflineViewProps } from '../components/OfflineView/OfflineView';
+import { ActionProps } from '../main';
 
 /**
  * Props for the GenericTable component {@link GenericTable}
@@ -64,9 +64,9 @@ export type TableLayoutProps<T> = {
     /**
      * function that will be called to get the actions for a row to be displayed as actions in a context menu
      * @param row the row (element) that will be used in each action
-     * @returns an array of ListItemProps that will be shown as actions for the row
+     * @returns an array of ActionProps that will be shown as actions for the row
      */
-    getRowActions?: (row: T) => ListItemProps[];
+    getRowActions?: (row: T) => ActionProps[] | undefined;
     /**
      * custom column width that is specified by a column key. Note, can be a unit-less number (in pixels) or a percentage "10%"
      * @example customColumnWidth={{ id: '15%', actionColumn: '10%' }}

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

package/dist/ListAreaService-DfxJ7jFs.js

@@ -1,125 +0,0 @@
-import { jsx as a, jsxs as B } from "react/jsx-runtime";
-import { G } from "./index.es-Z0aF-7Cn.js";
-import { I as S } from "./index.es-DEBGoIKX.js";
-import { P as O } from "./index.es-DgncYOqO.js";
-import { e as k, c as $, T as j } from "./index.es-DUrjyxNI.js";
-import { c as H } from "./index-Df2FYN-K.js";
-import { Iconify as M } from "./components/Iconify/Iconify.js";
-import { AvailableCustomIcons as P } from "./enums/AvailableCustomIcons.js";
-import './assets/ListAreaService.css';const R = "_fullWidth_1abq6_1", W = "_mainElevation_1abq6_6", L = "_searchbar_1abq6_13", w = "_roundedBottom_1abq6_21", A = "_primaryText_1abq6_26", z = "_list_1abq6_30", D = "_listItem_1abq6_41", F = "_isSelected_1abq6_65", J = "_noGroupHeaderMargin_1abq6_74", K = "_indentGroupedElement_1abq6_78", Q = "_isNotSelected_1abq6_82", U = "_iconColor_1abq6_92", V = "_overlineTitle_1abq6_96", X = "_noOverlineTitle_1abq6_101", Y = "_truncate_1abq6_105", Z = "_truncateOverlineText_1abq6_116", ee = "_hasNoRoundedEdges_1abq6_121", t = {
-  fullWidth: R,
-  mainElevation: W,
-  searchbar: L,
-  roundedBottom: w,
-  primaryText: A,
-  list: z,
-  listItem: D,
-  isSelected: F,
-  noGroupHeaderMargin: J,
-  indentGroupedElement: K,
-  isNotSelected: Q,
-  iconColor: U,
-  overlineTitle: V,
-  noOverlineTitle: X,
-  truncate: Y,
-  truncateOverlineText: Z,
-  hasNoRoundedEdges: ee
-}, me = (o, r, s, l) => {
-  const n = o.reduce((i, c) => {
-    const { groupName: e, groupComponent: _, ...d } = c;
-    return !e || typeof e != "string" || (i[e] || (i[e] = {
-      groupName: _ ?? /* @__PURE__ */ a(O, { children: /* @__PURE__ */ a(k, { children: e }) }),
-      id: e,
-      items: []
-    }), i[e].items = [
-      ...i[e].items,
-      g(d, r, s, l)
-    ]), i;
-  }, {});
-  return Object.values(n);
-}, _e = (o, r, s, l) => o.map((n) => g(n, r, s, l)), g = (o, r, s, l) => {
-  const {
-    id: n,
-    title: i,
-    subTitle: c,
-    route: e,
-    value: _,
-    noNavigation: d,
-    disabled: u,
-    icon: b,
-    iconType: v,
-    trailingIcon: y,
-    trailingIconType: h,
-    actionButton: f,
-    onClick: q,
-    customTitle: T,
-    listItemClassName: N,
-    overlineTitle: p,
-    "data-testid": I,
-    indentElement: x
-  } = o, m = r === e, E = H(
-    v !== "avatar" && t.listItem,
-    s,
-    N,
-    p ? t.overlineTitle : t.noOverlineTitle,
-    x && t.indentGroupedElement,
-    m ? t.isSelected : t.isNotSelected
-  );
-  return {
-    id: n,
-    key: n,
-    select: m,
-    primaryText: n,
-    secondaryText: /* @__PURE__ */ B(G, { direction: "vertical", gap: "none", children: [
-      T ?? /* @__PURE__ */ a(
-        $,
-        {
-          "data-testid": "title",
-          level: 1,
-          themeColor: m ? "primary" : void 0,
-          className: `${t.truncate} lmnt-theme-on-surface-active`,
-          children: i
-        }
-      ),
-      c && !T ? /* @__PURE__ */ a(
-        j,
-        {
-          "data-testid": "subtitle",
-          level: 2,
-          themeColor: m ? "primary" : void 0,
-          className: `${t.truncate} lmnt-theme-on-surface-inactive`,
-          children: c
-        }
-      ) : void 0
-    ] }),
-    overlineText: p ? /* @__PURE__ */ a(
-      "span",
-      {
-        "data-testid": "overline-title",
-        className: `${t.truncate} ${t.truncateOverlineText}`,
-        children: p
-      }
-    ) : void 0,
-    trailingBlock: f ?? y ?? /* @__PURE__ */ a(S, { icon: "arrow_right", className: t.iconColor }),
-    leadingBlock: te(b),
-    value: _,
-    componentProps: {
-      id: n,
-      "data-testid": `${I ?? i}-list-item`,
-      key: n,
-      leadingBlockType: v ?? "icon",
-      trailingBlockType: h ?? "icon",
-      className: E,
-      onClick: (oe, C) => q?.(C),
-      tag: u || d ? void 0 : l ?? "a",
-      to: u || d ? void 0 : e,
-      disabled: u
-    }
-  };
-}, te = (o) => typeof o == "string" && o in P ? /* @__PURE__ */ a(M, { icon: o }) : o;
-export {
-  _e as a,
-  me as g,
-  g as m,
-  t as s
-};