chore: revert ts update (#8060)

Author: snowystinger

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

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+interface Document {
+  startViewTransition(fn: () => void): ViewTransition;
+}
+  
+interface ViewTransition {
+  ready: Promise<void>;
+}

lib/viewTransitions.d.ts

@@ -206,7 +206,7 @@
     "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
-    "typescript": "^5.8.2",
+    "typescript": "^5.5.0",
     "typescript-eslint": "^8.9.0",
     "verdaccio": "^6.0.0",
     "walk-object": "^4.0.0",
@@ -234,10 +234,7 @@
     "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",
-    "@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"
+    "@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"
   },
   "@parcel/transformer-css": {
     "cssModules": {

package.json

@@ -258,25 +258,18 @@ 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: 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;
-            }
+          let first = newKeys.keys().next().value;
+          let item = state.collection.getItem(first);
 
-            // eslint-disable-next-line max-depth
-            if (first != null) {
-              state.selectionManager.setFocusedKey(first);
-            }
+          // If this is a cell, focus the parent row.
+          if (item?.type === 'cell') {
+            first = item.parentKey;
+          }
 
-            // eslint-disable-next-line max-depth
-            if (state.selectionManager.selectionMode === 'none') {
-              setInteractionModality('keyboard');
-            }
+          state.selectionManager.setFocusedKey(first);
+
+          if (state.selectionManager.selectionMode === 'none') {
+            setInteractionModality('keyboard');
           }
         }
       } else if (
@@ -342,7 +335,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     }, 50);
   }, [localState, defaultOnDrop, ref, updateFocusAfterDrop]);
 
-
+   
   useEffect(() => {
     return () => {
       if (droppingState.current) {

packages/@react-aria/dnd/src/useDroppableCollection.ts

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

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

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

packages/@react-spectrum/calendar/stories/Calendar.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 | null>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);

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

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

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

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

packages/@react-spectrum/datepicker/stories/DateRangePicker.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<Key | null>('green');
+  let [favoriteColor, setFavoriteColor] = useState('green' as Key);
   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/form/stories/Form.stories.tsx

@@ -20,7 +20,6 @@ import {
   DefaultCollectionRenderer,
   HeadingContext,
   Link,
-  LinkRenderProps,
   Provider,
   Breadcrumbs as RACBreadcrumbs
 } from 'react-aria-components';
@@ -98,7 +97,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);
@@ -201,7 +200,7 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
   );
 };
 
-const breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean, isCurrent?: boolean}>({
+const breadcrumbStyles = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'start',
@@ -246,7 +245,7 @@ const chevronStyles = style({
   }
 });
 
-const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({
+const linkStyles = style({
   ...focusRing(),
   borderRadius: 'sm',
   font: 'control',
@@ -256,8 +255,7 @@ const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolea
     isCurrent: 'neutral',
     forcedColors: {
       default: 'LinkText',
-      isDisabled: 'GrayText',
-      isCurrent: 'GrayText'
+      isDisabled: 'GrayText'
     }
   },
   transition: 'default',
@@ -339,7 +337,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, isCurrent})}>
+                  className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>
                   {children}
                 </Link>
                 <ChevronIcon

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

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

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

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

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

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

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

@@ -16,7 +16,6 @@ import {
   NumberField as AriaNumberField,
   NumberFieldProps as AriaNumberFieldProps,
   ButtonContext,
-  ButtonRenderProps,
   ContextValue,
   InputContext,
   Text,
@@ -57,7 +56,7 @@ export interface NumberFieldProps extends
 
 export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
 
-const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({
+const inputButton = style({
   display: 'flex',
   outlineStyle: 'none',
   textAlign: 'center',
@@ -70,6 +69,9 @@ const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', typ
         L: '[5px]',
         XL: '[6px]'
       }
+    },
+    type: {
+      decrementStep: 'none'
     }
   },
   borderBottomRadius: {
@@ -80,6 +82,9 @@ const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', typ
         L: '[5px]',
         XL: '[6px]'
       }
+    },
+    type: {
+      incrementStep: 'none'
     }
   },
   alignItems: 'center',
@@ -127,6 +132,13 @@ const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', typ
 
 const iconStyles = style({
   flexShrink: 0,
+  rotate: {
+    default: 0,
+    type: {
+      incrementStep: 270,
+      decrementStep: 90
+    }
+  },
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
@@ -249,7 +261,7 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                         type: 'decrement',
                         size
                       })}>
-                      <Dash size={size} className={iconStyles} />
+                      <Dash size={size} className={iconStyles({})} />
                     </StepButton>
                     <StepButton
                       ref={incrementButtonRef}
@@ -260,7 +272,7 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                         type: 'increment',
                         size
                       })}>
-                      <Add size={size} className={iconStyles} />
+                      <Add size={size} className={iconStyles({})} />
                     </StepButton>
                   </div>}
                 </FieldGroup>