chore: Ts strict remaining (#7368)

* TS Strict Collections

* fix rebase

* Start ts strict remaining

* GridKeyboardDelegate and review

* fix some calculateposition tests

* fix calculate tests

* fix listkeyboarddelegate

* fix more tests

* fix calculate position

* changes to calculate position

* grid aria hooks

* aria menu

* Virtualizer stuff

* aria menus more

* last of aria menu and overlay

* Stately table

* More table

* delete pagination, aria select

* aria slider and textfield

* aria toast

* fix extra toast

* aria table

* remove log

* ignore s1 cards

* More table and aria virtualizer

* more

* stately data

* more

* fix stories

* fix tree data

* more fixes

* RSP slider

* more stories

* spectrum and aria combobox

* Make useAsyncList sort function have a required sortDescriptor

* stately fixes

* fix toast test

* rsp layout and stately tree

* rsp menu

* rsp overlays

* rsp picker

* more rsp

* remaining rsp and dev

* fix lint

* update yarnlock

* remove ts-ignores

* a few more removed ts ignores

* fix provider usage

* DatePicker

* fix tsconfig

* remove plugin no longer needed

* fix check-examples

* Fix some ts-ignores

* Fix docs build

* turn on verdaccio build

* fix accidental defaultkey of null

* Toast noop

* Make focusStrategy match

* fix types for tailwind

* Try fixing cra app

* fix example apps

* Revert "turn on verdaccio build"

This reverts commit 3157bf1.

* fix tooltip for chromatic

* fix for all cases

* delete pagination files again

* fix lock file

---------

Co-authored-by: Devon Govett <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

examples/rsp-next-ts-17/components/ReorderableListView.tsx

@@ -22,7 +22,7 @@ export default function ReorderableListView() {
         // Setup the drag types and associated info for each dragged item.
         return {
           "custom-app-type-reorder": JSON.stringify(item),
-          "text/plain": item.name,
+          "text/plain": item?.name ?? '',
         };
       });
     },

examples/rsp-next-ts/components/ReorderableListView.tsx

@@ -22,7 +22,7 @@ export default function ReorderableListView() {
         // Setup the drag types and associated info for each dragged item.
         return {
           "custom-app-type-reorder": JSON.stringify(item),
-          "text/plain": item.name,
+          "text/plain": item?.name ?? '',
         };
       });
     },

package.json

