@aws-amplify/ui-react 5.3.1 → 6.0.0

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

@@ -0,0 +1,76 @@
+import QRCode from 'qrcode';
+import * as React from 'react';
+import { ConsoleLogger } from 'aws-amplify/utils';
+import { authenticatorTextUtil, getTotpCodeURL } from '@aws-amplify/ui';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+import { Heading } from '../../../primitives/Heading/Heading.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+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 logger = new ConsoleLogger('SetupTotp-logger');
+const { getSetupTotpText, getCopiedText, getLoadingText } = authenticatorTextUtil;
+const SetupTotp = ({ className, variation, }) => {
+    const { totpSecretCode, isPending, username, QRFields } = useAuthenticator((context) => [context.isPending, context.totpSecretCode, context.username]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SetupTotp: { Header = SetupTotp.Header, Footer = SetupTotp.Footer }, }, } = useCustomComponents();
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [qrCode, setQrCode] = React.useState();
+    const [copyTextLabel, setCopyTextLabel] = React.useState('COPY');
+    const { totpIssuer = 'AWSCognito', totpUsername = username } = QRFields ?? {};
+    const generateQRCode = React.useCallback(async () => {
+        try {
+            const totpCode = getTotpCodeURL(totpIssuer, totpUsername, totpSecretCode);
+            const qrCodeImageSource = await QRCode.toDataURL(totpCode);
+            setQrCode(qrCodeImageSource);
+        }
+        catch (error) {
+            logger.error(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [totpIssuer, totpUsername, totpSecretCode]);
+    React.useEffect(() => {
+        if (!qrCode) {
+            generateQRCode();
+        }
+    }, [generateQRCode, qrCode]);
+    const copyText = () => {
+        navigator.clipboard.writeText(totpSecretCode);
+        setCopyTextLabel(getCopiedText());
+    };
+    return (React.createElement(RouteContainer, { className: className, variation: variation },
+        React.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-setup-totp": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React.createElement(Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React.createElement(Header, null),
+                React.createElement(Flex, { direction: "column" },
+                    isLoading ? (React.createElement("p", null,
+                        getLoadingText(),
+                        "\u2026")) : (React.createElement("img", { "data-amplify-qrcode": true, src: qrCode, alt: "qr code", width: "228", height: "228" })),
+                    React.createElement(Flex, { "data-amplify-copy": true },
+                        React.createElement("div", null, totpSecretCode),
+                        React.createElement(Flex, { "data-amplify-copy-svg": true, onClick: copyText },
+                            React.createElement("div", { "data-amplify-copy-tooltip": true }, copyTextLabel),
+                            React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                                React.createElement("path", { d: "M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z" })))),
+                    React.createElement(FormFields, null),
+                    React.createElement(RemoteErrorMessage, null)),
+                React.createElement(ConfirmSignInFooter, null),
+                React.createElement(Footer, null)))));
+};
+SetupTotp.Header = function Header() {
+    return React.createElement(Heading, { level: 3 }, getSetupTotpText());
+};
+SetupTotp.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+export { SetupTotp };

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

