feat(react): reenable react 19 support (#6296)

* Revert "Revert support for React 19 (#6278)" This reverts commit 475e4a3. * update radix deps * remove radix namespace sanitization * migrate/cleanup FileUploader component override example * add ExtendedView component for surfacing ReactNode conflicts * Remove extended and overridden react types
aws-amplify · Jan 23, 2025 · 145c924 · 145c924
1 parent 11bb02a
commit 145c924
Show file tree

Hide file tree

Showing 268 changed files with 941 additions and 1,008 deletions.
diff --git a/.changeset/swift-planets-look.md b/.changeset/swift-planets-look.md
@@ -0,0 +1,14 @@
+---
+"@aws-amplify/ui": minor
+"@aws-amplify/ui-react": minor
+"@aws-amplify/ui-react-ai": minor
+"@aws-amplify/ui-react-core": minor
+"@aws-amplify/ui-react-core-notifications": minor
+"@aws-amplify/ui-react-geo": minor
+"@aws-amplify/ui-react-liveness": minor
+"@aws-amplify/ui-react-native": minor
+"@aws-amplify/ui-react-notifications": minor
+"@aws-amplify/ui-react-storage": minor
+---
+
+feat(react): reenable react 19 support
diff --git a/.github/workflows/reusable-build-system-test.yml b/.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]

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/build-system-tests/templates/components/react/App.tsx b/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>
   );

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

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

diff --git a/docs/src/components/CodeHighlight.tsx b/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>
               ))}

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