From 2347a729e242a6b2097ee72b1023e4b93189b69c Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Mon, 6 Jan 2025 12:16:10 -0800 Subject: [PATCH 01/10] Revert "Revert support for React 19 (#6278)" This reverts commit 475e4a37a404bd116ec55e95579acb8f2d23c9a4. --- .../workflows/reusable-build-system-test.yml | 4 +- .../components/react-native/cli/App.tsx | 2 +- docs/.eslintrc.json | 2 +- .../__snapshots__/props-table.test.ts.snap | 56 ++-- docs/package.json | 7 +- docs/src/components/CodeHighlight.tsx | 12 +- docs/src/components/ExpoSnack.tsx | 2 +- .../GlobalNav/components/DesktopNav.tsx | 2 +- .../GlobalNav/components/NavMenuLink.tsx | 2 +- .../components/propsTable/PropsTableBody.tsx | 2 +- .../propsTable/PropsTableExpander.tsx | 4 +- .../components/alert/AlertPropControls.tsx | 2 +- .../autocomplete/AutocompletePropControls.tsx | 2 +- .../components/avatar/AvatarPropControls.tsx | 2 +- .../components/badge/BadgePropControls.tsx | 2 +- .../CheckboxFieldPropControls.tsx | 2 +- .../collection/CollectionPropControls.tsx | 2 +- .../divider/DividerPropControls.tsx | 2 +- .../fieldset/FieldsetPropControls.tsx | 2 +- .../components/flex/FlexPropControls.tsx | 2 +- .../grid/GridContainerPropControls.tsx | 2 +- .../components/grid/GridItemPropControls.tsx | 2 +- .../heading/HeadingPropControls.tsx | 2 +- .../HighlightMatchPropControls.tsx | 2 +- .../components/icon/IconPropControls.tsx | 2 +- .../components/image/ImagePropControls.tsx | 2 +- .../components/input/InputPropControls.tsx | 2 +- .../components/link/LinkPropControls.tsx | 2 +- .../components/menu/MenuPropControls.tsx | 2 +- .../message/MessagePropControls.tsx | 2 +- .../pagination/PaginationPropControls.tsx | 2 +- .../passwordFieldPropControls.tsx | 2 +- .../PhoneNumberFieldPropControls.tsx | 2 +- .../RadioGroupFieldPropControls.tsx | 2 +- .../components/rating/RatingPropControls.tsx | 2 +- .../searchfield/SearchFieldPropControls.tsx | 2 +- .../selectfield/SelectFieldPropControls.tsx | 2 +- .../components/shared/StylePropControls.tsx | 2 +- .../sliderfield/SliderFieldPropControls.tsx | 2 +- .../switchfield/SwitchPropControls.tsx | 2 +- .../components/table/TablePropControls.tsx | 2 +- .../components/tabs/TabsPropControls.tsx | 2 +- .../components/text/TextPropControls.tsx | 2 +- .../TextAreaFieldPropControls.tsx | 2 +- .../textfield/TextFieldPropControls.tsx | 2 +- .../togglebutton/ToggleButtonPropControls.tsx | 2 +- .../components/view/ViewPropControls.tsx | 2 +- .../customization/LabelsAndTextDemo.tsx | 2 +- .../customization/CustomizationComponents.tsx | 2 +- .../liveness/full-api.react.mdx | 2 +- examples/next-app-router/package.json | 2 +- examples/next/package.json | 5 +- .../ai/ai-conversation/context.page.tsx | 2 +- .../with-custom-components/index.page.tsx | 4 +- examples/react-native/package.json | 5 +- package.json | 14 +- packages/configs/.eslintrc.js | 2 +- .../configs/typescript/tsconfig.base.json | 20 +- packages/react-ai/package.json | 4 +- .../AIConversation/AIConversation.tsx | 2 +- .../context/AIContextContext.tsx | 2 +- .../AIConversation/context/ActionsContext.tsx | 2 +- .../context/AttachmentContext.tsx | 2 +- .../AIConversation/context/AvatarsContext.tsx | 2 +- .../context/ControlsContext.tsx | 2 +- .../context/ConversationInputContext.tsx | 2 +- .../context/FallbackComponentContext.tsx | 2 +- .../AIConversation/context/LoadingContext.tsx | 2 +- .../context/MessageVariantContext.tsx | 2 +- .../context/MessagesContext.tsx | 2 +- .../context/ResponseComponentsContext.tsx | 2 +- .../context/SendMessageContext.tsx | 2 +- .../context/SuggestedPromptsContext.tsx | 2 +- .../context/WelcomeMessageContext.tsx | 2 +- .../AIConversation/createAIConversation.tsx | 2 +- .../src/components/AIConversation/types.ts | 8 +- .../views/Controls/AttachmentListControl.tsx | 8 +- .../views/Controls/DefaultMessageControl.tsx | 2 +- .../views/Controls/MessagesControl.tsx | 8 +- .../views/default/Attachments.tsx | 2 +- .../react-ai/src/hooks/useAIConversation.tsx | 4 +- packages/react-auth/package.json | 4 +- packages/react-core-auth/package.json | 2 +- .../ComponentRoute/ComponentRouteContext.tsx | 2 +- .../context/Machine/MachineContext.tsx | 2 +- .../Authenticator/context/Primitives/types.ts | 17 +- .../Authenticator/createProvider/types.ts | 2 +- .../react-core-notifications/package.json | 2 +- packages/react-core/package.json | 4 +- .../context/AuthenticatorProvider.tsx | 2 +- .../__tests__/AuthenticatorProvider.test.tsx | 2 +- .../__snapshots__/useField.spec.ts.snap | 1 + .../__snapshots__/useForm.spec.ts.snap | 1 + .../FormCore/__tests__/useForm.spec.ts | 4 +- .../components/FormCore/withFormProvider.tsx | 10 +- .../RenderNothing/RenderNothing.tsx | 4 +- .../react-core/src/hooks/usePreviousValue.ts | 2 +- packages/react-geo/package.json | 4 +- .../LocationSearch/LocationSearch.tsx | 4 +- packages/react-liveness/package.json | 4 +- .../FaceLivenessDetector.tsx | 2 +- .../FaceLivenessDetectorCore.tsx | 2 +- .../LivenessCheck/LivenessCameraModule.tsx | 2 +- .../FaceLivenessDetector/__mocks__/utils.tsx | 2 +- .../FaceLivenessDetectorProvider.tsx | 2 +- .../shared/DefaultStartScreenComponents.tsx | 6 +- .../shared/FaceLivenessErrorModal.tsx | 2 +- packages/react-liveness/tsconfig.json | 1 + packages/react-native-auth/package.json | 2 +- packages/react-native/package.json | 2 +- .../src/Authenticator/Authenticator.tsx | 2 +- .../ConfirmResetPassword.tsx | 2 +- .../__tests__/ConfirmResetPassword.spec.tsx | 2 +- .../Defaults/ConfirmSignIn/ConfirmSignIn.tsx | 2 +- .../__tests__/ConfirmSignIn.spec.tsx | 2 +- .../Defaults/ConfirmSignUp/ConfirmSignUp.tsx | 2 +- .../ConfirmVerifyUser/ConfirmVerifyUser.tsx | 2 +- .../ForceNewPassword/ForceNewPassword.tsx | 2 +- .../ForgotPassword/ForgotPassword.tsx | 2 +- .../__tests__/ForgotPassword.spec.tsx | 2 +- .../Defaults/SetupTotp/SetupTotp.tsx | 2 +- .../Authenticator/Defaults/SignIn/SignIn.tsx | 2 +- .../Defaults/SignIn/__tests__/SignIn.spec.tsx | 2 +- .../Authenticator/Defaults/SignUp/SignUp.tsx | 2 +- .../Defaults/SignUp/__tests__/SignUp.spec.tsx | 2 +- .../Defaults/VerifyUser/VerifyUser.tsx | 2 +- .../DefaultContainer/DefaultContainer.tsx | 2 +- .../DefaultContainer/InnerContainer.tsx | 2 +- .../common/DefaultContent/DefaultContent.tsx | 2 +- .../common/DefaultFooter/DefaultFooter.tsx | 2 +- .../DefaultRadioFormFields.tsx | 2 +- .../DefaultTextFormFields.tsx | 2 +- .../common/DefaultFormFields/Field.tsx | 2 +- .../common/DefaultFormFields/FieldErrors.tsx | 2 +- .../common/DefaultHeader/DefaultHeader.tsx | 2 +- .../FederatedProviderButton.tsx | 2 +- .../FederatedProviderButtons.tsx | 2 +- .../src/Authenticator/withAuthenticator.tsx | 4 +- .../BannerMessage/BannerMessage.tsx | 2 +- .../CarouselMessage/CarouselMessage.tsx | 2 +- .../CarouselMessage/CarouselMessageItem.tsx | 2 +- .../FullScreenMessage/FullScreenMessage.tsx | 2 +- .../InAppMessageDisplay.tsx | 2 +- .../MessageLayout/MessageLayout.tsx | 2 +- .../MessageWrapper/MessageWrapper.tsx | 2 +- .../components/ModalMessage/ModalMessage.tsx | 2 +- .../withInAppMessaging/withInAppMessaging.tsx | 4 +- .../src/primitives/Button/Button.tsx | 2 +- .../src/primitives/Carousel/Carousel.tsx | 2 +- .../Carousel/CarouselPageIndicator.tsx | 2 +- .../src/primitives/Checkbox/Checkbox.tsx | 2 +- .../src/primitives/Divider/Divider.tsx | 2 +- .../primitives/ErrorMessage/ErrorMessage.tsx | 2 +- .../src/primitives/Heading/Heading.tsx | 2 +- .../react-native/src/primitives/Icon/Icon.tsx | 2 +- .../src/primitives/IconButton/IconButton.tsx | 2 +- .../src/primitives/Label/Label.tsx | 2 +- .../PasswordField/PasswordField.tsx | 2 +- .../PhoneNumberField/PhoneNumberField.tsx | 2 +- .../src/primitives/Radio/Radio.tsx | 2 +- .../src/primitives/RadioGroup/RadioGroup.tsx | 2 +- .../react-native/src/primitives/Tabs/Tab.tsx | 2 +- .../react-native/src/primitives/Tabs/Tabs.tsx | 2 +- .../src/primitives/TextField/TextField.tsx | 2 +- .../react-native/src/theme/ThemeProvider.tsx | 2 +- packages/react-notifications/package.json | 4 +- .../InAppMessaging/Backdrop/Backdrop.tsx | 5 +- .../InAppMessaging/Backdrop/withBackdrop.tsx | 6 +- .../BannerMessage/BannerMessage.tsx | 4 +- .../CloseIconButton/CloseIconButton.tsx | 2 +- .../FullScreenMessage/FullScreenMessage.tsx | 2 +- .../InAppMessageDisplay.tsx | 2 +- .../MessageLayout/MessageLayout.tsx | 2 +- .../ModalMessage/ModalMessage.tsx | 4 +- .../withInAppMessaging/withInAppMessaging.tsx | 4 +- packages/react-storage/package.json | 8 +- .../components/FileUploader/FileUploader.tsx | 2 +- .../hooks/useFileUploader/useFileUploader.ts | 6 +- .../FileUploader/ui/Container/Container.tsx | 2 +- .../ui/Container/__tests__/Container.spec.tsx | 2 +- .../FileUploader/ui/DropZone/DropZone.tsx | 2 +- .../FileUploader/ui/FileList/FileControl.tsx | 2 +- .../FileUploader/ui/FileList/FileDetails.tsx | 2 +- .../FileUploader/ui/FileList/FileList.tsx | 2 +- .../ui/FileList/FileRemoveButton.tsx | 2 +- .../ui/FileList/FileStatusMessage.tsx | 2 +- .../ui/FileList/FileThumbnail.tsx | 2 +- .../ui/FileListFooter/FileListFooter.tsx | 2 +- .../ui/FileListHeader/FileListHeader.tsx | 2 +- .../FileUploader/ui/FilePicker/FilePicker.tsx | 2 +- .../context/elements/defaults.tsx | 2 +- .../components/StorageImage/StorageImage.tsx | 2 +- .../StorageManager/StorageManager.tsx | 2 +- .../StorageManager/ui/Container/Container.tsx | 2 +- .../ui/Container/__tests__/Container.spec.tsx | 2 +- .../StorageManager/ui/DropZone/DropZone.tsx | 2 +- .../ui/FileList/FileControl.tsx | 2 +- .../ui/FileList/FileDetails.tsx | 2 +- .../StorageManager/ui/FileList/FileList.tsx | 2 +- .../ui/FileList/FileRemoveButton.tsx | 2 +- .../ui/FileList/FileStatusMessage.tsx | 2 +- .../ui/FileList/FileThumbnail.tsx | 2 +- .../ui/FileListFooter/FileListFooter.tsx | 2 +- .../ui/FileListHeader/FileListHeader.tsx | 2 +- .../ui/FilePicker/FilePicker.tsx | 2 +- .../__tests__/__snapshots__/exports.ts.snap | 15 ++ packages/react/package.json | 7 +- .../ChangePassword/ChangePassword.tsx | 2 +- .../AccountSettings/DeleteUser/DeleteUser.tsx | 2 +- .../Authenticator/Authenticator.tsx | 9 +- .../ConfirmSignIn/ConfirmSignIn.tsx | 4 +- .../ConfirmSignUp/ConfirmSignUp.tsx | 4 +- .../FederatedSignIn/FederatedSignIn.tsx | 2 +- .../FederatedSignInButton.tsx | 10 +- .../ForceNewPassword/ForceNewPassword.tsx | 8 +- .../ForgotPassword/ConfirmResetPassword.tsx | 6 +- .../ForgotPassword/ForgotPassword.tsx | 6 +- .../RouteContainer/RouteContainer.tsx | 2 +- .../Authenticator/Router/Router.tsx | 8 +- .../Authenticator/SetupTotp/SetupTotp.tsx | 6 +- .../Authenticator/SignIn/SignIn.tsx | 4 +- .../Authenticator/SignUp/SignUp.tsx | 6 +- .../VerifyUser/ConfirmVerifyUser.tsx | 4 +- .../Authenticator/VerifyUser/VerifyUser.tsx | 8 +- .../useCustomComponents/defaultComponents.tsx | 10 +- .../shared/ConfirmSignInFooter.tsx | 2 +- .../shared/ConfirmationCodeInput.tsx | 2 +- .../Authenticator/shared/FormField.tsx | 2 +- .../Authenticator/shared/FormFields.tsx | 2 +- .../shared/RemoteErrorMessage.tsx | 2 +- .../Authenticator/shared/SignInSignUpTabs.tsx | 2 +- .../shared/TwoButtonSubmitFooter.tsx | 4 +- .../Authenticator/withAuthenticator.tsx | 2 +- .../FilterChildren/FilterChildren.tsx | 2 +- .../ThemeProvider/ComponentStyle.tsx | 2 +- .../components/ThemeProvider/GlobalStyle.tsx | 2 +- .../src/components/ThemeProvider/Style.tsx | 5 +- .../ThemeProvider/ThemeProvider.tsx | 2 +- .../components/ThemeProvider/ThemeStyle.tsx | 2 +- .../components/shared/ValidationErrors.tsx | 2 +- .../react/src/primitives/Alert/AlertIcon.tsx | 2 +- .../__tests__/CheckboxField.test.tsx | 2 +- .../src/primitives/Collection/Collection.tsx | 4 +- .../src/primitives/DropZone/DropZone.tsx | 15 +- .../primitives/DropZone/DropZoneChildren.tsx | 24 +- .../primitives/DropZone/DropZoneProvider.tsx | 2 +- .../primitives/Icon/context/IconsProvider.tsx | 2 +- .../react/src/primitives/Icon/icons/types.ts | 2 +- .../primitives/Link/__tests__/Link.test.tsx | 53 +--- .../Pagination/usePaginationItems.tsx | 2 +- .../react/src/primitives/Tabs/TabsList.tsx | 2 +- .../src/primitives/types/autocomplete.ts | 2 +- .../react/src/primitives/types/collection.ts | 4 +- packages/react/src/primitives/types/rating.ts | 4 +- packages/react/src/primitives/types/view.ts | 7 +- .../utils/primitiveWithForwardRef.ts | 2 +- yarn.lock | 248 +++++++++--------- 257 files changed, 562 insertions(+), 583 deletions(-) diff --git a/.github/workflows/reusable-build-system-test.yml b/.github/workflows/reusable-build-system-test.yml index b0e498b155b..772f143714b 100644 --- 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 index 6142710083f..3fa7f4a72dd 100644 --- 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 - ); - }, - FileList({ files, onCancelUpload, onDeleteUpload }) { - return ( - - {files.map(({ file, key, progress, id, status, uploadTask }) => ( - - {key} - {progress < 100 ? ( - - ) : null} - - - - ))} - - ); - }, - }} - /> - ); -}; diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts index 74190f3ca11..d1e404392d6 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts @@ -1,5 +1,4 @@ export { App as DefaultExample } from './Default'; -export { App as ComponentOverridesExample } from './ComponentOverrides'; export { App as DisplayTextExample } from './DisplayText'; export { App as EventExample } from './Event'; export { App as FileTypesExample } from './FileTypes'; diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index 1d25a6d9700..be91f701767 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -10,7 +10,6 @@ import { InstallScripts } from '@/components/InstallScripts'; import { FILE_UPLOADER, FILE_PICKER, DROPZONE_PROPS, DISPLAY_TEXT } from './props'; import { DefaultExample, - ComponentOverridesExample, DisplayTextExample, EventExample, FileTypesExample, @@ -325,9 +324,8 @@ Don't like how things look? Use your own components inside the FileUploader! You _You can even use a completely different UI kit like MUI, Chakra, or your own design system!_ - - ```jsx file=./examples/ComponentOverrides.tsx + ```jsx file=../../../../../../../examples/next/pages/ui/components/storage/file-uploader/component-overrides/index.page.tsx ``` diff --git a/examples/next/pages/ui/components/storage/file-uploader/component-overrides/amplify_outputs.js b/examples/next/pages/ui/components/storage/file-uploader/component-overrides/amplify_outputs.js new file mode 100644 index 00000000000..aa7b2dc0d65 --- /dev/null +++ b/examples/next/pages/ui/components/storage/file-uploader/component-overrides/amplify_outputs.js @@ -0,0 +1,2 @@ +import amplifyOutputs from '@environments/storage/gen2/amplify_outputs'; +export default amplifyOutputs; diff --git a/examples/next/pages/ui/components/storage/file-uploader/component-overrides/index.page.tsx b/examples/next/pages/ui/components/storage/file-uploader/component-overrides/index.page.tsx new file mode 100644 index 00000000000..1efc9877a85 --- /dev/null +++ b/examples/next/pages/ui/components/storage/file-uploader/component-overrides/index.page.tsx @@ -0,0 +1,128 @@ +import * as React from 'react'; + +import { FileUploader } from '@aws-amplify/ui-react-storage'; +import { + Card, + Button, + Flex, + Text, + Divider, + Image, + Loader, + Icon, +} from '@aws-amplify/ui-react'; +import '@aws-amplify/ui-react/styles.css'; +import { Amplify } from 'aws-amplify'; // IGNORE +import amplifyOutputs from './amplify_outputs'; // IGNORE +Amplify.configure(amplifyOutputs); // IGNORE + +export default function App() { + return ( + {children}; + }, + // DropZone({ children, inDropZone, onDragEnter, onDragLeave, onDragStart, onDragOver, onDrop }) { + DropZone({ children, inDropZone, ...rest }) { + return ( + + Drop files here + + {children} + + ); + }, + FilePicker({ onClick }) { + return ( + + ); + }, + FileList({ files, onCancelUpload, onDeleteUpload }) { + return ( + + {files.map(({ file, key, progress, id, status, uploadTask }) => + !file ? null : ( + + {key} + {progress === 100 ? null : ( + + )} + + + + ) + )} + + ); + }, + }} + /> + ); +} From 142daeb8a7542219121b14ed61035007ce45c3b3 Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Tue, 7 Jan 2025 17:19:25 -0800 Subject: [PATCH 06/10] add ExtendedView component for surfacing ReactNode conflicts --- .../templates/components/react/App.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/build-system-tests/templates/components/react/App.tsx b/build-system-tests/templates/components/react/App.tsx index a6457bd8e96..e838d8f1354 100644 --- 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 }) => ( + +); + export default function Home() { return ( {({ signOut, user = { username: '' } }) => ( -
+

Hello {user.username}

-
+ )} ); From a2f998a90ab5bead9979e9ab03170aefb5668d2d Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Wed, 8 Jan 2025 09:40:00 -0800 Subject: [PATCH 07/10] Remove extended and overridden react types --- packages/react/src/primitives/types/view.ts | 60 ++++++++------------- 1 file changed, 22 insertions(+), 38 deletions(-) diff --git a/packages/react/src/primitives/types/view.ts b/packages/react/src/primitives/types/view.ts index 6bf95f001b9..9aa2cb25dda 100644 --- a/packages/react/src/primitives/types/view.ts +++ b/packages/react/src/primitives/types/view.ts @@ -4,11 +4,17 @@ import { MergeProps } from '@aws-amplify/ui-react-core'; import { AriaProps, BaseComponentProps } from './base'; import { BaseStyleProps } from './style'; +/** + * @deprecated will be removed in a future major version + */ // A utility type to check if a type is any export type IsAny = (Type extends never ? true : false) extends false ? false : true; +/** + * @deprecated will be removed in a future major version + */ export type ElementType = React.ElementType; type AsProp = { @@ -19,6 +25,9 @@ type AsProp = { as?: Element; }; +/** + * @deprecated will be removed in a future major version + */ export type PrimitivePropsWithAs< Props extends BaseViewProps, Element extends ElementType, @@ -29,6 +38,9 @@ type PrimitivePropsWithRef< Element extends ElementType, > = Omit & React.RefAttributes>; +/** + * @deprecated will be removed in a future major version + */ export type PrimitivePropsWithHTMLAttributes< Props extends BaseViewProps, Element extends ElementType, @@ -47,6 +59,9 @@ export type PrimitivePropsWithHTMLAttributes< > : any; +/** + * @deprecated will be removed in a future major version + */ export type PrimitiveProps< Props extends BaseViewProps, Element extends ElementType, @@ -56,59 +71,28 @@ export type PrimitiveProps< >; /** - * @see {React.ForwardRefRenderFunction} - * Modifies return type of `React.ForwardRefRenderFunction` - * to allow usage in React 16 + * @deprecated will be removed in a future major version */ -interface JSElementForwardRefRenderFunction { - // return `JSX.Element` or `null` in place of `React.ReactNode` - (props: P, ref: React.ForwardedRef): React.JSX.Element | null; - displayName?: string | undefined; - // explicit rejected with `never` required due to - // https://github.com/microsoft/TypeScript/issues/36826 - /** - * defaultProps are not supported on render functions - */ - defaultProps?: never | undefined; - /** - * propTypes are not supported on render functions - */ - propTypes?: never | undefined; -} - export interface Primitive< Props extends BaseViewProps, Element extends ElementType, -> extends JSElementForwardRefRenderFunction< - React.ComponentRef, - Props - > {} +> extends React.ForwardRefRenderFunction, Props> {} /** - * @see {React.ForwardRefExoticComponent} - * Modifies return type of `React.ForwardRefExoticComponent` - * to allow usage in React 16 + * @deprecated will be removed in a future major version */ -interface JSXElementForwardRefExoticComponent