@@ -1 +1,47 @@
-import e from"react";import{authenticatorTextUtil as t}from"@aws-amplify/ui";import{Button as r}from"../../../primitives/Button/Button.mjs";import{Flex as o}from"../../../primitives/Flex/Flex.mjs";import{View as n}from"../../../primitives/View/View.mjs";import{VisuallyHidden as i}from"../../../primitives/VisuallyHidden/VisuallyHidden.mjs";import{FederatedSignIn as m}from"../FederatedSignIn/FederatedSignIn.mjs";import{useAuthenticator as a}from"@aws-amplify/ui-react-core";import{useCustomComponents as l}from"../hooks/useCustomComponents/useCustomComponents.mjs";import{useFormHandlers as s}from"../hooks/useFormHandlers/useFormHandlers.mjs";import{RemoteErrorMessage as d}from"../shared/RemoteErrorMessage.mjs";import{FormFields as u}from"../shared/FormFields.mjs";const{getSignInText:c,getSigningInText:p,getForgotPasswordText:f}=t;function g(){const{isPending:t}=a((e=>[e.isPending])),{handleChange:f,handleSubmit:E}=s(),{components:{SignIn:{Header:F=g.Header,Footer:h=g.Footer}}}=l();return e.createElement(n,null,e.createElement(F,null),e.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-signin":"",method:"post",onSubmit:E,onChange:f},e.createElement(m,null),e.createElement(o,{direction:"column"},e.createElement(o,{as:"fieldset",direction:"column",isDisabled:t},e.createElement(i,null,e.createElement("legend",null,c())),e.createElement(u,null)),e.createElement(d,null),e.createElement(r,{isDisabled:t,isFullWidth:!0,type:"submit",variation:"primary",isLoading:t,loadingText:p()},c()))),e.createElement(h,null))}g.Footer=()=>{const{toResetPassword:t}=a((e=>[e.toResetPassword]));return e.createElement(n,{"data-amplify-footer":""},e.createElement(r,{fontWeight:"normal",onClick:t,size:"small",variation:"link"},f()))},g.Header=function(){return null};export{g as SignIn};
+import React__default from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { Button } from '../../../primitives/Button/Button.mjs';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+import { View } from '../../../primitives/View/View.mjs';
+import { VisuallyHidden } from '../../../primitives/VisuallyHidden/VisuallyHidden.mjs';
+import { FederatedSignIn } from '../FederatedSignIn/FederatedSignIn.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { useCustomComponents } from '../hooks/useCustomComponents/useCustomComponents.mjs';
+import { useFormHandlers } from '../hooks/useFormHandlers/useFormHandlers.mjs';
+import { RemoteErrorMessage } from '../shared/RemoteErrorMessage.mjs';
+import { FormFields } from '../shared/FormFields.mjs';
+
+const { getSignInText, getSigningInText, getForgotPasswordText } = authenticatorTextUtil;
+function SignIn() {
+    const { isPending } = useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SignIn: { Header = SignIn.Header, Footer = SignIn.Footer }, }, } = useCustomComponents();
+    return (React__default.createElement(View, null,
+        React__default.createElement(Header, null),
+        React__default.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signin": "", method: "post", onSubmit: handleSubmit, onChange: handleChange },
+            React__default.createElement(FederatedSignIn, null),
+            React__default.createElement(Flex, { direction: "column" },
+                React__default.createElement(Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                    React__default.createElement(VisuallyHidden, null,
+                        React__default.createElement("legend", null, getSignInText())),
+                    React__default.createElement(FormFields, null)),
+                React__default.createElement(RemoteErrorMessage, null),
+                React__default.createElement(Button, { isDisabled: isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()))),
+        React__default.createElement(Footer, null)));
+}
+const DefaultFooter = () => {
+    const { toForgotPassword } = useAuthenticator((context) => [
+        context.toForgotPassword,
+    ]);
+    return (React__default.createElement(View, { "data-amplify-footer": "" },
+        React__default.createElement(Button, { fontWeight: "normal", onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
+};
+SignIn.Footer = DefaultFooter;
+SignIn.Header = function Header() {
+    // @ts-ignore
+    return null;
+};
+
+export { SignIn };

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

@@ -1 +1,46 @@
-import e from"react";import{authenticatorTextUtil as t}from"@aws-amplify/ui";import{Button as r}from"../../../primitives/Button/Button.mjs";import{Flex as o}from"../../../primitives/Flex/Flex.mjs";import{View as n}from"../../../primitives/View/View.mjs";import{FederatedSignIn as i}from"../FederatedSignIn/FederatedSignIn.mjs";import{useAuthenticator as m}from"@aws-amplify/ui-react-core";import{useCustomComponents as a}from"../hooks/useCustomComponents/useCustomComponents.mjs";import{useFormHandlers as l}from"../hooks/useFormHandlers/useFormHandlers.mjs";import{RemoteErrorMessage as s}from"../shared/RemoteErrorMessage.mjs";import{FormFields as u}from"../shared/FormFields.mjs";const{getCreateAccountText:d,getCreatingAccountText:c}=t;function p(){const{hasValidationErrors:t,isPending:u}=m((e=>[e.hasValidationErrors,e.isPending])),{handleChange:f,handleBlur:F,handleSubmit:g}=l(),{components:{SignUp:{Header:h=p.Header,FormFields:E=p.FormFields,Footer:j=p.Footer}}}=a();return e.createElement(n,null,e.createElement(h,null),e.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-signup":"",method:"post",onChange:f,onSubmit:g,onBlur:F},e.createElement(i,null),e.createElement(o,{as:"fieldset",direction:"column",isDisabled:u},e.createElement(o,{direction:"column"},e.createElement(E,null),e.createElement(s,null)),e.createElement(r,{isDisabled:t||u,isFullWidth:!0,type:"submit",variation:"primary",isLoading:u,loadingText:c()},d()))),e.createElement(j,null))}p.Header=function(){return null},p.FormFields=function(){return e.createElement(u,null)},p.Footer=function(){return null};export{p as SignUp};
+import React__default from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { Button } from '../../../primitives/Button/Button.mjs';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+import { View } from '../../../primitives/View/View.mjs';
+import { FederatedSignIn } from '../FederatedSignIn/FederatedSignIn.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { useCustomComponents } from '../hooks/useCustomComponents/useCustomComponents.mjs';
+import { useFormHandlers } from '../hooks/useFormHandlers/useFormHandlers.mjs';
+import { RemoteErrorMessage } from '../shared/RemoteErrorMessage.mjs';
+import { FormFields } from '../shared/FormFields.mjs';
+
+const { getCreateAccountText, getCreatingAccountText } = authenticatorTextUtil;
+function SignUp() {
+    const { hasValidationErrors, isPending } = useAuthenticator((context) => [
+        context.hasValidationErrors,
+        context.isPending,
+    ]);
+    const { handleChange, handleBlur, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    SignUp: { Header = SignUp.Header, FormFields = SignUp.FormFields, Footer = SignUp.Footer, }, }, } = useCustomComponents();
+    return (React__default.createElement(View, null,
+        React__default.createElement(Header, null),
+        React__default.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
+            React__default.createElement(FederatedSignIn, null),
+            React__default.createElement(Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default.createElement(Flex, { direction: "column" },
+                    React__default.createElement(FormFields, null),
+                    React__default.createElement(RemoteErrorMessage, null)),
+                React__default.createElement(Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()))),
+        React__default.createElement(Footer, null)));
+}
+SignUp.Header = function Header() {
+    // @ts-ignore
+    return null;
+};
+SignUp.FormFields = function FormFields$1() {
+    return React__default.createElement(FormFields, null);
+};
+SignUp.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+export { SignUp };

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

@@ -1 +1,37 @@
-import e from"react";import{authenticatorTextUtil as t}from"@aws-amplify/ui";import{Flex as o}from"../../../primitives/Flex/Flex.mjs";import{Heading as r}from"../../../primitives/Heading/Heading.mjs";import{useAuthenticator as m}from"@aws-amplify/ui-react-core";import{useCustomComponents as n}from"../hooks/useCustomComponents/useCustomComponents.mjs";import{useFormHandlers as i}from"../hooks/useFormHandlers/useFormHandlers.mjs";import{RemoteErrorMessage as a}from"../shared/RemoteErrorMessage.mjs";import{TwoButtonSubmitFooter as s}from"../shared/TwoButtonSubmitFooter.mjs";import{FormFields as l}from"../shared/FormFields.mjs";import{RouteContainer as c}from"../RouteContainer/RouteContainer.mjs";const{getAccountRecoveryInfoText:u,getSkipText:f}=t,p=({className:t,variation:r})=>{const{isPending:u}=m((e=>[e.isPending])),{handleChange:d,handleSubmit:h}=i(),{components:{ConfirmVerifyUser:{Header:E=p.Header,Footer:F=p.Footer}}}=n();return e.createElement(c,{className:t,variation:r},e.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-confirmverifyuser":"",method:"post",onChange:d,onSubmit:h},e.createElement(o,{as:"fieldset",direction:"column",isDisabled:u},e.createElement(E,null),e.createElement(o,{direction:"column"},e.createElement(l,null)),e.createElement(a,null),e.createElement(s,{cancelButtonText:f(),cancelButtonSendType:"SKIP"}),e.createElement(F,null))))};p.Header=function(){return e.createElement(r,{level:3},u())},p.Footer=function(){return null};export{p as ConfirmVerifyUser};
+import React__default from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+import { Heading } from '../../../primitives/Heading/Heading.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { useCustomComponents } from '../hooks/useCustomComponents/useCustomComponents.mjs';
+import { useFormHandlers } from '../hooks/useFormHandlers/useFormHandlers.mjs';
+import { RemoteErrorMessage } from '../shared/RemoteErrorMessage.mjs';
+import { TwoButtonSubmitFooter } from '../shared/TwoButtonSubmitFooter.mjs';
+import { FormFields } from '../shared/FormFields.mjs';
+import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
+
+const { getAccountRecoveryInfoText, getSkipText } = authenticatorTextUtil;
+const ConfirmVerifyUser = ({ className, variation, }) => {
+    const { isPending } = useAuthenticator((context) => [context.isPending]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const { components: { 
+    // @ts-ignore
+    ConfirmVerifyUser: { Header = ConfirmVerifyUser.Header, Footer = ConfirmVerifyUser.Footer, }, }, } = useCustomComponents();
+    return (React__default.createElement(RouteContainer, { className: className, variation: variation },
+        React__default.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmverifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__default.createElement(Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default.createElement(Header, null),
+                React__default.createElement(Flex, { direction: "column" },
+                    React__default.createElement(FormFields, null)),
+                React__default.createElement(RemoteErrorMessage, null),
+                React__default.createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText(), cancelButtonSendType: "SKIP" }),
+                React__default.createElement(Footer, null)))));
+};
+ConfirmVerifyUser.Header = function Header() {
+    return React__default.createElement(Heading, { level: 3 }, getAccountRecoveryInfoText());
+};
+ConfirmVerifyUser.Footer = function Footer() {
+    return null;
+};
+
+export { ConfirmVerifyUser };

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

@@ -1 +1,59 @@
-import e from"react";import{authenticatorTextUtil as t,defaultFormFieldOptions as r,translate as o,censorPhoneNumber as n,censorAllButFirstAndLast as i}from"@aws-amplify/ui";import{Flex as m}from"../../../primitives/Flex/Flex.mjs";import{Heading as a}from"../../../primitives/Heading/Heading.mjs";import{Radio as l}from"../../../primitives/Radio/Radio.mjs";import{RadioGroupField as s}from"../../../primitives/RadioGroupField/RadioGroupField.mjs";import{useAuthenticator as u}from"@aws-amplify/ui-react-core";import{useCustomComponents as c}from"../hooks/useCustomComponents/useCustomComponents.mjs";import{useFormHandlers as d}from"../hooks/useFormHandlers/useFormHandlers.mjs";import{RemoteErrorMessage as f}from"../shared/RemoteErrorMessage.mjs";import{TwoButtonSubmitFooter as p}from"../shared/TwoButtonSubmitFooter.mjs";import{RouteContainer as g}from"../RouteContainer/RouteContainer.mjs";const{getSkipText:v,getVerifyText:E,getVerifyContactText:h,getAccountRecoveryInfoText:y}=t,F=t=>Object.entries(t).map((([t,m])=>e.createElement(l,{name:"unverifiedAttr",value:t,key:t},((e,t)=>{const r=o(e);let m=t;if("Phone Number"===e)m=n(t);else if("Email"===e){const e=t.split("@");m=`${i(e[0])}@${e[1]}`}return`${r}: ${m}`})(r[t].label,m)))),b=({className:t,variation:r})=>{const{components:{VerifyUser:{Header:o=b.Header,Footer:n=b.Footer}}}=c(),{isPending:i,unverifiedContactMethods:a}=u((({isPending:e,unverifiedContactMethods:t})=>[e,t])),{handleChange:l,handleSubmit:y}=d(),C=i?e.createElement(e.Fragment,null,"Verifying…"):e.createElement(e.Fragment,null,E()),j=e.createElement(s,{label:h(),labelHidden:!0,name:"verify_context",isDisabled:i},F(a));return e.createElement(g,{className:t,variation:r},e.createElement("form",{"data-amplify-form":"","data-amplify-authenticator-verifyuser":"",method:"post",onChange:l,onSubmit:y},e.createElement(m,{as:"fieldset",direction:"column",isDisabled:i},e.createElement(o,null),j,e.createElement(f,null),e.createElement(p,{cancelButtonText:v(),cancelButtonSendType:"SKIP",submitButtonText:C}),e.createElement(n,null))))};b.Header=function(){return e.createElement(a,{level:3},y())},b.Footer=function(){return null};export{b as VerifyUser};
+import React__default from 'react';
+import { authenticatorTextUtil, defaultFormFieldOptions, translate, censorPhoneNumber, censorAllButFirstAndLast } from '@aws-amplify/ui';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+import { Heading } from '../../../primitives/Heading/Heading.mjs';
+import { Radio } from '../../../primitives/Radio/Radio.mjs';
+import { RadioGroupField } from '../../../primitives/RadioGroupField/RadioGroupField.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { useCustomComponents } from '../hooks/useCustomComponents/useCustomComponents.mjs';
+import { useFormHandlers } from '../hooks/useFormHandlers/useFormHandlers.mjs';
+import { RemoteErrorMessage } from '../shared/RemoteErrorMessage.mjs';
+import { TwoButtonSubmitFooter } from '../shared/TwoButtonSubmitFooter.mjs';
+import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
+
+const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
+const censorContactInformation = (type, value) => {
+    const translated = translate(type);
+    let newVal = value;
+    if (type === 'Phone Number') {
+        newVal = censorPhoneNumber(value);
+    }
+    else if (type === 'Email') {
+        const splitEmail = value.split('@');
+        const censoredName = censorAllButFirstAndLast(splitEmail[0]);
+        newVal = `${censoredName}@${splitEmail[1]}`;
+    }
+    return `${translated}: ${newVal}`;
+};
+const generateRadioGroup = (attributes) => {
+    return Object.entries(attributes).map(([key, value]) => (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key }, censorContactInformation(defaultFormFieldOptions[key].label, value))));
+};
+const VerifyUser = ({ className, variation, }) => {
+    const { components: { 
+    // @ts-ignore
+    VerifyUser: { Header = VerifyUser.Header, Footer = VerifyUser.Footer }, }, } = useCustomComponents();
+    const { isPending, unverifiedUserAttributes } = useAuthenticator(({ isPending, unverifiedUserAttributes }) => [
+        isPending,
+        unverifiedUserAttributes,
+    ]);
+    const { handleChange, handleSubmit } = useFormHandlers();
+    const footerSubmitText = isPending ? (React__default.createElement(React__default.Fragment, null, "Verifying\u2026")) : (React__default.createElement(React__default.Fragment, null, getVerifyText()));
+    const verificationRadioGroup = (React__default.createElement(RadioGroupField, { legend: getVerifyContactText(), name: "verify_context", isDisabled: isPending, legendHidden: true }, generateRadioGroup(unverifiedUserAttributes)));
+    return (React__default.createElement(RouteContainer, { className: className, variation: variation },
+        React__default.createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-verifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__default.createElement(Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__default.createElement(Header, null),
+                verificationRadioGroup,
+                React__default.createElement(RemoteErrorMessage, null),
+                React__default.createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText(), cancelButtonSendType: "SKIP", submitButtonText: footerSubmitText }),
+                React__default.createElement(Footer, null)))));
+};
+VerifyUser.Header = function Header() {
+    return React__default.createElement(Heading, { level: 3 }, getAccountRecoveryInfoText());
+};
+VerifyUser.Footer = function Footer() {
+    // @ts-ignore
+    return null;
+};
+
+export { VerifyUser };

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

