chore(react): add support for react 19

.changeset/old-suits-brush.md

@@ -0,0 +1,13 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui-react-ai": patch
+"@aws-amplify/ui-react-core": patch
+"@aws-amplify/ui-react-core-notifications": patch
+"@aws-amplify/ui-react-geo": patch
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui-react-native": patch
+"@aws-amplify/ui-react-notifications": patch
+"@aws-amplify/ui-react-storage": patch
+---
+
+chore(react): add support for React 19

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>

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
   }

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
@@ -7712,10 +7712,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "placeholder": {
-                        "name": "placeholder",
-                        "type": "string | undefined",
-                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
+                    "enterKeyHint": {
+                        "name": "enterKeyHint",
+                        "type": "EnterKeyHint | undefined",
+                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -7747,6 +7747,13 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
+                    "name": {
+                        "name": "name",
+                        "type": "string | undefined",
+                        "description": "Name of the field. Submitted with the form as part of a name/value pair.",
+                        "category": "BaseInputProps",
+                        "isOptional": true
+                    },
                     "autoComplete": {
                         "name": "autoComplete",
                         "type": "string | undefined",
@@ -7768,13 +7775,6 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "enterKeyHint": {
-                        "name": "enterKeyHint",
-                        "type": "EnterKeyHint | undefined",
-                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
-                        "category": "BaseInputProps",
-                        "isOptional": true
-                    },
                     "isReadOnly": {
                         "name": "isReadOnly",
                         "type": "boolean | undefined",
@@ -7789,10 +7789,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "name": {
-                        "name": "name",
+                    "placeholder": {
+                        "name": "placeholder",
                         "type": "string | undefined",
-                        "description": "Name of the field. Submitted with the form as part of a name/value pair.",
+                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -8394,10 +8394,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "placeholder": {
-                        "name": "placeholder",
-                        "type": "string | undefined",
-                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
+                    "enterKeyHint": {
+                        "name": "enterKeyHint",
+                        "type": "EnterKeyHint | undefined",
+                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -8436,13 +8436,6 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "enterKeyHint": {
-                        "name": "enterKeyHint",
-                        "type": "EnterKeyHint | undefined",
-                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
-                        "category": "BaseInputProps",
-                        "isOptional": true
-                    },
                     "isReadOnly": {
                         "name": "isReadOnly",
                         "type": "boolean | undefined",
@@ -8456,6 +8449,13 @@ exports[`Props Table 1`] = `
                         "description": "Whether field should be marked required.",
                         "category": "BaseInputProps",
                         "isOptional": true
+                    },
+                    "placeholder": {
+                        "name": "placeholder",
+                        "type": "string | undefined",
+                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
+                        "category": "BaseInputProps",
+                        "isOptional": true
                     }
                 }
             },
@@ -8936,7 +8936,7 @@ exports[`Props Table 1`] = `
                     },
                     "emptyIcon": {
                         "name": "emptyIcon",
-                        "type": "JSX.Element | undefined",
+                        "type": "React.JSX.Element | undefined",
                         "description": "This will override which icon to use as the empty icon. This will only\\noverride the empty icon an will create a rating component that uses\\ndifferent icons for filled and empty icons.",
                         "category": "RatingOptions",
                         "isOptional": true
@@ -8950,7 +8950,7 @@ exports[`Props Table 1`] = `
                     },
                     "icon": {
                         "name": "icon",
-                        "type": "JSX.Element | undefined",
+                        "type": "React.JSX.Element | undefined",
                         "description": "This will override which icon to use. This will override both\\nthe filled and empty icon values unless an empty icon is specified\\nwith the emptyIcon prop\\nDefault is <IconStar />",
                         "category": "RatingOptions",
                         "isOptional": true

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",
@@ -38,9 +39,9 @@
     "next-plugin-preval": "^1.2.1",
     "prism-react-renderer": "1.2.1",
     "raw-loader": "^4.0.2",
-    "react": "18.2.0",
+    "react": "^18.3.0",
     "react-copy-to-clipboard": "^5.0.4",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.3.0",
     "react-icons": "^4.3.1",
     "react-live": "^4.1.8",
     "rehype": "^11.0.0",

docs/src/components/CodeHighlight.tsx

@@ -43,17 +43,9 @@ export const CodeHighlight = ({
           >
             <View as="code" className={classNames(className, prismClassName)}>
               {tokens.map((line, i) => (
-                <View
-                  className="code-line"
-                  key={i}
-                  {...getLineProps({ line, key: i })}
-                >
+                <View {...getLineProps({ line })} className="code-line" key={i}>
                   {line.map((token, key) => (
-                    <Text
-                      as="span"
-                      key={key}
-                      {...getTokenProps({ token, key })}
-                    />
+                    <Text {...getTokenProps({ token })} as="span" key={key} />
                   ))}
                 </View>
               ))}

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(() => {

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({

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>
     ) : (

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">

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}>

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 = ({

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 =

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 = ({

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 = ({

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 = ({

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 = ({