@midas-ds/layout 0.0.12 → 0.0.14

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.0.14 (2026-03-16)
+
+### 🧱 Updated Dependencies
+
+- Updated components to 17.8.2
+
+## 0.0.13 (2026-03-13)
+
+### 🩹 Fixes
+
+- **layout,panel:** suppress animation for prefers-reduced-motion ([b761e5d4f7](https://github.com/migrationsverket/midas/commit/b761e5d4f7))
+- **layout:** add overflow hidden to content to prevent scrollbar during animation ([7078674395](https://github.com/migrationsverket/midas/commit/7078674395))
+- **layout,panel:** add forwardRef to PanelBody for React 18 compat ([a0b06528a6](https://github.com/migrationsverket/midas/commit/a0b06528a6))
+- **layout, panel:** add animations to dismiss-panel ([b0e8733489](https://github.com/migrationsverket/midas/commit/b0e8733489))
+
 ## 0.0.12 (2026-03-13)
 
 ### 🧱 Updated Dependencies

package/assets/Layout.css

@@ -1 +1 @@
-._layout_1v9xd_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._content_1v9xd_9{display:flex;position:relative;height:100%}
+._layout_13ndd_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._content_13ndd_9{display:flex;position:relative;height:100%;overflow:hidden}

package/assets/Main.css

@@ -1 +1 @@
-._main_4xsf9_1{box-sizing:border-box;flex:1 1 auto;min-width:0;height:100%;overflow-y:auto;padding:1rem}
+._main_vtpiw_1{box-sizing:border-box;flex:1 1 auto;min-width:0;height:100%;overflow:hidden auto;padding:1rem}

package/assets/Panel.css

@@ -1 +1 @@
-._collapsePanel_1uy7t_1{width:15rem}._collapsePanel_1uy7t_1._collapsed_1uy7t_4{width:80px}@media(max-width:640px){._collapsePanel_1uy7t_1{display:none}}._panelHeader_1uy7t_13{gap:0}._panelTitle_1uy7t_17{font-size:var(--midas-typography-font-size-20);display:block}._panelBody_1rrgz_1{background-color:var(--midas-background-base);box-sizing:border-box;padding:1rem;transition:width var(--midas-transition-duration-fast) ease-out;width:100%}._panelHeader_11qv1_1{align-items:center;display:flex;justify-content:space-between}._panelTitle_w7y4m_1{display:block}._dismissPanel_dpjsv_1{position:absolute!important;top:0;right:0;width:320px;height:100%}@media not (min-width:800px){._dismissPanel_dpjsv_1{bottom:0;width:100%;height:25%;left:0;top:unset}}._panelTitle_dpjsv_18{font-size:var(--midas-typography-font-size-20);display:block}
+._collapsePanel_1uy7t_1{width:15rem}._collapsePanel_1uy7t_1._collapsed_1uy7t_4{width:80px}@media(max-width:640px){._collapsePanel_1uy7t_1{display:none}}._panelHeader_1uy7t_13{gap:0}._panelTitle_1uy7t_17{font-size:var(--midas-typography-font-size-20);display:block}._panelBody_1rrgz_1{background-color:var(--midas-background-base);box-sizing:border-box;padding:1rem;transition:width var(--midas-transition-duration-fast) ease-out;width:100%}._panelHeader_11qv1_1{align-items:center;display:flex;justify-content:space-between}._panelTitle_w7y4m_1{display:block}._dismissPanel_1vxt8_1{position:absolute!important;top:0;right:0;width:320px;height:100%;overflow:hidden}._dismissPanel_1vxt8_1[data-entering]{animation:_slide-horizontally_1vxt8_1 var(--midas-transition-duration-fast)}._dismissPanel_1vxt8_1[data-exiting]{animation:_slide-horizontally_1vxt8_1 var(--midas-transition-duration-fast) reverse ease-in}@media(prefers-reduced-motion:reduce){._dismissPanel_1vxt8_1[data-entering],._dismissPanel_1vxt8_1[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._dismissPanel_1vxt8_1{bottom:0;width:100%;height:25%;left:0;top:unset}._dismissPanel_1vxt8_1[data-entering]{animation:_slide-vertically_1vxt8_1 var(--midas-transition-duration-fast)}._dismissPanel_1vxt8_1[data-exiting]{animation:_slide-vertically_1vxt8_1 var(--midas-transition-duration-fast) reverse ease-in}}._panelTitle_1vxt8_44{font-size:var(--midas-typography-font-size-20);display:block}@keyframes _slide-horizontally_1vxt8_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_1vxt8_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}

package/chunks/{Layout-16EqvEZN.js → Layout-bfQkpzAm.js}

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import '../assets/Layout.css';const c = "_layout_1v9xd_1", e = "_content_1v9xd_9", a = {
+import '../assets/Layout.css';const c = "_layout_13ndd_1", e = "_content_13ndd_9", a = {
   layout: c,
   content: e
 }, y = ({ className: t, children: o, ...n }) => /* @__PURE__ */ s(
@@ -9,7 +9,7 @@ import '../assets/Layout.css';const c = "_layout_1v9xd_1", e = "_content_1v9xd_9
     ...n,
     children: o
   }
-), u = ({ className: t, children: o, ...n }) => /* @__PURE__ */ s(
+), d = ({ className: t, children: o, ...n }) => /* @__PURE__ */ s(
   "div",
   {
     className: `${t ?? ""} ${a.layout}`,
@@ -18,6 +18,6 @@ import '../assets/Layout.css';const c = "_layout_1v9xd_1", e = "_content_1v9xd_9
   }
 );
 export {
-  u as L,
+  d as L,
   y as a
 };

package/chunks/Main-DcX_nPtP.js

@@ -0,0 +1,13 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../assets/Main.css';const i = "_main_vtpiw_1", m = {
+  main: i
+}, o = ({ className: a, ...n }) => /* @__PURE__ */ s(
+  "main",
+  {
+    className: `${a} ${m.main}`,
+    ...n
+  }
+);
+export {
+  o as M
+};

package/chunks/Panel-FbEePT8O.js

@@ -0,0 +1,167 @@
+'use client';
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { C as S, P as O } from "./PanelContext-D6WQ7_yb.js";
+import { c as d, T as $ } from "./Text-B18MZHuN.js";
+import { useControlledState as _ } from "@react-stately/utils";
+import { u as B } from "./useIsMobileDevice-D0iMVFPx.js";
+import { forwardRef as y, useRef as M } from "react";
+import { c as P, u, B as x } from "./Button-7IYEsEeT.js";
+import { useExitAnimation as z, useObjectRef as D, useEnterAnimation as E, filterDOMProps as H } from "@react-aria/utils";
+import '../assets/Panel.css';const I = [
+  ["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 = P("panel-left-close", I);
+const w = [
+  ["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" }]
+], L = P("panel-left-open", w);
+const R = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+], q = P("x", R), A = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar", closePanel: "Close panel" }, F = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel", closePanel: "Stäng panel" }, v = {
+  en: A,
+  sv: F
+}, X = "_collapsePanel_1uy7t_1", G = "_collapsed_1uy7t_4", J = "_panelTitle_1uy7t_17", f = {
+  collapsePanel: X,
+  collapsed: G,
+  panelTitle: J
+}, K = ({
+  children: e,
+  className: s,
+  isCollapsed: l,
+  defaultCollapsed: t = !1,
+  onCollapseChange: o,
+  title: i,
+  ...c
+}) => {
+  const p = u(v), m = B(), [n, g] = _(
+    l,
+    t,
+    o
+  ), N = () => g((k) => !k);
+  return m ? null : /* @__PURE__ */ a(S.Provider, { value: { isCollapsed: n }, children: /* @__PURE__ */ r(
+    b,
+    {
+      className: d(s, f.collapsePanel, {
+        [f.collapsed]: n
+      }),
+      ...c,
+      children: [
+        /* @__PURE__ */ r(T, { children: [
+          /* @__PURE__ */ a("div", { children: !n && i && /* @__PURE__ */ a(
+            C,
+            {
+              className: f.panelTitle,
+              title: i
+            }
+          ) }),
+          /* @__PURE__ */ a(
+            x,
+            {
+              variant: "icon",
+              "aria-label": n ? p.format("expandSidebar") : p.format("collapseSidebar"),
+              onPress: N,
+              children: n ? /* @__PURE__ */ a(L, { size: 20 }) : /* @__PURE__ */ a(j, { size: 20 })
+            }
+          )
+        ] }),
+        e
+      ]
+    }
+  ) });
+}, Q = "_panelBody_1rrgz_1", U = {
+  panelBody: Q
+}, b = y(
+  ({ className: e, ...s }, l) => /* @__PURE__ */ a(
+    "aside",
+    {
+      ref: l,
+      className: d(e, U.panelBody),
+      ...s
+    }
+  )
+), V = "_panelHeader_11qv1_1", W = {
+  panelHeader: V
+}, T = ({ className: e, ...s }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: d(e, W.panelHeader),
+    ...s
+  }
+), Y = "_panelTitle_w7y4m_1", Z = {
+  panelTitle: Y
+}, C = ({ className: e, title: s, ...l }) => /* @__PURE__ */ a(
+  $,
+  {
+    className: d(e, Z.panelTitle),
+    ...l,
+    children: s
+  }
+), ee = "_dismissPanel_1vxt8_1", se = "_panelTitle_1vxt8_44", h = {
+  dismissPanel: ee,
+  panelTitle: se
+}, ae = (e) => {
+  const [s, l] = _(
+    e.isOpen,
+    e.defaultOpen || !1,
+    e.onOpenChange
+  ), t = M(null), o = z(t, s), i = () => l((c) => !c);
+  return !s && !o ? null : /* @__PURE__ */ a(
+    le,
+    {
+      isExiting: o,
+      onPress: i,
+      ref: t,
+      ...e
+    }
+  );
+}, le = y(({ className: e, title: s, onPress: l, children: t, isExiting: o, ...i }, c) => {
+  const p = u(v), m = D(c), n = E(m);
+  return /* @__PURE__ */ r(
+    b,
+    {
+      className: d(e, h.dismissPanel),
+      ref: m,
+      "data-entering": n || void 0,
+      "data-exiting": o || void 0,
+      ...H(i),
+      children: [
+        /* @__PURE__ */ r(T, { children: [
+          /* @__PURE__ */ a("div", { children: s && /* @__PURE__ */ a(
+            C,
+            {
+              className: h.panelTitle,
+              title: s
+            }
+          ) }),
+          /* @__PURE__ */ a(
+            x,
+            {
+              variant: "icon",
+              "aria-label": p.format("closePanel"),
+              onPress: l,
+              children: /* @__PURE__ */ a(q, { size: 20 })
+            }
+          )
+        ] }),
+        t
+      ]
+    }
+  );
+}), me = ({
+  variant: e = "collapse",
+  ...s
+}) => /* @__PURE__ */ r(O.Provider, { value: { variant: e }, children: [
+  e === "collapse" && /* @__PURE__ */ a(K, { ...s }),
+  e === "dismiss" && /* @__PURE__ */ a(ae, { ...s })
+] });
+export {
+  K as C,
+  ae as D,
+  me as P,
+  b as a,
+  T as b,
+  C as c
+};

package/index.js

@@ -1,8 +1,8 @@
 import { H as o, a as s, b as t, M as n } from "./chunks/Header-DjegZbd1.js";
-import { L as r, a as l } from "./chunks/Layout-16EqvEZN.js";
-import { M as m } from "./chunks/Main-QnNDtP6N.js";
+import { L as r, a as l } from "./chunks/Layout-bfQkpzAm.js";
+import { M as m } from "./chunks/Main-DcX_nPtP.js";
 import { N as P, a as M, b as N, c as f, d as C, e as b } from "./chunks/NavigationSubMenu-CpS-A3-h.js";
-import { C as v, D as g, P as u, a as H, b as c, c as L } from "./chunks/Panel-BsVbn7nx.js";
+import { C as v, D as g, P as u, a as H, b as c, c as L } from "./chunks/Panel-FbEePT8O.js";
 import { C as A, P as D } from "./chunks/PanelContext-D6WQ7_yb.js";
 import { N as k } from "./chunks/Navbar-wOOCcsru.js";
 import { M as I } from "./chunks/MobileMenuContext-Coj0sJ0N.js";

package/layout/index.js

@@ -1,4 +1,4 @@
-import { L as t, a as L } from "../chunks/Layout-16EqvEZN.js";
+import { L as t, a as L } from "../chunks/Layout-bfQkpzAm.js";
 export {
   t as Layout,
   L as LayoutContent

package/main/index.js

@@ -1,4 +1,4 @@
-import { M as r } from "../chunks/Main-QnNDtP6N.js";
+import { M as r } from "../chunks/Main-DcX_nPtP.js";
 export {
   r as Main
 };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Layout components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -36,6 +36,6 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/components": "17.8.1"
+    "@midas-ds/components": "17.8.2"
   }
 }

package/panel/dismiss-panel/DismissPanel.d.ts

@@ -4,4 +4,4 @@ export interface DismissTriggerProps {
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
 }
-export declare const DismissPanel: ({ children, className, isOpen: isOpenProp, defaultOpen, onOpenChange, title, ...rest }: PanelBodyProps & DismissTriggerProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DismissPanel: (props: PanelBodyProps & DismissTriggerProps) => import("react/jsx-runtime").JSX.Element | null;

package/panel/index.js

@@ -1,4 +1,4 @@
-import { C as l, D as s, P as n, a as P, b as o, c as t } from "../chunks/Panel-BsVbn7nx.js";
+import { C as l, D as s, P as n, a as P, b as o, c as t } from "../chunks/Panel-FbEePT8O.js";
 import { C as r, P as p } from "../chunks/PanelContext-D6WQ7_yb.js";
 export {
   l as CollapsePanel,

package/panel/panel-body/PanelBody.d.ts

@@ -1,3 +1,3 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 export type PanelBodyProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-export declare const PanelBody: ({ className, ...rest }: PanelBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PanelBody: import('react').ForwardRefExoticComponent<Omit<PanelBodyProps, "ref"> & import('react').RefAttributes<HTMLElement>>;

package/chunks/Main-QnNDtP6N.js

@@ -1,13 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import '../assets/Main.css';const m = "_main_4xsf9_1", i = {
-  main: m
-}, t = ({ className: s, ...a }) => /* @__PURE__ */ n(
-  "main",
-  {
-    className: `${s} ${i.main}`,
-    ...a
-  }
-);
-export {
-  t as M
-};

package/chunks/Panel-BsVbn7nx.js

@@ -1,156 +0,0 @@
-'use client';
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { C as S, P as g } from "./PanelContext-D6WQ7_yb.js";
-import { c as i, T as $ } from "./Text-B18MZHuN.js";
-import { useControlledState as v } from "@react-stately/utils";
-import { u as B } from "./useIsMobileDevice-D0iMVFPx.js";
-import { c as y, u, B as x } from "./Button-7IYEsEeT.js";
-import '../assets/Panel.css';const z = [
-  ["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" }]
-], M = y("panel-left-close", z);
-const H = [
-  ["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" }]
-], j = y("panel-left-open", H);
-const D = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], I = y("x", D), L = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar", closePanel: "Close panel" }, O = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel", closePanel: "Stäng panel" }, b = {
-  en: L,
-  sv: O
-}, q = "_collapsePanel_1uy7t_1", w = "_collapsed_1uy7t_4", E = "_panelTitle_1uy7t_17", P = {
-  collapsePanel: q,
-  collapsed: w,
-  panelTitle: E
-}, F = ({
-  children: s,
-  className: l,
-  isCollapsed: n,
-  defaultCollapsed: d = !1,
-  onCollapseChange: p,
-  title: o,
-  ...r
-}) => {
-  const c = u(b), m = B(), [a, _] = v(
-    n,
-    d,
-    p
-  ), h = () => _((k) => !k);
-  return m ? null : /* @__PURE__ */ e(S.Provider, { value: { isCollapsed: a }, children: /* @__PURE__ */ t(
-    T,
-    {
-      className: i(l, P.collapsePanel, {
-        [P.collapsed]: a
-      }),
-      ...r,
-      children: [
-        /* @__PURE__ */ t(C, { children: [
-          /* @__PURE__ */ e("div", { children: !a && o && /* @__PURE__ */ e(
-            N,
-            {
-              className: P.panelTitle,
-              title: o
-            }
-          ) }),
-          /* @__PURE__ */ e(
-            x,
-            {
-              variant: "icon",
-              "aria-label": a ? c.format("expandSidebar") : c.format("collapseSidebar"),
-              onPress: h,
-              children: a ? /* @__PURE__ */ e(j, { size: 20 }) : /* @__PURE__ */ e(M, { size: 20 })
-            }
-          )
-        ] }),
-        s
-      ]
-    }
-  ) });
-}, X = "_panelBody_1rrgz_1", A = {
-  panelBody: X
-}, T = ({ className: s, ...l }) => /* @__PURE__ */ e(
-  "aside",
-  {
-    className: i(s, A.panelBody),
-    ...l
-  }
-), G = "_panelHeader_11qv1_1", J = {
-  panelHeader: G
-}, C = ({ className: s, ...l }) => /* @__PURE__ */ e(
-  "div",
-  {
-    className: i(s, J.panelHeader),
-    ...l
-  }
-), K = "_panelTitle_w7y4m_1", Q = {
-  panelTitle: K
-}, N = ({ className: s, title: l, ...n }) => /* @__PURE__ */ e(
-  $,
-  {
-    className: i(s, Q.panelTitle),
-    ...n,
-    children: l
-  }
-), R = "_dismissPanel_dpjsv_1", U = "_panelTitle_dpjsv_18", f = {
-  dismissPanel: R,
-  panelTitle: U
-}, V = ({
-  children: s,
-  className: l,
-  isOpen: n,
-  defaultOpen: d = !1,
-  onOpenChange: p,
-  title: o,
-  ...r
-}) => {
-  const c = u(b), [m, a] = v(
-    n,
-    d,
-    p
-  ), _ = () => a((h) => !h);
-  return m ? /* @__PURE__ */ t(
-    T,
-    {
-      className: i(l, f.dismissPanel),
-      ...r,
-      children: [
-        /* @__PURE__ */ t(C, { children: [
-          /* @__PURE__ */ e("div", { children: o && /* @__PURE__ */ e(
-            N,
-            {
-              className: f.panelTitle,
-              title: o
-            }
-          ) }),
-          /* @__PURE__ */ e(
-            x,
-            {
-              variant: "icon",
-              "aria-label": c.format("closePanel"),
-              onPress: _,
-              children: /* @__PURE__ */ e(I, { size: 20 })
-            }
-          )
-        ] }),
-        s
-      ]
-    }
-  ) : null;
-}, ae = ({
-  variant: s = "collapse",
-  ...l
-}) => /* @__PURE__ */ t(g.Provider, { value: { variant: s }, children: [
-  s === "collapse" && /* @__PURE__ */ e(F, { ...l }),
-  s === "dismiss" && /* @__PURE__ */ e(V, { ...l })
-] });
-export {
-  F as C,
-  V as D,
-  ae as P,
-  T as a,
-  C as b,
-  N as c
-};