@hortiview/shared-components 2.12.2 → 2.14.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [2.14.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.13.0...v2.14.0) (2026-02-10)
+
+### Features
+
+* add isAllowed prop to baseView elements to remove them from list when user is not allowed to access them ([ac7449e](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/ac7449e5ae0e39302f48e9178d72ee0dab725544))
+* add isAllowed prop to contextMenu to remove items from menu when user is not allowed to trigger the action ([b071931](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/b0719310a495f68adfef9424572efa467aa519a1))
+
+### Bug Fixes
+
+* removed max width from base view header ([259c732](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/259c7321406cd47e5ca19e2f8bee7ed9600740ac))
+
+### Code Refactoring
+
+* add permission handling to BaseView and ContextMenu stories ([26b4ae5](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/26b4ae503a76c33ad57e683b5861eb2a95fa3cd6))
+* useIsAllowed hook to check multiple entities for permissions ([f168ef5](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f168ef56c58e8cbc536a9a7451019b5c262266e1))
+
+## [2.13.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.12.2...v2.13.0) (2026-02-06)
+
+### Features
+
+* add isDeletePending prop to DeleteModal for loading state ([d513159](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d51315909b7de18462ca79da88fd36260f621780))
+
 ## [2.12.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.12.1...v2.12.2) (2026-02-03)
 
 ### Code Refactoring

package/README.md

