@flipdish/ui-library 0.39.2 → 0.40.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/dist/components/atoms/RadioButton/index.cjs +3 -16
- package/dist/components/atoms/RadioButton/index.cjs.map +1 -1
- package/dist/components/atoms/RadioButton/index.d.ts.map +1 -1
- package/dist/components/atoms/RadioButton/index.js +3 -16
- package/dist/components/atoms/RadioButton/index.js.map +1 -1
- package/dist/native/components/atoms/RadioButton/index.d.ts +47 -9
- package/dist/native/components/atoms/RadioButton/index.d.ts.map +1 -0
- package/dist/native/components/atoms/RadioButton/index.js +43 -0
- package/dist/native/components/atoms/RadioButton/index.js.map +1 -0
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ var cx = require('@flipdish/ui-library/utilities/cx');
|
|
|
5
5
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
|
+
var selectionControl_styles = require('../../__internal__/selectionControl/selectionControl.styles.cjs');
|
|
8
9
|
|
|
9
10
|
const RadioGroupContext = React.createContext(null);
|
|
10
11
|
/** Visual-only radio circle with no input behaviour, for building custom selectable controls; `RadioButton` renders it inside a react-aria `Radio`. */
|
|
@@ -23,24 +24,10 @@ const RadioButton = ({ label, hint, className, size = 'sm', 'data-testid': dataT
|
|
|
23
24
|
size = context?.size ?? size;
|
|
24
25
|
const fallbackTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'radio-button', rootName: 'radio-button' });
|
|
25
26
|
const radioTestId = !dataTestId && context?.testIdPrefix ? testIdUtils.joinTestId(context.testIdPrefix, `option-${testIdUtils.slugifyTestId(String(ariaRadioProps.value))}`) : fallbackTestId;
|
|
26
|
-
|
|
27
|
-
sm: {
|
|
28
|
-
root: 'gap-2',
|
|
29
|
-
textWrapper: '',
|
|
30
|
-
label: 'text-sm font-medium',
|
|
31
|
-
hint: 'text-sm',
|
|
32
|
-
},
|
|
33
|
-
md: {
|
|
34
|
-
root: 'gap-3',
|
|
35
|
-
textWrapper: 'gap-0.5',
|
|
36
|
-
label: 'text-md font-medium',
|
|
37
|
-
hint: 'text-md',
|
|
38
|
-
},
|
|
39
|
-
};
|
|
40
|
-
return (jsxRuntime.jsx(reactAriaComponents.Radio, { ...ariaRadioProps, "data-testid": radioTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(RadioButtonBase, { size: size, isSelected: isSelected, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
|
|
27
|
+
return (jsxRuntime.jsx(reactAriaComponents.Radio, { ...ariaRadioProps, "data-testid": radioTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControl_styles.selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(RadioButtonBase, { size: size, isSelected: isSelected, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', selectionControl_styles.selectionControlSizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', selectionControl_styles.selectionControlSizes[size].label), children: label }), hint && (
|
|
41
28
|
// biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
|
|
42
29
|
// biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
|
|
43
|
-
jsxRuntime.jsx("span", { className: cx.cx('text-tertiary',
|
|
30
|
+
jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectionControl_styles.selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
|
|
44
31
|
};
|
|
45
32
|
RadioButton.displayName = 'RadioButton';
|
|
46
33
|
/** Wrapper around react-aria-components' `RadioGroup` that stacks its `RadioButton` children and passes them `size` and a derived `data-testid`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/RadioButton/index.tsx"],"sourcesContent":[null],"names":["createContext","_jsx","cx","useContext","useResolvedTestId","joinTestId","slugifyTestId","AriaRadio","_jsxs","_Fragment","AriaRadioGroup"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/RadioButton/index.tsx"],"sourcesContent":[null],"names":["createContext","_jsx","cx","useContext","useResolvedTestId","joinTestId","slugifyTestId","AriaRadio","selectionControlSizes","_jsxs","_Fragment","AriaRadioGroup"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/RadioButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,IAAI,mBAAmB,EAC3C,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/RadioButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,IAAI,mBAAmB,EAC3C,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,MAAM,WAAW,oBAAoB;IACnC,wDAAwD;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,uJAAuJ;AACvJ,eAAO,MAAM,eAAe;kEAAwE,oBAAoB;;CAkBvH,CAAC;AAGF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,0GAA0G;IAC1G,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wGAAwG;IACxG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW;qFAA2F,gBAAgB;;CA+ClI,CAAC;AAGF,UAAU,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,EAAE,mBAAmB;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oJAAoJ;AACpJ,eAAO,MAAM,UAAU,GAAI,oEAA2E,eAAe,gCAUpH,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
|
3
3
|
import { useResolvedTestId, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
4
|
import { createContext, useContext } from 'react';
|
|
5
5
|
import { Radio, RadioGroup as RadioGroup$1 } from 'react-aria-components';
|
|
6
|
+
import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
|
|
6
7
|
|
|
7
8
|
const RadioGroupContext = createContext(null);
|
|
8
9
|
/** Visual-only radio circle with no input behaviour, for building custom selectable controls; `RadioButton` renders it inside a react-aria `Radio`. */
|
|
@@ -21,24 +22,10 @@ const RadioButton = ({ label, hint, className, size = 'sm', 'data-testid': dataT
|
|
|
21
22
|
size = context?.size ?? size;
|
|
22
23
|
const fallbackTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-button', rootName: 'radio-button' });
|
|
23
24
|
const radioTestId = !dataTestId && context?.testIdPrefix ? joinTestId(context.testIdPrefix, `option-${slugifyTestId(String(ariaRadioProps.value))}`) : fallbackTestId;
|
|
24
|
-
|
|
25
|
-
sm: {
|
|
26
|
-
root: 'gap-2',
|
|
27
|
-
textWrapper: '',
|
|
28
|
-
label: 'text-sm font-medium',
|
|
29
|
-
hint: 'text-sm',
|
|
30
|
-
},
|
|
31
|
-
md: {
|
|
32
|
-
root: 'gap-3',
|
|
33
|
-
textWrapper: 'gap-0.5',
|
|
34
|
-
label: 'text-md font-medium',
|
|
35
|
-
hint: 'text-md',
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
return (jsx(Radio, { ...ariaRadioProps, "data-testid": radioTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(RadioButtonBase, { size: size, isSelected: isSelected, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
|
|
25
|
+
return (jsx(Radio, { ...ariaRadioProps, "data-testid": radioTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(RadioButtonBase, { size: size, isSelected: isSelected, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', selectionControlSizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', selectionControlSizes[size].label), children: label }), hint && (
|
|
39
26
|
// biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
|
|
40
27
|
// biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
|
|
41
|
-
jsx("span", { className: cx('text-tertiary',
|
|
28
|
+
jsx("span", { className: cx('text-tertiary', selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
|
|
42
29
|
};
|
|
43
30
|
RadioButton.displayName = 'RadioButton';
|
|
44
31
|
/** Wrapper around react-aria-components' `RadioGroup` that stacks its `RadioButton` children and passes them `size` and a derived `data-testid`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/RadioButton/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadio","_jsxs","_Fragment","AriaRadioGroup"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/RadioButton/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadio","_jsxs","_Fragment","AriaRadioGroup"],"mappings":"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"}
|
|
@@ -1,12 +1,50 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
export interface RadioButtonProps {
|
|
3
|
+
/** Identifies this option within its `RadioGroup`; selecting it sets the group's value to this. */
|
|
4
|
+
value: string;
|
|
5
|
+
/** Sets the circle size and the label and hint text size; a parent `RadioGroup`'s `size` overrides it. */
|
|
6
|
+
size?: 'sm' | 'md';
|
|
7
|
+
/** Text shown beside the circle; pressing it selects the option. */
|
|
8
|
+
label?: ReactNode;
|
|
9
|
+
/** Supporting text shown below the label. */
|
|
10
|
+
hint?: ReactNode;
|
|
11
|
+
/** Disables this option and shows a reduced-opacity state. */
|
|
12
|
+
isDisabled?: boolean;
|
|
13
|
+
/** Extra classes merged onto the root `Pressable`. */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Web-style accessible name, used as `accessibilityLabel` so shared call sites work on both platforms. */
|
|
16
|
+
'aria-label'?: string;
|
|
17
|
+
/** Overrides the derived `testID` (defaults to `<group>--option-<value>` or `fd-radio-button`). */
|
|
18
|
+
'data-testid'?: string;
|
|
19
|
+
}
|
|
1
20
|
/**
|
|
2
|
-
* `RadioButton`
|
|
21
|
+
* React Native `RadioButton` — the same circle, dot, label and hint as web, built from
|
|
22
|
+
* `Pressable` and `View` instead of a react-aria `Radio`. Selection lives in the parent
|
|
23
|
+
* `RadioGroup`; there is no arrow-key navigation between options on touch devices.
|
|
3
24
|
*
|
|
4
|
-
*
|
|
5
|
-
* that importing `@flipdish/ui-library/components/atoms/RadioButton` from React Native fails at
|
|
6
|
-
* compile time rather than resolving to the web build's types. There is no
|
|
7
|
-
* matching `index.js`, so Metro cannot bundle this module either.
|
|
8
|
-
*
|
|
9
|
-
* To make `RadioButton` available on React Native, add an `index.native.tsx` beside
|
|
10
|
-
* its `index.tsx` — the build picks it up automatically and this stub disappears.
|
|
25
|
+
* @summary one option in a mutually exclusive group (React Native)
|
|
11
26
|
*/
|
|
12
|
-
export declare const
|
|
27
|
+
export declare const RadioButton: ({ value, label, hint, className, size: sizeProp, isDisabled: isDisabledProp, "aria-label": ariaLabel, "data-testid": dataTestId, }: RadioButtonProps) => import("react").JSX.Element;
|
|
28
|
+
export interface RadioGroupProps {
|
|
29
|
+
/** The `RadioButton` options. */
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
/** Sets the size of every option in the group. */
|
|
32
|
+
size?: 'sm' | 'md';
|
|
33
|
+
/** Controlled selected value. */
|
|
34
|
+
value?: string | null;
|
|
35
|
+
/** Initial selected value for uncontrolled usage. */
|
|
36
|
+
defaultValue?: string | null;
|
|
37
|
+
/** Called with the newly selected option's `value`. */
|
|
38
|
+
onChange?: (value: string) => void;
|
|
39
|
+
/** Disables every option in the group. */
|
|
40
|
+
isDisabled?: boolean;
|
|
41
|
+
/** Extra classes merged onto the root `View`. */
|
|
42
|
+
className?: string;
|
|
43
|
+
/** Web-style accessible name for the group; native has no `aria-labelledby`, so set this whenever the group needs a name. */
|
|
44
|
+
'aria-label'?: string;
|
|
45
|
+
/** Overrides the `testID` (defaults to `fd-radio-group`). */
|
|
46
|
+
'data-testid'?: string;
|
|
47
|
+
}
|
|
48
|
+
/** React Native `RadioGroup` that stacks its `RadioButton` children, owns which one is selected, and passes them `size` and a derived `testID`. */
|
|
49
|
+
export declare const RadioGroup: ({ children, className, size, value, defaultValue, onChange, isDisabled, "aria-label": ariaLabel, "data-testid": dataTestId, }: RadioGroupProps) => import("react").JSX.Element;
|
|
50
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/RadioButton/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAgB5E,MAAM,WAAW,gBAAgB;IAC/B,mGAAmG;IACnG,KAAK,EAAE,MAAM,CAAC;IACd,0GAA0G;IAC1G,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mGAAmG;IACnG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,oIASzB,gBAAgB,gCAqClB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,kDAAkD;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6HAA6H;IAC7H,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,mJAAmJ;AACnJ,eAAO,MAAM,UAAU,GAAI,+HAUxB,eAAe,gCAkBjB,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cx } from '../../../utilities/cx/index.js';
|
|
3
|
+
import { useResolvedTestId, joinTestId, slugifyTestId } from '../../../utilities/testIdUtils/index.js';
|
|
4
|
+
import { createContext, useContext, useState } from 'react';
|
|
5
|
+
import { Pressable, View } from 'react-native';
|
|
6
|
+
import { SelectionControlText } from '../../__internal__/selectionControl/SelectionControlText.js';
|
|
7
|
+
import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
|
|
8
|
+
import { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint, getAccessibleName } from '../../__internal__/selectionControl/selectionControl.utils.js';
|
|
9
|
+
|
|
10
|
+
const RadioGroupContext = createContext(null);
|
|
11
|
+
/**
|
|
12
|
+
* React Native `RadioButton` — the same circle, dot, label and hint as web, built from
|
|
13
|
+
* `Pressable` and `View` instead of a react-aria `Radio`. Selection lives in the parent
|
|
14
|
+
* `RadioGroup`; there is no arrow-key navigation between options on touch devices.
|
|
15
|
+
*
|
|
16
|
+
* @summary one option in a mutually exclusive group (React Native)
|
|
17
|
+
*/
|
|
18
|
+
const RadioButton = ({ value, label, hint, className, size: sizeProp = 'sm', isDisabled: isDisabledProp, 'aria-label': ariaLabel, 'data-testid': dataTestId, }) => {
|
|
19
|
+
const group = useContext(RadioGroupContext);
|
|
20
|
+
const size = group?.size ?? sizeProp;
|
|
21
|
+
const isDisabled = Boolean(isDisabledProp || group?.isDisabled);
|
|
22
|
+
const isSelected = group?.selectedValue === value;
|
|
23
|
+
const fallbackTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-button', rootName: 'radio-button' });
|
|
24
|
+
const radioTestId = !dataTestId && group ? joinTestId(group.testIdPrefix, `option-${slugifyTestId(value)}`) : fallbackTestId;
|
|
25
|
+
return (jsxs(Pressable, { testID: radioTestId, disabled: isDisabled, onPress: () => group?.select(value), accessibilityRole: "radio", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: getAccessibleName(ariaLabel, label), accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isSelected, disabled: isDisabled }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsx(View, { className: cx('size-4 shrink-0 items-center justify-center rounded-full border border-primary bg-primary', size === 'md' && 'size-5', isSelected && 'border-brand-solid bg-brand-solid', isDisabled && 'opacity-50', isDisabled && !isSelected && 'bg-tertiary', (label || hint) && 'mt-0.5'), children: isSelected ? jsx(View, { className: cx('size-1.5 rounded-full bg-fg-white', size === 'md' && 'size-2') }) : null }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
|
|
26
|
+
};
|
|
27
|
+
/** React Native `RadioGroup` that stacks its `RadioButton` children, owns which one is selected, and passes them `size` and a derived `testID`. */
|
|
28
|
+
const RadioGroup = ({ children, className, size = 'sm', value, defaultValue = null, onChange, isDisabled = false, 'aria-label': ariaLabel, 'data-testid': dataTestId, }) => {
|
|
29
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
30
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
|
|
31
|
+
const selectedValue = value !== undefined ? value : uncontrolledValue;
|
|
32
|
+
const select = (next) => {
|
|
33
|
+
if (next === selectedValue)
|
|
34
|
+
return;
|
|
35
|
+
if (value === undefined)
|
|
36
|
+
setUncontrolledValue(next);
|
|
37
|
+
onChange?.(next);
|
|
38
|
+
};
|
|
39
|
+
return (jsx(RadioGroupContext.Provider, { value: { size, testIdPrefix: rootTestId, selectedValue, isDisabled, select }, children: jsx(View, { testID: rootTestId, accessibilityRole: "radiogroup", accessibilityLabel: ariaLabel, className: cx('flex flex-col gap-4', className), children: children }) }));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export { RadioButton, RadioGroup };
|
|
43
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/RadioButton/index.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|