@midas-ds/components 17.14.6 → 17.14.8

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 17.14.8 (2026-05-12)
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.14.7
+
+## 17.14.7 (2026-05-11)
+
+### 🩹 Fixes
+
+- **components, search-field:** submit parent form on Enter when no onSubmit is provided ([aa984e2a998](https://github.com/migrationsverket/midas/commit/aa984e2a998))
+- **components,layout:** add badge pattern to navigation docs and fix sidebar transition ([b46ae8a3141](https://github.com/migrationsverket/midas/commit/b46ae8a3141))
+
+### 🧪 Tests updated
+
+- **components, search-field:** add form submission behaviour tests ([0a04b3e0024](https://github.com/migrationsverket/midas/commit/0a04b3e0024))
+
 ## 17.14.6 (2026-05-11)
 
 ### 🩹 Fixes

package/assets/BadgeContainer.css

@@ -1 +1 @@
-._badge_6i93e_1{font-family:var(--midas-typography-font-family);background-color:var(--midas-badge-background);min-width:.5rem;min-height:.5rem;border-radius:.5rem;font-size:.625rem;color:var(--midas-text-on-color)}._badge_6i93e_1._hasChildren_6i93e_10{display:flex;align-items:center;justify-content:center;padding:0 .25rem;min-height:1rem}._badgeContainer_6i93e_19{display:flex;position:relative}._badgeContainer_6i93e_19 ._badge_6i93e_1{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:center left}
+._badge_1fwow_1{font-family:var(--midas-typography-font-family);background-color:var(--midas-badge-background);min-width:.5rem;min-height:.5rem;border-radius:.5rem;font-size:.625rem;color:var(--midas-text-on-color)}._badge_1fwow_1._hasChildren_1fwow_10{display:flex;align-items:center;justify-content:center;padding:0 .25rem;min-height:1rem}._badgeContainer_1fwow_19{display:flex;min-width:0;position:relative}._badgeContainer_1fwow_19 ._badge_1fwow_1{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:center left}

package/badge/index.js

@@ -1,4 +1,4 @@
-import { B as o, a as r } from "../chunks/BadgeContainer-CKVsfTlF.js";
+import { B as o, a as r } from "../chunks/BadgeContainer-DyQDrY6S.js";
 export {
   o as Badge,
   r as BadgeContainer

package/chunks/BadgeContainer-DyQDrY6S.js

@@ -0,0 +1,38 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as d from "react";
+import { c as t } from "./clsx-AexbMWKp.js";
+import '../assets/BadgeContainer.css';const i = "_badge_1fwow_1", c = "_hasChildren_1fwow_10", g = "_badgeContainer_1fwow_19", s = {
+  badge: i,
+  hasChildren: c,
+  badgeContainer: g
+}, b = ({
+  children: a,
+  className: e,
+  ...n
+}) => {
+  const r = d.Children.count(a) > 0;
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      "data-badge": !0,
+      className: t(
+        s.badge,
+        r && s.hasChildren,
+        e
+      ),
+      ...n,
+      children: a
+    }
+  );
+}, l = ({ children: a, className: e, ...n }) => /* @__PURE__ */ o(
+  "span",
+  {
+    className: t(s.badgeContainer, e),
+    ...n,
+    children: a
+  }
+);
+export {
+  b as B,
+  l as a
+};

package/chunks/{Layout-C6Jjp3Pc.js → Layout-D-nVSBJY.js}

@@ -7,7 +7,7 @@ import { c as b } from "./clsx-AexbMWKp.js";
 import { Link as L, RouterProvider as P } from "react-aria-components";
 import { B as T } from "./Button-GCROAMSl.js";
 import { a as D, T as q } from "./Tooltip-BYEaNkZG.js";
-import { a as I, B as M } from "./BadgeContainer-CKVsfTlF.js";
+import { a as I, B as M } from "./BadgeContainer-DyQDrY6S.js";
 import { c as S } from "./createLucideIcon-CP-mMPfa.js";
 import { u as k } from "./useLocalizedStringFormatter-BHvsRxDk.js";
 import { variables as A } from "@midas-ds/theme";

package/chunks/SearchField-BXIDm898.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as i, jsxs as s, Fragment as g } from "react/jsx-runtime";
+import { useSlottedContext as j, FormContext as N, SearchField as p, Input as B } from "react-aria-components";
+import { s as C } from "./TextField.module-BDIbEV87.js";
+import { B as d } from "./Button-GCROAMSl.js";
+import { c } from "./clsx-AexbMWKp.js";
+import { F as h } from "./FieldError-krpMBtie.js";
+import { c as k } from "./createLucideIcon-CP-mMPfa.js";
+import { X as I } from "./x-B9bYxG31.js";
+import { u as D } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/SearchField.css';const E = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], T = k("search", E), w = "_container_1msv3_1", L = "_inner_1msv3_10", V = "_inputContainer_1msv3_15", $ = "_medium_1msv3_21", q = "_icon_1msv3_26", K = "_clear_1msv3_38", O = "_input_1msv3_15", e = {
+  container: w,
+  inner: L,
+  inputContainer: V,
+  medium: $,
+  icon: q,
+  clear: K,
+  input: O
+}, P = { search: "Search" }, X = { search: "Sök" }, A = {
+  en: P,
+  sv: X
+};
+function G(o) {
+  return !!o?.length;
+}
+const M = ({
+  errorPosition: o = "top",
+  size: a = "large",
+  showButton: v,
+  className: _,
+  errorMessage: m,
+  placeholder: l,
+  validationBehavior: f,
+  inputMode: S = "search",
+  ...n
+}) => {
+  const b = D(A), x = j(N), F = f ?? x?.validationBehavior ?? "aria", y = v !== !1, u = (t) => {
+    !t || n.isInvalid || n.validate && G(n.validate(t)) || n.onSubmit?.(t);
+  };
+  return /* @__PURE__ */ i(
+    p,
+    {
+      ...n,
+      inputMode: S,
+      onSubmit: u,
+      "aria-label": n["aria-label"] ?? l,
+      className: c(e.container, _),
+      validationBehavior: F,
+      children: ({ state: t }) => /* @__PURE__ */ s(g, { children: [
+        o === "top" && /* @__PURE__ */ i(h, { children: ({ validationErrors: r }) => m ?? r.join(" ") }),
+        /* @__PURE__ */ s("div", { className: e.inner, children: [
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: c(e.inputContainer, {
+                [e.medium]: a === "medium"
+              }),
+              children: [
+                /* @__PURE__ */ i(
+                  T,
+                  {
+                    size: 20,
+                    className: e.icon
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  B,
+                  {
+                    placeholder: l,
+                    className: c(C.input, e.input, {
+                      [e.medium]: a === "medium"
+                    }),
+                    onKeyDown: n.onSubmit ? void 0 : (r) => {
+                      r.key === "Enter" && t.value && !n.isInvalid && r.currentTarget.form?.requestSubmit();
+                    }
+                  }
+                ),
+                t.value.length > 0 && /* @__PURE__ */ i(
+                  d,
+                  {
+                    variant: "icon",
+                    size: a,
+                    className: c(e.clear, {
+                      [e.medium]: a === "medium"
+                    }),
+                    children: /* @__PURE__ */ i(
+                      I,
+                      {
+                        size: 20,
+                        "aria-hidden": !0
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          y && /* @__PURE__ */ i(
+            d,
+            {
+              slot: null,
+              excludeFromTabOrder: !0,
+              size: a,
+              isDisabled: n.isDisabled,
+              type: "button",
+              onPress: () => u(t.value),
+              children: n.buttonText ?? b.format("search")
+            }
+          )
+        ] }),
+        o === "bottom" && /* @__PURE__ */ i(h, { children: ({ validationErrors: r }) => m ?? r.join(" ") })
+      ] })
+    }
+  );
+};
+export {
+  M as S
+};

package/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { A as s, a as p } from "./chunks/AccordionItem-DHhQDd6o.js";
-import { B as m, a as i } from "./chunks/BadgeContainer-CKVsfTlF.js";
+import { B as m, a as i } from "./chunks/BadgeContainer-DyQDrY6S.js";
 import { B as n, a as d } from "./chunks/Breadcrumb-Bs836gOn.js";
 import { B as l } from "./chunks/Button-GCROAMSl.js";
 import { B as c } from "./chunks/ButtonGroup-Dr6HOBo2.js";
@@ -23,7 +23,7 @@ import { G as xa } from "./chunks/GridItem-DenBLGXB.js";
 import { H as ia } from "./chunks/Heading-nfcRc2QF.js";
 import { I as na } from "./chunks/InfoBanner-CWLvkP6D.js";
 import { L as Ta } from "./chunks/Label-Cqo7Xz2v.js";
-import { H as ga, L as ca, N as ua, S as Ca, a as La } from "./chunks/Layout-C6Jjp3Pc.js";
+import { H as ga, L as ca, N as ua, S as Ca, a as La } from "./chunks/Layout-D-nVSBJY.js";
 import { L as ba } from "./chunks/Link-CSIZehbN.js";
 import { L as Da } from "./chunks/LinkButton-Dzp8ZAPs.js";
 import { L as Fa, a as Ra } from "./chunks/Logo-DDykn5b2.js";
@@ -31,7 +31,7 @@ import { M as Pa, a as ka } from "./chunks/Modal-yigospxi.js";
 import { P as Ma } from "./chunks/Popover-CjEPHe4A.js";
 import { P as Aa } from "./chunks/ProgressBar-BrWLkY8H.js";
 import { R as ya, a as Ea } from "./chunks/Radio-CFolRKKY.js";
-import { S as wa } from "./chunks/SearchField-DRaSep82.js";
+import { S as wa } from "./chunks/SearchField-BXIDm898.js";
 import { S as za } from "./chunks/Select-BQ109AJG.js";
 import { S as Va } from "./chunks/Skeleton-ClvqZoDy.js";
 import { S as ja } from "./chunks/Spinner-CfKMn18u.js";
@@ -52,7 +52,7 @@ import { c as Ko } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as Wo, MenuTrigger as Xo, RouterProvider as Yo } from "react-aria-components";
 import { u as $o } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as or } from "react-stately";
-const a = "17.14.6", o = {
+const a = "17.14.8", o = {
   version: a
 }, r = o.version;
 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-C6Jjp3Pc.js";
+import { H as e, L as s, N as b, S as d, a as i } from "../chunks/Layout-D-nVSBJY.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": "17.14.6",
+  "version": "17.14.8",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/theme": "3.14.6",
+    "@midas-ds/theme": "3.14.7",
     "@react-aria/focus": "^3.21.5",
     "@react-stately/toggle": "^3.9.5",
     "@react-stately/utils": "^3.11.0",

package/search-field/index.js

@@ -1,4 +1,4 @@
-import { S as a } from "../chunks/SearchField-DRaSep82.js";
+import { S as a } from "../chunks/SearchField-BXIDm898.js";
 export {
   a as SearchField
 };

package/chunks/BadgeContainer-CKVsfTlF.js

@@ -1,37 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as i from "react";
-import { c as t } from "./clsx-AexbMWKp.js";
-import '../assets/BadgeContainer.css';const d = "_badge_6i93e_1", c = "_hasChildren_6i93e_10", C = "_badgeContainer_6i93e_19", s = {
-  badge: d,
-  hasChildren: c,
-  badgeContainer: C
-}, l = ({
-  children: a,
-  className: e,
-  ...n
-}) => {
-  const o = i.Children.count(a) > 0;
-  return /* @__PURE__ */ r(
-    "span",
-    {
-      className: t(
-        s.badge,
-        o && s.hasChildren,
-        e
-      ),
-      ...n,
-      children: a
-    }
-  );
-}, _ = ({ children: a, className: e, ...n }) => /* @__PURE__ */ r(
-  "span",
-  {
-    className: t(s.badgeContainer, e),
-    ...n,
-    children: a
-  }
-);
-export {
-  l as B,
-  _ as a
-};

package/chunks/SearchField-DRaSep82.js

@@ -1,118 +0,0 @@
-'use client';
-import { jsx as i, jsxs as s, Fragment as j } from "react/jsx-runtime";
-import { useSlottedContext as N, FormContext as g, SearchField as y, Input as B } from "react-aria-components";
-import { s as C } from "./TextField.module-BDIbEV87.js";
-import { B as u } from "./Button-GCROAMSl.js";
-import { c as o } from "./clsx-AexbMWKp.js";
-import { F as h } from "./FieldError-krpMBtie.js";
-import { c as k } from "./createLucideIcon-CP-mMPfa.js";
-import { X as I } from "./x-B9bYxG31.js";
-import { u as D } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/SearchField.css';const E = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], L = k("search", E), T = "_container_1msv3_1", V = "_inner_1msv3_10", $ = "_inputContainer_1msv3_15", w = "_medium_1msv3_21", O = "_icon_1msv3_26", P = "_clear_1msv3_38", X = "_input_1msv3_15", n = {
-  container: T,
-  inner: V,
-  inputContainer: $,
-  medium: w,
-  icon: O,
-  clear: P,
-  input: X
-}, q = { search: "Search" }, A = { search: "Sök" }, G = {
-  en: q,
-  sv: A
-};
-function H(a) {
-  return !!a?.length;
-}
-const M = ({
-  errorPosition: a = "top",
-  size: r = "large",
-  showButton: _,
-  className: v,
-  errorMessage: m,
-  placeholder: l,
-  validationBehavior: f,
-  inputMode: S = "search",
-  ...e
-}) => {
-  const b = D(G), p = N(g), x = f ?? p?.validationBehavior ?? "aria", F = _ !== !1, d = (t) => {
-    !t || e.isInvalid || e.validate && H(e.validate(t)) || e.onSubmit?.(t);
-  };
-  return /* @__PURE__ */ i(
-    y,
-    {
-      ...e,
-      inputMode: S,
-      onSubmit: d,
-      "aria-label": e["aria-label"] ?? l,
-      className: o(n.container, v),
-      validationBehavior: x,
-      children: ({ state: t }) => /* @__PURE__ */ s(j, { children: [
-        a === "top" && /* @__PURE__ */ i(h, { children: ({ validationErrors: c }) => m ?? c.join(" ") }),
-        /* @__PURE__ */ s("div", { className: n.inner, children: [
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: o(n.inputContainer, {
-                [n.medium]: r === "medium"
-              }),
-              children: [
-                /* @__PURE__ */ i(
-                  L,
-                  {
-                    size: 20,
-                    className: n.icon
-                  }
-                ),
-                /* @__PURE__ */ i(
-                  B,
-                  {
-                    placeholder: l,
-                    className: o(C.input, n.input, {
-                      [n.medium]: r === "medium"
-                    })
-                  }
-                ),
-                t.value.length > 0 && /* @__PURE__ */ i(
-                  u,
-                  {
-                    variant: "icon",
-                    size: r,
-                    className: o(n.clear, {
-                      [n.medium]: r === "medium"
-                    }),
-                    children: /* @__PURE__ */ i(
-                      I,
-                      {
-                        size: 20,
-                        "aria-hidden": !0
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          F && /* @__PURE__ */ i(
-            u,
-            {
-              slot: null,
-              excludeFromTabOrder: !0,
-              size: r,
-              isDisabled: e.isDisabled,
-              type: "button",
-              onPress: () => d(t.value),
-              children: e.buttonText ?? b.format("search")
-            }
-          )
-        ] }),
-        a === "bottom" && /* @__PURE__ */ i(h, { children: ({ validationErrors: c }) => m ?? c.join(" ") })
-      ] })
-    }
-  );
-};
-export {
-  M as S
-};