@react-stately/radio 3.9.1 → 3.10.1

package/dist/import.mjs

@@ -1,3 +1,4 @@
+import {useFormValidationState as $fQ2SF$useFormValidationState} from "@react-stately/form";
 import {useControlledState as $fQ2SF$useControlledState} from "@react-stately/utils";
 import {useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState} from "react";
 
@@ -23,6 +24,7 @@ import {useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState} from "react";
  * governing permissions and limitations under the License.
  */ 
 
+
 let $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 10000000000);
 let $a54cdc5c1942b639$var$i = 0;
 function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
@@ -30,12 +32,22 @@ function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
     let name = (0, $fQ2SF$useMemo)(()=>props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
         props.name
     ]);
-    let [selectedValue, setSelected] = (0, $fQ2SF$useControlledState)(props.value, props.defaultValue, props.onChange);
+    var _props_defaultValue;
+    let [selectedValue, setSelected] = (0, $fQ2SF$useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
     let [lastFocusedValue, setLastFocusedValue] = (0, $fQ2SF$useState)(null);
+    let validation = (0, $fQ2SF$useFormValidationState)({
+        ...props,
+        value: selectedValue
+    });
     let setSelectedValue = (value)=>{
-        if (!props.isReadOnly && !props.isDisabled) setSelected(value);
+        if (!props.isReadOnly && !props.isDisabled) {
+            setSelected(value);
+            validation.commitValidation();
+        }
     };
+    let isInvalid = validation.displayValidation.isInvalid;
     return {
+        ...validation,
         name: name,
         selectedValue: selectedValue,
         setSelectedValue: setSelectedValue,
@@ -44,8 +56,8 @@ function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
         isDisabled: props.isDisabled || false,
         isReadOnly: props.isReadOnly || false,
         isRequired: props.isRequired || false,
-        validationState: props.validationState || null,
-        isInvalid: props.isInvalid || props.validationState === "invalid"
+        validationState: props.validationState || (isInvalid ? "invalid" : null),
+        isInvalid: isInvalid
     };
 }
 

package/dist/main.js

