@midas-ds/components 16.7.1 → 16.8.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 16.8.1 (2026-02-06)
+
+### 🚀 Features
+
+- **layout:** add boilerplate components ([ab85d70f46](https://github.com/migrationsverket/midas/commit/ab85d70f46))
+
+## 16.8.0 (2026-02-06)
+
+### 🚀 Features
+
+- **components, layout:** add click-event for sidebar links ([#1040](https://github.com/migrationsverket/midas/pull/1040))
+
 ## 16.7.1 (2026-02-05)
 
 ### 🔧 Maintenance

package/chunks/Layout-CFhqS9ej.js

@@ -0,0 +1,484 @@
+'use client';
+import { jsx as e, jsxs as o, Fragment as G } from "react/jsx-runtime";
+import { G as z } from "./GridItem-z7zclNdT.js";
+import * as f from "react";
+import { useState as W, useEffect as j } from "react";
+import { c as b } from "./clsx-AexbMWKp.js";
+import { Link as y, RouterProvider as w } from "react-aria-components";
+import { B as E } from "./Button-CaLOUTDO.js";
+import { a as D, T as q } from "./Tooltip-rDmOkGmX.js";
+import { a as I, B as M } from "./BadgeContainer-CKVsfTlF.js";
+import { c as T } from "./createLucideIcon-CP-mMPfa.js";
+import { u as C } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import { variables as A } from "@midas-ds/theme";
+import { L } from "./Logo-CCxPAmgw.js";
+import { X as R } from "./x-B9bYxG31.js";
+import '../assets/Layout.css';const $ = [
+  ["path", { d: "M4 5h16", key: "1tepv9" }],
+  ["path", { d: "M4 12h16", key: "1lakjw" }],
+  ["path", { d: "M4 19h16", key: "1djgab" }]
+], F = T("menu", $);
+const X = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
+], J = T("panel-left-close", X);
+const K = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
+], Q = T("panel-left-open", K), U = "_baseLayout_1n71v_1", V = "_mainContent_1n71v_10", Y = "_header_1n71v_15", Z = "_headerExternal_1n71v_26", ee = "_headerContent_1n71v_41", ne = "_logo_1n71v_60", ae = "_headerItems_1n71v_69", te = "_toggleButton_1n71v_75", se = "_sidebar_1n71v_83", ie = "_main_1n71v_10", re = "_app_1n71v_116", oe = "_sidebarOpened_1n71v_124", le = "_sidebarHeader_1n71v_128", de = "_appName_1n71v_140", ce = "_collapseButton_1n71v_147", me = "_sidebarCollapsed_1n71v_156", pe = "_userName_1n71v_166", _e = "_userTitle_1n71v_184", ve = "_title_1n71v_196", he = "_sidebarNav_1n71v_207", ue = "_list_1n71v_213", be = "_listGroupTitle_1n71v_219", Ne = "_listItem_1n71v_226", fe = "_listItemCollapsed_1n71v_231", ke = "_listLink_1n71v_235", Ce = "_listLinkCollapsed_1n71v_298", xe = "_active_1n71v_303", ge = "_backdrop_1n71v_321", Le = "_backdropOpened_1n71v_331", ye = "_skipToContent_1n71v_349", Ie = "_navbar_1n71v_363", Me = "_navbarList_1n71v_375", Ee = "_navbarItem_1n71v_397", Te = "_headerContentExternal_1n71v_448", Se = "_logoExternalContainer_1n71v_456", ze = "_logoExternal_1n71v_456", Be = "_logoExternalDesktop_1n71v_468", Oe = "_navbarWrapper_1n71v_477", n = {
+  baseLayout: U,
+  mainContent: V,
+  header: Y,
+  headerExternal: Z,
+  headerContent: ee,
+  logo: ne,
+  headerItems: ae,
+  toggleButton: te,
+  sidebar: se,
+  main: ie,
+  app: re,
+  sidebarOpened: oe,
+  sidebarHeader: le,
+  appName: de,
+  collapseButton: ce,
+  sidebarCollapsed: me,
+  userName: pe,
+  userTitle: _e,
+  title: ve,
+  sidebarNav: he,
+  list: ue,
+  listGroupTitle: be,
+  listItem: Ne,
+  listItemCollapsed: fe,
+  listLink: ke,
+  listLinkCollapsed: Ce,
+  active: xe,
+  backdrop: ge,
+  backdropOpened: Le,
+  skipToContent: ye,
+  navbar: Ie,
+  navbarList: Me,
+  navbarItem: Ee,
+  headerContentExternal: Te,
+  logoExternalContainer: Se,
+  logoExternal: ze,
+  logoExternalDesktop: Be,
+  navbarWrapper: Oe
+}, P = f.createContext(
+  void 0
+), we = ({
+  items: a,
+  title: t,
+  user: r,
+  app: i,
+  children: s,
+  clientSideRouter: p,
+  clientSideHref: d,
+  headerChildren: v,
+  isCollapsed: _,
+  setIsCollapsed: m,
+  isOpened: h,
+  setIsOpened: N,
+  variant: l,
+  id: u
+}) => /* @__PURE__ */ e(
+  P.Provider,
+  {
+    value: {
+      items: a,
+      title: t,
+      user: r,
+      app: i,
+      headerChildren: v,
+      isCollapsed: _,
+      setIsCollapsed: m,
+      isOpened: h,
+      setIsOpened: N,
+      clientSideRouter: p,
+      clientSideHref: d,
+      variant: l,
+      id: u
+    },
+    children: s
+  }
+), k = () => {
+  const a = f.useContext(P);
+  if (!a)
+    throw new Error("useLayoutContext must be used within a LayoutProvider");
+  return a;
+}, H = ({
+  title: a,
+  href: t,
+  icon: r,
+  active: i,
+  hasBadge: s,
+  onClick: p
+}) => {
+  const { isCollapsed: d, setIsOpened: v, clientSideHref: _ } = k(), m = _ ? _(t) : t, [h, N] = W(!1);
+  j(() => {
+    if (typeof window < "u") {
+      const u = window.location.pathname === m || window.location.pathname.startsWith(m + "/");
+      N(i ?? u);
+    }
+  }, [i, m]);
+  const l = () => {
+    v?.(!1), p && p({
+      title: a,
+      href: m
+    });
+  };
+  return d ? /* @__PURE__ */ o(D, { children: [
+    /* @__PURE__ */ e(
+      y,
+      {
+        href: t,
+        "aria-label": a,
+        className: b(
+          n.listLink,
+          n.listLinkCollapsed,
+          h && n.active
+        ),
+        onPress: l,
+        children: /* @__PURE__ */ o(I, { children: [
+          /* @__PURE__ */ e(
+            r,
+            {
+              size: 20,
+              "aria-label": a
+            }
+          ),
+          s && /* @__PURE__ */ e(M, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(q, { placement: "right", children: a })
+  ] }) : /* @__PURE__ */ o(
+    y,
+    {
+      href: t,
+      "aria-label": a,
+      className: b(n.listLink, h && n.active),
+      onPress: l,
+      children: [
+        /* @__PURE__ */ o(I, { children: [
+          /* @__PURE__ */ e(r, { size: 20 }),
+          s && /* @__PURE__ */ e(M, {})
+        ] }),
+        a
+      ]
+    }
+  );
+}, Pe = { closeMenu: "Close menu", openMenu: "Open menu", maximizeMenu: "Maximize menu", minimizeMenu: "Minimize menu", sidebarMenu: "Sidebar menu", bottomMenu: "Bottom menu", skipToContent: "Skip to main content" }, He = { closeMenu: "Stäng meny", openMenu: "Öppna meny", maximizeMenu: "Maximera meny", minimizeMenu: "Minimera meny", sidebarMenu: "Sidomeny", bottomMenu: "Bottenmeny", skipToContent: "Hoppa till huvudinnehåll" }, x = {
+  en: Pe,
+  sv: He
+}, Ge = ({
+  onLinkClick: a
+}) => {
+  const {
+    items: t,
+    app: r,
+    isOpened: i,
+    isCollapsed: s,
+    setIsCollapsed: p,
+    setIsOpened: d,
+    clientSideRouter: v,
+    clientSideHref: _,
+    id: m
+  } = k(), h = C(x), N = ({ group: l }) => /* @__PURE__ */ e("ul", { className: n.list, children: l.items.map((u, g) => /* @__PURE__ */ e(
+    "li",
+    {
+      className: b(
+        n.listItem,
+        s && n.listItemCollapsed
+      ),
+      children: /* @__PURE__ */ e(
+        H,
+        {
+          onClick: a,
+          ...u
+        }
+      )
+    },
+    "link_" + g
+  )) });
+  return f.useEffect(() => {
+    const l = (u) => {
+      u.key === "Escape" && d !== void 0 && d(!1);
+    };
+    return window.addEventListener("keydown", l), () => {
+      window.removeEventListener("keydown", l);
+    };
+  }, [d]), /* @__PURE__ */ o(
+    "aside",
+    {
+      id: m,
+      className: b(
+        n.sidebar,
+        s && n.sidebarCollapsed,
+        i && n.sidebarOpened
+      ),
+      children: [
+        /* @__PURE__ */ o("div", { className: n.sidebarHeader, children: [
+          !s && /* @__PURE__ */ e("p", { className: n.appName, children: r.name }),
+          /* @__PURE__ */ e(
+            E,
+            {
+              variant: "icon",
+              "aria-label": s ? h.format("maximizeMenu") : h.format("minimizeMenu"),
+              onPress: () => p(!s),
+              className: n.collapseButton,
+              children: s ? /* @__PURE__ */ e(Q, { size: 20 }) : /* @__PURE__ */ e(J, { size: 20 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          "nav",
+          {
+            className: n.sidebarNav,
+            "aria-label": h.format("sidebarMenu"),
+            children: /* @__PURE__ */ e("ul", { className: n.list, children: t.map((l, u) => /* @__PURE__ */ o("li", { children: [
+              l.title && !s && /* @__PURE__ */ e("p", { className: n.listGroupTitle, children: l.title }),
+              v ? /* @__PURE__ */ e(
+                w,
+                {
+                  navigate: v,
+                  useHref: _,
+                  children: /* @__PURE__ */ e(N, { group: l })
+                }
+              ) : /* @__PURE__ */ e(N, { group: l })
+            ] }, "list_" + u)) })
+          }
+        )
+      ]
+    }
+  );
+}, We = () => {
+  const {
+    title: a,
+    user: t,
+    app: r,
+    isOpened: i,
+    setIsOpened: s,
+    setIsCollapsed: p,
+    headerChildren: d,
+    variant: v,
+    id: _
+  } = k(), m = C(x);
+  return v === "external" ? /* @__PURE__ */ e("header", { className: b(n.header, n.headerExternal), children: /* @__PURE__ */ o("div", { className: n.headerContentExternal, children: [
+    /* @__PURE__ */ o("div", { className: n.logoExternalContainer, children: [
+      /* @__PURE__ */ e(
+        L,
+        {
+          size: "x-small",
+          padding: !1,
+          className: n.logoExternal
+        }
+      ),
+      /* @__PURE__ */ e(
+        L,
+        {
+          size: "small",
+          padding: !1,
+          className: n.logoExternalDesktop
+        }
+      ),
+      /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ e("p", { className: n.userName, children: t.name }),
+        /* @__PURE__ */ e("p", { className: n.userTitle, children: t.title })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: n.headerItems, children: d })
+  ] }) }) : /* @__PURE__ */ o(
+    "header",
+    {
+      className: n.header,
+      style: {
+        borderTop: `solid 4px ${r.color ? r.color : A.brandPrimary}`
+      },
+      children: [
+        /* @__PURE__ */ o("div", { className: n.headerContent, children: [
+          /* @__PURE__ */ e("div", { className: n.logo, children: /* @__PURE__ */ e(
+            L,
+            {
+              size: "small",
+              padding: !1
+            }
+          ) }),
+          i !== void 0 && /* @__PURE__ */ e(
+            E,
+            {
+              variant: "icon",
+              className: n.toggleButton,
+              "aria-label": i ? m.format("closeMenu") : m.format("openMenu"),
+              "aria-controls": _,
+              onPressStart: () => {
+                p(!1), s?.(!0);
+              },
+              children: i ? /* @__PURE__ */ e(
+                R,
+                {
+                  size: 20,
+                  "aria-hidden": "true"
+                }
+              ) : /* @__PURE__ */ e(
+                F,
+                {
+                  size: 20,
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ o("div", { children: [
+            /* @__PURE__ */ e("p", { className: n.userName, children: t.name }),
+            /* @__PURE__ */ e("p", { className: n.userTitle, children: t.title }),
+            /* @__PURE__ */ e("p", { className: n.title, children: a })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: n.headerItems, children: d })
+      ]
+    }
+  );
+}, B = ({
+  id: a = "main:first-of-type"
+}) => {
+  const t = () => {
+    const i = document.querySelector(a);
+    i && (i.tabIndex = -1, i.focus(), setTimeout(() => i.removeAttribute("tabindex"), 1e3));
+  }, r = C(x);
+  return /* @__PURE__ */ e(
+    E,
+    {
+      onPress: t,
+      className: n.skipToContent,
+      children: r.format("skipToContent")
+    }
+  );
+}, je = () => {
+  const { isOpened: a, setIsOpened: t } = k();
+  return a ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: b(n.backdrop, n.backdropOpened),
+      onClick: () => {
+        t?.(!1);
+      },
+      "aria-hidden": !0
+    }
+  ) : null;
+}, De = () => {
+  const { items: a, clientSideRouter: t, clientSideHref: r } = k(), i = C(x), s = a.at(0)?.items;
+  return /* @__PURE__ */ e(
+    "nav",
+    {
+      className: n.navbar,
+      "aria-label": i.format("bottomMenu"),
+      children: s && /* @__PURE__ */ e("ul", { className: b(n.navbarList), children: t ? /* @__PURE__ */ e(
+        w,
+        {
+          navigate: t,
+          useHref: r,
+          children: /* @__PURE__ */ e(O, { items: s })
+        }
+      ) : /* @__PURE__ */ e(O, { items: s }) })
+    }
+  );
+}, O = ({
+  items: a
+}) => /* @__PURE__ */ e(G, { children: a.map(({ href: t, active: r, icon: i, title: s, hasBadge: p }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ o(
+  y,
+  {
+    href: t,
+    className: b(n.navbarItem),
+    "data-active": r,
+    "aria-current": r && "page",
+    children: [
+      /* @__PURE__ */ o(I, { children: [
+        /* @__PURE__ */ e(i, { size: 20 }),
+        p && /* @__PURE__ */ e(M, {})
+      ] }),
+      s
+    ]
+  }
+) }, d)) }), c = ({
+  items: a,
+  title: t,
+  user: r,
+  app: i,
+  children: s,
+  headerChildren: p,
+  clientSideRouter: d,
+  clientSideHref: v,
+  variant: _,
+  className: m,
+  onSidebarLinkClick: h
+}) => {
+  const [N, l] = f.useState(!1), [u, g] = f.useState(!1), S = f.useId();
+  return _ === "external" ? /* @__PURE__ */ e(
+    c.Provider,
+    {
+      items: a,
+      title: t,
+      user: r,
+      app: i,
+      clientSideRouter: d,
+      clientSideHref: v,
+      headerChildren: p,
+      isCollapsed: N,
+      setIsCollapsed: l,
+      variant: _,
+      id: S,
+      children: /* @__PURE__ */ o("div", { className: b(n.baseLayout, m), children: [
+        /* @__PURE__ */ e(B, {}),
+        /* @__PURE__ */ e(c.Header, {}),
+        /* @__PURE__ */ o("div", { className: n.mainContent, children: [
+          /* @__PURE__ */ e(c.Sidebar, { onLinkClick: h }),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e("main", { className: n.main, children: /* @__PURE__ */ e("div", { className: n.app, children: s }) }) }),
+          /* @__PURE__ */ e(c.Backdrop, {})
+        ] }),
+        /* @__PURE__ */ e("div", { className: n.navbarWrapper, children: /* @__PURE__ */ e(c.Navbar, {}) })
+      ] })
+    }
+  ) : /* @__PURE__ */ e(
+    c.Provider,
+    {
+      items: a,
+      title: t,
+      user: r,
+      app: i,
+      clientSideRouter: d,
+      clientSideHref: v,
+      headerChildren: p,
+      isCollapsed: N,
+      setIsCollapsed: l,
+      isOpened: u,
+      setIsOpened: g,
+      variant: _,
+      id: S,
+      children: /* @__PURE__ */ o("div", { className: b(n.baseLayout, m), children: [
+        /* @__PURE__ */ e(B, {}),
+        /* @__PURE__ */ e(c.Header, {}),
+        /* @__PURE__ */ o("div", { className: n.mainContent, children: [
+          /* @__PURE__ */ e(c.Sidebar, { onLinkClick: h }),
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e("main", { className: n.main, children: /* @__PURE__ */ e("div", { className: n.app, children: s }) }) }),
+          /* @__PURE__ */ e(c.Backdrop, {})
+        ] })
+      ] })
+    }
+  );
+};
+c.Provider = we;
+c.Header = We;
+c.Sidebar = Ge;
+c.SidebarLink = H;
+c.Navbar = De;
+c.Backdrop = je;
+export {
+  We as H,
+  c as L,
+  De as N,
+  Ge as S,
+  H as a
+};

package/index.d.ts

@@ -41,4 +41,5 @@ export * from './tooltip';
 export * from './list-box';
 export * from './menu';
 export { useLocalizedStringFormatter } from './utils/intl';
+export { clsx } from './utils/clsx';
 export { VERSION } from './version';

package/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { A as s, a as p } from "./chunks/AccordionItem-CSvARy63.js";
 import { B as m, a as i } from "./chunks/BadgeContainer-CKVsfTlF.js";
-import { B as f, a as d } from "./chunks/Breadcrumb-BQ_nyDfo.js";
+import { B as n, a as d } from "./chunks/Breadcrumb-BQ_nyDfo.js";
 import { B as c } from "./chunks/Button-CaLOUTDO.js";
 import { B as u } from "./chunks/ButtonGroup-Dr6HOBo2.js";
 import { C, R as b } from "./chunks/RangeCalendar-h9wkh43W.js";
@@ -21,7 +21,7 @@ import { G as eo } from "./chunks/GridItem-z7zclNdT.js";
 import { H as so } from "./chunks/Heading-D8tNNJkt.js";
 import { I as xo } from "./chunks/InfoBanner-C4HnaXQO.js";
 import { L as io } from "./chunks/Label-6GZmmff9.js";
-import { H as fo, L as To, N as co, S as lo, a as uo } from "./chunks/Layout-C2-vyEKy.js";
+import { H as no, L as To, N as co, S as lo, a as uo } from "./chunks/Layout-CFhqS9ej.js";
 import { L as Co } from "./chunks/Link-rqGQvFQq.js";
 import { L as Bo } from "./chunks/LinkButton-B1zayj7k.js";
 import { L as So } from "./chunks/Logo-CCxPAmgw.js";
@@ -39,17 +39,18 @@ import { T as Xo, a as Yo, b as _o, c as $o } from "./chunks/TabList-BaR443mu.js
 import { T as aa, a as ra } from "./chunks/Tag-C7VZ0T0o.js";
 import { T as ta } from "./chunks/Text-Bxww8mmL.js";
 import { I as pa, T as xa, a as ma, b as ia } from "./chunks/TextArea-Bb7H-w23.js";
-import { G as fa, T as da, a as Ta, b as ca, t as la } from "./chunks/Toast-D7PXIDa9.js";
+import { G as na, T as da, a as Ta, b as ca, t as la } from "./chunks/Toast-D7PXIDa9.js";
 import { T as ga, a as Ca } from "./chunks/ToggleButtonGroup-CXKTrLbb.js";
 import { T as Ba, a as La } from "./chunks/Tooltip-rDmOkGmX.js";
 import { L as Ia } from "./chunks/ListBox-D5BBeZWL.js";
 import { L as Ra, a as Ga } from "./chunks/ListBoxLoadMoreItem-ufPaJaNS.js";
 import { L as ka, a as va, b as Fa, c as Ma } from "./chunks/ListBoxSection-C4y3K7T5.js";
 import { M as ha, a as Ha, b as ya, c as Na, S as wa } from "./chunks/Separator-XIzn8lsq.js";
-import { DialogTrigger as za, MenuTrigger as Oa, RouterProvider as Qa } from "react-aria-components";
-import { u as Za } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
-import { useToastState as qa } from "react-stately";
-const o = "16.7.1", a = {
+import { c as za } from "./chunks/clsx-AexbMWKp.js";
+import { DialogTrigger as Qa, MenuTrigger as Va, RouterProvider as Za } from "react-aria-components";
+import { u as qa } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
+import { useToastState as Ka } from "react-stately";
+const o = "16.8.1", a = {
   version: o
 }, r = a.version;
 export {
@@ -57,7 +58,7 @@ export {
   p as AccordionItem,
   m as Badge,
   i as BadgeContainer,
-  f as Breadcrumb,
+  n as Breadcrumb,
   d as Breadcrumbs,
   c as Button,
   u as ButtonGroup,
@@ -84,14 +85,14 @@ export {
   K as DatePicker,
   U as DateRangePicker,
   q as DateSegment,
-  za as DialogTrigger,
+  Qa as DialogTrigger,
   _ as DropZone,
   X as FieldError,
   $ as FileTrigger,
-  fa as GlobalToastRegion,
+  na as GlobalToastRegion,
   ao as Grid,
   eo as GridItem,
-  fo as Header,
+  no as Header,
   so as Heading,
   xo as InfoBanner,
   pa as Input,
@@ -112,7 +113,7 @@ export {
   Ha as MenuItem,
   ya as MenuPopover,
   Na as MenuSection,
-  Oa as MenuTrigger,
+  Va as MenuTrigger,
   Do as Modal,
   co as Navbar,
   Go as Popover,
@@ -120,7 +121,7 @@ export {
   Fo as Radio,
   Mo as RadioGroup,
   b as RangeCalendar,
-  Qa as RouterProvider,
+  Za as RouterProvider,
   qo as Row,
   ho as SearchField,
   yo as Select,
@@ -150,7 +151,8 @@ export {
   Ba as Tooltip,
   La as TooltipTrigger,
   r as VERSION,
+  za as clsx,
   la as toastQueue,
-  Za as useLocalizedStringFormatter,
-  qa as useToastState
+  qa as useLocalizedStringFormatter,
+  Ka as useToastState
 };

package/layout/Layout.d.ts

@@ -11,6 +11,10 @@ export interface SidebarLinkGroup {
     title?: string;
     items: SidebarLinkProps[];
 }
+export type SidebarLinkClickData = {
+    title: string;
+    href: string;
+};
 export interface SidebarLinkProps {
     title: string;
     href: string;
@@ -19,6 +23,7 @@ export interface SidebarLinkProps {
     hasBadge?: boolean;
     isCollapsed?: boolean;
     setIsOpened?: React.Dispatch<React.SetStateAction<boolean>>;
+    onClick?: (e: SidebarLinkClickData) => void;
 }
 export interface SidebarUser {
     name: string;
@@ -54,6 +59,8 @@ export interface MidasLayout {
     clientSideHref?: (href: Href) => string;
     variant: 'internal' | 'external';
     className?: string;
+    /** Event triggered when sidebar link is clicked. */
+    onSidebarLinkClick?: (e: SidebarLinkClickData) => void;
 }
 export declare const Layout: React.FC<MidasLayout> & {
     Provider: typeof LayoutProvider;

package/layout/components/Sidebar.d.ts

@@ -1,2 +1,7 @@
+import { SidebarLinkClickData } from '../Layout';
 import * as React from 'react';
-export declare const Sidebar: React.FC;
+type SidebarProps = {
+    onLinkClick?: (e: SidebarLinkClickData) => void;
+};
+export declare const Sidebar: React.FC<SidebarProps>;
+export {};

package/layout/components/SidebarLink.d.ts

@@ -1,2 +1,2 @@
 import { SidebarLinkProps } from '../Layout';
-export declare const SidebarLink: ({ title, href, icon: IconComponent, active, hasBadge, }: SidebarLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLink: ({ title, href, icon: IconComponent, active, hasBadge, onClick, }: SidebarLinkProps) => import("react/jsx-runtime").JSX.Element;

package/layout/context/LayoutContext.d.ts

@@ -1,7 +1,7 @@
 import { SidebarLinkGroup, SidebarUser, App } from '../Layout';
 import { Href } from '@react-types/shared';
 import * as React from 'react';
-interface LayoutContextProps {
+export interface LayoutContextProps {
     items: SidebarLinkGroup[];
     title: string;
     user: SidebarUser;
@@ -20,4 +20,3 @@ export declare const LayoutProvider: React.FC<LayoutContextProps & {
     children: React.ReactNode;
 }>;
 export declare const useLayoutContext: () => LayoutContextProps;
-export {};

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-C2-vyEKy.js";
+import { H as e, L as s, N as b, S as d, a as i } from "../chunks/Layout-CFhqS9ej.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.7.1",
+  "version": "16.8.1",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/chunks/Layout-C2-vyEKy.js

@@ -1,467 +0,0 @@
-'use client';
-import { jsx as e, jsxs as r, Fragment as H } from "react/jsx-runtime";
-import { G as S } from "./GridItem-z7zclNdT.js";
-import * as N from "react";
-import { useState as G, useEffect as W } from "react";
-import { c as u } from "./clsx-AexbMWKp.js";
-import { Link as L, RouterProvider as O } from "react-aria-components";
-import { B as M } from "./Button-CaLOUTDO.js";
-import { a as j, T as D } from "./Tooltip-rDmOkGmX.js";
-import { a as y, B as I } from "./BadgeContainer-CKVsfTlF.js";
-import { c as E } from "./createLucideIcon-CP-mMPfa.js";
-import { u as C } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import { variables as q } from "@midas-ds/theme";
-import { L as g } from "./Logo-CCxPAmgw.js";
-import { X as A } from "./x-B9bYxG31.js";
-import '../assets/Layout.css';const R = [
-  ["path", { d: "M4 5h16", key: "1tepv9" }],
-  ["path", { d: "M4 12h16", key: "1lakjw" }],
-  ["path", { d: "M4 19h16", key: "1djgab" }]
-], $ = E("menu", R);
-const F = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
-], X = E("panel-left-close", F);
-const J = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
-], K = E("panel-left-open", J), Q = "_baseLayout_1n71v_1", U = "_mainContent_1n71v_10", V = "_header_1n71v_15", Y = "_headerExternal_1n71v_26", Z = "_headerContent_1n71v_41", ee = "_logo_1n71v_60", ae = "_headerItems_1n71v_69", ne = "_toggleButton_1n71v_75", te = "_sidebar_1n71v_83", se = "_main_1n71v_10", ie = "_app_1n71v_116", re = "_sidebarOpened_1n71v_124", oe = "_sidebarHeader_1n71v_128", le = "_appName_1n71v_140", de = "_collapseButton_1n71v_147", ce = "_sidebarCollapsed_1n71v_156", me = "_userName_1n71v_166", pe = "_userTitle_1n71v_184", _e = "_title_1n71v_196", ve = "_sidebarNav_1n71v_207", ue = "_list_1n71v_213", he = "_listGroupTitle_1n71v_219", be = "_listItem_1n71v_226", Ne = "_listItemCollapsed_1n71v_231", fe = "_listLink_1n71v_235", ke = "_listLinkCollapsed_1n71v_298", Ce = "_active_1n71v_303", xe = "_backdrop_1n71v_321", ge = "_backdropOpened_1n71v_331", Le = "_skipToContent_1n71v_349", ye = "_navbar_1n71v_363", Ie = "_navbarList_1n71v_375", Me = "_navbarItem_1n71v_397", Ee = "_headerContentExternal_1n71v_448", Te = "_logoExternalContainer_1n71v_456", Se = "_logoExternal_1n71v_456", ze = "_logoExternalDesktop_1n71v_468", Be = "_navbarWrapper_1n71v_477", a = {
-  baseLayout: Q,
-  mainContent: U,
-  header: V,
-  headerExternal: Y,
-  headerContent: Z,
-  logo: ee,
-  headerItems: ae,
-  toggleButton: ne,
-  sidebar: te,
-  main: se,
-  app: ie,
-  sidebarOpened: re,
-  sidebarHeader: oe,
-  appName: le,
-  collapseButton: de,
-  sidebarCollapsed: ce,
-  userName: me,
-  userTitle: pe,
-  title: _e,
-  sidebarNav: ve,
-  list: ue,
-  listGroupTitle: he,
-  listItem: be,
-  listItemCollapsed: Ne,
-  listLink: fe,
-  listLinkCollapsed: ke,
-  active: Ce,
-  backdrop: xe,
-  backdropOpened: ge,
-  skipToContent: Le,
-  navbar: ye,
-  navbarList: Ie,
-  navbarItem: Me,
-  headerContentExternal: Ee,
-  logoExternalContainer: Te,
-  logoExternal: Se,
-  logoExternalDesktop: ze,
-  navbarWrapper: Be
-}, w = N.createContext(
-  void 0
-), Oe = ({
-  items: t,
-  title: s,
-  user: i,
-  app: n,
-  children: o,
-  clientSideRouter: m,
-  clientSideHref: d,
-  headerChildren: v,
-  isCollapsed: _,
-  setIsCollapsed: p,
-  isOpened: h,
-  setIsOpened: l,
-  variant: b,
-  id: f
-}) => /* @__PURE__ */ e(
-  w.Provider,
-  {
-    value: {
-      items: t,
-      title: s,
-      user: i,
-      app: n,
-      headerChildren: v,
-      isCollapsed: _,
-      setIsCollapsed: p,
-      isOpened: h,
-      setIsOpened: l,
-      clientSideRouter: m,
-      clientSideHref: d,
-      variant: b,
-      id: f
-    },
-    children: o
-  }
-), k = () => {
-  const t = N.useContext(w);
-  if (!t)
-    throw new Error("useLayoutContext must be used within a LayoutProvider");
-  return t;
-}, P = ({
-  title: t,
-  href: s,
-  icon: i,
-  active: n,
-  hasBadge: o
-}) => {
-  const { isCollapsed: m, setIsOpened: d, clientSideHref: v } = k(), _ = v ? v(s) : s, [p, h] = G(!1);
-  return W(() => {
-    if (typeof window < "u") {
-      const l = window.location.pathname === _ || window.location.pathname.startsWith(_ + "/");
-      h(n ?? l);
-    }
-  }, [n, _]), m ? /* @__PURE__ */ r(j, { children: [
-    /* @__PURE__ */ e(
-      L,
-      {
-        href: s,
-        "aria-label": t,
-        className: u(
-          a.listLink,
-          a.listLinkCollapsed,
-          p && a.active
-        ),
-        onPress: () => d?.(!1),
-        children: /* @__PURE__ */ r(y, { children: [
-          /* @__PURE__ */ e(
-            i,
-            {
-              size: 20,
-              "aria-label": t
-            }
-          ),
-          o && /* @__PURE__ */ e(I, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ e(D, { placement: "right", children: t })
-  ] }) : /* @__PURE__ */ r(
-    L,
-    {
-      href: s,
-      "aria-label": t,
-      className: u(a.listLink, p && a.active),
-      onPress: () => d?.(!1),
-      children: [
-        /* @__PURE__ */ r(y, { children: [
-          /* @__PURE__ */ e(i, { size: 20 }),
-          o && /* @__PURE__ */ e(I, {})
-        ] }),
-        t
-      ]
-    }
-  );
-}, we = { closeMenu: "Close menu", openMenu: "Open menu", maximizeMenu: "Maximize menu", minimizeMenu: "Minimize menu", sidebarMenu: "Sidebar menu", bottomMenu: "Bottom menu", skipToContent: "Skip to main content" }, Pe = { closeMenu: "Stäng meny", openMenu: "Öppna meny", maximizeMenu: "Maximera meny", minimizeMenu: "Minimera meny", sidebarMenu: "Sidomeny", bottomMenu: "Bottenmeny", skipToContent: "Hoppa till huvudinnehåll" }, x = {
-  en: we,
-  sv: Pe
-}, He = () => {
-  const {
-    items: t,
-    app: s,
-    isOpened: i,
-    isCollapsed: n,
-    setIsCollapsed: o,
-    setIsOpened: m,
-    clientSideRouter: d,
-    clientSideHref: v,
-    id: _
-  } = k(), p = C(x), h = ({ group: l }) => /* @__PURE__ */ e("ul", { className: a.list, children: l.items.map((b, f) => /* @__PURE__ */ e(
-    "li",
-    {
-      className: u(
-        a.listItem,
-        n && a.listItemCollapsed
-      ),
-      children: /* @__PURE__ */ e(P, { ...b })
-    },
-    "link_" + f
-  )) });
-  return N.useEffect(() => {
-    const l = (b) => {
-      b.key === "Escape" && m !== void 0 && m(!1);
-    };
-    return window.addEventListener("keydown", l), () => {
-      window.removeEventListener("keydown", l);
-    };
-  }, [m]), /* @__PURE__ */ r(
-    "aside",
-    {
-      id: _,
-      className: u(
-        a.sidebar,
-        n && a.sidebarCollapsed,
-        i && a.sidebarOpened
-      ),
-      children: [
-        /* @__PURE__ */ r("div", { className: a.sidebarHeader, children: [
-          !n && /* @__PURE__ */ e("p", { className: a.appName, children: s.name }),
-          /* @__PURE__ */ e(
-            M,
-            {
-              variant: "icon",
-              "aria-label": n ? p.format("maximizeMenu") : p.format("minimizeMenu"),
-              onPress: () => o(!n),
-              className: a.collapseButton,
-              children: n ? /* @__PURE__ */ e(K, { size: 20 }) : /* @__PURE__ */ e(X, { size: 20 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          "nav",
-          {
-            className: a.sidebarNav,
-            "aria-label": p.format("sidebarMenu"),
-            children: /* @__PURE__ */ e("ul", { className: a.list, children: t.map((l, b) => /* @__PURE__ */ r("li", { children: [
-              l.title && !n && /* @__PURE__ */ e("p", { className: a.listGroupTitle, children: l.title }),
-              d ? /* @__PURE__ */ e(
-                O,
-                {
-                  navigate: d,
-                  useHref: v,
-                  children: /* @__PURE__ */ e(h, { group: l })
-                }
-              ) : /* @__PURE__ */ e(h, { group: l })
-            ] }, "list_" + b)) })
-          }
-        )
-      ]
-    }
-  );
-}, Ge = () => {
-  const {
-    title: t,
-    user: s,
-    app: i,
-    isOpened: n,
-    setIsOpened: o,
-    setIsCollapsed: m,
-    headerChildren: d,
-    variant: v,
-    id: _
-  } = k(), p = C(x);
-  return v === "external" ? /* @__PURE__ */ e("header", { className: u(a.header, a.headerExternal), children: /* @__PURE__ */ r("div", { className: a.headerContentExternal, children: [
-    /* @__PURE__ */ r("div", { className: a.logoExternalContainer, children: [
-      /* @__PURE__ */ e(
-        g,
-        {
-          size: "x-small",
-          padding: !1,
-          className: a.logoExternal
-        }
-      ),
-      /* @__PURE__ */ e(
-        g,
-        {
-          size: "small",
-          padding: !1,
-          className: a.logoExternalDesktop
-        }
-      ),
-      /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ e("p", { className: a.userName, children: s.name }),
-        /* @__PURE__ */ e("p", { className: a.userTitle, children: s.title })
-      ] })
-    ] }),
-    /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
-  ] }) }) : /* @__PURE__ */ r(
-    "header",
-    {
-      className: a.header,
-      style: {
-        borderTop: `solid 4px ${i.color ? i.color : q.brandPrimary}`
-      },
-      children: [
-        /* @__PURE__ */ r("div", { className: a.headerContent, children: [
-          /* @__PURE__ */ e("div", { className: a.logo, children: /* @__PURE__ */ e(
-            g,
-            {
-              size: "small",
-              padding: !1
-            }
-          ) }),
-          n !== void 0 && /* @__PURE__ */ e(
-            M,
-            {
-              variant: "icon",
-              className: a.toggleButton,
-              "aria-label": n ? p.format("closeMenu") : p.format("openMenu"),
-              "aria-controls": _,
-              onPressStart: () => {
-                m(!1), o?.(!0);
-              },
-              children: n ? /* @__PURE__ */ e(
-                A,
-                {
-                  size: 20,
-                  "aria-hidden": "true"
-                }
-              ) : /* @__PURE__ */ e(
-                $,
-                {
-                  size: 20,
-                  "aria-hidden": "true"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ r("div", { children: [
-            /* @__PURE__ */ e("p", { className: a.userName, children: s.name }),
-            /* @__PURE__ */ e("p", { className: a.userTitle, children: s.title }),
-            /* @__PURE__ */ e("p", { className: a.title, children: t })
-          ] })
-        ] }),
-        /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
-      ]
-    }
-  );
-}, z = ({
-  id: t = "main:first-of-type"
-}) => {
-  const s = () => {
-    const n = document.querySelector(t);
-    n && (n.tabIndex = -1, n.focus(), setTimeout(() => n.removeAttribute("tabindex"), 1e3));
-  }, i = C(x);
-  return /* @__PURE__ */ e(
-    M,
-    {
-      onPress: s,
-      className: a.skipToContent,
-      children: i.format("skipToContent")
-    }
-  );
-}, We = () => {
-  const { isOpened: t, setIsOpened: s } = k();
-  return t ? /* @__PURE__ */ e(
-    "div",
-    {
-      className: u(a.backdrop, a.backdropOpened),
-      onClick: () => {
-        s?.(!1);
-      },
-      "aria-hidden": !0
-    }
-  ) : null;
-}, je = () => {
-  const { items: t, clientSideRouter: s, clientSideHref: i } = k(), n = C(x), o = t.at(0)?.items;
-  return /* @__PURE__ */ e(
-    "nav",
-    {
-      className: a.navbar,
-      "aria-label": n.format("bottomMenu"),
-      children: o && /* @__PURE__ */ e("ul", { className: u(a.navbarList), children: s ? /* @__PURE__ */ e(
-        O,
-        {
-          navigate: s,
-          useHref: i,
-          children: /* @__PURE__ */ e(B, { items: o })
-        }
-      ) : /* @__PURE__ */ e(B, { items: o }) })
-    }
-  );
-}, B = ({
-  items: t
-}) => /* @__PURE__ */ e(H, { children: t.map(({ href: s, active: i, icon: n, title: o, hasBadge: m }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ r(
-  L,
-  {
-    href: s,
-    className: u(a.navbarItem),
-    "data-active": i,
-    "aria-current": i && "page",
-    children: [
-      /* @__PURE__ */ r(y, { children: [
-        /* @__PURE__ */ e(n, { size: 20 }),
-        m && /* @__PURE__ */ e(I, {})
-      ] }),
-      o
-    ]
-  }
-) }, d)) }), c = ({
-  items: t,
-  title: s,
-  user: i,
-  app: n,
-  children: o,
-  headerChildren: m,
-  clientSideRouter: d,
-  clientSideHref: v,
-  variant: _,
-  className: p
-}) => {
-  const [h, l] = N.useState(!1), [b, f] = N.useState(!1), T = N.useId();
-  return _ === "external" ? /* @__PURE__ */ e(
-    c.Provider,
-    {
-      items: t,
-      title: s,
-      user: i,
-      app: n,
-      clientSideRouter: d,
-      clientSideHref: v,
-      headerChildren: m,
-      isCollapsed: h,
-      setIsCollapsed: l,
-      variant: _,
-      id: T,
-      children: /* @__PURE__ */ r("div", { className: u(a.baseLayout, p), children: [
-        /* @__PURE__ */ e(z, {}),
-        /* @__PURE__ */ e(c.Header, {}),
-        /* @__PURE__ */ r("div", { className: a.mainContent, children: [
-          /* @__PURE__ */ e(c.Sidebar, {}),
-          /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
-          /* @__PURE__ */ e(c.Backdrop, {})
-        ] }),
-        /* @__PURE__ */ e("div", { className: a.navbarWrapper, children: /* @__PURE__ */ e(c.Navbar, {}) })
-      ] })
-    }
-  ) : /* @__PURE__ */ e(
-    c.Provider,
-    {
-      items: t,
-      title: s,
-      user: i,
-      app: n,
-      clientSideRouter: d,
-      clientSideHref: v,
-      headerChildren: m,
-      isCollapsed: h,
-      setIsCollapsed: l,
-      isOpened: b,
-      setIsOpened: f,
-      variant: _,
-      id: T,
-      children: /* @__PURE__ */ r("div", { className: u(a.baseLayout, p), children: [
-        /* @__PURE__ */ e(z, {}),
-        /* @__PURE__ */ e(c.Header, {}),
-        /* @__PURE__ */ r("div", { className: a.mainContent, children: [
-          /* @__PURE__ */ e(c.Sidebar, {}),
-          /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
-          /* @__PURE__ */ e(c.Backdrop, {})
-        ] })
-      ] })
-    }
-  );
-};
-c.Provider = Oe;
-c.Header = Ge;
-c.Sidebar = He;
-c.SidebarLink = P;
-c.Navbar = je;
-c.Backdrop = We;
-export {
-  Ge as H,
-  c as L,
-  je as N,
-  He as S,
-  P as a
-};