@@ -1 +1,62 @@
-import{SignIn as e}from"../../SignIn/SignIn.mjs";import{SignUp as r}from"../../SignUp/SignUp.mjs";import{ConfirmSignUp as o}from"../../ConfirmSignUp/ConfirmSignUp.mjs";import{ForceNewPassword as s}from"../../ForceNewPassword/ForceNewPassword.mjs";import{SetupTOTP as m}from"../../SetupTOTP/SetupTOTP.mjs";import{ConfirmSignIn as i}from"../../ConfirmSignIn/ConfirmSignIn.mjs";import{ConfirmVerifyUser as t}from"../../VerifyUser/ConfirmVerifyUser.mjs";import{VerifyUser as d}from"../../VerifyUser/VerifyUser.mjs";import{ConfirmResetPassword as F}from"../../ResetPassword/ConfirmResetPassword.mjs";import{ResetPassword as n}from"../../ResetPassword/ResetPassword.mjs";const a={Header:()=>null,SignIn:{Header:e.Header,Footer:e.Footer},SignUp:{Header:r.Header,FormFields:r.FormFields,Footer:r.Footer},ConfirmSignUp:{Header:o.Header,Footer:o.Footer},SetupTOTP:{Header:m.Header,Footer:m.Footer},ConfirmResetPassword:{Header:F.Header,Footer:F.Footer},ConfirmSignIn:{Header:i.Header,Footer:i.Footer},VerifyUser:{Header:d.Header,Footer:d.Footer},ConfirmVerifyUser:{Header:t.Header,Footer:t.Footer},ForceNewPassword:{Header:s.Header,Footer:s.Footer,FormFields:s.FormFields},ResetPassword:{Header:n.Header,Footer:n.Footer},Footer:()=>null};export{a as defaultComponents};
+import { SignIn } from '../../SignIn/SignIn.mjs';
+import { SignUp } from '../../SignUp/SignUp.mjs';
+import { ConfirmSignUp } from '../../ConfirmSignUp/ConfirmSignUp.mjs';
+import { ForceNewPassword } from '../../ForceNewPassword/ForceNewPassword.mjs';
+import { SetupTotp } from '../../SetupTotp/SetupTotp.mjs';
+import { ConfirmSignIn } from '../../ConfirmSignIn/ConfirmSignIn.mjs';
+import { ConfirmVerifyUser } from '../../VerifyUser/ConfirmVerifyUser.mjs';
+import { VerifyUser } from '../../VerifyUser/VerifyUser.mjs';
+import { ConfirmResetPassword } from '../../ForgotPassword/ConfirmResetPassword.mjs';
+import { ResetPassword } from '../../ForgotPassword/ForgotPassword.mjs';
+
+const defaultComponents = {
+    // @ts-ignore
+    Header: () => null,
+    SignIn: {
+        Header: SignIn.Header,
+        Footer: SignIn.Footer,
+    },
+    SignUp: {
+        Header: SignUp.Header,
+        FormFields: SignUp.FormFields,
+        Footer: SignUp.Footer,
+    },
+    ConfirmSignUp: {
+        Header: ConfirmSignUp.Header,
+        Footer: ConfirmSignUp.Footer,
+    },
+    SetupTotp: {
+        Header: SetupTotp.Header,
+        Footer: SetupTotp.Footer,
+    },
+    ConfirmResetPassword: {
+        Header: ConfirmResetPassword.Header,
+        Footer: ConfirmResetPassword.Footer,
+    },
+    ConfirmSignIn: {
+        Header: ConfirmSignIn.Header,
+        Footer: ConfirmSignIn.Footer,
+    },
+    VerifyUser: {
+        Header: VerifyUser.Header,
+        Footer: VerifyUser.Footer,
+    },
+    ConfirmVerifyUser: {
+        Header: ConfirmVerifyUser.Header,
+        // @ts-ignore
+        Footer: ConfirmVerifyUser.Footer,
+    },
+    ForceNewPassword: {
+        Header: ForceNewPassword.Header,
+        Footer: ForceNewPassword.Footer,
+        FormFields: ForceNewPassword.FormFields,
+    },
+    ResetPassword: {
+        Header: ResetPassword.Header,
+        Footer: ResetPassword.Footer,
+    },
+    // @ts-ignore
+    Footer: () => null,
+};
+
+export { defaultComponents };

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

