chore(react): add react 19 support

aws-amplify · Dec 17, 2024 · b860b9e · b860b9e
1 parent 09d7d54
commit b860b9e
Show file tree

Hide file tree

Showing 278 changed files with 701 additions and 812 deletions.
diff --git a/.changeset/old-suits-brush.md b/.changeset/old-suits-brush.md
@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react-core": patch
+"@aws-amplify/ui-react": patch
+---
+
+chore(react): update react & react-dom types pre-react 19
diff --git a/build-system-tests/templates/components/react-native/cli/App.tsx b/build-system-tests/templates/components/react-native/cli/App.tsx
@@ -23,7 +23,7 @@ function SignOutButton() {
   return <Button title="Sign Out" onPress={signOut} />;
 }
 
-function App(): JSX.Element {
+function App(): React.JSX.Element {
   return (
     <>
       <Authenticator.Provider>

diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next", "next/core-web-vitals"],
   "rules": {
     "react-hooks/exhaustive-deps": "error" // override next eslint default
   }

diff --git a/docs/__tests__/__snapshots__/props-table.test.ts.snap b/docs/__tests__/__snapshots__/props-table.test.ts.snap
@@ -2970,7 +2970,7 @@ exports[`Props Table 1`] = `
                     },
                     "children": {
                         "name": "children",
-                        "type": "(item: Item, index: number) => JSX.Element",
+                        "type": "(item: Item, index: number) => React.JSX.Element",
                         "description": "The component to be repeated\\nSame interface as Array.prototype.map",
                         "category": "CollectionChildren",
                         "isOptional": false

diff --git a/docs/package.json b/docs/package.json
@@ -20,7 +20,8 @@
     "postbuild:sitemap": "node --require esbuild-register ./scripts/generate-sitemap-robotstxt.ts",
     "start": "next start",
     "test": "jest",
-    "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
+    "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@aws-amplify/ui-react": "6.7.2",

diff --git a/docs/src/components/ExpoSnack.tsx b/docs/src/components/ExpoSnack.tsx
@@ -65,7 +65,7 @@ export const ExpoSnack = (options: SnackOptions) => {
   // We need a unique ID b/c we need to listen to window events that the iframe
   // will send and it sends the iframe id
   const id = React.useRef(Math.random().toString(36).substring(2, 10));
-  const ref = React.useRef<HTMLIFrameElement>();
+  const ref = React.useRef<HTMLIFrameElement>(undefined);
   const [theme, setTheme] = React.useState('light');
 
   React.useLayoutEffect(() => {

diff --git a/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx b/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx
@@ -12,7 +12,7 @@ interface DesktopNavProps {
   navLinksContainerRef: MutableRefObject<HTMLDivElement>;
   navLinksRightRef: MutableRefObject<HTMLDivElement>;
   hasSecondaryNav: boolean;
-  secondaryNavDesktop?: JSX.Element;
+  secondaryNavDesktop?: React.JSX.Element;
 }
 
 export function DesktopNav({

diff --git a/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx b/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx
@@ -15,7 +15,7 @@ export function NavMenuLink({
   setShowGlobalNav?: Dispatch<SetStateAction<boolean>>;
 }) {
   const label: string = navMenuItem.label;
-  const linkContent: JSX.Element =
+  const linkContent: React.JSX.Element =
     navMenuItem.type === 'EXTERNAL' ? (
       <ExternalLink>{label}</ExternalLink>
     ) : (

diff --git a/docs/src/components/propsTable/PropsTableBody.tsx b/docs/src/components/propsTable/PropsTableBody.tsx
@@ -7,7 +7,7 @@ import { Property } from '../../../scripts/types/catalog';
 export const PropsTableBody = ([
   propName,
   { name, type, description, isOptional },
-]: [string, Property]): JSX.Element => {
+]: [string, Property]): React.JSX.Element => {
   return (
     <TableRow key={name}>
       <ResponsiveTableCell label="Name">

diff --git a/docs/src/components/propsTable/PropsTableExpander.tsx b/docs/src/components/propsTable/PropsTableExpander.tsx
@@ -10,7 +10,9 @@ export function PropsTableExpander({
 }: {
   propsSortedByCategory: SortedPropertiesByCategory;
 }) {
-  const expanderItem = (categoryProperty: CategoryProperty): JSX.Element => {
+  const expanderItem = (
+    categoryProperty: CategoryProperty
+  ): React.JSX.Element => {
     const title = Object.keys(categoryProperty)[0];
     return (
       <Accordion.Item key={title} value={title}>

diff --git a/docs/src/pages/404.page.tsx b/docs/src/pages/404.page.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import {
   Heading,
   Text,

diff --git a/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx b/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx
@@ -19,7 +19,7 @@ export interface AlertPropControlsProps extends AlertProps {
 }
 
 interface AlertPropControlsInterface {
-  (props: AlertPropControlsProps): JSX.Element;
+  (props: AlertPropControlsProps): React.JSX.Element;
 }
 
 export const AlertPropControls: AlertPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx b/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx
@@ -28,7 +28,7 @@ export interface AutocompletePropControlsProps extends AutocompleteProps {
 }
 
 interface AutocompletePropControlsInterface {
-  (props: AutocompletePropControlsProps): JSX.Element;
+  (props: AutocompletePropControlsProps): React.JSX.Element;
 }
 
 export const AutocompletePropControls: AutocompletePropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx b/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx
@@ -16,7 +16,7 @@ export interface AvatarPropControlsProps extends AvatarProps {
 }
 
 interface AvatarPropControlsInterface {
-  (props: AvatarPropControlsProps): JSX.Element;
+  (props: AvatarPropControlsProps): React.JSX.Element;
 }
 
 export const AvatarPropControls: AvatarPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx b/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx
@@ -14,7 +14,7 @@ export interface BadgePropControlsProps extends BadgeProps {
 }
 
 interface BadgePropControlsInterface {
-  (props: BadgePropControlsProps): JSX.Element;
+  (props: BadgePropControlsProps): React.JSX.Element;
 }
 
 export const BadgePropControls: BadgePropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx b/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx
@@ -26,7 +26,7 @@ export interface CheckboxFieldPropControlsProps extends CheckboxFieldProps {
 }
 
 interface CheckboxFieldPropControlsInterface {
-  (props: CheckboxFieldPropControlsProps): JSX.Element;
+  (props: CheckboxFieldPropControlsProps): React.JSX.Element;
 }
 
 export const CheckboxFieldPropControls: CheckboxFieldPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx b/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx
@@ -18,7 +18,7 @@ export type CollectionPropControlsProps = Omit<
   };
 
 interface CollectionPropControlsInterface {
-  (props: CollectionPropControlsProps): JSX.Element;
+  (props: CollectionPropControlsProps): React.JSX.Element;
 }
 
 export const CollectionPropControls: CollectionPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx b/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx
@@ -15,7 +15,7 @@ export interface DividerPropControlsProps extends DividerOptions {
 }
 
 interface DividerPropControlsInterface {
-  (props: DividerPropControlsProps): JSX.Element;
+  (props: DividerPropControlsProps): React.JSX.Element;
 }
 
 export const DividerPropControls: DividerPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx b/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
@@ -25,7 +25,7 @@ export interface FieldsetPropControlsProps extends FieldsetProps {
 }
 
 interface FieldsetPropControlsInterface {
-  (props: FieldsetPropControlsProps): JSX.Element;
+  (props: FieldsetPropControlsProps): React.JSX.Element;
 }
 
 export const FieldsetPropControls: FieldsetPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx b/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx
@@ -15,7 +15,7 @@ export interface FlexPropControlsProps extends FlexProps {
 }
 
 interface FlexPropControlsInterface {
-  (props: FlexPropControlsProps): JSX.Element;
+  (props: FlexPropControlsProps): React.JSX.Element;
 }
 
 export const FlexPropControls: FlexPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx b/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx
@@ -22,7 +22,7 @@ export interface GridContainerPropControlsProps
 }
 
 interface GridContainerPropControls {
-  (props: GridContainerPropControlsProps): JSX.Element;
+  (props: GridContainerPropControlsProps): React.JSX.Element;
 }
 
 export const GridContainerPropControls: GridContainerPropControls = ({

diff --git a/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx b/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx
@@ -21,7 +21,7 @@ export interface GridItemPropControlsProps extends GridItemStyleProps {
 }
 
 interface GridItemPropControls {
-  (props: GridItemPropControlsProps): JSX.Element;
+  (props: GridItemPropControlsProps): React.JSX.Element;
 }
 
 export const GridItemPropControls: GridItemPropControls = ({

diff --git a/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx b/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx
@@ -16,7 +16,7 @@ interface HeadingPropControlsProps extends HeadingProps {
 }
 
 interface HeadingPropControlsInterface {
-  (props: HeadingPropControlsProps): JSX.Element;
+  (props: HeadingPropControlsProps): React.JSX.Element;
 }
 
 export const HeadingPropControls: HeadingPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx b/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx
@@ -9,7 +9,7 @@ export interface HighlightMatchPropControlsProps extends HighlightMatchProps {
 }
 
 interface HighlightMatchPropControlsInterface {
-  (props: HighlightMatchPropControlsProps): JSX.Element;
+  (props: HighlightMatchPropControlsProps): React.JSX.Element;
 }
 
 export const HighlightMatchPropControls: HighlightMatchPropControlsInterface =

diff --git a/docs/src/pages/[platform]/components/icon/IconPropControls.tsx b/docs/src/pages/[platform]/components/icon/IconPropControls.tsx
@@ -11,7 +11,7 @@ export interface IconPropControlsProps extends IconProps {
 }
 
 interface IconPropControlsInterface {
-  (props: IconPropControlsProps): JSX.Element;
+  (props: IconPropControlsProps): React.JSX.Element;
 }
 
 export const IconPropControls: IconPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/image/ImagePropControls.tsx b/docs/src/pages/[platform]/components/image/ImagePropControls.tsx
@@ -28,7 +28,7 @@ export interface ImagePropControlsProps extends ImageOptions {
 }
 
 interface ImagePropControlsInterface {
-  (props: ImagePropControlsProps): JSX.Element;
+  (props: ImagePropControlsProps): React.JSX.Element;
 }
 
 export const ImagePropControls: ImagePropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/input/InputPropControls.tsx b/docs/src/pages/[platform]/components/input/InputPropControls.tsx
@@ -20,7 +20,7 @@ export interface InputPropControlsProps extends InputProps {
 }
 
 interface InputPropControlsInterface {
-  (props: InputPropControlsProps): JSX.Element;
+  (props: InputPropControlsProps): React.JSX.Element;
 }
 
 export const InputPropControls: InputPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/link/LinkPropControls.tsx b/docs/src/pages/[platform]/components/link/LinkPropControls.tsx
@@ -17,7 +17,7 @@ export interface LinkPropControlsProps extends LinkProps {
 }
 
 interface LinkPropControlsInterface {
-  (props: LinkPropControlsProps): JSX.Element;
+  (props: LinkPropControlsProps): React.JSX.Element;
 }
 
 export const LinkPropControls: LinkPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx b/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx
@@ -7,7 +7,7 @@ export interface MenuPropControlsProps extends MenuProps {
 }
 
 interface MenuPropControlsInterface {
-  (props: MenuPropControlsProps): JSX.Element;
+  (props: MenuPropControlsProps): React.JSX.Element;
 }
 
 export const MenuPropControls: MenuPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/message/MessagePropControls.tsx b/docs/src/pages/[platform]/components/message/MessagePropControls.tsx
@@ -24,7 +24,7 @@ export interface MessagePropControlsProps extends MessageProps {
 }
 
 interface MessagePropControlsInterface {
-  (props: MessagePropControlsProps): JSX.Element;
+  (props: MessagePropControlsProps): React.JSX.Element;
 }
 
 export const MessagePropControls: MessagePropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx b/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx
@@ -24,7 +24,7 @@ export interface PaginationPropControlsProps extends PaginationProps {
 }
 
 interface PaginationPropControlsInterface {
-  (props: PaginationPropControlsProps): JSX.Element;
+  (props: PaginationPropControlsProps): React.JSX.Element;
 }
 
 export const PaginationPropControls: PaginationPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx b/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx
@@ -50,7 +50,7 @@ export interface PasswordFieldControlsProps extends PasswordFieldProps {
 }
 
 interface PasswordFieldPropControlsInterface {
-  (props: PasswordFieldControlsProps): JSX.Element;
+  (props: PasswordFieldControlsProps): React.JSX.Element;
 }
 
 export const PasswordFieldPropControls: PasswordFieldPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx b/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx
@@ -45,7 +45,7 @@ export type PhoneNumberFieldPropControlsProps = PhoneNumberFieldProps & {
 };
 
 interface PhoneNumberFieldPropControlsInterface {
-  (props: PhoneNumberFieldPropControlsProps): JSX.Element;
+  (props: PhoneNumberFieldPropControlsProps): React.JSX.Element;
 }
 
 export const PhoneNumberFieldPropControls: PhoneNumberFieldPropControlsInterface =

diff --git a/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx b/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx
@@ -27,7 +27,7 @@ export interface RadioGroupFieldPropControlsProps extends RadioGroupFieldProps {
 }
 
 interface RadioGroupFieldPropControlsInterface {
-  (props: RadioGroupFieldPropControlsProps): JSX.Element;
+  (props: RadioGroupFieldPropControlsProps): React.JSX.Element;
 }
 
 export const RadioGroupFieldPropControls: RadioGroupFieldPropControlsInterface =

diff --git a/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx b/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx
@@ -17,7 +17,7 @@ export interface RatingPropControlsProps extends RatingProps {
 }
 
 interface RatingPropControlsInterface {
-  (props: RatingPropControlsProps): JSX.Element;
+  (props: RatingPropControlsProps): React.JSX.Element;
 }
 
 export const RatingPropControls: RatingPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx b/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx
@@ -31,7 +31,7 @@ export interface SearchFieldPropControlsProps extends SearchFieldProps {
 }
 
 interface SearchFieldPropControlsInterface {
-  (props: SearchFieldPropControlsProps): JSX.Element;
+  (props: SearchFieldPropControlsProps): React.JSX.Element;
 }
 
 export const SearchFieldPropControls: SearchFieldPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
@@ -38,7 +38,7 @@ export interface SelectFieldPropControlsProps extends SelectFieldProps {
 }
 
 interface SelectFieldPropControlsInterface {
-  (props: SelectFieldPropControlsProps): JSX.Element;
+  (props: SelectFieldPropControlsProps): React.JSX.Element;
 }
 
 export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/shared/StylePropControls.tsx b/docs/src/pages/[platform]/components/shared/StylePropControls.tsx
@@ -33,7 +33,7 @@ export interface StylePropControlsProps extends BaseStyleProps {
 }
 
 interface StylePropControlsInterface {
-  (props: StylePropControlsProps): JSX.Element;
+  (props: StylePropControlsProps): React.JSX.Element;
 }
 
 export const StylePropControls: StylePropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx b/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx
@@ -43,7 +43,7 @@ export interface SliderFieldPropControlsProps extends SliderFieldProps {
 }
 
 interface SliderFieldPropControlsInterface {
-  (props: SliderFieldPropControlsProps): JSX.Element;
+  (props: SliderFieldPropControlsProps): React.JSX.Element;
 }
 
 export const SliderFieldPropControls: SliderFieldPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx b/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx
@@ -32,7 +32,7 @@ export interface SwitchPropControlsProps extends SwitchFieldProps {
 }
 
 interface SwitchPropControlsInterface {
-  (props: SwitchPropControlsProps): JSX.Element;
+  (props: SwitchPropControlsProps): React.JSX.Element;
 }
 
 export const SwitchPropControls: SwitchPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/table/TablePropControls.tsx b/docs/src/pages/[platform]/components/table/TablePropControls.tsx
@@ -18,7 +18,7 @@ export interface TablePropControlsProps extends TableProps {
 }
 
 interface TablePropControlsInterface {
-  (props: TablePropControlsProps): JSX.Element;
+  (props: TablePropControlsProps): React.JSX.Element;
 }
 
 export const TablePropControls: TablePropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx b/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx
@@ -12,7 +12,7 @@ export interface TabsPropControlsProps extends TabsProps {
 }
 
 interface TabsPropControlsInterface {
-  (props: TabsPropControlsProps): JSX.Element;
+  (props: TabsPropControlsProps): React.JSX.Element;
 }
 
 export const TabsPropControls: TabsPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/text/TextPropControls.tsx b/docs/src/pages/[platform]/components/text/TextPropControls.tsx
@@ -29,7 +29,7 @@ export interface TextPropControlsProps extends TextProps {
 }
 
 interface TextPropControlsInterface {
-  (props: TextPropControlsProps): JSX.Element;
+  (props: TextPropControlsProps): React.JSX.Element;
 }
 
 export const TextPropControls: TextPropControlsInterface = ({

diff --git a/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx b/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx
@@ -47,7 +47,7 @@ export interface TextAreaFieldControlsProps extends BaseTextAreaFieldProps {
 }
 
 interface TextAreaFieldControlsInterface {
-  (props: TextAreaFieldControlsProps): JSX.Element;
+  (props: TextAreaFieldControlsProps): React.JSX.Element;
 }
 
 export const TextAreaFieldPropControls: TextAreaFieldControlsInterface = ({