@@ -205,6 +205,12 @@ const actions = [
 
 A modal to confirm a deletion.
 
+It provides a loading state for the delete button to prevent multiple deletion attempts in a row. In this case, the button is disabled and a spinner is shown in the button.
+
+If a deletion is not possible, the button is also disabled and the specified `impossibleDeleteHeader` is shown.
+
+The button is also disabled when the user is offline, indicated by the `isOnline` prop. In this case, the [OfflineView](#offlineview) is shown.
+
 ```jsx
 import { DeleteModal } from '@hortiview/shared-components';
 
@@ -222,9 +228,11 @@ const onDelete = () => {
   confirmButtonLabel={'Remove'}
   cancelButtonLabel={'Cancel'}
   deleteHeader={'Delete my block'}
-  impossibleDeleteHeader={'block cant be deleted'}
+  impossibleDeleteHeader={'Block cannot be deleted'}
   deleteBody={['block 1', 'block 2', 'block 3']}
   isDeletePossible
+  isDeletePending={isDeleteRequestPending}
+  isOnline={isOnline}
 />;
 ```
 

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._fullHeight_1a5ww_1{height:100%}._fullWidth_1a5ww_5{width:100%}._maxWidth_1a5ww_9{max-width:55vw;background-color:var(--lmnt-theme-background)}._list_1a5ww_14{box-shadow:0 8px 24px #959da533;background-color:var(--lmnt-theme-background);border-radius:.5rem;overflow-y:auto;width:100%;height:100%}._desktopList_1a5ww_23{width:30%;align-self:stretch}._noRoundedCorners_1a5ww_28 [class*="lmnt mdc-list-item"]{border-radius:0rem!important}._detail_1a5ww_32{height:100%;box-shadow:0 8px 24px #959da533;border-radius:.5rem;background-color:var(--lmnt-theme-background);width:100%}._desktopDetail_1a5ww_40{width:70%;overflow-y:auto;scrollbar-width:thin}
+._fullHeight_71rfc_1{height:100%}._fullWidth_71rfc_5{width:100%}._maxWidth_71rfc_9{background-color:var(--lmnt-theme-background)}._list_71rfc_13{box-shadow:0 8px 24px #959da533;background-color:var(--lmnt-theme-background);border-radius:.5rem;overflow-y:auto;width:100%;height:100%}._desktopList_71rfc_22{width:30%;align-self:stretch}._noRoundedCorners_71rfc_27 [class*="lmnt mdc-list-item"]{border-radius:0rem!important}._detail_71rfc_31{height:100%;box-shadow:0 8px 24px #959da533;border-radius:.5rem;background-color:var(--lmnt-theme-background);width:100%}._desktopDetail_71rfc_39{width:70%;overflow-y:auto;scrollbar-width:thin}

package/dist/components/Allowed/Allowed.d.ts

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
-import { HVPermissions } from '../../types/Permission';
+import { IsAllowedProps } from '../PermissionChecks/PermissionService';
 
 type AllowedProps = {
-    neededPermissions: HVPermissions[];
-    entityId: string | undefined;
+    neededPermissions: IsAllowedProps['neededPermissions'];
+    entityIds: IsAllowedProps['entityIds'];
     disclaimer?: boolean;
     disclaimerText?: string;
 };
@@ -11,11 +11,11 @@ type AllowedProps = {
  * A component wrapper which takes permissions and an entity id (as a fallback the activeOrganization id is used) the permission is for.
  * Returns the children if the user has the permission for the entity, nothing otherwise (or an optional disclaimer)
  * @param children - the children to return if allowed to see it
- * @param entityId - the entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmId)
+ * @param entityIds - the entity ids, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmId)
  * @param neededPermissions - the permissions needed to see the children
  * @param disclaimer - if true a disclaimer is shown, otherwise not. (default: false)
  * @param disclaimerText - the text to show in the disclaimer (default: 'You are not allowed to see the content of this section.')
  * @returns
  */
-export declare const Allowed: ({ children, neededPermissions, entityId, disclaimer, disclaimerText, }: PropsWithChildren<AllowedProps>) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | null | undefined;
+export declare const Allowed: ({ children, neededPermissions, entityIds, disclaimer, disclaimerText, }: PropsWithChildren<AllowedProps>) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | null | undefined;
 export {};

package/dist/components/Allowed/Allowed.js

@@ -4,10 +4,10 @@ import { useIsAllowed as n } from "../PermissionChecks/PermissionService.js";
 const d = ({
   children: o,
   neededPermissions: e,
-  entityId: t,
+  entityIds: t,
   disclaimer: r = !1,
   disclaimerText: l = "You are not allowed to see the content of this section."
-}) => n()(e, t) ? o : r ? /* @__PURE__ */ s(i, { text: l }) : null;
+}) => n()({ neededPermissions: e, entityIds: t }) ? o : r ? /* @__PURE__ */ s(i, { text: l }) : null;
 export {
   d as Allowed
 };

package/dist/components/Allowed/Allowed.test.js

@@ -8,7 +8,7 @@ l("Test Allowed", () => {
   d("should return the children if allowed to see them", () => {
     const r = /* @__PURE__ */ e("div", { children: "Allowed to see children" });
     s(
-      /* @__PURE__ */ e(i, { neededPermissions: [o.CurrentUserRead], entityId: "General", children: r }),
+      /* @__PURE__ */ e(i, { neededPermissions: [o.CurrentUserRead], entityIds: "General", children: r }),
       {
         userPermissions: {
           General: [o.CurrentUserRead]
@@ -18,7 +18,7 @@ l("Test Allowed", () => {
   }), d("should return empty wrapper when not allowed to see children", () => {
     const r = /* @__PURE__ */ e("div", { children: "Allowed to see children" });
     s(
-      /* @__PURE__ */ e(i, { neededPermissions: [o.CurrentUserRead], entityId: "General", children: r }),
+      /* @__PURE__ */ e(i, { neededPermissions: [o.CurrentUserRead], entityIds: "General", children: r }),
       {
         userPermissions: {
           General: []
@@ -33,7 +33,7 @@ l("Test Allowed", () => {
         {
           disclaimer: !0,
           neededPermissions: [o.CurrentUserRead],
-          entityId: "General",
+          entityIds: "General",
           children: r
         }
       ),

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

@@ -1,5 +1,5 @@
 import { ButtonProps } from '@element-public/react-button';
-import { HVPermissions } from '../../types/Permission';
+import { IsAllowedProps } from '../PermissionChecks/PermissionService';
 
 export type AllowedButtonProps = Omit<ButtonProps, 'buttonSize' | 'variant' | 'type' | 'label'> & {
     /**
@@ -19,7 +19,7 @@ export type AllowedButtonProps = Omit<ButtonProps, 'buttonSize' | 'variant' | 't
     /**
      * The entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmLocationId).
      */
-    entityId?: string;
+    entityIds: IsAllowedProps['entityIds'];
     /**
      * Id used for linking the button to a form.
      */
@@ -36,7 +36,7 @@ export type AllowedButtonProps = Omit<ButtonProps, 'buttonSize' | 'variant' | 't
     /**
      * The permissions needed to enable the button. If the array is empty, the button is always enabled.
      */
-    permissions: HVPermissions[];
+    permissions: IsAllowedProps['neededPermissions'];
     /**
      * Changes the the size of the button.
      * Default: 'medium'

package/dist/components/AllowedButton/AllowedButton.js

@@ -10,7 +10,7 @@ const c = ({
   size: l = "medium",
   isLoading: i = !1,
   ...t
-}) => /* @__PURE__ */ e(s, { neededPermissions: t.permissions, entityId: t.entityId, children: /* @__PURE__ */ e(
+}) => /* @__PURE__ */ e(s, { neededPermissions: t.permissions, entityIds: t.entityIds, children: /* @__PURE__ */ e(
   r,
   {
     buttonSize: l,

package/dist/components/AllowedButton/AllowedButton.test.js

@@ -1,10 +1,10 @@
-import { jsx as s } from "react/jsx-runtime";
-import { s as t, f as u } from "../../react.esm-Bm0cAgpZ.js";
+import { jsx as o } from "react/jsx-runtime";
+import { s as e, f as u } from "../../react.esm-Bm0cAgpZ.js";
 import { renderWithPermissions as n } from "../../test-utils.js";
 import { HVMainPermissions as i } from "../../types/Permission.js";
 import { AllowedButton as d } from "./AllowedButton.js";
 import { u as b } from "../../useBreakpoints-MzTZ0tCT.js";
-import { v as l, d as m, b as c, t as r, g as e } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+import { v as l, d as m, b as c, t as r, g as t } from "../../vi.bdSIJ99Y-B308Q-4w.js";
 l.mock("../../hooks/useBreakpoints", () => ({
   useBreakpoints: l.fn()
 }));
@@ -18,63 +18,63 @@ m("AllowedButton Test", () => {
     });
   }), r("renders button with no permissions required", () => {
     n(
-      /* @__PURE__ */ s(d, { "data-testid": "test", label: "Add", permissions: [], entityId: void 0 })
-    ), e(t.getByText("Add")).toBeInTheDocument();
+      /* @__PURE__ */ o(d, { "data-testid": "test", label: "Add", permissions: [], entityIds: "General" })
+    ), t(e.getByText("Add")).toBeInTheDocument();
   }), r("renders outlined button variant", () => {
     n(
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         d,
         {
           "data-testid": "regular-outlined-button",
           label: "Add",
           variant: "outlined",
           permissions: [],
-          entityId: void 0
+          entityIds: "General"
         }
       )
     );
-    const o = t.getAllByRole("button")[0];
-    e(o).toHaveClass("mdc-button--outlined"), e(t.getByTestId("allowed-button-regular-outlined-button")).toBeInTheDocument();
+    const s = e.getAllByRole("button")[0];
+    t(s).toHaveClass("mdc-button--outlined"), t(e.getByTestId("allowed-button-regular-outlined-button")).toBeInTheDocument();
   }), r("renders full-width button", () => {
     n(
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         d,
         {
           "data-testid": "regular-button",
           label: "Add",
           fullWidth: !0,
           permissions: [],
-          entityId: void 0
+          entityIds: "General"
         }
       )
     );
-    const o = t.getAllByRole("button")[0];
-    e(o).toHaveClass("lmnt-button--full-width"), e(t.getByTestId("allowed-button-regular-button")).toBeInTheDocument();
+    const s = e.getAllByRole("button")[0];
+    t(s).toHaveClass("lmnt-button--full-width"), t(e.getByTestId("allowed-button-regular-button")).toBeInTheDocument();
   }), r("calls onClick when clicked", () => {
-    const o = l.fn();
+    const s = l.fn();
     n(
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         d,
         {
           "data-testid": "test-onclick-button",
           label: "Add",
-          onClick: o,
+          onClick: s,
           permissions: [],
-          entityId: void 0
+          entityIds: "General"
         }
       )
     );
-    const a = t.getAllByRole("button")[0];
-    u.click(a), e(o).toHaveBeenCalled(), e(t.getByTestId("allowed-button-test-onclick-button")).toBeInTheDocument();
+    const a = e.getAllByRole("button")[0];
+    u.click(a), t(s).toHaveBeenCalled(), t(e.getByTestId("allowed-button-test-onclick-button")).toBeInTheDocument();
   }), r("renders disabled button when prop is used", () => {
     n(
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         d,
         {
           "data-testid": "disabled-button",
           label: "Add",
           permissions: [i.SuperUser],
-          entityId: "farm-123",
+          entityIds: "farm-123",
           disabled: !0
         }
       ),
@@ -83,18 +83,18 @@ m("AllowedButton Test", () => {
           "farm-123": [i.SuperUser]
         }
       }
-    ), e(t.getByText("Add")).toBeInTheDocument(), e(t.getByTestId("allowed-button-disabled-button")).toBeInTheDocument();
-    const o = t.getAllByRole("button")[0];
-    e(o).toHaveAttribute("disabled");
+    ), t(e.getByText("Add")).toBeInTheDocument(), t(e.getByTestId("allowed-button-disabled-button")).toBeInTheDocument();
+    const s = e.getAllByRole("button")[0];
+    t(s).toHaveAttribute("disabled");
   }), r("hides button when permission is missing", () => {
     n(
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         d,
         {
           "data-testid": "missing",
           label: "Add",
           permissions: [i.SuperUser],
-          entityId: "farm-123"
+          entityIds: "farm-123"
         }
       ),
       {
@@ -102,16 +102,16 @@ m("AllowedButton Test", () => {
           "farm-123": [i.FarmsUpdate, i.FarmsRead]
         }
       }
-    ), e(t.queryByText("Add")).not.toBeInTheDocument(), e(t.queryByTestId("allowed-button-missing")).not.toBeInTheDocument();
+    ), t(e.queryByText("Add")).not.toBeInTheDocument(), t(e.queryByTestId("allowed-button-missing")).not.toBeInTheDocument();
   }), r("renders button when permission exists", () => {
     n(
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         d,
         {
           "data-testid": "enabled",
           label: "Add",
           permissions: [i.SuperUser],
-          entityId: "farm-123"
+          entityIds: "farm-123"
         }
       ),
       {
@@ -119,8 +119,8 @@ m("AllowedButton Test", () => {
           "farm-123": [i.SuperUser]
         }
       }
-    ), e(t.getByText("Add")).toBeInTheDocument(), e(t.getByTestId("allowed-button-enabled")).toBeInTheDocument();
-    const o = t.getAllByRole("button")[0];
-    e(o).not.toHaveAttribute("disabled");
+    ), t(e.getByText("Add")).toBeInTheDocument(), t(e.getByTestId("allowed-button-enabled")).toBeInTheDocument();
+    const s = e.getAllByRole("button")[0];
+    t(s).not.toHaveAttribute("disabled");
   });
 });

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

@@ -1,5 +1,5 @@
 import { IconButtonProps } from '@element-public/react-icon-button';
-import { HVPermissions } from '../../types/Permission';
+import { IsAllowedProps } from '../PermissionChecks/PermissionService';
 
 export type AllowedIconButtonProps = Omit<IconButtonProps, 'variant' | 'iconType' | 'iconSize'> & {
     /**
@@ -9,7 +9,7 @@ export type AllowedIconButtonProps = Omit<IconButtonProps, 'variant' | 'iconType
     /**
      * The entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmLocationId).
      */
-    entityId?: string;
+    entityIds: IsAllowedProps['entityIds'];
     /**
      * Id used for linking the button to a form.
      */
@@ -28,7 +28,7 @@ export type AllowedIconButtonProps = Omit<IconButtonProps, 'variant' | 'iconType
     /**
      * The permissions needed to enable the button. If the array is empty, the button is always enabled.
      */
-    permissions: HVPermissions[];
+    permissions: IsAllowedProps['neededPermissions'];
     /**
      * Changes the the size of the icon button.
      * Default: 'medium'

package/dist/components/AllowedIconButton/AllowedIconButton.js

@@ -7,7 +7,7 @@ const f = ({
   iconType: d = "filled",
   size: n = "medium",
   ...t
-}) => /* @__PURE__ */ i(l, { neededPermissions: t.permissions, entityId: t.entityId, children: /* @__PURE__ */ i(
+}) => /* @__PURE__ */ i(l, { neededPermissions: t.permissions, entityIds: t.entityIds, children: /* @__PURE__ */ i(
   m,
   {
     "data-testid": `allowed-icon-button-${o}`,

package/dist/components/AllowedIconButton/AllowedIconButton.test.js

@@ -4,19 +4,19 @@ import { renderWithPermissions as i } from "../../test-utils.js";
 import { HVMainPermissions as n } from "../../types/Permission.js";
 import { AllowedIconButton as r } from "./AllowedIconButton.js";
 import { u as c } from "../../useBreakpoints-MzTZ0tCT.js";
-import { v as a, d as m, b, t as d, g as e } from "../../vi.bdSIJ99Y-B308Q-4w.js";
-a.mock("../../hooks/useBreakpoints", () => ({
-  useBreakpoints: a.fn()
+import { v as d, d as m, b, t as a, g as e } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+d.mock("../../hooks/useBreakpoints", () => ({
+  useBreakpoints: d.fn()
 }));
 m("AllowedIconButton Test", () => {
   b(() => {
-    a.mocked(c).mockReturnValue({
+    d.mocked(c).mockReturnValue({
       isDesktop: !0,
       isMobile: !1,
       isTablet: !1,
       isDesktopNavbar: !0
     });
-  }), d("renders icon button with no permissions required", () => {
+  }), a("renders icon button with no permissions required", () => {
     i(
       /* @__PURE__ */ s(
         r,
@@ -24,13 +24,13 @@ m("AllowedIconButton Test", () => {
           "data-testid": "icon-button",
           icon: "add",
           permissions: [],
-          entityId: void 0
+          entityIds: "General"
         }
       )
     );
     const o = t.getAllByRole("button")[0];
     e(o).toHaveClass("lmnt-icon-button"), e(t.getByTestId("allowed-icon-button-icon-button")).toBeInTheDocument();
-  }), d("renders secondary variant icon button", () => {
+  }), a("renders secondary variant icon button", () => {
     i(
       /* @__PURE__ */ s(
         r,
@@ -39,14 +39,14 @@ m("AllowedIconButton Test", () => {
           icon: "add",
           variant: "filled-secondary",
           permissions: [],
-          entityId: void 0
+          entityIds: "General"
         }
       )
     );
     const o = t.getAllByRole("button")[0];
     e(o).toHaveClass("lmnt-icon-button--fill-secondary"), e(t.getByTestId("allowed-icon-button-secondary-button")).toBeInTheDocument();
-  }), d("calls onClick when clicked", () => {
-    const o = a.fn();
+  }), a("calls onClick when clicked", () => {
+    const o = d.fn();
     i(
       /* @__PURE__ */ s(
         r,
@@ -55,13 +55,13 @@ m("AllowedIconButton Test", () => {
           icon: "add",
           onClick: o,
           permissions: [],
-          entityId: void 0
+          entityIds: "General"
         }
       )
     );
     const l = t.getAllByRole("button")[0];
     u.click(l), e(o).toHaveBeenCalled(), e(t.getByTestId("allowed-icon-button-test-onclick-button")).toBeInTheDocument();
-  }), d("renders disabled icon button when prop is used", () => {
+  }), a("renders disabled icon button when prop is used", () => {
     i(
       /* @__PURE__ */ s(
         r,
@@ -69,7 +69,7 @@ m("AllowedIconButton Test", () => {
           "data-testid": "disabled-button",
           icon: "add",
           permissions: [n.SuperUser],
-          entityId: "farm-123",
+          entityIds: "farm-123",
           disabled: !0
         }
       ),
@@ -81,7 +81,7 @@ m("AllowedIconButton Test", () => {
     ), e(t.getByTestId("allowed-icon-button-disabled-button")).toBeInTheDocument();
     const o = t.getAllByRole("button")[0];
     e(o).toHaveAttribute("disabled");
-  }), d("hides icon button when permission is missing", () => {
+  }), a("hides icon button when permission is missing", () => {
     i(
       /* @__PURE__ */ s(
         r,
@@ -89,7 +89,7 @@ m("AllowedIconButton Test", () => {
           "data-testid": "missing",
           icon: "add",
           permissions: [n.SuperUser],
-          entityId: "farm-123"
+          entityIds: "farm-123"
         }
       ),
       {
@@ -98,7 +98,7 @@ m("AllowedIconButton Test", () => {
         }
       }
     ), e(t.queryByTestId("allowed-icon-button-missing")).not.toBeInTheDocument();
-  }), d("renders icon button when permission exists", () => {
+  }), a("renders icon button when permission exists", () => {
     i(
       /* @__PURE__ */ s(
         r,
@@ -106,7 +106,7 @@ m("AllowedIconButton Test", () => {
           "data-testid": "enabled",
           icon: "add",
           permissions: [n.SuperUser],
-          entityId: "farm-123"
+          entityIds: "farm-123"
         }
       ),
       {

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

@@ -17,6 +17,7 @@ type BaseViewProps = {
     emptyText: string;
     /**
      * pathname of the current route, use react-router to have the best experience (use useLocation and its pathname property)
+     * Should be used as a fallback if the user has no permissions to access any of the elements.
      */
     pathname: string;
     /**