@react-aria/radio 3.8.2 → 3.10.0

package/dist/import.mjs

@@ -1,5 +1,6 @@
 import {mergeProps as $4vDl6$mergeProps, filterDOMProps as $4vDl6$filterDOMProps, useFormReset as $4vDl6$useFormReset, useId as $4vDl6$useId} from "@react-aria/utils";
 import {useFocusable as $4vDl6$useFocusable, getFocusableTreeWalker as $4vDl6$getFocusableTreeWalker} from "@react-aria/focus";
+import {useFormValidation as $4vDl6$useFormValidation} from "@react-aria/form";
 import {usePress as $4vDl6$usePress, useFocusWithin as $4vDl6$useFocusWithin} from "@react-aria/interactions";
 import {useField as $4vDl6$useField} from "@react-aria/label";
 import {useLocale as $4vDl6$useLocale} from "@react-aria/i18n";
@@ -35,9 +36,8 @@ import {useLocale as $4vDl6$useLocale} from "@react-aria/i18n";
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ const $884aeceb3d67f00f$export$3b7b268d09480394 = new WeakMap();
-const $884aeceb3d67f00f$export$8e8b214e06dd397d = new WeakMap();
-const $884aeceb3d67f00f$export$61c8d3f0151e21b2 = new WeakMap();
+ */ const $884aeceb3d67f00f$export$37b65e5b5444d35c = new WeakMap();
+
 
 
 
@@ -56,6 +56,13 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
     let { pressProps: pressProps, isPressed: isPressed } = (0, $4vDl6$usePress)({
         isDisabled: isDisabled
     });
+    // iOS does not toggle radios if you drag off and back onto the label, so handle it ourselves.
+    let { pressProps: labelProps, isPressed: isLabelPressed } = (0, $4vDl6$usePress)({
+        isDisabled: isDisabled,
+        onPress () {
+            state.setSelectedValue(value);
+        }
+    });
     let { focusableProps: focusableProps } = (0, $4vDl6$useFocusable)((0, $4vDl6$mergeProps)(props, {
         onFocus: ()=>state.setLastFocusedValue(value)
     }), ref);
@@ -68,26 +75,34 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
         if (state.selectedValue === value) tabIndex = 0;
     } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) tabIndex = 0;
     if (isDisabled) tabIndex = undefined;
+    let { name: name, descriptionId: descriptionId, errorMessageId: errorMessageId, validationBehavior: validationBehavior } = (0, $884aeceb3d67f00f$export$37b65e5b5444d35c).get(state);
     (0, $4vDl6$useFormReset)(ref, state.selectedValue, state.setSelectedValue);
+    (0, $4vDl6$useFormValidation)({
+        validationBehavior: validationBehavior
+    }, state, ref);
     return {
+        labelProps: (0, $4vDl6$mergeProps)(labelProps, {
+            onClick: (e)=>e.preventDefault()
+        }),
         inputProps: (0, $4vDl6$mergeProps)(domProps, {
             ...interactions,
             type: "radio",
-            name: (0, $884aeceb3d67f00f$export$3b7b268d09480394).get(state),
+            name: name,
             tabIndex: tabIndex,
             disabled: isDisabled,
+            required: state.isRequired && validationBehavior === "native",
             checked: checked,
             value: value,
             onChange: onChange,
             "aria-describedby": [
                 props["aria-describedby"],
-                state.isInvalid ? (0, $884aeceb3d67f00f$export$61c8d3f0151e21b2).get(state) : null,
-                (0, $884aeceb3d67f00f$export$8e8b214e06dd397d).get(state)
+                state.isInvalid ? errorMessageId : null,
+                descriptionId
             ].filter(Boolean).join(" ") || undefined
         }),
         isDisabled: isDisabled,
         isSelected: checked,
-        isPressed: isPressed
+        isPressed: isPressed || isLabelPressed
     };
 }
 
@@ -109,16 +124,17 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
 
 
 function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
-    let { name: name, isReadOnly: isReadOnly, isRequired: isRequired, isDisabled: isDisabled, orientation: orientation = "vertical" } = props;
+    let { name: name, isReadOnly: isReadOnly, isRequired: isRequired, isDisabled: isDisabled, orientation: orientation = "vertical", validationBehavior: validationBehavior = "aria" } = props;
     let { direction: direction } = (0, $4vDl6$useLocale)();
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4vDl6$useField)({
         ...props,
         // Radio group is not an HTML input element so it
         // shouldn't be labeled by a <label> element.
-        labelElementType: "span"
+        labelElementType: "span",
+        isInvalid: state.isInvalid,
+        errorMessage: props.errorMessage || validationErrors
     });
-    (0, $884aeceb3d67f00f$export$8e8b214e06dd397d).set(state, descriptionProps.id);
-    (0, $884aeceb3d67f00f$export$61c8d3f0151e21b2).set(state, errorMessageProps.id);
     let domProps = (0, $4vDl6$filterDOMProps)(props, {
         labelable: true
     });
@@ -126,9 +142,13 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
     // there is no selection. This allows tabbing into the group from either
     // direction to go to the first or last radio.
     let { focusWithinProps: focusWithinProps } = (0, $4vDl6$useFocusWithin)({
-        onBlurWithin () {
+        onBlurWithin (e) {
+            var _props_onBlur;
+            (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
             if (!state.selectedValue) state.setLastFocusedValue(null);
-        }
+        },
+        onFocusWithin: props.onFocus,
+        onFocusWithinChange: props.onFocusChange
     });
     let onKeyDown = (e)=>{
         let nextDir;
@@ -175,7 +195,12 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
         }
     };
     let groupName = (0, $4vDl6$useId)(name);
