@midas-ds/layout 0.0.24 → 0.0.25

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.0.25 (2026-03-26)
+
+### 🩹 Fixes
+
+- **layout:** match API for NavigationLink and HeaderAction ([dffda24844](https://github.com/migrationsverket/midas/commit/dffda24844))
+
 ## 0.0.24 (2026-03-25)
 
 This was a version bump only for layout to align it with other projects, there were no code changes.

package/chunks/NavigationSubMenu-D3hvuVFG.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import { Collection as k, OverlayTriggerStateContext as M, Focusable as j, Link as H } from "react-aria-components";
+import { useContext as s } from "react";
+import { Text as I, clsx as S, TooltipTrigger as T, Tooltip as D } from "@midas-ds/components";
+import { S as r } from "./SidebarContext-CoDRKR2m.js";
+import { M as O } from "./MobileMenuContext-Coj0sJ0N.js";
+import { c as m } from "./clsx-OuTLNxxd.js";
+import { Collection as h } from "@react-aria/collections";
+import '../assets/NavigationSubMenu.css';const q = "_rootList_l3v98_1", w = {
+  rootList: q
+}, io = ({
+  className: n,
+  items: o,
+  children: e,
+  dependencies: i,
+  idScope: c,
+  addIdAndValue: a,
+  ...l
+}) => /* @__PURE__ */ t(
+  "nav",
+  {
+    className: n,
+    ...l,
+    children: /* @__PURE__ */ t("ul", { className: w.rootList, children: /* @__PURE__ */ t(
+      k,
+      {
+        items: o,
+        children: e,
+        dependencies: i,
+        idScope: c,
+        addIdAndValue: a
+      }
+    ) })
+  }
+), E = "_navigationHeader_j94pq_1", P = "_collapsed_j94pq_6", f = {
+  navigationHeader: E,
+  collapsed: P
+}, A = ({ className: n, ...o }) => {
+  const e = s(r);
+  return /* @__PURE__ */ t(
+    I,
+    {
+      className: S(n, f.navigationHeader, {
+        [f.collapsed]: e?.isCollapsed
+      }),
+      ...o
+    }
+  );
+}, F = "_navigationItem_1jt2l_1", x = {
+  navigationItem: F
+}, V = ({ className: n, ...o }) => {
+  const e = s(r);
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      className: m(n, x.navigationItem, {
+        [x.collapsed]: e?.isCollapsed
+      }),
+      ...o
+    }
+  );
+}, z = "_navigationLink_14vyt_1", B = "_sidebar_14vyt_21", G = "_collapsed_14vyt_37", J = "_title_14vyt_40", p = {
+  navigationLink: z,
+  sidebar: B,
+  collapsed: G,
+  title: J
+}, ao = ({
+  as: n,
+  children: o,
+  className: e,
+  isActive: i,
+  icon: c,
+  "aria-label": a,
+  ...l
+}) => {
+  const L = s(O), u = s(r), v = u?.isCollapsed, C = s(M), $ = n || H, b = () => {
+    C?.isOpen && C?.setOpen(!1);
+  }, d = typeof o == "string" ? o : void 0;
+  return !d && !a && process.env.NODE_ENV !== "production" && console.warn(
+    "An 'aria-label' is required for <NavigationLink> elements with non plain text children"
+  ), /* @__PURE__ */ _(T, { isDisabled: !v || !d && !a, children: [
+    /* @__PURE__ */ t(j, { children: /* @__PURE__ */ _(
+      $,
+      {
+        "aria-current": i && "page",
+        "aria-label": a || (v ? d : void 0),
+        className: S(e, p.navigationLink, {
+          [p.sidebar]: u || L,
+          [p.collapsed]: v
+        }),
+        "data-active": i || void 0,
+        ...n ? {
+          onClick: (g) => {
+            b(), l.onClick?.(g);
+          }
+        } : {
+          onPress: (g) => {
+            b(), l.onPress?.(g);
+          }
+        },
+        ...l,
+        children: [
+          c,
+          /* @__PURE__ */ t("span", { className: p.title, children: o })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(D, { placement: "right", children: d })
+  ] });
+}, K = "_navigationSection_1ae77_1", Q = "_collapsed_1ae77_5", y = {
+  navigationSection: K,
+  collapsed: Q
+}, so = ({
+  className: n,
+  title: o,
+  ...e
+}) => {
+  const i = s(r);
+  return /* @__PURE__ */ t(V, { children: /* @__PURE__ */ _(
+    "ul",
+    {
+      className: m(n, y.navigationSection, {
+        [y.collapsed]: i?.isCollapsed
+      }),
+      children: [
+        o && /* @__PURE__ */ t(A, { children: o }),
+        /* @__PURE__ */ t(h, { ...e })
+      ]
+    }
+  ) });
+}, R = "_navigationSubMenu_vfyl6_1", U = "_collapsed_vfyl6_5", N = {
+  navigationSubMenu: R,
+  collapsed: U
+}, lo = ({
+  className: n,
+  children: o,
+  items: e,
+  ...i
+}) => {
+  const c = s(r), { length: a } = Array.from(e || []);
+  return typeof o == "function" && a === 0 ? null : /* @__PURE__ */ t(
+    "ul",
+    {
+      className: m(n, N.navigationSubMenu, {
+        [N.collapsed]: c?.isCollapsed
+      }),
+      children: /* @__PURE__ */ t(
+        h,
+        {
+          items: e,
+          ...i,
+          children: o
+        }
+      )
+    }
+  );
+};
+export {
+  io as N,
+  A as a,
+  V as b,
+  ao as c,
+  so as d,
+  lo as e
+};

package/index.js

@@ -1,7 +1,7 @@
 import { H as o, a as t, b as r, M as n } from "./chunks/Header-B1Nk3vII.js";
 import { L as i, a as x } from "./chunks/LayoutContent-CvlzZxeo.js";
 import { M as m } from "./chunks/Main-Dt0CIYBE.js";
-import { N as b, a as d, b as f, c as p, d as M, e as N } from "./chunks/NavigationSubMenu-G-WkaNZA.js";
+import { N as b, a as d, b as f, c as p, d as M, e as N } from "./chunks/NavigationSubMenu-D3hvuVFG.js";
 import { P as v, a as g, b as H, c as S, u as c } from "./chunks/PanelRegion-zsKP1Rye.js";
 import { S as L } from "./chunks/Sidebar-BFIjN5q6.js";
 import { S as A } from "./chunks/SidebarContext-CoDRKR2m.js";

package/navigation/index.js

@@ -1,4 +1,4 @@
-import { N as n, a as o, b as t, c as e, d as N, e as g } from "../chunks/NavigationSubMenu-G-WkaNZA.js";
+import { N as n, a as o, b as t, c as e, d as N, e as g } from "../chunks/NavigationSubMenu-D3hvuVFG.js";
 export {
   n as Navigation,
   o as NavigationHeader,

package/navigation/navigation-link/NavigationLink.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode, ElementType, ComponentProps } from 'react';
 import { Link } from 'react-aria-components';
 export interface NavigationLinkComponentProps<C extends ElementType> {
-    /** The icon to display. */
-    children: ReactNode;
     /** The visible label text and tooltip content. */
-    title: string;
+    children?: ReactNode;
+    /** The icon to display. */
+    icon: ReactNode;
     isActive?: boolean;
     variant?: 'sidebar' | 'navbar';
     className?: string;
@@ -14,4 +14,4 @@ export interface NavigationLinkComponentProps<C extends ElementType> {
     as?: C;
 }
 export type NavigationLinkProps<C extends ElementType> = NavigationLinkComponentProps<C> & Omit<ComponentProps<C>, keyof NavigationLinkComponentProps<C>>;
-export declare const NavigationLink: <C extends ElementType = typeof Link>({ as, children, className, isActive, title, "aria-label": ariaLabel, ...rest }: NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationLink: <C extends ElementType = typeof Link>({ as, children, className, isActive, icon, "aria-label": ariaLabel, ...rest }: NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;

package/navigation/navigation-link/NavigationLink.stories.d.ts

@@ -2,13 +2,13 @@ import { StoryObj } from '@storybook/react-vite';
 import { NavigationLink } from '.';
 type Story = StoryObj<typeof NavigationLink>;
 declare const _default: {
-    component: <C extends import('react').ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ as, children, className, isActive, title, "aria-label": ariaLabel, ...rest }: import('./NavigationLink').NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;
+    component: <C extends import('react').ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ as, children, className, isActive, icon, "aria-label": ariaLabel, ...rest }: import('./NavigationLink').NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
     args: {
-        title: string;
+        children: string;
         href: string;
-        children: import("react/jsx-runtime").JSX.Element;
+        icon: import("react/jsx-runtime").JSX.Element;
     };
     parameters: {
         layout: string;

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Layout components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/chunks/NavigationSubMenu-G-WkaNZA.js

@@ -1,164 +0,0 @@
-'use client';
-import { jsx as n, jsxs as g } from "react/jsx-runtime";
-import { Collection as $, OverlayTriggerStateContext as M, Focusable as k, Link as j } from "react-aria-components";
-import { useContext as s } from "react";
-import { Text as H, clsx as N, TooltipTrigger as I, Tooltip as T } from "@midas-ds/components";
-import { S as r } from "./SidebarContext-CoDRKR2m.js";
-import { M as D } from "./MobileMenuContext-Coj0sJ0N.js";
-import { c as _ } from "./clsx-OuTLNxxd.js";
-import { Collection as h } from "@react-aria/collections";
-import '../assets/NavigationSubMenu.css';const O = "_rootList_l3v98_1", q = {
-  rootList: O
-}, ao = ({
-  className: t,
-  items: o,
-  children: a,
-  dependencies: e,
-  idScope: i,
-  addIdAndValue: c,
-  ...l
-}) => /* @__PURE__ */ n(
-  "nav",
-  {
-    className: t,
-    ...l,
-    children: /* @__PURE__ */ n("ul", { className: q.rootList, children: /* @__PURE__ */ n(
-      $,
-      {
-        items: o,
-        children: a,
-        dependencies: e,
-        idScope: i,
-        addIdAndValue: c
-      }
-    ) })
-  }
-), P = "_navigationHeader_j94pq_1", F = "_collapsed_j94pq_6", b = {
-  navigationHeader: P,
-  collapsed: F
-}, w = ({ className: t, ...o }) => {
-  const a = s(r);
-  return /* @__PURE__ */ n(
-    H,
-    {
-      className: N(t, b.navigationHeader, {
-        [b.collapsed]: a?.isCollapsed
-      }),
-      ...o
-    }
-  );
-}, z = "_navigationItem_1jt2l_1", x = {
-  navigationItem: z
-}, A = ({ className: t, ...o }) => {
-  const a = s(r);
-  return /* @__PURE__ */ n(
-    "li",
-    {
-      className: _(t, x.navigationItem, {
-        [x.collapsed]: a?.isCollapsed
-      }),
-      ...o
-    }
-  );
-}, B = "_navigationLink_14vyt_1", E = "_sidebar_14vyt_21", G = "_collapsed_14vyt_37", J = "_title_14vyt_40", d = {
-  navigationLink: B,
-  sidebar: E,
-  collapsed: G,
-  title: J
-}, eo = ({
-  as: t,
-  children: o,
-  className: a,
-  isActive: e,
-  title: i,
-  "aria-label": c,
-  ...l
-}) => {
-  const S = s(D), m = s(r), p = m?.isCollapsed, u = s(M), L = t || j, C = () => {
-    u?.isOpen && u?.setOpen(!1);
-  };
-  return /* @__PURE__ */ g(I, { isDisabled: !p, children: [
-    /* @__PURE__ */ n(k, { children: /* @__PURE__ */ g(
-      L,
-      {
-        "aria-current": e && "page",
-        "aria-label": c || (p ? i : void 0),
-        className: N(a, d.navigationLink, {
-          [d.sidebar]: m || S,
-          [d.collapsed]: p
-        }),
-        "data-active": e || void 0,
-        ...t ? {
-          onClick: (v) => {
-            C(), l.onClick?.(v);
-          }
-        } : {
-          onPress: (v) => {
-            C(), l.onPress?.(v);
-          }
-        },
-        ...l,
-        children: [
-          o,
-          /* @__PURE__ */ n("span", { className: d.title, children: i })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ n(T, { placement: "right", children: i })
-  ] });
-}, K = "_navigationSection_1ae77_1", Q = "_collapsed_1ae77_5", y = {
-  navigationSection: K,
-  collapsed: Q
-}, io = ({
-  className: t,
-  title: o,
-  ...a
-}) => {
-  const e = s(r);
-  return /* @__PURE__ */ n(A, { children: /* @__PURE__ */ g(
-    "ul",
-    {
-      className: _(t, y.navigationSection, {
-        [y.collapsed]: e?.isCollapsed
-      }),
-      children: [
-        o && /* @__PURE__ */ n(w, { children: o }),
-        /* @__PURE__ */ n(h, { ...a })
-      ]
-    }
-  ) });
-}, R = "_navigationSubMenu_vfyl6_1", U = "_collapsed_vfyl6_5", f = {
-  navigationSubMenu: R,
-  collapsed: U
-}, so = ({
-  className: t,
-  children: o,
-  items: a,
-  ...e
-}) => {
-  const i = s(r), { length: c } = Array.from(a || []);
-  return typeof o == "function" && c === 0 ? null : /* @__PURE__ */ n(
-    "ul",
-    {
-      className: _(t, f.navigationSubMenu, {
-        [f.collapsed]: i?.isCollapsed
-      }),
-      children: /* @__PURE__ */ n(
-        h,
-        {
-          items: a,
-          ...e,
-          children: o
-        }
-      )
-    }
-  );
-};
-export {
-  ao as N,
-  w as a,
-  A as b,
-  eo as c,
-  io as d,
-  so as e
-};