Update typescript to 5.8

.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

@@ -207,7 +207,7 @@
     "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
-    "typescript": "^5.5.0",
+    "typescript": "^5.8.2",
     "typescript-eslint": "^8.9.0",
     "verdaccio": "^5.13.0",
     "walk-object": "^4.0.0",
@@ -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-aria/dnd/src/useDroppableCollection.ts

@@ -258,18 +258,25 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // inserted item. If selection is disabled, then also show the focus ring so there
         // is some indication that items were added.
         if (state.selectionManager.focusedKey === prevFocusedKey) {
-          let first = newKeys.keys().next().value;
-          let item = state.collection.getItem(first);
-
-          // If this is a cell, focus the parent row.
-          if (item?.type === 'cell') {
-            first = item.parentKey;
-          }
+          let first: Key | null | undefined = newKeys.keys().next().value;
+          if (first != null) {
+            let item = state.collection.getItem(first);
+
+            // If this is a cell, focus the parent row.
+            // eslint-disable-next-line max-depth
+            if (item?.type === 'cell') {
+              first = item.parentKey;
+            }
 
-          state.selectionManager.setFocusedKey(first);
+            // eslint-disable-next-line max-depth
+            if (first != null) {
+              state.selectionManager.setFocusedKey(first);
+            }
 
-          if (state.selectionManager.selectionMode === 'none') {
-            setInteractionModality('keyboard');
+            // eslint-disable-next-line max-depth
+            if (state.selectionManager.selectionMode === 'none') {
+              setInteractionModality('keyboard');
+            }
           }
         }
       } else if (
@@ -335,7 +342,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     }, 50);
   }, [localState, defaultOnDrop, ref, updateFocusAfterDrop]);
 
-   
+
   useEffect(() => {
     return () => {
       if (droppingState.current) {

packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts

@@ -61,20 +61,25 @@ export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncement
     let messages: string[] = [];
 
     if ((state.selectionManager.selectedKeys.size === 1 && isReplace)) {
-      if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
-        let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
+      let firstKey = state.selectionManager.selectedKeys.keys().next().value;
+      if (firstKey != null && state.collection.getItem(firstKey)) {
+        let currentSelectionText = getRowText(firstKey);
         if (currentSelectionText) {
           messages.push(stringFormatter.format('selectedItem', {item: currentSelectionText}));
         }
       }
     } else if (addedKeys.size === 1 && removedKeys.size === 0) {
-      let addedText = getRowText(addedKeys.keys().next().value);
-      if (addedText) {
-        messages.push(stringFormatter.format('selectedItem', {item: addedText}));
+      let firstKey = addedKeys.keys().next().value;
+      if (firstKey != null) {
+        let addedText = getRowText(firstKey);
+        if (addedText) {
+          messages.push(stringFormatter.format('selectedItem', {item: addedText}));
+        }
       }
     } else if (removedKeys.size === 1 && addedKeys.size === 0) {
-      if (state.collection.getItem(removedKeys.keys().next().value)) {
-        let removedText = getRowText(removedKeys.keys().next().value);
+      let firstKey = removedKeys.keys().next().value;
+      if (firstKey != null && state.collection.getItem(firstKey)) {
+        let removedText = getRowText(firstKey);
         if (removedText) {
           messages.push(stringFormatter.format('deselectedItem', {item: removedText}));
         }

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',