@midas-ds/components 17.7.8 → 17.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 17.8.0 (2026-03-12)
+
+### 🚀 Features
+
+- **components, radio:** accept function for children prop ([75260130c8](https://github.com/migrationsverket/midas/commit/75260130c8))
+- **components, accordion:** accept function for children prop ([08bc1ba117](https://github.com/migrationsverket/midas/commit/08bc1ba117))
+
 ## 17.7.8 (2026-03-12)
 
 ### 🩹 Fixes

package/accordion/AccordionItem.d.ts

@@ -3,10 +3,9 @@ import { HeadingProps } from '../heading';
 import { FeedbackStatus, Size } from '../common/types';
 import { FeedbackStatusIconProps } from '../common/FeedbackStatusIcon';
 import * as React from 'react';
-export interface AccordionItemProps extends Omit<DisclosureProps, 'children'> {
+export interface AccordionItemProps extends DisclosureProps {
     /** The text displayed in the collapsed state. If a ReactNode is provided, a heading will not be automatically added, and you must provide one yourself. */
     title?: string | React.ReactNode;
-    children?: React.ReactNode;
     /** Adjust the heading level of the title to match your document's heading tag structure */
     headingLevel?: HeadingProps['elementType'];
     /** Display an accordion item with different type styles. */
@@ -26,4 +25,4 @@ export interface AccordionItemProps extends Omit<DisclosureProps, 'children'> {
      */
     iconAriaLabel?: FeedbackStatusIconProps['aria-label'];
 }
-export declare const AccordionItem: React.FC<AccordionItemProps>;
+export declare const AccordionItem: ({ title, children, className, headingLevel, type, hasBackground, size, isContained: isContainedFromProp, iconAriaLabel, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;

package/accordion/AccordionItem.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { AccordionItem } from './AccordionItem';
 type Story = StoryObj<typeof AccordionItem>;
 declare const _default: {
-    component: import('react').FC<import('./AccordionItem').AccordionItemProps>;
+    component: ({ title, children, className, headingLevel, type, hasBackground, size, isContained: isContainedFromProp, iconAriaLabel, ...props }: import('./AccordionItem').AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
     args: {

package/accordion/index.js

@@ -1,4 +1,4 @@
-import { A as r, a } from "../chunks/AccordionItem-2xB1a2b_.js";
+import { A as r, a } from "../chunks/AccordionItem-w6c28fSu.js";
 export {
   r as Accordion,
   a as AccordionItem

package/chunks/AccordionItem-w6c28fSu.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx as n, jsxs as m, Fragment as x } from "react/jsx-runtime";
+import { c as l } from "./clsx-AexbMWKp.js";
+import { DisclosureGroup as C, Disclosure as I, composeRenderProps as N, DisclosurePanel as B } from "react-aria-components";
+import { createContext as b, useContext as k, useEffect as w } from "react";
+import { B as A } from "./Button-D22xOe8j.js";
+import { H as T } from "./Heading-nfcRc2QF.js";
+import { F as D } from "./FeedbackStatusIcon-X9Bjgeta.js";
+import { C as M } from "./chevron-down-BBFYYzZq.js";
+import '../assets/AccordionItem.css';const j = "_root_17bdp_1", F = "_contained_17bdp_5", a = {
+  root: j,
+  contained: F
+}, d = b(void 0), st = ({
+  children: o,
+  className: s,
+  isContained: i,
+  size: r = "large",
+  ...e
+}) => /* @__PURE__ */ n(d.Provider, { value: { isContained: i, size: r }, children: /* @__PURE__ */ n(
+  C,
+  {
+    className: l(
+      a.root,
+      i ? a.contained : a.uncontained,
+      s
+    ),
+    ...e,
+    children: o
+  }
+) }), P = "_item_1l4iy_1", z = "_contained_1l4iy_18", H = "_medium_1l4iy_28", R = "_success_1l4iy_33", S = "_warning_1l4iy_39", E = "_info_1l4iy_45", G = "_important_1l4iy_51", W = "_triggerButton_1l4iy_62", $ = "_triggerText_1l4iy_66", q = "_trigger_1l4iy_62", J = "_triggerMainContent_1l4iy_77", K = "_chevronIcon_1l4iy_94", L = "_statusIcon_1l4iy_100", O = "_panel_1l4iy_122", Q = "_content_1l4iy_130", U = "_hasBackground_1l4iy_135", V = "_header_1l4iy_139", t = {
+  item: P,
+  contained: z,
+  medium: H,
+  success: R,
+  warning: S,
+  info: E,
+  important: G,
+  triggerButton: W,
+  triggerText: $,
+  trigger: q,
+  triggerMainContent: J,
+  "	": "_	_1l4iy_1",
+  chevronIcon: K,
+  statusIcon: L,
+  panel: O,
+  content: Q,
+  hasBackground: U,
+  header: V
+}, rt = ({
+  title: o,
+  children: s,
+  className: i,
+  headingLevel: r = "h2",
+  type: e,
+  hasBackground: g = !0,
+  size: u = "large",
+  isContained: h,
+  iconAriaLabel: p,
+  ...y
+}) => {
+  const _ = k(d), c = h ?? _?.isContained ?? !1, f = typeof o == "object";
+  return w(() => {
+    e && !c && console.warn(
+      "AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency."
+    );
+  }, [e, c]), /* @__PURE__ */ n(
+    I,
+    {
+      ...y,
+      className: l(
+        t.item,
+        e && t[e],
+        (u === "medium" || _?.size === "medium") && t.medium,
+        c && t.contained,
+        i
+      ),
+      children: N(s, (v) => /* @__PURE__ */ m(x, { children: [
+        /* @__PURE__ */ n("div", { className: t.trigger, children: /* @__PURE__ */ m(
+          A,
+          {
+            className: t.triggerButton,
+            slot: "trigger",
+            variant: "icon",
+            children: [
+              /* @__PURE__ */ n(
+                M,
+                {
+                  size: 20,
+                  className: t.chevronIcon
+                }
+              ),
+              /* @__PURE__ */ n("div", { className: t.triggerMainContent, children: f ? o : /* @__PURE__ */ n(
+                T,
+                {
+                  level: 3,
+                  elementType: r,
+                  className: t.triggerText,
+                  children: o
+                }
+              ) }),
+              e && /* @__PURE__ */ n(
+                D,
+                {
+                  "aria-label": p,
+                  className: t.statusIcon,
+                  status: e
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ n(B, { className: t.panel, children: /* @__PURE__ */ n(
+          "div",
+          {
+            className: l(
+              t.content,
+              g && t.hasBackground
+            ),
+            children: v
+          }
+        ) })
+      ] }))
+    }
+  );
+};
+export {
+  st as A,
+  rt as a
+};

package/chunks/Radio-D-sGYrD6.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as r, jsxs as u, Fragment as _ } from "react/jsx-runtime";
+import { Radio as f, RadioGroup as h, composeRenderProps as G, Group as R } from "react-aria-components";
+import { c as p } from "./clsx-AexbMWKp.js";
+import { a as x, L as w } from "./Label-BNQY5OnB.js";
+import { T as z } from "./Text-D0r_W4lH.js";
+import { F as t } from "./FieldError-krpMBtie.js";
+import '../assets/Radio.css';const E = "_radioGroup_1ls9z_1", F = "_wrap_1ls9z_12", L = "_radio_1ls9z_1", s = {
+  radioGroup: E,
+  wrap: F,
+  radio: L
+}, W = ({
+  label: o,
+  description: a,
+  errorMessage: i,
+  children: e,
+  className: c,
+  errorPosition: d = "top",
+  popover: l,
+  ...m
+}) => /* @__PURE__ */ r(
+  h,
+  {
+    ...m,
+    className: p(s.radioGroup, c),
+    children: G(e, (n) => /* @__PURE__ */ u(_, { children: [
+      /* @__PURE__ */ r(x, { popover: l, children: o && /* @__PURE__ */ r(w, { children: o }) }),
+      a && /* @__PURE__ */ r(z, { slot: "description", children: a }),
+      d === "top" && /* @__PURE__ */ r(t, { "data-testid": "fieldError", children: i }),
+      /* @__PURE__ */ r(R, { className: s.wrap, children: n }),
+      d === "bottom" && /* @__PURE__ */ r(t, { "data-testid": "fieldError", children: i })
+    ] }))
+  }
+), g = ({ className: o, ...a }) => /* @__PURE__ */ r(
+  f,
+  {
+    className: p(s.radio, o),
+    ...a
+  }
+);
+export {
+  g as R,
+  W as a
+};

package/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { A as s, a as p } from "./chunks/AccordionItem-2xB1a2b_.js";
+import { A as s, a as p } from "./chunks/AccordionItem-w6c28fSu.js";
 import { B as m, a as i } from "./chunks/BadgeContainer-CKVsfTlF.js";
 import { B as f, a as d } from "./chunks/Breadcrumb-Bs836gOn.js";
 import { B as c } from "./chunks/Button-D22xOe8j.js";
@@ -28,7 +28,7 @@ import { L as Bo, a as bo } from "./chunks/Logo-DDykn5b2.js";
 import { M as Do } from "./chunks/Dialog-SBj6IJAF.js";
 import { P as Ro } from "./chunks/Popover-6cnHxDEK.js";
 import { P as Po } from "./chunks/ProgressBar-BIfkrfrH.js";
-import { R as vo, a as Fo } from "./chunks/Radio-F1vaYCPS.js";
+import { R as vo, a as Fo } from "./chunks/Radio-D-sGYrD6.js";
 import { S as Ao } from "./chunks/SearchField-D2Mm_VUO.js";
 import { S as Ho } from "./chunks/Select--xr0jiPR.js";
 import { S as Eo } from "./chunks/Skeleton-D6mxKxuu.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.7.8", a = {
+const o = "17.8.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.7.8",
+  "version": "17.8.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/radio/Radio.d.ts

@@ -1,8 +1,7 @@
-import { RadioGroupProps, RadioProps, ValidationResult } from 'react-aria-components';
+import { RadioGroupProps as AriaRadioGroupProps, RadioProps, ValidationResult } from 'react-aria-components';
 import { InfoPopoverProps } from '../label';
 import * as React from 'react';
-export interface MVDSRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
-    children?: React.ReactNode;
+export interface RadioGroupProps extends AriaRadioGroupProps {
     /** Label for the RadioGroup */
     label?: string;
     /** Additional description rendered below the label */
@@ -13,8 +12,12 @@ export interface MVDSRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
     /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
     popover?: InfoPopoverProps;
 }
+/**
+ * @deprecated since v17.0.0 please use `RadioGroupProps` instead
+ */
+export type MVDSRadioGroupProps = RadioGroupProps;
 /**
  * RadioGroup is used to group several radio items together
  */
-export declare const RadioGroup: React.FC<MVDSRadioGroupProps>;
+export declare const RadioGroup: React.FC<RadioGroupProps>;
 export declare const Radio: ({ className, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/radio/Radio.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { RadioGroup } from './Radio';
 declare const _default: {
     title: string;
-    component: import('react').FC<import('./Radio').MVDSRadioGroupProps>;
+    component: import('react').FC<import('./Radio').RadioGroupProps>;
     subcomponents: {
         Radio: ({ className, ...rest }: import('react-aria-components').RadioProps) => import("react/jsx-runtime").JSX.Element;
     };

package/radio/index.d.ts

@@ -1 +1 @@
-export { Radio, RadioGroup, type MVDSRadioGroupProps } from './Radio';
+export * from './Radio';

package/radio/index.js

@@ -1,4 +1,4 @@
-import { R as r, a as R } from "../chunks/Radio-F1vaYCPS.js";
+import { R as r, a as R } from "../chunks/Radio-D-sGYrD6.js";
 export {
   r as Radio,
   R as RadioGroup

package/chunks/AccordionItem-2xB1a2b_.js

@@ -1,129 +0,0 @@
-'use client';
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
-import { c as _ } from "./clsx-AexbMWKp.js";
-import { DisclosureGroup as v, Disclosure as x, DisclosurePanel as C } from "react-aria-components";
-import { createContext as I, useContext as N, useEffect as B } from "react";
-import { B as b } from "./Button-D22xOe8j.js";
-import { H as k } from "./Heading-nfcRc2QF.js";
-import { F as w } from "./FeedbackStatusIcon-X9Bjgeta.js";
-import { C as A } from "./chevron-down-BBFYYzZq.js";
-import '../assets/AccordionItem.css';const T = "_root_17bdp_1", D = "_contained_17bdp_5", a = {
-  root: T,
-  contained: D
-}, d = I(void 0), et = ({
-  children: o,
-  className: s,
-  isContained: i,
-  size: c = "large",
-  ...e
-}) => /* @__PURE__ */ n(d.Provider, { value: { isContained: i, size: c }, children: /* @__PURE__ */ n(
-  v,
-  {
-    className: _(
-      a.root,
-      i ? a.contained : a.uncontained,
-      s
-    ),
-    ...e,
-    children: o
-  }
-) }), M = "_item_1l4iy_1", j = "_contained_1l4iy_18", z = "_medium_1l4iy_28", F = "_success_1l4iy_33", H = "_warning_1l4iy_39", P = "_info_1l4iy_45", S = "_important_1l4iy_51", E = "_triggerButton_1l4iy_62", G = "_triggerText_1l4iy_66", R = "_trigger_1l4iy_62", W = "_triggerMainContent_1l4iy_77", $ = "_chevronIcon_1l4iy_94", q = "_statusIcon_1l4iy_100", J = "_panel_1l4iy_122", K = "_content_1l4iy_130", L = "_hasBackground_1l4iy_135", O = "_header_1l4iy_139", t = {
-  item: M,
-  contained: j,
-  medium: z,
-  success: F,
-  warning: H,
-  info: P,
-  important: S,
-  triggerButton: E,
-  triggerText: G,
-  trigger: R,
-  triggerMainContent: W,
-  "	": "_	_1l4iy_1",
-  chevronIcon: $,
-  statusIcon: q,
-  panel: J,
-  content: K,
-  hasBackground: L,
-  header: O
-}, ot = ({
-  title: o,
-  children: s,
-  className: i,
-  headingLevel: c = "h2",
-  type: e,
-  hasBackground: g = !0,
-  size: u = "large",
-  isContained: h,
-  iconAriaLabel: y,
-  ...f
-}) => {
-  const l = N(d), r = h ?? l?.isContained ?? !1, p = typeof o == "object";
-  return B(() => {
-    e && !r && console.warn(
-      "AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency."
-    );
-  }, [e, r]), /* @__PURE__ */ m(
-    x,
-    {
-      ...f,
-      className: _(
-        t.item,
-        e && t[e],
-        (u === "medium" || l?.size === "medium") && t.medium,
-        r && t.contained,
-        i
-      ),
-      children: [
-        /* @__PURE__ */ n("div", { className: t.trigger, children: /* @__PURE__ */ m(
-          b,
-          {
-            className: t.triggerButton,
-            slot: "trigger",
-            variant: "icon",
-            children: [
-              /* @__PURE__ */ n(
-                A,
-                {
-                  size: 20,
-                  className: t.chevronIcon
-                }
-              ),
-              /* @__PURE__ */ n("div", { className: t.triggerMainContent, children: p ? o : /* @__PURE__ */ n(
-                k,
-                {
-                  level: 3,
-                  elementType: c,
-                  className: t.triggerText,
-                  children: o
-                }
-              ) }),
-              e && /* @__PURE__ */ n(
-                w,
-                {
-                  "aria-label": y,
-                  className: t.statusIcon,
-                  status: e
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ n(C, { className: t.panel, children: /* @__PURE__ */ n(
-          "div",
-          {
-            className: _(
-              t.content,
-              g && t.hasBackground
-            ),
-            children: s
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  et as A,
-  ot as a
-};

package/chunks/Radio-F1vaYCPS.js

@@ -1,44 +0,0 @@
-'use client';
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { Radio as u, RadioGroup as _, Group as f } from "react-aria-components";
-import { c as p } from "./clsx-AexbMWKp.js";
-import { a as G, L as R } from "./Label-BNQY5OnB.js";
-import { T as h } from "./Text-D0r_W4lH.js";
-import { F as t } from "./FieldError-krpMBtie.js";
-import '../assets/Radio.css';const x = "_radioGroup_1ls9z_1", w = "_wrap_1ls9z_12", z = "_radio_1ls9z_1", s = {
-  radioGroup: x,
-  wrap: w,
-  radio: z
-}, T = ({
-  label: o,
-  description: a,
-  errorMessage: i,
-  children: l,
-  className: c,
-  errorPosition: d = "top",
-  popover: e,
-  ...m
-}) => /* @__PURE__ */ n(
-  _,
-  {
-    ...m,
-    className: p(s.radioGroup, c),
-    children: [
-      /* @__PURE__ */ r(G, { popover: e, children: o && /* @__PURE__ */ r(R, { children: o }) }),
-      a && /* @__PURE__ */ r(h, { slot: "description", children: a }),
-      d === "top" && /* @__PURE__ */ r(t, { "data-testid": "fieldError", children: i }),
-      /* @__PURE__ */ r(f, { className: s.wrap, children: l }),
-      d === "bottom" && /* @__PURE__ */ r(t, { "data-testid": "fieldError", children: i })
-    ]
-  }
-), $ = ({ className: o, ...a }) => /* @__PURE__ */ r(
-  u,
-  {
-    className: p(s.radio, o),
-    ...a
-  }
-);
-export {
-  $ as R,
-  T as a
-};