@react-native-aria/radio 0.2.5 → 0.2.6-alpha.1
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/useRadio.js +5 -7
- package/lib/commonjs/useRadio.js.map +1 -1
- package/lib/commonjs/useRadioGroup.js +3 -5
- package/lib/commonjs/useRadioGroup.js.map +1 -1
- package/lib/module/useRadio.js +5 -7
- package/lib/module/useRadio.js.map +1 -1
- package/lib/module/useRadioGroup.js +4 -6
- package/lib/module/useRadioGroup.js.map +1 -1
- package/lib/typescript/useRadioGroup.d.ts +2 -2
- package/package.json +1 -1
- package/src/useRadio.ts +5 -7
- package/src/useRadioGroup.ts +6 -8
package/lib/commonjs/useRadio.js
CHANGED
|
@@ -51,14 +51,12 @@ function useRadio(props, state, _ref) {
|
|
|
51
51
|
return {
|
|
52
52
|
inputProps: (0, _utils.mergeProps)(props, { ...pressProps,
|
|
53
53
|
checked,
|
|
54
|
-
disabled: preventChanges,
|
|
54
|
+
'disabled': preventChanges,
|
|
55
55
|
value,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
checked
|
|
61
|
-
}
|
|
56
|
+
'aria-label': label,
|
|
57
|
+
'role': 'radio',
|
|
58
|
+
'aria-disabled': preventChanges,
|
|
59
|
+
'aria-checked': checked
|
|
62
60
|
})
|
|
63
61
|
};
|
|
64
62
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRadio.ts"],"names":["useRadio","props","state","_ref","value","isReadOnly","isDisabled","children","hasChildren","label","console","warn","preventChanges","checked","selectedValue","onPress","setSelectedValue","pressProps","inputProps"
|
|
1
|
+
{"version":3,"sources":["useRadio.ts"],"names":["useRadio","props","state","_ref","value","isReadOnly","isDisabled","children","hasChildren","label","console","warn","preventChanges","checked","selectedValue","onPress","setSelectedValue","pressProps","inputProps"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,QAAT,CACLC,KADK,EAELC,KAFK,EAGLC,IAHK,EAIM;AAAA;;AACX,MAAI;AAAEC,IAAAA,KAAF;AAASC,IAAAA,UAAT;AAAqBC,IAAAA,UAArB;AAAiCC,IAAAA;AAAjC,MAA8CN,KAAlD;AAEA,MAAIO,WAAW,GAAGD,QAAQ,IAAI,IAA9B;AACA,QAAME,KAAK,GAAG,sBAASR,KAAT,CAAd;;AAEA,MAAI,CAACO,WAAD,IAAgB,CAACC,KAArB,EAA4B;AAC1BC,IAAAA,OAAO,CAACC,IAAR,CACE,kFADF;AAGD;;AAED,MAAIC,cAAc,GAAGN,UAAU,IAAID,UAAnC;AACAO,EAAAA,cAAc,sBAAGA,cAAH,6DAAqB,KAAnC;AAEA,MAAIC,OAAO,GAAGX,KAAK,CAACY,aAAN,KAAwBV,KAAtC;;AAEA,MAAIW,OAAO,GAAG,MAAM;AAClBb,IAAAA,KAAK,CAACc,gBAAN,CAAuBZ,KAAvB;AACD,GAFD;;AAIA,MAAI;AAAEa,IAAAA;AAAF,MAAiB,4BAAS;AAC5BX,IAAAA,UAAU,EAAEM,cADgB;AAE5BG,IAAAA;AAF4B,GAAT,CAArB;AAKA,SAAO;AACLG,IAAAA,UAAU,EAAE,uBAAWjB,KAAX,EAAkB,EAC5B,GAAGgB,UADyB;AAE5BJ,MAAAA,OAF4B;AAG5B,kBAAYD,cAHgB;AAI5BR,MAAAA,KAJ4B;AAK5B,oBAAcK,KALc;AAM5B,cAAQ,OANoB;AAO5B,uBAAiBG,cAPW;AAQ5B,sBAAgBC;AARY,KAAlB;AADP,GAAP;AAYD","sourcesContent":["import type { AriaRadioProps } from '@react-types/radio';\nimport { mergeProps } from '@react-aria/utils';\nimport type { InputHTMLAttributes, RefObject } from 'react';\nimport type { RadioGroupState } from '@react-stately/radio';\nimport { usePress } from '@react-native-aria/interactions';\nimport type { AccessibilityProps } from 'react-native';\nimport { getLabel } from '@react-native-aria/utils';\n\nexport interface RadioAriaProps extends AriaRadioProps, AccessibilityProps {\n /**\n * Whether the Radio is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required).\n */\n isRequired?: boolean;\n /**\n * Whether the Radio can be interacted with but cannot have its selection state changed.\n */\n isReadOnly?: boolean;\n}\n\nexport interface RadioAria extends AccessibilityProps {\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for an individual\n * radio button in a radio group.\n * @param props - Props for the radio.\n * @param state - State for the radio group, as returned by `useRadioGroupState`.\n * @param ref - Ref to the HTML input element.\n */\nexport function useRadio(\n props: RadioAriaProps,\n state: RadioGroupState,\n _ref: RefObject<HTMLElement>\n): RadioAria {\n let { value, isReadOnly, isDisabled, children } = props;\n\n let hasChildren = children != null;\n const label = getLabel(props);\n\n if (!hasChildren && !label) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n let preventChanges = isDisabled || isReadOnly;\n preventChanges = preventChanges ?? false;\n\n let checked = state.selectedValue === value;\n\n let onPress = () => {\n state.setSelectedValue(value);\n };\n\n let { pressProps } = usePress({\n isDisabled: preventChanges,\n onPress,\n });\n\n return {\n inputProps: mergeProps(props, {\n ...pressProps,\n checked,\n 'disabled': preventChanges,\n value,\n 'aria-label': label,\n 'role': 'radio',\n 'aria-disabled': preventChanges,\n 'aria-checked': checked,\n }),\n };\n}\n"]}
|
|
@@ -19,11 +19,9 @@ function useRadioGroup(props, _state) {
|
|
|
19
19
|
} = props;
|
|
20
20
|
return {
|
|
21
21
|
radioGroupProps: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
disabled: isDisabled
|
|
26
|
-
}
|
|
22
|
+
'aria-label': (0, _utils.getLabel)(props),
|
|
23
|
+
'role': 'radiogroup',
|
|
24
|
+
'aria-disabled': isDisabled
|
|
27
25
|
},
|
|
28
26
|
labelProps: {}
|
|
29
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRadioGroup.ts"],"names":["useRadioGroup","props","_state","isDisabled","radioGroupProps","
|
|
1
|
+
{"version":3,"sources":["useRadioGroup.ts"],"names":["useRadioGroup","props","_state","isDisabled","radioGroupProps","labelProps"],"mappings":";;;;;;;AAEA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAT,CACLC,KADK,EAELC,MAFK,EAGW;AAChB,MAAI;AAAEC,IAAAA;AAAF,MAAiBF,KAArB;AAEA,SAAO;AACLG,IAAAA,eAAe,EAAE;AACf,oBAAc,qBAASH,KAAT,CADC;AAEf,cAAQ,YAFO;AAGf,uBAAiBE;AAHF,KADZ;AAMLE,IAAAA,UAAU,EAAE;AANP,GAAP;AAQD","sourcesContent":["import type { AriaRadioGroupProps } from '@react-types/radio';\nimport type { RadioGroupState } from '@react-stately/radio';\nimport { getLabel } from '@react-native-aria/utils';\n\nexport interface RNAriaRadioGroupProps extends AriaRadioGroupProps {\n children?: React.ReactNode;\n}\n\nexport interface RadioGroupAria {\n /** Props for the radio group wrapper element. */\n radioGroupProps: any;\n /** Props for the radio group's visible label (if any). */\n labelProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a radio group component.\n * Radio groups allow users to select a single item from a list of mutually exclusive options.\n * @param props - Props for the radio group.\n * @param state - State for the radio group, as returned by `useRadioGroupState`.\n */\nexport function useRadioGroup(\n props: RNAriaRadioGroupProps,\n _state: RadioGroupState\n): RadioGroupAria {\n let { isDisabled } = props;\n\n return {\n radioGroupProps: {\n 'aria-label': getLabel(props),\n 'role': 'radiogroup',\n 'aria-disabled': isDisabled,\n },\n labelProps: {},\n };\n}\n"]}
|
package/lib/module/useRadio.js
CHANGED
|
@@ -42,14 +42,12 @@ export function useRadio(props, state, _ref) {
|
|
|
42
42
|
return {
|
|
43
43
|
inputProps: mergeProps(props, { ...pressProps,
|
|
44
44
|
checked,
|
|
45
|
-
disabled: preventChanges,
|
|
45
|
+
'disabled': preventChanges,
|
|
46
46
|
value,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
checked
|
|
52
|
-
}
|
|
47
|
+
'aria-label': label,
|
|
48
|
+
'role': 'radio',
|
|
49
|
+
'aria-disabled': preventChanges,
|
|
50
|
+
'aria-checked': checked
|
|
53
51
|
})
|
|
54
52
|
};
|
|
55
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRadio.ts"],"names":["mergeProps","usePress","getLabel","useRadio","props","state","_ref","value","isReadOnly","isDisabled","children","hasChildren","label","console","warn","preventChanges","checked","selectedValue","onPress","setSelectedValue","pressProps","inputProps"
|
|
1
|
+
{"version":3,"sources":["useRadio.ts"],"names":["mergeProps","usePress","getLabel","useRadio","props","state","_ref","value","isReadOnly","isDisabled","children","hasChildren","label","console","warn","preventChanges","checked","selectedValue","onPress","setSelectedValue","pressProps","inputProps"],"mappings":"AACA,SAASA,UAAT,QAA2B,mBAA3B;AAGA,SAASC,QAAT,QAAyB,iCAAzB;AAEA,SAASC,QAAT,QAAyB,0BAAzB;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAT,CACLC,KADK,EAELC,KAFK,EAGLC,IAHK,EAIM;AAAA;;AACX,MAAI;AAAEC,IAAAA,KAAF;AAASC,IAAAA,UAAT;AAAqBC,IAAAA,UAArB;AAAiCC,IAAAA;AAAjC,MAA8CN,KAAlD;AAEA,MAAIO,WAAW,GAAGD,QAAQ,IAAI,IAA9B;AACA,QAAME,KAAK,GAAGV,QAAQ,CAACE,KAAD,CAAtB;;AAEA,MAAI,CAACO,WAAD,IAAgB,CAACC,KAArB,EAA4B;AAC1BC,IAAAA,OAAO,CAACC,IAAR,CACE,kFADF;AAGD;;AAED,MAAIC,cAAc,GAAGN,UAAU,IAAID,UAAnC;AACAO,EAAAA,cAAc,sBAAGA,cAAH,6DAAqB,KAAnC;AAEA,MAAIC,OAAO,GAAGX,KAAK,CAACY,aAAN,KAAwBV,KAAtC;;AAEA,MAAIW,OAAO,GAAG,MAAM;AAClBb,IAAAA,KAAK,CAACc,gBAAN,CAAuBZ,KAAvB;AACD,GAFD;;AAIA,MAAI;AAAEa,IAAAA;AAAF,MAAiBnB,QAAQ,CAAC;AAC5BQ,IAAAA,UAAU,EAAEM,cADgB;AAE5BG,IAAAA;AAF4B,GAAD,CAA7B;AAKA,SAAO;AACLG,IAAAA,UAAU,EAAErB,UAAU,CAACI,KAAD,EAAQ,EAC5B,GAAGgB,UADyB;AAE5BJ,MAAAA,OAF4B;AAG5B,kBAAYD,cAHgB;AAI5BR,MAAAA,KAJ4B;AAK5B,oBAAcK,KALc;AAM5B,cAAQ,OANoB;AAO5B,uBAAiBG,cAPW;AAQ5B,sBAAgBC;AARY,KAAR;AADjB,GAAP;AAYD","sourcesContent":["import type { AriaRadioProps } from '@react-types/radio';\nimport { mergeProps } from '@react-aria/utils';\nimport type { InputHTMLAttributes, RefObject } from 'react';\nimport type { RadioGroupState } from '@react-stately/radio';\nimport { usePress } from '@react-native-aria/interactions';\nimport type { AccessibilityProps } from 'react-native';\nimport { getLabel } from '@react-native-aria/utils';\n\nexport interface RadioAriaProps extends AriaRadioProps, AccessibilityProps {\n /**\n * Whether the Radio is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required).\n */\n isRequired?: boolean;\n /**\n * Whether the Radio can be interacted with but cannot have its selection state changed.\n */\n isReadOnly?: boolean;\n}\n\nexport interface RadioAria extends AccessibilityProps {\n /** Props for the input element. */\n inputProps: InputHTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for an individual\n * radio button in a radio group.\n * @param props - Props for the radio.\n * @param state - State for the radio group, as returned by `useRadioGroupState`.\n * @param ref - Ref to the HTML input element.\n */\nexport function useRadio(\n props: RadioAriaProps,\n state: RadioGroupState,\n _ref: RefObject<HTMLElement>\n): RadioAria {\n let { value, isReadOnly, isDisabled, children } = props;\n\n let hasChildren = children != null;\n const label = getLabel(props);\n\n if (!hasChildren && !label) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n let preventChanges = isDisabled || isReadOnly;\n preventChanges = preventChanges ?? false;\n\n let checked = state.selectedValue === value;\n\n let onPress = () => {\n state.setSelectedValue(value);\n };\n\n let { pressProps } = usePress({\n isDisabled: preventChanges,\n onPress,\n });\n\n return {\n inputProps: mergeProps(props, {\n ...pressProps,\n checked,\n 'disabled': preventChanges,\n value,\n 'aria-label': label,\n 'role': 'radio',\n 'aria-disabled': preventChanges,\n 'aria-checked': checked,\n }),\n };\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getLabel } from
|
|
1
|
+
import { getLabel } from '@react-native-aria/utils';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Provides the behavior and accessibility implementation for a radio group component.
|
|
@@ -12,11 +12,9 @@ export function useRadioGroup(props, _state) {
|
|
|
12
12
|
} = props;
|
|
13
13
|
return {
|
|
14
14
|
radioGroupProps: {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
disabled: isDisabled
|
|
19
|
-
}
|
|
15
|
+
'aria-label': getLabel(props),
|
|
16
|
+
'role': 'radiogroup',
|
|
17
|
+
'aria-disabled': isDisabled
|
|
20
18
|
},
|
|
21
19
|
labelProps: {}
|
|
22
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRadioGroup.ts"],"names":["getLabel","useRadioGroup","props","_state","isDisabled","radioGroupProps","
|
|
1
|
+
{"version":3,"sources":["useRadioGroup.ts"],"names":["getLabel","useRadioGroup","props","_state","isDisabled","radioGroupProps","labelProps"],"mappings":"AAEA,SAASA,QAAT,QAAyB,0BAAzB;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAT,CACLC,KADK,EAELC,MAFK,EAGW;AAChB,MAAI;AAAEC,IAAAA;AAAF,MAAiBF,KAArB;AAEA,SAAO;AACLG,IAAAA,eAAe,EAAE;AACf,oBAAcL,QAAQ,CAACE,KAAD,CADP;AAEf,cAAQ,YAFO;AAGf,uBAAiBE;AAHF,KADZ;AAMLE,IAAAA,UAAU,EAAE;AANP,GAAP;AAQD","sourcesContent":["import type { AriaRadioGroupProps } from '@react-types/radio';\nimport type { RadioGroupState } from '@react-stately/radio';\nimport { getLabel } from '@react-native-aria/utils';\n\nexport interface RNAriaRadioGroupProps extends AriaRadioGroupProps {\n children?: React.ReactNode;\n}\n\nexport interface RadioGroupAria {\n /** Props for the radio group wrapper element. */\n radioGroupProps: any;\n /** Props for the radio group's visible label (if any). */\n labelProps: any;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a radio group component.\n * Radio groups allow users to select a single item from a list of mutually exclusive options.\n * @param props - Props for the radio group.\n * @param state - State for the radio group, as returned by `useRadioGroupState`.\n */\nexport function useRadioGroup(\n props: RNAriaRadioGroupProps,\n _state: RadioGroupState\n): RadioGroupAria {\n let { isDisabled } = props;\n\n return {\n radioGroupProps: {\n 'aria-label': getLabel(props),\n 'role': 'radiogroup',\n 'aria-disabled': isDisabled,\n },\n labelProps: {},\n };\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { AriaRadioGroupProps } from
|
|
3
|
-
import type { RadioGroupState } from
|
|
2
|
+
import type { AriaRadioGroupProps } from '@react-types/radio';
|
|
3
|
+
import type { RadioGroupState } from '@react-stately/radio';
|
|
4
4
|
export interface RNAriaRadioGroupProps extends AriaRadioGroupProps {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
}
|
package/package.json
CHANGED
package/src/useRadio.ts
CHANGED
|
@@ -63,14 +63,12 @@ export function useRadio(
|
|
|
63
63
|
inputProps: mergeProps(props, {
|
|
64
64
|
...pressProps,
|
|
65
65
|
checked,
|
|
66
|
-
disabled: preventChanges,
|
|
66
|
+
'disabled': preventChanges,
|
|
67
67
|
value,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
checked,
|
|
73
|
-
},
|
|
68
|
+
'aria-label': label,
|
|
69
|
+
'role': 'radio',
|
|
70
|
+
'aria-disabled': preventChanges,
|
|
71
|
+
'aria-checked': checked,
|
|
74
72
|
}),
|
|
75
73
|
};
|
|
76
74
|
}
|
package/src/useRadioGroup.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { AriaRadioGroupProps } from
|
|
2
|
-
import type { RadioGroupState } from
|
|
3
|
-
import { getLabel } from
|
|
1
|
+
import type { AriaRadioGroupProps } from '@react-types/radio';
|
|
2
|
+
import type { RadioGroupState } from '@react-stately/radio';
|
|
3
|
+
import { getLabel } from '@react-native-aria/utils';
|
|
4
4
|
|
|
5
5
|
export interface RNAriaRadioGroupProps extends AriaRadioGroupProps {
|
|
6
6
|
children?: React.ReactNode;
|
|
@@ -27,11 +27,9 @@ export function useRadioGroup(
|
|
|
27
27
|
|
|
28
28
|
return {
|
|
29
29
|
radioGroupProps: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
disabled: isDisabled,
|
|
34
|
-
},
|
|
30
|
+
'aria-label': getLabel(props),
|
|
31
|
+
'role': 'radiogroup',
|
|
32
|
+
'aria-disabled': isDisabled,
|
|
35
33
|
},
|
|
36
34
|
labelProps: {},
|
|
37
35
|
};
|