@@ -1,6 +1,8 @@
+var $6fRYN$reactstatelyform = require("@react-stately/form");
 var $6fRYN$reactstatelyutils = require("@react-stately/utils");
 var $6fRYN$react = require("react");
 
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -28,6 +30,7 @@ $parcel$export(module.exports, "useRadioGroupState", () => $307db30b5687e2e8$exp
  * governing permissions and limitations under the License.
  */ 
 
+
 let $307db30b5687e2e8$var$instance = Math.round(Math.random() * 10000000000);
 let $307db30b5687e2e8$var$i = 0;
 function $307db30b5687e2e8$export$bca9d026f8e704eb(props) {
@@ -35,12 +38,22 @@ function $307db30b5687e2e8$export$bca9d026f8e704eb(props) {
     let name = (0, $6fRYN$react.useMemo)(()=>props.name || `radio-group-${$307db30b5687e2e8$var$instance}-${++$307db30b5687e2e8$var$i}`, [
         props.name
     ]);
-    let [selectedValue, setSelected] = (0, $6fRYN$reactstatelyutils.useControlledState)(props.value, props.defaultValue, props.onChange);
+    var _props_defaultValue;
+    let [selectedValue, setSelected] = (0, $6fRYN$reactstatelyutils.useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
     let [lastFocusedValue, setLastFocusedValue] = (0, $6fRYN$react.useState)(null);
+    let validation = (0, $6fRYN$reactstatelyform.useFormValidationState)({
+        ...props,
+        value: selectedValue
+    });
     let setSelectedValue = (value)=>{
-        if (!props.isReadOnly && !props.isDisabled) setSelected(value);
+        if (!props.isReadOnly && !props.isDisabled) {
+            setSelected(value);
+            validation.commitValidation();
+        }
     };
+    let isInvalid = validation.displayValidation.isInvalid;
     return {
+        ...validation,
         name: name,
         selectedValue: selectedValue,
         setSelectedValue: setSelectedValue,
@@ -49,8 +62,8 @@ function $307db30b5687e2e8$export$bca9d026f8e704eb(props) {
         isDisabled: props.isDisabled || false,
         isReadOnly: props.isReadOnly || false,
         isRequired: props.isRequired || false,
-        validationState: props.validationState || null,
-        isInvalid: props.isInvalid || props.validationState === "invalid"
+        validationState: props.validationState || (isInvalid ? "invalid" : null),
+        isInvalid: isInvalid
     };
 }
 

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC;;AA8CD,IAAI,iCAAW,KAAK,MAAM,KAAK,WAAW;AAC1C,IAAI,0BAAI;AAMD,SAAS,0CAAmB,KAAsB;IACvD,mGAAmG;IACnG,IAAI,OAAO,CAAA,GAAA,oBAAM,EAAE,IAAM,MAAM,QAAQ,CAAC,YAAY,EAAE,+BAAS,CAAC,EAAE,EAAE,wBAAE,CAAC,EAAE;QAAC,MAAM;KAAK;IACrF,IAAI,CAAC,eAAe,YAAY,GAAG,CAAA,GAAA,2CAAiB,EAAE,MAAM,OAAO,MAAM,cAAc,MAAM;IAC7F,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEvD,IAAI,mBAAmB,CAAC;QACtB,IAAI,CAAC,MAAM,cAAc,CAAC,MAAM,YAC9B,YAAY;IAEhB;IAEA,OAAO;cACL;uBACA;0BACA;0BACA;6BACA;QACA,YAAY,MAAM,cAAc;QAChC,YAAY,MAAM,cAAc;QAChC,YAAY,MAAM,cAAc;QAChC,iBAAiB,MAAM,mBAAmB;QAC1C,WAAW,MAAM,aAAa,MAAM,oBAAoB;IAC1D;AACF;;CD7EC","sources":["packages/@react-stately/radio/src/index.ts","packages/@react-stately/radio/src/useRadioGroupState.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 */\n\nexport {useRadioGroupState} from './useRadioGroupState';\n\nexport type {RadioGroupProps} from '@react-types/radio';\nexport type {RadioGroupState} from './useRadioGroupState';\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 {RadioGroupProps} from '@react-types/radio';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\nimport {ValidationState} from '@react-types/shared';\n\nexport interface RadioGroupState {\n  /**\n   * The name for the group, used for native form submission.\n   * @deprecated\n   * @private\n   */\n  readonly name: string,\n\n  /** Whether the radio group is disabled. */\n  readonly isDisabled: boolean,\n\n  /** Whether the radio group is read only. */\n  readonly isReadOnly: boolean,\n\n  /** Whether the radio group is required. */\n  readonly isRequired: boolean,\n\n  /**\n   * Whether the radio group is valid or invalid.\n   * @deprecated Use `isInvalid` instead.\n   */\n  readonly validationState: ValidationState | null,\n\n  /** Whether the radio group is invalid. */\n  readonly isInvalid: boolean,\n\n  /** The currently selected value. */\n  readonly selectedValue: string | null,\n\n  /** Sets the selected value. */\n  setSelectedValue(value: string): void,\n\n  /** The value of the last focused radio. */\n  readonly lastFocusedValue: string | null,\n\n  /** Sets the last focused value. */\n  setLastFocusedValue(value: string): void\n}\n\nlet instance = Math.round(Math.random() * 10000000000);\nlet i = 0;\n\n/**\n * Provides state management for a radio group component. Provides a name for the group,\n * and manages selection and focus state.\n */\nexport function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {\n  // Preserved here for backward compatibility. React Aria now generates the name instead of stately.\n  let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);\n  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue, props.onChange);\n  let [lastFocusedValue, setLastFocusedValue] = useState(null);\n\n  let setSelectedValue = (value) => {\n    if (!props.isReadOnly && !props.isDisabled) {\n      setSelected(value);\n    }\n  };\n\n  return {\n    name,\n    selectedValue,\n    setSelectedValue,\n    lastFocusedValue,\n    setLastFocusedValue,\n    isDisabled: props.isDisabled || false,\n    isReadOnly: props.isReadOnly || false,\n    isRequired: props.isRequired || false,\n    validationState: props.validationState || null,\n    isInvalid: props.isInvalid || props.validationState === 'invalid'\n  };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC;;;AA+CD,IAAI,iCAAW,KAAK,KAAK,CAAC,KAAK,MAAM,KAAK;AAC1C,IAAI,0BAAI;AAMD,SAAS,0CAAmB,KAAsB;IACvD,mGAAmG;IACnG,IAAI,OAAO,CAAA,GAAA,oBAAM,EAAE,IAAM,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE,+BAAS,CAAC,EAAE,EAAE,wBAAE,CAAC,EAAE;QAAC,MAAM,IAAI;KAAC;QAClB;IAAnE,IAAI,CAAC,eAAe,YAAY,GAAG,CAAA,GAAA,2CAAiB,EAAE,MAAM,KAAK,EAAE,CAAA,sBAAA,MAAM,YAAY,cAAlB,iCAAA,sBAAsB,MAAM,MAAM,QAAQ;IAC7G,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,qBAAO,EAAiB;IAEtE,IAAI,aAAa,CAAA,GAAA,8CAAqB,EAAE;QACtC,GAAG,KAAK;QACR,OAAO;IACT;IAEA,IAAI,mBAAmB,CAAC;QACtB,IAAI,CAAC,MAAM,UAAU,IAAI,CAAC,MAAM,UAAU,EAAE;YAC1C,YAAY;YACZ,WAAW,gBAAgB;QAC7B;IACF;IAEA,IAAI,YAAY,WAAW,iBAAiB,CAAC,SAAS;IAEtD,OAAO;QACL,GAAG,UAAU;cACb;QACA,eAAe;0BACf;0BACA;6BACA;QACA,YAAY,MAAM,UAAU,IAAI;QAChC,YAAY,MAAM,UAAU,IAAI;QAChC,YAAY,MAAM,UAAU,IAAI;QAChC,iBAAiB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;mBACtE;IACF;AACF;;CDvFC","sources":["packages/@react-stately/radio/src/index.ts","packages/@react-stately/radio/src/useRadioGroupState.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 */\n\nexport {useRadioGroupState} from './useRadioGroupState';\n\nexport type {RadioGroupProps} from '@react-types/radio';\nexport type {RadioGroupState} from './useRadioGroupState';\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 {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {RadioGroupProps} from '@react-types/radio';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\nimport {ValidationState} from '@react-types/shared';\n\nexport interface RadioGroupState extends FormValidationState {\n  /**\n   * The name for the group, used for native form submission.\n   * @deprecated\n   * @private\n   */\n  readonly name: string,\n\n  /** Whether the radio group is disabled. */\n  readonly isDisabled: boolean,\n\n  /** Whether the radio group is read only. */\n  readonly isReadOnly: boolean,\n\n  /** Whether the radio group is required. */\n  readonly isRequired: boolean,\n\n  /**\n   * Whether the radio group is valid or invalid.\n   * @deprecated Use `isInvalid` instead.\n   */\n  readonly validationState: ValidationState | null,\n\n  /** Whether the radio group is invalid. */\n  readonly isInvalid: boolean,\n\n  /** The currently selected value. */\n  readonly selectedValue: string | null,\n\n  /** Sets the selected value. */\n  setSelectedValue(value: string | null): void,\n\n  /** The value of the last focused radio. */\n  readonly lastFocusedValue: string | null,\n\n  /** Sets the last focused value. */\n  setLastFocusedValue(value: string | null): void\n}\n\nlet instance = Math.round(Math.random() * 10000000000);\nlet i = 0;\n\n/**\n * Provides state management for a radio group component. Provides a name for the group,\n * and manages selection and focus state.\n */\nexport function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {\n  // Preserved here for backward compatibility. React Aria now generates the name instead of stately.\n  let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);\n  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue ?? null, props.onChange);\n  let [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);\n\n  let validation = useFormValidationState({\n    ...props,\n    value: selectedValue\n  });\n\n  let setSelectedValue = (value) => {\n    if (!props.isReadOnly && !props.isDisabled) {\n      setSelected(value);\n      validation.commitValidation();\n    }\n  };\n\n  let isInvalid = validation.displayValidation.isInvalid;\n\n  return {\n    ...validation,\n    name,\n    selectedValue: selectedValue,\n    setSelectedValue,\n    lastFocusedValue,\n    setLastFocusedValue,\n    isDisabled: props.isDisabled || false,\n    isReadOnly: props.isReadOnly || false,\n    isRequired: props.isRequired || false,\n    validationState: props.validationState || (isInvalid ? 'invalid' : null),\n    isInvalid\n  };\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,3 +1,4 @@
+import {useFormValidationState as $fQ2SF$useFormValidationState} from "@react-stately/form";
 import {useControlledState as $fQ2SF$useControlledState} from "@react-stately/utils";
 import {useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState} from "react";
 
@@ -23,6 +24,7 @@ import {useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState} from "react";
  * governing permissions and limitations under the License.
  */ 
 
+
 let $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 10000000000);
 let $a54cdc5c1942b639$var$i = 0;
 function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
@@ -30,12 +32,22 @@ function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
     let name = (0, $fQ2SF$useMemo)(()=>props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
         props.name
     ]);
-    let [selectedValue, setSelected] = (0, $fQ2SF$useControlledState)(props.value, props.defaultValue, props.onChange);
+    var _props_defaultValue;
+    let [selectedValue, setSelected] = (0, $fQ2SF$useControlledState)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
     let [lastFocusedValue, setLastFocusedValue] = (0, $fQ2SF$useState)(null);
+    let validation = (0, $fQ2SF$useFormValidationState)({
+        ...props,
+        value: selectedValue
+    });
     let setSelectedValue = (value)=>{
-        if (!props.isReadOnly && !props.isDisabled) setSelected(value);
+        if (!props.isReadOnly && !props.isDisabled) {
+            setSelected(value);
+            validation.commitValidation();
+        }
     };
+    let isInvalid = validation.displayValidation.isInvalid;
     return {
+        ...validation,
         name: name,
         selectedValue: selectedValue,
         setSelectedValue: setSelectedValue,
@@ -44,8 +56,8 @@ function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
         isDisabled: props.isDisabled || false,
         isReadOnly: props.isReadOnly || false,
         isRequired: props.isRequired || false,
-        validationState: props.validationState || null,
-        isInvalid: props.isInvalid || props.validationState === "invalid"
+        validationState: props.validationState || (isInvalid ? "invalid" : null),
+        isInvalid: isInvalid
     };
 }
 

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":";;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC;;AA8CD,IAAI,iCAAW,KAAK,MAAM,KAAK,WAAW;AAC1C,IAAI,0BAAI;AAMD,SAAS,0CAAmB,KAAsB;IACvD,mGAAmG;IACnG,IAAI,OAAO,CAAA,GAAA,cAAM,EAAE,IAAM,MAAM,QAAQ,CAAC,YAAY,EAAE,+BAAS,CAAC,EAAE,EAAE,wBAAE,CAAC,EAAE;QAAC,MAAM;KAAK;IACrF,IAAI,CAAC,eAAe,YAAY,GAAG,CAAA,GAAA,yBAAiB,EAAE,MAAM,OAAO,MAAM,cAAc,MAAM;IAC7F,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvD,IAAI,mBAAmB,CAAC;QACtB,IAAI,CAAC,MAAM,cAAc,CAAC,MAAM,YAC9B,YAAY;IAEhB;IAEA,OAAO;cACL;uBACA;0BACA;0BACA;6BACA;QACA,YAAY,MAAM,cAAc;QAChC,YAAY,MAAM,cAAc;QAChC,YAAY,MAAM,cAAc;QAChC,iBAAiB,MAAM,mBAAmB;QAC1C,WAAW,MAAM,aAAa,MAAM,oBAAoB;IAC1D;AACF;;CD7EC","sources":["packages/@react-stately/radio/src/index.ts","packages/@react-stately/radio/src/useRadioGroupState.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 */\n\nexport {useRadioGroupState} from './useRadioGroupState';\n\nexport type {RadioGroupProps} from '@react-types/radio';\nexport type {RadioGroupState} from './useRadioGroupState';\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 {RadioGroupProps} from '@react-types/radio';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\nimport {ValidationState} from '@react-types/shared';\n\nexport interface RadioGroupState {\n  /**\n   * The name for the group, used for native form submission.\n   * @deprecated\n   * @private\n   */\n  readonly name: string,\n\n  /** Whether the radio group is disabled. */\n  readonly isDisabled: boolean,\n\n  /** Whether the radio group is read only. */\n  readonly isReadOnly: boolean,\n\n  /** Whether the radio group is required. */\n  readonly isRequired: boolean,\n\n  /**\n   * Whether the radio group is valid or invalid.\n   * @deprecated Use `isInvalid` instead.\n   */\n  readonly validationState: ValidationState | null,\n\n  /** Whether the radio group is invalid. */\n  readonly isInvalid: boolean,\n\n  /** The currently selected value. */\n  readonly selectedValue: string | null,\n\n  /** Sets the selected value. */\n  setSelectedValue(value: string): void,\n\n  /** The value of the last focused radio. */\n  readonly lastFocusedValue: string | null,\n\n  /** Sets the last focused value. */\n  setLastFocusedValue(value: string): void\n}\n\nlet instance = Math.round(Math.random() * 10000000000);\nlet i = 0;\n\n/**\n * Provides state management for a radio group component. Provides a name for the group,\n * and manages selection and focus state.\n */\nexport function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {\n  // Preserved here for backward compatibility. React Aria now generates the name instead of stately.\n  let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);\n  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue, props.onChange);\n  let [lastFocusedValue, setLastFocusedValue] = useState(null);\n\n  let setSelectedValue = (value) => {\n    if (!props.isReadOnly && !props.isDisabled) {\n      setSelected(value);\n    }\n  };\n\n  return {\n    name,\n    selectedValue,\n    setSelectedValue,\n    lastFocusedValue,\n    setLastFocusedValue,\n    isDisabled: props.isDisabled || false,\n    isReadOnly: props.isReadOnly || false,\n    isRequired: props.isRequired || false,\n    validationState: props.validationState || null,\n    isInvalid: props.isInvalid || props.validationState === 'invalid'\n  };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC;;;AA+CD,IAAI,iCAAW,KAAK,KAAK,CAAC,KAAK,MAAM,KAAK;AAC1C,IAAI,0BAAI;AAMD,SAAS,0CAAmB,KAAsB;IACvD,mGAAmG;IACnG,IAAI,OAAO,CAAA,GAAA,cAAM,EAAE,IAAM,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE,+BAAS,CAAC,EAAE,EAAE,wBAAE,CAAC,EAAE;QAAC,MAAM,IAAI;KAAC;QAClB;IAAnE,IAAI,CAAC,eAAe,YAAY,GAAG,CAAA,GAAA,yBAAiB,EAAE,MAAM,KAAK,EAAE,CAAA,sBAAA,MAAM,YAAY,cAAlB,iCAAA,sBAAsB,MAAM,MAAM,QAAQ;IAC7G,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,eAAO,EAAiB;IAEtE,IAAI,aAAa,CAAA,GAAA,6BAAqB,EAAE;QACtC,GAAG,KAAK;QACR,OAAO;IACT;IAEA,IAAI,mBAAmB,CAAC;QACtB,IAAI,CAAC,MAAM,UAAU,IAAI,CAAC,MAAM,UAAU,EAAE;YAC1C,YAAY;YACZ,WAAW,gBAAgB;QAC7B;IACF;IAEA,IAAI,YAAY,WAAW,iBAAiB,CAAC,SAAS;IAEtD,OAAO;QACL,GAAG,UAAU;cACb;QACA,eAAe;0BACf;0BACA;6BACA;QACA,YAAY,MAAM,UAAU,IAAI;QAChC,YAAY,MAAM,UAAU,IAAI;QAChC,YAAY,MAAM,UAAU,IAAI;QAChC,iBAAiB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;mBACtE;IACF;AACF;;CDvFC","sources":["packages/@react-stately/radio/src/index.ts","packages/@react-stately/radio/src/useRadioGroupState.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 */\n\nexport {useRadioGroupState} from './useRadioGroupState';\n\nexport type {RadioGroupProps} from '@react-types/radio';\nexport type {RadioGroupState} from './useRadioGroupState';\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 {FormValidationState, useFormValidationState} from '@react-stately/form';\nimport {RadioGroupProps} from '@react-types/radio';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\nimport {ValidationState} from '@react-types/shared';\n\nexport interface RadioGroupState extends FormValidationState {\n  /**\n   * The name for the group, used for native form submission.\n   * @deprecated\n   * @private\n   */\n  readonly name: string,\n\n  /** Whether the radio group is disabled. */\n  readonly isDisabled: boolean,\n\n  /** Whether the radio group is read only. */\n  readonly isReadOnly: boolean,\n\n  /** Whether the radio group is required. */\n  readonly isRequired: boolean,\n\n  /**\n   * Whether the radio group is valid or invalid.\n   * @deprecated Use `isInvalid` instead.\n   */\n  readonly validationState: ValidationState | null,\n\n  /** Whether the radio group is invalid. */\n  readonly isInvalid: boolean,\n\n  /** The currently selected value. */\n  readonly selectedValue: string | null,\n\n  /** Sets the selected value. */\n  setSelectedValue(value: string | null): void,\n\n  /** The value of the last focused radio. */\n  readonly lastFocusedValue: string | null,\n\n  /** Sets the last focused value. */\n  setLastFocusedValue(value: string | null): void\n}\n\nlet instance = Math.round(Math.random() * 10000000000);\nlet i = 0;\n\n/**\n * Provides state management for a radio group component. Provides a name for the group,\n * and manages selection and focus state.\n */\nexport function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {\n  // Preserved here for backward compatibility. React Aria now generates the name instead of stately.\n  let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);\n  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue ?? null, props.onChange);\n  let [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);\n\n  let validation = useFormValidationState({\n    ...props,\n    value: selectedValue\n  });\n\n  let setSelectedValue = (value) => {\n    if (!props.isReadOnly && !props.isDisabled) {\n      setSelected(value);\n      validation.commitValidation();\n    }\n  };\n\n  let isInvalid = validation.displayValidation.isInvalid;\n\n  return {\n    ...validation,\n    name,\n    selectedValue: selectedValue,\n    setSelectedValue,\n    lastFocusedValue,\n    setLastFocusedValue,\n    isDisabled: props.isDisabled || false,\n    isReadOnly: props.isReadOnly || false,\n    isRequired: props.isRequired || false,\n    validationState: props.validationState || (isInvalid ? 'invalid' : null),\n    isInvalid\n  };\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,6 +1,7 @@
+import { FormValidationState } from "@react-stately/form";
 import { RadioGroupProps } from "@react-types/radio";
 import { ValidationState } from "@react-types/shared";
-export interface RadioGroupState {
+export interface RadioGroupState extends FormValidationState {
     /**
      * The name for the group, used for native form submission.
      * @deprecated
@@ -23,11 +24,11 @@ export interface RadioGroupState {
     /** The currently selected value. */
     readonly selectedValue: string | null;
     /** Sets the selected value. */
-    setSelectedValue(value: string): void;
+    setSelectedValue(value: string | null): void;
     /** The value of the last focused radio. */
     readonly lastFocusedValue: string | null;
     /** Sets the last focused value. */
-    setLastFocusedValue(value: string): void;
+    setLastFocusedValue(value: string | null): void;
 }
 /**
  * Provides state management for a radio group component. Provides a name for the group,

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;AAiBA;IACE;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,4CAA4C;IAC5C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;IAEjD,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAE5B,oCAAoC;IACpC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtC,+BAA+B;IAC/B,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtC,2CAA2C;IAC3C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzC,mCAAmC;IACnC,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACzC;AAKD;;;GAGG;AACH,mCAAmC,KAAK,EAAE,eAAe,GAAG,eAAe,CAwB1E;ACzED,YAAY,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-stately/radio/src/packages/@react-stately/radio/src/useRadioGroupState.ts","packages/@react-stately/radio/src/packages/@react-stately/radio/src/index.ts","packages/@react-stately/radio/src/index.ts"],"sourcesContent":[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 */\n\nexport {useRadioGroupState} from './useRadioGroupState';\n\nexport type {RadioGroupProps} from '@react-types/radio';\nexport type {RadioGroupState} from './useRadioGroupState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AAkBA,gCAAiC,SAAQ,mBAAmB;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,4CAA4C;IAC5C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;IAEjD,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAE5B,oCAAoC;IACpC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtC,+BAA+B;IAC/B,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAE7C,2CAA2C;IAC3C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzC,mCAAmC;IACnC,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;CAChD;AAKD;;;GAGG;AACH,mCAAmC,KAAK,EAAE,eAAe,GAAG,eAAe,CAiC1E;ACnFD,YAAY,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-stately/radio/src/packages/@react-stately/radio/src/useRadioGroupState.ts","packages/@react-stately/radio/src/packages/@react-stately/radio/src/index.ts","packages/@react-stately/radio/src/index.ts"],"sourcesContent":[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 */\n\nexport {useRadioGroupState} from './useRadioGroupState';\n\nexport type {RadioGroupProps} from '@react-types/radio';\nexport type {RadioGroupState} from './useRadioGroupState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/radio",
-  "version": "3.9.1",
+  "version": "3.10.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,9 +22,10 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-stately/utils": "^3.8.0",
-    "@react-types/radio": "^3.5.2",
-    "@react-types/shared": "^3.21.0",
+    "@react-stately/form": "^3.0.0",
+    "@react-stately/utils": "^3.9.0",
+    "@react-types/radio": "^3.7.0",
+    "@react-types/shared": "^3.22.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -33,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
+  "gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
 }

package/src/useRadioGroupState.ts

@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {RadioGroupProps} from '@react-types/radio';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
-export interface RadioGroupState {
+export interface RadioGroupState extends FormValidationState {
   /**
    * The name for the group, used for native form submission.
    * @deprecated
@@ -45,13 +46,13 @@ export interface RadioGroupState {
   readonly selectedValue: string | null,
 
   /** Sets the selected value. */
-  setSelectedValue(value: string): void,
+  setSelectedValue(value: string | null): void,
 
   /** The value of the last focused radio. */
   readonly lastFocusedValue: string | null,
 
   /** Sets the last focused value. */
-  setLastFocusedValue(value: string): void
+  setLastFocusedValue(value: string | null): void
 }
 
 let instance = Math.round(Math.random() * 10000000000);
@@ -64,25 +65,34 @@ let i = 0;
 export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
   // Preserved here for backward compatibility. React Aria now generates the name instead of stately.
   let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);
-  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue, props.onChange);
-  let [lastFocusedValue, setLastFocusedValue] = useState(null);
+  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue ?? null, props.onChange);
+  let [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
+
+  let validation = useFormValidationState({
+    ...props,
+    value: selectedValue
+  });
 
   let setSelectedValue = (value) => {
     if (!props.isReadOnly && !props.isDisabled) {
       setSelected(value);
+      validation.commitValidation();
     }
   };
 
+  let isInvalid = validation.displayValidation.isInvalid;
+
   return {
+    ...validation,
     name,
-    selectedValue,
+    selectedValue: selectedValue,
     setSelectedValue,
     lastFocusedValue,
     setLastFocusedValue,
     isDisabled: props.isDisabled || false,
     isReadOnly: props.isReadOnly || false,
     isRequired: props.isRequired || false,
-    validationState: props.validationState || null,
-    isInvalid: props.isInvalid || props.validationState === 'invalid'
+    validationState: props.validationState || (isInvalid ? 'invalid' : null),
+    isInvalid
   };
 }