@cdx-ui/primitives 0.0.1-beta.141 → 0.0.1-beta.143
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/lib/commonjs/checkbox/CheckboxRoot.web.js +91 -28
- package/lib/commonjs/checkbox/CheckboxRoot.web.js.map +1 -1
- package/lib/commonjs/checkbox/useCheckboxRoot.js +33 -19
- package/lib/commonjs/checkbox/useCheckboxRoot.js.map +1 -1
- package/lib/commonjs/radio/RadioGroup.js +65 -16
- package/lib/commonjs/radio/RadioGroup.js.map +1 -1
- package/lib/commonjs/radio/RadioRoot.web.js +114 -26
- package/lib/commonjs/radio/RadioRoot.web.js.map +1 -1
- package/lib/commonjs/radio/context.js.map +1 -1
- package/lib/commonjs/radio/useRadioGroupNavigation.js +79 -0
- package/lib/commonjs/radio/useRadioGroupNavigation.js.map +1 -0
- package/lib/commonjs/radio/useRadioRoot.js +14 -13
- package/lib/commonjs/radio/useRadioRoot.js.map +1 -1
- package/lib/module/checkbox/CheckboxRoot.web.js +92 -29
- package/lib/module/checkbox/CheckboxRoot.web.js.map +1 -1
- package/lib/module/checkbox/useCheckboxRoot.js +34 -20
- package/lib/module/checkbox/useCheckboxRoot.js.map +1 -1
- package/lib/module/radio/RadioGroup.js +68 -19
- package/lib/module/radio/RadioGroup.js.map +1 -1
- package/lib/module/radio/RadioRoot.web.js +117 -29
- package/lib/module/radio/RadioRoot.web.js.map +1 -1
- package/lib/module/radio/context.js.map +1 -1
- package/lib/module/radio/useRadioGroupNavigation.js +74 -0
- package/lib/module/radio/useRadioGroupNavigation.js.map +1 -0
- package/lib/module/radio/useRadioRoot.js +14 -13
- package/lib/module/radio/useRadioRoot.js.map +1 -1
- package/lib/typescript/checkbox/CheckboxRoot.web.d.ts +8 -0
- package/lib/typescript/checkbox/CheckboxRoot.web.d.ts.map +1 -1
- package/lib/typescript/checkbox/useCheckboxRoot.d.ts +7 -18
- package/lib/typescript/checkbox/useCheckboxRoot.d.ts.map +1 -1
- package/lib/typescript/radio/RadioGroup.d.ts.map +1 -1
- package/lib/typescript/radio/RadioRoot.web.d.ts +8 -0
- package/lib/typescript/radio/RadioRoot.web.d.ts.map +1 -1
- package/lib/typescript/radio/context.d.ts +6 -1
- package/lib/typescript/radio/context.d.ts.map +1 -1
- package/lib/typescript/radio/types.d.ts +7 -0
- package/lib/typescript/radio/types.d.ts.map +1 -1
- package/lib/typescript/radio/useRadioGroupNavigation.d.ts +17 -0
- package/lib/typescript/radio/useRadioGroupNavigation.d.ts.map +1 -0
- package/lib/typescript/radio/useRadioRoot.d.ts +4 -18
- package/lib/typescript/radio/useRadioRoot.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/checkbox/CheckboxRoot.web.tsx +105 -29
- package/src/checkbox/useCheckboxRoot.ts +37 -15
- package/src/radio/RadioGroup.tsx +84 -20
- package/src/radio/RadioRoot.web.tsx +136 -31
- package/src/radio/context.tsx +6 -1
- package/src/radio/types.ts +6 -0
- package/src/radio/useRadioGroupNavigation.ts +104 -0
- package/src/radio/useRadioRoot.ts +18 -11
|
@@ -7,12 +7,21 @@ exports.CheckboxRoot = void 0;
|
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _visuallyHidden = require("@react-aria/visually-hidden");
|
|
10
|
+
var _utils = require("@cdx-ui/utils");
|
|
10
11
|
var _focus = require("@react-native-aria/focus");
|
|
11
12
|
var _slot = require("../slot");
|
|
12
13
|
var _dataAttributes = require("../utils/dataAttributes");
|
|
13
14
|
var _context = require("./context");
|
|
14
15
|
var _useCheckboxRoot = require("./useCheckboxRoot");
|
|
15
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
/**
|
|
18
|
+
* Web Checkbox root.
|
|
19
|
+
*
|
|
20
|
+
* On web, `@react-native-aria/checkbox` re-exports `@react-aria/checkbox`'s
|
|
21
|
+
* `useCheckbox`, whose `inputProps` target a native `<input type="checkbox">`
|
|
22
|
+
* (selection via `onChange`). Toggle must be applied explicitly on the Pressable —
|
|
23
|
+
* `inputProps.onPress` does **not** call `toggleState.toggle()`.
|
|
24
|
+
*/
|
|
16
25
|
const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
17
26
|
asChild,
|
|
18
27
|
children,
|
|
@@ -39,7 +48,8 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
39
48
|
isDisabled,
|
|
40
49
|
isHovered,
|
|
41
50
|
mergedRef,
|
|
42
|
-
inputRef
|
|
51
|
+
inputRef,
|
|
52
|
+
toggle
|
|
43
53
|
} = (0, _useCheckboxRoot.useCheckboxRoot)(props, ref, {
|
|
44
54
|
useInputRefForAria: true
|
|
45
55
|
});
|
|
@@ -47,46 +57,99 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
47
57
|
focusProps,
|
|
48
58
|
isFocusVisible
|
|
49
59
|
} = (0, _focus.useFocusRing)();
|
|
60
|
+
|
|
61
|
+
// Strip native-input / internal props — they must not land on Pressable.
|
|
62
|
+
const {
|
|
63
|
+
onPress: _onPress,
|
|
64
|
+
onChange: _onChange,
|
|
65
|
+
role: _role,
|
|
66
|
+
tabIndex: _tabIndex,
|
|
67
|
+
disabled: _disabled,
|
|
68
|
+
checked: _checked,
|
|
69
|
+
value: _value,
|
|
70
|
+
type: _type,
|
|
71
|
+
name: _name,
|
|
72
|
+
form: _form,
|
|
73
|
+
required: _required,
|
|
74
|
+
...inputAriaProps
|
|
75
|
+
} = groupItemInputProps;
|
|
76
|
+
const resolvedChecked = !!(isChecked || isCheckedProp);
|
|
77
|
+
const resolvedIndeterminate = !!(isIndeterminate || isIndeterminateProp);
|
|
78
|
+
const resolvedDisabled = !!(isDisabled || isDisabledProp);
|
|
79
|
+
const resolvedReadOnly = !!(isReadOnly || isReadOnlyProp);
|
|
80
|
+
const ariaChecked = resolvedIndeterminate ? 'mixed' : resolvedChecked;
|
|
81
|
+
const handleToggle = () => {
|
|
82
|
+
if (resolvedDisabled || resolvedReadOnly) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
toggle();
|
|
86
|
+
};
|
|
87
|
+
const handleKeyDown = event => {
|
|
88
|
+
if (event.key === ' ' || event.key === 'Spacebar') {
|
|
89
|
+
event.preventDefault();
|
|
90
|
+
handleToggle();
|
|
91
|
+
}
|
|
92
|
+
};
|
|
50
93
|
const contextValue = {
|
|
51
|
-
isChecked:
|
|
52
|
-
isDisabled:
|
|
94
|
+
isChecked: resolvedChecked,
|
|
95
|
+
isDisabled: resolvedDisabled,
|
|
53
96
|
isFocusVisible: isFocusVisible || isFocusVisibleProp,
|
|
54
97
|
isHovered: isHovered || isHoveredProp,
|
|
55
98
|
isInvalid: isInvalid || isInvalidProp,
|
|
56
|
-
isReadOnly:
|
|
57
|
-
isIndeterminate:
|
|
99
|
+
isReadOnly: resolvedReadOnly,
|
|
100
|
+
isIndeterminate: resolvedIndeterminate,
|
|
58
101
|
isPressed,
|
|
59
102
|
isFocused
|
|
60
103
|
};
|
|
61
104
|
const Comp = asChild ? _slot.Slot : _reactNative.Pressable;
|
|
62
105
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.CheckboxProvider, {
|
|
63
106
|
value: contextValue,
|
|
64
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
65
|
-
...combinedProps,
|
|
66
|
-
ref: mergedRef,
|
|
67
|
-
tabIndex: -1,
|
|
68
|
-
role: "label"
|
|
69
|
-
// eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
|
|
70
|
-
,
|
|
71
|
-
accessibilityRole: "label",
|
|
72
|
-
...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
|
|
73
|
-
checked: isChecked || isCheckedProp,
|
|
74
|
-
disabled: isDisabled || isDisabledProp,
|
|
75
|
-
hover: isHovered || isHoveredProp,
|
|
76
|
-
invalid: isInvalid || isInvalidProp,
|
|
77
|
-
readonly: isReadOnly || isReadOnlyProp,
|
|
78
|
-
active: isPressed,
|
|
79
|
-
focus: isFocused,
|
|
80
|
-
indeterminate: isIndeterminate || isIndeterminateProp,
|
|
81
|
-
focusVisible: isFocusVisible
|
|
82
|
-
})),
|
|
107
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
83
108
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
|
|
84
109
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
110
|
+
ref: inputRef,
|
|
111
|
+
type: "checkbox",
|
|
112
|
+
value: combinedProps.value,
|
|
113
|
+
checked: resolvedChecked,
|
|
114
|
+
disabled: resolvedDisabled,
|
|
115
|
+
tabIndex: -1,
|
|
116
|
+
"aria-hidden": true,
|
|
117
|
+
readOnly: true,
|
|
118
|
+
style: {
|
|
119
|
+
pointerEvents: 'none'
|
|
120
|
+
}
|
|
88
121
|
})
|
|
89
|
-
}),
|
|
122
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
|
|
123
|
+
...combinedProps,
|
|
124
|
+
...inputAriaProps,
|
|
125
|
+
ref: mergedRef,
|
|
126
|
+
role: "checkbox",
|
|
127
|
+
"aria-checked": ariaChecked,
|
|
128
|
+
"aria-disabled": resolvedDisabled || undefined,
|
|
129
|
+
accessibilityRole: "checkbox",
|
|
130
|
+
accessibilityState: {
|
|
131
|
+
checked: resolvedIndeterminate ? 'mixed' : resolvedChecked,
|
|
132
|
+
disabled: resolvedDisabled
|
|
133
|
+
},
|
|
134
|
+
tabIndex: resolvedDisabled ? -1 : 0,
|
|
135
|
+
disabled: resolvedDisabled,
|
|
136
|
+
...focusProps,
|
|
137
|
+
onPress: handleToggle,
|
|
138
|
+
onClick: handleToggle,
|
|
139
|
+
onKeyDown: (0, _utils.composeEventHandlers)(combinedProps.onKeyDown, handleKeyDown),
|
|
140
|
+
...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
|
|
141
|
+
checked: resolvedChecked,
|
|
142
|
+
disabled: resolvedDisabled,
|
|
143
|
+
hover: isHovered || isHoveredProp,
|
|
144
|
+
invalid: isInvalid || isInvalidProp,
|
|
145
|
+
readonly: resolvedReadOnly,
|
|
146
|
+
active: isPressed,
|
|
147
|
+
focus: isFocused,
|
|
148
|
+
indeterminate: resolvedIndeterminate,
|
|
149
|
+
focusVisible: isFocusVisible || isFocusVisibleProp
|
|
150
|
+
})),
|
|
151
|
+
children: children
|
|
152
|
+
})]
|
|
90
153
|
})
|
|
91
154
|
});
|
|
92
155
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_visuallyHidden","_focus","_slot","_dataAttributes","_context","_useCheckboxRoot","_jsxRuntime","CheckboxRoot","exports","forwardRef","asChild","children","props","ref","isHovered","isHoveredProp","isFocusVisible","isFocusVisibleProp","isChecked","isCheckedProp","isDisabled","isDisabledProp","isInvalid","isInvalidProp","isReadOnly","isReadOnlyProp","isIndeterminate","isIndeterminateProp","isFocused","isPressed","combinedProps","groupItemInputProps","mergedRef","inputRef","useCheckboxRoot","useInputRefForAria","focusProps","useFocusRing","contextValue","Comp","Slot","Pressable","jsx","CheckboxProvider","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_visuallyHidden","_utils","_focus","_slot","_dataAttributes","_context","_useCheckboxRoot","_jsxRuntime","CheckboxRoot","exports","forwardRef","asChild","children","props","ref","isHovered","isHoveredProp","isFocusVisible","isFocusVisibleProp","isChecked","isCheckedProp","isDisabled","isDisabledProp","isInvalid","isInvalidProp","isReadOnly","isReadOnlyProp","isIndeterminate","isIndeterminateProp","isFocused","isPressed","combinedProps","groupItemInputProps","mergedRef","inputRef","toggle","useCheckboxRoot","useInputRefForAria","focusProps","useFocusRing","onPress","_onPress","onChange","_onChange","role","_role","tabIndex","_tabIndex","disabled","_disabled","checked","_checked","value","_value","type","_type","name","_name","form","_form","required","_required","inputAriaProps","resolvedChecked","resolvedIndeterminate","resolvedDisabled","resolvedReadOnly","ariaChecked","handleToggle","handleKeyDown","event","key","preventDefault","contextValue","Comp","Slot","Pressable","jsx","CheckboxProvider","jsxs","Fragment","VisuallyHidden","readOnly","style","pointerEvents","undefined","accessibilityRole","accessibilityState","onClick","onKeyDown","composeEventHandlers","mergeDataAttributes","dataAttributes","hover","invalid","readonly","active","focus","indeterminate","focusVisible","displayName"],"sourceRoot":"../../../src","sources":["checkbox/CheckboxRoot.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -14,27 +14,35 @@ function useCheckboxRoot(props, ref, {
|
|
|
14
14
|
useInputRefForAria = false
|
|
15
15
|
} = {}) {
|
|
16
16
|
const formControlContext = (0, _utils.useFormControlContext)();
|
|
17
|
-
const
|
|
17
|
+
const checkboxGroupContext = (0, _react.useContext)(_context.CheckboxGroupContext);
|
|
18
|
+
|
|
19
|
+
// Only pull field-state flags from FormControl — never spread the whole context
|
|
20
|
+
// (ids, setters, htmlProps) onto the host element.
|
|
21
|
+
const isInvalid = props.isInvalid ?? formControlContext.isInvalid;
|
|
22
|
+
const isReadOnly = props.isReadOnly ?? formControlContext.isReadOnly ?? checkboxGroupContext?.state.isReadOnly;
|
|
23
|
+
const isDisabled = props.isDisabled ?? formControlContext.isDisabled ?? checkboxGroupContext?.state.isDisabled;
|
|
24
|
+
const isIndeterminate = props.isIndeterminate;
|
|
25
|
+
const combinedProps = {
|
|
26
|
+
...props,
|
|
18
27
|
isInvalid,
|
|
19
28
|
isReadOnly,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} = {
|
|
23
|
-
...formControlContext,
|
|
24
|
-
...props
|
|
29
|
+
isDisabled,
|
|
30
|
+
isIndeterminate
|
|
25
31
|
};
|
|
26
|
-
const checkboxGroupContext = (0, _react.useContext)(_context.CheckboxGroupContext);
|
|
27
32
|
const state = (0, _toggle.useToggleState)({
|
|
28
|
-
...combinedProps,
|
|
29
33
|
defaultSelected: props.defaultIsChecked,
|
|
30
|
-
isSelected: props.isChecked
|
|
34
|
+
isSelected: props.isChecked,
|
|
35
|
+
onChange: props.onChange,
|
|
36
|
+
isReadOnly,
|
|
37
|
+
isDisabled
|
|
31
38
|
});
|
|
32
39
|
const rootRef = (0, _react.useRef)(null);
|
|
33
40
|
const inputRef = (0, _react.useRef)(null);
|
|
34
41
|
const mergedRootRef = (0, _utils.mergeRefs)(ref, rootRef);
|
|
35
|
-
const ariaLabel =
|
|
42
|
+
const ariaLabel = props['aria-label'] || props.value || 'Checkbox';
|
|
36
43
|
const groupToggleState = (0, _toggle.useToggleState)(checkboxGroupContext ? {
|
|
37
|
-
isReadOnly: isReadOnly
|
|
44
|
+
isReadOnly: !!isReadOnly,
|
|
45
|
+
isDisabled: !!isDisabled,
|
|
38
46
|
isSelected: checkboxGroupContext.state.isSelected(combinedProps.value),
|
|
39
47
|
onChange(isSelected) {
|
|
40
48
|
if (isSelected) {
|
|
@@ -47,24 +55,29 @@ function useCheckboxRoot(props, ref, {
|
|
|
47
55
|
} : {
|
|
48
56
|
isSelected: false
|
|
49
57
|
});
|
|
58
|
+
const toggleState = checkboxGroupContext ? groupToggleState : state;
|
|
50
59
|
const {
|
|
51
60
|
inputProps: groupItemInputProps
|
|
52
61
|
} = (0, _checkbox.useCheckbox)({
|
|
53
62
|
...combinedProps,
|
|
54
63
|
'aria-label': ariaLabel,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
})
|
|
59
|
-
}, checkboxGroupContext ? groupToggleState : state, useInputRefForAria ? inputRef : rootRef);
|
|
64
|
+
isReadOnly: !!isReadOnly,
|
|
65
|
+
isDisabled: !!isDisabled
|
|
66
|
+
}, toggleState, useInputRefForAria ? inputRef : rootRef);
|
|
60
67
|
const {
|
|
61
68
|
checked: isChecked,
|
|
62
|
-
disabled:
|
|
69
|
+
disabled: isDisabledFromInput
|
|
63
70
|
} = groupItemInputProps;
|
|
64
71
|
const {
|
|
65
72
|
hoverProps,
|
|
66
73
|
isHovered
|
|
67
74
|
} = (0, _interactions.useHover)({}, rootRef);
|
|
75
|
+
const toggle = (0, _react.useCallback)(() => {
|
|
76
|
+
if (isDisabled || isReadOnly) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
toggleState.toggle();
|
|
80
|
+
}, [isDisabled, isReadOnly, toggleState]);
|
|
68
81
|
return {
|
|
69
82
|
combinedProps,
|
|
70
83
|
isInvalid,
|
|
@@ -72,11 +85,12 @@ function useCheckboxRoot(props, ref, {
|
|
|
72
85
|
isIndeterminate,
|
|
73
86
|
groupItemInputProps,
|
|
74
87
|
isChecked,
|
|
75
|
-
isDisabled,
|
|
88
|
+
isDisabled: isDisabledFromInput,
|
|
76
89
|
isHovered,
|
|
77
90
|
hoverProps,
|
|
78
91
|
mergedRef: mergedRootRef,
|
|
79
|
-
inputRef
|
|
92
|
+
inputRef,
|
|
93
|
+
toggle
|
|
80
94
|
};
|
|
81
95
|
}
|
|
82
96
|
//# sourceMappingURL=useCheckboxRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_utils","_checkbox","_interactions","_toggle","_context","useCheckboxRoot","props","ref","useInputRefForAria","formControlContext","useFormControlContext","
|
|
1
|
+
{"version":3,"names":["_react","require","_utils","_checkbox","_interactions","_toggle","_context","useCheckboxRoot","props","ref","useInputRefForAria","formControlContext","useFormControlContext","checkboxGroupContext","useContext","CheckboxGroupContext","isInvalid","isReadOnly","state","isDisabled","isIndeterminate","combinedProps","useToggleState","defaultSelected","defaultIsChecked","isSelected","isChecked","onChange","rootRef","useRef","inputRef","mergedRootRef","mergeRefs","ariaLabel","value","groupToggleState","addValue","removeValue","toggleState","inputProps","groupItemInputProps","useCheckbox","checked","disabled","isDisabledFromInput","hoverProps","isHovered","useHover","toggle","useCallback","mergedRef"],"sourceRoot":"../../../src","sources":["checkbox/useCheckboxRoot.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,6 +12,7 @@ var _radio2 = require("@react-stately/radio");
|
|
|
12
12
|
var _slot = require("../slot");
|
|
13
13
|
var _dataAttributes = require("../utils/dataAttributes");
|
|
14
14
|
var _context = require("./context");
|
|
15
|
+
var _useRadioGroupNavigation = require("./useRadioGroupNavigation");
|
|
15
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
17
|
const RadioGroup = exports.RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
17
18
|
asChild,
|
|
@@ -20,25 +21,66 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
20
21
|
style,
|
|
21
22
|
...props
|
|
22
23
|
}, ref) => {
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
const formControlProps = (0, _utils.useFormControl)({
|
|
25
|
+
isDisabled: props.isDisabled,
|
|
26
|
+
isRequired: props.isRequired,
|
|
27
|
+
isInvalid: props.isInvalid,
|
|
28
|
+
isReadOnly: props.isReadOnly
|
|
29
|
+
});
|
|
30
|
+
const isDisabled = props.isDisabled ?? Boolean(formControlProps.disabled);
|
|
31
|
+
const isInvalid = props.isInvalid ?? Boolean(formControlProps['aria-invalid']);
|
|
32
|
+
const isRequired = props.isRequired ?? Boolean(formControlProps.required);
|
|
33
|
+
const isReadOnly = props.isReadOnly ?? Boolean(formControlProps.readOnly);
|
|
34
|
+
const name = props.name ?? formControlProps.name;
|
|
35
|
+
const ariaLabel = props['aria-label'];
|
|
36
|
+
const ariaLabelledBy = props['aria-labelledby'] ?? formControlProps['aria-labelledby'];
|
|
37
|
+
const ariaDescribedBy = formControlProps['aria-describedby'];
|
|
28
38
|
const radioGroupState = (0, _radio2.useRadioGroupState)({
|
|
29
|
-
|
|
30
|
-
|
|
39
|
+
name,
|
|
40
|
+
value: props.value,
|
|
41
|
+
defaultValue: props.defaultValue,
|
|
42
|
+
onChange: props.onChange,
|
|
43
|
+
isDisabled,
|
|
44
|
+
isInvalid,
|
|
45
|
+
isRequired,
|
|
46
|
+
isReadOnly,
|
|
47
|
+
validationState: isInvalid ? 'invalid' : 'valid'
|
|
31
48
|
});
|
|
32
49
|
const {
|
|
33
50
|
radioGroupProps
|
|
34
51
|
} = (0, _radio.useRadioGroup)({
|
|
35
|
-
|
|
36
|
-
'aria-
|
|
52
|
+
'aria-label': ariaLabel,
|
|
53
|
+
'aria-labelledby': ariaLabelledBy,
|
|
54
|
+
isDisabled
|
|
37
55
|
}, radioGroupState);
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
const
|
|
56
|
+
const [focusedValue, setFocusedValue] = (0, _react.useState)(undefined);
|
|
57
|
+
// Identity of getRadios depends on this so roving tabIndex recomputes after register/unregister.
|
|
58
|
+
const [registrationEpoch, setRegistrationEpoch] = (0, _react.useState)(0);
|
|
59
|
+
const radiosRef = (0, _react.useRef)(new Map());
|
|
60
|
+
(0, _react.useEffect)(() => {
|
|
61
|
+
setFocusedValue(prev => prev !== undefined && prev !== radioGroupState.selectedValue ? undefined : prev);
|
|
62
|
+
}, [radioGroupState.selectedValue]);
|
|
63
|
+
const registerRadio = (0, _react.useCallback)((value, entry) => {
|
|
64
|
+
radiosRef.current.set(value, entry);
|
|
65
|
+
setRegistrationEpoch(epoch => epoch + 1);
|
|
66
|
+
}, []);
|
|
67
|
+
const unregisterRadio = (0, _react.useCallback)(value => {
|
|
68
|
+
radiosRef.current.delete(value);
|
|
69
|
+
setRegistrationEpoch(epoch => epoch + 1);
|
|
70
|
+
}, []);
|
|
71
|
+
const getRadios = (0, _react.useCallback)(() => Array.from(radiosRef.current.entries()), [registrationEpoch]);
|
|
72
|
+
const {
|
|
73
|
+
handleKeyDown
|
|
74
|
+
} = (0, _useRadioGroupNavigation.useRadioGroupNavigation)({
|
|
75
|
+
getRadios,
|
|
76
|
+
focusedValue,
|
|
77
|
+
setFocusedValue,
|
|
78
|
+
selectedValue: radioGroupState.selectedValue,
|
|
79
|
+
selectValue: value => radioGroupState.setSelectedValue(value)
|
|
80
|
+
});
|
|
81
|
+
const webProps = _reactNative.Platform.OS === 'web' ? {
|
|
82
|
+
onKeyDown: (0, _utils.composeEventHandlers)(props.onKeyDown, handleKeyDown)
|
|
83
|
+
} : {};
|
|
42
84
|
const Comp = asChild ? _slot.Slot : _reactNative.View;
|
|
43
85
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.RadioGroupContext.Provider, {
|
|
44
86
|
value: {
|
|
@@ -51,17 +93,24 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
51
93
|
selectValue: value => radioGroupState.setSelectedValue(value)
|
|
52
94
|
},
|
|
53
95
|
radioGroupState,
|
|
54
|
-
name
|
|
96
|
+
name,
|
|
97
|
+
focusedValue,
|
|
98
|
+
setFocusedValue,
|
|
99
|
+
registerRadio,
|
|
100
|
+
unregisterRadio,
|
|
101
|
+
getRadios
|
|
55
102
|
},
|
|
56
103
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
|
|
57
104
|
...radioGroupProps,
|
|
58
|
-
"aria-label":
|
|
59
|
-
"aria-labelledby":
|
|
105
|
+
"aria-label": ariaLabel,
|
|
106
|
+
"aria-labelledby": ariaLabelledBy,
|
|
107
|
+
"aria-describedby": ariaDescribedBy,
|
|
60
108
|
"aria-required": isRequired || undefined,
|
|
61
109
|
"aria-readonly": isReadOnly || undefined,
|
|
62
110
|
className: className,
|
|
63
111
|
style: style,
|
|
64
112
|
ref: ref,
|
|
113
|
+
...webProps,
|
|
65
114
|
...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
|
|
66
115
|
disabled: isDisabled,
|
|
67
116
|
invalid: isInvalid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_utils","_radio","_radio2","_slot","_dataAttributes","_context","_jsxRuntime","RadioGroup","exports","forwardRef","asChild","children","className","style","props","ref","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_radio","_radio2","_slot","_dataAttributes","_context","_useRadioGroupNavigation","_jsxRuntime","RadioGroup","exports","forwardRef","asChild","children","className","style","props","ref","formControlProps","useFormControl","isDisabled","isRequired","isInvalid","isReadOnly","Boolean","disabled","required","readOnly","name","ariaLabel","ariaLabelledBy","ariaDescribedBy","radioGroupState","useRadioGroupState","value","defaultValue","onChange","validationState","radioGroupProps","useRadioGroup","focusedValue","setFocusedValue","useState","undefined","registrationEpoch","setRegistrationEpoch","radiosRef","useRef","Map","useEffect","prev","selectedValue","registerRadio","useCallback","entry","current","set","epoch","unregisterRadio","delete","getRadios","Array","from","entries","handleKeyDown","useRadioGroupNavigation","selectValue","setSelectedValue","webProps","Platform","OS","onKeyDown","composeEventHandlers","Comp","Slot","View","jsx","RadioGroupContext","Provider","state","isSelected","mergeDataAttributes","dataAttributes","invalid","displayName"],"sourceRoot":"../../../src","sources":["radio/RadioGroup.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AAEA,IAAAQ,wBAAA,GAAAR,OAAA;AAAoE,IAAAS,WAAA,GAAAT,OAAA;AAQ7D,MAAMU,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC1D,MAAMC,gBAAgB,GAAG,IAAAC,qBAAc,EAAC;IACtCC,UAAU,EAAEJ,KAAK,CAACI,UAAU;IAC5BC,UAAU,EAAEL,KAAK,CAACK,UAAU;IAC5BC,SAAS,EAAEN,KAAK,CAACM,SAAS;IAC1BC,UAAU,EAAEP,KAAK,CAACO;EACpB,CAAC,CAAC;EAEF,MAAMH,UAAU,GAAGJ,KAAK,CAACI,UAAU,IAAII,OAAO,CAACN,gBAAgB,CAACO,QAAQ,CAAC;EACzE,MAAMH,SAAS,GAAGN,KAAK,CAACM,SAAS,IAAIE,OAAO,CAACN,gBAAgB,CAAC,cAAc,CAAC,CAAC;EAC9E,MAAMG,UAAU,GAAGL,KAAK,CAACK,UAAU,IAAIG,OAAO,CAACN,gBAAgB,CAACQ,QAAQ,CAAC;EACzE,MAAMH,UAAU,GAAGP,KAAK,CAACO,UAAU,IAAIC,OAAO,CAACN,gBAAgB,CAACS,QAAQ,CAAC;EACzE,MAAMC,IAAI,GAAGZ,KAAK,CAACY,IAAI,IAAIV,gBAAgB,CAACU,IAAI;EAChD,MAAMC,SAAS,GAAGb,KAAK,CAAC,YAAY,CAAC;EACrC,MAAMc,cAAc,GAAGd,KAAK,CAAC,iBAAiB,CAAC,IAAIE,gBAAgB,CAAC,iBAAiB,CAAC;EACtF,MAAMa,eAAe,GAAGb,gBAAgB,CAAC,kBAAkB,CAAC;EAE5D,MAAMc,eAAe,GAAG,IAAAC,0BAAkB,EAAC;IACzCL,IAAI;IACJM,KAAK,EAAElB,KAAK,CAACkB,KAAK;IAClBC,YAAY,EAAEnB,KAAK,CAACmB,YAAY;IAChCC,QAAQ,EAAEpB,KAAK,CAACoB,QAAQ;IACxBhB,UAAU;IACVE,SAAS;IACTD,UAAU;IACVE,UAAU;IACVc,eAAe,EAAEf,SAAS,GAAG,SAAS,GAAG;EAC3C,CAAC,CAAC;EAEF,MAAM;IAAEgB;EAAgB,CAAC,GAAG,IAAAC,oBAAa,EACvC;IACE,YAAY,EAAEV,SAAS;IACvB,iBAAiB,EAAEC,cAAc;IACjCV;EACF,CAAC,EACDY,eACF,CAAC;EAED,MAAM,CAACQ,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAqBC,SAAS,CAAC;EAC/E;EACA,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAH,eAAQ,EAAC,CAAC,CAAC;EAC7D,MAAMI,SAAS,GAAG,IAAAC,aAAM,EAA+B,IAAIC,GAAG,CAAC,CAAC,CAAC;EAEjE,IAAAC,gBAAS,EAAC,MAAM;IACdR,eAAe,CAAES,IAAI,IACnBA,IAAI,KAAKP,SAAS,IAAIO,IAAI,KAAKlB,eAAe,CAACmB,aAAa,GAAGR,SAAS,GAAGO,IAC7E,CAAC;EACH,CAAC,EAAE,CAAClB,eAAe,CAACmB,aAAa,CAAC,CAAC;EAEnC,MAAMC,aAAa,GAAG,IAAAC,kBAAW,EAAC,CAACnB,KAAa,EAAEoB,KAAsB,KAAK;IAC3ER,SAAS,CAACS,OAAO,CAACC,GAAG,CAACtB,KAAK,EAAEoB,KAAK,CAAC;IACnCT,oBAAoB,CAAEY,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,eAAe,GAAG,IAAAL,kBAAW,EAAEnB,KAAa,IAAK;IACrDY,SAAS,CAACS,OAAO,CAACI,MAAM,CAACzB,KAAK,CAAC;IAC/BW,oBAAoB,CAAEY,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,SAAS,GAAG,IAAAP,kBAAW,EAC3B,MAAMQ,KAAK,CAACC,IAAI,CAAChB,SAAS,CAACS,OAAO,CAACQ,OAAO,CAAC,CAAC,CAAC,EAC7C,CAACnB,iBAAiB,CACpB,CAAC;EAED,MAAM;IAAEoB;EAAc,CAAC,GAAG,IAAAC,gDAAuB,EAAC;IAChDL,SAAS;IACTpB,YAAY;IACZC,eAAe;IACfU,aAAa,EAAEnB,eAAe,CAACmB,aAAa;IAC5Ce,WAAW,EAAGhC,KAAa,IAAKF,eAAe,CAACmC,gBAAgB,CAACjC,KAAK;EACxE,CAAC,CAAC;EAEF,MAAMkC,QAAQ,GACZC,qBAAQ,CAACC,EAAE,KAAK,KAAK,GACjB;IACEC,SAAS,EAAE,IAAAC,2BAAoB,EAC5BxD,KAAK,CAAgDuD,SAAS,EAC/DP,aACF;EACF,CAAC,GACD,CAAC,CAAC;EAER,MAAMS,IAAI,GAAG7D,OAAO,GAAG8D,UAAI,GAAGC,iBAAI;EAElC,oBACE,IAAAnE,WAAA,CAAAoE,GAAA,EAACtE,QAAA,CAAAuE,iBAAiB,CAACC,QAAQ;IACzB5C,KAAK,EAAE;MACL6C,KAAK,EAAE;QACL3D,UAAU;QACVE,SAAS;QACTD,UAAU;QACVE,UAAU;QACVyD,UAAU,EAAG9C,KAAa,IAAKF,eAAe,CAACmB,aAAa,KAAKjB,KAAK;QACtEgC,WAAW,EAAGhC,KAAa,IAAKF,eAAe,CAACmC,gBAAgB,CAACjC,KAAK;MACxE,CAAC;MACDF,eAAe;MACfJ,IAAI;MACJY,YAAY;MACZC,eAAe;MACfW,aAAa;MACbM,eAAe;MACfE;IACF,CAAE;IAAA/C,QAAA,eAEF,IAAAL,WAAA,CAAAoE,GAAA,EAACH,IAAI;MAAA,GACCnC,eAAe;MACnB,cAAYT,SAAU;MACtB,mBAAiBC,cAAe;MAChC,oBAAkBC,eAAgB;MAClC,iBAAeV,UAAU,IAAIsB,SAAU;MACvC,iBAAepB,UAAU,IAAIoB,SAAU;MACvC7B,SAAS,EAAEA,SAAU;MACrBC,KAAK,EAAEA,KAAM;MACbE,GAAG,EAAEA,GAAI;MAAA,GACLmD,QAAQ;MAAA,GACR,IAAAa,mCAAmB,EACrBjE,KAAK,EACL,IAAAkE,8BAAc,EAAC;QACbzD,QAAQ,EAAEL,UAAU;QACpB+D,OAAO,EAAE7D;MACX,CAAC,CACH,CAAC;MAAAT,QAAA,EAEAA;IAAQ,CACL;EAAC,CACmB,CAAC;AAEjC,CACF,CAAC;AAEDJ,UAAU,CAAC2E,WAAW,GAAG,YAAY","ignoreList":[]}
|
|
@@ -7,15 +7,22 @@ exports.RadioRoot = void 0;
|
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _visuallyHidden = require("@react-aria/visually-hidden");
|
|
10
|
-
var _utils = require("@
|
|
10
|
+
var _utils = require("@cdx-ui/utils");
|
|
11
11
|
var _focus = require("@react-native-aria/focus");
|
|
12
12
|
var _slot = require("../slot");
|
|
13
13
|
var _dataAttributes = require("../utils/dataAttributes");
|
|
14
14
|
var _context = require("./context");
|
|
15
15
|
var _useRadioRoot = require("./useRadioRoot");
|
|
16
|
+
var _useRadioGroupNavigation = require("./useRadioGroupNavigation");
|
|
16
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Web Radio root.
|
|
20
|
+
*
|
|
21
|
+
* On web, `@react-native-aria/radio` re-exports `@react-aria/radio`'s `useRadio`,
|
|
22
|
+
* whose `inputProps` target a native `<input type="radio">` (selection via
|
|
23
|
+
* `onChange`). Selection must be applied explicitly on the Pressable —
|
|
24
|
+
* `inputProps.onPress` does **not** call `setSelectedValue`.
|
|
25
|
+
*/
|
|
19
26
|
const RadioRoot = exports.RadioRoot = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
20
27
|
asChild,
|
|
21
28
|
children,
|
|
@@ -30,12 +37,12 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
30
37
|
isFocused,
|
|
31
38
|
isPressed
|
|
32
39
|
} = props;
|
|
40
|
+
const radioGroupContext = (0, _react.useContext)(_context.RadioGroupContext);
|
|
33
41
|
const {
|
|
34
42
|
combinedProps,
|
|
35
43
|
isInvalid,
|
|
36
44
|
isReadOnly,
|
|
37
45
|
inputProps,
|
|
38
|
-
labelProps,
|
|
39
46
|
isChecked,
|
|
40
47
|
isDisabled,
|
|
41
48
|
isHovered,
|
|
@@ -48,42 +55,123 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
48
55
|
focusProps,
|
|
49
56
|
isFocusVisible
|
|
50
57
|
} = (0, _focus.useFocusRing)();
|
|
58
|
+
const nodeRef = (0, _react.useRef)(null);
|
|
59
|
+
const setRefs = (0, _utils.mergeRefs)(mergedRef, nodeRef);
|
|
60
|
+
|
|
61
|
+
// Strip native-input / internal props — they must not land on Pressable.
|
|
62
|
+
const {
|
|
63
|
+
onPress: _onPress,
|
|
64
|
+
onChange: _onChange,
|
|
65
|
+
role: _role,
|
|
66
|
+
tabIndex: _tabIndex,
|
|
67
|
+
disabled: _disabled,
|
|
68
|
+
checked: _checked,
|
|
69
|
+
value: _value,
|
|
70
|
+
type: _type,
|
|
71
|
+
name: _name,
|
|
72
|
+
form: _form,
|
|
73
|
+
required: _required,
|
|
74
|
+
...inputAriaProps
|
|
75
|
+
} = inputProps;
|
|
76
|
+
const resolvedDisabled = !!(isDisabled || isDisabledProp);
|
|
77
|
+
const resolvedReadOnly = !!(isReadOnly || isReadOnlyProp);
|
|
78
|
+
const selectThis = () => {
|
|
79
|
+
if (resolvedDisabled || resolvedReadOnly) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
radioGroupContext?.radioGroupState.setSelectedValue(combinedProps.value);
|
|
83
|
+
};
|
|
84
|
+
const selectedValue = radioGroupContext?.radioGroupState.selectedValue;
|
|
85
|
+
const focusedValue = radioGroupContext?.focusedValue;
|
|
86
|
+
const registerRadio = radioGroupContext?.registerRadio;
|
|
87
|
+
const unregisterRadio = radioGroupContext?.unregisterRadio;
|
|
88
|
+
const getRadios = radioGroupContext?.getRadios;
|
|
89
|
+
const groupName = radioGroupContext?.name;
|
|
90
|
+
(0, _react.useEffect)(() => {
|
|
91
|
+
if (!registerRadio || !unregisterRadio) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
registerRadio(combinedProps.value, {
|
|
95
|
+
disabled: !!resolvedDisabled,
|
|
96
|
+
node: nodeRef.current
|
|
97
|
+
});
|
|
98
|
+
return () => unregisterRadio(combinedProps.value);
|
|
99
|
+
}, [combinedProps.value, resolvedDisabled, registerRadio, unregisterRadio]);
|
|
100
|
+
const isRovingTabStop = (0, _react.useMemo)(() => {
|
|
101
|
+
if (resolvedDisabled) {
|
|
102
|
+
return false;
|
|
103
|
+
}
|
|
104
|
+
const enabledRadios = getRadios?.().filter(([, entry]) => !entry.disabled) ?? [];
|
|
105
|
+
const rovingValue = (0, _useRadioGroupNavigation.getRovingFocusValue)(focusedValue, selectedValue, enabledRadios);
|
|
106
|
+
return combinedProps.value === rovingValue;
|
|
107
|
+
}, [combinedProps.value, focusedValue, getRadios, resolvedDisabled, selectedValue]);
|
|
108
|
+
const handleKeyDown = event => {
|
|
109
|
+
if (event.key === ' ' || event.key === 'Spacebar') {
|
|
110
|
+
event.preventDefault();
|
|
111
|
+
selectThis();
|
|
112
|
+
}
|
|
113
|
+
};
|
|
51
114
|
const contextValue = {
|
|
52
115
|
isChecked,
|
|
53
|
-
isDisabled:
|
|
116
|
+
isDisabled: resolvedDisabled,
|
|
54
117
|
isFocusVisible: isFocusVisible || isFocusVisibleProp,
|
|
55
118
|
isHovered: isHovered || isHoveredProp,
|
|
56
119
|
isInvalid: isInvalid || isInvalidProp,
|
|
57
|
-
isReadOnly:
|
|
120
|
+
isReadOnly: resolvedReadOnly,
|
|
58
121
|
isPressed,
|
|
59
122
|
isFocused
|
|
60
123
|
};
|
|
61
124
|
const Comp = asChild ? _slot.Slot : _reactNative.Pressable;
|
|
62
125
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.RadioProvider, {
|
|
63
126
|
value: contextValue,
|
|
64
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
65
|
-
...(0, _utils.mergeProps)(combinedProps, labelProps, focusProps),
|
|
66
|
-
ref: mergedRef,
|
|
67
|
-
role: "label"
|
|
68
|
-
// eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
|
|
69
|
-
,
|
|
70
|
-
accessibilityRole: "label",
|
|
71
|
-
...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
|
|
72
|
-
checked: isChecked,
|
|
73
|
-
disabled: isDisabled || isDisabledProp,
|
|
74
|
-
hover: isHovered || isHoveredProp,
|
|
75
|
-
invalid: isInvalid || isInvalidProp,
|
|
76
|
-
readonly: isReadOnly || isReadOnlyProp,
|
|
77
|
-
active: isPressed,
|
|
78
|
-
focus: isFocused,
|
|
79
|
-
focusVisible: isFocusVisible || isFocusVisibleProp
|
|
80
|
-
})),
|
|
127
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
81
128
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
|
|
82
129
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
83
|
-
|
|
84
|
-
|
|
130
|
+
ref: inputRef,
|
|
131
|
+
type: "radio",
|
|
132
|
+
name: groupName,
|
|
133
|
+
value: combinedProps.value,
|
|
134
|
+
checked: !!isChecked,
|
|
135
|
+
disabled: resolvedDisabled,
|
|
136
|
+
tabIndex: -1,
|
|
137
|
+
"aria-hidden": true,
|
|
138
|
+
readOnly: true
|
|
139
|
+
// Decorative form mirror — pointer events must not steal clicks from Pressable.
|
|
140
|
+
,
|
|
141
|
+
style: {
|
|
142
|
+
pointerEvents: 'none'
|
|
143
|
+
}
|
|
85
144
|
})
|
|
86
|
-
}),
|
|
145
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
|
|
146
|
+
...combinedProps,
|
|
147
|
+
...inputAriaProps,
|
|
148
|
+
ref: setRefs,
|
|
149
|
+
role: "radio",
|
|
150
|
+
"aria-checked": isChecked,
|
|
151
|
+
"aria-disabled": resolvedDisabled || undefined,
|
|
152
|
+
accessibilityRole: "radio",
|
|
153
|
+
accessibilityState: {
|
|
154
|
+
checked: isChecked,
|
|
155
|
+
disabled: resolvedDisabled
|
|
156
|
+
},
|
|
157
|
+
tabIndex: resolvedDisabled ? -1 : isRovingTabStop ? 0 : -1,
|
|
158
|
+
disabled: resolvedDisabled,
|
|
159
|
+
...focusProps,
|
|
160
|
+
onPress: selectThis,
|
|
161
|
+
onClick: selectThis,
|
|
162
|
+
onKeyDown: (0, _utils.composeEventHandlers)(combinedProps.onKeyDown, handleKeyDown),
|
|
163
|
+
...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
|
|
164
|
+
checked: isChecked,
|
|
165
|
+
disabled: resolvedDisabled,
|
|
166
|
+
hover: isHovered || isHoveredProp,
|
|
167
|
+
invalid: isInvalid || isInvalidProp,
|
|
168
|
+
readonly: resolvedReadOnly,
|
|
169
|
+
active: isPressed,
|
|
170
|
+
focus: isFocused,
|
|
171
|
+
focusVisible: isFocusVisible || isFocusVisibleProp
|
|
172
|
+
})),
|
|
173
|
+
children: children
|
|
174
|
+
})]
|
|
87
175
|
})
|
|
88
176
|
});
|
|
89
177
|
});
|