@midas-ds/components 17.3.0 → 17.3.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 17.3.1 (2026-02-25)
+
+### 🩹 Fixes
+
+- **components:** give focus target a unique id to prevent ambiguous locator ([7cd771d591](https://github.com/migrationsverket/midas/commit/7cd771d591))
+- **components,date-picker:** replace fragile tab-counting with role-based queries in tests ([fb5b0b060a](https://github.com/migrationsverket/midas/commit/fb5b0b060a))
+
+### 🔧 Maintenance
+
+- **components:** move render wrapper focus target outside React container ([3f17dd9030](https://github.com/migrationsverket/midas/commit/3f17dd9030))
+
+### 🔙 Rollback changes
+
+- **components:** restore original render wrapper ([9c6fcdc5a7](https://github.com/migrationsverket/midas/commit/9c6fcdc5a7))
+
 ## 17.3.0 (2026-02-24)
 
 ### 🚀 Features

package/chunks/DateRangePicker-X6gmcMdv.js

@@ -0,0 +1,197 @@
+'use client';
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { Group as B, DatePickerStateContext as M, DateRangePickerStateContext as S, Popover as N, Dialog as R, DatePicker as G, DateRangePicker as L } from "react-aria-components";
+import { a as k } from "./clsx-AexbMWKp.js";
+import { C as I, R as O } from "./RangeCalendar-LheFd9WF.js";
+import { D as P, b as _, a as V } from "./DateInputDivider-DwopMIb9.js";
+import { F as g } from "./FieldError-krpMBtie.js";
+import { a as y, L as v } from "./Label-s4J9sYdy.js";
+import { T as D } from "./Text-D0r_W4lH.js";
+import * as f from "react";
+import { C as j } from "./ClearButton-DBr9Zfwq.js";
+import { FocusScope as w, useFocusManager as T } from "@react-aria/focus";
+import { B as $ } from "./Button-BhIvfqOc.js";
+import { c as E } from "./createLucideIcon-CP-mMPfa.js";
+import { u as b } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/DateRangePicker.css';const W = [
+  ["path", { d: "M8 2v4", key: "1cmpym" }],
+  ["path", { d: "M16 2v4", key: "4m81vk" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+  ["path", { d: "M3 10h18", key: "8toen8" }],
+  ["path", { d: "M8 14h.01", key: "6423bh" }],
+  ["path", { d: "M12 14h.01", key: "1etili" }],
+  ["path", { d: "M16 14h.01", key: "1gbofw" }],
+  ["path", { d: "M8 18h.01", key: "lrp35t" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }],
+  ["path", { d: "M16 18h.01", key: "kzsmim" }]
+], q = E("calendar-days", W), A = { clear: "Clear date", "open-calendar": "Open calendar" }, H = { clear: "Rensa datum", "open-calendar": "Öppna kalender" }, C = {
+  en: A,
+  sv: H
+}, J = "_datePicker_1g3e7_1", K = "_inputField_1g3e7_8", Q = "_medium_1g3e7_24", U = "_readOnly_1g3e7_47", X = "_buttonGroup_1g3e7_52", Y = "_iconButton_1g3e7_58", Z = "_dialog_1g3e7_81", n = {
+  datePicker: J,
+  inputField: K,
+  medium: Q,
+  readOnly: U,
+  buttonGroup: X,
+  iconButton: Y,
+  dialog: Z
+}, z = (t) => !!t && !!t.value && Object.prototype.hasOwnProperty.call(t.value, "start"), ee = ({
+  isClearable: t,
+  isDisabled: c,
+  isReadOnly: i,
+  size: a
+}) => {
+  const r = f.useContext(M), s = f.useContext(S), l = b(C), d = T(), o = s ?? r, p = z(o) ? !!o.value.start && o.value.end : !!o?.value;
+  return t && p && !i ? /* @__PURE__ */ e(
+    j,
+    {
+      onPress: () => {
+        o?.setValue(null), d?.focusFirst();
+      },
+      size: a,
+      isDisabled: c,
+      "aria-label": l.format("clear"),
+      className: k(n.iconButton, {
+        [n.medium]: a === "medium"
+      })
+    }
+  ) : null;
+}, x = ({
+  children: t,
+  isDisabled: c,
+  isInvalid: i,
+  isReadOnly: a,
+  size: r = "large",
+  isClearable: s = !1
+}) => {
+  const l = b(C);
+  return /* @__PURE__ */ e(
+    B,
+    {
+      className: k(n.inputField, {
+        [n.medium]: r === "medium",
+        [n.readOnly]: a
+      }),
+      children: /* @__PURE__ */ h(w, { children: [
+        t,
+        /* @__PURE__ */ h("div", { className: n.buttonGroup, children: [
+          /* @__PURE__ */ e(
+            ee,
+            {
+              isClearable: s,
+              isDisabled: c,
+              isReadOnly: a,
+              size: r
+            }
+          ),
+          /* @__PURE__ */ e(
+            $,
+            {
+              variant: "icon",
+              "aria-label": l.format("open-calendar"),
+              className: k(n.iconButton, {
+                [n.medium]: r === "medium",
+                [n.readOnly]: a
+              }),
+              "data-invalid": i || void 0,
+              size: r,
+              children: /* @__PURE__ */ e(
+                q,
+                {
+                  "aria-hidden": !0,
+                  size: 20
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}, F = ({
+  children: t
+}) => /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(R, { className: n.dialog, children: t }) }), he = ({
+  className: t,
+  description: c,
+  errorMessage: i,
+  errorPosition: a = "top",
+  label: r,
+  popover: s,
+  isClearable: l = !1,
+  isReadOnly: d,
+  isDisabled: o,
+  size: p,
+  ...m
+}) => /* @__PURE__ */ h(
+  G,
+  {
+    className: k(n.datePicker, t),
+    isReadOnly: d,
+    isDisabled: o,
+    ...m,
+    children: [
+      /* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
+      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
+      a === "top" && /* @__PURE__ */ e(g, { children: i }),
+      /* @__PURE__ */ e(
+        x,
+        {
+          isClearable: l,
+          isReadOnly: d,
+          isDisabled: o,
+          size: p,
+          ...m,
+          children: /* @__PURE__ */ e(P, { children: (u) => /* @__PURE__ */ e(_, { segment: u }) })
+        }
+      ),
+      a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
+      /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(I, {}) })
+    ]
+  }
+), ke = ({
+  className: t,
+  description: c,
+  errorMessage: i,
+  errorPosition: a = "top",
+  label: r,
+  popover: s,
+  isClearable: l = !1,
+  isReadOnly: d,
+  isDisabled: o,
+  size: p,
+  ...m
+}) => /* @__PURE__ */ h(
+  L,
+  {
+    className: k(n.datePicker, t),
+    isReadOnly: d,
+    isDisabled: o,
+    ...m,
+    children: [
+      /* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
+      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
+      a === "top" && /* @__PURE__ */ e(g, { children: i }),
+      /* @__PURE__ */ h(
+        x,
+        {
+          isClearable: l,
+          isReadOnly: d,
+          isDisabled: o,
+          size: p,
+          ...m,
+          children: [
+            /* @__PURE__ */ e(P, { slot: "start", children: (u) => /* @__PURE__ */ e(_, { segment: u }) }),
+            /* @__PURE__ */ e(V, {}),
+            /* @__PURE__ */ e(P, { slot: "end", children: (u) => /* @__PURE__ */ e(_, { segment: u }) })
+          ]
+        }
+      ),
+      a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
+      /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(O, {}) })
+    ]
+  }
+);
+export {
+  he as D,
+  ke as a
+};

package/date-picker/index.js

@@ -1,4 +1,4 @@
-import { D as r, a as t } from "../chunks/DateRangePicker-BCZ6i1w0.js";
+import { D as r, a as t } from "../chunks/DateRangePicker-X6gmcMdv.js";
 export {
   r as DatePicker,
   t as DateRangePicker

package/date-picker/intl/translations.json.d.ts

@@ -1,9 +1,11 @@
 declare const _default: {
   "en": {
-    "clear": "Clear date"
+    "clear": "Clear date",
+    "open-calendar": "Open calendar"
   },
   "sv": {
-    "clear": "Rensa datum"
+    "clear": "Rensa datum",
+    "open-calendar": "Öppna kalender"
   }
 }
 ;

package/index.js

@@ -13,7 +13,7 @@ import { C as y } from "./chunks/ColorSchemeSwitch-DkY8VTVR.js";
 import { C as N } from "./chunks/ComboBox-Dx4GD2oe.js";
 import { D as z } from "./chunks/DateField-h3l0qG7u.js";
 import { D as Q, a as V, b as Z } from "./chunks/DateInputDivider-DwopMIb9.js";
-import { D as q, a as J } from "./chunks/DateRangePicker-BCZ6i1w0.js";
+import { D as q, a as J } from "./chunks/DateRangePicker-X6gmcMdv.js";
 import { F as U } from "./chunks/FieldError-krpMBtie.js";
 import { D as X, F as Y } from "./chunks/FileUpload-Cu8DCSjX.js";
 import { G as $ } from "./chunks/Grid-CettmpaZ.js";
@@ -49,7 +49,7 @@ import { c as Na } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as za, MenuTrigger as Oa, RouterProvider as Qa } from "react-aria-components";
 import { u as Za } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as qa } from "react-stately";
-const o = "17.3.0", a = {
+const o = "17.3.1", a = {
   version: o
 }, r = a.version;
 export {

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.3.0",
+  "version": "17.3.1",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/chunks/DateRangePicker-BCZ6i1w0.js

@@ -1,193 +0,0 @@
-'use client';
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { Group as x, DatePickerStateContext as F, DateRangePickerStateContext as B, Popover as M, Dialog as S, DatePicker as N, DateRangePicker as R } from "react-aria-components";
-import { a as k } from "./clsx-AexbMWKp.js";
-import { C as G, R as L } from "./RangeCalendar-LheFd9WF.js";
-import { D as P, b as _, a as I } from "./DateInputDivider-DwopMIb9.js";
-import { F as g } from "./FieldError-krpMBtie.js";
-import { a as y, L as v } from "./Label-s4J9sYdy.js";
-import { T as D } from "./Text-D0r_W4lH.js";
-import * as f from "react";
-import { C as V } from "./ClearButton-DBr9Zfwq.js";
-import { FocusScope as j, useFocusManager as w } from "@react-aria/focus";
-import { B as O } from "./Button-BhIvfqOc.js";
-import { c as T } from "./createLucideIcon-CP-mMPfa.js";
-import { u as $ } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/DateRangePicker.css';const E = [
-  ["path", { d: "M8 2v4", key: "1cmpym" }],
-  ["path", { d: "M16 2v4", key: "4m81vk" }],
-  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
-  ["path", { d: "M3 10h18", key: "8toen8" }],
-  ["path", { d: "M8 14h.01", key: "6423bh" }],
-  ["path", { d: "M12 14h.01", key: "1etili" }],
-  ["path", { d: "M16 14h.01", key: "1gbofw" }],
-  ["path", { d: "M8 18h.01", key: "lrp35t" }],
-  ["path", { d: "M12 18h.01", key: "mhygvu" }],
-  ["path", { d: "M16 18h.01", key: "kzsmim" }]
-], W = T("calendar-days", E), q = { clear: "Clear date" }, A = { clear: "Rensa datum" }, H = {
-  en: q,
-  sv: A
-}, J = "_datePicker_1g3e7_1", K = "_inputField_1g3e7_8", Q = "_medium_1g3e7_24", U = "_readOnly_1g3e7_47", X = "_buttonGroup_1g3e7_52", Y = "_iconButton_1g3e7_58", Z = "_dialog_1g3e7_81", o = {
-  datePicker: J,
-  inputField: K,
-  medium: Q,
-  readOnly: U,
-  buttonGroup: X,
-  iconButton: Y,
-  dialog: Z
-}, z = (t) => !!t && !!t.value && Object.prototype.hasOwnProperty.call(t.value, "start"), ee = ({
-  isClearable: t,
-  isDisabled: c,
-  isReadOnly: i,
-  size: a
-}) => {
-  const r = f.useContext(F), s = f.useContext(B), u = $(H), l = w(), n = s ?? r, p = z(n) ? !!n.value.start && n.value.end : !!n?.value;
-  return t && p && !i ? /* @__PURE__ */ e(
-    V,
-    {
-      onPress: () => {
-        n?.setValue(null), l?.focusFirst();
-      },
-      size: a,
-      isDisabled: c,
-      "aria-label": u.format("clear"),
-      className: k(o.iconButton, {
-        [o.medium]: a === "medium"
-      })
-    }
-  ) : null;
-}, C = ({
-  children: t,
-  isDisabled: c,
-  isInvalid: i,
-  isReadOnly: a,
-  size: r = "large",
-  isClearable: s = !1
-}) => /* @__PURE__ */ e(
-  x,
-  {
-    className: k(o.inputField, {
-      [o.medium]: r === "medium",
-      [o.readOnly]: a
-    }),
-    children: /* @__PURE__ */ h(j, { children: [
-      t,
-      /* @__PURE__ */ h("div", { className: o.buttonGroup, children: [
-        /* @__PURE__ */ e(
-          ee,
-          {
-            isClearable: s,
-            isDisabled: c,
-            isReadOnly: a,
-            size: r
-          }
-        ),
-        /* @__PURE__ */ e(
-          O,
-          {
-            variant: "icon",
-            className: k(o.iconButton, {
-              [o.medium]: r === "medium",
-              [o.readOnly]: a
-            }),
-            "data-invalid": i || void 0,
-            size: r,
-            children: /* @__PURE__ */ e(
-              W,
-              {
-                "aria-hidden": !0,
-                size: 20
-              }
-            )
-          }
-        )
-      ] })
-    ] })
-  }
-), b = ({
-  children: t
-}) => /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(S, { className: o.dialog, children: t }) }), he = ({
-  className: t,
-  description: c,
-  errorMessage: i,
-  errorPosition: a = "top",
-  label: r,
-  popover: s,
-  isClearable: u = !1,
-  isReadOnly: l,
-  isDisabled: n,
-  size: p,
-  ...d
-}) => /* @__PURE__ */ h(
-  N,
-  {
-    className: k(o.datePicker, t),
-    isReadOnly: l,
-    isDisabled: n,
-    ...d,
-    children: [
-      /* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
-      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
-      a === "top" && /* @__PURE__ */ e(g, { children: i }),
-      /* @__PURE__ */ e(
-        C,
-        {
-          isClearable: u,
-          isReadOnly: l,
-          isDisabled: n,
-          size: p,
-          ...d,
-          children: /* @__PURE__ */ e(P, { children: (m) => /* @__PURE__ */ e(_, { segment: m }) })
-        }
-      ),
-      a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
-      /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(G, {}) })
-    ]
-  }
-), ke = ({
-  className: t,
-  description: c,
-  errorMessage: i,
-  errorPosition: a = "top",
-  label: r,
-  popover: s,
-  isClearable: u = !1,
-  isReadOnly: l,
-  isDisabled: n,
-  size: p,
-  ...d
-}) => /* @__PURE__ */ h(
-  R,
-  {
-    className: k(o.datePicker, t),
-    isReadOnly: l,
-    isDisabled: n,
-    ...d,
-    children: [
-      /* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
-      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
-      a === "top" && /* @__PURE__ */ e(g, { children: i }),
-      /* @__PURE__ */ h(
-        C,
-        {
-          isClearable: u,
-          isReadOnly: l,
-          isDisabled: n,
-          size: p,
-          ...d,
-          children: [
-            /* @__PURE__ */ e(P, { slot: "start", children: (m) => /* @__PURE__ */ e(_, { segment: m }) }),
-            /* @__PURE__ */ e(I, {}),
-            /* @__PURE__ */ e(P, { slot: "end", children: (m) => /* @__PURE__ */ e(_, { segment: m }) })
-          ]
-        }
-      ),
-      a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
-      /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(L, {}) })
-    ]
-  }
-);
-export {
-  he as D,
-  ke as a
-};