@@ -1 +1,14 @@
-import*as o from"react";const t=o.createContext(null),e=()=>{const e=o.useContext(t);if(!e)throw new Error("`useCustomComponents` cannot be used outside of a `CustomComponentsContext.Provider`");return e};export{t as CustomComponentsContext,e as useCustomComponents};
+import * as React from 'react';
+
+const CustomComponentsContext = 
+// @ts-ignore
+React.createContext(null);
+const useCustomComponents = () => {
+    const context = React.useContext(CustomComponentsContext);
+    if (!context) {
+        throw new Error('`useCustomComponents` cannot be used outside of a `CustomComponentsContext.Provider`');
+    }
+    return context;
+};
+
+export { CustomComponentsContext, useCustomComponents };

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

@@ -1 +1,30 @@
-import{useCallback as e}from"react";import{getFormDataFromEvent as t}from"../../../../helpers/utils.mjs";import{useAuthenticator as r}from"@aws-amplify/ui-react-core";function a(){const{submitForm:a,updateBlur:m,updateForm:u}=r((e=>[e.submitForm,e.updateBlur,e.updateForm]));return{handleBlur:e((({target:{name:e}})=>{m({name:e})}),[m]),handleChange:e((({target:{checked:e,name:t,type:r,value:a}})=>{u({name:t,value:"checkbox"===r&&!e?void 0:a})}),[u]),handleSubmit:e((e=>{e.preventDefault(),a(t(e))}),[a])}}export{a as useFormHandlers};
+import { useCallback } from 'react';
+import { getFormDataFromEvent } from '../../../../helpers/utils.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+
+function useFormHandlers() {
+    const { submitForm, updateBlur, updateForm } = useAuthenticator((context) => [
+        context.submitForm,
+        context.updateBlur,
+        context.updateForm,
+    ]);
+    const handleBlur = useCallback(({ target: { name } }) => {
+        updateBlur({ name });
+    }, [updateBlur]);
+    // @TODO: align multiple input type handling with react docs example for 3.0 release
+    // example: https://reactjs.org/docs/forms.html#handling-multiple-inputs
+    const handleChange = useCallback(({ target: { checked, name, type, value }, }) => {
+        const isUncheckedCheckbox = type === 'checkbox' && !checked;
+        updateForm({
+            name,
+            value: isUncheckedCheckbox ? undefined : value,
+        });
+    }, [updateForm]);
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        submitForm(getFormDataFromEvent(event));
+    }, [submitForm]);
+    return { handleBlur, handleChange, handleSubmit };
+}
+
+export { useFormHandlers };

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