{ - // return `React.ReactElement` or `null` in place of `React.ReactNode` - (props: P): React.ReactElement | null; - defaultProps?: Partial

| undefined; - displayName?: string | undefined; - // deprecated in React@19 but needed for backwards compatibility in previous versions - propTypes?: any; - readonly $$typeof: symbol; -} - export interface ForwardRefPrimitive< Props extends BaseViewProps, DefaultElement extends ElementType, -> extends JSXElementForwardRefExoticComponent< +> extends React.ForwardRefExoticComponent< PrimitiveProps > { // overload the JSX constructor to make it accept generics ( props: PrimitiveProps - ): React.ReactElement | null; + ): ReturnType< + React.ForwardRefExoticComponent> + >; } /** @deprecated For internal use only */ From 26f16300159f0e616e8cbbc5ff6c5467e5ea2dc8 Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Tue, 14 Jan 2025 13:58:47 -0800 Subject: [PATCH 08/10] remove publish-react-19.yml --- .github/workflows/publish-react-19.yaml | 26 ------------------------- 1 file changed, 26 deletions(-) delete mode 100644 .github/workflows/publish-react-19.yaml diff --git a/.github/workflows/publish-react-19.yaml b/.github/workflows/publish-react-19.yaml deleted file mode 100644 index abb74b69d4d..00000000000 --- a/.github/workflows/publish-react-19.yaml +++ /dev/null @@ -1,26 +0,0 @@ -# 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 with your release branch name. Replace 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 }} From 78273029ee478a9b2f448ca00e5dc82605b5010f Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Tue, 14 Jan 2025 14:13:18 -0800 Subject: [PATCH 09/10] Create swift-planets-look.md --- .changeset/swift-planets-look.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 .changeset/swift-planets-look.md diff --git a/.changeset/swift-planets-look.md b/.changeset/swift-planets-look.md new file mode 100644 index 00000000000..7d34faac7aa --- /dev/null +++ b/.changeset/swift-planets-look.md @@ -0,0 +1,14 @@ +--- +"@aws-amplify/ui": patch +"@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 +--- + +feat(react): reenable react 19 support From de4d269389003fd6b2da088a533533afe67d3125 Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Tue, 14 Jan 2025 14:30:14 -0800 Subject: [PATCH 10/10] update changeset bumps from patch to minor --- .changeset/swift-planets-look.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.changeset/swift-planets-look.md b/.changeset/swift-planets-look.md index 7d34faac7aa..aff974a7376 100644 --- a/.changeset/swift-planets-look.md +++ b/.changeset/swift-planets-look.md @@ -1,14 +1,14 @@ --- -"@aws-amplify/ui": patch -"@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 +"@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