@aws-amplify/ui-react-core 3.4.1 → 3.4.3

package/dist/types/types/index.d.ts

@@ -1 +1 @@
-export { AnyComponent, MergeProps } from './types';
+export type { AnyComponent, MergeProps } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "3.4.1",
+  "version": "3.4.3",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "src/index.ts",
@@ -40,14 +40,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.10.1",
+    "@aws-amplify/ui": "6.10.3",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "react-hook-form": "^7.53.2",
     "xstate": "^4.33.6"
   },
   "peerDependencies": {
-    "aws-amplify": "^6.9.0",
+    "aws-amplify": "^6.14.3",
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "sideEffects": false

package/src/Authenticator/context/AuthenticatorContext.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { AuthInterpreter, AuthStatus } from '@aws-amplify/ui';
+import type { AuthInterpreter, AuthStatus } from '@aws-amplify/ui';
 
 /**
  * Authenticator React.Context type

package/src/Authenticator/context/AuthenticatorProvider.tsx

@@ -1,10 +1,10 @@
-import React, { ReactNode, useContext, useEffect, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { useInterpret } from '@xstate/react';
 
 import { getCurrentUser } from 'aws-amplify/auth';
+import type { AuthStatus, AuthMachineHubHandler } from '@aws-amplify/ui';
 import {
-  AuthStatus,
-  AuthMachineHubHandler,
   createAuthenticatorMachine,
   defaultAuthHubHandler,
   listenToAuthHub,

package/src/Authenticator/hooks/constants.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   AuthenticatorRouteComponentKey,
   AuthenticatorRouteComponentName,
 } from './types';

package/src/Authenticator/hooks/types.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import type React from 'react';
 
-import {
+import type {
   ChallengeName,
   AuthenticatorServiceFacade,
   LegacyFormFieldOptions,
 } from '@aws-amplify/ui';
 
-import { UseAuthenticator } from './useAuthenticator';
+import type { UseAuthenticator } from './useAuthenticator';
 
 export type AuthenticatorRouteComponentKey =
   | 'confirmResetPassword'

package/src/Authenticator/hooks/useAuthenticator/__mock__/useAuthenticator.ts

@@ -1,8 +1,8 @@
-import {
+import type {
   AuthenticatorLegacyFields,
   AuthenticatorMachineContext,
 } from '../../types';
-import { UseAuthenticator } from '../types';
+import type { UseAuthenticator } from '../types';
 
 const allowedMfaTypes = [
   'EMAIL',

package/src/Authenticator/hooks/useAuthenticator/index.ts

@@ -1,2 +1,2 @@
 export { default as useAuthenticator } from './useAuthenticator';
-export { UseAuthenticator, UseAuthenticatorSelector } from './types';
+export type { UseAuthenticator, UseAuthenticatorSelector } from './types';

package/src/Authenticator/hooks/useAuthenticator/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   AuthenticatorServiceFacade,
   LegacyFormFieldOptions,
 } from '@aws-amplify/ui';

package/src/Authenticator/hooks/useAuthenticator/useAuthenticator.ts

@@ -1,11 +1,12 @@
 import React, { useCallback } from 'react';
 import { useSelector } from '@xstate/react';
-import { AuthMachineState, getServiceFacade } from '@aws-amplify/ui';
+import type { AuthMachineState } from '@aws-amplify/ui';
+import { getServiceFacade } from '@aws-amplify/ui';
 
 import { AuthenticatorContext } from '../../context';
 
 import { USE_AUTHENTICATOR_ERROR } from './constants';
-import { UseAuthenticatorSelector, UseAuthenticator } from './types';
+import type { UseAuthenticatorSelector, UseAuthenticator } from './types';
 import {
   defaultComparator,
   getComparator,

package/src/Authenticator/hooks/useAuthenticator/utils.ts

@@ -1,21 +1,26 @@
-import {
-  areEmptyArrays,
-  areEmptyObjects,
+import type {
   AuthenticatorRoute,
   AuthMachineState,
   FormFieldsArray,
-  getSortedFormFields,
   UnverifiedUserAttributes,
+  AuthMFAType,
+} from '@aws-amplify/ui';
+import {
+  areEmptyArrays,
+  areEmptyObjects,
+  getSortedFormFields,
   getActorContext,
   isString,
-  AuthMFAType,
   authenticatorTextUtil,
 } from '@aws-amplify/ui';
 
-import { AuthenticatorLegacyField, AuthenticatorLegacyFields } from '../types';
+import type {
+  AuthenticatorLegacyField,
+  AuthenticatorLegacyFields,
+} from '../types';
 import { isComponentRouteKey } from '../utils';
 
-import { Comparator, UseAuthenticatorSelector } from './types';
+import type { Comparator, UseAuthenticatorSelector } from './types';
 
 export const defaultComparator = (): false => false;
 

package/src/Authenticator/hooks/useAuthenticatorInitMachine/useAuthenticatorInitMachine.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { AuthenticatorMachineOptions } from '@aws-amplify/ui';
+import type { AuthenticatorMachineOptions } from '@aws-amplify/ui';
 
-import {
-  useAuthenticator,
-  UseAuthenticatorSelector,
-} from '../useAuthenticator';
+import type { UseAuthenticatorSelector } from '../useAuthenticator';
+import { useAuthenticator } from '../useAuthenticator';
 
 // only select `route` from machine context
 export const routeSelector: UseAuthenticatorSelector = ({ route }) => [route];

package/src/Authenticator/hooks/useAuthenticatorRoute/constants.ts

@@ -1,8 +1,8 @@
-import {
+import type {
   AuthenticatorMachineContextKey,
   AuthenticatorRouteComponentKey,
 } from '../types';
-import {
+import type {
   CommonRouteMachineKey,
   ConfirmResetPasswordMachineKey,
   ConfirmSignInMachineKey,

package/src/Authenticator/hooks/useAuthenticatorRoute/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   AuthenticatorMachineContext,
   AuthenticatorMachineContextKey,
   AuthenticatorRouteComponentName,

package/src/Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useAuthenticator } from '../useAuthenticator';
 
-import {
+import type {
   UseAuthenticatorRoute,
   UseAuthenticatorRouteDefault,
   UseAuthenticatorRouteParams,

package/src/Authenticator/hooks/useAuthenticatorRoute/utils.ts

@@ -1,7 +1,7 @@
-import { AuthenticatorRoute } from '@aws-amplify/ui';
+import type { AuthenticatorRoute } from '@aws-amplify/ui';
 
 import { RenderNothing } from '../../../components';
-import {
+import type {
   AuthenticatorMachineContext,
   AuthenticatorMachineContextKey,
   AuthenticatorRouteComponentKey,
@@ -10,13 +10,13 @@ import {
   Defaults,
 } from '../types';
 
-import {
+import type {
   UseAuthenticator,
   UseAuthenticatorSelector,
 } from '../useAuthenticator';
 import { isComponentRouteKey } from '../utils';
 import { MACHINE_PROP_KEYS, EVENT_HANDLER_KEY_MAP } from './constants';
-import {
+import type {
   ConvertedMachineProps,
   FormEventHandlerMachineKey,
   FormEventHandlerPropKey,

package/src/Authenticator/hooks/utils.ts

@@ -1,7 +1,11 @@
-import { AuthenticatorRoute } from '@aws-amplify/ui';
+import type { AuthenticatorRoute } from '@aws-amplify/ui';
 
 import { COMPONENT_ROUTE_KEYS, COMPONENT_ROUTE_NAMES } from './constants';
-import { AuthenticatorRouteComponentKey, Defaults, Overrides } from './types';
+import type {
+  AuthenticatorRouteComponentKey,
+  Defaults,
+  Overrides,
+} from './types';
 
 export const isComponentRouteKey = (
   route: AuthenticatorRoute

package/src/Authenticator/index.ts

@@ -1,23 +1,22 @@
 export { AuthenticatorProvider, AuthenticatorContext } from './context';
+export type { UseAuthenticator, UseAuthenticatorRoute } from './hooks';
 export {
   resolveAuthenticatorComponents,
   useAuthenticator,
   useAuthenticatorRoute,
-  UseAuthenticator,
   useAuthenticatorInitMachine,
-  UseAuthenticatorRoute,
 } from './hooks';
-export {
+export type {
   Overrides as AuthenticatorComponentOverrides,
   Defaults as AuthenticatorComponentDefaults,
   DefaultProps as AuthenticatorComponentDefaultProps,
   FooterComponent as AuthenticatorFooterComponent,
   FormFieldsComponent as AuthenticatorFormFieldsComponent,
   HeaderComponent as AuthenticatorHeaderComponent,
-  isComponentRouteKey as isAuthenticatorComponentRouteKey,
   AuthenticatorRouteComponentKey,
   AuthenticatorRouteComponentName,
   AuthenticatorLegacyField,
   AuthenticatorMachineContext,
   FormFieldsComponent,
 } from './hooks';
+export { isComponentRouteKey as isAuthenticatorComponentRouteKey } from './hooks';

package/src/components/FormCore/FormProvider.tsx

@@ -4,7 +4,7 @@ import {
   FormProvider as ReactHookFormProvider,
 } from 'react-hook-form';
 
-import { FormValues, FormHandle, FormProviderProps } from './types';
+import type { FormValues, FormHandle, FormProviderProps } from './types';
 
 const DEFAULT_MODE = 'onTouched';
 

package/src/components/FormCore/index.ts

@@ -1,4 +1,4 @@
-export {
+export type {
   FormProviderProps,
   FormValues,
   FormHandle,

package/src/components/FormCore/types.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { DefaultValues } from 'react-hook-form';
+import type React from 'react';
+import type { DefaultValues } from 'react-hook-form';
 
 export interface FormValues {
   [k: string]: string;
@@ -63,7 +63,7 @@ export interface RegisterFieldParams<Values extends FormValues = FormValues> {
 
 export interface UseFormParams<
   Values extends FormValues = FormValues,
-  OnSubmit extends SubmitHandler<Values> = SubmitHandler<Values>
+  OnSubmit extends SubmitHandler<Values> = SubmitHandler<Values>,
 > {
   /**
    * Custom error message provided to `Error` on call to `useForm` outside `FormProvider`
@@ -193,7 +193,7 @@ export interface UseField<Name extends string = string>
 export interface UseFieldParams<
   OnBlur extends FocusHandler | undefined,
   OnChange extends ChangeHandler | undefined,
-  Values extends FormValues = FormValues
+  Values extends FormValues = FormValues,
 > {
   /**
    * Controlled `disabled` state
@@ -252,7 +252,7 @@ export interface UseFieldParams<
  */
 export interface UseControlledFieldParams<
   OnBlur extends FocusHandler | undefined,
-  Values extends FormValues = FormValues
+  Values extends FormValues = FormValues,
 > extends Omit<UseFieldParams<OnBlur, undefined, Values>, 'onChange'> {
   /**
    * Controlled text change event handler

package/src/components/FormCore/useControlledField.ts

@@ -1,6 +1,6 @@
 import { useController } from 'react-hook-form';
 
-import {
+import type {
   FormValues,
   FocusHandler,
   UseControlledField,

package/src/components/FormCore/useField.ts

@@ -1,5 +1,10 @@
 import useForm from './useForm';
-import { ChangeHandler, FocusHandler, UseField, UseFieldParams } from './types';
+import type {
+  ChangeHandler,
+  FocusHandler,
+  UseField,
+  UseFieldParams,
+} from './types';
 
 export const DEFAULT_ERROR_MESSAGE =
   '`useField` must be used within a `FormProvider`';
@@ -12,7 +17,7 @@ export const DEFAULT_ERROR_MESSAGE =
  */
 export default function useField<
   OnBlur extends FocusHandler,
-  OnChange extends ChangeHandler
+  OnChange extends ChangeHandler,
 >(params: UseFieldParams<OnBlur, OnChange>): UseField {
   const { getFieldState, registerField } = useForm({
     errorMessage: DEFAULT_ERROR_MESSAGE,

package/src/components/FormCore/useForm.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { noop } from '@aws-amplify/ui';
 
-import {
+import type {
   FormValues,
   RegisterFieldParams,
   SetFormValueParams,
@@ -25,7 +25,7 @@ export const DEFAULT_ERROR_MESSAGE =
  */
 export default function useForm<
   Values extends FormValues = FormValues,
-  OnSubmit extends SubmitHandler = SubmitHandler
+  OnSubmit extends SubmitHandler = SubmitHandler,
 >(options: UseFormParams<Values, OnSubmit> = {}): UseForm<Values> {
   const formContext = useFormContext();
   const { errorMessage, onSubmit: _onSubmit } = options;

package/src/components/FormCore/withFormProvider.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { AnyComponent } from '../../types';
+import type { AnyComponent } from '../../types';
 
 import FormProvider from './FormProvider';
-import { FormHandle, FormProviderProps } from './types';
+import type { FormHandle, FormProviderProps } from './types';
 
 /**
  * @param Child `Form` base component wrapped inside `FormProvider`

package/src/components/index.ts

@@ -1,15 +1,12 @@
-export {
-  FormProvider,
+export type {
   FormProviderProps,
   FormValues,
   FormHandle,
   SubmitHandler,
-  useField,
-  useForm,
   UseForm,
   Validate,
   Validator,
-  withFormProvider,
 } from './FormCore';
+export { FormProvider, useField, useForm, withFormProvider } from './FormCore';
 
 export { RenderNothing } from './RenderNothing';

package/src/elements/ElementsContext.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ElementDisplayName } from './types';
+import type { ElementDisplayName } from './types';
 
 /**
  * @internal @unstable

package/src/elements/defineBaseElement.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ElementsContext } from './ElementsContext';
-import {
+import type {
   BaseElement,
   BaseElementProps,
   BaseElementWithRef,

package/src/elements/types.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 /**
  * @internal @unstable

package/src/elements/utils.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export function isComponent<T>(
   component?: React.ComponentType<T> | React.ForwardRefExoticComponent<T>

package/src/elements/withBaseElementProps.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseElementWithRef, ElementRefType } from './types';
+import type { BaseElementWithRef, ElementRefType } from './types';
 
 /**
  * @internal @unstable

package/src/hooks/index.ts

@@ -1,16 +1,10 @@
-export {
-  useDataState,
-  AsyncDataAction,
-  DataAction,
-  DataState,
-} from './useDataState';
-
 export { default as useControlledReducer } from './useControlledReducer';
-export { default as useDropZone, UseDropZoneParams } from './useDropZone';
-export {
-  default as useDeprecationWarning,
-  UseDeprecationWarning,
-} from './useDeprecationWarning';
+export type { UseDropZoneParams } from './useDropZone';
+export { default as useDropZone } from './useDropZone';
+export type { AsyncReducer, AsyncReducerState } from './useAsyncReducer';
+export { default as useAsyncReducer } from './useAsyncReducer';
+export type { UseDeprecationWarning } from './useDeprecationWarning';
+export { default as useDeprecationWarning } from './useDeprecationWarning';
 export { default as useGetUrl } from './useGetUrl';
 export { default as useHasValueUpdated } from './useHasValueUpdated';
 export { default as usePreviousValue } from './usePreviousValue';

package/src/hooks/useAsyncReducer.ts

@@ -0,0 +1,111 @@
+import React from 'react';
+
+import { isFunction } from '@aws-amplify/ui';
+
+// async state constants
+const INITIAL = { hasError: false, isLoading: false, message: undefined };
+const LOADING = { hasError: false, isLoading: true, message: undefined };
+const ERROR = { hasError: true, isLoading: false };
+
+export interface AsyncReducerState<T> {
+  /**
+   * current value
+   */
+  value: T;
+  hasError: boolean;
+  isLoading: boolean;
+  /**
+   * error message, if any
+   */
+  message: string | undefined;
+}
+
+export type AsyncReducer<S, A> = (prevValue: S, action: A) => Promise<S>;
+
+/**
+ * @internal may be updated in future versions
+ *
+ * @description like `useReducer` but make it async
+ *
+ * @example
+ * ```ts
+ * import fetchData from './fetchData';
+ *
+ * type MyState = { data: string[] | undefined }
+ * const initialState: MyState = { data: undefined }
+ *
+ * type MyAction = { type: 'fetch' | 'clear' }
+ *
+ * const asyncReducer = async (state: MyState, action: MyAction): Promise<MyState> => {
+ *   switch(action.type) {
+ *     case 'fetch':
+ *       const data = await fetchData();
+ *       return { data: state.data ? state.data.concat(data) : data }
+ *     case 'clear':
+ *       return { data: undefined }
+ *   }
+ * }
+ *
+ * const FetchDataButton = () => {
+ *   const [state, dispatch] = useAsyncReducer(asyncReducer, initialState);
+ *
+ *   const { value: { data }, isLoading } = state;
+ *
+ *   return (
+ *     <button onClick={() => isLoading ? null : dispatch({ type: 'fetch'})}>
+ *       Fetch Data
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export default function useAsyncReducer<T, K>(
+  reducer: AsyncReducer<T, K>,
+  initialValue: T,
+  options?: {
+    onSuccess?: (data: T) => void;
+    onError?: (error: Error) => void;
+  }
+): [AsyncReducerState<T>, React.Dispatch<K>] {
+  const [state, setAsyncState] = React.useState<AsyncReducerState<T>>(() => ({
+    ...INITIAL,
+    value: initialValue,
+  }));
+
+  const prevValue = React.useRef(initialValue);
+  const pendingId = React.useRef<Symbol | undefined>();
+
+  const { onSuccess, onError } = options ?? {};
+
+  const dispatch: React.Dispatch<K> = React.useCallback(
+    (input) => {
+      const id = Symbol();
+      pendingId.current = id;
+
+      setAsyncState(({ value }) => ({ ...LOADING, value }));
+
+      reducer(prevValue.current, input)
+        .then((value: T) => {
+          if (pendingId.current !== id) return;
+
+          prevValue.current = value;
+
+          if (isFunction(onSuccess)) onSuccess(value);
+
+          setAsyncState({ ...INITIAL, value });
+        })
+        .catch((error: Error) => {
+          if (pendingId.current !== id) return;
+
+          if (isFunction(onError)) onError(error);
+
+          const { message } = error;
+
+          setAsyncState(({ value }) => ({ ...ERROR, value, message }));
+        });
+    },
+    [onError, onSuccess, reducer]
+  );
+
+  return [state, dispatch];
+}

package/src/hooks/useGetUrl.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-import {
-  getUrl,
+import type {
   GetUrlInput,
   GetUrlOutput,
   GetUrlWithPathInput,
 } from 'aws-amplify/storage';
+import { getUrl } from 'aws-amplify/storage';
 
 import { isFunction } from '@aws-amplify/ui';
 

package/src/hooks/useSetUserAgent.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { setUserAgent, SetUserAgentOptions } from '@aws-amplify/ui';
+import type { SetUserAgentOptions } from '@aws-amplify/ui';
+import { setUserAgent } from '@aws-amplify/ui';
 
 export default function useSetUserAgent({
   componentName,