@midas-ds/layout 0.0.43 → 0.0.44

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.0.44 (2026-04-09)
+
+### 🩹 Fixes
+
+- **layout, mobile-menu:** add controlled state support ([4343a1d3ed](https://github.com/migrationsverket/midas/commit/4343a1d3ed))
+
 ## 0.0.43 (2026-04-08)
 
 ### 🧱 Updated Dependencies

package/chunks/Header-B9ggmyIG.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as e, jsxs as l, Fragment as M } from "react/jsx-runtime";
+import { c } from "./clsx-OuTLNxxd.js";
+import { forwardRef as b } from "react";
+import { composeRenderProps as d, ModalOverlay as f, Modal as y, Dialog as g } from "react-aria-components";
+import { Button as m, useLocalizedStringFormatter as x, DialogTrigger as w, Text as N, clsx as k, LogoContext as A } from "@midas-ds/components";
+import { u as h } from "./useIsMobileDevice-D0iMVFPx.js";
+import { M as H } from "./MobileMenuContext-Coj0sJ0N.js";
+import { c as D } from "./createLucideIcon-CP-mMPfa.js";
+import '../assets/Header.css';const $ = "_headerActions_1rka5_1", j = {
+  headerActions: $
+}, Z = ({ className: a, ...o }) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: c(a, j.headerActions),
+    ...o
+  }
+), P = "_label_1191f_1", z = {
+  label: P
+}, L = b(
+  ({ children: a, icon: o, ...r }, t) => (!a && !r["aria-label"] && process.env.NODE_ENV !== "production" && console.warn(
+    "Please provide an 'aria-label' for HeaderAction components that doesnt have a visible label (children)"
+  ), /* @__PURE__ */ e(
+    m,
+    {
+      ref: t,
+      size: "medium",
+      variant: "tertiary",
+      ...r,
+      children: d(a, (s) => /* @__PURE__ */ l(M, { children: [
+        o,
+        typeof s < "u" && /* @__PURE__ */ e("span", { className: z.label, children: s })
+      ] }))
+    }
+  ))
+);
+L.displayName = "HeaderAction";
+const O = [
+  ["path", { d: "M4 5h16", key: "1tepv9" }],
+  ["path", { d: "M4 12h16", key: "1lakjw" }],
+  ["path", { d: "M4 19h16", key: "1djgab" }]
+], C = D("menu", O), E = { openMenu: "Open menu" }, F = { openMenu: "Öppna meny" }, I = {
+  en: E,
+  sv: F
+}, R = "_overlay_1xtkw_1", T = "_drawer_1xtkw_19", B = "_dialog_1xtkw_44", S = "_header_1xtkw_50", n = {
+  overlay: R,
+  drawer: T,
+  dialog: B,
+  header: S
+}, ee = ({
+  children: a,
+  className: o,
+  defaultOpen: r,
+  isOpen: t,
+  onOpenChange: s,
+  title: i,
+  ...p
+}) => {
+  const _ = h(), u = x(I);
+  return _ ? /* @__PURE__ */ e(H.Provider, { value: {}, children: /* @__PURE__ */ l(
+    w,
+    {
+      isOpen: t,
+      onOpenChange: s,
+      defaultOpen: r,
+      children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            "aria-label": u.format("openMenu"),
+            icon: C,
+            variant: "icon"
+          }
+        ),
+        /* @__PURE__ */ e(
+          f,
+          {
+            className: k(o, n.overlay),
+            isDismissable: !0,
+            ...p,
+            children: d(a, (v) => /* @__PURE__ */ e(y, { className: n.drawer, children: /* @__PURE__ */ l(g, { className: n.dialog, children: [
+              i && /* @__PURE__ */ e(N, { className: n.header, children: i }),
+              v
+            ] }) }))
+          }
+        )
+      ]
+    }
+  ) }) : null;
+}, V = "_header_105ne_1", q = {
+  header: V
+}, ae = ({ className: a, ...o }) => {
+  const r = h();
+  return /* @__PURE__ */ e(A.Provider, { value: { size: r ? "x-small" : "large" }, children: /* @__PURE__ */ e(
+    "header",
+    {
+      className: c(a, q.header),
+      ...o
+    }
+  ) });
+};
+export {
+  ae as H,
+  ee as M,
+  L as a,
+  Z as b
+};

package/header/index.js