@@ -1 +1,18 @@
-import t from"react";import{authenticatorTextUtil as i}from"@aws-amplify/ui";import{useAuthenticator as e}from"@aws-amplify/ui-react-core";import{Button as n}from"../../../primitives/Button/Button.mjs";import{Flex as o}from"../../../primitives/Flex/Flex.mjs";const{getConfirmText:r,getConfirmingText:m,getBackToSignInText:a}=i,l=()=>{const{isPending:i,toSignIn:l}=e((t=>[t.isPending,t.toSignIn]));return t.createElement(o,{direction:"column"},t.createElement(n,{isDisabled:i,type:"submit",variation:"primary",fontWeight:"normal",isLoading:i,loadingText:m()},r()),t.createElement(n,{onClick:l,type:"button",variation:"link",fontWeight:"normal",size:"small"},a()))};export{l as ConfirmSignInFooter};
+import React__default from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { Button } from '../../../primitives/Button/Button.mjs';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+
+const { getConfirmText, getConfirmingText, getBackToSignInText } = authenticatorTextUtil;
+const ConfirmSignInFooter = () => {
+    const { isPending, toSignIn } = useAuthenticator((context) => [
+        context.isPending,
+        context.toSignIn,
+    ]);
+    return (React__default.createElement(Flex, { direction: "column" },
+        React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", fontWeight: "normal", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
+        React__default.createElement(Button, { onClick: toSignIn, type: "button", variation: "link", fontWeight: "normal", size: "small" }, getBackToSignInText())));
+};
+
+export { ConfirmSignInFooter };

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

