React 19 support

.circleci/comment.js

@@ -76,7 +76,7 @@ async function run() {
         body: `Build successful! 🎉
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
-  * [View the storybook-canary](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-canary/index.html)
+  * [View the storybook-19](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-19/index.html)
   * [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html)
   * [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html)
   * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`

.circleci/config.yml

@@ -19,30 +19,30 @@ orbs:
 executors:
   rsp:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     resource_class: large
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge-nodeupdate:
     docker:
-      - image: cimg/node:18.17.1
+      - image: cimg/node:18.20.3
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
@@ -121,7 +121,7 @@ jobs:
             - ~/react-spectrum
           key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
-  install-canary:
+  install-19:
     executor: rsp-large
     steps:
       - checkout
@@ -134,12 +134,12 @@ jobs:
       - run:
           name: build
           command: |
-            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-canary --cache-folder ~/.cache/yarn
+            yarn install --pure-lockfile --cache-folder ~/.cache/yarn && yarn install-19 --cache-folder ~/.cache/yarn
 
       - save_cache:
           paths:
             - ~/react-spectrum
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
   test-ssr:
     executor: rsp-xlarge
@@ -199,11 +199,11 @@ jobs:
           command: |
             yarn test:ssr
 
-  test-ssr-canary:
+  test-ssr-19:
     executor: rsp-xlarge
     steps:
       - restore_cache:
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
           name: test ssr
@@ -258,12 +258,12 @@ jobs:
       - store_artifacts:
           path: ~/junit
 
-  test-canary:
+  test-19:
     parallelism: 3
     executor: rsp-xlarge
     steps:
       - restore_cache:
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run: mkdir ~/junit
 
@@ -272,10 +272,10 @@ jobs:
           command: |
             shopt -s globstar
             TESTFILES=$(circleci tests glob "packages/**/*.test.[tj]{s,sx}" | circleci tests split --split-by=timings)
-            JEST_JUNIT_OUTPUT_NAME="junit-canary.xml" yarn test ${TESTFILES}
+            JEST_JUNIT_OUTPUT_NAME="junit-19.xml" yarn test ${TESTFILES}
 
       - run:
-          command: cp junit-canary.xml ~/junit/
+          command: cp junit-19.xml ~/junit/
           when: always
       - store_test_results:
           path: ~/junit
@@ -412,20 +412,20 @@ jobs:
           paths:
             - '*/storybook-17/'
 
-  storybook-canary:
+  storybook-19:
     executor: rsp-large
     steps:
       - restore_cache:
-          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
-          name: build storybook-canary
-          command: make storybook-canary
+          name: build storybook-19
+          command: make storybook-19
 
       - persist_to_workspace:
           root: dist
           paths:
-            - '*/storybook-canary/'
+            - '*/storybook-19/'
 
   docs:
     executor: rsp-xlarge
@@ -547,7 +547,7 @@ workflows:
       - install
       - install-16
       - install-17
-      - install-canary
+      - install-19
       - test-ssr:
           requires:
             - install
@@ -566,6 +566,12 @@ workflows:
       - test-17:
           requires:
             - install-17
+      - test-19:
+          requires:
+            - install-19
+      - test-ssr-19:
+          requires:
+            - install-19
       - test-esm:
           requires:
             - install
@@ -603,16 +609,13 @@ workflows:
       - storybook-17:
           requires:
             - install-17
-      - storybook-canary:
+      - storybook-19:
           requires:
-            - install-canary
+            - install-19
       - docs:
           requires:
             - install
       - docs-verdaccio:
-          filters:
-            branches:
-              only: main
           requires:
             - install
       - deploy:
@@ -628,7 +631,7 @@ workflows:
             - storybook
             - storybook-16
             - storybook-17
-            - storybook-canary
+            - storybook-19
             - docs
       - deploy-verdaccio:
           requires:

Makefile

@@ -81,8 +81,8 @@ storybook-16:
 storybook-17:
 	yarn build:storybook-17
 
-storybook-canary:
-	yarn build:storybook-canary
+storybook-19:
+	yarn build:storybook-19
 
 # for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
 ci:

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",
     "start": "cross-env NODE_ENV=storybook storybook dev -p 9003 --ci -c '.storybook'",
     "build:storybook": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook",
     "build:storybook-16": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16",
     "build:storybook-17": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
-    "build:storybook-canary": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-canary",
+    "build:storybook-19": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-19",
     "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "CHROMATIC=1 storybook build -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
     "start:chromatic-fc": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9005 --ci -c '.chromatic-fc'",

packages/@adobe/react-spectrum/package.json

@@ -101,7 +101,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   }
 }

