@midas-ds/components 16.2.2 → 16.2.3

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 16.2.3 (2026-01-09)
+
+### 🩹 Fixes
+
+- **components, layout:** show active menu item on sub pages ([#994](https://github.com/migrationsverket/midas/pull/994))
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.9.3
+
 ## 16.2.2 (2026-01-09)
 
 ### 🧱 Updated Dependencies

package/chunks/{Layout-BFZSROTl.js → Layout-LjCfmVhQ.js}

@@ -72,13 +72,13 @@ const F = [
   user: r,
   app: t,
   children: o,
-  clientSideRouter: c,
-  clientSideHref: l,
+  clientSideRouter: m,
+  clientSideHref: d,
   headerChildren: _,
   isCollapsed: h,
-  setIsCollapsed: m,
+  setIsCollapsed: p,
   isOpened: k,
-  setIsOpened: p,
+  setIsOpened: l,
   variant: b,
   id: N
 }) => /* @__PURE__ */ e(
@@ -91,11 +91,11 @@ const F = [
       app: t,
       headerChildren: _,
       isCollapsed: h,
-      setIsCollapsed: m,
+      setIsCollapsed: p,
       isOpened: k,
-      setIsOpened: p,
-      clientSideRouter: c,
-      clientSideHref: l,
+      setIsOpened: l,
+      clientSideRouter: m,
+      clientSideHref: d,
       variant: b,
       id: N
     },
@@ -113,10 +113,13 @@ const F = [
   active: t,
   hasBadge: o
 }) => {
-  const { isCollapsed: c, setIsOpened: l, clientSideHref: _ } = f(), h = _ ? _(s) : s, [m, k] = v.useState(!1);
+  const { isCollapsed: m, setIsOpened: d, clientSideHref: _ } = f(), h = _ ? _(s) : s, [p, k] = v.useState(!1);
   return v.useEffect(() => {
-    typeof window < "u" && k(t ?? window.location.pathname === h);
-  }, [t, h]), c ? /* @__PURE__ */ i(H, { children: [
+    if (typeof window < "u") {
+      const l = window.location.pathname === h || window.location.pathname.startsWith(h + "/");
+      k(t ?? l);
+    }
+  }, [t, h]), m ? /* @__PURE__ */ i(H, { children: [
     /* @__PURE__ */ e(
       q,
       {
@@ -125,9 +128,9 @@ const F = [
         className: u(
           a.listLink,
           a.listLinkCollapsed,
-          m && a.active
+          p && a.active
         ),
-        onPress: () => l?.(!1),
+        onPress: () => d?.(!1),
         children: /* @__PURE__ */ i(L, { children: [
           /* @__PURE__ */ e(
             r,
@@ -146,8 +149,8 @@ const F = [
     {
       href: s,
       "aria-label": n,
-      className: u(a.listLink, m && a.active),
-      onPress: () => l?.(!1),
+      className: u(a.listLink, p && a.active),
+      onPress: () => d?.(!1),
       children: [
         /* @__PURE__ */ i(L, { children: [
           /* @__PURE__ */ e(r, { size: 20 }),
@@ -167,11 +170,11 @@ const F = [
     isOpened: r,
     isCollapsed: t,
     setIsCollapsed: o,
-    setIsOpened: c,
-    clientSideRouter: l,
+    setIsOpened: m,
+    clientSideRouter: d,
     clientSideHref: _,
     id: h
-  } = f(), m = C(x), k = ({ group: p }) => /* @__PURE__ */ e("ul", { className: a.list, children: p.items.map((b, N) => /* @__PURE__ */ e(
+  } = f(), p = C(x), k = ({ group: l }) => /* @__PURE__ */ e("ul", { className: a.list, children: l.items.map((b, N) => /* @__PURE__ */ e(
     "li",
     {
       className: u(
@@ -183,13 +186,13 @@ const F = [
     "link_" + N
   )) });
   return v.useEffect(() => {
-    const p = (b) => {
-      b.key === "Escape" && c !== void 0 && c(!1);
+    const l = (b) => {
+      b.key === "Escape" && m !== void 0 && m(!1);
     };
-    return window.addEventListener("keydown", p), () => {
-      window.removeEventListener("keydown", p);
+    return window.addEventListener("keydown", l), () => {
+      window.removeEventListener("keydown", l);
     };
-  }, [c]), /* @__PURE__ */ i(
+  }, [m]), /* @__PURE__ */ i(
     "aside",
     {
       id: h,
@@ -205,7 +208,7 @@ const F = [
             I,
             {
               variant: "icon",
-              "aria-label": t ? m.format("maximizeMenu") : m.format("minimizeMenu"),
+              "aria-label": t ? p.format("maximizeMenu") : p.format("minimizeMenu"),
               onPress: () => o(!t),
               className: a.collapseButton,
               children: t ? /* @__PURE__ */ e(X, { size: 20 }) : /* @__PURE__ */ e($, { size: 20 })
@@ -216,17 +219,17 @@ const F = [
           "nav",
           {
             className: a.sidebarNav,
-            "aria-label": m.format("sidebarMenu"),
-            children: /* @__PURE__ */ e("ul", { className: a.list, children: n.map((p, b) => /* @__PURE__ */ i("li", { children: [
-              p.title && !t && /* @__PURE__ */ e("p", { className: a.listGroupTitle, children: p.title }),
-              l ? /* @__PURE__ */ e(
+            "aria-label": p.format("sidebarMenu"),
+            children: /* @__PURE__ */ e("ul", { className: a.list, children: n.map((l, b) => /* @__PURE__ */ i("li", { children: [
+              l.title && !t && /* @__PURE__ */ e("p", { className: a.listGroupTitle, children: l.title }),
+              d ? /* @__PURE__ */ e(
                 B,
                 {
-                  navigate: l,
+                  navigate: d,
                   useHref: _,
-                  children: /* @__PURE__ */ e(k, { group: p })
+                  children: /* @__PURE__ */ e(k, { group: l })
                 }
-              ) : /* @__PURE__ */ e(k, { group: p })
+              ) : /* @__PURE__ */ e(k, { group: l })
             ] }, "list_" + b)) })
           }
         )
@@ -240,11 +243,11 @@ const F = [
     app: r,
     isOpened: t,
     setIsOpened: o,
-    setIsCollapsed: c,
-    headerChildren: l,
+    setIsCollapsed: m,
+    headerChildren: d,
     variant: _,
     id: h
-  } = f(), m = C(x);
+  } = f(), p = C(x);
   return _ === "external" ? /* @__PURE__ */ e("header", { className: u(a.header, a.headerExternal), children: /* @__PURE__ */ i("div", { className: a.headerContentExternal, children: [
     /* @__PURE__ */ i("div", { className: a.logoExternalContainer, children: [
       /* @__PURE__ */ e(
@@ -268,7 +271,7 @@ const F = [
         /* @__PURE__ */ e("p", { className: a.userTitle, children: s.title })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: a.headerItems, children: l })
+    /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
   ] }) }) : /* @__PURE__ */ i(
     "header",
     {
@@ -290,10 +293,10 @@ const F = [
             {
               variant: "icon",
               className: a.toggleButton,
-              "aria-label": t ? m.format("closeMenu") : m.format("openMenu"),
+              "aria-label": t ? p.format("closeMenu") : p.format("openMenu"),
               "aria-controls": h,
               onPressStart: () => {
-                c(!1), o?.(!0);
+                m(!1), o?.(!0);
               },
               children: t ? /* @__PURE__ */ e(
                 j,
@@ -316,7 +319,7 @@ const F = [
             /* @__PURE__ */ e("p", { className: a.title, children: n })
           ] })
         ] }),
-        /* @__PURE__ */ e("div", { className: a.headerItems, children: l })
+        /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
       ]
     }
   );
@@ -366,7 +369,7 @@ const F = [
   );
 }, z = ({
   items: n
-}) => /* @__PURE__ */ e(P, { children: n.map(({ href: s, active: r, icon: t, title: o, hasBadge: c }, l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
+}) => /* @__PURE__ */ e(P, { children: n.map(({ href: s, active: r, icon: t, title: o, hasBadge: m }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
   q,
   {
     href: s,
@@ -376,86 +379,86 @@ const F = [
     children: [
       /* @__PURE__ */ i(L, { children: [
         /* @__PURE__ */ e(t, { size: 20 }),
-        c && /* @__PURE__ */ e(y, {})
+        m && /* @__PURE__ */ e(y, {})
       ] }),
       o
     ]
   }
-) }, l)) }), d = ({
+) }, d)) }), c = ({
   items: n,
   title: s,
   user: r,
   app: t,
   children: o,
-  headerChildren: c,
-  clientSideRouter: l,
+  headerChildren: m,
+  clientSideRouter: d,
   clientSideHref: _,
   variant: h,
-  className: m
+  className: p
 }) => {
-  const [k, p] = v.useState(!1), [b, N] = v.useState(!1), E = v.useId();
+  const [k, l] = v.useState(!1), [b, N] = v.useState(!1), E = v.useId();
   return h === "external" ? /* @__PURE__ */ e(
-    d.Provider,
+    c.Provider,
     {
       items: n,
       title: s,
       user: r,
       app: t,
-      clientSideRouter: l,
+      clientSideRouter: d,
       clientSideHref: _,
-      headerChildren: c,
+      headerChildren: m,
       isCollapsed: k,
-      setIsCollapsed: p,
+      setIsCollapsed: l,
       variant: h,
       id: E,
-      children: /* @__PURE__ */ i("div", { className: u(a.baseLayout, m), children: [
+      children: /* @__PURE__ */ i("div", { className: u(a.baseLayout, p), children: [
         /* @__PURE__ */ e(S, {}),
-        /* @__PURE__ */ e(d.Header, {}),
+        /* @__PURE__ */ e(c.Header, {}),
         /* @__PURE__ */ i("div", { className: a.mainContent, children: [
-          /* @__PURE__ */ e(d.Sidebar, {}),
+          /* @__PURE__ */ e(c.Sidebar, {}),
           /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
-          /* @__PURE__ */ e(d.Backdrop, {})
+          /* @__PURE__ */ e(c.Backdrop, {})
         ] }),
-        /* @__PURE__ */ e("div", { className: a.navbarWrapper, children: /* @__PURE__ */ e(d.Navbar, {}) })
+        /* @__PURE__ */ e("div", { className: a.navbarWrapper, children: /* @__PURE__ */ e(c.Navbar, {}) })
       ] })
     }
   ) : /* @__PURE__ */ e(
-    d.Provider,
+    c.Provider,
     {
       items: n,
       title: s,
       user: r,
       app: t,
-      clientSideRouter: l,
+      clientSideRouter: d,
       clientSideHref: _,
-      headerChildren: c,
+      headerChildren: m,
       isCollapsed: k,
-      setIsCollapsed: p,
+      setIsCollapsed: l,
       isOpened: b,
       setIsOpened: N,
       variant: h,
       id: E,
-      children: /* @__PURE__ */ i("div", { className: u(a.baseLayout, m), children: [
+      children: /* @__PURE__ */ i("div", { className: u(a.baseLayout, p), children: [
         /* @__PURE__ */ e(S, {}),
-        /* @__PURE__ */ e(d.Header, {}),
+        /* @__PURE__ */ e(c.Header, {}),
         /* @__PURE__ */ i("div", { className: a.mainContent, children: [
-          /* @__PURE__ */ e(d.Sidebar, {}),
+          /* @__PURE__ */ e(c.Sidebar, {}),
           /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
-          /* @__PURE__ */ e(d.Backdrop, {})
+          /* @__PURE__ */ e(c.Backdrop, {})
         ] })
       ] })
     }
   );
 };
-d.Provider = Se;
-d.Header = we;
-d.Sidebar = Oe;
-d.SidebarLink = w;
-d.Navbar = He;
-d.Backdrop = Pe;
+c.Provider = Se;
+c.Header = we;
+c.Sidebar = Oe;
+c.SidebarLink = w;
+c.Navbar = He;
+c.Backdrop = Pe;
 export {
   we as H,
-  d as L,
+  c as L,
   He as N,
   Oe as S,
   w as a

package/index.js

@@ -20,7 +20,7 @@ import { G as $ } from "./chunks/GridItem-5t1Z14sM.js";
 import { H as ao } from "./chunks/Heading-D8tNNJkt.js";
 import { I as eo } from "./chunks/InfoBanner-DLiVpNON.js";
 import { L as so } from "./chunks/Label-Dup4lWaR.js";
-import { H as xo, L as mo, N as fo, S as io, a as no } from "./chunks/Layout-BFZSROTl.js";
+import { H as xo, L as mo, N as fo, S as io, a as no } from "./chunks/Layout-LjCfmVhQ.js";
 import { L as lo } from "./chunks/Link-yTNUNv3C.js";
 import { L as bo } from "./chunks/LinkButton-3nAekUJ4.js";
 import { L as uo } from "./chunks/Logo-InDSslpO.js";

package/layout/index.js

@@ -1,4 +1,4 @@
-import { H as e, L as s, N as b, S as d, a as i } from "../chunks/Layout-BFZSROTl.js";
+import { H as e, L as s, N as b, S as d, a as i } from "../chunks/Layout-LjCfmVhQ.js";
 export {
   e as Header,
   s as Layout,

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "16.2.2",
+  "version": "16.2.3",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/theme": "3.9.2",
+    "@midas-ds/theme": "3.9.3",
     "react-aria-components": "1.14.0"
   }
 }