@@ -1 +1,35 @@
-import{__rest as e}from"tslib";import*as r from"react";import{getErrors as t}from"@aws-amplify/ui";import{PasswordField as a}from"../../../primitives/PasswordField/PasswordField.mjs";import{PhoneNumberField as i}from"../../../primitives/PhoneNumberField/PhoneNumberField.mjs";import{TextField as o}from"../../../primitives/TextField/TextField.mjs";import{useAuthenticator as m}from"@aws-amplify/ui-react-core";import{useStableId as s}from"../../../primitives/utils/useStableId.mjs";import{ValidationErrors as l}from"../../shared/ValidationErrors.mjs";function d(d){var{autocomplete:n,dialCode:p,name:c,type:u}=d,f=e(d,["autocomplete","dialCode","name","type"]);const{validationErrors:E}=m((({validationErrors:e})=>[e])),b=r.useMemo((()=>t(E[c])),[c,E]),y=(null==b?void 0:b.length)>0,g=s(),v=y?g:void 0;return"tel"===u?r.createElement(r.Fragment,null,r.createElement(i,Object.assign({},f,{name:c,defaultDialCode:p,dialCodeName:"country_code",autoComplete:n,hasError:y,"aria-describedby":v})),r.createElement(l,{dataAttr:"data-amplify-sign-up-errors",errors:b,id:g})):"password"===u?r.createElement(r.Fragment,null,r.createElement(a,Object.assign({},f,{name:c,autoComplete:n,hasError:y,"aria-describedby":v})),r.createElement(l,{dataAttr:"data-amplify-sign-up-errors",errors:b,id:g})):r.createElement(r.Fragment,null,r.createElement(o,Object.assign({},f,{name:c,autoComplete:n,hasError:y,type:u,"aria-describedby":v})),r.createElement(l,{dataAttr:"data-amplify-sign-up-errors",errors:b,id:g}))}export{d as FormField};
+import * as React from 'react';
+import { getErrors } from '@aws-amplify/ui';
+import { PasswordField } from '../../../primitives/PasswordField/PasswordField.mjs';
+import { PhoneNumberField } from '../../../primitives/PhoneNumberField/PhoneNumberField.mjs';
+import { TextField } from '../../../primitives/TextField/TextField.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { useStableId } from '../../../primitives/utils/useStableId.mjs';
+import { ValidationErrors } from '../../shared/ValidationErrors.mjs';
+
+function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props }) {
+    const { validationErrors } = useAuthenticator(({ validationErrors }) => [
+        validationErrors,
+    ]);
+    const errors = React.useMemo(() => getErrors(validationErrors[name]), [name, validationErrors]);
+    const hasError = errors?.length > 0;
+    const errorId = useStableId();
+    const ariaDescribedBy = hasError ? errorId : undefined;
+    if (type === 'tel') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(PhoneNumberField, { ...props, name: name, defaultDialCode: dialCode, dialCodeName: "country_code", autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
+            React.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
+    }
+    else if (type === 'password') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(PasswordField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, "aria-describedby": ariaDescribedBy }),
+            React.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
+    }
+    else {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(TextField, { ...props, name: name, autoComplete: autoComplete, hasError: hasError, type: type, "aria-describedby": ariaDescribedBy }),
+            React.createElement(ValidationErrors, { dataAttr: "data-amplify-sign-up-errors", errors: errors, id: errorId })));
+    }
+}
+
+export { FormField };

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

