Merge branch 'main' into form-props

Author: devongovett

package.json

@@ -129,8 +129,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
-    "@types/react": "npm:types-react@19.0.0-rc.0",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@yarnpkg/types": "^4.0.0",
     "autoprefixer": "^9.6.0",
     "axe-core": "^4.6.3",
@@ -231,8 +231,8 @@
     "react-refresh": "0.9.0",
     "browserslist": "4.24.0",
     "caniuse-lite": "1.0.30001563",
-    "@types/react": "npm:types-react@19.0.0-rc.0",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "recast": "0.23.6",
     "ast-types": "0.16.1",
     "svgo": "^3",

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

@@ -70,12 +70,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

@@ -59,7 +59,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,