fix all the types for the upgrade

.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch

@@ -0,0 +1,13 @@
+diff --git a/buffer.d.ts b/buffer.d.ts
+index 5d6c97d6b5d47fd189f795498aefd6b8d7713b7d..b9a22c4634fa6308006ae17d3527ff3c518a789d 100644
+--- a/buffer.d.ts
++++ b/buffer.d.ts
+@@ -629,7 +629,7 @@ declare module "buffer" {
+              */
+             poolSize: number;
+         }
+-        interface Buffer extends Uint8Array {
++        interface Buffer extends Uint8Array<ArrayBuffer> {
+             /**
+              * Writes `string` to `buf` at `offset` according to the character encoding in`encoding`. The `length` parameter is the number of bytes to write. If `buf` did
+              * not contain enough space to fit the entire string, only part of `string` will be

package.json

@@ -235,7 +235,10 @@
     "recast": "0.23.6",
     "ast-types": "0.16.1",
     "svgo": "^3",
-    "@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"
+    "@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/node@npm:*": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch",
+    "@types/node@npm:^18.0.0": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch",
+    "@types/node@npm:>= 8": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {

packages/@react-spectrum/calendar/stories/Calendar.stories.tsx

@@ -203,7 +203,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale)!;

packages/@react-spectrum/datepicker/stories/DateField.stories.tsx

@@ -212,7 +212,7 @@ export const IsDateUnavailable: DateFieldStory = {
   ...Default,
   args: {
     isDateUnavailable: (date) => {
-      return date.compare(new CalendarDate(1980, 1, 1)) >= 0 
+      return date.compare(new CalendarDate(1980, 1, 1)) >= 0
           && date.compare(new CalendarDate(1980, 1, 8)) <= 0;
     },
     errorMessage: 'Date unavailable.',
@@ -310,7 +310,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);

packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx

@@ -332,7 +332,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);

packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx

@@ -235,7 +235,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);

packages/@react-spectrum/form/stories/Form.stories.tsx

@@ -482,7 +482,7 @@ function FormWithControls(props: any = {}) {
   let [firstName, setFirstName] = useState('hello');
   let [isHunter, setIsHunter] = useState(true);
   let [favoritePet, setFavoritePet] = useState('cats');
-  let [favoriteColor, setFavoriteColor] = useState('green' as Key);
+  let [favoriteColor, setFavoriteColor] = useState<Key | null>('green');
   let [howIFeel, setHowIFeel] = useState('I feel good, o I feel so good!');
   let [birthday, setBirthday] = useState<CalendarDate | null>(new CalendarDate(1732, 2, 22));
   let [money, setMoney] = useState(50);

packages/@react-spectrum/s2/src/Breadcrumbs.tsx

@@ -20,6 +20,7 @@ import {
   DefaultCollectionRenderer,
   HeadingContext,
   Link,
+  LinkRenderProps,
   Provider,
   Breadcrumbs as RACBreadcrumbs
 } from 'react-aria-components';
@@ -97,7 +98,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
 
 const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
-/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
+/** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
 export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let domRef = useDOMRef(ref);
@@ -200,7 +201,7 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
   );
 };
 
-const breadcrumbStyles = style({
+const breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean, isCurrent?: boolean}>({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'start',
@@ -245,7 +246,7 @@ const chevronStyles = style({
   }
 });
 
-const linkStyles = style({
+const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({
   ...focusRing(),
   borderRadius: 'sm',
   font: 'control',
@@ -255,7 +256,8 @@ const linkStyles = style({
     isCurrent: 'neutral',
     forcedColors: {
       default: 'LinkText',
-      isDisabled: 'GrayText'
+      isDisabled: 'GrayText',
+      isCurrent: 'GrayText'
     }
   },
   transition: 'default',
@@ -337,7 +339,7 @@ export const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
                   ping={ping}
                   referrerPolicy={referrerPolicy}
                   isDisabled={isDisabled || isCurrent}
-                  className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>
+                  className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed, isCurrent})}>
                   {children}
                 </Link>
                 <ChevronIcon

packages/@react-spectrum/s2/src/CloseButton.tsx

@@ -39,7 +39,7 @@ const hoverBackground = {
   isStaticColor: 'transparent-overlay-200'
 } as const;
 
-const styles = style({
+const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({
   ...focusRing(),
   ...staticColor(),
   display: 'flex',

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -16,6 +16,7 @@ import {
   ListBoxSection as AriaListBoxSection,
   PopoverProps as AriaPopoverProps,
   Button,
+  ButtonRenderProps,
   ContextValue,
   InputContext,
   ListBox,
@@ -95,7 +96,7 @@ export interface ComboBoxProps<T extends object> extends
 
 export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
 
-const inputButton = style({
+const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
   display: 'flex',
   outlineStyle: 'none',
   textAlign: 'center',

packages/@react-spectrum/s2/src/Menu.tsx

@@ -23,6 +23,7 @@ import {
   SubmenuTriggerProps as AriaSubmenuTriggerProps,
   ContextValue,
   DEFAULT_SLOT,
+  MenuItemRenderProps,
   Provider,
   Separator,
   SeparatorProps
@@ -146,7 +147,7 @@ export let sectionHeading = style({
   margin: 0
 });
 
-export let menuitem = style({
+export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> & {isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL', isLink?: boolean, hasSubmenu?: boolean, isOpen?: boolean}>({
   ...focusRing(),
   boxSizing: 'border-box',
   borderRadius: 'control',
@@ -293,7 +294,7 @@ let value = style({
   marginStart: 8
 });
 
-let keyboard = style({
+let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
   gridArea: 'keyboard',
   marginStart: 8,
   font: 'ui',
@@ -305,7 +306,7 @@ let keyboard = style({
       isDisabled: 'GrayText'
     }
   },
-  background: 'gray-25',
+  backgroundColor: 'gray-25',
   unicodeBidi: 'plaintext'
 });
 

packages/@react-spectrum/s2/src/NumberField.tsx

@@ -16,6 +16,7 @@ import {
   NumberField as AriaNumberField,
   NumberFieldProps as AriaNumberFieldProps,
   ButtonContext,
+  ButtonRenderProps,
   ContextValue,
   InputContext,
   Text,
@@ -56,7 +57,7 @@ export interface NumberFieldProps extends
 
 export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
 
-const inputButton = style({
+const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({
   display: 'flex',
   outlineStyle: 'none',
   textAlign: 'center',
@@ -71,7 +72,7 @@ const inputButton = style({
       }
     },
     type: {
-      decrementStep: 'none'
+      decrement: 'none'
     }
   },
   borderBottomRadius: {
@@ -84,7 +85,7 @@ const inputButton = style({
       }
     },
     type: {
-      incrementStep: 'none'
+      increment: 'none'
     }
   },
   alignItems: 'center',

packages/@react-spectrum/s2/src/SegmentedControl.tsx

@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
 import {focusRing, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -62,7 +62,7 @@ const segmentedControl = style({
   width: 'fit'
 }, getAllowedOverrides());
 
-const controlItem = style({
+const controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({
   ...focusRing(),
   position: 'relative',
   display: 'flex',
@@ -107,7 +107,7 @@ const controlItem = style({
   }
 }, getAllowedOverrides());
 
-const slider = style({
+const slider = style<{isDisabled: boolean}>({
   backgroundColor: {
     default: 'gray-25',
     forcedColors: {

packages/@react-spectrum/s2/src/Slider.tsx

@@ -16,6 +16,7 @@ import {
   ContextValue,
   SliderOutput,
   SliderThumb,
+  SliderThumbRenderProps,
   SliderTrack
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
@@ -199,7 +200,7 @@ export let thumbHitArea = style({
   }
 });
 
-export let thumb = style({
+export let thumb = style<SliderThumbRenderProps & {size: 'S' | 'M' | 'L' | 'XL', thumbStyle: 'default' | 'precise'}>({
   ...focusRing(),
   display: 'inline-block',
   boxSizing: 'border-box',
@@ -271,7 +272,7 @@ const trackStyling = {
   }
 } as const;
 
-export let upperTrack = style({
+export let upperTrack = style<{isDisabled?: boolean, trackStyle: 'thin' | 'thick'}>({
   ...trackStyling,
   position: 'absolute',
   backgroundColor: {
@@ -292,7 +293,7 @@ export let upperTrack = style({
   }
 });
 
-export let filledTrack = style({
+export let filledTrack = style<{isDisabled?: boolean, isEmphasized?: boolean, trackStyle: 'thin' | 'thick'}>({
   ...trackStyling,
   position: 'absolute',
   backgroundColor: {

packages/@react-spectrum/s2/src/TableView.tsx

@@ -642,14 +642,13 @@ const resizerHandleContainer = style({
   }
 });
 
-const resizerHandle = style({
+const resizerHandle = style<{isFocusVisible: boolean, isResizing: boolean}>({
   backgroundColor: {
     default: 'gray-300',
     isFocusVisible: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that will use the focusVisible version
     isResizing: lightDark('informative-900', 'informative-700'),
     forcedColors: {
       default: 'Background',
-      isHovered: 'ButtonBorder',
       isFocusVisible: 'Highlight',
       isResizing: 'Highlight'
     }
@@ -787,7 +786,7 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
         <ColumnResizer data-react-aria-prevent-focus="true" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isInResizeMode})}>
           {({isFocusVisible, isResizing}) => (
             <>
-              <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />
+              <ResizerIndicator isFocusVisible={isFocusVisible} isResizing={isResizing} />
               {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}
             </>
         )}
@@ -797,9 +796,9 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
   );
 }
 
-function ResizerIndicator({isFocusVisible, isResizing, isInResizeMode}) {
+function ResizerIndicator({isFocusVisible, isResizing}) {
   return (
-    <div className={resizerHandle({isFocusVisible, isInResizeMode, isResizing})} />
+    <div className={resizerHandle({isFocusVisible, isResizing})} />
   );
 }
 

packages/@react-spectrum/s2/src/Tabs.tsx

@@ -22,7 +22,8 @@ import {
   Tab as RACTab,
   TabList as RACTabList,
   Tabs as RACTabs,
-  TabListStateContext
+  TabListStateContext,
+  TabRenderProps
 } from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
@@ -233,7 +234,7 @@ interface TabLineProps {
   density?: 'compact' | 'regular'
 }
 
-const selectedIndicator = style({
+const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({
   position: 'absolute',
   backgroundColor: {
     default: 'neutral',
@@ -320,7 +321,7 @@ function TabLine(props: TabLineProps) {
   );
 }
 
-const tab = style({
+const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({
   ...focusRing(),
   display: 'flex',
   color: {
@@ -520,7 +521,12 @@ let HiddenTabs = function (props: {
 
 let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {
   let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
-  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
+  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
+  let onSelectionChange = useCallback((key: Key | null) => {
+    if (key != null) {
+      _onSelectionChange?.(key);
+    }
+  }, [_onSelectionChange]);
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());

packages/@react-spectrum/s2/src/TabsPicker.tsx

@@ -281,7 +281,7 @@ let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
 export {_Picker as Picker};
 
 
-const selectedIndicator = style({
+const selectedIndicator = style<{isDisabled?: boolean}>({
   backgroundColor: {
     default: 'neutral',
     isDisabled: 'disabled',
@@ -297,7 +297,7 @@ const selectedIndicator = style({
   transitionDuration: 130,
   transitionTimingFunction: 'in-out'
 });
-function TabLine(props) {
+function TabLine(props: {isDisabled?: boolean}) {
   return <div className={selectedIndicator(props)} />;
 }