feat(react): reenable react 19 support

.github/workflows/publish-react-19.yaml

@@ -0,0 +1,26 @@
+# Description: This workflow runs unit + e2e tests, then publishes UI packages
+#              to a custom dist NPM tag of your choice. This is intended to run
+#              on release branches (e.g. `in-app-messaging/release`).
+#
+# Triggered by: This runs whenever you push a commit to the specified release branch.
+#
+# To use: replace <BRANCH> with your release branch name. Replace <TAG> with
+#         your NPM tag name.
+name: Test and Publish / react-19
+on:
+  # You may change this to `pull_request` if you want to run this on a PRs.
+  # This can be useful for publishing hotfixes quickly to unblock customers,
+  # but otherwise, we recommend to use a release branch.
+  push:
+    branches: [react/reenable-react-19]
+# This permission block is only required if you're running e2e tests.
+permissions:
+  id-token: write # This is required for requesting the JWT
+  contents: read # This is required for actions/checkout
+jobs:
+  publish:
+    uses: ./.github/workflows/reusable-tagged-publish.yml
+    with:
+      dist-tag: react-19
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/reusable-build-system-test.yml

@@ -28,9 +28,7 @@ jobs:
       fail-fast: false
       matrix:
         framework: [react]
-        # temporarily pointing all react tests to v18
-        # framework-version: [latest]
-        framework-version: [18]
+        framework-version: [latest]
         build-tool: [next, vite]
         build-tool-version: [latest]
         pkg-manager: [npm]

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>

build-system-tests/templates/components/react/App.tsx

@@ -1,5 +1,6 @@
+import React from 'react';
 import { Amplify } from 'aws-amplify';
-import { AccountSettings, Authenticator } from '@aws-amplify/ui-react';
+import { AccountSettings, Authenticator, View } from '@aws-amplify/ui-react';
 import { FaceLivenessDetector } from '@aws-amplify/ui-react-liveness';
 import { StorageManager, FileUploader } from '@aws-amplify/ui-react-storage';
 import { MapView, LocationSearch } from '@aws-amplify/ui-react-geo';
@@ -8,11 +9,17 @@ import '@aws-amplify/ui-react-geo/styles.css';
 import awsconfig from '../../../environments/auth-with-email/src/aws-exports.js';
 Amplify.configure(awsconfig);
 
+// results in a type error if conflicting versions of `@types/react` are installed through
+// `@aws-amplify/ui-react` and the consuming project
+const ExtendedView = (props: { children?: React.ReactNode }) => (
+  <View {...props} />
+);
+
 export default function Home() {
   return (
     <Authenticator>
       {({ signOut, user = { username: '' } }) => (
-        <main>
+        <ExtendedView>
           <h1>Hello {user.username}</h1>
           <button onClick={signOut}>Sign out</button>
           <FaceLivenessDetector
@@ -55,7 +62,7 @@ export default function Home() {
           >
             <LocationSearch />
           </MapView>
-        </main>
+        </ExtendedView>
       )}
     </Authenticator>
   );

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.8.1",
@@ -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 = ({