@hortiview/shared-components 2.11.2 → 2.12.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [2.12.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.12.0...v2.12.1) (2026-02-03)
+
+### Code Refactoring
+
+* update HVMainPermissions ([84cf791](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/84cf791abc08176505ae51d176a178a4e6a95c83))
+
+## [2.12.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.11.2...v2.12.0) (2026-02-02)
+
+### Features
+
+* add a permission context and provider to be able to access permissions inside of shared components ([7462a97](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7462a970c02a715eb8edb526d5afc4c50f829de3))
+* add loadingspinner to AllowedButton ([a999ba5](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a999ba53f1ae6806ec6a39b1443dc419fc0c2587))
+* add permission types and enum from main repo ([f3da7fb](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f3da7fb003158daf2e0901fe37cb90af5982af1d))
+* add permissionService ([fabef22](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/fabef220f5f85773bc4044b069c8241b42987fad))
+* add storybooks for newly introduced components ([7d79ea3](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7d79ea3286f3775fe5ee30a432de7abf777c8995))
+* addnew permission components to readMe + export new components from main ([1fbe431](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1fbe4316e5e424b9c2bbcfc27e3ae03e427b1e31))
+* introduce button components that are permission-gated ([c811d31](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/c811d3198bb72f32007db3a37c8eb822b341f1f9))
+* introduce get permissionFromModulePermissionToken ([523ff1b](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/523ff1b8d9c08af701a0318efb0e260cbf436431))
+
 ## [2.11.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.11.1...v2.11.2) (2026-01-27)
 
 ### Bug Fixes

package/README.md