@@ -1,4 +1,4 @@
-import { H as o, a as r, b as s, M as t } from "../chunks/Header-B1Nk3vII.js";
+import { H as o, a as r, b as s, M as t } from "../chunks/Header-B9ggmyIG.js";
 import { M as n } from "../chunks/MobileMenuContext-Coj0sJ0N.js";
 export {
   o as Header,

package/header/mobile-menu/MobileMenu.d.ts

@@ -1,8 +1,10 @@
-import { ModalOverlayProps } from 'react-aria-components';
-export interface MobileMenuProps extends ModalOverlayProps {
+import { DialogTriggerProps, ModalOverlayProps } from 'react-aria-components';
+type StateValues = 'isOpen' | 'defaultOpen' | 'onOpenChange';
+export interface MobileMenuProps extends Omit<ModalOverlayProps, StateValues>, Pick<DialogTriggerProps, StateValues> {
     /**
      * A visible title for the menu
      */
     title?: string;
 }
-export declare const MobileMenu: ({ children, className, title, ...rest }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MobileMenu: ({ children, className, defaultOpen, isOpen, onOpenChange, title, ...rest }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/header/mobile-menu/MobileMenu.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react-vite';
+import { MobileMenu } from '.';
+type Story = StoryObj<typeof MobileMenu>;
+declare const _default: {
+    component: ({ children, className, defaultOpen, isOpen, onOpenChange, title, ...rest }: import('./MobileMenu').MobileMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+    title: string;
+    tags: string[];
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Controlled: Story;

package/header/mobile-menu/intl/translations.json.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  "en": {
+    "openMenu": "Open menu"
+  },
+  "sv": {
+    "openMenu": "Öppna meny"
+  }
+}
+;
+
+export default _default;

package/index.js

@@ -1,4 +1,4 @@
-import { H as o, a as t, b as r, M as n } from "./chunks/Header-B1Nk3vII.js";
+import { H as o, a as t, b as r, M as n } from "./chunks/Header-B9ggmyIG.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-D3hvuVFG.js";

package/package.json

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

package/chunks/Header-B1Nk3vII.js

@@ -1,89 +0,0 @@
-'use client';
-import { jsx as e, jsxs as n, Fragment as _ } from "react/jsx-runtime";
-import { c as i } from "./clsx-OuTLNxxd.js";
-import { forwardRef as p } from "react";
-import { composeRenderProps as c, ModalOverlay as u, Modal as v, Dialog as b } from "react-aria-components";
-import { Button as d, DialogTrigger as M, Text as f, clsx as y, LogoContext as x } from "@midas-ds/components";
-import { u as m } from "./useIsMobileDevice-D0iMVFPx.js";
-import { M as g } from "./MobileMenuContext-Coj0sJ0N.js";
-import { c as w } from "./createLucideIcon-CP-mMPfa.js";
-import '../assets/Header.css';const N = "_headerActions_1rka5_1", k = {
-  headerActions: N
-}, J = ({ className: a, ...o }) => /* @__PURE__ */ e(
-  "div",
-  {
-    className: i(a, k.headerActions),
-    ...o
-  }
-), A = "_label_1191f_1", H = {
-  label: A
-}, D = p(
-  ({ children: a, icon: o, ...r }, t) => (!a && !r["aria-label"] && process.env.NODE_ENV !== "production" && console.warn(
-    "Please provide an 'aria-label' for HeaderAction components that doesnt have a visible label (children)"
-  ), /* @__PURE__ */ e(
-    d,
-    {
-      ref: t,
-      size: "medium",
-      variant: "tertiary",
-      ...r,
-      children: c(a, (l) => /* @__PURE__ */ n(_, { children: [
-        o,
-        typeof l < "u" && /* @__PURE__ */ e("span", { className: H.label, children: l })
-      ] }))
-    }
-  ))
-);
-D.displayName = "HeaderAction";
-const $ = [
-  ["path", { d: "M4 5h16", key: "1tepv9" }],
-  ["path", { d: "M4 12h16", key: "1lakjw" }],
-  ["path", { d: "M4 19h16", key: "1djgab" }]
-], j = w("menu", $), P = "_overlay_1xtkw_1", z = "_drawer_1xtkw_19", C = "_dialog_1xtkw_44", E = "_header_1xtkw_50", s = {
-  overlay: P,
-  drawer: z,
-  dialog: C,
-  header: E
-}, K = ({
-  children: a,
-  className: o,
-  title: r,
-  ...t
-}) => m() ? /* @__PURE__ */ e(g.Provider, { value: {}, children: /* @__PURE__ */ n(M, { children: [
-  /* @__PURE__ */ e(
-    d,
-    {
-      icon: j,
-      variant: "icon"
-    }
-  ),
-  /* @__PURE__ */ e(
-    u,
-    {
-      className: y(o, s.overlay),
-      isDismissable: !0,
-      ...t,
-      children: c(a, (h) => /* @__PURE__ */ e(v, { className: s.drawer, children: /* @__PURE__ */ n(b, { className: s.dialog, children: [
-        r && /* @__PURE__ */ e(f, { className: s.header, children: r }),
-        h
-      ] }) }))
-    }
-  )
-] }) }) : null, I = "_header_105ne_1", L = {
-  header: I
-}, Q = ({ className: a, ...o }) => {
-  const r = m();
-  return /* @__PURE__ */ e(x.Provider, { value: { size: r ? "x-small" : "large" }, children: /* @__PURE__ */ e(
-    "header",
-    {
-      className: i(a, L.header),
-      ...o
-    }
-  ) });
-};
-export {
-  Q as H,
-  K as M,
-  D as a,
-  J as b
-};