@@ -1 +1,15 @@
-import*as e from"react";import{FormField as r}from"./FormField.mjs";import{useAuthenticator as t}from"@aws-amplify/ui-react-core";function m(){const{fields:m}=t((({route:e})=>[e])),o=e.useRef(m.map(((t,m)=>e.createElement(r,Object.assign({key:m},t))))).current;return e.createElement(e.Fragment,null,o)}export{m as FormFields};
+import * as React from 'react';
+import { FormField } from './FormField.mjs';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+
+function FormFields() {
+    const { fields } = useAuthenticator(({ route }) => [route]);
+    const formFields = React.useRef(fields.map((field, index) => (React.createElement(FormField
+    // use index for key, field order is static
+    , { 
+        // use index for key, field order is static
+        key: index, ...field })))).current;
+    return React.createElement(React.Fragment, null, formFields);
+}
+
+export { FormFields };

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

@@ -1 +1,11 @@
-import r from"react";import{translate as e}from"@aws-amplify/ui";import{useAuthenticator as t}from"@aws-amplify/ui-react-core";import{Alert as i}from"../../../primitives/Alert/Alert.mjs";const m=()=>{const{error:m}=t((r=>[r.error]));return r.createElement(r.Fragment,null,m?r.createElement(i,{variation:"error",isDismissible:!0},e(m)):null)};export{m as RemoteErrorMessage};
+import React__default from 'react';
+import { translate } from '@aws-amplify/ui';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { Alert } from '../../../primitives/Alert/Alert.mjs';
+
+const RemoteErrorMessage = () => {
+    const { error } = useAuthenticator((context) => [context.error]);
+    return (React__default.createElement(React__default.Fragment, null, error ? (React__default.createElement(Alert, { variation: "error", isDismissible: true }, translate(error))) : null));
+};
+
+export { RemoteErrorMessage };

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

@@ -1 +1,27 @@
-import e from"react";import{authenticatorTextUtil as t}from"@aws-amplify/ui";import{useAuthenticator as n}from"@aws-amplify/ui-react-core";import{Tabs as i,TabItem as r}from"../../../primitives/Tabs/Tabs.mjs";import{View as o}from"../../../primitives/View/View.mjs";import{SignIn as a}from"../SignIn/SignIn.mjs";import{SignUp as m}from"../SignUp/SignUp.mjs";import{RouteContainer as l}from"../RouteContainer/RouteContainer.mjs";const{getSignInTabText:p,getSignUpTabText:s}=t,c=({className:t,hideSignUp:c,variation:g})=>{const{route:u,toSignIn:f,toSignUp:S}=n((e=>[e.route,e.toSignIn,e.toSignUp]));return e.createElement(l,{className:t,variation:g},c?e.createElement(o,{"data-amplify-router-content":""},"signIn"===u&&e.createElement(a,null)):e.createElement(i,{indicatorPosition:"top",currentIndex:"signIn"===u?0:1,spacing:"equal",justifyContent:"center",onChange:()=>"signIn"===u?S():f()},e.createElement(r,{title:p()},e.createElement(o,{"data-amplify-router-content":""},"signIn"===u&&e.createElement(a,null))),e.createElement(r,{title:s()},e.createElement(o,{"data-amplify-router-content":""},"signUp"===u&&e.createElement(m,null)))))};export{c as SignInSignUpTabs};
+import React__default from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { Tabs } from '../../../primitives/Tabs/Tabs.mjs';
+import { View } from '../../../primitives/View/View.mjs';
+import { SignIn } from '../SignIn/SignIn.mjs';
+import { SignUp } from '../SignUp/SignUp.mjs';
+import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
+
+const { getSignInTabText, getSignUpTabText } = authenticatorTextUtil;
+const SignInSignUpTabs = ({ className, hideSignUp, variation, }) => {
+    const { route, toSignIn, toSignUp } = useAuthenticator((context) => [
+        context.route,
+        context.toSignIn,
+        context.toSignUp,
+    ]);
+    return (React__default.createElement(RouteContainer, { className: className, variation: variation }, hideSignUp ? (React__default.createElement(View, { "data-amplify-router-content": "" }, route === 'signIn' && React__default.createElement(SignIn, null))) : (React__default.createElement(Tabs.Container, { value: route, isLazy: true, onValueChange: () => (route === 'signIn' ? toSignUp() : toSignIn()) },
+        React__default.createElement(Tabs.List, { spacing: "equal", indicatorPosition: "top" },
+            React__default.createElement(Tabs.Item, { value: "signIn" }, getSignInTabText()),
+            React__default.createElement(Tabs.Item, { value: "signUp" }, getSignUpTabText())),
+        React__default.createElement(Tabs.Panel, { value: "signIn", "data-amplify-router-content": "" },
+            React__default.createElement(SignIn, null)),
+        React__default.createElement(Tabs.Panel, { value: "signUp", "data-amplify-router-content": "" },
+            React__default.createElement(SignUp, null))))));
+};
+
+export { SignInSignUpTabs };

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

@@ -1 +1,35 @@
-import e from"react";import{authenticatorTextUtil as t}from"@aws-amplify/ui";import{useAuthenticator as i}from"@aws-amplify/ui-react-core";import{Button as n}from"../../../primitives/Button/Button.mjs";import{Flex as r}from"../../../primitives/Flex/Flex.mjs";const{getSubmitText:a,getSubmittingText:m}=t,o=t=>{const{cancelButtonSendType:o,cancelButtonText:l,submitButtonText:c}=t,{isPending:s,resendCode:u,skipVerification:p,toSignIn:f}=i((e=>[e.isPending])),g=s?e.createElement(e.Fragment,null,m(),"…"):e.createElement(e.Fragment,null,a()),b=null!=c?c:g;return e.createElement(r,{direction:"column"},e.createElement(n,{fontWeight:"normal",variation:"primary",isDisabled:s,type:"submit"},b),e.createElement(n,{onClick:()=>{switch(o){case"SKIP":p();break;case"RESEND":u();break;case"SIGN_IN":f();break;default:return}},type:"button",variation:"link",fontWeight:"normal",size:"small"},l))};export{o as TwoButtonSubmitFooter};
+import React__default from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { useAuthenticator } from '@aws-amplify/ui-react-core';
+import { Button } from '../../../primitives/Button/Button.mjs';
+import { Flex } from '../../../primitives/Flex/Flex.mjs';
+
+const { getSubmitText, getSubmittingText } = authenticatorTextUtil;
+const TwoButtonSubmitFooter = (props) => {
+    const { cancelButtonSendType, cancelButtonText, submitButtonText } = props;
+    const { isPending, resendCode, skipVerification, toSignIn } = useAuthenticator((context) => [context.isPending]);
+    const onClick = () => {
+        switch (cancelButtonSendType) {
+            case 'SKIP':
+                skipVerification();
+                break;
+            case 'RESEND':
+                resendCode();
+                break;
+            case 'SIGN_IN':
+                toSignIn();
+                break;
+            default:
+                return;
+        }
+    };
+    const defaultSubmitText = isPending ? (React__default.createElement(React__default.Fragment, null,
+        getSubmittingText(),
+        "\u2026")) : (React__default.createElement(React__default.Fragment, null, getSubmitText()));
+    const submitText = submitButtonText ?? defaultSubmitText;
+    return (React__default.createElement(Flex, { direction: "column" },
+        React__default.createElement(Button, { fontWeight: "normal", variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
+        React__default.createElement(Button, { onClick: onClick, type: "button", variation: "link", fontWeight: "normal", size: "small" }, cancelButtonText)));
+};
+
+export { TwoButtonSubmitFooter };

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

@@ -1 +1,3 @@
-const n=n=>"signIn"===n||"signUp"===n;export{n as isSignInOrSignUpRoute};
+const isSignInOrSignUpRoute = (route) => route === 'signIn' || route === 'signUp';
+
+export { isSignInOrSignUpRoute };

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

@@ -1 +1,14 @@
-import t from"react";import{Authenticator as e}from"./Authenticator.mjs";function r(r,n={}){const{variation:o="modal"}=n;return function(a){return t.createElement(e,Object.assign({variation:o},n),(e=>t.createElement(r,Object.assign({},a,e))))}}export{r as withAuthenticator};
+import React__default from 'react';
+import { Authenticator } from './Authenticator.mjs';
+
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
+ */
+function withAuthenticator(Component, options = {}) {
+    const { variation = 'modal' } = options;
+    return function WrappedWithAuthenticator(props) {
+        return (React__default.createElement(Authenticator, { variation: variation, ...options }, (withAuthenticatorProps) => (React__default.createElement(Component, { ...props, ...withAuthenticatorProps }))));
+    };
+}
+
+export { withAuthenticator };

package/dist/esm/components/ThemeProvider/ThemeContext.mjs

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createTheme } from '@aws-amplify/ui';
+
+const ThemeContext = React.createContext({
+    theme: createTheme(),
+});
+
+export { ThemeContext };