@midas-ds/components 17.18.0 → 17.20.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 17.20.0 (2026-08-14)
+
+### 🚀 Features
+
+- **components,search-field:** add label and description support ([96dcf586333](https://github.com/migrationsverket/midas/commit/96dcf586333))
+
+### 🩹 Fixes
+
+- **components,badge:** pin badge to icon corner in width-constrained containers ([b1d8e302d10](https://github.com/migrationsverket/midas/commit/b1d8e302d10))
+
+## 17.19.0 (2026-08-13)
+
+### 🚀 Features
+
+- **components,list-box:** add virtualized opt-out to ListBox/Select/ComboBox ([fc140394ec9](https://github.com/migrationsverket/midas/commit/fc140394ec9))
+
+### 🩹 Fixes
+
+- **components,combobox:** stop relying on ArrowDown to open in CI ([9b40aeb068a](https://github.com/migrationsverket/midas/commit/9b40aeb068a))
+- **components,combobox:** fix flaky virtualized opt-out test in CI ([8b4f9bffe21](https://github.com/migrationsverket/midas/commit/8b4f9bffe21))
+
 ## 17.18.0 (2026-08-13)
 
 ### 🚀 Features

package/assets/badge.css

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

package/assets/search-field.css

@@ -1 +1 @@
-._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{width:100%;display:flex}._inputContainer_1msv3_15{height:var(--midas-size-control);width:100%;display:flex;position:relative}._inputContainer_1msv3_15._medium_1msv3_21{height:var(--midas-size-control-md)}._icon_1msv3_26{color:var(--midas-icon-primary);left:var(--midas-space-70);position:absolute;top:50%;transform:translateY(-50%)}@media (forced-colors:active){._icon_1msv3_26{stroke:canvastext}}._clear_1msv3_38{padding:var(--midas-space-70);background-color:#0000;border:none;align-items:center;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}._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-offset:2px;outline:3px solid highlight}}._input_1msv3_15[data-invalid]{box-shadow:var(--midas-state-invalid);border:none}._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{-webkit-appearance:none}._input_1msv3_15::-webkit-search-cancel-button{-webkit-appearance:none}._input_1msv3_15::-webkit-search-results-button{-webkit-appearance:none}._input_1msv3_15::-webkit-search-results-decoration{-webkit-appearance:none}
+._container_qg7th_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);flex-direction:column;display:flex}._container_qg7th_1[data-disabled]{cursor:not-allowed}._inner_qg7th_12{width:100%;display:flex}._inputContainer_qg7th_17{height:var(--midas-size-control);width:100%;display:flex;position:relative}._inputContainer_qg7th_17._medium_qg7th_23{height:var(--midas-size-control-md)}._icon_qg7th_28{color:var(--midas-icon-primary);left:var(--midas-space-70);position:absolute;top:50%;transform:translateY(-50%)}@media (forced-colors:active){._icon_qg7th_28{stroke:canvastext}}._clear_qg7th_40{padding:var(--midas-space-70);background-color:#0000;border:none;align-items:center;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}._clear_qg7th_40._medium_qg7th_23{height:var(--midas-size-control-md);padding:var(--midas-space-50) var(--midas-space-70)}._input_qg7th_17{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_qg7th_17{border:1px solid}}._input_qg7th_17._medium_qg7th_23{height:var(--midas-size-control-md);padding:var(--midas-space-50) 0 var(--midas-space-50) var(--midas-space-150)}._input_qg7th_17:focus-visible{box-shadow:var(--midas-state-focus)}@media (forced-colors:active){._input_qg7th_17:focus-visible{outline-offset:2px;outline:3px solid highlight}}._input_qg7th_17[data-invalid]{box-shadow:var(--midas-state-invalid);border:none}._input_qg7th_17[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_qg7th_17[data-disabled]{border:1px solid}}._input_qg7th_17::-webkit-search-decoration{-webkit-appearance:none}._input_qg7th_17::-webkit-search-cancel-button{-webkit-appearance:none}._input_qg7th_17::-webkit-search-results-button{-webkit-appearance:none}._input_qg7th_17::-webkit-search-results-decoration{-webkit-appearance:none}

package/badge/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/badge-DrCn-5SX.js";
+import { n as e, t } from "../chunks/badge-DwPG4Jz8.js";
 export { e as Badge, t as BadgeContainer };

package/chunks/{badge-DrCn-5SX.js → badge-DwPG4Jz8.js}

@@ -2,9 +2,9 @@ import { t as e } from "./clsx-BtlV5Vo3.js";
 import * as t from "react";
 import { jsx as n } from "react/jsx-runtime";
 import '../assets/badge.css';var r = {
-	badge: "_badge_1fwow_1",
-	hasChildren: "_hasChildren_1fwow_10",
-	badgeContainer: "_badgeContainer_1fwow_19"
+	badge: "_badge_1nq3o_1",
+	hasChildren: "_hasChildren_1nq3o_10",
+	badgeContainer: "_badgeContainer_1nq3o_19"
 }, i = ({ children: i, className: a, ...o }) => {
 	let s = t.Children.count(i) > 0;
 	return /* @__PURE__ */ n("span", {

package/chunks/{combobox-Ids5V9io.js → combobox-UjxDfSoD.js}

@@ -5,7 +5,7 @@ import { t as n } from "./useLocalizedStringFormatter-bRLuRzVD.js";
 import { t as r } from "./text-mAeDlv5N.js";
 import { t as i } from "./field-error-DYp2kgFr.js";
 import { n as a, t as o } from "./label-Bius53F0.js";
-import { a as s, c, t as l } from "./list-box-BozMU8so.js";
+import { a as s, c, t as l } from "./list-box-DvX6VTa1.js";
 import { useRef as u } from "react";
 import { Button as d, ComboBox as f, Input as p } from "react-aria-components";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";

package/chunks/{layout-BzK7P4Xn.js → layout-DibnX6Za.js}

@@ -4,7 +4,7 @@ import { t } from "./createLucideIcon-DhIhuN5D.js";
 import { t as n } from "./x-Bs_QW3q8.js";
 import { t as r } from "./useLocalizedStringFormatter-bRLuRzVD.js";
 import { n as i } from "./button-CFjf-bDe.js";
-import { n as a, t as o } from "./badge-DrCn-5SX.js";
+import { n as a, t as o } from "./badge-DwPG4Jz8.js";
 import { t as s } from "./grid-CUYMbO7c.js";
 import { n as c, t as l } from "./tooltip-BE_r_CBm.js";
 import { t as u } from "./logo-D7tz-4hp.js";

package/chunks/{list-box-BozMU8so.js → list-box-DvX6VTa1.js}

@@ -24,15 +24,18 @@ var g = class extends l {
 	item: "_item_48j4n_187",
 	option: "_option_48j4n_188",
 	inputCheckbox: "_inputCheckbox_48j4n_188"
-}, v = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m(d, {
-	layout: g,
-	layoutOptions: { headingHeight: 38 },
-	children: /* @__PURE__ */ m(a, {
+}, v = ({ className: t, children: n, virtualized: r = !0, ...i }) => {
+	let o = /* @__PURE__ */ m(a, {
 		className: e(_.listBox, t),
-		...r,
+		...i,
 		children: n
-	})
-}), y = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("button", {
+	});
+	return r ? /* @__PURE__ */ m(d, {
+		layout: g,
+		layoutOptions: { headingHeight: 38 },
+		children: o
+	}) : o;
+}, y = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("button", {
 	type: "button",
 	className: e(_.listBoxItem, _.listBoxButton, t),
 	...r,

package/chunks/search-field-lz0_j_HR.js

@@ -0,0 +1,100 @@
+'use client';
+import { t as e } from "./clsx-BtlV5Vo3.js";
+import { t } from "./createLucideIcon-DhIhuN5D.js";
+import { t as n } from "./x-Bs_QW3q8.js";
+import { t as r } from "./useLocalizedStringFormatter-bRLuRzVD.js";
+import { n as i } from "./button-CFjf-bDe.js";
+import { t as a } from "./text-mAeDlv5N.js";
+import { t as o } from "./field-error-DYp2kgFr.js";
+import { n as s, t as c } from "./label-Bius53F0.js";
+import { t as l } from "./TextField.module-nF-1HOkH.js";
+import { FormContext as u, Input as d, SearchField as f, useSlottedContext as p } from "react-aria-components";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import '../assets/search-field.css';var _ = t("search", [["path", {
+	d: "m21 21-4.34-4.34",
+	key: "14j7rj"
+}], ["circle", {
+	cx: "11",
+	cy: "11",
+	r: "8",
+	key: "4ej97u"
+}]]), v = {
+	container: "_container_qg7th_1",
+	inner: "_inner_qg7th_12",
+	inputContainer: "_inputContainer_qg7th_17",
+	medium: "_medium_qg7th_23",
+	icon: "_icon_qg7th_28",
+	clear: "_clear_qg7th_40",
+	input: "_input_qg7th_17"
+}, y = {
+	en: { search: "Search" },
+	sv: { search: "Sök" }
+};
+//#endregion
+//#region packages/components/src/search-field/SearchField.tsx
+function b(e) {
+	return !!e?.length;
+}
+var x = ({ errorPosition: t = "top", size: x = "large", showButton: S, className: C, errorMessage: w, placeholder: T, label: E, description: D, popover: O, validationBehavior: k, inputMode: A = "search", ...j }) => {
+	let M = r(y), N = p(u), P = k ?? N?.validationBehavior ?? "aria", F = S !== !1, I = (e) => {
+		!e || j.isInvalid || j.validate && b(j.validate(e)) || j.onSubmit?.(e);
+	};
+	return /* @__PURE__ */ h(f, {
+		...j,
+		inputMode: A,
+		onSubmit: I,
+		"aria-label": E ? j["aria-label"] : j["aria-label"] ?? T,
+		className: e(v.container, C),
+		validationBehavior: P,
+		children: ({ state: r }) => /* @__PURE__ */ g(m, { children: [
+			/* @__PURE__ */ h(s, {
+				popover: O,
+				children: E && /* @__PURE__ */ h(c, { children: E })
+			}),
+			D && /* @__PURE__ */ h(a, {
+				slot: "description",
+				children: D
+			}),
+			t === "top" && /* @__PURE__ */ h(o, { children: ({ validationErrors: e }) => w ?? e.join(" ") }),
+			/* @__PURE__ */ g("div", {
+				className: v.inner,
+				children: [/* @__PURE__ */ g("div", {
+					className: e(v.inputContainer, { [v.medium]: x === "medium" }),
+					children: [
+						/* @__PURE__ */ h(_, {
+							size: 20,
+							className: v.icon
+						}),
+						/* @__PURE__ */ h(d, {
+							placeholder: T,
+							className: e(l.input, v.input, { [v.medium]: x === "medium" }),
+							onKeyDown: j.onSubmit ? void 0 : (e) => {
+								e.key === "Enter" && r.value && !j.isInvalid && e.currentTarget.form?.requestSubmit();
+							}
+						}),
+						r.value.length > 0 && /* @__PURE__ */ h(i, {
+							variant: "icon",
+							size: x,
+							className: e(v.clear, { [v.medium]: x === "medium" }),
+							children: /* @__PURE__ */ h(n, {
+								size: 20,
+								"aria-hidden": !0
+							})
+						})
+					]
+				}), F && /* @__PURE__ */ h(i, {
+					slot: null,
+					excludeFromTabOrder: !0,
+					size: x,
+					isDisabled: j.isDisabled,
+					type: "button",
+					onPress: () => I(r.value),
+					children: j.buttonText ?? M.format("search")
+				})]
+			}),
+			t === "bottom" && /* @__PURE__ */ h(o, { children: ({ validationErrors: e }) => w ?? e.join(" ") })
+		] })
+	});
+};
+//#endregion
+export { x as t };

package/chunks/{select-Dlp6n8oE.js → select-DneAUko_.js}

@@ -7,7 +7,7 @@ import { t as o } from "./text-mAeDlv5N.js";
 import { t as s } from "./field-error-DYp2kgFr.js";
 import { n as c, t as l } from "./label-Bius53F0.js";
 import { t as u } from "./popover-Bx2Rch_E.js";
-import { c as d } from "./list-box-BozMU8so.js";
+import { c as d } from "./list-box-DvX6VTa1.js";
 import { n as f, r as p, t as m } from "./tag-CELJrUEQ.js";
 import h, { useContext as g } from "react";
 import { Button as _, Select as v, SelectStateContext as y, SelectValue as b } from "react-aria-components";
@@ -125,15 +125,15 @@ import '../assets/select.css';var E = {
 };
 //#endregion
 //#region packages/components/src/select/Select.tsx
-function N({ children: e, description: n, errorMessage: r, errorPosition: i = "top", items: a, label: f, popover: p, popoverProps: m, size: h = "large", ...g }) {
+function N({ children: e, description: n, errorMessage: r, errorPosition: i = "top", items: a, label: f, popover: p, popoverProps: m, listBoxProps: h, size: g = "large", ..._ }) {
 	return /* @__PURE__ */ S(w, { children: /* @__PURE__ */ C(v, {
-		...g,
-		className: t(g.className, D.select),
+		..._,
+		className: t(_.className, D.select),
 		children: [
 			/* @__PURE__ */ S(c, {
 				popover: p,
 				children: f && /* @__PURE__ */ S(l, {
-					"data-disabled": g.isDisabled || void 0,
+					"data-disabled": _.isDisabled || void 0,
 					children: f
 				})
 			}),
@@ -144,11 +144,11 @@ function N({ children: e, description: n, errorMessage: r, errorPosition: i = "t
 			i === "top" && /* @__PURE__ */ S(s, { children: r }),
 			/* @__PURE__ */ C("div", {
 				className: D.triggerContainer,
-				"data-disabled": g.isDisabled || void 0,
+				"data-disabled": _.isDisabled || void 0,
 				children: [/* @__PURE__ */ S(M, {
-					size: h,
-					...g
-				}), g.selectionMode === "multiple" ? /* @__PURE__ */ S(k, { ...g }) : null]
+					size: g,
+					..._
+				}), _.selectionMode === "multiple" ? /* @__PURE__ */ S(k, { ..._ }) : null]
 			}),
 			i === "bottom" && /* @__PURE__ */ S(s, { children: r }),
 			/* @__PURE__ */ C(u, {
@@ -156,13 +156,14 @@ function N({ children: e, description: n, errorMessage: r, errorPosition: i = "t
 				hideArrow: !0,
 				...m,
 				className: t(m?.className, D.popover),
-				children: [g.isSelectableAll && /* @__PURE__ */ S(O, {}), /* @__PURE__ */ S(d, {
+				children: [_.isSelectableAll && /* @__PURE__ */ S(O, {}), /* @__PURE__ */ S(d, {
 					escapeKeyBehavior: "none",
 					items: a,
+					...h,
 					children: e
 				})]
 			}),
-			/* @__PURE__ */ S(j, { ...g })
+			/* @__PURE__ */ S(j, { ..._ })
 		]
 	}) });
 }

package/combobox/ComboBox.stories.d.ts

@@ -35,6 +35,7 @@ export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Required: Story;
 export declare const Sectioned: Story<Section>;
+export declare const NotVirtualized: Story<Section>;
 export declare const PerformanceTest: Story;
 export declare const AsynchronousLoadingWithEmptyMessage: Story;
 export declare const InfiniteScroll: Story;

package/combobox/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/combobox-Ids5V9io.js";
+import { t as e } from "../chunks/combobox-UjxDfSoD.js";
 export { e as ComboBox };

package/index.js

@@ -3,7 +3,7 @@
 import { n as e, t } from "./chunks/accordion-KEgnlzYi.js";
 import { t as n } from "./chunks/clsx-BtlV5Vo3.js";
 import { t as r } from "./chunks/spinner-C3WiZYld.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./chunks/layout-BzK7P4Xn.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./chunks/layout-DibnX6Za.js";
 import { t as l } from "./chunks/link-CZNuhFX6.js";
 import { a as u, i as d, n as f, o as p, r as m, t as h } from "./chunks/table-jarDZ4q4.js";
 import { t as g } from "./chunks/link-button-ZsK6UGko.js";
@@ -11,12 +11,12 @@ import { n as _, t as v } from "./chunks/date-picker-BQcIYROH.js";
 import { n as y, t as b } from "./chunks/calendar-C0rlcHfr.js";
 import { n as x, t as S } from "./chunks/checkbox-DEN5T_Km.js";
 import { n as C, t as w } from "./chunks/color-scheme-switch-FjmPZdE4.js";
-import { t as T } from "./chunks/search-field-Ci2UjkmK.js";
+import { t as T } from "./chunks/search-field-lz0_j_HR.js";
 import { n as E, t as D } from "./chunks/file-list-DYOuch5G.js";
 import { t as O } from "./chunks/useLocalizedStringFormatter-bRLuRzVD.js";
 import { n as k, t as A } from "./chunks/button-CFjf-bDe.js";
 import { t as j } from "./chunks/heading-595zCrRS.js";
-import { n as M, t as N } from "./chunks/badge-DrCn-5SX.js";
+import { n as M, t as N } from "./chunks/badge-DwPG4Jz8.js";
 import { n as P, t as F } from "./chunks/breadcrumbs-XTH3axtt.js";
 import { t as I } from "./chunks/text-mAeDlv5N.js";
 import { t as L } from "./chunks/field-error-DYp2kgFr.js";
@@ -28,8 +28,8 @@ import { n as X, r as Z, t as Q } from "./chunks/modal-Dr0ythpF.js";
 import { t as $ } from "./chunks/icons-Dw_ZbztW.js";
 import { n as ee, t as te } from "./chunks/toggle-button-DlPo9GJW.js";
 import { a as ne, i as re, n as ie, o as ae, r as oe, t as se } from "./chunks/menu-CB6VDQ-u.js";
-import { t as ce } from "./chunks/combobox-Ids5V9io.js";
-import { a as le, c as ue, i as de, n as fe, o as pe, r as me, s as he, t as ge } from "./chunks/list-box-BozMU8so.js";
+import { t as ce } from "./chunks/combobox-UjxDfSoD.js";
+import { a as le, c as ue, i as de, n as fe, o as pe, r as me, s as he, t as ge } from "./chunks/list-box-DvX6VTa1.js";
 import { i as _e, n as ve, r as ye, t as be } from "./chunks/date-field-CYk8-UEY.js";
 import { n as xe, t as Se } from "./chunks/file-upload-CZRTVw5O.js";
 import { n as Ce, t as we } from "./chunks/grid-CUYMbO7c.js";
@@ -38,7 +38,7 @@ import { n as Ee, t as De } from "./chunks/tooltip-BE_r_CBm.js";
 import { n as Oe, t as ke } from "./chunks/logo-D7tz-4hp.js";
 import { t as Ae } from "./chunks/progress-bar-5H5WvG7R.js";
 import { n as je, t as Me } from "./chunks/radio-CsAvwCn2.js";
-import { t as Ne } from "./chunks/select-Dlp6n8oE.js";
+import { t as Ne } from "./chunks/select-DneAUko_.js";
 import { n as Pe, r as Fe, t as Ie } from "./chunks/tag-CELJrUEQ.js";
 import { t as Le } from "./chunks/skeleton-OqKFBcmO.js";
 import { i as Re, n as ze, r as Be, t as Ve } from "./chunks/tabs-eshGdQJJ.js";
@@ -59,7 +59,7 @@ var $e = {
 	description: "Midas Components",
 	homepage: "https://designsystem.migrationsverket.se/",
 	license: "CC0-1.0",
-	version: "17.18.0",
+	version: "17.20.0",
 	module: "./index.js",
 	type: "module",
 	main: "./index.js",

package/layout/index.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "../chunks/layout-BzK7P4Xn.js";
+import { a as e, i as t, n, r, t as i } from "../chunks/layout-DibnX6Za.js";
 export { r as Header, i as Layout, n as Navbar, t as Sidebar, e as SidebarLink };

package/list-box/ListBox.d.ts

@@ -1,3 +1,6 @@
-import { ListBoxProps } from 'react-aria-components';
-export type { ListBoxProps };
-export declare const ListBox: <T extends object>({ className, children, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+import { ListBoxProps as AriaListBoxProps } from 'react-aria-components';
+export interface ListBoxProps<T extends object> extends AriaListBoxProps<T> {
+    /** @default true */
+    virtualized?: boolean;
+}
+export declare const ListBox: <T extends object>({ className, children, virtualized, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/list-box/ListBox.stories.d.ts

@@ -3,7 +3,7 @@ import { Fruit } from '../../../../tools/test-utils/src/index.ts';
 import { ListBox } from './ListBox';
 type Story = StoryObj<typeof ListBox<Fruit>>;
 declare const _default: {
-    component: <T extends object>({ className, children, ...rest }: import('react-aria-components').ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends object>({ className, children, virtualized, ...rest }: import('./ListBox').ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
     subcomponents: {
         ListBoxItem: <T extends object>({ children, className, textValue, ...rest }: import('react-aria-components').ListBoxItemProps<T>) => import("react/jsx-runtime").JSX.Element;
     };
@@ -20,3 +20,4 @@ declare const _default: {
 };
 export default _default;
 export declare const SelectionModeSingle: Story;
+export declare const NotVirtualized: Story;

package/list-box/index.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../chunks/list-box-BozMU8so.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../chunks/list-box-DvX6VTa1.js";
 export { t as ListBox, o as ListBoxButton, s as ListBoxEmptyState, r as ListBoxHeader, i as ListBoxItem, a as ListBoxLoadMoreItem, e as ListBoxPopover, n as ListBoxSection };

package/package.json

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

package/search-field/SearchField.d.ts

@@ -1,8 +1,14 @@
 import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
 import { Size } from '../common/types';
+import { InfoPopoverProps } from '../label';
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'> {
     /** Placeholder text */
     placeholder: string;
+    /** Specify label displayed above the SearchField */
+    label?: string;
+    /** Specify description displayed below the label */
+    description?: string;
+    popover?: InfoPopoverProps;
     /**
      * Whether to render a built-in submit button.
      *
@@ -37,4 +43,4 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'>
      * */
     size?: Size;
 }
-export declare const SearchField: ({ errorPosition, size, showButton, className, errorMessage, placeholder, validationBehavior, inputMode, ...props }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchField: ({ errorPosition, size, showButton, className, errorMessage, placeholder, label, description, popover, validationBehavior, inputMode, ...props }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { SearchField } from './SearchField';
 type Story = StoryObj<typeof SearchField>;
 declare const _default: {
-    component: ({ errorPosition, size, showButton, className, errorMessage, placeholder, validationBehavior, inputMode, ...props }: import('./SearchField').SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ errorPosition, size, showButton, className, errorMessage, placeholder, label, description, popover, validationBehavior, inputMode, ...props }: import('./SearchField').SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
     parameters: {
@@ -29,3 +29,6 @@ export declare const Disabled: Story;
  * Enter still works for keyboard submission.
  */
 export declare const WithoutButton: Story;
+export declare const WithHelpPopover: Story;
+export declare const WithLabelAndDescription: Story;
+export declare const WithLabelAndDescriptionWithoutButton: Story;

package/search-field/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/search-field-Ci2UjkmK.js";
+import { t as e } from "../chunks/search-field-lz0_j_HR.js";
 export { e as SearchField };

package/select/Select.d.ts

@@ -1,6 +1,7 @@
 import { SelectProps, ValidationResult } from 'react-aria-components';
 import { InfoPopoverProps } from '../label';
 import { Size } from '../common/types';
+import { ListBoxProps } from '../list-box';
 import { Popover } from '../popover';
 import * as React from 'react';
 export type SelectionMode = 'single' | 'multiple';
@@ -35,5 +36,9 @@ export interface MidasSelectProps<T extends object, M extends SelectionMode = 's
      * Props passed to the internal Popover element.
      */
     popoverProps?: Omit<React.ComponentProps<typeof Popover>, 'children'>;
+    /**
+     * Props passed to the internal ListBox element.
+     */
+    listBoxProps?: Omit<ListBoxProps<T>, 'items' | 'children'>;
 }
-export declare function Select<T extends object, M extends SelectionMode = 'single'>({ children, description, errorMessage, errorPosition, items, label, popover, popoverProps, size, ...props }: MidasSelectProps<T, M>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<T extends object, M extends SelectionMode = 'single'>({ children, description, errorMessage, errorPosition, items, label, popover, popoverProps, listBoxProps, size, ...props }: MidasSelectProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/select/Select.stories.d.ts

@@ -41,6 +41,7 @@ export declare const WithTags: Story<Item, 'multiple'>;
 export declare const SelectAllEnabled: Story<Item, 'multiple'>;
 export declare const DS872: Story;
 export declare const StaticSections: Story;
+export declare const NotVirtualized: Story;
 export declare const DynamicSections: Story<Section>;
 export declare const RequiredMultipleWithTags: Story<Item, 'multiple'>;
 export declare const RequiredMultipleWithClearAll: Story<Item, 'multiple'>;

package/select/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/select-Dlp6n8oE.js";
+import { t as e } from "../chunks/select-DneAUko_.js";
 export { e as Select };

package/chunks/search-field-Ci2UjkmK.js

@@ -1,90 +0,0 @@
-'use client';
-import { t as e } from "./clsx-BtlV5Vo3.js";
-import { t } from "./createLucideIcon-DhIhuN5D.js";
-import { t as n } from "./x-Bs_QW3q8.js";
-import { t as r } from "./useLocalizedStringFormatter-bRLuRzVD.js";
-import { n as i } from "./button-CFjf-bDe.js";
-import { t as a } from "./field-error-DYp2kgFr.js";
-import { t as o } from "./TextField.module-nF-1HOkH.js";
-import { FormContext as s, Input as c, SearchField as l, useSlottedContext as u } from "react-aria-components";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import '../assets/search-field.css';var m = t("search", [["path", {
-	d: "m21 21-4.34-4.34",
-	key: "14j7rj"
-}], ["circle", {
-	cx: "11",
-	cy: "11",
-	r: "8",
-	key: "4ej97u"
-}]]), h = {
-	container: "_container_1msv3_1",
-	inner: "_inner_1msv3_10",
-	inputContainer: "_inputContainer_1msv3_15",
-	medium: "_medium_1msv3_21",
-	icon: "_icon_1msv3_26",
-	clear: "_clear_1msv3_38",
-	input: "_input_1msv3_15"
-}, g = {
-	en: { search: "Search" },
-	sv: { search: "Sök" }
-};
-//#endregion
-//#region packages/components/src/search-field/SearchField.tsx
-function _(e) {
-	return !!e?.length;
-}
-var v = ({ errorPosition: t = "top", size: v = "large", showButton: y, className: b, errorMessage: x, placeholder: S, validationBehavior: C, inputMode: w = "search", ...T }) => {
-	let E = r(g), D = u(s), O = C ?? D?.validationBehavior ?? "aria", k = y !== !1, A = (e) => {
-		!e || T.isInvalid || T.validate && _(T.validate(e)) || T.onSubmit?.(e);
-	};
-	return /* @__PURE__ */ f(l, {
-		...T,
-		inputMode: w,
-		onSubmit: A,
-		"aria-label": T["aria-label"] ?? S,
-		className: e(h.container, b),
-		validationBehavior: O,
-		children: ({ state: r }) => /* @__PURE__ */ p(d, { children: [
-			t === "top" && /* @__PURE__ */ f(a, { children: ({ validationErrors: e }) => x ?? e.join(" ") }),
-			/* @__PURE__ */ p("div", {
-				className: h.inner,
-				children: [/* @__PURE__ */ p("div", {
-					className: e(h.inputContainer, { [h.medium]: v === "medium" }),
-					children: [
-						/* @__PURE__ */ f(m, {
-							size: 20,
-							className: h.icon
-						}),
-						/* @__PURE__ */ f(c, {
-							placeholder: S,
-							className: e(o.input, h.input, { [h.medium]: v === "medium" }),
-							onKeyDown: T.onSubmit ? void 0 : (e) => {
-								e.key === "Enter" && r.value && !T.isInvalid && e.currentTarget.form?.requestSubmit();
-							}
-						}),
-						r.value.length > 0 && /* @__PURE__ */ f(i, {
-							variant: "icon",
-							size: v,
-							className: e(h.clear, { [h.medium]: v === "medium" }),
-							children: /* @__PURE__ */ f(n, {
-								size: 20,
-								"aria-hidden": !0
-							})
-						})
-					]
-				}), k && /* @__PURE__ */ f(i, {
-					slot: null,
-					excludeFromTabOrder: !0,
-					size: v,
-					isDisabled: T.isDisabled,
-					type: "button",
-					onPress: () => A(r.value),
-					children: T.buttonText ?? E.format("search")
-				})]
-			}),
-			t === "bottom" && /* @__PURE__ */ f(a, { children: ({ validationErrors: e }) => x ?? e.join(" ") })
-		] })
-	});
-};
-//#endregion
-export { v as t };