Merge branch 'fix-radio-tab-navigation-in-focusscope' of github.com:adobe/react-spectrum into fix-radio-tab-navigation-in-focusscope

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

@@ -49,10 +49,10 @@ governing permissions and limitations under the License.
 
   .spectrum-ActionGroup-item {
     flex-shrink: 0;
+  }
 
-    &.spectrum-ActionGroup-item--iconOnly {
-      padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
-    }
+  .spectrum-ActionGroup-item--iconOnly {
+    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
   }
 
   &:focus {

packages/@react-aria/button/src/useToggleButtonGroup.ts

@@ -68,6 +68,7 @@ export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions
 export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<ElementType>, state: ToggleGroupState, ref: RefObject<any>): ToggleButtonAria<HTMLAttributes<any>> {
   let toggleState: ToggleState = {
     isSelected: state.selectedKeys.has(props.id),
+    defaultSelected: false,
     setSelected(isSelected) {
       state.setSelected(props.id, isSelected);
     },

packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts

@@ -30,6 +30,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
   const toggleState = useToggleState({
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isSelected: state.isSelected(props.value),
+    defaultSelected: state.defaultValue.includes(props.value),
     onChange(isSelected) {
       if (isSelected) {
         state.addValue(props.value);

packages/@react-aria/color/src/useColorArea.ts

@@ -69,12 +69,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     }
   }, [inputXRef]);
 
-  useFormReset(inputXRef, [state.xValue, state.yValue], ([x, y]) => {
-    let newColor = state.value
-      .withChannelValue(state.channels.xChannel, x)
-      .withChannelValue(state.channels.yChannel, y);
-    state.setValue(newColor);
-  });
+  useFormReset(inputXRef, state.defaultValue, state.setValue);
 
   let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
   let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);

packages/@react-aria/color/src/useColorField.ts

@@ -20,7 +20,7 @@ import {
   useCallback,
   useState
 } from 'react';
-import {mergeProps, useId} from '@react-aria/utils';
+import {mergeProps, useFormReset, useId} from '@react-aria/utils';
 import {privateValidationStateProp} from '@react-stately/form';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
@@ -108,14 +108,18 @@ export function useColorField(
     ...props,
     id: inputId,
     value: inputValue,
-    defaultValue: undefined,
+    // Intentionally invalid value that will be ignored by onChange during form reset
+    // This is handled separately below.
+    defaultValue: '!',
     validate: undefined,
     [privateValidationStateProp]: state,
     type: 'text',
     autoComplete: 'off',
     onChange
   }, state, ref);
 
+  useFormReset(ref, state.defaultColorValue, state.setColorValue);
+
   inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
     role: 'textbox',
     'aria-valuemax': null,

packages/@react-aria/color/src/useColorWheel.ts

@@ -58,7 +58,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     }
   }, [inputRef]);
 
-  useFormReset(inputRef, state.hue, state.setHue);
+  useFormReset(inputRef, state.defaultValue, state.setValue);
 
   let currentPosition = useRef<{x: number, y: number} | null>(null);
 

packages/@react-aria/combobox/src/useComboBox.ts

@@ -210,6 +210,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     onKeyDown: !isReadOnly ? chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,
     onBlur,
     value: state.inputValue,
+    defaultValue: state.defaultInputValue,
     onFocus,
     autoComplete: 'off',
     validate: undefined,

packages/@react-aria/datepicker/src/useDateField.ts

@@ -138,7 +138,7 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     autoFocusRef.current = false;
   }, [focusManager]);
 
-  useFormReset(props.inputRef, state.value, state.setValue);
+  useFormReset(props.inputRef, state.defaultValue, state.setValue);
   useFormValidation({
     ...props,
     focus() {

packages/@react-aria/datepicker/src/useDatePicker.ts

@@ -136,6 +136,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       [roleSymbol]: 'presentation',
       'aria-describedby': ariaDescribedBy,
       value: state.value,
+      defaultValue: state.defaultValue,
       onChange: state.setValue,
       placeholderValue: props.placeholderValue,
       hideTimeZone: props.hideTimeZone,

packages/@react-aria/datepicker/src/useDateRangePicker.ts

@@ -183,6 +183,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       ...startFieldProps,
       ...commonFieldProps,
       value: state.value?.start ?? null,
+      defaultValue: state.defaultValue?.start,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
       name: props.startName,
@@ -201,6 +202,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       ...endFieldProps,
       ...commonFieldProps,
       value: state.value?.end ?? null,
+      defaultValue: state.defaultValue?.end,
       onChange: end => state.setDateTime('end', end),
       name: props.endName,
       [privateValidationStateProp]: {