@midas-ds/components 16.8.2 → 16.8.4

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 16.8.4 (2026-02-16)
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.10.7
+
+## 16.8.3 (2026-02-12)
+
+### 🩹 Fixes
+
+- **components,toast:** add focus-visible to toast region ([0eae529892](https://github.com/migrationsverket/midas/commit/0eae529892))
+
+### 🔧 Maintenance
+
+- **components,menu:** deprecate `MenuItemObject` ([95b5ef21c1](https://github.com/migrationsverket/midas/commit/95b5ef21c1))
+
 ## 16.8.2 (2026-02-07)
 
 ### 🏭 Refactoring

package/assets/Toast.css

@@ -1 +1 @@
-@keyframes _slideInEnd_16lmz_1{0%{transform:translate(calc(100% + 1rem));opacity:0}to{transform:translate(0);opacity:1}}@keyframes _slideOutEnd_16lmz_1{0%{transform:translate(0);opacity:1}to{transform:translate(calc(100% + 1rem));opacity:0}}@keyframes _slideInTop_16lmz_1{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _slideOutTop_16lmz_1{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}._toastRegion_16lmz_49{position:fixed;left:50%;top:calc(92px + 1rem);transform:translate(-50%);display:flex;flex-direction:column;gap:8px;border:none;width:calc(100% - 2rem);z-index:var(--midas-z-index-toast)}._toastRegion_16lmz_49:focus-visible{outline:none}@media(min-width:768px){._toastRegion_16lmz_49{width:unset;left:unset;transform:unset;top:calc(80px + 1rem);right:1rem}}._toast_16lmz_49{font-family:var(--midas-typography-font-family);display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;color:var(--midas-text-primary);padding-left:calc(1rem - 3px);border-left:3px solid transparent;width:calc(100% - 1rem);font-size:.875rem}@media(forced-colors:active){._toast_16lmz_49{border:1px solid;border-left:3px solid}}._toast_16lmz_49[data-focus-visible],._toast_16lmz_49:focus-visible{outline:none;box-shadow:var(--midas-state-focus)}._toast_16lmz_49._success_16lmz_97{--bg: var(--midas-support-background-success);--border: var(--midas-support-border-success);background:var(--bg);border-left-color:var(--border)}._toast_16lmz_49._info_16lmz_105{--bg: var(--midas-support-background-info);--border: var(--midas-support-border-info);background:var(--bg);border-left-color:var(--border)}._toast_16lmz_49._important_16lmz_113{--border: var(--midas-support-border-important);--bg: var(--midas-support-background-important);background:var(--bg);border-left-color:var(--border)}._toast_16lmz_49._warning_16lmz_121{--border: var(--midas-support-border-warning);--bg: var(--midas-support-background-warning);background:var(--bg);border-left-color:var(--border)}._toast_16lmz_49 ._icon_16lmz_129{color:var(--midas-icon-primary);flex:0 0 auto}@media(forced-colors:active){._toast_16lmz_49 ._icon_16lmz_129{stroke:mark}}@media(min-width:768px){._toast_16lmz_49{width:18rem}}._toastContent_16lmz_143{padding:.875rem 0;display:flex;align-items:flex-start;gap:1rem}._toastMessage_16lmz_150{padding:.125rem 0 0;margin:0;line-height:1.2}::view-transition-new(._viewTransition_16lmz_156):only-child{animation-name:_slideInTop_16lmz_1;animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-direction:normal;animation-fill-mode:both}@media(min-width:768px){::view-transition-new(._viewTransition_16lmz_156):only-child{animation-name:_slideInEnd_16lmz_1}}::view-transition-old(._viewTransition_16lmz_156):only-child{animation-name:_slideOutTop_16lmz_1;animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-direction:normal;animation-fill-mode:both}@media(min-width:768px){::view-transition-old(._viewTransition_16lmz_156):only-child{animation-name:_slideOutEnd_16lmz_1}}@media(prefers-reduced-motion){::view-transition-new(._viewTransition_16lmz_156):only-child,::view-transition-old(._viewTransition_16lmz_156):only-child{animation:none}}
+@keyframes _slideInEnd_1gp8e_1{0%{transform:translate(calc(100% + 1rem));opacity:0}to{transform:translate(0);opacity:1}}@keyframes _slideOutEnd_1gp8e_1{0%{transform:translate(0);opacity:1}to{transform:translate(calc(100% + 1rem));opacity:0}}@keyframes _slideInTop_1gp8e_1{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _slideOutTop_1gp8e_1{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}._toastRegion_1gp8e_49{position:fixed;left:50%;top:calc(92px + 1rem);transform:translate(-50%);display:flex;flex-direction:column;gap:8px;border:none;width:calc(100% - 2rem);z-index:var(--midas-z-index-toast)}._toastRegion_1gp8e_49:focus-visible{outline:none;box-shadow:var(--midas-state-focus)}@media(min-width:768px){._toastRegion_1gp8e_49{width:unset;left:unset;transform:unset;top:calc(80px + 1rem);right:1rem}}._toast_1gp8e_49{font-family:var(--midas-typography-font-family);display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;color:var(--midas-text-primary);padding-left:calc(1rem - 3px);border-left:3px solid transparent;width:calc(100% - 1rem);font-size:.875rem}@media(forced-colors:active){._toast_1gp8e_49{border:1px solid;border-left:3px solid}}._toast_1gp8e_49[data-focus-visible],._toast_1gp8e_49:focus-visible{outline:none;box-shadow:var(--midas-state-focus)}._toast_1gp8e_49._success_1gp8e_98{--bg: var(--midas-support-background-success);--border: var(--midas-support-border-success);background:var(--bg);border-left-color:var(--border)}._toast_1gp8e_49._info_1gp8e_106{--bg: var(--midas-support-background-info);--border: var(--midas-support-border-info);background:var(--bg);border-left-color:var(--border)}._toast_1gp8e_49._important_1gp8e_114{--border: var(--midas-support-border-important);--bg: var(--midas-support-background-important);background:var(--bg);border-left-color:var(--border)}._toast_1gp8e_49._warning_1gp8e_122{--border: var(--midas-support-border-warning);--bg: var(--midas-support-background-warning);background:var(--bg);border-left-color:var(--border)}._toast_1gp8e_49 ._icon_1gp8e_130{color:var(--midas-icon-primary);flex:0 0 auto}@media(forced-colors:active){._toast_1gp8e_49 ._icon_1gp8e_130{stroke:mark}}@media(min-width:768px){._toast_1gp8e_49{width:18rem}}._toastContent_1gp8e_144{padding:.875rem 0;display:flex;align-items:flex-start;gap:1rem}._toastMessage_1gp8e_151{padding:.125rem 0 0;margin:0;line-height:1.2}::view-transition-new(._viewTransition_1gp8e_157):only-child{animation-name:_slideInTop_1gp8e_1;animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-direction:normal;animation-fill-mode:both}@media(min-width:768px){::view-transition-new(._viewTransition_1gp8e_157):only-child{animation-name:_slideInEnd_1gp8e_1}}::view-transition-old(._viewTransition_1gp8e_157):only-child{animation-name:_slideOutTop_1gp8e_1;animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-direction:normal;animation-fill-mode:both}@media(min-width:768px){::view-transition-old(._viewTransition_1gp8e_157):only-child{animation-name:_slideOutEnd_1gp8e_1}}@media(prefers-reduced-motion){::view-transition-new(._viewTransition_1gp8e_157):only-child,::view-transition-old(._viewTransition_1gp8e_157):only-child{animation:none}}

package/chunks/Toast-UPM-1ipu.js

@@ -0,0 +1,158 @@
+'use client';
+import { jsx as e, jsxs as c, Fragment as g } from "react/jsx-runtime";
+import { B as T } from "./Button-CaLOUTDO.js";
+import { useToast as f, useToastRegion as v } from "react-aria";
+import { ToastQueue as w, useToastQueue as h, useToastState as R } from "react-stately";
+import _ from "react";
+import { createPortal as y, flushSync as b } from "react-dom";
+import { c as l } from "./clsx-AexbMWKp.js";
+import { F as P } from "./FeedbackStatusIcon-X9Bjgeta.js";
+import { X as I } from "./x-B9bYxG31.js";
+import '../assets/Toast.css';const N = "_toastRegion_1gp8e_49", E = "_toast_1gp8e_49", O = "_success_1gp8e_98", x = "_info_1gp8e_106", C = "_important_1gp8e_114", M = "_warning_1gp8e_122", S = "_icon_1gp8e_130", k = "_toastContent_1gp8e_144", B = "_toastMessage_1gp8e_151", F = "_viewTransition_1gp8e_157", Q = "_slideInTop_1gp8e_1", V = "_slideInEnd_1gp8e_1", j = "_slideOutTop_1gp8e_1", G = "_slideOutEnd_1gp8e_1", n = {
+  toastRegion: N,
+  toast: E,
+  success: O,
+  info: x,
+  important: C,
+  warning: M,
+  icon: S,
+  toastContent: k,
+  toastMessage: B,
+  viewTransition: F,
+  slideInTop: Q,
+  slideInEnd: V,
+  slideOutTop: j,
+  slideOutEnd: G
+}, u = {
+  wrapUpdate(t) {
+    "startViewTransition" in document ? document.startViewTransition(() => {
+      b(t);
+    }) : t();
+  },
+  maxVisibleToasts: 5
+}, z = new w(u), Y = (t) => {
+  const o = h(z);
+  return o.visibleToasts.length > 0 ? y(
+    /* @__PURE__ */ e(
+      d,
+      {
+        ...t,
+        state: o
+      }
+    ),
+    document.body
+  ) : null;
+}, Z = ({ children: t, ...o }) => {
+  const s = R(u);
+  return /* @__PURE__ */ c(g, { children: [
+    typeof t == "function" ? t(s) : t,
+    s.visibleToasts.length > 0 && /* @__PURE__ */ e(
+      d,
+      {
+        ...o,
+        state: s
+      }
+    )
+  ] });
+};
+function d({
+  state: t,
+  className: o,
+  ...s
+}) {
+  const a = _.useRef(null), { regionProps: r } = v(s, t, a);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ...r,
+      ref: a,
+      className: l(n.toastRegion, o),
+      children: t.visibleToasts.map((i) => /* @__PURE__ */ e(
+        U,
+        {
+          toast: i,
+          state: t
+        },
+        i.key
+      ))
+    }
+  );
+}
+function U({
+  state: t,
+  className: o,
+  ...s
+}) {
+  const a = _.useRef(null), { toastProps: r, contentProps: i, titleProps: p, closeButtonProps: m } = f(
+    s,
+    t,
+    a
+  );
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ...r,
+      ref: a,
+      className: l(
+        n.toast,
+        n[s.toast.content.type],
+        o
+      ),
+      style: {
+        viewTransitionName: s.toast.key,
+        viewTransitionClass: n.viewTransition
+      },
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            ...i,
+            className: l(n.toastContent, i.className),
+            children: [
+              /* @__PURE__ */ e(
+                P,
+                {
+                  "aria-hidden": !0,
+                  className: n.icon,
+                  status: s.toast.content.type
+                }
+              ),
+              /* @__PURE__ */ c("div", { children: [
+                /* @__PURE__ */ e(
+                  "p",
+                  {
+                    className: n.toastMessage,
+                    ...p,
+                    children: s.toast.content.message
+                  }
+                ),
+                s.toast.content.children
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          T,
+          {
+            variant: "icon",
+            ...m,
+            children: /* @__PURE__ */ e(
+              I,
+              {
+                size: 20,
+                "aria-hidden": !0
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Y as G,
+  U as T,
+  Z as a,
+  d as b,
+  z as t
+};

package/index.js

@@ -39,7 +39,7 @@ 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 na, 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-UPM-1ipu.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";
@@ -50,7 +50,7 @@ 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.2", a = {
+const o = "16.8.4", a = {
   version: o
 }, r = a.version;
 export {

package/menu/Menu.d.ts

@@ -2,6 +2,9 @@ import { MenuTrigger, MenuTriggerProps, MenuProps as AriaMenuProps } from 'react
 import { Size } from '../common/types';
 import { ExcludeKeysFrom } from '../utils/types';
 export { MenuTrigger, type MenuTriggerProps };
+/**
+ * @deprecated Links are not enforced in menus.
+ */
 export type MenuItemObject = ExcludeKeysFrom<{
     [prop: string]: unknown;
 }, 'href'>;
@@ -11,4 +14,4 @@ export interface MenuProps<T> extends AriaMenuProps<T> {
      **/
     size?: Size;
 }
-export declare const Menu: <T extends MenuItemObject>({ className, size, ...rest }: MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: <T extends object>({ className, size, ...rest }: MenuProps<T>) => import("react/jsx-runtime").JSX.Element;

package/menu/Menu.stories.d.ts

@@ -9,13 +9,13 @@ interface Item {
 type Story = StoryObj<typeof Menu<Item>>;
 declare const _default: {
     title: string;
-    component: <T extends import('./Menu').MenuItemObject>({ className, size, ...rest }: import('./Menu').MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends object>({ className, size, ...rest }: import('./Menu').MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
     subcomponents: {
-        MenuItem: <T extends import('./Menu').MenuItemObject>(props: import('./MenuItem').MenuItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+        MenuItem: <T extends object>(props: import('./MenuItem').MenuItemProps<T>) => import("react/jsx-runtime").JSX.Element;
     };
-    render: (args: import('./Menu').MenuProps<import('./Menu').MenuItemObject>) => import("react/jsx-runtime").JSX.Element;
+    render: (args: import('./Menu').MenuProps<object>) => import("react/jsx-runtime").JSX.Element;
     args: {
-        children: (item: import('./Menu').MenuItemObject) => import("react/jsx-runtime").JSX.Element;
+        children: (item: object) => import("react/jsx-runtime").JSX.Element;
         items: {
             id: number;
             name: string;

package/menu/MenuItem.d.ts

@@ -1,5 +1,3 @@
 import { MenuItemProps as AriaMenuItemProps } from 'react-aria-components';
-import { LinkDOMProps } from '@react-types/shared';
-import { MenuItemObject } from '.';
-export type MenuItemProps<T> = Omit<AriaMenuItemProps<T>, keyof LinkDOMProps>;
-export declare const MenuItem: <T extends MenuItemObject>(props: MenuItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type MenuItemProps<T> = AriaMenuItemProps<T>;
+export declare const MenuItem: <T extends object>(props: MenuItemProps<T>) => import("react/jsx-runtime").JSX.Element;

package/package.json

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

package/toast/index.js

@@ -1,4 +1,4 @@
-import { G as s, T as t, a as e, b as r, t as T } from "../chunks/Toast-D7PXIDa9.js";
+import { G as s, T as t, a as e, b as r, t as T } from "../chunks/Toast-UPM-1ipu.js";
 import { useToastState as u } from "react-stately";
 export {
   s as GlobalToastRegion,

package/chunks/Toast-D7PXIDa9.js

@@ -1,158 +0,0 @@
-'use client';
-import { jsx as n, jsxs as c, Fragment as f } from "react/jsx-runtime";
-import { B as p } from "./Button-CaLOUTDO.js";
-import { useToast as g, useToastRegion as v } from "react-aria";
-import { ToastQueue as z, useToastQueue as w, useToastState as h } from "react-stately";
-import m from "react";
-import { createPortal as R, flushSync as y } from "react-dom";
-import { c as l } from "./clsx-AexbMWKp.js";
-import { F as b } from "./FeedbackStatusIcon-X9Bjgeta.js";
-import { X as P } from "./x-B9bYxG31.js";
-import '../assets/Toast.css';const I = "_toastRegion_16lmz_49", N = "_toast_16lmz_49", E = "_success_16lmz_97", O = "_info_16lmz_105", x = "_important_16lmz_113", C = "_warning_16lmz_121", M = "_icon_16lmz_129", S = "_toastContent_16lmz_143", k = "_toastMessage_16lmz_150", B = "_viewTransition_16lmz_156", F = "_slideInTop_16lmz_1", Q = "_slideInEnd_16lmz_1", V = "_slideOutTop_16lmz_1", j = "_slideOutEnd_16lmz_1", e = {
-  toastRegion: I,
-  toast: N,
-  success: E,
-  info: O,
-  important: x,
-  warning: C,
-  icon: M,
-  toastContent: S,
-  toastMessage: k,
-  viewTransition: B,
-  slideInTop: F,
-  slideInEnd: Q,
-  slideOutTop: V,
-  slideOutEnd: j
-}, _ = {
-  wrapUpdate(t) {
-    "startViewTransition" in document ? document.startViewTransition(() => {
-      y(t);
-    }) : t();
-  },
-  maxVisibleToasts: 5
-}, G = new z(_), Y = (t) => {
-  const o = w(G);
-  return o.visibleToasts.length > 0 ? R(
-    /* @__PURE__ */ n(
-      u,
-      {
-        ...t,
-        state: o
-      }
-    ),
-    document.body
-  ) : null;
-}, Z = ({ children: t, ...o }) => {
-  const s = h(_);
-  return /* @__PURE__ */ c(f, { children: [
-    typeof t == "function" ? t(s) : t,
-    s.visibleToasts.length > 0 && /* @__PURE__ */ n(
-      u,
-      {
-        ...o,
-        state: s
-      }
-    )
-  ] });
-};
-function u({
-  state: t,
-  className: o,
-  ...s
-}) {
-  const a = m.useRef(null), { regionProps: r } = v(s, t, a);
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      ...r,
-      ref: a,
-      className: l(e.toastRegion, o),
-      children: t.visibleToasts.map((i) => /* @__PURE__ */ n(
-        U,
-        {
-          toast: i,
-          state: t
-        },
-        i.key
-      ))
-    }
-  );
-}
-function U({
-  state: t,
-  className: o,
-  ...s
-}) {
-  const a = m.useRef(null), { toastProps: r, contentProps: i, titleProps: d, closeButtonProps: T } = g(
-    s,
-    t,
-    a
-  );
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      ...r,
-      ref: a,
-      className: l(
-        e.toast,
-        e[s.toast.content.type],
-        o
-      ),
-      style: {
-        viewTransitionName: s.toast.key,
-        viewTransitionClass: e.viewTransition
-      },
-      children: [
-        /* @__PURE__ */ c(
-          "div",
-          {
-            ...i,
-            className: l(e.toastContent, i.className),
-            children: [
-              /* @__PURE__ */ n(
-                b,
-                {
-                  "aria-hidden": !0,
-                  className: e.icon,
-                  status: s.toast.content.type
-                }
-              ),
-              /* @__PURE__ */ c("div", { children: [
-                /* @__PURE__ */ n(
-                  "p",
-                  {
-                    className: e.toastMessage,
-                    ...d,
-                    children: s.toast.content.message
-                  }
-                ),
-                s.toast.content.children
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ n(
-          p,
-          {
-            variant: "icon",
-            ...T,
-            children: /* @__PURE__ */ n(
-              P,
-              {
-                size: 20,
-                "aria-hidden": !0
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  Y as G,
-  U as T,
-  Z as a,
-  u as b,
-  G as t
-};