React 19 support #6437

snowystinger · 2024-05-23T07:44:45Z

Types for React 19 have not been released yet, but can work off the pre-release following eps1lon#1

Unresolved issues

framer-motion uses the deprecated, global JSX namespace. Tracking in eps1lon/DefinitelyTyped#25
lucide-react uses removed ReactSVG type. Tracking in eps1lon/DefinitelyTyped#25

Dev docs build: mdx-js/mdx#2487
markdown-to-jsx: quantizor/markdown-to-jsx#583

Need to upgrade to Storybook 8, might address some type issues
Testing-library-react might need an upgrade

We can probably patch-package most of these TS errors if we need
On another note, the whole JSX global namespace removal is causing all kinds of issues apparently DefinitelyTyped/DefinitelyTyped#69142

…of "npm:"

rspbot · 2024-05-30T00:36:07Z

Build successful! 🎉

rspbot · 2024-05-30T00:39:35Z

Build successful! 🎉

rspbot · 2024-05-30T00:41:33Z

Build successful! 🎉

rspbot · 2024-05-30T00:46:10Z

Build successful! 🎉

rspbot · 2024-05-30T01:58:25Z

Build successful! 🎉

snowystinger · 2024-05-30T02:42:36Z

package.json

@@ -12,12 +12,12 @@
    "check-types": "tsc && tsc-strict",
    "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 && node scripts/oldReactSupport.mjs",
    "install-17": "yarn add -W react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 && node scripts/oldReactSupport.mjs",
-    "install-canary": "yarn add -W react@canary react-dom@canary",
+    "install-19": "node ./scripts/install-react-19-types.mjs && yarn add -W react@next react-dom@next",


should types for 19 always be installed?

# Conflicts: # packages/@react-aria/menu/src/useSubmenuTrigger.ts # packages/@react-aria/toast/src/useToast.ts # packages/@react-aria/toast/stories/Example.tsx # packages/@react-aria/utils/src/useEvent.ts # packages/@react-aria/utils/src/useResizeObserver.ts # packages/@react-aria/virtualizer/src/ScrollView.tsx # packages/@react-aria/virtualizer/src/Virtualizer.tsx # packages/@react-spectrum/calendar/src/Calendar.tsx # packages/@react-spectrum/calendar/src/CalendarCell.tsx # packages/@react-spectrum/calendar/src/RangeCalendar.tsx # packages/@react-spectrum/listbox/src/ListBoxBase.tsx # packages/@react-spectrum/table/src/TableViewBase.tsx # packages/@react-stately/tooltip/src/useTooltipTriggerState.ts # packages/react-aria-components/src/Menu.tsx # packages/react-aria-components/src/Table.tsx

rspbot · 2024-06-11T08:47:04Z

Build successful! 🎉

rspbot · 2024-06-13T00:30:41Z

Build successful! 🎉

rspbot · 2024-06-13T06:25:06Z

Build successful! 🎉

rspbot · 2024-06-13T06:31:45Z

Build successful! 🎉

…talled

rspbot · 2024-06-14T20:53:52Z

Build successful! 🎉

rspbot · 2024-06-14T20:57:15Z

Build successful! 🎉

rspbot · 2024-06-14T20:58:28Z

Build successful! 🎉

…react-19-prep

rspbot · 2024-06-14T21:35:33Z

Build successful! 🎉

rspbot · 2024-06-14T21:40:41Z

Build successful! 🎉

snowystinger · 2024-06-14T21:43:54Z

Rob-bot:

Verdaccio builds:
CRA Test App
NextJS Test App
RAC Tailwind Example
RAC Spectrum + Tailwind Example
CRA Test App Size
NextJS App Size
Publish stats
Size diff since last release
Docs
Storybook

rspbot · 2024-06-14T22:01:39Z

Build successful! 🎉

rspbot · 2024-06-17T20:29:41Z

Build successful! 🎉

devongovett · 2024-06-18T21:52:20Z

packages/@react-spectrum/card/test/CardView.test.js