@@ -9,7 +9,7 @@
   },
   "packageManager": "[email protected]",
   "scripts": {
-    "check-types": "tsc && tsc-strict",
+    "check-types": "tsc",
     "install-16": "node scripts/react-16-install-prep.mjs && yarn add react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 react-test-renderer@^16.9.0 && node scripts/oldReactSupport.mjs",
     "install-17": "node scripts/react-17-install-prep.mjs && yarn add react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 react-test-renderer@^16.9.0 && node scripts/oldReactSupport.mjs",
     "install-19": "node scripts/react-19-install-prep.mjs && yarn add react@next react-dom@next",
@@ -208,7 +208,6 @@
     "tempy": "^0.5.0",
     "typescript": "^5.5.0",
     "typescript-eslint": "^8.9.0",
-    "typescript-strict-plugin": "^2.0.0",
     "verdaccio": "^5.13.0",
     "walk-object": "^4.0.0",
     "wsrun": "^5.0.0",

packages/@internationalized/message/src/MessageDictionary.ts

@@ -76,9 +76,7 @@ function getStringsForLocale(locale: string, strings: LocalizedStrings, defaultL
 }
 
 function getLanguage(locale: string) {
-  // @ts-ignore
   if (Intl.Locale) {
-    // @ts-ignore
     return new Intl.Locale(locale).language;
   }
 

packages/@internationalized/number/src/NumberFormatter.ts

@@ -14,14 +14,12 @@ let formatterCache = new Map<string, Intl.NumberFormat>();
 
 let supportsSignDisplay = false;
 try {
-  // @ts-ignore
   supportsSignDisplay = (new Intl.NumberFormat('de-DE', {signDisplay: 'exceptZero'})).resolvedOptions().signDisplay === 'exceptZero';
   // eslint-disable-next-line no-empty
 } catch {}
 
 let supportsUnit = false;
 try {
-  // @ts-ignore
   supportsUnit = (new Intl.NumberFormat('de-DE', {style: 'unit', unit: 'degree'})).resolvedOptions().style === 'unit';
   // eslint-disable-next-line no-empty
 } catch {}
@@ -87,15 +85,12 @@ export class NumberFormatter implements Intl.NumberFormat {
   /** Formats a number to an array of parts such as separators, digits, punctuation, and more. */
   formatToParts(value: number): Intl.NumberFormatPart[] {
     // TODO: implement signDisplay for formatToParts
-    // @ts-ignore
     return this.numberFormatter.formatToParts(value);
   }
 
   /** Formats a number range as a string. */
   formatRange(start: number, end: number): string {
-    // @ts-ignore
     if (typeof this.numberFormatter.formatRange === 'function') {
-      // @ts-ignore
       return this.numberFormatter.formatRange(start, end);
     }
 
@@ -109,9 +104,7 @@ export class NumberFormatter implements Intl.NumberFormat {
 
   /** Formats a number range as an array of parts. */
   formatRangeToParts(start: number, end: number): NumberRangeFormatPart[] {
-    // @ts-ignore
     if (typeof this.numberFormatter.formatRangeToParts === 'function') {
-      // @ts-ignore
       return this.numberFormatter.formatRangeToParts(start, end);
     }
 

packages/@internationalized/number/src/NumberParser.ts

@@ -273,7 +273,6 @@ function getSymbols(locale: string, formatter: Intl.NumberFormat, intlOptions: I
 
   // Safari does not support the signDisplay option, but our number parser polyfills it.
   // If no plus sign was returned, but the original options contained signDisplay, default to the '+' character.
-  // @ts-ignore
   if (!plusSign && (originalOptions?.signDisplay === 'exceptZero' || originalOptions?.signDisplay === 'always')) {
     plusSign = '+';
   }
@@ -305,9 +304,7 @@ function getSymbols(locale: string, formatter: Intl.NumberFormat, intlOptions: I
 }
 
 function replaceAll(str: string, find: string, replace: string) {
-  // @ts-ignore
   if (str.replaceAll) {
-    // @ts-ignore
     return str.replaceAll(find, replace);
   }
 

packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js

@@ -11,7 +11,6 @@
  */
 
 import {Item} from '@react-stately/collections';
-import {ListLayout} from '@react-stately/layout';
 import React from 'react';
 import {renderHook} from '@react-spectrum/test-utils-internal';
 import {useComboBoxState} from '@react-stately/combobox';
@@ -30,11 +29,6 @@ describe('useSearchAutocomplete', function () {
   });
 
   let defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>};
-  let {result} = renderHook(() => useComboBoxState(defaultProps));
-  let mockLayout = new ListLayout({
-    rowHeight: 40
-  });
-  mockLayout.collection = result.current.collection;
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -45,8 +39,7 @@ describe('useSearchAutocomplete', function () {
       label: 'test label',
       popoverRef: React.createRef(),
       inputRef: React.createRef(),
-      listBoxRef: React.createRef(),
-      layout: mockLayout
+      listBoxRef: React.createRef()
     };
 
     let {result} = renderHook(() => useSearchAutocomplete(props, useComboBoxState(defaultProps)));
@@ -73,8 +66,7 @@ describe('useSearchAutocomplete', function () {
       inputRef: {
         current: document.createElement('input')
       },
-      listBoxRef: React.createRef(),
-      layout: mockLayout
+      listBoxRef: React.createRef()
     };
 
     let {result: state} = renderHook((props) => useComboBoxState(props), {initialProps: props});

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

@@ -283,7 +283,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
   let lastSection = useRef(sectionKey);
   let lastItem = useRef(itemKey);
   useEffect(() => {
-    if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {
+    if (isAppleDevice() && focusedItem != null && itemKey != null && itemKey !== lastItem.current) {
       let isSelected = state.selectionManager.isSelected(itemKey);
       let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
       let sectionTitle = section?.['aria-label'] || (typeof section?.rendered === 'string' ? section.rendered : '') || '';

packages/@react-aria/combobox/test/useComboBox.test.js

@@ -12,7 +12,6 @@
 
 import {actHook as act, renderHook} from '@react-spectrum/test-utils-internal';
 import {Item} from '@react-stately/collections';
-import {ListLayout} from '@react-stately/layout';
 import React from 'react';
 import {useComboBox} from '../';
 import {useComboBoxState} from '@react-stately/combobox';
@@ -32,11 +31,6 @@ describe('useComboBox', function () {
   });
 
   let defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>};
-  let {result} = renderHook(() => useComboBoxState(defaultProps));
-  let mockLayout = new ListLayout({
-    rowHeight: 40
-  });
-  mockLayout.collection = result.current.collection;
 
   let props = {
     label: 'test label',
@@ -51,8 +45,7 @@ describe('useComboBox', function () {
     },
     listBoxRef: {
       current: document.createElement('div')
-    },
-    layout: mockLayout
+    }
   };
 
   afterEach(() => {

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

@@ -14,14 +14,14 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker';
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
+import {DateRange, RangeCalendarProps} from '@react-types/calendar';
 import {DateRangePickerState} from '@react-stately/datepicker';
 import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';
 import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {RangeCalendarProps} from '@react-types/calendar';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
@@ -168,7 +168,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     startFieldProps: {
       ...startFieldProps,
       ...commonFieldProps,
-      value: state.value?.start,
+      value: state.value?.start ?? null,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
       name: props.startName,
@@ -186,7 +186,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     endFieldProps: {
       ...endFieldProps,
       ...commonFieldProps,
-      value: state.value?.end,
+      value: state.value?.end ?? null,
       onChange: end => state.setDateTime('end', end),
       name: props.endName,
       [privateValidationStateProp]: {
@@ -204,7 +204,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     errorMessageProps,
     calendarProps: {
       autoFocus: true,
-      value: state.dateRange,
+      value: state.dateRange?.start && state.dateRange.end ? state.dateRange as DateRange : null,
       onChange: state.setDateRange,
       minValue: props.minValue,
       maxValue: props.maxValue,