packages/@react-aria/accordion/package.json

@@ -31,8 +31,8 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/accordion/src/useAccordion.ts

@@ -34,7 +34,7 @@ export interface AccordionItemAria {
   regionProps: DOMAttributes
 }
 
-export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: TreeState<T>, ref: RefObject<HTMLButtonElement>): AccordionItemAria {
+export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: TreeState<T>, ref: RefObject<HTMLButtonElement | null>): AccordionItemAria {
   let {item} = props;
   let buttonId = useId();
   let regionId = useId();
@@ -65,7 +65,7 @@ export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: Tre
   };
 }
 
-export function useAccordion<T>(props: AriaAccordionProps<T>, state: TreeState<T>, ref: RefObject<HTMLDivElement>): AccordionAria {
+export function useAccordion<T>(props: AriaAccordionProps<T>, state: TreeState<T>, ref: RefObject<HTMLDivElement | null>): AccordionAria {
   let {listProps} = useSelectableList({
     ...props,
     ...state,

packages/@react-aria/actiongroup/package.json

@@ -32,8 +32,8 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/actiongroup/src/useActionGroup.ts

@@ -28,7 +28,7 @@ export interface ActionGroupAria {
   actionGroupProps: DOMAttributes
 }
 
-export function useActionGroup<T>(props: AriaActionGroupProps<T>, state: ListState<T>, ref: RefObject<FocusableElement>): ActionGroupAria {
+export function useActionGroup<T>(props: AriaActionGroupProps<T>, state: ListState<T>, ref: RefObject<FocusableElement | null>): ActionGroupAria {
   let {
     isDisabled,
     orientation = 'horizontal' as Orientation

packages/@react-aria/actiongroup/src/useActionGroupItem.ts

@@ -31,7 +31,7 @@ const BUTTON_ROLES = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function useActionGroupItem<T>(props: AriaActionGroupItemProps, state: ListState<T>, ref?: RefObject<FocusableElement>): ActionGroupItemAria {
+export function useActionGroupItem<T>(props: AriaActionGroupItemProps, state: ListState<T>, ref?: RefObject<FocusableElement | null>): ActionGroupItemAria {
   let selectionMode = state.selectionManager.selectionMode;
   let buttonProps = {
     role: BUTTON_ROLES[selectionMode]

packages/@react-aria/aria-modal-polyfill/package.json

@@ -26,7 +26,7 @@
     "aria-hidden": "^1.2.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/autocomplete/package.json

@@ -33,8 +33,8 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -37,11 +37,11 @@ export interface SearchAutocompleteAria<T> extends ValidationResult {
 
 export interface AriaSearchAutocompleteOptions<T> extends AriaSearchAutocompleteProps<T> {
   /** The ref for the input element. */
-  inputRef: RefObject<HTMLInputElement>,
+  inputRef: RefObject<HTMLInputElement | null>,
   /** The ref for the list box popover. */
-  popoverRef: RefObject<HTMLDivElement>,
+  popoverRef: RefObject<HTMLDivElement | null>,
   /** The ref for the list box. */
-  listBoxRef: RefObject<HTMLElement>,
+  listBoxRef: RefObject<HTMLElement | null>,
   /** An optional keyboard delegate implementation, to override the default. */
   keyboardDelegate?: KeyboardDelegate
 }

packages/@react-aria/breadcrumbs/package.json

@@ -30,7 +30,7 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts

@@ -24,7 +24,7 @@ export interface BreadcrumbItemAria {
  * Provides the behavior and accessibility implementation for an in a breadcrumbs component.
  * See `useBreadcrumbs` for details about breadcrumbs.
  */
-export function useBreadcrumbItem(props: AriaBreadcrumbItemProps, ref: RefObject<FocusableElement>): BreadcrumbItemAria {
+export function useBreadcrumbItem(props: AriaBreadcrumbItemProps, ref: RefObject<FocusableElement | null>): BreadcrumbItemAria {
   let {
     isCurrent,
     isDisabled,

packages/@react-aria/button/package.json

@@ -31,7 +31,7 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/button/src/useButton.ts

@@ -34,12 +34,12 @@ export interface ButtonAria<T> {
 }
 
 // Order with overrides is important: 'button' should be default
-export function useButton(props: AriaButtonOptions<'button'>, ref: RefObject<HTMLButtonElement>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
-export function useButton(props: AriaButtonOptions<'a'>, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
-export function useButton(props: AriaButtonOptions<'div'>, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
-export function useButton(props: AriaButtonOptions<'input'>, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
-export function useButton(props: AriaButtonOptions<'span'>, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
-export function useButton(props: AriaButtonOptions<ElementType>, ref: RefObject<Element>): ButtonAria<DOMAttributes>;
+export function useButton(props: AriaButtonOptions<'button'>, ref: RefObject<HTMLButtonElement | null>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
+export function useButton(props: AriaButtonOptions<'a'>, ref: RefObject<HTMLAnchorElement | null>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export function useButton(props: AriaButtonOptions<'div'>, ref: RefObject<HTMLDivElement | null>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
+export function useButton(props: AriaButtonOptions<'input'>, ref: RefObject<HTMLInputElement | null>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
+export function useButton(props: AriaButtonOptions<'span'>, ref: RefObject<HTMLSpanElement | null>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
+export function useButton(props: AriaButtonOptions<ElementType>, ref: RefObject<Element | null>): ButtonAria<DOMAttributes>;
 /**
  * Provides the behavior and accessibility implementation for a button component. Handles mouse, keyboard, and touch interactions,
  * focus behavior, and ARIA props for both native button elements and custom element types.

packages/@react-aria/button/src/useToggleButton.ts

@@ -27,12 +27,12 @@ import {ToggleState} from '@react-stately/toggle';
 export interface AriaToggleButtonOptions<E extends ElementType> extends Omit<AriaToggleButtonProps<E>, 'children'> {}
 
 // Order with overrides is important: 'button' should be default
-export function useToggleButton(props: AriaToggleButtonOptions<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
-export function useToggleButton(props: AriaToggleButtonOptions<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
-export function useToggleButton(props: AriaToggleButtonOptions<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
-export function useToggleButton(props: AriaToggleButtonOptions<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
-export function useToggleButton(props: AriaToggleButtonOptions<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
-export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<Element>): ButtonAria<DOMAttributes>;
+export function useToggleButton(props: AriaToggleButtonOptions<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement | null>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
+export function useToggleButton(props: AriaToggleButtonOptions<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement | null>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export function useToggleButton(props: AriaToggleButtonOptions<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement | null>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
+export function useToggleButton(props: AriaToggleButtonOptions<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement | null>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
+export function useToggleButton(props: AriaToggleButtonOptions<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement | null>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
+export function useToggleButton(props: AriaToggleButtonOptions<ElementType>, state: ToggleState, ref: RefObject<Element | null>): ButtonAria<DOMAttributes>;
 /**
  * Provides the behavior and accessibility implementation for a toggle button component.
  * ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.

packages/@react-aria/calendar/package.json

@@ -34,8 +34,8 @@
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/@react-aria/calendar/src/useCalendarCell.ts

@@ -72,7 +72,7 @@ export interface CalendarCellAria {
  * Provides the behavior and accessibility implementation for a calendar cell component.
  * A calendar cell displays a date cell within a calendar grid which can be selected by the user.
  */
-export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement>): CalendarCellAria {
+export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement | null>): CalendarCellAria {
   let {date, isDisabled} = props;
   let {errorMessageId, selectedDateDescription} = hookData.get(state);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar');