@aws-amplify/ui-react 6.9.4 → 6.10.0

package/dist/esm/components/Authenticator/Authenticator.mjs

@@ -13,6 +13,8 @@ import { ForceNewPassword } from './ForceNewPassword/ForceNewPassword.mjs';
 import './ForgotPassword/ConfirmResetPassword.mjs';
 import { ForgotPassword } from './ForgotPassword/ForgotPassword.mjs';
 import { defaultComponents } from './hooks/useCustomComponents/defaultComponents.mjs';
+import { SelectMfaType } from './SelectMfaType/SelectMfaType.mjs';
+import { SetupEmail } from './SetupEmail/SetupEmail.mjs';
 
 // `AuthenticatorInternal` exists to give access to the context returned via `useAuthenticator`,
 // which allows the `Authenticator` to just return `children` if a user is authenticated.
@@ -70,5 +72,7 @@ Authenticator.SetupTotp = SetupTotp;
 Authenticator.SignIn = SignIn;
 Authenticator.SignUp = SignUp;
 Authenticator.ForceNewPassword = ForceNewPassword;
+Authenticator.SelectMfaType = SelectMfaType;
+Authenticator.SetupEmail = SetupEmail;
 
 export { Authenticator, AuthenticatorInternal };

package/dist/esm/components/Authenticator/Router/Router.mjs

@@ -15,6 +15,8 @@ import { ConfirmSignIn } from '../ConfirmSignIn/ConfirmSignIn.mjs';
 import { ConfirmResetPassword } from '../ForgotPassword/ConfirmResetPassword.mjs';
 import { ForgotPassword } from '../ForgotPassword/ForgotPassword.mjs';
 import { isSignInOrSignUpRoute } from '../utils.mjs';
+import { SelectMfaType } from '../SelectMfaType/SelectMfaType.mjs';
+import { SetupEmail } from '../SetupEmail/SetupEmail.mjs';
 
 function RenderNothing() {
     // @ts-ignore
@@ -31,6 +33,10 @@ const getRouteComponent = (route) => {
             return ConfirmSignUp;
         case 'confirmSignIn':
             return ConfirmSignIn;
+        case 'selectMfaType':
+            return SelectMfaType;
+        case 'setupEmail':
+            return SetupEmail;
         case 'setupTotp':
             return SetupTotp;
         case 'signIn':

package/dist/esm/components/Authenticator/SelectMfaType/SelectMfaType.mjs

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+import { Heading } from '../../../primitives/Heading/Heading.mjs';
+import { RadioGroupField } from '../../../primitives/RadioGroupField/RadioGroupField.mjs';
+import { Radio } from '../../../primitives/Radio/Radio.mjs';
+import { useCustomComponents } from '../hooks/useCustomComponents/useCustomComponents.mjs';
+import { useFormHandlers } from '../hooks/useFormHandlers/useFormHandlers.mjs';
+import { ConfirmSignInFooter } from '../shared/ConfirmSignInFooter.mjs';
+import { RemoteErrorMessage } from '../shared/RemoteErrorMessage.mjs';
+import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
+
+const { getMfaTypeLabelByValue, getSelectMfaTypeByChallengeName, getSelectMfaTypeText, } = authenticatorTextUtil;
+const SelectMfaType = ({ className, variation, }) => {
+    const { isPending, allowedMfaTypes = [] } = useAuthenticator((context) => {
+        return [context.isPending, context.allowedMfaTypes];
+    });
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SelectMfaType: { Header = SelectMfaType.Header, Footer = SelectMfaType.Footer, }, }, } = useCustomComponents();
+    return (React.createElement(RouteContainer, { className: className, variation: variation },
+        React.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-select-mfa-type": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React.createElement(Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React.createElement(Header, null),
+                React.createElement(Flex, { direction: "column" },
+                    React.createElement(RadioGroupField, { name: "mfa_type", legend: getSelectMfaTypeText(), legendHidden: true, isDisabled: isPending, isRequired: true }, allowedMfaTypes.map((value, index) => (React.createElement(Radio, { name: "mfa_type", key: value, value: value, defaultChecked: index === 0 }, getMfaTypeLabelByValue(value))))),
+                    React.createElement(RemoteErrorMessage, null)),
+                React.createElement(ConfirmSignInFooter, null),
+                React.createElement(Footer, null)))));
+};
+SelectMfaType.Header = function Header() {
+    const { challengeName } = useAuthenticator((context) => {
+        return [context.challengeName];
+    });
+    return (React.createElement(Heading, { level: 3 }, getSelectMfaTypeByChallengeName(challengeName)));
+};
+SelectMfaType.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+export { SelectMfaType };

package/dist/esm/components/Authenticator/SetupEmail/SetupEmail.mjs

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+import { Heading } from '../../../primitives/Heading/Heading.mjs';
+import { useCustomComponents } from '../hooks/useCustomComponents/useCustomComponents.mjs';
+import { useFormHandlers } from '../hooks/useFormHandlers/useFormHandlers.mjs';
+import { ConfirmSignInFooter } from '../shared/ConfirmSignInFooter.mjs';
+import { RemoteErrorMessage } from '../shared/RemoteErrorMessage.mjs';
+import { FormFields } from '../shared/FormFields.mjs';
+import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
+
+const { getSetupEmailText } = authenticatorTextUtil;
+const SetupEmail = ({ className, variation, }) => {
+    const { isPending } = useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SetupEmail: { Header = SetupEmail.Header, Footer = SetupEmail.Footer }, }, } = useCustomComponents();
+    return (React.createElement(RouteContainer, { className: className, variation: variation },
+        React.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-setup-email": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React.createElement(Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React.createElement(Header, null),
+                React.createElement(Flex, { direction: "column" },
+                    React.createElement(FormFields, null),
+                    React.createElement(RemoteErrorMessage, null)),
+                React.createElement(ConfirmSignInFooter, null),
+                React.createElement(Footer, null)))));
+};
+SetupEmail.Header = function Header() {
+    return React.createElement(Heading, { level: 3 }, getSetupEmailText());
+};
+SetupEmail.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+export { SetupEmail };

package/dist/esm/components/Authenticator/hooks/useCustomComponents/defaultComponents.mjs

@@ -8,6 +8,8 @@ import { ConfirmVerifyUser } from '../../VerifyUser/ConfirmVerifyUser.mjs';
 import { VerifyUser } from '../../VerifyUser/VerifyUser.mjs';
 import { ConfirmResetPassword } from '../../ForgotPassword/ConfirmResetPassword.mjs';
 import { ForgotPassword } from '../../ForgotPassword/ForgotPassword.mjs';
+import { SelectMfaType } from '../../SelectMfaType/SelectMfaType.mjs';
+import { SetupEmail } from '../../SetupEmail/SetupEmail.mjs';
 
 const defaultComponents = {
     // @ts-ignore
@@ -25,6 +27,14 @@ const defaultComponents = {
         Header: ConfirmSignUp.Header,
         Footer: ConfirmSignUp.Footer,
     },
+    SelectMfaType: {
+        Header: SelectMfaType.Header,
+        Footer: SelectMfaType.Footer,
+    },
+    SetupEmail: {
+        Header: SetupEmail.Header,
+        Footer: SetupEmail.Footer,
+    },
     SetupTotp: {
         Header: SetupTotp.Header,
         Footer: SetupTotp.Footer,

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.9.4';
+const VERSION = '6.10.0';
 
 export { VERSION };

package/dist/index.js

@@ -2469,7 +2469,7 @@ const defaultDeleteUserDisplayText = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.9.4';
+const VERSION = '6.10.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -3281,6 +3281,61 @@ ForgotPassword.Footer = function Footer() {
 
 const isSignInOrSignUpRoute = (route) => route === 'signIn' || route === 'signUp';
 
+const { getMfaTypeLabelByValue, getSelectMfaTypeByChallengeName, getSelectMfaTypeText, } = ui.authenticatorTextUtil;
+const SelectMfaType = ({ className, variation, }) => {
+    const { isPending, allowedMfaTypes = [] } = uiReactCore.useAuthenticator((context) => {
+        return [context.isPending, context.allowedMfaTypes];
+    });
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SelectMfaType: { Header = SelectMfaType.Header, Footer = SelectMfaType.Footer, }, }, } = useCustomComponents();
+    return (React__namespace.createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-select-mfa-type": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace.createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace.createElement(Header, null),
+                React__namespace.createElement(Field.Flex, { direction: "column" },
+                    React__namespace.createElement(RadioGroupField, { name: "mfa_type", legend: getSelectMfaTypeText(), legendHidden: true, isDisabled: isPending, isRequired: true }, allowedMfaTypes.map((value, index) => (React__namespace.createElement(Radio, { name: "mfa_type", key: value, value: value, defaultChecked: index === 0 }, getMfaTypeLabelByValue(value))))),
+                    React__namespace.createElement(RemoteErrorMessage, null)),
+                React__namespace.createElement(ConfirmSignInFooter, null),
+                React__namespace.createElement(Footer, null)))));
+};
+SelectMfaType.Header = function Header() {
+    const { challengeName } = uiReactCore.useAuthenticator((context) => {
+        return [context.challengeName];
+    });
+    return (React__namespace.createElement(Heading, { level: 3 }, getSelectMfaTypeByChallengeName(challengeName)));
+};
+SelectMfaType.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+const { getSetupEmailText } = ui.authenticatorTextUtil;
+const SetupEmail = ({ className, variation, }) => {
+    const { isPending } = uiReactCore.useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SetupEmail: { Header = SetupEmail.Header, Footer = SetupEmail.Footer }, }, } = useCustomComponents();
+    return (React__namespace.createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-setup-email": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace.createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace.createElement(Header, null),
+                React__namespace.createElement(Field.Flex, { direction: "column" },
+                    React__namespace.createElement(FormFields, null),
+                    React__namespace.createElement(RemoteErrorMessage, null)),
+                React__namespace.createElement(ConfirmSignInFooter, null),
+                React__namespace.createElement(Footer, null)))));
+};
+SetupEmail.Header = function Header() {
+    return React__namespace.createElement(Heading, { level: 3 }, getSetupEmailText());
+};
+SetupEmail.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
 function RenderNothing() {
     // @ts-ignore
     return null;
@@ -3296,6 +3351,10 @@ const getRouteComponent = (route) => {
             return ConfirmSignUp;
         case 'confirmSignIn':
             return ConfirmSignIn;
+        case 'selectMfaType':
+            return SelectMfaType;
+        case 'setupEmail':
+            return SetupEmail;
         case 'setupTotp':
             return SetupTotp;
         case 'signIn':
@@ -3341,6 +3400,14 @@ const defaultComponents = {
         Header: ConfirmSignUp.Header,
         Footer: ConfirmSignUp.Footer,
     },
+    SelectMfaType: {
+        Header: SelectMfaType.Header,
+        Footer: SelectMfaType.Footer,
+    },
+    SetupEmail: {
+        Header: SetupEmail.Header,
+        Footer: SetupEmail.Footer,
+    },
     SetupTotp: {
         Header: SetupTotp.Header,
         Footer: SetupTotp.Footer,
@@ -3431,6 +3498,8 @@ Authenticator.SetupTotp = SetupTotp;
 Authenticator.SignIn = SignIn;
 Authenticator.SignUp = SignUp;
 Authenticator.ForceNewPassword = ForceNewPassword;
+Authenticator.SelectMfaType = SelectMfaType;
+Authenticator.SetupEmail = SetupEmail;
 
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)

package/dist/types/components/Authenticator/Authenticator.d.ts

@@ -53,5 +53,15 @@ export declare namespace Authenticator {
         Header(): React.JSX.Element | null;
         Footer(): React.JSX.Element | null;
     };
+    var SelectMfaType: {
+        ({ className, variation, }: import("./RouteContainer").RouteProps): JSX.Element;
+        Header(): JSX.Element;
+        Footer(): JSX.Element;
+    };
+    var SetupEmail: {
+        ({ className, variation, }: import("./RouteContainer").RouteProps): JSX.Element;
+        Header(): JSX.Element;
+        Footer(): JSX.Element;
+    };
 }
 export {};

package/dist/types/components/Authenticator/SelectMfaType/SelectMfaType.d.ts

@@ -0,0 +1,6 @@
+import { RouteProps } from '../RouteContainer';
+export declare const SelectMfaType: {
+    ({ className, variation, }: RouteProps): JSX.Element;
+    Header(): JSX.Element;
+    Footer(): JSX.Element;
+};

package/dist/types/components/Authenticator/SelectMfaType/index.d.ts

@@ -0,0 +1 @@
+export { SelectMfaType } from './SelectMfaType';

package/dist/types/components/Authenticator/SetupEmail/SetupEmail.d.ts

@@ -0,0 +1,6 @@
+import { RouteProps } from '../RouteContainer';
+export declare const SetupEmail: {
+    ({ className, variation, }: RouteProps): JSX.Element;
+    Header(): JSX.Element;
+    Footer(): JSX.Element;
+};

package/dist/types/components/Authenticator/SetupEmail/index.d.ts

@@ -0,0 +1 @@
+export * from './SetupEmail';

package/dist/types/components/Authenticator/hooks/useCustomComponents/defaultComponents.d.ts

@@ -10,6 +10,8 @@ export interface DefaultComponents extends Omit<Components, 'FormFields'> {
     ConfirmVerifyUser?: Omit<Components, 'FormFields'>;
     ForceNewPassword?: Components;
     ForgotPassword?: Omit<Components, 'FormFields'>;
+    SelectMfaType?: Omit<Components, 'FormFields'>;
+    SetupEmail?: Omit<Components, 'FormFields'>;
     SetupTotp?: Omit<Components, 'FormFields'>;
     SignIn?: Omit<Components, 'FormFields'>;
     SignUp?: Components;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.9.4";
+export declare const VERSION = "6.10.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.9.4",
+  "version": "6.10.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.9.1",
-    "@aws-amplify/ui-react-core": "3.3.4",
+    "@aws-amplify/ui": "6.10.0",
+    "@aws-amplify/ui-react-core": "3.4.0",
     "@radix-ui/react-direction": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-slider": "^1.2.2",
@@ -98,4 +98,4 @@
       "limit": "25 kB"
     }
   ]
-}
+}