-      expect(onLoadMore).toHaveBeenCalledTimes(1);
+      let isReact19 = parseInt(React.version, 10) >= 19;
+      if (isReact19 && layout !== GridLayout) {
+        expect(onLoadMore).toHaveBeenCalledTimes(2);


these loadmore checks have always been sensitive to any change, I've checked it in the browser and didn't notice an issue
I'll put in a todo to address it, though almost anything with an isOldReact or isReact19 check should be updated/looked into more at some point

packages/@react-spectrum/link/src/Link.tsx

packages/@react-spectrum/list/test/ListViewDnd.test.js

rspbot · 2024-06-18T23:40:08Z

Build successful! 🎉

rspbot · 2024-06-19T20:21:06Z

Build successful! 🎉

rspbot · 2024-06-19T20:21:07Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@react-aria/accordion

useAccordionItem

 useAccordionItem<T> {
   props: AccordionItemAriaProps<T>
   state: TreeState<T>
-  ref: RefObject<HTMLButtonElement>
+  ref: RefObject<HTMLButtonElement | null>
   returnVal: undefined
 }

useAccordion

 useAccordion<T> {
   props: AriaAccordionProps<T>
   state: TreeState<T>
-  ref: RefObject<HTMLDivElement>
+  ref: RefObject<HTMLDivElement | null>
   returnVal: undefined
 }

@react-aria/actiongroup

useActionGroup

 useActionGroup<T> {
   props: AriaActionGroupProps<T>
   state: ListState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useActionGroupItem

 useActionGroupItem<T> {
   props: AriaActionGroupItemProps
   state: ListState<T>
-  ref?: RefObject<FocusableElement>
+  ref?: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/autocomplete

AriaSearchAutocompleteOptions

 AriaSearchAutocompleteOptions<T> {
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   keyboardDelegate?: KeyboardDelegate
-  listBoxRef: RefObject<HTMLElement>
-  popoverRef: RefObject<HTMLDivElement>
+  listBoxRef: RefObject<HTMLElement | null>
+  popoverRef: RefObject<HTMLDivElement | null>
 }

it changed:

useSearchAutocomplete

@react-aria/breadcrumbs

useBreadcrumbItem

 useBreadcrumbItem {
   props: AriaBreadcrumbItemProps
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/calendar

useRangeCalendar

 useRangeCalendar<T extends DateValue> {
   props: AriaRangeCalendarProps<T>
   state: RangeCalendarState
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useCalendarCell

 useCalendarCell {
   props: AriaCalendarCellProps
   state: CalendarState | RangeCalendarState
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-aria/checkbox

useCheckbox

 useCheckbox {
   props: AriaCheckboxProps
   state: ToggleState
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

useCheckboxGroupItem

 useCheckboxGroupItem {
   props: AriaCheckboxGroupItemProps
   state: CheckboxGroupState
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

@react-aria/color

useColorWheel

 useColorWheel {
   props: AriaColorWheelOptions
   state: ColorWheelState
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

useColorField

 useColorField {
   props: AriaColorFieldProps
   state: ColorFieldState
-  ref: RefObject<HTMLInputElement>
+  ref: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

useColorChannelField

 useColorChannelField {
   props: AriaColorChannelFieldProps
   state: ColorChannelFieldState
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

AriaColorAreaOptions

 AriaColorAreaOptions {
-  containerRef: RefObject<Element>
-  inputXRef: RefObject<HTMLInputElement>
-  inputYRef: RefObject<HTMLInputElement>
+  containerRef: RefObject<Element | null>
+  inputXRef: RefObject<HTMLInputElement | null>
+  inputYRef: RefObject<HTMLInputElement | null>
 }

it changed:

useColorArea

AriaColorSliderOptions

 AriaColorSliderOptions {
-  inputRef: RefObject<HTMLInputElement>
-  trackRef: RefObject<Element>
+  inputRef: RefObject<HTMLInputElement | null>
+  trackRef: RefObject<Element | null>
 }

it changed:

useColorSlider

@react-aria/combobox

AriaComboBoxOptions

 AriaComboBoxOptions<T> {
-  buttonRef?: RefObject<Element>
-  inputRef: RefObject<HTMLInputElement>
+  buttonRef?: RefObject<Element | null>
+  inputRef: RefObject<HTMLInputElement | null>
   keyboardDelegate?: KeyboardDelegate
-  listBoxRef: RefObject<HTMLElement>
-  popoverRef: RefObject<Element>
+  listBoxRef: RefObject<HTMLElement | null>
+  popoverRef: RefObject<Element | null>
 }

it changed:

useComboBox

@react-aria/datepicker

useDatePicker

 useDatePicker<T extends DateValue> {
   props: AriaDatePickerProps<T>
   state: DatePickerState
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

useDateSegment

 useDateSegment {
   segment: DateSegment
   state: DateFieldState
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useDateField

changed by:

AriaDateFieldOptions

 useDateField<T extends DateValue> {
   props: AriaDateFieldOptions<T>
   state: DateFieldState
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

useTimeField

 useTimeField<T extends TimeValue> {
   props: AriaTimeFieldOptions<T>
   state: TimeFieldState
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

useDateRangePicker

 useDateRangePicker<T extends DateValue> {
   props: AriaDateRangePickerProps<T>
   state: DateRangePickerState
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

AriaDateFieldOptions

 AriaDateFieldOptions<T extends DateValue> {
-  inputRef?: RefObject<HTMLInputElement>
+  inputRef?: RefObject<HTMLInputElement | null>
 }

it changed:

useDateField

@react-aria/dialog

useDialog

 useDialog {
   props: AriaDialogProps
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/dnd

DragOptions

 DragOptions {
   getAllowedDropOperations?: () => Array<DropOperation>
   getItems: () => Array<DragItem>
   hasDragButton?: boolean
   isDisabled?: boolean
   onDragEnd?: (DragEndEvent) => void
   onDragMove?: (DragMoveEvent) => void
   onDragStart?: (DragStartEvent) => void
-  preview?: RefObject<DragPreviewRenderer>
+  preview?: RefObject<DragPreviewRenderer | null>
 }

it changed:

useDrag

DropOptions

 DropOptions {
   getDropOperation?: (IDragTypes, Array<DropOperation>) => DropOperation
   getDropOperationForPoint?: (IDragTypes, Array<DropOperation>, number, number) => DropOperation
   hasDropButton?: boolean
   isDisabled?: boolean
   onDrop?: (DropEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
 }

it changed:

useDrop

useDrop

changed by:

DropOptions

 useDroppableCollection {
   props: DroppableCollectionOptions
   state: DroppableCollectionState
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useDroppableCollection

 useDroppableItem {
   options: DroppableItemOptions
   state: DroppableCollectionState
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useDroppableItem

 useDropIndicator {
   props: DropIndicatorProps
   state: DroppableCollectionState
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useDraggableItem

 useDraggableCollection {
   props: DraggableCollectionOptions
   state: DraggableCollectionState
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

DragPreview

 ListDropTargetDelegate {
-  constructor: (Collection<Node<unknown>>, RefObject<HTMLElement>, ListDropTargetDelegateOptions) => void
+  constructor: (Collection<Node<unknown>>, RefObject<HTMLElement | null>, ListDropTargetDelegateOptions) => void
   getDropTargetFromPoint: (number, number, (DropTarget) => boolean) => DropTarget
 }

@react-aria/focus

createFocusManager

 createFocusManager {
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   defaultOptions: FocusManagerOptions
   returnVal: undefined
 }

useFocusable

 useFocusable {
   props: FocusableOptions
-  domRef: RefObject<FocusableElement>
+  domRef: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useHasTabbableChild

 useHasTabbableChild {
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   options?: AriaHasTabbableChildOptions
   returnVal: undefined
 }

@react-aria/form

useFormValidation

 useFormValidation<T> {
   props: FormValidationProps<T>
   state: FormValidationState
-  ref: RefObject<ValidatableElement> | undefined
+  ref: RefObject<ValidatableElement | null> | undefined
   returnVal: undefined
 }

@react-aria/grid

useGrid

changed by:

GridProps

 useGrid<T> {
   props: GridProps
   state: GridState<T, GridCollection<T>>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useGridRow

 useGridRow<C extends GridCollection<T>, S extends GridState<T, C>, T> {
   props: GridRowProps<T>
   state: S
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useGridCell

 useGridCell<C extends GridCollection<T>, T> {
   props: GridCellProps
   state: GridState<T, C>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

GridProps

 GridProps {
   focusMode?: 'row' | 'cell' = 'row'
   getRowText?: (Key) => string = (key) => state.collection.getItem(key)?.textValue
   isVirtualized?: boolean
   keyboardDelegate?: KeyboardDelegate
   onCellAction?: (Key) => void
   onRowAction?: (Key) => void
-  scrollRef?: RefObject<HTMLElement>
+  scrollRef?: RefObject<HTMLElement | null>
 }

it changed:

useGrid

GridKeyboardDelegateOptions

 GridKeyboardDelegateOptions<C, T> {
   collator?: Intl.Collator
   collection: C
   direction: Direction
   disabledBehavior?: DisabledBehavior
   disabledKeys: Set<Key>
   focusMode?: 'row' | 'cell'
   layout?: Layout<Node<T>>
-  ref?: RefObject<HTMLElement>
+  ref?: RefObject<HTMLElement | null>
 }

it changed:

GridKeyboardDelegate

@react-aria/gridlist

useGridList

 useGridList<T> {
   props: AriaGridListOptions<T>
   state: ListState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useGridListItem

 useGridListItem<T> {
   props: AriaGridListItemOptions
   state: ListState<T> | TreeState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/interactions

useScrollWheel

 useScrollWheel {
   props: ScrollWheelProps
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

InteractOutsideProps

 InteractOutsideProps {
   isDisabled?: boolean
   onInteractOutside?: (PointerEvent) => void
   onInteractOutsideStart?: (PointerEvent) => void
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
 }

it changed:

useInteractOutside

PressHookProps

 PressHookProps {
   allowTextSelectionOnPress?: boolean
   isDisabled?: boolean
   isPressed?: boolean
   preventFocusOnPress?: boolean
-  ref?: RefObject<Element>
+  ref?: RefObject<Element | null>
   shouldCancelOnPointerExit?: boolean
 }

it changed:

usePress

@react-aria/landmark

useLandmark

 useLandmark {
   props: AriaLandmarkProps
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/link

useLink

 useLink {
   props: AriaLinkOptions
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/listbox

useListBox

 useListBox<T> {
   props: AriaListBoxOptions<T>
   state: ListState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useOption

 useOption<T> {
   props: AriaOptionProps
   state: ListState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/menu

useMenuTrigger

 useMenuTrigger<T> {
   props: AriaMenuTriggerProps
   state: MenuTriggerState
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

useMenu

 useMenu<T> {
   props: AriaMenuOptions<T>
   state: TreeState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useMenuItem

 useMenuItem<T> {
   props: AriaMenuItemProps
   state: TreeState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useSubmenuTrigger

changed by:

AriaSubmenuTriggerProps

 useSubmenuTrigger<T> {
   props: AriaSubmenuTriggerProps
   state: SubmenuTriggerState
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

AriaSubmenuTriggerProps

 AriaSubmenuTriggerProps {
   delay?: number = 200
   isDisabled?: boolean
-  parentMenuRef: RefObject<HTMLElement>
-  submenuRef: RefObject<HTMLElement>
+  parentMenuRef: RefObject<HTMLElement | null>
+  submenuRef: RefObject<HTMLElement | null>
   type?: 'dialog' | 'menu'
 }

it changed:

useSubmenuTrigger

@react-aria/numberfield

useNumberField

 useNumberField {
   props: AriaNumberFieldProps
   state: NumberFieldState
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

@react-aria/overlays

useOverlay

 useOverlay {
   props: AriaOverlayProps
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

useOverlayTrigger

 useOverlayTrigger {
   props: OverlayTriggerProps
   state: OverlayTriggerState
-  ref?: RefObject<Element>
+  ref?: RefObject<Element | null>
   returnVal: undefined
 }

useModalOverlay

 useModalOverlay {
   props: AriaModalOverlayProps
   state: OverlayTriggerState
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

AriaPositionProps

 AriaPositionProps {
   arrowBoundaryOffset?: number = 0
   arrowSize?: number = 0
   boundaryElement?: Element = document.body
   maxHeight?: number
   onClose?: () => void
-  overlayRef: RefObject<Element>
-  scrollRef?: RefObject<Element> = overlayRef
+  overlayRef: RefObject<Element | null>
+  scrollRef?: RefObject<Element | null> = overlayRef
   shouldUpdatePosition?: boolean = true
-  targetRef: RefObject<Element>
+  targetRef: RefObject<Element | null>
 }

it changed:

useOverlayPosition

AriaPopoverProps

 AriaPopoverProps {
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
-  popoverRef: RefObject<Element>
+  popoverRef: RefObject<Element | null>
   shouldCloseOnInteractOutside?: (Element) => boolean
-  triggerRef: RefObject<Element>
+  triggerRef: RefObject<Element | null>
 }

it changed:

usePopover

@react-aria/radio

useRadio

 useRadio {
   props: AriaRadioProps
   state: RadioGroupState
-  ref: RefObject<HTMLInputElement>
+  ref: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

@react-aria/searchfield

useSearchField

 useSearchField {
   props: AriaSearchFieldProps
   state: SearchFieldState
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

@react-aria/select

useSelect

 useSelect<T> {
   props: AriaSelectOptions<T>
   state: SelectState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useHiddenSelect

 useHiddenSelect<T> {
   props: AriaHiddenSelectOptions
   state: SelectState<T>
-  triggerRef: RefObject<FocusableElement>
+  triggerRef: RefObject<FocusableElement | null>
   returnVal: undefined
 }

HiddenSelect

 HiddenSelect<T> {
   autoComplete?: string
   isDisabled?: boolean
   label?: ReactNode
   name?: string
   state: SelectState<T>
-  triggerRef: RefObject<FocusableElement>
+  triggerRef: RefObject<FocusableElement | null>
 }

HiddenSelectProps

 HiddenSelectProps<T> {
   autoComplete?: string
   isDisabled?: boolean
   label?: ReactNode
   name?: string
   state: SelectState<T>
-  triggerRef: RefObject<FocusableElement>
+  triggerRef: RefObject<FocusableElement | null>
 }

@react-aria/selection

AriaSelectableCollectionOptions

 AriaSelectableCollectionOptions {
   allowsTabNavigation?: boolean
   autoFocus?: boolean | FocusStrategy = false
   disallowEmptySelection?: boolean = false
   disallowSelectAll?: boolean = false
   disallowTypeAhead?: boolean = false
   isVirtualized?: boolean
   keyboardDelegate: KeyboardDelegate
   linkBehavior?: 'action' | 'selection' | 'override' = 'action'
-  ref: RefObject<HTMLElement>
-  scrollRef?: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
+  scrollRef?: RefObject<HTMLElement | null>
   selectOnFocus?: boolean = false
   selectionManager: MultipleSelectionManager
   shouldFocusWrap?: boolean = false
   shouldUseVirtualFocus?: boolean

it changed:

useSelectableCollection

SelectableItemOptions

 SelectableItemOptions {
   allowsDifferentPressOrigin?: boolean
   focus?: () => void
   isDisabled?: boolean
   isVirtualized?: boolean
   key: Key
   linkBehavior?: 'action' | 'selection' | 'override' | 'none' = 'action'
   onAction?: () => void
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   selectionManager: MultipleSelectionManager
   shouldSelectOnPressUp?: boolean
   shouldUseVirtualFocus?: boolean
 }

it changed:

useSelectableItem

@react-aria/slider

useSlider

 useSlider<T extends number | Array<number>> {
   props: AriaSliderProps<T>
   state: SliderState
-  trackRef: RefObject<Element>
+  trackRef: RefObject<Element | null>
   returnVal: undefined
 }

AriaSliderThumbOptions

 AriaSliderThumbOptions {
-  inputRef: RefObject<HTMLInputElement>
-  trackRef: RefObject<Element>
+  inputRef: RefObject<HTMLInputElement | null>
+  trackRef: RefObject<Element | null>
 }

it changed:

useSliderThumb

@react-aria/steplist

useStepList

 useStepList<T> {
   props: AriaStepListProps<T>
   state: StepListState<T>
-  ref: RefObject<HTMLOListElement>
+  ref: RefObject<HTMLOListElement | null>
   returnVal: undefined
 }

useStepListItem

 useStepListItem<T> {
   props: AriaStepListItemProps
   state: StepListState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-aria/switch

useSwitch

 useSwitch {
   props: AriaSwitchProps
   state: ToggleState
-  ref: RefObject<HTMLInputElement>
+  ref: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

@react-aria/table

useTable

 useTable<T> {
   props: AriaTableProps<T>
   state: TableState<T> | TreeGridState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useTableColumnHeader

 useTableColumnHeader<T> {
   props: AriaTableColumnHeaderProps<T>
   state: TableState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useTableRow

 useTableRow<T> {
   props: GridRowProps<T>
   state: TableState<T> | TreeGridState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useTableHeaderRow

 useTableHeaderRow<T> {
   props: GridRowProps<T>
   state: TableState<T>
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

useTableCell

 useTableCell<T> {
   props: AriaTableCellProps
   state: TableState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useTableColumnResize

changed by:

AriaTableColumnResizeProps

 useTableColumnResize<T> {
   props: AriaTableColumnResizeProps<T>
   state: TableColumnResizeState<T>
-  ref: RefObject<HTMLInputElement>
+  ref: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

AriaTableColumnResizeProps

 AriaTableColumnResizeProps<T> {
   aria-label: string
   column: GridNode<T>
   isDisabled?: boolean
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
-  triggerRef?: RefObject<FocusableElement>
+  triggerRef?: RefObject<FocusableElement | null>
 }

it changed:

useTableColumnResize

@react-aria/tabs

useTab

 useTab<T> {
   props: AriaTabProps
   state: TabListState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useTabPanel

 useTabPanel<T> {
   props: AriaTabPanelProps
   state: TabListState<T>
-  ref: RefObject<Element>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

useTabList

 useTabList<T> {
   props: AriaTabListOptions<T>
   state: TabListState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-aria/tag

useTag

 useTag<T> {
   props: AriaTagProps<T>
   state: ListState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useTagGroup

 useTagGroup<T> {
   props: AriaTagGroupOptions<T>
   state: ListState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-aria/textfield

useFormattedTextField

 useFormattedTextField {
   props: AriaTextFieldProps
   state: FormattedTextFieldState
-  inputRef: RefObject<HTMLInputElement>
+  inputRef: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

@react-aria/toast

useToast

 useToast<T> {
   props: AriaToastProps<T>
   state: ToastState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useToastRegion

 useToastRegion<T> {
   props: AriaToastRegionProps
   state: ToastState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-aria/toggle

useToggle

 useToggle {
   props: AriaToggleProps
   state: ToggleState
-  ref: RefObject<HTMLInputElement>
+  ref: RefObject<HTMLInputElement | null>
   returnVal: undefined
 }

@react-aria/toolbar

useToolbar

 useToolbar {
   props: AriaToolbarProps
-  ref: RefObject<HTMLDivElement>
+  ref: RefObject<HTMLDivElement | null>
   returnVal: undefined
 }

@react-aria/tooltip

useTooltipTrigger

 useTooltipTrigger {
   props: TooltipTriggerProps
   state: TooltipTriggerState
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/tree

useTreeGridList

 useTreeGridList<T> {
   props: AriaTreeGridListOptions<T>
   state: TreeState<T>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

useTreeGridListItem

 useTreeGridListItem<T> {
   props: AriaTreeGridListItemOptions
   state: TreeState<T>
-  ref: RefObject<FocusableElement>
+  ref: RefObject<FocusableElement | null>
   returnVal: undefined
 }

@react-aria/utils

useResizeObserver

 useSyncRef<T> {
   context?: ContextValue<T> | null
-  ref?: RefObject<T>
+  ref?: RefObject<T | null>
   returnVal: undefined
 }

useDescription

 useEvent<K extends keyof GlobalEventHandlersEventMap> {
-  ref: RefObject<EventTarget>
+  ref: RefObject<EventTarget | null>
   event: K | (string & {
   
 })
   handler?: (Document, GlobalEventHandlersEventMap[K]) => any
   returnVal: undefined
 }

useEvent

 useFormReset<T> {
-  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null>
   initialValue: T
   onReset: (T) => void
   returnVal: undefined
 }

@react-aria/virtualizer

VirtualizerItemOptions

 VirtualizerItemOptions {
   layoutInfo: LayoutInfo
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   virtualizer: IVirtualizer
 }

it changed:

useVirtualizerItem

useVirtualizer

 useVirtualizer<T extends {}, V extends ReactNode, W> {
   props: VirtualizerOptions
   state: VirtualizerState<T, V, W>
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-spectrum/dialog

useDialogContainer

 SpectrumDialogTriggerProps {
   children: [ReactElement, SpectrumDialogClose | ReactElement]
   hideArrow?: boolean
   isDismissable?: boolean
   isKeyboardDismissDisabled?: boolean
   mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover'
-  targetRef?: RefObject<HTMLElement>
+  targetRef?: RefObject<HTMLElement | null>
   type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover' = 'modal'
 }

@react-spectrum/icon

Icon

 Icon {
   aria-hidden?: boolean | 'false' | 'true'
   aria-label?: string
-  children: ReactElement
+  children: ReactElement<any>
   color?: IconColorValue
   size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL'
   slot?: string = 'icon'
 }

UIIcon

 UIIcon {
   aria-hidden?: boolean | 'false' | 'true'
-  children: ReactElement
+  children: ReactElement<any>
   slot?: string
 }

Illustration

 Illustration {
   aria-hidden?: boolean | 'false' | 'true'
   aria-label?: string
-  children: ReactElement
+  children: ReactElement<any>
   slot?: string = 'illustration'
 }

IconProps

 IconProps {
   aria-hidden?: boolean | 'false' | 'true'
   aria-label?: string
-  children: ReactElement
+  children: ReactElement<any>
   color?: IconColorValue
   size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL'
   slot?: string = 'icon'
 }

it changed:

IconPropsWithoutChildren

IllustrationProps

 IllustrationProps {
   aria-hidden?: boolean | 'false' | 'true'
   aria-label?: string
-  children: ReactElement
+  children: ReactElement<any>
   slot?: string = 'illustration'
 }

it changed:

IllustrationPropsWithoutChildren

UIIconProps

 UIIconProps {
   aria-hidden?: boolean | 'false' | 'true'
-  children: ReactElement
+  children: ReactElement<any>
   slot?: string
 }

it changed:

UIIconPropsWithoutChildren

@react-spectrum/menu

MenuTrigger

 SubmenuTrigger {
-  children: Array<ReactElement>
+  children: Array<ReactElement<any>>
   targetKey: Key
 }

SpectrumMenuProps

 SpectrumSubmenuTriggerProps {
-  children: Array<ReactElement>
+  children: Array<ReactElement<any>>
 }

@react-spectrum/textfield

TextArea

 TextFieldBase {
   descriptionProps?: HTMLAttributes<HTMLElement>
   disableFocusRing?: boolean
   errorMessageProps?: HTMLAttributes<HTMLElement>
   inputClassName?: string
   inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>
-  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>
+  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>
   isLoading?: boolean
   labelProps?: LabelHTMLAttributes<HTMLLabelElement>
   loadingIndicator?: ReactElement
   multiLine?: boolean
   wrapperChildren?: ReactElement | Array<ReactElement>
 }

@react-spectrum/utils

useMediaQuery

 createDOMRef<T extends HTMLElement = HTMLElement> {
-  ref: RefObject<T>
+  ref: RefObject<T | null>
   returnVal: undefined
 }

createDOMRef

 createFocusableRef<T extends HTMLElement = HTMLElement> {
-  domRef: RefObject<T>
-  focusableRef: RefObject<FocusableElement>
+  domRef: RefObject<T | null>
+  focusableRef: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useDOMRef

 useFocusableRef<T extends HTMLElement = HTMLElement> {
   ref: FocusableRef<T>
-  focusableRef?: RefObject<FocusableElement>
+  focusableRef?: RefObject<FocusableElement | null>
   returnVal: undefined
 }

useFocusableRef

 unwrapDOMRef<T extends HTMLElement> {
-  ref: RefObject<DOMRefValue<T>>
+  ref: RefObject<DOMRefValue<T> | null>
   returnVal: undefined
 }

unwrapDOMRef

 useUnwrapDOMRef<T extends HTMLElement> {
-  ref: RefObject<DOMRefValue<T>>
+  ref: RefObject<DOMRefValue<T> | null>
   returnVal: undefined
 }

ClearSlots

 useHasChild {
   query: string
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-stately/dnd

DraggableCollectionState

 DraggableCollectionState {
   collection: Collection<Node<unknown>>
   draggedKey: Key | null
   draggingKeys: Set<Key>
   endDrag: (DraggableCollectionEndEvent) => void
   getAllowedDropOperations?: () => Array<DropOperation>
   getItems: (Key) => Array<DragItem>
   getKeysForDrag: (Key) => Set<Key>
   isDisabled?: boolean
   isDragging: (Key) => boolean
   moveDrag: (DragMoveEvent) => void
-  preview?: RefObject<DragPreviewRenderer>
+  preview?: RefObject<DragPreviewRenderer | null>
   selectionManager: MultipleSelectionManager
   startDrag: (Key, DragStartEvent) => void
 }

it changed:

useDraggableCollectionState

snowystinger added 4 commits May 23, 2024 14:10

React 19 prep

df2b082

Fix tests and lint, need to investigate the isReact 19 tests

8762eb5

turn 19 tests back on

484c66d

Check react version to avoid warning

e32b0c2

snowystinger mentioned this pull request May 24, 2024

React 19 support #6445

Closed

snowystinger added 2 commits May 30, 2024 10:19

bump node version because 18.17 has a bug with pkg.json dependencies …

15382bf

…of "npm:"

Install 19 types

97c221e

snowystinger added 3 commits May 30, 2024 11:25

apply codemod

8e552d1

Apply fixes from TS and eps1lon PR

da2b6eb

Reset package json

f981fb3

snowystinger commented May 30, 2024

View reviewed changes

snowystinger mentioned this pull request May 30, 2024

Update react testing library #6467

Merged

5 tasks

amauryfischer mentioned this pull request Jun 11, 2024

[BUG] - Incompatibilities with newer Next.js canaries. nextui-org/nextui#3021

Closed

Merge branch 'main' into react-19-prep

533533d

Fix React 18 on 19's types

489fdaa

snowystinger added 5 commits June 13, 2024 16:51

default to react 19 development to avoid duplicate packages being ins…

9f669fe

…talled

fix a couple failures

af56ac7

fix test

d9f8a2b

fix storybook 18

885bb0c

Fix extract examples

bd3d13b

snowystinger added 3 commits June 15, 2024 07:07

work around react 19 giving us an unintentional undefined

e9d4cb8

Merge branch 'react-19-prep' of github.com:adobe/react-spectrum into …

f64e2ed

…react-19-prep

fix typescript

3710e8e

snowystinger marked this pull request as ready for review June 14, 2024 21:44

disable branch verdaccio now that it's all passing

fc11d33

devongovett changed the title ~~React 19 prep~~ React 19 support Jun 17, 2024

Merge branch 'main' into react-19-prep

8db6f7d

devongovett added the release label Jun 18, 2024

devongovett reviewed Jun 18, 2024

View reviewed changes

snowystinger added 3 commits June 19, 2024 08:15

Review updates

7b4cc72

Merge branch 'main' into react-19-prep

7fd4732

fix lint

9284d9f

devongovett approved these changes Jun 19, 2024

View reviewed changes

LFDanLu approved these changes Jun 19, 2024

View reviewed changes

Merge branch 'main' into react-19-prep

14dd64d

snowystinger merged commit 32a4360 into main Jun 19, 2024
28 checks passed

snowystinger deleted the react-19-prep branch June 19, 2024 21:29

SimenB mentioned this pull request Jun 20, 2024

Compatibility with React 19 types #6276

Closed

dannify removed the release label Aug 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 19 support #6437

React 19 support #6437

snowystinger commented May 23, 2024 •

edited

Loading

rspbot commented May 30, 2024

rspbot commented May 30, 2024

rspbot commented May 30, 2024

rspbot commented May 30, 2024

rspbot commented May 30, 2024

snowystinger May 30, 2024

rspbot commented Jun 11, 2024

rspbot commented Jun 13, 2024

rspbot commented Jun 13, 2024

rspbot commented Jun 13, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

snowystinger commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 17, 2024

devongovett Jun 18, 2024

snowystinger Jun 18, 2024

rspbot commented Jun 18, 2024

rspbot commented Jun 19, 2024

rspbot commented Jun 19, 2024

React 19 support #6437

React 19 support #6437

Conversation

snowystinger commented May 23, 2024 • edited Loading

Unresolved issues

rspbot commented May 30, 2024

rspbot commented May 30, 2024

rspbot commented May 30, 2024

rspbot commented May 30, 2024

rspbot commented May 30, 2024

snowystinger May 30, 2024

Choose a reason for hiding this comment

rspbot commented Jun 11, 2024

rspbot commented Jun 13, 2024

rspbot commented Jun 13, 2024

rspbot commented Jun 13, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 14, 2024

snowystinger commented Jun 14, 2024

rspbot commented Jun 14, 2024

rspbot commented Jun 17, 2024

devongovett Jun 18, 2024

Choose a reason for hiding this comment

snowystinger Jun 18, 2024

Choose a reason for hiding this comment

rspbot commented Jun 18, 2024

rspbot commented Jun 19, 2024

rspbot commented Jun 19, 2024

@react-aria/accordion

useAccordionItem

useAccordion

@react-aria/actiongroup

useActionGroup

useActionGroupItem

@react-aria/autocomplete

AriaSearchAutocompleteOptions

@react-aria/breadcrumbs

useBreadcrumbItem

@react-aria/calendar

useRangeCalendar

useCalendarCell

@react-aria/checkbox

useCheckbox

useCheckboxGroupItem

@react-aria/color

useColorWheel

useColorField

useColorChannelField

AriaColorAreaOptions

AriaColorSliderOptions

@react-aria/combobox

AriaComboBoxOptions

@react-aria/datepicker

useDatePicker

useDateSegment

useDateField

useTimeField

useDateRangePicker

AriaDateFieldOptions

@react-aria/dialog

useDialog

@react-aria/dnd

DragOptions

DropOptions

useDrop

useDroppableCollection

useDroppableItem

useDraggableItem

DragPreview

@react-aria/focus

createFocusManager

useFocusable

useHasTabbableChild

@react-aria/form

useFormValidation

@react-aria/grid

useGrid

snowystinger commented May 23, 2024 •

edited

Loading