@midas-ds/components 17.18.0 → 17.19.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 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/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/{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/{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

@@ -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.19.0",
 	module: "./index.js",
 	type: "module",
 	main: "./index.js",

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.19.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

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 };