@variamosple/variamos-components 0.2.5 → 0.3.0

package/README.md

@@ -1,50 +1,35 @@
-# React + TypeScript + Vite
+# @variamosple/variamos-components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+React components and contexts shared by the VariaMos front ends: the session, the menu, the header with its user menu and bug report form, the notification bell and drawer, and a few page helpers (paginator, protected route, confirmation modal).
 
-Currently, two official plugins are available:
+## Install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install @variamosple/variamos-components
+```
 
-## Expanding the ESLint configuration
+Peer dependencies: `react` and `react-dom` 18 or 19, `react-bootstrap` 2, `react-bootstrap-icons` 1.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```tsx
+import { Header, SessionProvider } from "@variamosple/variamos-components";
+```
 
-- Configure the top-level `parserOptions` property like this:
+The user menu of the header has the class `variamos-header-options`; its id is generated, so tests and styles should use the class.
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
+## Development
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+Requires Node 26 (`.nvmrc`, `.mise.toml`). `npm install` sets up the Git hooks: Biome and cspell on the staged files before a commit, the conventional commit format, and typecheck, lint and tests before a push.
+
+| Command | What it does |
+| --- | --- |
+| `npm run dev` | Demo page (`src/`), built from the library sources |
+| `npm run typecheck` | Types of the library, the demo and the Vite configuration |
+| `npm run lint` | Biome (shared configuration of the VariaMos admin module) and the check that no rule is silenced in a comment |
+| `npm run format` | Formats the code with Biome |
+| `npm run spell` | Spelling (cspell) |
+| `npm run find-deadcode` | Unused files, exports and dependencies (knip) |
+| `npm test` | Unit tests (Vitest) |
+| `npm run build` | Builds `dist/` |
+| `npm run check-package` | What `npm pack` would publish, then publint |
+
+The CI runs the same commands on every pull request. The package is published to npm by hand.

package/dist/Common/Events.d.ts

@@ -1,5 +1,6 @@
-declare function subscribe<T>(eventName: string, listener: (event: CustomEvent<T>) => void): void;
-declare function unsubscribe<T>(eventName: string, listener: (event: CustomEvent<T>) => void): void;
+type Listener<T> = (event: CustomEvent<T>) => void;
+declare function subscribe<T>(eventName: string, listener: Listener<T>): void;
+declare function unsubscribe<T>(eventName: string, listener: Listener<T>): void;
 declare function publish<T>(eventName: string, data: T): void;
 export declare const Events: Readonly<{
     subscribe: typeof subscribe;

package/dist/Common/Events.js

@@ -1,18 +1,25 @@
-function c(e, n) {
-  document.addEventListener(e, n);
+const o = /* @__PURE__ */ new WeakMap();
+function s(t) {
+  let e = o.get(t);
+  return e || (e = (n) => {
+    n instanceof CustomEvent && t(n);
+  }, o.set(t, e)), e;
 }
-function s(e, n) {
-  document.removeEventListener(e, n);
+function c(t, e) {
+  document.addEventListener(t, s(e));
 }
-function o(e, n) {
-  const t = new CustomEvent(e, { detail: n });
-  document.dispatchEvent(t);
+function i(t, e) {
+  document.removeEventListener(t, s(e));
 }
-const u = Object.freeze({
+function u(t, e) {
+  const n = new CustomEvent(t, { detail: e });
+  document.dispatchEvent(n);
+}
+const d = Object.freeze({
   subscribe: c,
-  unsubscribe: s,
-  publish: o
+  unsubscribe: i,
+  publish: u
 });
 export {
-  u as Events
+  d as Events
 };

package/dist/Common/fieldOf.d.ts

@@ -0,0 +1,2 @@
+/** A field of a JSON value read from the network; undefined if absent. */
+export declare const fieldOf: (value: unknown, key: string) => unknown;

package/dist/Common/fieldOf.js

@@ -0,0 +1,7 @@
+const f = (t, i) => {
+  var n;
+  return typeof t == "object" && t !== null && i in t ? (n = Object.entries(t).find(([o]) => o === i)) == null ? void 0 : n[1] : void 0;
+};
+export {
+  f as fieldOf
+};

package/dist/Common/isAllowedFor.d.ts

@@ -0,0 +1,7 @@
+import { MenuItemBase, SessionUser } from '../Model';
+/**
+ * Whether the user may see a menu entry: an entry without roles nor
+ * permissions is for everyone; otherwise the user needs one of the roles
+ * listed and one of the permissions listed.
+ */
+export declare function isAllowedFor(item: Pick<MenuItemBase, "allowedRoles" | "allowedPermissions">, user: Pick<SessionUser, "roles" | "permissions"> | null | undefined): boolean;

package/dist/Common/isAllowedFor.js

@@ -0,0 +1,9 @@
+function m(s, n) {
+  const { allowedRoles: o, allowedPermissions: t } = s;
+  if (!(o != null && o.length) && !(t != null && t.length)) return !0;
+  const c = (n == null ? void 0 : n.roles) ?? [], e = (n == null ? void 0 : n.permissions) ?? [], h = !o || o.some((i) => c.includes(i)), l = !t || t.some((i) => e.includes(i));
+  return h && l;
+}
+export {
+  m as isAllowedFor
+};

package/dist/Components/AuthWrapper/index.js

@@ -1,17 +1,17 @@
 import { jsx as o, Fragment as f } from "react/jsx-runtime";
-import p, { useEffect as m } from "react";
+import { useState as p, useEffect as m } from "react";
 import { Spinner as h } from "react-bootstrap";
 import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
-import { useRouter as u } from "../../Context/RouterContext.js";
-import { useSession as g } from "../../Context/SessionContext.js";
 import "../../Context/NotificationContext.js";
-import { addressWithoutToken as l } from "./addressWithoutToken.js";
+import { useRouter as u } from "../../Context/RouterContext.js";
+import { useSession as l } from "../../Context/SessionContext.js";
+import { addressWithoutToken as w } from "./addressWithoutToken.js";
 const j = ({
   redirectPath: i,
   children: c
 }) => {
-  const [n, d] = p.useState(!1), { isAuthenticated: t, isLoading: r } = g(), { navigate: s } = u();
+  const [n, d] = p(!1), { isAuthenticated: t, isLoading: r } = l(), { navigate: s } = u();
   return m(() => {
     if (!r && !t && !n) {
       const e = window.location.href, a = new URLSearchParams();
@@ -21,7 +21,7 @@ const j = ({
       );
     }
   }, [t, r, i, s, n]), m(() => {
-    const e = l(window.location.href);
+    const e = w(window.location.href);
     e && window.history.replaceState({}, "", e);
   }, []), r || !t ? /* @__PURE__ */ o("div", { className: "d-flex justify-content-center align-items-center w-100 h-100", children: /* @__PURE__ */ o(
     h,

package/dist/Components/ConfirmationModal/index.js

@@ -13,8 +13,8 @@ function u({
   onCancel: r,
   onConfirm: t,
   message: c,
-  confirmLabel: l = "Accept",
-  confirmButtonVariant: d = "primary",
+  confirmLabel: d = "Accept",
+  confirmButtonVariant: l = "primary",
   cancelButtonVariant: s = "secondary",
   cancelLabel: f = "Cancel"
 }) {
@@ -22,7 +22,7 @@ function u({
     /* @__PURE__ */ o(n.Body, { children: c }),
     /* @__PURE__ */ e(n.Footer, { children: [
       /* @__PURE__ */ o(i, { variant: s, onClick: r, children: f }),
-      /* @__PURE__ */ o(i, { variant: d, onClick: t, children: l })
+      /* @__PURE__ */ o(i, { variant: l, onClick: t, children: d })
     ] })
   ] });
 }

package/dist/Components/Footer/index.js

@@ -4,7 +4,7 @@ import '../../assets/index.css';const e = "_footer_cvhpi_1", s = {
 }, i = ({ version: o = "" }) => /* @__PURE__ */ r("footer", { className: `container-fluid ${s.footer}`, children: /* @__PURE__ */ r("div", { className: "row copyright", children: /* @__PURE__ */ t("p", { className: "mb-0", children: [
   "©",
   " Copyright 2023 VariaMos.",
-  o && ` ${o}`
+  o ? ` ${o}` : null
 ] }) }) });
 export {
   i as Footer

package/dist/Components/Header/BugFormModal.d.ts

@@ -9,6 +9,8 @@ interface BugFormModalProps {
     }, file?: File) => void;
     categories: string[];
     isSubmitting: boolean;
+    /** Why the last submission failed, shown above the form. */
+    errorMessage?: string | null;
 }
 export declare const BugFormModal: FC<BugFormModalProps>;
 export {};

package/dist/Components/Header/BugFormModal.js

@@ -1,23 +1,24 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as a, useEffect as B } from "react";
-import { Modal as o, Form as t, Button as y } from "react-bootstrap";
-const q = ({
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as a, useEffect as N } from "react";
+import { Modal as o, Form as t, Alert as k, Button as y } from "react-bootstrap";
+const G = ({
   show: i,
   onHide: d,
   onSubmit: C,
   categories: n,
-  isSubmitting: c
+  isSubmitting: c,
+  errorMessage: s
 }) => {
-  const [s, u] = a(""), [h, p] = a(""), [m, g] = a(""), [v, b] = a(null), [F, f] = a(!1);
-  B(() => {
-    i && (u(""), p(""), g(n[0] || "Other"), b(null), f(!1));
+  const [u, h] = a(""), [p, m] = a(""), [g, b] = a(""), [F, f] = a(null), [x, v] = a(!1);
+  N(() => {
+    i && (h(""), m(""), b(n[0] || "Other"), f(null), v(!1));
   }, [i, n]);
-  const x = (e) => {
-    if (e.preventDefault(), e.currentTarget.checkValidity() === !1) {
-      e.stopPropagation(), f(!0);
+  const B = (r) => {
+    if (r.preventDefault(), r.currentTarget.checkValidity() === !1) {
+      r.stopPropagation(), v(!0);
       return;
     }
-    C({ title: s, description: h, category: m }, v || void 0);
+    C({ title: u, description: p, category: g }, F ?? void 0);
   };
   return /* @__PURE__ */ l(
     o,
@@ -28,67 +29,68 @@ const q = ({
       keyboard: !1,
       centered: !0,
       children: [
-        /* @__PURE__ */ r(o.Header, { closeButton: !0, children: /* @__PURE__ */ r(o.Title, { children: "Report a New Bug" }) }),
-        /* @__PURE__ */ l(t, { noValidate: !0, validated: F, onSubmit: x, children: [
+        /* @__PURE__ */ e(o.Header, { closeButton: !0, children: /* @__PURE__ */ e(o.Title, { children: "Report a New Bug" }) }),
+        /* @__PURE__ */ l(t, { noValidate: !0, validated: x, onSubmit: B, children: [
           /* @__PURE__ */ l(o.Body, { children: [
+            s ? /* @__PURE__ */ e(k, { variant: "danger", role: "alert", children: s }) : null,
             /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugTitle", children: [
-              /* @__PURE__ */ r(t.Label, { children: "Title *" }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ e(t.Label, { children: "Title *" }),
+              /* @__PURE__ */ e(
                 t.Control,
                 {
                   required: !0,
                   type: "text",
                   placeholder: "e.g. Build error on auth routes",
-                  value: s,
-                  onChange: (e) => u(e.target.value),
+                  value: u,
+                  onChange: (r) => h(r.target.value),
                   maxLength: 100
                 }
               ),
-              /* @__PURE__ */ r(t.Control.Feedback, { type: "invalid", children: "Title is required (max 100 characters)" })
+              /* @__PURE__ */ e(t.Control.Feedback, { type: "invalid", children: "Title is required (max 100 characters)" })
             ] }),
             /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugDescription", children: [
-              /* @__PURE__ */ r(t.Label, { children: "Description *" }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ e(t.Label, { children: "Description *" }),
+              /* @__PURE__ */ e(
                 t.Control,
                 {
                   required: !0,
                   as: "textarea",
                   rows: 4,
                   placeholder: "Describe step-by-step how to reproduce the bug...",
-                  value: h,
-                  onChange: (e) => p(e.target.value)
+                  value: p,
+                  onChange: (r) => m(r.target.value)
                 }
               ),
-              /* @__PURE__ */ r(t.Control.Feedback, { type: "invalid", children: "Description is required" })
+              /* @__PURE__ */ e(t.Control.Feedback, { type: "invalid", children: "Description is required" })
             ] }),
-            /* @__PURE__ */ r("div", { className: "row", children: /* @__PURE__ */ r("div", { className: "col-md-12", children: /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugCategory", children: [
-              /* @__PURE__ */ r(t.Label, { children: "Category *" }),
-              /* @__PURE__ */ r(
+            /* @__PURE__ */ e("div", { className: "row", children: /* @__PURE__ */ e("div", { className: "col-md-12", children: /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugCategory", children: [
+              /* @__PURE__ */ e(t.Label, { children: "Category *" }),
+              /* @__PURE__ */ e(
                 t.Select,
                 {
                   required: !0,
-                  value: m,
-                  onChange: (e) => g(e.target.value),
-                  children: n.map((e) => /* @__PURE__ */ r("option", { value: e, children: e }, e))
+                  value: g,
+                  onChange: (r) => b(r.target.value),
+                  children: n.map((r) => /* @__PURE__ */ e("option", { value: r, children: r }, r))
                 }
               )
             ] }) }) }),
             /* @__PURE__ */ l(t.Group, { className: "mb-3", controlId: "bugFile", children: [
-              /* @__PURE__ */ r(t.Label, { children: "Attachment (Optional)" }),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ e(t.Label, { children: "Attachment (Optional)" }),
+              /* @__PURE__ */ e(
                 t.Control,
                 {
                   type: "file",
-                  onChange: (e) => {
-                    e.target.files && e.target.files.length > 0 && b(e.target.files[0]);
+                  onChange: (r) => {
+                    r.target.files && r.target.files.length > 0 && f(r.target.files[0]);
                   }
                 }
               )
             ] })
           ] }),
           /* @__PURE__ */ l(o.Footer, { children: [
-            /* @__PURE__ */ r(y, { variant: "secondary", onClick: d, disabled: c, children: "Cancel" }),
-            /* @__PURE__ */ r(y, { variant: "primary", type: "submit", disabled: c, children: c ? "Creating..." : "Report Bug" })
+            /* @__PURE__ */ e(y, { variant: "secondary", onClick: d, disabled: c, children: "Cancel" }),
+            /* @__PURE__ */ e(y, { variant: "primary", type: "submit", disabled: c, children: c ? "Creating..." : "Report Bug" })
           ] })
         ] })
       ]
@@ -96,5 +98,5 @@ const q = ({
   );
 };
 export {
-  q as BugFormModal
+  G as BugFormModal
 };

package/dist/Components/Header/HeaderOptions.js

@@ -1,96 +1,90 @@
-import { jsxs as S, Fragment as F, jsx as p } from "react/jsx-runtime";
-import { useState as h, useEffect as T, useMemo as j } from "react";
-import { NavDropdown as g } from "react-bootstrap";
+import { jsxs as f, Fragment as T, jsx as r } from "react/jsx-runtime";
+import { useId as k, useState as m, useCallback as v, useEffect as C, useMemo as O } from "react";
+import { NavDropdown as i } from "react-bootstrap";
+import { Events as h } from "../../Common/Events.js";
+import { isAllowedFor as U } from "../../Common/isAllowedFor.js";
 import "../../Context/AnalyticsContext.js";
-import { useMenu as C } from "../../Context/MenuContext.js";
-import { useRouter as b } from "../../Context/RouterContext.js";
-import { useSession as x } from "../../Context/SessionContext.js";
+import { useMenu as j } from "../../Context/MenuContext.js";
 import "../../Context/NotificationContext.js";
-import { mapToWebTarget as L } from "../../Model/Router.js";
-import { Events as y } from "../../Common/Events.js";
-import { BugFormModal as U } from "./BugFormModal.js";
-const u = {}, Q = ({ adminApiUrl: B }) => {
-  const { user: o, isAuthenticated: m, logout: P } = x(), { options: l } = C(), { navigate: A } = b(), [R, c] = h(!1), [k] = h([
-    "Editor",
-    "Model",
-    "Language",
-    "Project",
-    "Simulation",
-    "Account/Security",
-    "Other"
-  ]), [v, f] = h(!1), D = B || (u == null ? void 0 : u.VITE_ADMIN_API_URL) || "/v1";
-  T(() => {
-    const t = () => {
-      c(!0);
-    };
-    return y.subscribe("openReportBugModal", t), () => {
-      y.unsubscribe("openReportBugModal", t);
-    };
+import { useRouter as x } from "../../Context/RouterContext.js";
+import { useSession as D } from "../../Context/SessionContext.js";
+import { mapToWebTarget as F } from "../../Model/Router.js";
+import { BugFormModal as L } from "./BugFormModal.js";
+import { submitBugReport as N } from "./submitBugReport.js";
+const c = {}, y = [
+  "Editor",
+  "Model",
+  "Language",
+  "Project",
+  "Simulation",
+  "Account/Security",
+  "Other"
+], $ = ({
+  adminApiUrl: b
+}) => {
+  const { user: o, isAuthenticated: n, logout: S } = D(), { options: d } = j(), { navigate: M } = x(), I = k(), [B, s] = m(!1), [E, p] = m(!1), [A, l] = m(null), w = b || (c == null ? void 0 : c.VITE_ADMIN_API_URL) || "/v1", e = v(() => {
+    l(null), s(!0);
   }, []);
-  const E = async (t, d) => {
-    f(!0);
-    try {
-      const e = new FormData();
-      e.append("title", t.title), e.append("description", t.description), e.append("priority", "medium"), e.append("category", t.category), o != null && o.email && e.append("reporterEmail", o.email), d && e.append("file", d);
-      let r = D.replace(/\/v1$/, "");
-      r.endsWith("/") && (r = r.slice(0, -1));
-      const s = {}, n = localStorage.getItem("authToken");
-      n && (s.Authorization = `Bearer ${n}`);
-      const a = await fetch(`${r}/bugs`, {
-        method: "POST",
-        headers: s,
-        body: e,
-        credentials: "include"
-      }), w = await a.json();
-      f(!1), a.ok && !w.errorCode ? c(!1) : alert(w.message || "Failed to submit bug. Please try again.");
-    } catch (e) {
-      f(!1), alert("Failed to submit bug. Please try again."), console.error(e);
-    }
-  }, i = j(() => {
-    const t = (o == null ? void 0 : o.permissions) || [], d = (o == null ? void 0 : o.roles) || [];
-    return l != null && l.length ? l.filter((e) => {
-      var s, n;
-      if (!((s = e == null ? void 0 : e.allowedPermissions) != null && s.length) && !((n = e == null ? void 0 : e.allowedRoles) != null && n.length))
-        return !0;
-      let r = !0;
-      return e.allowedRoles && (r = r && e.allowedRoles.some((a) => d.includes(a))), e.allowedPermissions && (r = r && e.allowedPermissions.some(
-        (a) => t.includes(a)
-      )), r;
-    }) : [];
-  }, [l, o]);
-  return !(i != null && i.length) && !m ? null : /* @__PURE__ */ S(F, { children: [
-    /* @__PURE__ */ S(g, { title: (o == null ? void 0 : o.name) || "Options", id: "nav-dropdown", children: [
-      i == null ? void 0 : i.map((t) => /* @__PURE__ */ p(
-        g.Item,
-        {
-          onClick: () => {
-            if (t.location.endsWith("#report-bug")) {
-              c(!0);
-              return;
-            }
-            A(t.location, {
-              target: L(t.target)
-            });
-          },
-          children: t.title
-        },
-        t.title
-      )),
-      m && !!(i != null && i.length) && /* @__PURE__ */ p(g.Divider, {}),
-      m && /* @__PURE__ */ p(g.Item, { onClick: P, children: "Logout" })
-    ] }),
-    /* @__PURE__ */ p(
-      U,
+  C(() => (h.subscribe("openReportBugModal", e), () => {
+    h.unsubscribe(
+      "openReportBugModal",
+      e
+    );
+  }), [e]);
+  const R = async (t, u) => {
+    p(!0), l(null);
+    const g = await N(t, u, {
+      adminApiUrl: w,
+      reporterEmail: o == null ? void 0 : o.email,
+      authToken: localStorage.getItem("authToken")
+    });
+    p(!1), g ? l(g) : s(!1);
+  }, a = O(
+    () => (d ?? []).filter((t) => U(t, o)),
+    [d, o]
+  );
+  return a.length === 0 && !n ? null : /* @__PURE__ */ f(T, { children: [
+    /* @__PURE__ */ f(
+      i,
       {
-        show: R,
-        onHide: () => c(!1),
-        onSubmit: E,
-        categories: k,
-        isSubmitting: v
+        title: (o == null ? void 0 : o.name) || "Options",
+        id: I,
+        className: "variamos-header-options",
+        children: [
+          a.map((t) => /* @__PURE__ */ r(
+            i.Item,
+            {
+              onClick: () => {
+                if (t.location.endsWith("#report-bug")) {
+                  e();
+                  return;
+                }
+                M(t.location, {
+                  target: F(t.target)
+                });
+              },
+              children: t.title
+            },
+            t.title
+          )),
+          n && a.length > 0 ? /* @__PURE__ */ r(i.Divider, {}) : null,
+          n ? /* @__PURE__ */ r(i.Item, { onClick: S, children: "Logout" }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      L,
+      {
+        show: B,
+        onHide: () => s(!1),
+        onSubmit: (t, u) => void R(t, u),
+        categories: y,
+        isSubmitting: E,
+        errorMessage: A
       }
     )
   ] });
 };
 export {
-  Q as HeaderOptions
+  $ as HeaderOptions
 };

package/dist/Components/Header/MenuItem.js

@@ -1,51 +1,41 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useMemo as h } from "react";
-import { Nav as v, NavDropdown as d } from "react-bootstrap";
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import { Nav as g, NavDropdown as p } from "react-bootstrap";
+import { isAllowedFor as k } from "../../Common/isAllowedFor.js";
 import "../../Context/AnalyticsContext.js";
 import "../../Context/MenuContext.js";
-import { useRouter as C } from "../../Context/RouterContext.js";
-import { useSession as N } from "../../Context/SessionContext.js";
 import "../../Context/NotificationContext.js";
-import { mapToWebTarget as m } from "../../Model/Router.js";
-const z = ({
-  title: e,
-  type: w,
-  location: g,
-  target: k,
+import { useRouter as u } from "../../Context/RouterContext.js";
+import { useSession as d } from "../../Context/SessionContext.js";
+import { mapToWebTarget as s } from "../../Model/Router.js";
+const D = ({
+  title: n,
+  type: f,
+  location: e,
+  target: l,
   children: t
 }) => {
-  const { user: r } = N(), { navigate: p } = C(), a = h(() => {
-    const i = (r == null ? void 0 : r.permissions) || [], R = (r == null ? void 0 : r.roles) || [];
-    return t ? t.filter((o) => {
-      var c, f;
-      if (!((c = o == null ? void 0 : o.allowedPermissions) != null && c.length) && !((f = o == null ? void 0 : o.allowedRoles) != null && f.length))
-        return !0;
-      let l = !0;
-      return o.allowedRoles && (l = l && o.allowedRoles.some((n) => R.includes(n))), o.allowedPermissions && (l = l && o.allowedPermissions.some(
-        (n) => i.includes(n)
-      )), l;
-    }) : [];
-  }, [t, r]);
-  return w === "location" ? /* @__PURE__ */ s(
-    v.Link,
+  const { user: m } = d(), { navigate: a } = u(), r = c(() => t ? t.filter((o) => k(o, m)) : [], [t, m]);
+  return f === "location" && e ? /* @__PURE__ */ i(
+    g.Link,
     {
       as: "button",
       className: "btn btn-link",
-      onClick: () => p(g, { target: m(k) }),
-      children: e
+      onClick: () => a(e, { target: s(l) }),
+      children: n
     }
-  ) : /* @__PURE__ */ s(d, { title: e, children: a == null ? void 0 : a.map((i) => /* @__PURE__ */ s(
-    d.Item,
+  ) : /* @__PURE__ */ i(p, { title: n, children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ i(
+    p.Item,
     {
       as: "button",
-      onClick: () => p(i.location, {
-        target: m(i.target)
+      onClick: () => a(o.location, {
+        target: s(o.target)
       }),
-      children: i.title
+      children: o.title
     },
-    i.title
+    o.title
   )) });
 };
 export {
-  z as MenuItemComponent
+  D as MenuItemComponent
 };