@@ -54,6 +54,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [OfflineView](#offlineview)
 1. [OnboardingBanner](#onboardingbanner)
 1. [OverflowTooltip](#overflowtooltip)
+1. [Permissions](#permissions)
 1. [SafeForm](#safeform)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
@@ -932,6 +933,137 @@ const longText =
 </OverflowTooltip>;
 ```
 
+### Permissions
+
+This shared library provides different hooks and component that can be used to check wether a user is allowed to proceed with an action, view a component or not.
+
+In order for this component to correctly determine whether a user has the appropriate permissions, a basic setup must be implemented. The following section explains how:
+
+#### Setup
+
+#### 1. Wrap your app with the SharedComponentsPermissionProvider
+
+In your main application file (e.g., `App.tsx` or `main.tsx`), wrap your app with the `PermissionProvider`:
+
+```tsx
+import { SharedComponentsPermissionProvider } from '@hortiview/shared-components';
+
+function App() {
+  // Get these values from your store or state management
+  // In this example `Zustand` stores are used
+  const userPermissions = useClaimsIdentityStore(state => state.userPermissions);
+  const activeOrganizationId = useActiveOrganizationStore(state => state.activeOrganization?.id);
+
+  return (
+    <SharedComponentsPermissionProvider
+      userPermissions={userPermissions}
+      activeOrganizationId={activeOrganizationId}
+    >
+      <YourAppComponents />
+    </SharedComponentsPermissionProvider>
+  );
+}
+```
+
+#### 2.1 Use the Allowed component anywhere in your app
+
+Once the provider is set up, you can use `<Allowed />` anywhere in your component tree without passing props. The wrapped component is conditionally rendered depending on the user permissions:
+
+```tsx
+import { Allowed } from '@hortiview/shared-components';
+
+function MyComponent() {
+  return (
+    <Allowed neededPermissions={["organization-read", "organization-edit"]} entityId={organizationId}>
+      <OrganizationSettings />
+    <Allowed/>
+  );
+}
+```
+
+#### 2.2 Use the useIsAllowed-hook anywhere in your app
+
+The `useIsAllowed`-hook works similar to the `<Allowed />` component. Instead of being used as a wrapper it returns a boolean. That value can be used to conditionally render components or control application logic based on user permissions.
+
+```tsx
+import { useIsAllowed } from '@hortiview/shared-components';
+
+function MyComponent() {
+  const isAllowed = useIsAllowed();
+
+  // Check if user has permission to edit members for the current organization
+  const canEditMembers = isAllowed(['member-edit', 'member-create'], orgId);
+
+  return <MembersList isDisabled={!canEditMembers} />;
+}
+```
+
+#### 2.3 Use the AllowedButton or AllowedIconButton anywhere in your app
+
+Once the provider is set up, you can use `AllowedButton` and `AllowedIconButton` anywhere in your component tree without passing props. Both buttons expect a permissions array and call the `useIsAllowed` under the hood.
+
+> **Note:** Both components will automatically hide (return `null`) if the user doesn't have the required permissions. The button will only render when the user is authorized.
+
+**AllowedButton Example:**
+
+```jsx
+import { AllowedButton, Permission } from '@hortiview/shared-components';
+
+function FarmActions({ farmId }) {
+  return (
+    <div>
+      <AllowedButton
+        data-testid='edit-season-button'
+        label='Edit Season'
+        permissions={['season-edit']}
+        entityId={organizationId}
+        buttonVariant='filled'
+        onClick={() => handleEditSeason(seasonId)}
+      />
+
+      <AllowedButton
+        data-testid='delete-season-button'
+        label='Delete Season'
+        permissions={['season-delete']}
+        entityId={organizationId}
+        buttonVariant='danger'
+        onClick={() => handleDeleteSeason(seasonId)}
+      />
+    </div>
+  );
+}
+```
+
+**AllowedIconButton Example:**
+
+```jsx
+import { AllowedIconButton, Permission } from '@hortiview/shared-components';
+
+function BlockActions({ blockId, farmId }) {
+  return (
+    <div>
+      <AllowedIconButton
+        data-testid='edit-block-icon'
+        icon='edit'
+        permissions={['block-edit', 'block-create']}
+        entityId={farmId}
+        iconButtonVariant='filled-primary'
+        onClick={() => handleEditBlock(blockId)}
+      />
+
+      <AllowedIconButton
+        data-testid='delete-block-icon'
+        icon='delete'
+        permissions={['block-delete']}
+        entityId={farmId}
+        iconButtonVariant='filled-danger'
+        onClick={() => handleDeleteBlock(blockId)}
+      />
+    </div>
+  );
+}
+```
+
 ### SafeForm
 
 A wrapper around a form that prevents accidental submission when pressing Enter in input fields.
@@ -1018,10 +1150,10 @@ import { Select } from '@hortiview/shared-components';
 ### Stepper
 
 Provides a simple stepper component, which contains the step indicators, a title text and buttons to navigate forwards and backwards.
-The component is available in two types: 
+The component is available in two types:
 
-* 'default' (steps as dots and a centered step title below them)
-* 'description' (n/n numerical progress, description/title right of it)
+- 'default' (steps as dots and a centered step title below them)
+- 'description' (n/n numerical progress, description/title right of it)
 
 **Be aware that you need to control the Stepper flow by your own, like:**
 

package/dist/{AlertBanner-C6wpAQMj.js → AlertBanner-Ci-F-6S9.js}

@@ -1,7 +1,7 @@
 import { jsx as n, Fragment as i, jsxs as t } from "react/jsx-runtime";
-import { G as l } from "./index.es-C1SajYlm.js";
-import { I as _ } from "./index.es-DCYlADaN.js";
-import { T as m } from "./index.es-NEYPxnlS.js";
+import { G as l } from "./index.es-oxil0uFe.js";
+import { I as _ } from "./index.es-Dgxrk6xW.js";
+import { T as m } from "./index.es-SjZ_-d7U.js";
 import './assets/AlertBanner.css';const d = "_messageContainer_2hnjr_1", g = "_info_2hnjr_9", h = "_danger_2hnjr_14", f = "_success_2hnjr_19", p = "_warning_2hnjr_24", u = "_closeIcon_2hnjr_29", j = "_linkBanner_2hnjr_34", s = {
   messageContainer: d,
   info: g,

package/dist/{BigLoadingSpinner-CDbRVDNZ.js → BigLoadingSpinner-DGj9_Z5J.js}

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { T as r } from "./index.es-NEYPxnlS.js";
+import { T as r } from "./index.es-SjZ_-d7U.js";
 import { Iconify as d } from "./components/Iconify/Iconify.js";
 import './assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", s = "_bigLoadSpinnerCard_7dxo1_12", g = "_bigLoadSpinnerCardText_7dxo1_27", t = "_logo_7dxo1_33", o = {
   loadingBigOverlay: e,

package/dist/{GenericCard-Co9bGU19.js → GenericCard-CeqYrtLH.js}

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as d, Fragment as C } from "react/jsx-runtime";
-import { C as h, a as m, b as T, c as g, d as v } from "./index.es-DnEIFMjv.js";
-import { G as b, a as x, b as c } from "./index.es-BZ3r3ilq.js";
-import { d as f } from "./index.es-NEYPxnlS.js";
+import { C as h, a as m, b as T, c as g, d as v } from "./index.es-BPv5dCFQ.js";
+import { G as b, a as x, b as c } from "./index.es-CeQB6igi.js";
+import { d as f } from "./index.es-SjZ_-d7U.js";
 import { useMemo as w } from "react";
 import { OverflowTooltip as l } from "./components/OverflowTooltip/OverflowTooltip.js";
 import './assets/GenericCard.css';const u = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0_10", $ = "_row_ny9m0_14", G = "_font_ny9m0_18", k = "_fontHeader_ny9m0_23", H = "_title_ny9m0_27", S = "_emptyContainer_ny9m0_33", A = "_empty_ny9m0_33", n = {

package/dist/{ListAreaService-CGJm5I23.js → ListAreaService-Fsm3-gDM.js}

@@ -1,9 +1,9 @@
 import { jsx as a, jsxs as B } from "react/jsx-runtime";
-import { G } from "./index.es-C1SajYlm.js";
-import { I as S } from "./index.es-DCYlADaN.js";
-import { P as O } from "./index.es-CIsLNz4j.js";
-import { c as k, d as $, T as j } from "./index.es-NEYPxnlS.js";
-import { c as H } from "./index-_ck2BRrZ.js";
+import { G } from "./index.es-oxil0uFe.js";
+import { I as S } from "./index.es-Dgxrk6xW.js";
+import { P as O } from "./index.es-BanVdXEd.js";
+import { c as k, d as $, T as j } from "./index.es-SjZ_-d7U.js";
+import { c as H } from "./index-BcGujPyk.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 = {

package/dist/{OfflineView-NUM9WE0F.js → OfflineView-CIwV08EQ.js}

@@ -1,8 +1,8 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { G as o } from "./index.es-C1SajYlm.js";
+import { G as o } from "./index.es-oxil0uFe.js";
 import { Iconify as _ } from "./components/Iconify/Iconify.js";
-import { b as m, d as y, T as h } from "./index.es-NEYPxnlS.js";
-import { B as A } from "./index.es-B0QNuIUR.js";
+import { b as m, d as y, T as h } from "./index.es-SjZ_-d7U.js";
+import { B as A } from "./index.es-B8p8KCdj.js";
 import './assets/OfflineView.css';const T = "_gapAndTextAlign_10nts_1", v = "_container_10nts_6", x = "_bgWhite_10nts_12", G = "_bgGrey_10nts_17", W = "_subtitle_10nts_22", t = {
   gapAndTextAlign: T,
   container: v,

package/dist/{_Map-BmafU0dj.js → _Map-D8db_GOu.js}

@@ -1,4 +1,4 @@
-import { a as D, d as M } from "./isArray-DN9s620O.js";
+import { a as D, d as M } from "./isArray-B457bpaW.js";
 var v, h;
 function T() {
   if (h) return v;
@@ -33,10 +33,10 @@ var g, I;
 function m() {
   if (I) return g;
   I = 1;
-  var e = V(), r = function() {
+  var e = V(), r = (function() {
     var a = /[^.]+$/.exec(e && e.keys && e.keys.IE_PROTO || "");
     return a ? "Symbol(src)_1." + a : "";
-  }();
+  })();
   function t(a) {
     return !!r && r in a;
   }

package/dist/{_commonjsHelpers-BkfeUUK-.js → _commonjsHelpers-B4e78b8K.js}

@@ -3,7 +3,7 @@ function f(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 function l(e) {
-  if (e.__esModule) return e;
+  if (Object.prototype.hasOwnProperty.call(e, "__esModule")) return e;
   var r = e.default;
   if (typeof r == "function") {
     var t = function o() {

package/dist/{animationframe-EMBh6XeO.js → animationframe-BVKDmEXe.js}

@@ -22,7 +22,7 @@
  */
 var o = (
   /** @class */
-  function() {
+  (function() {
     function a() {
       this.rafIDs = /* @__PURE__ */ new Map();
     }
@@ -47,7 +47,7 @@ var o = (
         t.push(e);
       }), t;
     }, a;
-  }()
+  })()
 );
 export {
   o as A

package/dist/{component-neHBNHRu.js → component-Bz_dtX1r.js}

@@ -23,7 +23,7 @@ import { _ as r, a as u } from "./tslib.es6-BDCynO9F.js";
  */
 var a = (
   /** @class */
-  function() {
+  (function() {
     function t(e) {
       e === void 0 && (e = {}), this.adapter = e;
     }
@@ -54,7 +54,7 @@ var a = (
     }), t.prototype.init = function() {
     }, t.prototype.destroy = function() {
     }, t;
-  }()
+  })()
 );
 /**
  * @license
@@ -80,7 +80,7 @@ var a = (
  */
 var f = (
   /** @class */
-  function() {
+  (function() {
     function t(e, o) {
       for (var n = [], i = 2; i < arguments.length; i++)
         n[i - 2] = arguments[i];
@@ -106,7 +106,7 @@ var f = (
         detail: o
       }) : (i = document.createEvent("CustomEvent"), i.initCustomEvent(e, n, !1, o)), this.root.dispatchEvent(i);
     }, t;
-  }()
+  })()
 );
 export {
   a as M,

package/dist/{component-DsB0poTj.js → component-DEJuY56h.js}

@@ -1,5 +1,5 @@
 import { b as E, c as v } from "./tslib.es6-BDCynO9F.js";
-import { M as S, a as I } from "./component-neHBNHRu.js";
+import { M as S, a as I } from "./component-Bz_dtX1r.js";
 /**
  * @license
  * Copyright 2018 Google Inc.
@@ -199,7 +199,7 @@ var y = [
   "contextmenu"
 ], f = [], O = (
   /** @class */
-  function(n) {
+  (function(n) {
     E(i, n);
     function i(t) {
       var e = n.call(this, v(v({}, i.defaultAdapter), t)) || this;
@@ -448,7 +448,7 @@ var y = [
         top: Math.round(this.frame_.height / 2 - this.initialSize_ / 2)
       }, this.adapter.updateCssVariable(a, this.unboundedCoords_.left + "px"), this.adapter.updateCssVariable(r, this.unboundedCoords_.top + "px"));
     }, i;
-  }(S)
+  })(S)
 );
 /**
  * @license
@@ -474,7 +474,7 @@ var y = [
  */
 var U = (
   /** @class */
-  function(n) {
+  (function(n) {
     E(i, n);
     function i() {
       var t = n !== null && n.apply(this, arguments) || this;
@@ -558,7 +558,7 @@ var U = (
     }, i.prototype.setUnbounded_ = function() {
       this.foundation.setUnbounded(!!this.unbounded_);
     }, i;
-  }(I)
+  })(I)
 );
 export {
   U as M,

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
-import "../../index.es-C1SajYlm.js";
-import "../../index.es-DCYlADaN.js";
-import "../../index.es-NEYPxnlS.js";
-import { A as e } from "../../AlertBanner-C6wpAQMj.js";
+import "../../index.es-oxil0uFe.js";
+import "../../index.es-Dgxrk6xW.js";
+import "../../index.es-SjZ_-d7U.js";
+import { A as e } from "../../AlertBanner-Ci-F-6S9.js";
 export {
   e as AlertBanner
 };

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

@@ -1,8 +1,8 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { a as t, s } from "../../react.esm-BbMrgZCM.js";
+import { a as t, s } from "../../react.esm-Bm0cAgpZ.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
-import { A as n } from "../../AlertBanner-C6wpAQMj.js";
-import { d as p, b as c, a as l, t as r, g as a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+import { A as n } from "../../AlertBanner-Ci-F-6S9.js";
+import { d as p, b as c, a as l, t as r, g as a } from "../../vi.bdSIJ99Y-B308Q-4w.js";
 p("AlertBanner Test", () => {
   c(() => {
     l.spyOn(o, "useBreakpoints").mockReturnValue({

package/dist/components/AlertBanner/LinkBanner.js

@@ -1,8 +1,8 @@
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { G as l } from "../../index.es-C1SajYlm.js";
-import { T as s } from "../../index.es-NEYPxnlS.js";
+import { G as l } from "../../index.es-oxil0uFe.js";
+import { T as s } from "../../index.es-SjZ_-d7U.js";
 import { Iconify as p } from "../Iconify/Iconify.js";
-import { A as m, s as c } from "../../AlertBanner-C6wpAQMj.js";
+import { A as m, s as c } from "../../AlertBanner-Ci-F-6S9.js";
 const g = ({
   text: n,
   color: o = "info",

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

@@ -1,8 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a as r, s as e } from "../../react.esm-BbMrgZCM.js";
+import { a as r, s as e } from "../../react.esm-Bm0cAgpZ.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
 import { LinkBanner as a } from "./LinkBanner.js";
-import { d as n, b as i, a as m, t as p, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+import { d as n, b as i, a as m, t as p, g as t } from "../../vi.bdSIJ99Y-B308Q-4w.js";
 n("LinkBanner Test", () => {
   i(() => {
     m.spyOn(o, "useBreakpoints").mockReturnValue({

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

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { HVPermissions } from '../../types/Permission';
+
+type AllowedProps = {
+    neededPermissions: HVPermissions[];
+    entityId: string | undefined;
+    disclaimer?: boolean;
+    disclaimerText?: string;
+};
+/**
+ * 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 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 {};

package/dist/components/Allowed/Allowed.js

@@ -0,0 +1,13 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Disclaimer as i } from "../Disclaimer/Disclaimer.js";
+import { useIsAllowed as n } from "../PermissionChecks/PermissionService.js";
+const d = ({
+  children: o,
+  neededPermissions: e,
+  entityId: 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;
+export {
+  d as Allowed
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,49 @@
+import { jsx as e } from "react/jsx-runtime";
+import { s as n } from "../../react.esm-Bm0cAgpZ.js";
+import { renderWithPermissions as s } from "../../test-utils.js";
+import { HVMainPermissions as o } from "../../types/Permission.js";
+import { Allowed as i } from "./Allowed.js";
+import { d as l, t as d, g as t } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+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 }),
+      {
+        userPermissions: {
+          General: [o.CurrentUserRead]
+        }
+      }
+    ), t(n.getByText("Allowed to see children")).toBeInTheDocument();
+  }), 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 }),
+      {
+        userPermissions: {
+          General: []
+        }
+      }
+    ), t(n.queryByText("Allowed to see children")).not.toBeInTheDocument();
+  }), d("should return disclaimer when defined & not allowed to see children", () => {
+    const r = /* @__PURE__ */ e("div", { children: "Allowed to see children" });
+    s(
+      /* @__PURE__ */ e(
+        i,
+        {
+          disclaimer: !0,
+          neededPermissions: [o.CurrentUserRead],
+          entityId: "General",
+          children: r
+        }
+      ),
+      {
+        userPermissions: {
+          General: []
+        }
+      }
+    ), t(n.queryByText("Allowed to see children")).not.toBeInTheDocument(), t(
+      n.getByText("You are not allowed to see the content of this section.")
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,51 @@
+import { ButtonProps } from '@element-public/react-button';
+import { HVPermissions } from '../../types/Permission';
+
+export type AllowedButtonProps = Omit<ButtonProps, 'buttonSize' | 'variant' | 'type' | 'label'> & {
+    /**
+     * This applies the html button type (button, submit, reset) or the anchor media type when used with the href property.
+     * Default: 'button'
+     */
+    buttonType?: 'button' | 'submit' | 'reset' | string;
+    /**
+     * Applies the selected style to the button.
+     * Default: 'filled'
+     */
+    variant?: 'filled' | 'outlined' | 'danger' | 'text' | 'success';
+    /**
+     * data-testid used for testing.
+     */
+    'data-testid': string;
+    /**
+     * The entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmLocationId).
+     */
+    entityId?: string;
+    /**
+     * Id used for linking the button to a form.
+     */
+    formId?: string;
+    /**
+     * If true, the button shows a loading spinner instead of the label.
+     * While true, the button is disabled.
+     */
+    isLoading?: boolean;
+    /**
+     * Can be a string or JSX.Element for setting a loading spinner or custom component.
+     */
+    label: string | JSX.Element;
+    /**
+     * The permissions needed to enable the button. If the array is empty, the button is always enabled.
+     */
+    permissions: HVPermissions[];
+    /**
+     * Changes the the size of the button.
+     * Default: 'medium'
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+};
+/**
+ * A permission-gated button component that only renders when the user has the required permissions.
+ * @param {AllowedButtonProps} props - Component properties
+ * @returns {JSX.Element | null} The button component or null if permissions are not met
+ */
+export declare const AllowedButton: ({ buttonType, variant, "data-testid": testId, label, size, isLoading, ...props }: AllowedButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AllowedButton/AllowedButton.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { B as r } from "../../index.es-B8p8KCdj.js";
+import { Allowed as s } from "../Allowed/Allowed.js";
+import { LoadingSpinner as a } from "../LoadingSpinner/Default/LoadingSpinner.js";
+const c = ({
+  buttonType: d = "button",
+  variant: n = "filled",
+  "data-testid": o,
+  label: m,
+  size: l = "medium",
+  isLoading: i = !1,
+  ...t
+}) => /* @__PURE__ */ e(s, { neededPermissions: t.permissions, entityId: t.entityId, children: /* @__PURE__ */ e(
+  r,
+  {
+    buttonSize: l,
+    "data-testid": `allowed-button-${o}`,
+    disabled: t.disabled || i,
+    form: t.formId,
+    type: d,
+    variant: n,
+    ...t,
+    children: i ? /* @__PURE__ */ e(a, { size: "sm", spinnerOnly: !0 }) : m
+  }
+) });
+export {
+  c as AllowedButton
+};

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

@@ -0,0 +1 @@
+export {};