@midas-ds/components 17.8.3 → 17.9.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 17.9.0 (2026-03-19)
+
+### 🚀 Features
+
+- **components,search-field:** deprecate built-in submit button, fix a11y ([717b9b34ab](https://github.com/migrationsverket/midas/commit/717b9b34ab))
+
+### 🩹 Fixes
+
+- **components,search-field:** make built-in button non-breaking, add future flag ([4c6a0b985e](https://github.com/migrationsverket/midas/commit/4c6a0b985e))
+
+### 🏭 Refactoring
+
+- **components,search-field:** rebuild on RAC SearchField component ([86de78182e](https://github.com/migrationsverket/midas/commit/86de78182e))
+
+### 📖 Documentation changes
+
+- **components,search-field:** link v18 tracking issue from showButton JSDoc ([51c90e03b7](https://github.com/migrationsverket/midas/commit/51c90e03b7))
+
 ## 17.8.3 (2026-03-18)
 
 ### 🔧 Maintenance

package/assets/SearchField.css

@@ -1 +1 @@
-._container_19q7q_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary)}._container_19q7q_1[data-disabled=true]{cursor:not-allowed}._inner_19q7q_10{display:flex;width:100%}._inputContainer_19q7q_15{display:flex;position:relative;height:var(--midas-size-control);width:100%}._inputContainer_19q7q_15._medium_19q7q_21{height:var(--midas-size-control-md)}._icon_19q7q_26{color:var(--midas-icon-primary);position:absolute;margin-left:.875rem;left:0;top:50%;transform:translateY(-50%)}@media(forced-colors:active){._icon_19q7q_26{stroke:canvastext}}._clear_19q7q_39{display:flex;align-items:center;position:absolute;padding:.875rem;border:none;right:0;top:50%;transform:translateY(-50%);background-color:transparent}._clear_19q7q_39._medium_19q7q_21{height:var(--midas-size-control-md);padding:.625rem .875rem}._input_19q7q_15{all:unset;color:var(--midas-text-primary);box-sizing:border-box;line-height:1rem;appearance:none;background-color:var(--midas-field-01-base);width:100%;height:var(--midas-size-control);padding:var(--midas-space-70) 0 var(--midas-space-70) var(--midas-space-150);border-bottom:1px solid var(--midas-border-color-primary)}@media(forced-colors:active){._input_19q7q_15{border:1px solid}}._input_19q7q_15._medium_19q7q_21{height:var(--midas-size-control-md);padding:var(--midas-space-50) 0 var(--midas-space-50) var(--midas-space-150)}._input_19q7q_15:focus-visible{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._input_19q7q_15:focus-visible{outline:3px solid highlight;outline-offset:2px}}._input_19q7q_15[aria-invalid=true]{border:2px solid var(--midas-support-border-warning)}._input_19q7q_15[data-disabled]{pointer-events:none}@media(forced-colors:active){._input_19q7q_15[data-disabled]{border:1px solid}}._input_19q7q_15::-webkit-search-decoration,._input_19q7q_15::-webkit-search-cancel-button,._input_19q7q_15::-webkit-search-results-button,._input_19q7q_15::-webkit-search-results-decoration{-webkit-appearance:none}
+._container_1msv3_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary)}._container_1msv3_1[data-disabled]{cursor:not-allowed}._inner_1msv3_10{display:flex;width:100%}._inputContainer_1msv3_15{display:flex;position:relative;height:var(--midas-size-control);width:100%}._inputContainer_1msv3_15._medium_1msv3_21{height:var(--midas-size-control-md)}._icon_1msv3_26{color:var(--midas-icon-primary);position:absolute;left:var(--midas-space-70);top:50%;transform:translateY(-50%)}@media(forced-colors:active){._icon_1msv3_26{stroke:canvastext}}._clear_1msv3_38{display:flex;align-items:center;position:absolute;padding:var(--midas-space-70);border:none;right:0;top:50%;transform:translateY(-50%);background-color:transparent}._clear_1msv3_38._medium_1msv3_21{height:var(--midas-size-control-md);padding:var(--midas-space-50) var(--midas-space-70)}._input_1msv3_15{all:unset;color:var(--midas-text-primary);box-sizing:border-box;line-height:var(--midas-typography-line-height-10);appearance:none;background-color:var(--midas-field-01-base);width:100%;height:var(--midas-size-control);padding:var(--midas-space-70) 0 var(--midas-space-70) var(--midas-space-150);border-bottom:1px solid var(--midas-border-color-primary)}@media(forced-colors:active){._input_1msv3_15{border:1px solid}}._input_1msv3_15._medium_1msv3_21{height:var(--midas-size-control-md);padding:var(--midas-space-50) 0 var(--midas-space-50) var(--midas-space-150)}._input_1msv3_15:focus-visible{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._input_1msv3_15:focus-visible{outline:3px solid highlight;outline-offset:2px}}._input_1msv3_15[data-invalid]{border:none;box-shadow:var(--midas-state-invalid)}._input_1msv3_15[data-disabled]{pointer-events:none;background-color:var(--midas-field-disabled);border:none;border-bottom:1px solid var(--midas-border-color-disabled);color:var(--midas-text-disabled)}@media(forced-colors:active){._input_1msv3_15[data-disabled]{border:1px solid}}._input_1msv3_15::-webkit-search-decoration,._input_1msv3_15::-webkit-search-cancel-button,._input_1msv3_15::-webkit-search-results-button,._input_1msv3_15::-webkit-search-results-decoration{-webkit-appearance:none}

package/chunks/SearchField-VIMb28RB.js

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

package/index.js

@@ -29,7 +29,7 @@ import { M as Do } from "./chunks/Dialog-BSWBlyJI.js";
 import { P as Ro } from "./chunks/Popover-CjEPHe4A.js";
 import { P as Po } from "./chunks/ProgressBar-CBz_dIOH.js";
 import { R as vo, a as Fo } from "./chunks/Radio-CRHdSthr.js";
-import { S as Ao } from "./chunks/SearchField-C_wD8YuG.js";
+import { S as Ao } from "./chunks/SearchField-VIMb28RB.js";
 import { S as Ho } from "./chunks/Select-C01v_D--.js";
 import { S as Eo } from "./chunks/Skeleton-tiP1Syzf.js";
 import { S as wo } from "./chunks/Spinner-CfKMn18u.js";
@@ -49,7 +49,7 @@ import { c as wa } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as Oa, MenuTrigger as Qa, RouterProvider as Va } from "react-aria-components";
 import { u as ja } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as Ja } from "react-stately";
-const o = "17.8.3", a = {
+const o = "17.9.0", 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.8.3",
+  "version": "17.9.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/search-field/SearchField.d.ts

@@ -1,13 +1,31 @@
 import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
 import { Size } from '../common/types';
 import * as React from 'react';
-export interface SearchFieldProps extends AriaSearchFieldProps {
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'> {
     /** Placeholder text */
     placeholder: string;
     /**
-     *  Text displayed on the 'search' button
-     *  @default
-     *  'Sök'
+     * Whether to render a built-in submit button.
+     *
+     * **Future flag:** pass `showButton={false}` to opt into the v18 default today.
+     * In v18 the button will no longer be shown by default — compose your own `Button`
+     * outside `SearchField` instead. This prop will be removed in v18.
+     *
+     * @see https://github.com/migrationsverket/midas/issues/1109
+     *
+     * @example
+     * // Opt into v18 behavior now:
+     * <SearchField placeholder="Sök" onSubmit={handleSubmit} />
+     * <Button onPress={() => handleSubmit(value)}>Sök</Button>
+     *
+     * @default true
+     */
+    showButton?: boolean;
+    /**
+     * Text displayed on the built-in submit button.
+     *
+     * @deprecated since v17.9.0 — use your own `Button` instead. See `showButton`.
+     * @default 'Sök'
      */
     buttonText?: string;
     /**

package/search-field/SearchField.stories.d.ts

@@ -9,14 +9,23 @@ declare const _default: {
         layout: string;
     };
     args: {
-        buttonText: string;
         errorPosition: "top";
         className: string;
         size: "large";
     };
 };
 export default _default;
+/**
+ * Default behavior in v17 — the built-in submit button is shown.
+ * The button is not in the tab order; use Enter to submit or click the button.
+ */
 export declare const Primary: Story;
 export declare const CustomValidation: Story;
 export declare const Invalid: Story;
 export declare const Disabled: Story;
+/**
+ * Future default in v18 — opt in today with `showButton={false}`.
+ * Compose your own `Button` outside `SearchField` for explicit submit.
+ * Enter still works for keyboard submission.
+ */
+export declare const WithoutButton: Story;

package/search-field/index.js

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

package/chunks/SearchField-C_wD8YuG.js

@@ -1,128 +0,0 @@
-'use client';
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import { s as y } from "./TextField.module-BDIbEV87.js";
-import { B as C } from "./Button-GCROAMSl.js";
-import { C as F } from "./ClearButton-DkC8PIMi.js";
-import { c as l } from "./clsx-AexbMWKp.js";
-import * as N from "react";
-import { useSearchFieldState as x } from "react-stately";
-import { useSearchField as j } from "react-aria";
-import { F as f } from "./FieldError-krpMBtie.js";
-import { c as p } from "./createLucideIcon-CP-mMPfa.js";
-import { u as B } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/SearchField.css';const D = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], E = p("search", D), k = "_container_19q7q_1", P = "_inner_19q7q_10", T = "_inputContainer_19q7q_15", w = "_medium_19q7q_21", I = "_icon_19q7q_26", K = "_clear_19q7q_39", L = "_input_19q7q_15", n = {
-  container: k,
-  inner: P,
-  inputContainer: T,
-  medium: w,
-  icon: I,
-  clear: K,
-  input: L
-}, M = { search: "Search" }, R = { search: "Sök" }, V = {
-  en: M,
-  sv: R
-};
-function O(r) {
-  return !!r?.length;
-}
-const Z = ({
-  errorPosition: r = "top",
-  size: i = "large",
-  ...e
-}) => {
-  const { value: t, setValue: m } = x(e), b = B(V), d = N.useRef(null), { inputProps: o, isInvalid: c, validationErrors: h, clearButtonProps: q } = j(
-    {
-      ...e,
-      label: e.placeholder,
-      validationBehavior: "native"
-    },
-    { value: t, setValue: m },
-    d
-  ), v = ({ target: s }) => m(s.value), S = () => m(""), _ = () => {
-    if (e.validate && O(e.validate(t)) || c || !t) {
-      d.current?.focus();
-      return;
-    }
-    e.onSubmit && e.onSubmit(t);
-  }, g = ({ key: s }) => {
-    s === "Enter" && _();
-  };
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      className: l(n.container, e.className),
-      "data-disabled": o.disabled,
-      children: [
-        r === "top" && /* @__PURE__ */ a(f, { isInvalid: c, children: e.errorMessage ?? h.join(" ") }),
-        /* @__PURE__ */ u("div", { className: n.inner, children: [
-          /* @__PURE__ */ u(
-            "div",
-            {
-              className: l(n.inputContainer, {
-                [n.medium]: i === "medium"
-              }),
-              children: [
-                /* @__PURE__ */ a(
-                  E,
-                  {
-                    size: 20,
-                    className: n.icon
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  "input",
-                  {
-                    ...o,
-                    ...o.disabled && { "data-disabled": !0 },
-                    className: l(
-                      y.input,
-                      n.input,
-                      o.className,
-                      { [n.medium]: i === "medium" }
-                    ),
-                    ref: d,
-                    onChange: v,
-                    value: t,
-                    "aria-invalid": c,
-                    onKeyDown: g,
-                    "aria-label": e.placeholder,
-                    "aria-labelledby": ""
-                  }
-                ),
-                t.length > 0 && /* @__PURE__ */ a(
-                  F,
-                  {
-                    ...q,
-                    onPress: S,
-                    size: i,
-                    className: l(n.clear, {
-                      [n.medium]: i === "medium"
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ a(
-            C,
-            {
-              size: i,
-              isDisabled: e.isDisabled,
-              excludeFromTabOrder: !0,
-              onPress: _,
-              type: "button",
-              children: e.buttonText ? e.buttonText : b.format("search")
-            }
-          )
-        ] }),
-        r === "bottom" && /* @__PURE__ */ a(f, { isInvalid: c, children: e.errorMessage ?? h.join(" ") })
-      ]
-    }
-  );
-};
-export {
-  Z as S
-};