chore: Ts strict remaining

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,

packages/@react-aria/dnd/src/DragPreview.tsx

@@ -15,7 +15,7 @@ import {flushSync} from 'react-dom';
 import React, {ForwardedRef, JSX, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 export interface DragPreviewProps {
-  children: (items: DragItem[]) => JSX.Element
+  children: (items: DragItem[]) => JSX.Element | null
 }
 
 function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {

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

@@ -56,7 +56,7 @@ export interface DroppableCollectionResult {
 
 interface DroppingState {
   collection: Collection<Node<unknown>>,
-  focusedKey: Key,
+  focusedKey: Key | null,
   selectedKeys: Set<Key>,
   target: DropTarget,
   draggingKeys: Set<Key | null | undefined>,
@@ -273,6 +273,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           }
         }
       } else if (
+        prevFocusedKey != null &&
         state.selectionManager.focusedKey === prevFocusedKey &&
         isInternal &&
         target.type === 'item' &&
@@ -293,7 +294,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // Also show the focus ring if the focused key is not selected, e.g. in case of a reorder.
         state.selectionManager.setFocusedKey(target.key);
         setInteractionModality('keyboard');
-      } else if (!state.selectionManager.isSelected(state.selectionManager.focusedKey)) {
+      } else if (state.selectionManager.focusedKey != null && !state.selectionManager.isSelected(state.selectionManager.focusedKey)) {
         setInteractionModality('keyboard');
       }
 
@@ -533,7 +534,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
         // If the focused key is a cell, get the parent item instead.
         // For now, we assume that individual cells cannot be dropped on.
-        let item = localState.state.collection.getItem(key);
+        let item = key != null ? localState.state.collection.getItem(key) : null;
         if (item?.type === 'cell') {
           key = item.parentKey;
         }

packages/@react-aria/dnd/stories/DraggableCollection.tsx

@@ -61,7 +61,7 @@ export function DraggableCollectionExample(props) {
 
 function DraggableCollection(props) {
   let ref = React.useRef<HTMLDivElement>(null);
-  let state = useListState(props);
+  let state = useListState<ItemValue>(props);
   let gridState = useGridState({
     selectionMode: 'multiple',
     collection: React.useMemo(() => new GridCollection<ItemValue>({

packages/@react-aria/dnd/stories/dnd.stories.tsx

@@ -387,7 +387,7 @@ function DraggableCollectionExample(props) {
 function DraggableCollection(props) {
   let {isDisabled} = props;
   let ref = React.useRef<HTMLDivElement>(null);
-  let state = useListState(props);
+  let state = useListState<ItemValue>(props);
   let gridState = useGridState({
     ...props,
     selectionMode: 'multiple',