@midas-ds/components 17.23.8 → 17.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/assets/radio.css +1 -1
- package/chunks/radio-W0YqY7lo.js +48 -0
- package/index.js +13 -15
- package/package.json +3 -5
- package/radio/Radio.d.ts +3 -23
- package/radio/Radio.stories.d.ts +101 -45
- package/radio/RadioButton.d.ts +3 -0
- package/radio/RadioField.d.ts +3 -0
- package/radio/RadioGroup.d.ts +21 -0
- package/radio/RadioGroup.stories.d.ts +27 -0
- package/radio/index.d.ts +3 -0
- package/radio/index.js +2 -2
- package/chunks/radio-DmCYqo3Z.js +0 -43
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
## 17.24.0 (2026-09-17)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **components,radio:** export RadioButton & RadioField ([#1359](https://github.com/migrationsverket/midas/pull/1359))
|
|
6
|
+
|
|
7
|
+
## 17.23.9 (2026-09-17)
|
|
8
|
+
|
|
9
|
+
### 🩹 Fixes
|
|
10
|
+
|
|
11
|
+
- **components:** externalize shared dependencies ([df23057046f](https://github.com/migrationsverket/midas/commit/df23057046f))
|
|
12
|
+
|
|
13
|
+
### 🔧 Maintenance
|
|
14
|
+
|
|
15
|
+
- **components:** configure @nx/dependency-checks ([1fb6371567b](https://github.com/migrationsverket/midas/commit/1fb6371567b))
|
|
16
|
+
- **components:** remove unnecessary lint bypass ([abc4c5e47ab](https://github.com/migrationsverket/midas/commit/abc4c5e47ab))
|
|
17
|
+
|
|
1
18
|
## 17.23.8 (2026-09-08)
|
|
2
19
|
|
|
3
20
|
### 🩹 Fixes
|
package/assets/radio.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._radioGroup_1l7aa_1{font-family:var(--midas-typography-font-family);flex-direction:column;display:flex}._radioGroup_1l7aa_1[data-disabled]{cursor:not-allowed;opacity:1;color:var(--midas-text-disabled)}._radioGroup_1l7aa_1 ._wrap_1l7aa_12{gap:var(--midas-space-small);flex-direction:column;align-items:start;display:flex}._radioGroup_1l7aa_1[aria-orientation=horizontal] ._wrap_1l7aa_12{gap:var(--midas-space-medium);flex-direction:row}._radioButton_1l7aa_25{font-size:var(--midas-typography-font-size-30);align-items:center;gap:var(--midas-space-small);color:var(--midas-text-primary);cursor:pointer;display:flex}._radioButton_1l7aa_25:before{content:"";box-sizing:border-box;border:.0625rem solid var(--midas-border-color-primary);width:1rem;height:1rem;transition:border-color var(--midas-transition-duration-instant) var(--midas-transition-timing-ease-out), border-width var(--midas-transition-duration-instant) var(--midas-transition-timing-ease-out), background var(--midas-transition-duration-instant) var(--midas-transition-timing-ease-out), padding var(--midas-transition-duration-instant) var(--midas-transition-timing-ease-out);border-radius:1.286rem;display:block}@media (forced-colors:active){._radioButton_1l7aa_25:before{transition:none}}._radioButton_1l7aa_25[data-readonly]{cursor:default;border-color:var(--midas-border-color-subtle)}._radioButton_1l7aa_25[data-readonly]:before{border-color:var(--midas-border-color-subtle)}._radioButton_1l7aa_25[data-focus-visible],._radioButton_1l7aa_25:focus-visible{box-shadow:var(--midas-state-focus);outline:none}@media (forced-colors:active){._radioButton_1l7aa_25[data-focus-visible],._radioButton_1l7aa_25:focus-visible{outline-offset:2px;outline:3px solid highlight}}._radioButton_1l7aa_25[data-hovered]:before{border-color:var(--midas-border-color-secondary)}._radioButton_1l7aa_25[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}@media (forced-colors:active){._radioButton_1l7aa_25[data-disabled]{color:graytext}}._radioButton_1l7aa_25[data-disabled]:before{border-color:var(--midas-border-color-disabled)}@media (forced-colors:active){._radioButton_1l7aa_25[data-disabled]:before{border-color:graytext}}._radioButton_1l7aa_25[data-pressed]:before{border-color:var(--midas-border-color-subtle)}._radioButton_1l7aa_25[data-selected]:before{background:var(--midas-icon-secondary) 50% 50% no-repeat content-box;border-width:.1rem;padding:.188rem}@media (forced-colors:active){._radioButton_1l7aa_25[data-selected]:before{background:highlight 50% no-repeat content-box content-box}}._radioButton_1l7aa_25[data-selected][data-pressed]:before{border-color:var(--midas-border-color-subtle);background:var(--midas-icon-secondary) 50% 50% no-repeat content-box}._radioButton_1l7aa_25[data-invalid]:before{border:.125rem solid var(--midas-support-border-warning)}@media (width<=479px){._radioButton_1l7aa_25{padding:var(--midas-space-70) var(--midas-space-medium);border:1px solid var(--midas-border-color-primary);width:auto}._radioButton_1l7aa_25._radioButton_1l7aa_25{box-sizing:border-box;width:100%}._radioButton_1l7aa_25[data-hovered]{background-color:var(--midas-field-02-hover)}._radioButton_1l7aa_25[data-invalid]{border:2px solid var(--midas-support-border-warning)}._radioButton_1l7aa_25[data-disabled]{pointer-events:none;border-color:var(--midas-border-color-disabled)}}@media (prefers-reduced-motion){._radioButton_1l7aa_25:before{transition:none}}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { t as e } from "./clsx-B1NYyfch.js";
|
|
2
|
+
import { t } from "./text-EUdAWwZz.js";
|
|
3
|
+
import { t as n } from "./field-error-pJiSw4PN.js";
|
|
4
|
+
import { n as r, t as i } from "./label-CEYHiWSa.js";
|
|
5
|
+
import { Group as a, RadioButton as o, RadioField as s, RadioGroup as c, composeRenderProps as l } from "react-aria-components";
|
|
6
|
+
import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
7
|
+
import '../assets/radio.css';//#region src/radio/RadioField.tsx
|
|
8
|
+
var p = (e) => /* @__PURE__ */ d(s, { ...e }), m = {
|
|
9
|
+
radioGroup: "_radioGroup_1l7aa_1",
|
|
10
|
+
wrap: "_wrap_1l7aa_12",
|
|
11
|
+
radioButton: "_radioButton_1l7aa_25"
|
|
12
|
+
}, h = ({ className: t, ...n }) => /* @__PURE__ */ d(o, {
|
|
13
|
+
className: e(m.radioButton, t),
|
|
14
|
+
...n
|
|
15
|
+
}), g = ({ children: e, className: t, ...n }) => /* @__PURE__ */ d(p, {
|
|
16
|
+
...n,
|
|
17
|
+
children: /* @__PURE__ */ d(h, {
|
|
18
|
+
className: t,
|
|
19
|
+
children: e
|
|
20
|
+
})
|
|
21
|
+
}), _ = ({ label: o, description: s, errorMessage: p, children: h, className: g, errorPosition: _ = "top", popover: v, ...y }) => /* @__PURE__ */ d(c, {
|
|
22
|
+
...y,
|
|
23
|
+
className: e(m.radioGroup, g),
|
|
24
|
+
children: l(h, (e) => /* @__PURE__ */ f(u, { children: [
|
|
25
|
+
/* @__PURE__ */ d(r, {
|
|
26
|
+
popover: v,
|
|
27
|
+
children: o && /* @__PURE__ */ d(i, { children: o })
|
|
28
|
+
}),
|
|
29
|
+
s && /* @__PURE__ */ d(t, {
|
|
30
|
+
slot: "description",
|
|
31
|
+
children: s
|
|
32
|
+
}),
|
|
33
|
+
_ === "top" && /* @__PURE__ */ d(n, {
|
|
34
|
+
"data-testid": "fieldError",
|
|
35
|
+
children: p
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ d(a, {
|
|
38
|
+
className: m.wrap,
|
|
39
|
+
children: e
|
|
40
|
+
}),
|
|
41
|
+
_ === "bottom" && /* @__PURE__ */ d(n, {
|
|
42
|
+
"data-testid": "fieldError",
|
|
43
|
+
children: p
|
|
44
|
+
})
|
|
45
|
+
] }))
|
|
46
|
+
});
|
|
47
|
+
//#endregion
|
|
48
|
+
export { p as i, g as n, h as r, _ as t };
|
package/index.js
CHANGED
|
@@ -37,17 +37,17 @@ import { t as Ee } from "./chunks/info-banner-DnFNZ1_o.js";
|
|
|
37
37
|
import { n as De, t as Oe } from "./chunks/tooltip-D7LYQwj0.js";
|
|
38
38
|
import { n as ke, t as Ae } from "./chunks/logo-CDxNjDeI.js";
|
|
39
39
|
import { t as je } from "./chunks/progress-bar-Cft_RPHz.js";
|
|
40
|
-
import {
|
|
41
|
-
import { t as
|
|
42
|
-
import { n as
|
|
43
|
-
import { t as
|
|
44
|
-
import { i as
|
|
45
|
-
import { i as
|
|
46
|
-
import { t as
|
|
47
|
-
import { a as
|
|
40
|
+
import { i as Me, n as Ne, r as Pe, t as Fe } from "./chunks/radio-W0YqY7lo.js";
|
|
41
|
+
import { t as Ie } from "./chunks/select-CZklrPAQ.js";
|
|
42
|
+
import { n as Le, r as Re, t as ze } from "./chunks/tag-mzNjP8EX.js";
|
|
43
|
+
import { t as Be } from "./chunks/skeleton-DWmvym7R.js";
|
|
44
|
+
import { i as Ve, n as He, r as Ue, t as We } from "./chunks/tabs-BFFTnO4i.js";
|
|
45
|
+
import { i as Ge, n as Ke, r as qe, t as Je } from "./chunks/textfield-BsijPPRD.js";
|
|
46
|
+
import { t as Ye } from "./chunks/time-field-BlNUOjUJ.js";
|
|
47
|
+
import { a as Xe, i as Ze, n as Qe, o as $e, r as et, t as tt } from "./chunks/toast-Cz0JDIr1.js";
|
|
48
48
|
//#endregion
|
|
49
49
|
//#region src/version.ts
|
|
50
|
-
var
|
|
50
|
+
var nt = {
|
|
51
51
|
name: "@midas-ds/components",
|
|
52
52
|
author: { name: "Migrationsverket" },
|
|
53
53
|
keywords: [
|
|
@@ -59,7 +59,7 @@ var et = {
|
|
|
59
59
|
description: "Midas Components",
|
|
60
60
|
homepage: "https://designsystem.migrationsverket.se/",
|
|
61
61
|
license: "CC0-1.0",
|
|
62
|
-
version: "17.
|
|
62
|
+
version: "17.24.0",
|
|
63
63
|
module: "./index.js",
|
|
64
64
|
type: "module",
|
|
65
65
|
main: "./index.js",
|
|
@@ -84,13 +84,11 @@ var et = {
|
|
|
84
84
|
dependencies: {
|
|
85
85
|
"@internationalized/string": "^3.2.10",
|
|
86
86
|
"@midas-ds/theme": "3.17.0",
|
|
87
|
-
"@react-
|
|
88
|
-
"@react-stately/toggle": "^3.9.5",
|
|
89
|
-
"@react-stately/utils": "^3.11.0",
|
|
90
|
-
"react-aria": "^3.51.0",
|
|
87
|
+
"@react-stately/utils": "^3.12.1",
|
|
91
88
|
"react-aria-components": "1.20.0",
|
|
89
|
+
"react-aria": "^3.51.0",
|
|
92
90
|
"react-stately": "^3.49.0"
|
|
93
91
|
}
|
|
94
92
|
}.version;
|
|
95
93
|
//#endregion
|
|
96
|
-
export { e as Accordion, t as AccordionItem, N as Badge, P as BadgeContainer, I as Breadcrumb, F as Breadcrumbs, A as Button, j as ButtonGroup, b as Calendar, G as Card, V as CardActionArea, z as CardActions, U as CardBody, W as CardContent, q as CardHeader, K as CardImage, B as CardLink, H as CardTitle, g as Cell, J as CharacterCounter, S as Checkbox, C as CheckboxGroup, w as ColorSchemeSwitch, T as ColorSchemeSwitchMenu, p as Column, le as ComboBox, ee as ContrastFilled, ve as DateField, ye as DateInput, xe as DateInputDivider, v as DatePicker, y as DateRangePicker, be as DateSegment, $ as DialogTrigger, Ce as DropZone, R as FieldError, D as FileList, O as FileListItem, Se as FileTrigger,
|
|
94
|
+
export { e as Accordion, t as AccordionItem, N as Badge, P as BadgeContainer, I as Breadcrumb, F as Breadcrumbs, A as Button, j as ButtonGroup, b as Calendar, G as Card, V as CardActionArea, z as CardActions, U as CardBody, W as CardContent, q as CardHeader, K as CardImage, B as CardLink, H as CardTitle, g as Cell, J as CharacterCounter, S as Checkbox, C as CheckboxGroup, w as ColorSchemeSwitch, T as ColorSchemeSwitchMenu, p as Column, le as ComboBox, ee as ContrastFilled, ve as DateField, ye as DateInput, xe as DateInputDivider, v as DatePicker, y as DateRangePicker, be as DateSegment, $ as DialogTrigger, Ce as DropZone, R as FieldError, D as FileList, O as FileListItem, Se as FileTrigger, tt as GlobalToastRegion, we as Grid, Te as GridItem, s as Header, M as Heading, Ee as InfoBanner, qe as Input, Y as Label, c as Layout, u as Link, _ as LinkButton, de as ListBox, ge as ListBoxButton, _e as ListBoxEmptyState, pe as ListBoxHeader, me as ListBoxItem, he as ListBoxLoadMoreItem, ue as ListBoxPopover, fe as ListBoxSection, Ae as Logo, ke as LogoContext, re as Menu, ie as MenuItem, se as MenuPopover, ae as MenuSection, oe as MenuTrigger, Z as Modal, Q as ModalOverlay, o as Navbar, X as Popover, je as ProgressBar, Ne as Radio, Pe as RadioButton, Me as RadioField, Fe as RadioGroup, x as RangeCalendar, l as RouterProvider, h as Row, E as SearchField, Ie as Select, ce as Separator, a as Sidebar, i as SidebarLink, Be as Skeleton, r as Spinner, Ue as Tab, We as TabList, He as TabPanel, f as Table, d as TableBody, m as TableHeader, Ve as Tabs, Re as Tag, ze as TagGroup, Le as TagList, L as Text, Je as TextArea, Ke as TextField, Ge as TextFieldBase, Ye as TimeField, Qe as Toast, et as ToastProvider, Ze as ToastRegion, te as ToggleButton, ne as ToggleButtonGroup, Oe as Tooltip, De as TooltipTrigger, nt as VERSION, n as clsx, Xe as toastQueue, k as useLocalizedStringFormatter, $e as useToastState };
|
package/package.json
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"description": "Midas Components",
|
|
15
15
|
"homepage": "https://designsystem.migrationsverket.se/",
|
|
16
16
|
"license": "CC0-1.0",
|
|
17
|
-
"version": "17.
|
|
17
|
+
"version": "17.24.0",
|
|
18
18
|
"module": "./index.js",
|
|
19
19
|
"type": "module",
|
|
20
20
|
"main": "./index.js",
|
|
@@ -43,11 +43,9 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@internationalized/string": "^3.2.10",
|
|
45
45
|
"@midas-ds/theme": "3.17.0",
|
|
46
|
-
"@react-
|
|
47
|
-
"@react-stately/toggle": "^3.9.5",
|
|
48
|
-
"@react-stately/utils": "^3.11.0",
|
|
49
|
-
"react-aria": "^3.51.0",
|
|
46
|
+
"@react-stately/utils": "^3.12.1",
|
|
50
47
|
"react-aria-components": "1.20.0",
|
|
48
|
+
"react-aria": "^3.51.0",
|
|
51
49
|
"react-stately": "^3.49.0"
|
|
52
50
|
}
|
|
53
51
|
}
|
package/radio/Radio.d.ts
CHANGED
|
@@ -1,23 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export interface RadioGroupProps extends AriaRadioGroupProps {
|
|
5
|
-
/** Label for the RadioGroup */
|
|
6
|
-
label?: string;
|
|
7
|
-
/** Additional description rendered below the label */
|
|
8
|
-
description?: string;
|
|
9
|
-
/** String to display as error message or function to handle the result and produce the error message */
|
|
10
|
-
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
11
|
-
errorPosition?: 'top' | 'bottom';
|
|
12
|
-
/** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
|
|
13
|
-
popover?: InfoPopoverProps;
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* @deprecated since v17.0.0 please use `RadioGroupProps` instead
|
|
17
|
-
*/
|
|
18
|
-
export type MVDSRadioGroupProps = RadioGroupProps;
|
|
19
|
-
/**
|
|
20
|
-
* RadioGroup is used to group several radio items together
|
|
21
|
-
*/
|
|
22
|
-
export declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
23
|
-
export declare const Radio: ({ className, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { RadioFieldProps } from 'react-aria-components';
|
|
2
|
+
export type RadioProps = RadioFieldProps;
|
|
3
|
+
export declare const Radio: ({ children, className, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
package/radio/Radio.stories.d.ts
CHANGED
|
@@ -1,54 +1,110 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import {
|
|
2
|
+
import { Radio } from '.';
|
|
3
|
+
type Story = StoryObj<typeof Radio>;
|
|
3
4
|
declare const _default: {
|
|
4
5
|
title: string;
|
|
5
|
-
component: import('react').FC<import('./Radio').RadioGroupProps>;
|
|
6
|
-
subcomponents: {
|
|
7
|
-
Radio: ({ className, ...rest }: import('react-aria-components').RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
};
|
|
9
|
-
tags: string[];
|
|
10
6
|
args: {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
errorMessage: string;
|
|
14
|
-
errorPosition: "top";
|
|
15
|
-
};
|
|
16
|
-
argTypes: {
|
|
17
|
-
children: {
|
|
18
|
-
table: {
|
|
19
|
-
disable: true;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
label: {
|
|
23
|
-
type: "string";
|
|
24
|
-
control: {
|
|
25
|
-
type: "text";
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
isDisabled: {
|
|
29
|
-
type: "boolean";
|
|
30
|
-
options: boolean[];
|
|
31
|
-
control: {
|
|
32
|
-
type: "radio";
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
isInvalid: {
|
|
36
|
-
type: "boolean";
|
|
37
|
-
options: boolean[];
|
|
38
|
-
control: {
|
|
39
|
-
type: "radio";
|
|
40
|
-
};
|
|
41
|
-
};
|
|
7
|
+
children: string;
|
|
8
|
+
isDisabled: false;
|
|
42
9
|
};
|
|
10
|
+
component: ({ children, className, ...rest }: import('./Radio').RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
decorators: (Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
12
|
+
className?: import('react-aria-components').ClassNameOrFunction<import('react-aria-components').RadioFieldRenderProps> | undefined;
|
|
13
|
+
inputRef?: import('@react-types/shared').RefObject<HTMLInputElement | null> | undefined;
|
|
14
|
+
isDisabled?: boolean | undefined;
|
|
15
|
+
id?: string | undefined;
|
|
16
|
+
onClick?: ((e: import('react').MouseEvent<import('@react-types/shared').FocusableElement>) => void) | undefined;
|
|
17
|
+
value: string;
|
|
18
|
+
'aria-describedby'?: string | undefined;
|
|
19
|
+
'aria-details'?: string | undefined;
|
|
20
|
+
'aria-label'?: string | undefined;
|
|
21
|
+
'aria-labelledby'?: string | undefined;
|
|
22
|
+
onFocus?: ((e: import('react').FocusEvent<Element, Element>) => void) | undefined;
|
|
23
|
+
onBlur?: ((e: import('react').FocusEvent<Element, Element>) => void) | undefined;
|
|
24
|
+
onKeyDown?: ((e: import('@react-types/shared').KeyboardEvent) => void) | undefined;
|
|
25
|
+
onKeyUp?: ((e: import('@react-types/shared').KeyboardEvent) => void) | undefined;
|
|
26
|
+
onPress?: ((e: import('react-aria-components').PressEvent) => void) | undefined;
|
|
27
|
+
onPressStart?: ((e: import('react-aria-components').PressEvent) => void) | undefined;
|
|
28
|
+
onPressEnd?: ((e: import('react-aria-components').PressEvent) => void) | undefined;
|
|
29
|
+
onPressChange?: ((isPressed: boolean) => void) | undefined;
|
|
30
|
+
onPressUp?: ((e: import('react-aria-components').PressEvent) => void) | undefined;
|
|
31
|
+
autoFocus?: boolean | undefined;
|
|
32
|
+
onFocusChange?: ((isFocused: boolean) => void) | undefined;
|
|
33
|
+
children?: import('react-aria-components').ChildrenOrFunction<import('react-aria-components').RadioFieldRenderProps>;
|
|
34
|
+
style?: import('react-aria-components').StyleOrFunction<import('react-aria-components').RadioFieldRenderProps> | undefined;
|
|
35
|
+
render?: import('react-aria-components').DOMRenderFunction<"div", import('react-aria-components').RadioFieldRenderProps> | undefined;
|
|
36
|
+
slot?: string | null | undefined;
|
|
37
|
+
dir?: string | undefined | undefined;
|
|
38
|
+
lang?: string | undefined | undefined;
|
|
39
|
+
hidden?: boolean | undefined | undefined;
|
|
40
|
+
inert?: boolean | undefined | undefined;
|
|
41
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
42
|
+
onClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
43
|
+
onAuxClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
44
|
+
onAuxClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
45
|
+
onContextMenu?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
46
|
+
onContextMenuCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
47
|
+
onDoubleClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
48
|
+
onDoubleClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
49
|
+
onMouseDown?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
50
|
+
onMouseDownCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
51
|
+
onMouseEnter?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
52
|
+
onMouseLeave?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
53
|
+
onMouseMove?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
54
|
+
onMouseMoveCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
55
|
+
onMouseOut?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
56
|
+
onMouseOutCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
57
|
+
onMouseOver?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
58
|
+
onMouseOverCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
59
|
+
onMouseUp?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
60
|
+
onMouseUpCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
|
|
61
|
+
onTouchCancel?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
62
|
+
onTouchCancelCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
63
|
+
onTouchEnd?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
64
|
+
onTouchEndCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
65
|
+
onTouchMove?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
66
|
+
onTouchMoveCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
67
|
+
onTouchStart?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
68
|
+
onTouchStartCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
|
|
69
|
+
onPointerDown?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
70
|
+
onPointerDownCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
71
|
+
onPointerMove?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
72
|
+
onPointerMoveCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
73
|
+
onPointerUp?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
74
|
+
onPointerUpCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
75
|
+
onPointerCancel?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
76
|
+
onPointerCancelCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
77
|
+
onPointerEnter?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
78
|
+
onPointerLeave?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
79
|
+
onPointerOver?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
80
|
+
onPointerOverCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
81
|
+
onPointerOut?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
82
|
+
onPointerOutCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
83
|
+
onGotPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
84
|
+
onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
85
|
+
onLostPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
86
|
+
onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
|
|
87
|
+
onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
|
|
88
|
+
onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
|
|
89
|
+
onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
|
|
90
|
+
onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
|
|
91
|
+
onAnimationStart?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
|
|
92
|
+
onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
|
|
93
|
+
onAnimationEnd?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
|
|
94
|
+
onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
|
|
95
|
+
onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
|
|
96
|
+
onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
|
|
97
|
+
onTransitionCancel?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
98
|
+
onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
99
|
+
onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
100
|
+
onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
101
|
+
onTransitionRun?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
102
|
+
onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
103
|
+
onTransitionStart?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
104
|
+
onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
|
|
105
|
+
}>) => import("react/jsx-runtime").JSX.Element;
|
|
106
|
+
tags: string[];
|
|
43
107
|
};
|
|
44
108
|
export default _default;
|
|
45
|
-
type Story = StoryObj<typeof RadioGroup>;
|
|
46
109
|
export declare const Primary: Story;
|
|
47
110
|
export declare const Disabled: Story;
|
|
48
|
-
export declare const ReadOnly: Story;
|
|
49
|
-
export declare const OneItemDisabled: Story;
|
|
50
|
-
export declare const Invalid: Story;
|
|
51
|
-
export declare const Required: Story;
|
|
52
|
-
export declare const CustomValidation: Story;
|
|
53
|
-
export declare const Horizontal: Story;
|
|
54
|
-
export declare const WithHelpPopover: Story;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { RadioGroupProps as AriaRadioGroupProps, ValidationResult } from 'react-aria-components';
|
|
2
|
+
import { InfoPopoverProps } from '../label';
|
|
3
|
+
export interface RadioGroupProps extends AriaRadioGroupProps {
|
|
4
|
+
/** Label for the RadioGroup */
|
|
5
|
+
label?: string;
|
|
6
|
+
/** Additional description rendered below the label */
|
|
7
|
+
description?: string;
|
|
8
|
+
/** String to display as error message or function to handle the result and produce the error message */
|
|
9
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
10
|
+
errorPosition?: 'top' | 'bottom';
|
|
11
|
+
/** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
|
|
12
|
+
popover?: InfoPopoverProps;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated since v17.0.0 please use `RadioGroupProps` instead
|
|
16
|
+
*/
|
|
17
|
+
export type MVDSRadioGroupProps = RadioGroupProps;
|
|
18
|
+
/**
|
|
19
|
+
* RadioGroup is used to group several radio items together
|
|
20
|
+
*/
|
|
21
|
+
export declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { RadioGroup } from '.';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import('react').FC<import('./RadioGroup').RadioGroupProps>;
|
|
6
|
+
subcomponents: {
|
|
7
|
+
Radio: ({ children, className, ...rest }: import('./Radio').RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
};
|
|
9
|
+
tags: string[];
|
|
10
|
+
args: {
|
|
11
|
+
label: string;
|
|
12
|
+
description: string;
|
|
13
|
+
errorMessage: string;
|
|
14
|
+
errorPosition: "top";
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export default _default;
|
|
18
|
+
type Story = StoryObj<typeof RadioGroup>;
|
|
19
|
+
export declare const Primary: Story;
|
|
20
|
+
export declare const Disabled: Story;
|
|
21
|
+
export declare const ReadOnly: Story;
|
|
22
|
+
export declare const OneItemDisabled: Story;
|
|
23
|
+
export declare const Invalid: Story;
|
|
24
|
+
export declare const Required: Story;
|
|
25
|
+
export declare const CustomValidation: Story;
|
|
26
|
+
export declare const Horizontal: Story;
|
|
27
|
+
export declare const WithHelpPopover: Story;
|
package/radio/index.d.ts
CHANGED
package/radio/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { t as Radio, e as RadioGroup };
|
|
1
|
+
import { i as e, n as t, r as n, t as r } from "../chunks/radio-W0YqY7lo.js";
|
|
2
|
+
export { t as Radio, n as RadioButton, e as RadioField, r as RadioGroup };
|
package/chunks/radio-DmCYqo3Z.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { t as e } from "./clsx-B1NYyfch.js";
|
|
3
|
-
import { t } from "./text-EUdAWwZz.js";
|
|
4
|
-
import { t as n } from "./field-error-pJiSw4PN.js";
|
|
5
|
-
import { n as r, t as i } from "./label-CEYHiWSa.js";
|
|
6
|
-
import "react";
|
|
7
|
-
import { Group as a, Radio as o, RadioGroup as s, composeRenderProps as c } from "react-aria-components";
|
|
8
|
-
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
9
|
-
import '../assets/radio.css';var f = {
|
|
10
|
-
radioGroup: "_radioGroup_1oic0_1",
|
|
11
|
-
wrap: "_wrap_1oic0_12",
|
|
12
|
-
radio: "_radio_1oic0_1"
|
|
13
|
-
}, p = ({ label: o, description: p, errorMessage: m, children: h, className: g, errorPosition: _ = "top", popover: v, ...y }) => /* @__PURE__ */ u(s, {
|
|
14
|
-
...y,
|
|
15
|
-
className: e(f.radioGroup, g),
|
|
16
|
-
children: c(h, (e) => /* @__PURE__ */ d(l, { children: [
|
|
17
|
-
/* @__PURE__ */ u(r, {
|
|
18
|
-
popover: v,
|
|
19
|
-
children: o && /* @__PURE__ */ u(i, { children: o })
|
|
20
|
-
}),
|
|
21
|
-
p && /* @__PURE__ */ u(t, {
|
|
22
|
-
slot: "description",
|
|
23
|
-
children: p
|
|
24
|
-
}),
|
|
25
|
-
_ === "top" && /* @__PURE__ */ u(n, {
|
|
26
|
-
"data-testid": "fieldError",
|
|
27
|
-
children: m
|
|
28
|
-
}),
|
|
29
|
-
/* @__PURE__ */ u(a, {
|
|
30
|
-
className: f.wrap,
|
|
31
|
-
children: e
|
|
32
|
-
}),
|
|
33
|
-
_ === "bottom" && /* @__PURE__ */ u(n, {
|
|
34
|
-
"data-testid": "fieldError",
|
|
35
|
-
children: m
|
|
36
|
-
})
|
|
37
|
-
] }))
|
|
38
|
-
}), m = ({ className: t, ...n }) => /* @__PURE__ */ u(o, {
|
|
39
|
-
className: e(f.radio, t),
|
|
40
|
-
...n
|
|
41
|
-
});
|
|
42
|
-
//#endregion
|
|
43
|
-
export { p as n, m as t };
|