@midas-ds/components 17.5.4 → 17.6.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 17.6.0 (2026-03-05)
+
+### 🚀 Features
+
+- **components,select:** add popoverProps passthrough ([1be0c77656](https://github.com/migrationsverket/midas/commit/1be0c77656))
+
+## 17.5.5 (2026-03-04)
+
+### 🩹 Fixes
+
+- **components,select:** call commitValidation in SelectAll to clear invalid state after selection ([06be0e034f](https://github.com/migrationsverket/midas/commit/06be0e034f))
+
+### 🔧 Maintenance
+
+- **components,select:** remove unused getByText destructure ([caddd4498d](https://github.com/migrationsverket/midas/commit/caddd4498d))
+
 ## 17.5.4 (2026-03-02)
 
 ### 🧱 Updated Dependencies

package/chunks/{Select-CV0H13h-.js → Select-DZepyl5C.js}

@@ -1,43 +1,45 @@
-import { jsx as e, Fragment as V, jsxs as i } from "react/jsx-runtime";
-import { SelectStateContext as d, SelectValue as g, Button as _, TagList as A, Select as C } from "react-aria-components";
-import { FocusScope as N } from "@react-aria/focus";
-import { a as x, L as b } from "./Label-s4J9sYdy.js";
-import { a as T, c as y } from "./clsx-AexbMWKp.js";
-import { T as B } from "./Text-D0r_W4lH.js";
+import { jsx as e, Fragment as A, jsxs as i } from "react/jsx-runtime";
+import { SelectStateContext as d, SelectValue as g, Button as _, TagList as C, Select as N } from "react-aria-components";
+import { FocusScope as x } from "@react-aria/focus";
+import { a as b, L as T } from "./Label-s4J9sYdy.js";
+import { a as y, c as B } from "./clsx-AexbMWKp.js";
+import { T as M } from "./Text-D0r_W4lH.js";
 import { F as h } from "./FieldError-krpMBtie.js";
 import p, { useContext as f } from "react";
-import { C as M } from "./Checkbox-sAkQe7Q9.js";
+import { C as F } from "./Checkbox-sAkQe7Q9.js";
 import { u as m } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import { useFocusManager as F } from "react-aria";
-import { X as L } from "./x-B9bYxG31.js";
-import { L as I } from "./ListBox-CDlOUvzJ.js";
-import { P as G } from "./Popover-CaP4LFhg.js";
-import { a as j, T as k } from "./TagGroup-BscTXQ_E.js";
-import { C as R } from "./chevron-down-BBFYYzZq.js";
-import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Select all", selectedItems: "Selected items", selected: "selected" }, w = { clearAll: "Rensa alla", selectAll: "Välj alla", selectedItems: "Valda objekt", selected: "valda" }, u = {
-  en: $,
-  sv: w
-}, P = "_select_1h0s2_1", z = "_triggerContainer_1h0s2_7", D = "_trigger_1h0s2_7", E = "_medium_1h0s2_29", K = "_icon_1h0s2_66", W = "_selectValue_1h0s2_72", X = "_placeholder_1h0s2_78", q = "_multiSelectValue_1h0s2_88", H = "_selectValueTag_1h0s2_112", J = "_clearButton_1h0s2_126", O = "_truncate_1h0s2_138", Q = "_popover_1h0s2_175", U = "_selectAll_1h0s2_201", Y = "_tagGroup_1h0s2_269", s = {
-  select: P,
-  triggerContainer: z,
-  trigger: D,
-  medium: E,
-  icon: K,
-  selectValue: W,
-  placeholder: X,
-  multiSelectValue: q,
-  selectValueTag: H,
-  clearButton: J,
-  truncate: O,
-  popover: Q,
-  selectAll: U,
-  tagGroup: Y
-}, Z = () => {
-  const t = p.useContext(d), c = m(u), r = () => t?.setValue(
-    t?.selectionManager.isSelectAll ? null : Array.from(t.collection.getKeys())
-  );
+import { useFocusManager as L } from "react-aria";
+import { X as I } from "./x-B9bYxG31.js";
+import { L as G } from "./ListBox-CDlOUvzJ.js";
+import { P as j } from "./Popover-CaP4LFhg.js";
+import { a as k, T as R } from "./TagGroup-BscTXQ_E.js";
+import { C as $ } from "./chevron-down-BBFYYzZq.js";
+import '../assets/Select.css';const w = { clearAll: "Clear all", selectAll: "Select all", selectedItems: "Selected items", selected: "selected" }, P = { clearAll: "Rensa alla", selectAll: "Välj alla", selectedItems: "Valda objekt", selected: "valda" }, u = {
+  en: w,
+  sv: P
+}, z = "_select_1h0s2_1", D = "_triggerContainer_1h0s2_7", E = "_trigger_1h0s2_7", K = "_medium_1h0s2_29", W = "_icon_1h0s2_66", X = "_selectValue_1h0s2_72", q = "_placeholder_1h0s2_78", H = "_multiSelectValue_1h0s2_88", J = "_selectValueTag_1h0s2_112", O = "_clearButton_1h0s2_126", Q = "_truncate_1h0s2_138", U = "_popover_1h0s2_175", Y = "_selectAll_1h0s2_201", Z = "_tagGroup_1h0s2_269", s = {
+  select: z,
+  triggerContainer: D,
+  trigger: E,
+  medium: K,
+  icon: W,
+  selectValue: X,
+  placeholder: q,
+  multiSelectValue: H,
+  selectValueTag: J,
+  clearButton: O,
+  truncate: Q,
+  popover: U,
+  selectAll: Y,
+  tagGroup: Z
+}, ee = () => {
+  const t = p.useContext(d), c = m(u), r = () => {
+    t?.setValue(
+      t?.selectionManager.isSelectAll ? null : Array.from(t.collection.getKeys())
+    ), t?.commitValidation();
+  };
   return /* @__PURE__ */ e(
-    M,
+    F,
     {
       className: s.selectAll,
       isIndeterminate: !t?.selectionManager.isSelectAll && !t?.selectionManager.isEmpty,
@@ -46,7 +48,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
       children: c.format("selectAll")
     }
   );
-}, ee = ({
+}, te = ({
   isDisabled: t
 }) => {
   const c = m(u), r = (l, o) => l.length === 1 ? o : `${l.length} ${c.format("selected")}`;
@@ -55,23 +57,23 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
     {
       className: s.multiSelectValue,
       "data-disabled": t || void 0,
-      children: ({ isPlaceholder: l, selectedItems: o, selectedText: a }) => l ? /* @__PURE__ */ e(V, {}) : /* @__PURE__ */ i(
+      children: ({ isPlaceholder: l, selectedItems: o, selectedText: a }) => l ? /* @__PURE__ */ e(A, {}) : /* @__PURE__ */ i(
         "div",
         {
           className: s.selectValueTag,
           "data-disabled": t || void 0,
           children: [
             /* @__PURE__ */ e("span", { className: s.truncate, children: r(o, a) }),
-            /* @__PURE__ */ e(te, { isDisabled: t })
+            /* @__PURE__ */ e(le, { isDisabled: t })
           ]
         }
       )
     }
   );
-}, te = ({
+}, le = ({
   isDisabled: t
 }) => {
-  const c = p.useContext(d), r = m(u), l = F(), o = () => {
+  const c = p.useContext(d), r = m(u), l = L(), o = () => {
     l?.focusFirst(), c?.setValue(null);
   };
   return /* @__PURE__ */ e(
@@ -83,7 +85,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
       slot: null,
       isDisabled: t,
       children: /* @__PURE__ */ e(
-        L,
+        I,
         {
           width: 20,
           height: 20
@@ -91,7 +93,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
       )
     }
   );
-}, le = ({
+}, se = ({
   showTags: t,
   isDisabled: c
 }) => {
@@ -99,14 +101,14 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
     l?.selectionManager.toggleSelection(Array.from(a)[0]);
   };
   return !l?.selectedItems.length || !t ? null : /* @__PURE__ */ e(
-    j,
+    k,
     {
       "aria-label": r.format("selectedItems"),
       className: s.tagGroup,
       onRemove: o,
       selectionBehavior: "toggle",
-      children: /* @__PURE__ */ e(A, { items: l.selectedItems, children: (a) => /* @__PURE__ */ e(
-        k,
+      children: /* @__PURE__ */ e(C, { items: l.selectedItems, children: (a) => /* @__PURE__ */ e(
+        R,
         {
           isDismissable: !0,
           id: a.key,
@@ -118,7 +120,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
       ) })
     }
   );
-}, se = ({
+}, ae = ({
   isDisabled: t,
   selectionMode: c,
   size: r
@@ -127,7 +129,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
   return /* @__PURE__ */ i(
     _,
     {
-      className: T(
+      className: y(
         {
           [s.medium]: r === "medium"
         },
@@ -148,14 +150,14 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
           {
             "aria-hidden": "true",
             className: s.icon,
-            children: /* @__PURE__ */ e(R, { size: 20 })
+            children: /* @__PURE__ */ e($, { size: 20 })
           }
         )
       ]
     }
   );
 };
-function Ve({
+function Ae({
   children: t,
   description: c,
   errorMessage: r,
@@ -163,17 +165,18 @@ function Ve({
   items: o,
   label: a,
   popover: S,
-  size: v = "large",
+  popoverProps: v,
+  size: V = "large",
   ...n
 }) {
-  return /* @__PURE__ */ e(N, { children: /* @__PURE__ */ i(
-    C,
+  return /* @__PURE__ */ e(x, { children: /* @__PURE__ */ i(
+    N,
     {
       ...n,
-      className: y(n.className, s.select),
+      className: B(n.className, s.select),
       children: [
-        /* @__PURE__ */ e(x, { popover: S, children: a && /* @__PURE__ */ e(b, { "data-disabled": n.isDisabled || void 0, children: a }) }),
-        c && /* @__PURE__ */ e(B, { slot: "description", children: c }),
+        /* @__PURE__ */ e(b, { popover: S, children: a && /* @__PURE__ */ e(T, { "data-disabled": n.isDisabled || void 0, children: a }) }),
+        c && /* @__PURE__ */ e(M, { slot: "description", children: c }),
         l === "top" && /* @__PURE__ */ e(h, { children: r }),
         /* @__PURE__ */ i(
           "div",
@@ -182,27 +185,28 @@ function Ve({
             "data-disabled": n.isDisabled || void 0,
             children: [
               /* @__PURE__ */ e(
-                se,
+                ae,
                 {
-                  size: v,
+                  size: V,
                   ...n
                 }
               ),
-              n.selectionMode === "multiple" ? /* @__PURE__ */ e(ee, { ...n }) : null
+              n.selectionMode === "multiple" ? /* @__PURE__ */ e(te, { ...n }) : null
             ]
           }
         ),
         l === "bottom" && /* @__PURE__ */ e(h, { children: r }),
         /* @__PURE__ */ i(
-          G,
+          j,
           {
             className: s.popover,
             offset: 0,
             hideArrow: !0,
+            ...v,
             children: [
-              n.isSelectableAll && /* @__PURE__ */ e(Z, {}),
+              n.isSelectableAll && /* @__PURE__ */ e(ee, {}),
               /* @__PURE__ */ e(
-                I,
+                G,
                 {
                   escapeKeyBehavior: "none",
                   items: o,
@@ -212,11 +216,11 @@ function Ve({
             ]
           }
         ),
-        /* @__PURE__ */ e(le, { ...n })
+        /* @__PURE__ */ e(se, { ...n })
       ]
     }
   ) });
 }
 export {
-  Ve as S
+  Ae as S
 };

package/index.js

@@ -30,7 +30,7 @@ import { P as Io } from "./chunks/Popover-CaP4LFhg.js";
 import { P as Go } from "./chunks/ProgressBar-acc8946-.js";
 import { R as ko, a as vo } from "./chunks/Radio-DjivEe-_.js";
 import { S as Mo } from "./chunks/SearchField-1DYv0w4b.js";
-import { S as ho } from "./chunks/Select-CV0H13h-.js";
+import { S as ho } from "./chunks/Select-DZepyl5C.js";
 import { S as yo } from "./chunks/Skeleton-D6mxKxuu.js";
 import { S as No } from "./chunks/Spinner-CfKMn18u.js";
 import { C as zo, a as Oo, R as Qo, T as Vo, b as Zo, c as jo } from "./chunks/Table-Bg-AKi7d.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.5.4", a = {
+const o = "17.6.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.5.4",
+  "version": "17.6.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 { Popover } from '../popover';
 import * as React from 'react';
 export type SelectionMode = 'single' | 'multiple';
 export interface MidasSelectProps<T extends object, M extends SelectionMode = 'single'> extends Omit<SelectProps<T, M>, 'children'> {
@@ -30,5 +31,9 @@ export interface MidasSelectProps<T extends object, M extends SelectionMode = 's
      *  @default 'large'
      */
     size?: Size;
+    /**
+     * Props passed to the internal Popover element.
+     */
+    popoverProps?: Omit<React.ComponentProps<typeof Popover>, 'children'>;
 }
-export declare function Select<T extends object, M extends SelectionMode = 'single'>({ children, description, errorMessage, errorPosition, items, label, popover, 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, size, ...props }: MidasSelectProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/select/Select.stories.d.ts

@@ -42,5 +42,6 @@ export declare const SelectAllEnabled: Story<Item, 'multiple'>;
 export declare const DS872: Story;
 export declare const StaticSections: Story;
 export declare const DynamicSections: Story<Section>;
+export declare const RequiredMultipleSelectAll: Story<Item, 'multiple'>;
 export declare const RequiredSingleSelect: Story;
 export declare const LongWords: Story;

package/select/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../chunks/Select-CV0H13h-.js";
+import { S as r } from "../chunks/Select-DZepyl5C.js";
 export {
   r as Select
 };