-    (0, $884aeceb3d67f00f$export$3b7b268d09480394).set(state, groupName);
+    (0, $884aeceb3d67f00f$export$37b65e5b5444d35c).set(state, {
+        name: groupName,
+        descriptionId: descriptionProps.id,
+        errorMessageId: errorMessageProps.id,
+        validationBehavior: validationBehavior
+    });
     return {
         radioGroupProps: (0, $4vDl6$mergeProps)(domProps, {
             // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
@@ -192,7 +217,10 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
         }),
         labelProps: labelProps,
         descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 

package/dist/main.js

@@ -1,9 +1,11 @@
 var $fMEGB$reactariautils = require("@react-aria/utils");
 var $fMEGB$reactariafocus = require("@react-aria/focus");
+var $fMEGB$reactariaform = require("@react-aria/form");
 var $fMEGB$reactariainteractions = require("@react-aria/interactions");
 var $fMEGB$reactarialabel = require("@react-aria/label");
 var $fMEGB$reactariai18n = require("@react-aria/i18n");
 
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -41,9 +43,8 @@ $parcel$export(module.exports, "useRadioGroup", () => $dfcade00a56a6317$export$6
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ const $eeb149278aae5c67$export$3b7b268d09480394 = new WeakMap();
-const $eeb149278aae5c67$export$8e8b214e06dd397d = new WeakMap();
-const $eeb149278aae5c67$export$61c8d3f0151e21b2 = new WeakMap();
+ */ const $eeb149278aae5c67$export$37b65e5b5444d35c = new WeakMap();
+
 
 
 
@@ -62,6 +63,13 @@ function $e184702b1b7f1863$export$37b0961d2f4751e2(props, state, ref) {
     let { pressProps: pressProps, isPressed: isPressed } = (0, $fMEGB$reactariainteractions.usePress)({
         isDisabled: isDisabled
     });
+    // iOS does not toggle radios if you drag off and back onto the label, so handle it ourselves.
+    let { pressProps: labelProps, isPressed: isLabelPressed } = (0, $fMEGB$reactariainteractions.usePress)({
+        isDisabled: isDisabled,
+        onPress () {
+            state.setSelectedValue(value);
+        }
+    });
     let { focusableProps: focusableProps } = (0, $fMEGB$reactariafocus.useFocusable)((0, $fMEGB$reactariautils.mergeProps)(props, {
         onFocus: ()=>state.setLastFocusedValue(value)
     }), ref);
@@ -74,26 +82,34 @@ function $e184702b1b7f1863$export$37b0961d2f4751e2(props, state, ref) {
         if (state.selectedValue === value) tabIndex = 0;
     } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) tabIndex = 0;
     if (isDisabled) tabIndex = undefined;
+    let { name: name, descriptionId: descriptionId, errorMessageId: errorMessageId, validationBehavior: validationBehavior } = (0, $eeb149278aae5c67$export$37b65e5b5444d35c).get(state);
     (0, $fMEGB$reactariautils.useFormReset)(ref, state.selectedValue, state.setSelectedValue);
+    (0, $fMEGB$reactariaform.useFormValidation)({
+        validationBehavior: validationBehavior
+    }, state, ref);
     return {
+        labelProps: (0, $fMEGB$reactariautils.mergeProps)(labelProps, {
+            onClick: (e)=>e.preventDefault()
+        }),
         inputProps: (0, $fMEGB$reactariautils.mergeProps)(domProps, {
             ...interactions,
             type: "radio",
-            name: (0, $eeb149278aae5c67$export$3b7b268d09480394).get(state),
+            name: name,
             tabIndex: tabIndex,
             disabled: isDisabled,
+            required: state.isRequired && validationBehavior === "native",
             checked: checked,
             value: value,
             onChange: onChange,
             "aria-describedby": [
                 props["aria-describedby"],
-                state.isInvalid ? (0, $eeb149278aae5c67$export$61c8d3f0151e21b2).get(state) : null,
-                (0, $eeb149278aae5c67$export$8e8b214e06dd397d).get(state)
+                state.isInvalid ? errorMessageId : null,
+                descriptionId
             ].filter(Boolean).join(" ") || undefined
         }),
         isDisabled: isDisabled,
         isSelected: checked,
-        isPressed: isPressed
+        isPressed: isPressed || isLabelPressed
     };
 }
 
@@ -115,16 +131,17 @@ function $e184702b1b7f1863$export$37b0961d2f4751e2(props, state, ref) {
 
 
 function $dfcade00a56a6317$export$62b9571f283ff5c2(props, state) {
-    let { name: name, isReadOnly: isReadOnly, isRequired: isRequired, isDisabled: isDisabled, orientation: orientation = "vertical" } = props;
+    let { name: name, isReadOnly: isReadOnly, isRequired: isRequired, isDisabled: isDisabled, orientation: orientation = "vertical", validationBehavior: validationBehavior = "aria" } = props;
     let { direction: direction } = (0, $fMEGB$reactariai18n.useLocale)();
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $fMEGB$reactarialabel.useField)({
         ...props,
         // Radio group is not an HTML input element so it
         // shouldn't be labeled by a <label> element.
-        labelElementType: "span"
+        labelElementType: "span",
+        isInvalid: state.isInvalid,
+        errorMessage: props.errorMessage || validationErrors
     });
-    (0, $eeb149278aae5c67$export$8e8b214e06dd397d).set(state, descriptionProps.id);
-    (0, $eeb149278aae5c67$export$61c8d3f0151e21b2).set(state, errorMessageProps.id);
     let domProps = (0, $fMEGB$reactariautils.filterDOMProps)(props, {
         labelable: true
     });
@@ -132,9 +149,13 @@ function $dfcade00a56a6317$export$62b9571f283ff5c2(props, state) {
     // there is no selection. This allows tabbing into the group from either
     // direction to go to the first or last radio.
     let { focusWithinProps: focusWithinProps } = (0, $fMEGB$reactariainteractions.useFocusWithin)({
-        onBlurWithin () {
+        onBlurWithin (e) {
+            var _props_onBlur;
+            (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
             if (!state.selectedValue) state.setLastFocusedValue(null);
-        }
+        },
+        onFocusWithin: props.onFocus,
+        onFocusWithinChange: props.onFocusChange
     });
     let onKeyDown = (e)=>{
         let nextDir;
@@ -181,7 +202,12 @@ function $dfcade00a56a6317$export$62b9571f283ff5c2(props, state) {
         }
     };
     let groupName = (0, $fMEGB$reactariautils.useId)(name);
-    (0, $eeb149278aae5c67$export$3b7b268d09480394).set(state, groupName);
+    (0, $eeb149278aae5c67$export$37b65e5b5444d35c).set(state, {
+        name: groupName,
+        descriptionId: descriptionProps.id,
+        errorMessageId: errorMessageProps.id,
+        validationBehavior: validationBehavior
+    });
     return {
         radioGroupProps: (0, $fMEGB$reactariautils.mergeProps)(domProps, {
             // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
@@ -198,7 +224,10 @@ function $dfcade00a56a6317$export$62b9571f283ff5c2(props, state) {
         }),
         labelProps: labelProps,
         descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/radio/src/index.ts","packages/@react-aria/radio/src/useRadio.ts","packages/@react-aria/radio/src/utils.ts","packages/@react-aria/radio/src/useRadioGroup.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useRadio} from './useRadio';\nexport {useRadioGroup} from './useRadioGroup';\nexport type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';\nexport type {Orientation} from '@react-types/shared';\nexport type {RadioAria} from './useRadio';\nexport type {RadioGroupAria} from './useRadioGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioProps} from '@react-types/radio';\nimport {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, RefObject} from 'react';\nimport {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useFocusable} from '@react-aria/focus';\nimport {usePress} from '@react-aria/interactions';\n\nexport interface RadioAria {\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the radio is disabled. */\n  isDisabled: boolean,\n  /** Whether the radio is currently selected. */\n  isSelected: boolean,\n  /** Whether the radio is in a pressed state. */\n  isPressed: boolean\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(props: AriaRadioProps, state: RadioGroupState, ref: RefObject<HTMLInputElement>): RadioAria {\n  let {\n    value,\n    children,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  } = props;\n\n  const isDisabled = props.isDisabled || state.isDisabled;\n\n  let hasChildren = children != null;\n  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;\n  if (!hasChildren && !hasAriaLabel) {\n    console.warn('If you do not provide children, you must specify an aria-label for accessibility');\n  }\n\n  let checked = state.selectedValue === value;\n\n  let onChange = (e) => {\n    e.stopPropagation();\n    state.setSelectedValue(value);\n  };\n\n  let {pressProps, isPressed} = usePress({\n    isDisabled\n  });\n\n  let {focusableProps} = useFocusable(mergeProps(props, {\n    onFocus: () => state.setLastFocusedValue(value)\n  }), ref);\n  let interactions = mergeProps(pressProps, focusableProps);\n  let domProps = filterDOMProps(props, {labelable: true});\n  let tabIndex = -1;\n  if (state.selectedValue != null) {\n    if (state.selectedValue === value) {\n      tabIndex = 0;\n    }\n  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) {\n    tabIndex = 0;\n  }\n  if (isDisabled) {\n    tabIndex = undefined;\n  }\n\n  useFormReset(ref, state.selectedValue, state.setSelectedValue);\n\n  return {\n    inputProps: mergeProps(domProps, {\n      ...interactions,\n      type: 'radio',\n      name: radioGroupNames.get(state),\n      tabIndex,\n      disabled: isDisabled,\n      checked,\n      value,\n      onChange,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? radioGroupErrorMessageIds.get(state) : null,\n        radioGroupDescriptionIds.get(state)\n      ].filter(Boolean).join(' ') || undefined\n    }),\n    isDisabled,\n    isSelected: checked,\n    isPressed\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {RadioGroupState} from '@react-stately/radio';\n\nexport const radioGroupNames = new WeakMap<RadioGroupState, string>();\nexport const radioGroupDescriptionIds = new WeakMap<RadioGroupState, string>();\nexport const radioGroupErrorMessageIds = new WeakMap<RadioGroupState, string>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioGroupProps} from '@react-types/radio';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {getFocusableTreeWalker} from '@react-aria/focus';\nimport {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface RadioGroupAria {\n  /** Props for the radio group wrapper element. */\n  radioGroupProps: DOMAttributes,\n  /** Props for the radio group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the radio group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the radio group error message element, if any. */\n  errorMessageProps: DOMAttributes\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(props: AriaRadioGroupProps, state: RadioGroupState): RadioGroupAria {\n  let {\n    name,\n    isReadOnly,\n    isRequired,\n    isDisabled,\n    orientation = 'vertical'\n  } = props;\n  let {direction} = useLocale();\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Radio group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span'\n  });\n  radioGroupDescriptionIds.set(state, descriptionProps.id);\n  radioGroupErrorMessageIds.set(state, errorMessageProps.id);\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  // When the radio group loses focus, reset the focusable radio to null if\n  // there is no selection. This allows tabbing into the group from either\n  // direction to go to the first or last radio.\n  let {focusWithinProps} = useFocusWithin({\n    onBlurWithin() {\n      if (!state.selectedValue) {\n        state.setLastFocusedValue(null);\n      }\n    }\n  });\n\n  let onKeyDown = (e) => {\n    let nextDir;\n    switch (e.key) {\n      case 'ArrowRight':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'prev';\n        } else {\n          nextDir = 'next';\n        }\n        break;\n      case 'ArrowLeft':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'next';\n        } else {\n          nextDir = 'prev';\n        }\n        break;\n      case 'ArrowDown':\n        nextDir = 'next';\n        break;\n      case 'ArrowUp':\n        nextDir = 'prev';\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    let walker = getFocusableTreeWalker(e.currentTarget, {from: e.target});\n    let nextElem;\n    if (nextDir === 'next') {\n      nextElem = walker.nextNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.firstChild();\n      }\n    } else {\n      nextElem = walker.previousNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.lastChild();\n      }\n    }\n    if (nextElem) {\n      // Call focus on nextElem so that keyboard navigation scrolls the radio into view\n      nextElem.focus();\n      state.setSelectedValue(nextElem.value);\n    }\n  };\n\n  let groupName = useId(name);\n  radioGroupNames.set(state, groupName);\n\n  return {\n    radioGroupProps: mergeProps(domProps, {\n      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup\n      role: 'radiogroup',\n      onKeyDown,\n      'aria-invalid': state.isInvalid || undefined,\n      'aria-errormessage': props['aria-errormessage'],\n      'aria-readonly': isReadOnly || undefined,\n      'aria-required': isRequired || undefined,\n      'aria-disabled': isDisabled || undefined,\n      'aria-orientation': orientation,\n      ...fieldProps,\n      ...focusWithinProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps\n  };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/radio/src/index.ts","packages/@react-aria/radio/src/useRadio.ts","packages/@react-aria/radio/src/utils.ts","packages/@react-aria/radio/src/useRadioGroup.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useRadio} from './useRadio';\nexport {useRadioGroup} from './useRadioGroup';\nexport type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';\nexport type {Orientation} from '@react-types/shared';\nexport type {RadioAria} from './useRadio';\nexport type {RadioGroupAria} from './useRadioGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioProps} from '@react-types/radio';\nimport {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';\nimport {radioGroupData} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useFocusable} from '@react-aria/focus';\nimport {useFormValidation} from '@react-aria/form';\nimport {usePress} from '@react-aria/interactions';\n\nexport interface RadioAria {\n  /** Props for the label wrapper element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the radio is disabled. */\n  isDisabled: boolean,\n  /** Whether the radio is currently selected. */\n  isSelected: boolean,\n  /** Whether the radio is in a pressed state. */\n  isPressed: boolean\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(props: AriaRadioProps, state: RadioGroupState, ref: RefObject<HTMLInputElement>): RadioAria {\n  let {\n    value,\n    children,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  } = props;\n\n  const isDisabled = props.isDisabled || state.isDisabled;\n\n  let hasChildren = children != null;\n  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;\n  if (!hasChildren && !hasAriaLabel) {\n    console.warn('If you do not provide children, you must specify an aria-label for accessibility');\n  }\n\n  let checked = state.selectedValue === value;\n\n  let onChange = (e) => {\n    e.stopPropagation();\n    state.setSelectedValue(value);\n  };\n\n  let {pressProps, isPressed} = usePress({\n    isDisabled\n  });\n\n  // iOS does not toggle radios if you drag off and back onto the label, so handle it ourselves.\n  let {pressProps: labelProps, isPressed: isLabelPressed} = usePress({\n    isDisabled,\n    onPress() {\n      state.setSelectedValue(value);\n    }\n  });\n\n  let {focusableProps} = useFocusable(mergeProps(props, {\n    onFocus: () => state.setLastFocusedValue(value)\n  }), ref);\n  let interactions = mergeProps(pressProps, focusableProps);\n  let domProps = filterDOMProps(props, {labelable: true});\n  let tabIndex: number | undefined = -1;\n  if (state.selectedValue != null) {\n    if (state.selectedValue === value) {\n      tabIndex = 0;\n    }\n  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) {\n    tabIndex = 0;\n  }\n  if (isDisabled) {\n    tabIndex = undefined;\n  }\n\n  let {name, descriptionId, errorMessageId, validationBehavior} = radioGroupData.get(state)!;\n  useFormReset(ref, state.selectedValue, state.setSelectedValue);\n  useFormValidation({validationBehavior}, state, ref);\n\n  return {\n    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),\n    inputProps: mergeProps(domProps, {\n      ...interactions,\n      type: 'radio',\n      name,\n      tabIndex,\n      disabled: isDisabled,\n      required: state.isRequired && validationBehavior === 'native',\n      checked,\n      value,\n      onChange,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? errorMessageId : null,\n        descriptionId\n      ].filter(Boolean).join(' ') || undefined\n    }),\n    isDisabled,\n    isSelected: checked,\n    isPressed: isPressed || isLabelPressed\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {RadioGroupState} from '@react-stately/radio';\n\ninterface RadioGroupData {\n  name: string,\n  descriptionId: string | undefined,\n  errorMessageId: string | undefined,\n  validationBehavior: 'aria' | 'native'\n}\n\nexport const radioGroupData = new WeakMap<RadioGroupState, RadioGroupData>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioGroupProps} from '@react-types/radio';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {getFocusableTreeWalker} from '@react-aria/focus';\nimport {radioGroupData} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface RadioGroupAria extends ValidationResult {\n  /** Props for the radio group wrapper element. */\n  radioGroupProps: DOMAttributes,\n  /** Props for the radio group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the radio group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the radio group error message element, if any. */\n  errorMessageProps: DOMAttributes\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(props: AriaRadioGroupProps, state: RadioGroupState): RadioGroupAria {\n  let {\n    name,\n    isReadOnly,\n    isRequired,\n    isDisabled,\n    orientation = 'vertical',\n    validationBehavior = 'aria'\n  } = props;\n  let {direction} = useLocale();\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Radio group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span',\n    isInvalid: state.isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  // When the radio group loses focus, reset the focusable radio to null if\n  // there is no selection. This allows tabbing into the group from either\n  // direction to go to the first or last radio.\n  let {focusWithinProps} = useFocusWithin({\n    onBlurWithin(e) {\n      props.onBlur?.(e);\n      if (!state.selectedValue) {\n        state.setLastFocusedValue(null);\n      }\n    },\n    onFocusWithin: props.onFocus,\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  let onKeyDown = (e) => {\n    let nextDir;\n    switch (e.key) {\n      case 'ArrowRight':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'prev';\n        } else {\n          nextDir = 'next';\n        }\n        break;\n      case 'ArrowLeft':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'next';\n        } else {\n          nextDir = 'prev';\n        }\n        break;\n      case 'ArrowDown':\n        nextDir = 'next';\n        break;\n      case 'ArrowUp':\n        nextDir = 'prev';\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    let walker = getFocusableTreeWalker(e.currentTarget, {from: e.target});\n    let nextElem;\n    if (nextDir === 'next') {\n      nextElem = walker.nextNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.firstChild();\n      }\n    } else {\n      nextElem = walker.previousNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.lastChild();\n      }\n    }\n    if (nextElem) {\n      // Call focus on nextElem so that keyboard navigation scrolls the radio into view\n      nextElem.focus();\n      state.setSelectedValue(nextElem.value);\n    }\n  };\n\n  let groupName = useId(name);\n  radioGroupData.set(state, {\n    name: groupName,\n    descriptionId: descriptionProps.id,\n    errorMessageId: errorMessageProps.id,\n    validationBehavior\n  });\n\n  return {\n    radioGroupProps: mergeProps(domProps, {\n      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup\n      role: 'radiogroup',\n      onKeyDown,\n      'aria-invalid': state.isInvalid || undefined,\n      'aria-errormessage': props['aria-errormessage'],\n      'aria-readonly': isReadOnly || undefined,\n      'aria-required': isRequired || undefined,\n      'aria-disabled': isDisabled || undefined,\n      'aria-orientation': orientation,\n      ...fieldProps,\n      ...focusWithinProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,5 +1,6 @@
 import {mergeProps as $4vDl6$mergeProps, filterDOMProps as $4vDl6$filterDOMProps, useFormReset as $4vDl6$useFormReset, useId as $4vDl6$useId} from "@react-aria/utils";
 import {useFocusable as $4vDl6$useFocusable, getFocusableTreeWalker as $4vDl6$getFocusableTreeWalker} from "@react-aria/focus";
+import {useFormValidation as $4vDl6$useFormValidation} from "@react-aria/form";
 import {usePress as $4vDl6$usePress, useFocusWithin as $4vDl6$useFocusWithin} from "@react-aria/interactions";
 import {useField as $4vDl6$useField} from "@react-aria/label";
 import {useLocale as $4vDl6$useLocale} from "@react-aria/i18n";
@@ -35,9 +36,8 @@ import {useLocale as $4vDl6$useLocale} from "@react-aria/i18n";
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ const $884aeceb3d67f00f$export$3b7b268d09480394 = new WeakMap();
-const $884aeceb3d67f00f$export$8e8b214e06dd397d = new WeakMap();
-const $884aeceb3d67f00f$export$61c8d3f0151e21b2 = new WeakMap();
+ */ const $884aeceb3d67f00f$export$37b65e5b5444d35c = new WeakMap();
+
 
 
 
@@ -56,6 +56,13 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
     let { pressProps: pressProps, isPressed: isPressed } = (0, $4vDl6$usePress)({
         isDisabled: isDisabled
     });
+    // iOS does not toggle radios if you drag off and back onto the label, so handle it ourselves.
+    let { pressProps: labelProps, isPressed: isLabelPressed } = (0, $4vDl6$usePress)({
+        isDisabled: isDisabled,
+        onPress () {
+            state.setSelectedValue(value);
+        }
+    });
     let { focusableProps: focusableProps } = (0, $4vDl6$useFocusable)((0, $4vDl6$mergeProps)(props, {
         onFocus: ()=>state.setLastFocusedValue(value)
     }), ref);
@@ -68,26 +75,34 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
         if (state.selectedValue === value) tabIndex = 0;
     } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) tabIndex = 0;
     if (isDisabled) tabIndex = undefined;
+    let { name: name, descriptionId: descriptionId, errorMessageId: errorMessageId, validationBehavior: validationBehavior } = (0, $884aeceb3d67f00f$export$37b65e5b5444d35c).get(state);
     (0, $4vDl6$useFormReset)(ref, state.selectedValue, state.setSelectedValue);
+    (0, $4vDl6$useFormValidation)({
+        validationBehavior: validationBehavior
+    }, state, ref);
     return {
+        labelProps: (0, $4vDl6$mergeProps)(labelProps, {
+            onClick: (e)=>e.preventDefault()
+        }),
         inputProps: (0, $4vDl6$mergeProps)(domProps, {
             ...interactions,
             type: "radio",
-            name: (0, $884aeceb3d67f00f$export$3b7b268d09480394).get(state),
+            name: name,
             tabIndex: tabIndex,
             disabled: isDisabled,
+            required: state.isRequired && validationBehavior === "native",
             checked: checked,
             value: value,
             onChange: onChange,
             "aria-describedby": [
                 props["aria-describedby"],
-                state.isInvalid ? (0, $884aeceb3d67f00f$export$61c8d3f0151e21b2).get(state) : null,
-                (0, $884aeceb3d67f00f$export$8e8b214e06dd397d).get(state)
+                state.isInvalid ? errorMessageId : null,
+                descriptionId
             ].filter(Boolean).join(" ") || undefined
         }),
         isDisabled: isDisabled,
         isSelected: checked,
-        isPressed: isPressed
+        isPressed: isPressed || isLabelPressed
     };
 }
 
@@ -109,16 +124,17 @@ function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
 
 
 function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
-    let { name: name, isReadOnly: isReadOnly, isRequired: isRequired, isDisabled: isDisabled, orientation: orientation = "vertical" } = props;
+    let { name: name, isReadOnly: isReadOnly, isRequired: isRequired, isDisabled: isDisabled, orientation: orientation = "vertical", validationBehavior: validationBehavior = "aria" } = props;
     let { direction: direction } = (0, $4vDl6$useLocale)();
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4vDl6$useField)({
         ...props,
         // Radio group is not an HTML input element so it
         // shouldn't be labeled by a <label> element.
-        labelElementType: "span"
+        labelElementType: "span",
+        isInvalid: state.isInvalid,
+        errorMessage: props.errorMessage || validationErrors
     });
-    (0, $884aeceb3d67f00f$export$8e8b214e06dd397d).set(state, descriptionProps.id);
-    (0, $884aeceb3d67f00f$export$61c8d3f0151e21b2).set(state, errorMessageProps.id);
     let domProps = (0, $4vDl6$filterDOMProps)(props, {
         labelable: true
     });
@@ -126,9 +142,13 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
     // there is no selection. This allows tabbing into the group from either
     // direction to go to the first or last radio.
     let { focusWithinProps: focusWithinProps } = (0, $4vDl6$useFocusWithin)({
-        onBlurWithin () {
+        onBlurWithin (e) {
+            var _props_onBlur;
+            (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
             if (!state.selectedValue) state.setLastFocusedValue(null);
-        }
+        },
+        onFocusWithin: props.onFocus,
+        onFocusWithinChange: props.onFocusChange
     });
     let onKeyDown = (e)=>{
         let nextDir;
@@ -175,7 +195,12 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
         }
     };
     let groupName = (0, $4vDl6$useId)(name);
-    (0, $884aeceb3d67f00f$export$3b7b268d09480394).set(state, groupName);
+    (0, $884aeceb3d67f00f$export$37b65e5b5444d35c).set(state, {
+        name: groupName,
+        descriptionId: descriptionProps.id,
+        errorMessageId: errorMessageProps.id,
+        validationBehavior: validationBehavior
+    });
     return {
         radioGroupProps: (0, $4vDl6$mergeProps)(domProps, {
             // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
@@ -192,7 +217,10 @@ function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
         }),
         labelProps: labelProps,
         descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
     };
 }
 

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/radio/src/index.ts","packages/@react-aria/radio/src/useRadio.ts","packages/@react-aria/radio/src/utils.ts","packages/@react-aria/radio/src/useRadioGroup.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useRadio} from './useRadio';\nexport {useRadioGroup} from './useRadioGroup';\nexport type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';\nexport type {Orientation} from '@react-types/shared';\nexport type {RadioAria} from './useRadio';\nexport type {RadioGroupAria} from './useRadioGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioProps} from '@react-types/radio';\nimport {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, RefObject} from 'react';\nimport {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useFocusable} from '@react-aria/focus';\nimport {usePress} from '@react-aria/interactions';\n\nexport interface RadioAria {\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the radio is disabled. */\n  isDisabled: boolean,\n  /** Whether the radio is currently selected. */\n  isSelected: boolean,\n  /** Whether the radio is in a pressed state. */\n  isPressed: boolean\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(props: AriaRadioProps, state: RadioGroupState, ref: RefObject<HTMLInputElement>): RadioAria {\n  let {\n    value,\n    children,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  } = props;\n\n  const isDisabled = props.isDisabled || state.isDisabled;\n\n  let hasChildren = children != null;\n  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;\n  if (!hasChildren && !hasAriaLabel) {\n    console.warn('If you do not provide children, you must specify an aria-label for accessibility');\n  }\n\n  let checked = state.selectedValue === value;\n\n  let onChange = (e) => {\n    e.stopPropagation();\n    state.setSelectedValue(value);\n  };\n\n  let {pressProps, isPressed} = usePress({\n    isDisabled\n  });\n\n  let {focusableProps} = useFocusable(mergeProps(props, {\n    onFocus: () => state.setLastFocusedValue(value)\n  }), ref);\n  let interactions = mergeProps(pressProps, focusableProps);\n  let domProps = filterDOMProps(props, {labelable: true});\n  let tabIndex = -1;\n  if (state.selectedValue != null) {\n    if (state.selectedValue === value) {\n      tabIndex = 0;\n    }\n  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) {\n    tabIndex = 0;\n  }\n  if (isDisabled) {\n    tabIndex = undefined;\n  }\n\n  useFormReset(ref, state.selectedValue, state.setSelectedValue);\n\n  return {\n    inputProps: mergeProps(domProps, {\n      ...interactions,\n      type: 'radio',\n      name: radioGroupNames.get(state),\n      tabIndex,\n      disabled: isDisabled,\n      checked,\n      value,\n      onChange,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? radioGroupErrorMessageIds.get(state) : null,\n        radioGroupDescriptionIds.get(state)\n      ].filter(Boolean).join(' ') || undefined\n    }),\n    isDisabled,\n    isSelected: checked,\n    isPressed\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {RadioGroupState} from '@react-stately/radio';\n\nexport const radioGroupNames = new WeakMap<RadioGroupState, string>();\nexport const radioGroupDescriptionIds = new WeakMap<RadioGroupState, string>();\nexport const radioGroupErrorMessageIds = new WeakMap<RadioGroupState, string>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioGroupProps} from '@react-types/radio';\nimport {DOMAttributes} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {getFocusableTreeWalker} from '@react-aria/focus';\nimport {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface RadioGroupAria {\n  /** Props for the radio group wrapper element. */\n  radioGroupProps: DOMAttributes,\n  /** Props for the radio group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the radio group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the radio group error message element, if any. */\n  errorMessageProps: DOMAttributes\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(props: AriaRadioGroupProps, state: RadioGroupState): RadioGroupAria {\n  let {\n    name,\n    isReadOnly,\n    isRequired,\n    isDisabled,\n    orientation = 'vertical'\n  } = props;\n  let {direction} = useLocale();\n\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Radio group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span'\n  });\n  radioGroupDescriptionIds.set(state, descriptionProps.id);\n  radioGroupErrorMessageIds.set(state, errorMessageProps.id);\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  // When the radio group loses focus, reset the focusable radio to null if\n  // there is no selection. This allows tabbing into the group from either\n  // direction to go to the first or last radio.\n  let {focusWithinProps} = useFocusWithin({\n    onBlurWithin() {\n      if (!state.selectedValue) {\n        state.setLastFocusedValue(null);\n      }\n    }\n  });\n\n  let onKeyDown = (e) => {\n    let nextDir;\n    switch (e.key) {\n      case 'ArrowRight':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'prev';\n        } else {\n          nextDir = 'next';\n        }\n        break;\n      case 'ArrowLeft':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'next';\n        } else {\n          nextDir = 'prev';\n        }\n        break;\n      case 'ArrowDown':\n        nextDir = 'next';\n        break;\n      case 'ArrowUp':\n        nextDir = 'prev';\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    let walker = getFocusableTreeWalker(e.currentTarget, {from: e.target});\n    let nextElem;\n    if (nextDir === 'next') {\n      nextElem = walker.nextNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.firstChild();\n      }\n    } else {\n      nextElem = walker.previousNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.lastChild();\n      }\n    }\n    if (nextElem) {\n      // Call focus on nextElem so that keyboard navigation scrolls the radio into view\n      nextElem.focus();\n      state.setSelectedValue(nextElem.value);\n    }\n  };\n\n  let groupName = useId(name);\n  radioGroupNames.set(state, groupName);\n\n  return {\n    radioGroupProps: mergeProps(domProps, {\n      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup\n      role: 'radiogroup',\n      onKeyDown,\n      'aria-invalid': state.isInvalid || undefined,\n      'aria-errormessage': props['aria-errormessage'],\n      'aria-readonly': isReadOnly || undefined,\n      'aria-required': isRequired || undefined,\n      'aria-disabled': isDisabled || undefined,\n      'aria-orientation': orientation,\n      ...fieldProps,\n      ...focusWithinProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps\n  };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/radio/src/index.ts","packages/@react-aria/radio/src/useRadio.ts","packages/@react-aria/radio/src/utils.ts","packages/@react-aria/radio/src/useRadioGroup.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useRadio} from './useRadio';\nexport {useRadioGroup} from './useRadioGroup';\nexport type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';\nexport type {Orientation} from '@react-types/shared';\nexport type {RadioAria} from './useRadio';\nexport type {RadioGroupAria} from './useRadioGroup';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioProps} from '@react-types/radio';\nimport {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';\nimport {radioGroupData} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useFocusable} from '@react-aria/focus';\nimport {useFormValidation} from '@react-aria/form';\nimport {usePress} from '@react-aria/interactions';\n\nexport interface RadioAria {\n  /** Props for the label wrapper element. */\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n  /** Props for the input element. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Whether the radio is disabled. */\n  isDisabled: boolean,\n  /** Whether the radio is currently selected. */\n  isSelected: boolean,\n  /** Whether the radio is in a pressed state. */\n  isPressed: boolean\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(props: AriaRadioProps, state: RadioGroupState, ref: RefObject<HTMLInputElement>): RadioAria {\n  let {\n    value,\n    children,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  } = props;\n\n  const isDisabled = props.isDisabled || state.isDisabled;\n\n  let hasChildren = children != null;\n  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;\n  if (!hasChildren && !hasAriaLabel) {\n    console.warn('If you do not provide children, you must specify an aria-label for accessibility');\n  }\n\n  let checked = state.selectedValue === value;\n\n  let onChange = (e) => {\n    e.stopPropagation();\n    state.setSelectedValue(value);\n  };\n\n  let {pressProps, isPressed} = usePress({\n    isDisabled\n  });\n\n  // iOS does not toggle radios if you drag off and back onto the label, so handle it ourselves.\n  let {pressProps: labelProps, isPressed: isLabelPressed} = usePress({\n    isDisabled,\n    onPress() {\n      state.setSelectedValue(value);\n    }\n  });\n\n  let {focusableProps} = useFocusable(mergeProps(props, {\n    onFocus: () => state.setLastFocusedValue(value)\n  }), ref);\n  let interactions = mergeProps(pressProps, focusableProps);\n  let domProps = filterDOMProps(props, {labelable: true});\n  let tabIndex: number | undefined = -1;\n  if (state.selectedValue != null) {\n    if (state.selectedValue === value) {\n      tabIndex = 0;\n    }\n  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) {\n    tabIndex = 0;\n  }\n  if (isDisabled) {\n    tabIndex = undefined;\n  }\n\n  let {name, descriptionId, errorMessageId, validationBehavior} = radioGroupData.get(state)!;\n  useFormReset(ref, state.selectedValue, state.setSelectedValue);\n  useFormValidation({validationBehavior}, state, ref);\n\n  return {\n    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),\n    inputProps: mergeProps(domProps, {\n      ...interactions,\n      type: 'radio',\n      name,\n      tabIndex,\n      disabled: isDisabled,\n      required: state.isRequired && validationBehavior === 'native',\n      checked,\n      value,\n      onChange,\n      'aria-describedby': [\n        props['aria-describedby'],\n        state.isInvalid ? errorMessageId : null,\n        descriptionId\n      ].filter(Boolean).join(' ') || undefined\n    }),\n    isDisabled,\n    isSelected: checked,\n    isPressed: isPressed || isLabelPressed\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {RadioGroupState} from '@react-stately/radio';\n\ninterface RadioGroupData {\n  name: string,\n  descriptionId: string | undefined,\n  errorMessageId: string | undefined,\n  validationBehavior: 'aria' | 'native'\n}\n\nexport const radioGroupData = new WeakMap<RadioGroupState, RadioGroupData>();\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaRadioGroupProps} from '@react-types/radio';\nimport {DOMAttributes, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId} from '@react-aria/utils';\nimport {getFocusableTreeWalker} from '@react-aria/focus';\nimport {radioGroupData} from './utils';\nimport {RadioGroupState} from '@react-stately/radio';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface RadioGroupAria extends ValidationResult {\n  /** Props for the radio group wrapper element. */\n  radioGroupProps: DOMAttributes,\n  /** Props for the radio group's visible label (if any). */\n  labelProps: DOMAttributes,\n  /** Props for the radio group description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the radio group error message element, if any. */\n  errorMessageProps: DOMAttributes\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(props: AriaRadioGroupProps, state: RadioGroupState): RadioGroupAria {\n  let {\n    name,\n    isReadOnly,\n    isRequired,\n    isDisabled,\n    orientation = 'vertical',\n    validationBehavior = 'aria'\n  } = props;\n  let {direction} = useLocale();\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    // Radio group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: 'span',\n    isInvalid: state.isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let domProps = filterDOMProps(props, {labelable: true});\n\n  // When the radio group loses focus, reset the focusable radio to null if\n  // there is no selection. This allows tabbing into the group from either\n  // direction to go to the first or last radio.\n  let {focusWithinProps} = useFocusWithin({\n    onBlurWithin(e) {\n      props.onBlur?.(e);\n      if (!state.selectedValue) {\n        state.setLastFocusedValue(null);\n      }\n    },\n    onFocusWithin: props.onFocus,\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  let onKeyDown = (e) => {\n    let nextDir;\n    switch (e.key) {\n      case 'ArrowRight':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'prev';\n        } else {\n          nextDir = 'next';\n        }\n        break;\n      case 'ArrowLeft':\n        if (direction === 'rtl' && orientation !== 'vertical') {\n          nextDir = 'next';\n        } else {\n          nextDir = 'prev';\n        }\n        break;\n      case 'ArrowDown':\n        nextDir = 'next';\n        break;\n      case 'ArrowUp':\n        nextDir = 'prev';\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    let walker = getFocusableTreeWalker(e.currentTarget, {from: e.target});\n    let nextElem;\n    if (nextDir === 'next') {\n      nextElem = walker.nextNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.firstChild();\n      }\n    } else {\n      nextElem = walker.previousNode();\n      if (!nextElem) {\n        walker.currentNode = e.currentTarget;\n        nextElem = walker.lastChild();\n      }\n    }\n    if (nextElem) {\n      // Call focus on nextElem so that keyboard navigation scrolls the radio into view\n      nextElem.focus();\n      state.setSelectedValue(nextElem.value);\n    }\n  };\n\n  let groupName = useId(name);\n  radioGroupData.set(state, {\n    name: groupName,\n    descriptionId: descriptionProps.id,\n    errorMessageId: errorMessageProps.id,\n    validationBehavior\n  });\n\n  return {\n    radioGroupProps: mergeProps(domProps, {\n      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup\n      role: 'radiogroup',\n      onKeyDown,\n      'aria-invalid': state.isInvalid || undefined,\n      'aria-errormessage': props['aria-errormessage'],\n      'aria-readonly': isReadOnly || undefined,\n      'aria-required': isRequired || undefined,\n      'aria-disabled': isDisabled || undefined,\n      'aria-orientation': orientation,\n      ...fieldProps,\n      ...focusWithinProps\n    }),\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,8 +1,10 @@
 import { AriaRadioProps, AriaRadioGroupProps } from "@react-types/radio";
-import { InputHTMLAttributes, RefObject } from "react";
+import { InputHTMLAttributes, LabelHTMLAttributes, RefObject } from "react";
 import { RadioGroupState } from "@react-stately/radio";
-import { DOMAttributes } from "@react-types/shared";
+import { DOMAttributes, ValidationResult } from "@react-types/shared";
 export interface RadioAria {
+    /** Props for the label wrapper element. */
+    labelProps: LabelHTMLAttributes<HTMLLabelElement>;
     /** Props for the input element. */
     inputProps: InputHTMLAttributes<HTMLInputElement>;
     /** Whether the radio is disabled. */
@@ -20,7 +22,7 @@ export interface RadioAria {
  * @param ref - Ref to the HTML input element.
  */
 export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: RefObject<HTMLInputElement>): RadioAria;
-export interface RadioGroupAria {
+export interface RadioGroupAria extends ValidationResult {
     /** Props for the radio group wrapper element. */
     radioGroupProps: DOMAttributes;
     /** Props for the radio group's visible label (if any). */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;ACoBA;IACE,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;GAMG;AACH,yBAAyB,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAAG,SAAS,CAkEnH;AClFD;IACE,iDAAiD;IACjD,eAAe,EAAE,aAAa,CAAC;IAC/B,0DAA0D;IAC1D,UAAU,EAAE,aAAa,CAAC;IAC1B,6DAA6D;IAC7D,gBAAgB,EAAE,aAAa,CAAC;IAChC,+DAA+D;IAC/D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,8BAA8B,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,eAAe,GAAG,cAAc,CAsGhG;AChID,YAAY,EAAC,mBAAmB,EAAE,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAC5E,YAAY,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-aria/radio/src/packages/@react-aria/radio/src/utils.ts","packages/@react-aria/radio/src/packages/@react-aria/radio/src/useRadio.ts","packages/@react-aria/radio/src/packages/@react-aria/radio/src/useRadioGroup.ts","packages/@react-aria/radio/src/packages/@react-aria/radio/src/index.ts","packages/@react-aria/radio/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useRadio} from './useRadio';\nexport {useRadioGroup} from './useRadioGroup';\nexport type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';\nexport type {Orientation} from '@react-types/shared';\nexport type {RadioAria} from './useRadio';\nexport type {RadioGroupAria} from './useRadioGroup';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;ACqBA;IACE,2CAA2C;IAC3C,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;GAMG;AACH,yBAAyB,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAAG,SAAS,CA8EnH;ACjGD,+BAAgC,SAAQ,gBAAgB;IACtD,iDAAiD;IACjD,eAAe,EAAE,aAAa,CAAC;IAC/B,0DAA0D;IAC1D,UAAU,EAAE,aAAa,CAAC;IAC1B,6DAA6D;IAC7D,gBAAgB,EAAE,aAAa,CAAC;IAChC,+DAA+D;IAC/D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,8BAA8B,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,eAAe,GAAG,cAAc,CAmHhG;AC7ID,YAAY,EAAC,mBAAmB,EAAE,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAC5E,YAAY,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-aria/radio/src/packages/@react-aria/radio/src/utils.ts","packages/@react-aria/radio/src/packages/@react-aria/radio/src/useRadio.ts","packages/@react-aria/radio/src/packages/@react-aria/radio/src/useRadioGroup.ts","packages/@react-aria/radio/src/packages/@react-aria/radio/src/index.ts","packages/@react-aria/radio/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useRadio} from './useRadio';\nexport {useRadioGroup} from './useRadioGroup';\nexport type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';\nexport type {Orientation} from '@react-types/shared';\nexport type {RadioAria} from './useRadio';\nexport type {RadioGroupAria} from './useRadioGroup';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/radio",
-  "version": "3.8.2",
+  "version": "3.10.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,14 +22,15 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.14.3",
-    "@react-aria/i18n": "^3.8.4",
-    "@react-aria/interactions": "^3.19.1",
-    "@react-aria/label": "^3.7.2",
-    "@react-aria/utils": "^3.21.1",
-    "@react-stately/radio": "^3.9.1",
-    "@react-types/radio": "^3.5.2",
-    "@react-types/shared": "^3.21.0",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/form": "^3.0.1",
+    "@react-aria/i18n": "^3.10.0",
+    "@react-aria/interactions": "^3.20.1",
+    "@react-aria/label": "^3.7.4",
+    "@react-aria/utils": "^3.23.0",
+    "@react-stately/radio": "^3.10.1",
+    "@react-types/radio": "^3.7.0",
+    "@react-types/shared": "^3.22.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -38,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3ecf62dcceea437cb12df1851636dd491bb6591c"
+  "gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
 }

package/src/useRadio.ts

@@ -12,13 +12,16 @@
 
 import {AriaRadioProps} from '@react-types/radio';
 import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
-import {InputHTMLAttributes, RefObject} from 'react';
-import {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';
+import {InputHTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
+import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {useFocusable} from '@react-aria/focus';
+import {useFormValidation} from '@react-aria/form';
 import {usePress} from '@react-aria/interactions';
 
 export interface RadioAria {
+  /** Props for the label wrapper element. */
+  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Whether the radio is disabled. */
@@ -63,12 +66,20 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
     isDisabled
   });
 
+  // iOS does not toggle radios if you drag off and back onto the label, so handle it ourselves.
+  let {pressProps: labelProps, isPressed: isLabelPressed} = usePress({
+    isDisabled,
+    onPress() {
+      state.setSelectedValue(value);
+    }
+  });
+
   let {focusableProps} = useFocusable(mergeProps(props, {
     onFocus: () => state.setLastFocusedValue(value)
   }), ref);
   let interactions = mergeProps(pressProps, focusableProps);
   let domProps = filterDOMProps(props, {labelable: true});
-  let tabIndex = -1;
+  let tabIndex: number | undefined = -1;
   if (state.selectedValue != null) {
     if (state.selectedValue === value) {
       tabIndex = 0;
@@ -80,26 +91,30 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
     tabIndex = undefined;
   }
 
+  let {name, descriptionId, errorMessageId, validationBehavior} = radioGroupData.get(state)!;
   useFormReset(ref, state.selectedValue, state.setSelectedValue);
+  useFormValidation({validationBehavior}, state, ref);
 
   return {
+    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),
     inputProps: mergeProps(domProps, {
       ...interactions,
       type: 'radio',
-      name: radioGroupNames.get(state),
+      name,
       tabIndex,
       disabled: isDisabled,
+      required: state.isRequired && validationBehavior === 'native',
       checked,
       value,
       onChange,
       'aria-describedby': [
         props['aria-describedby'],
-        state.isInvalid ? radioGroupErrorMessageIds.get(state) : null,
-        radioGroupDescriptionIds.get(state)
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(' ') || undefined
     }),
     isDisabled,
     isSelected: checked,
-    isPressed
+    isPressed: isPressed || isLabelPressed
   };
 }

package/src/useRadioGroup.ts

@@ -11,16 +11,16 @@
  */
 
 import {AriaRadioGroupProps} from '@react-types/radio';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {getFocusableTreeWalker} from '@react-aria/focus';
-import {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';
+import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 
-export interface RadioGroupAria {
+export interface RadioGroupAria extends ValidationResult {
   /** Props for the radio group wrapper element. */
   radioGroupProps: DOMAttributes,
   /** Props for the radio group's visible label (if any). */
@@ -43,18 +43,20 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     isReadOnly,
     isRequired,
     isDisabled,
-    orientation = 'vertical'
+    orientation = 'vertical',
+    validationBehavior = 'aria'
   } = props;
   let {direction} = useLocale();
 
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     // Radio group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid: state.isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   });
-  radioGroupDescriptionIds.set(state, descriptionProps.id);
-  radioGroupErrorMessageIds.set(state, errorMessageProps.id);
 
   let domProps = filterDOMProps(props, {labelable: true});
 
@@ -62,11 +64,14 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
   // there is no selection. This allows tabbing into the group from either
   // direction to go to the first or last radio.
   let {focusWithinProps} = useFocusWithin({
-    onBlurWithin() {
+    onBlurWithin(e) {
+      props.onBlur?.(e);
       if (!state.selectedValue) {
         state.setLastFocusedValue(null);
       }
-    }
+    },
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
   });
 
   let onKeyDown = (e) => {
@@ -119,7 +124,12 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
   };
 
   let groupName = useId(name);
-  radioGroupNames.set(state, groupName);
+  radioGroupData.set(state, {
+    name: groupName,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
 
   return {
     radioGroupProps: mergeProps(domProps, {
@@ -137,6 +147,9 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     }),
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }

package/src/utils.ts

@@ -12,6 +12,11 @@
 
 import {RadioGroupState} from '@react-stately/radio';
 
-export const radioGroupNames = new WeakMap<RadioGroupState, string>();
-export const radioGroupDescriptionIds = new WeakMap<RadioGroupState, string>();
-export const radioGroupErrorMessageIds = new WeakMap<RadioGroupState, string>();
+interface RadioGroupData {
+  name: string,
+  descriptionId: string | undefined,
+  errorMessageId: string | undefined,
+  validationBehavior: 'aria' | 'native'
+}
+
+export const radioGroupData = new WeakMap<RadioGroupState, RadioGroupData>();