@aws-amplify/ui-react-core 3.4.0 → 3.4.2

package/dist/esm/Authenticator/hooks/useAuthenticator/useAuthenticator.mjs

@@ -4,7 +4,7 @@ import { getServiceFacade } from '@aws-amplify/ui';
 import 'aws-amplify/auth';
 import { AuthenticatorContext } from '../../context/AuthenticatorContext.mjs';
 import { USE_AUTHENTICATOR_ERROR } from './constants.mjs';
-import { getQRFields, getMachineFields, getComparator, defaultComparator } from './utils.mjs';
+import { getComparator, defaultComparator, getQRFields, getMachineFields } from './utils.mjs';
 
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#useauthenticator-hook)

package/dist/esm/Authenticator/hooks/useAuthenticator/utils.mjs

@@ -1,4 +1,4 @@
-import { getActorContext, getSortedFormFields, isString, authenticatorTextUtil, areEmptyArrays, areEmptyObjects } from '@aws-amplify/ui';
+import { getActorContext, getSortedFormFields, areEmptyArrays, areEmptyObjects, isString, authenticatorTextUtil } from '@aws-amplify/ui';
 import { isComponentRouteKey } from '../utils.mjs';
 
 const defaultComparator = () => false;

package/dist/esm/hooks/useAsyncReducer.mjs

@@ -0,0 +1,78 @@
+import React__default 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 };
+/**
+ * @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>
+ *   )
+ * }
+ * ```
+ */
+function useAsyncReducer(reducer, initialValue, options) {
+    const [state, setAsyncState] = React__default.useState(() => ({
+        ...INITIAL,
+        value: initialValue,
+    }));
+    const prevValue = React__default.useRef(initialValue);
+    const pendingId = React__default.useRef();
+    const { onSuccess, onError } = options ?? {};
+    const dispatch = React__default.useCallback((input) => {
+        const id = Symbol();
+        pendingId.current = id;
+        setAsyncState(({ value }) => ({ ...LOADING, value }));
+        reducer(prevValue.current, input)
+            .then((value) => {
+            if (pendingId.current !== id)
+                return;
+            prevValue.current = value;
+            if (isFunction(onSuccess))
+                onSuccess(value);
+            setAsyncState({ ...INITIAL, value });
+        })
+            .catch((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];
+}
+
+export { useAsyncReducer as default };

package/dist/esm/hooks/useControlledReducer.mjs

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { isUndefined } from '@aws-amplify/ui';
+import useHasValueUpdated from './useHasValueUpdated.mjs';
+
+function useControlledReducer(reducer, initialState, options) {
+    const { controlledState, onStateChange } = options ?? {};
+    const [uncontrolledState, dispatch] = React__default.useReducer(reducer, controlledState ?? initialState);
+    const controlledStateRef = React__default.useRef();
+    if (!isUndefined(controlledState)) {
+        controlledStateRef.current = controlledState;
+    }
+    const hasUncontrolledStateChanged = useHasValueUpdated(uncontrolledState, true);
+    React__default.useEffect(() => {
+        // only run `onStateChange` if `uncontrolledState` has changed,
+        // ignore reference change to `onStateChange`
+        if (hasUncontrolledStateChanged) {
+            onStateChange?.(uncontrolledState);
+        }
+    }, [hasUncontrolledStateChanged, onStateChange, uncontrolledState]);
+    const state = controlledStateRef.current
+        ? controlledStateRef.current
+        : uncontrolledState;
+    return React__default.useMemo(() => [state, dispatch], [state]);
+}
+
+export { useControlledReducer as default };

package/dist/esm/index.mjs

@@ -9,12 +9,13 @@ export { default as useForm } from './components/FormCore/useForm.mjs';
 export { default as FormProvider } from './components/FormCore/FormProvider.mjs';
 export { default as withFormProvider } from './components/FormCore/withFormProvider.mjs';
 export { default as RenderNothing } from './components/RenderNothing/RenderNothing.mjs';
-export { default as useDataState } from './hooks/useDataState/useDataState.mjs';
+export { default as useControlledReducer } from './hooks/useControlledReducer.mjs';
+export { default as useDropZone } from './hooks/useDropZone.mjs';
+export { default as useAsyncReducer } from './hooks/useAsyncReducer.mjs';
 export { default as useDeprecationWarning } from './hooks/useDeprecationWarning.mjs';
 export { default as useGetUrl } from './hooks/useGetUrl.mjs';
 export { default as useHasValueUpdated } from './hooks/useHasValueUpdated.mjs';
 export { default as usePreviousValue } from './hooks/usePreviousValue.mjs';
 export { default as useSetUserAgent } from './hooks/useSetUserAgent.mjs';
 export { default as useTimeout } from './hooks/useTimeout.mjs';
-export { default as useDropZone } from './hooks/useDropZone.mjs';
 export { default as createContextUtilities } from './utils/createContextUtilities.mjs';

package/dist/index.js

@@ -605,99 +605,6 @@ function useAuthenticatorInitMachine(data) {
     }, [initializeMachine, route, data]);
 }
 
-// default state
-const INITIAL_STATE = { hasError: false, isLoading: false, message: undefined };
-const LOADING_STATE = { hasError: false, isLoading: true, message: undefined };
-const ERROR_STATE = { hasError: true, isLoading: false };
-const resolveMaybeAsync = async (value) => {
-    const awaited = await value;
-    return awaited;
-};
-/**
- * @internal may be updated in future versions
- */
-function useDataState(action, initialData, options) {
-    const [dataState, setDataState] = React__namespace["default"].useState(() => ({
-        ...INITIAL_STATE,
-        data: initialData,
-    }));
-    const prevData = React__namespace["default"].useRef(initialData);
-    const pendingId = React__namespace["default"].useRef();
-    const { onSuccess, onError } = options ?? {};
-    const handleAction = React__namespace["default"].useCallback((input) => {
-        const id = Symbol();
-        pendingId.current = id;
-        setDataState(({ data }) => ({ ...LOADING_STATE, data }));
-        resolveMaybeAsync(action(prevData.current, input))
-            .then((data) => {
-            if (pendingId.current !== id)
-                return;
-            prevData.current = data;
-            if (ui.isFunction(onSuccess))
-                onSuccess(data);
-            setDataState({ ...INITIAL_STATE, data });
-        })
-            .catch((error) => {
-            if (pendingId.current !== id)
-                return;
-            if (ui.isFunction(onError))
-                onError(error);
-            const { message } = error;
-            setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
-        });
-    }, [action, onError, onSuccess]);
-    return [dataState, handleAction];
-}
-
-/**
- * Logs a deprecation warning message.
- *
- * @important Please use the React/React Native specific platform implementations.
- * This version of the hook is a base implementation that the others extend from due
- * to env differences between running in RN or the browser
- */
-const useDeprecationWarning = ({ shouldWarn, message, }) => {
-    React__namespace.useEffect(() => {
-        if (shouldWarn) {
-            // eslint-disable-next-line no-console
-            console.warn(message);
-        }
-    }, [shouldWarn, message]);
-};
-
-const INIT_STATE = {
-    url: undefined,
-    expiresAt: undefined,
-    isLoading: true,
-};
-function useGetUrl(input) {
-    const [result, setResult] = React__namespace.useState(() => INIT_STATE);
-    React__namespace.useEffect(() => {
-        const { onError, ...getUrlInput } = input;
-        let ignore = false;
-        storage.getUrl(getUrlInput)
-            .then((response) => {
-            if (ignore) {
-                return;
-            }
-            setResult({ ...response, isLoading: false });
-        })
-            .catch((error) => {
-            if (ignore) {
-                return;
-            }
-            if (ui.isFunction(onError)) {
-                onError(error);
-            }
-            setResult({ ...INIT_STATE, isLoading: false });
-        });
-        return () => {
-            ignore = true;
-        };
-    }, [input]);
-    return result;
-}
-
 function usePreviousValue(value) {
     const previous = React.useRef(undefined);
     // update ref post render
@@ -730,33 +637,25 @@ function useHasValueUpdated(value, ignoreFirstRender = false) {
     return previous !== value;
 }
 
-function useSetUserAgent({ componentName, packageName, version, }) {
-    React.useEffect(() => {
-        const clearUserAgent = ui.setUserAgent({
-            componentName,
-            packageName,
-            version,
-        });
-        return clearUserAgent;
-    }, [componentName, packageName, version]);
-}
-
-function useTimeout({ callback, delay, }) {
-    const storedCallback = React__namespace["default"].useRef(callback);
-    React__namespace["default"].useLayoutEffect(() => {
-        storedCallback.current = callback;
-    }, [callback]);
+function useControlledReducer(reducer, initialState, options) {
+    const { controlledState, onStateChange } = options ?? {};
+    const [uncontrolledState, dispatch] = React__namespace["default"].useReducer(reducer, controlledState ?? initialState);
+    const controlledStateRef = React__namespace["default"].useRef();
+    if (!ui.isUndefined(controlledState)) {
+        controlledStateRef.current = controlledState;
+    }
+    const hasUncontrolledStateChanged = useHasValueUpdated(uncontrolledState, true);
     React__namespace["default"].useEffect(() => {
-        if (!ui.isFunction(storedCallback.current) || !delay) {
-            return;
+        // only run `onStateChange` if `uncontrolledState` has changed,
+        // ignore reference change to `onStateChange`
+        if (hasUncontrolledStateChanged) {
+            onStateChange?.(uncontrolledState);
         }
-        const timeoutId = setTimeout(() => {
-            storedCallback.current?.();
-        }, delay);
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [delay]);
+    }, [hasUncontrolledStateChanged, onStateChange, uncontrolledState]);
+    const state = controlledStateRef.current
+        ? controlledStateRef.current
+        : uncontrolledState;
+    return React__namespace["default"].useMemo(() => [state, dispatch], [state]);
 }
 
 function filterAllowedFiles(files, acceptedFileTypes) {
@@ -925,6 +824,158 @@ function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _
     };
 }
 
+// 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 };
+/**
+ * @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>
+ *   )
+ * }
+ * ```
+ */
+function useAsyncReducer(reducer, initialValue, options) {
+    const [state, setAsyncState] = React__namespace["default"].useState(() => ({
+        ...INITIAL,
+        value: initialValue,
+    }));
+    const prevValue = React__namespace["default"].useRef(initialValue);
+    const pendingId = React__namespace["default"].useRef();
+    const { onSuccess, onError } = options ?? {};
+    const dispatch = React__namespace["default"].useCallback((input) => {
+        const id = Symbol();
+        pendingId.current = id;
+        setAsyncState(({ value }) => ({ ...LOADING, value }));
+        reducer(prevValue.current, input)
+            .then((value) => {
+            if (pendingId.current !== id)
+                return;
+            prevValue.current = value;
+            if (ui.isFunction(onSuccess))
+                onSuccess(value);
+            setAsyncState({ ...INITIAL, value });
+        })
+            .catch((error) => {
+            if (pendingId.current !== id)
+                return;
+            if (ui.isFunction(onError))
+                onError(error);
+            const { message } = error;
+            setAsyncState(({ value }) => ({ ...ERROR, value, message }));
+        });
+    }, [onError, onSuccess, reducer]);
+    return [state, dispatch];
+}
+
+/**
+ * Logs a deprecation warning message.
+ *
+ * @important Please use the React/React Native specific platform implementations.
+ * This version of the hook is a base implementation that the others extend from due
+ * to env differences between running in RN or the browser
+ */
+const useDeprecationWarning = ({ shouldWarn, message, }) => {
+    React__namespace.useEffect(() => {
+        if (shouldWarn) {
+            // eslint-disable-next-line no-console
+            console.warn(message);
+        }
+    }, [shouldWarn, message]);
+};
+
+const INIT_STATE = {
+    url: undefined,
+    expiresAt: undefined,
+    isLoading: true,
+};
+function useGetUrl(input) {
+    const [result, setResult] = React__namespace.useState(() => INIT_STATE);
+    React__namespace.useEffect(() => {
+        const { onError, ...getUrlInput } = input;
+        let ignore = false;
+        storage.getUrl(getUrlInput)
+            .then((response) => {
+            if (ignore) {
+                return;
+            }
+            setResult({ ...response, isLoading: false });
+        })
+            .catch((error) => {
+            if (ignore) {
+                return;
+            }
+            if (ui.isFunction(onError)) {
+                onError(error);
+            }
+            setResult({ ...INIT_STATE, isLoading: false });
+        });
+        return () => {
+            ignore = true;
+        };
+    }, [input]);
+    return result;
+}
+
+function useSetUserAgent({ componentName, packageName, version, }) {
+    React.useEffect(() => {
+        const clearUserAgent = ui.setUserAgent({
+            componentName,
+            packageName,
+            version,
+        });
+        return clearUserAgent;
+    }, [componentName, packageName, version]);
+}
+
+function useTimeout({ callback, delay, }) {
+    const storedCallback = React__namespace["default"].useRef(callback);
+    React__namespace["default"].useLayoutEffect(() => {
+        storedCallback.current = callback;
+    }, [callback]);
+    React__namespace["default"].useEffect(() => {
+        if (!ui.isFunction(storedCallback.current) || !delay) {
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            storedCallback.current?.();
+        }, delay);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [delay]);
+}
+
 const INVALID_OPTIONS_MESSAGE = 'an `errorMessage` or a `defaultValue` must be provided in `options`';
 /**
  * Uses `ContextType`/`Name` generics and `options` to create:
@@ -1010,10 +1061,11 @@ exports.RenderNothing = RenderNothing;
 exports.createContextUtilities = createContextUtilities;
 exports.isAuthenticatorComponentRouteKey = isComponentRouteKey;
 exports.resolveAuthenticatorComponents = resolveAuthenticatorComponents;
+exports.useAsyncReducer = useAsyncReducer;
 exports.useAuthenticator = useAuthenticator;
 exports.useAuthenticatorInitMachine = useAuthenticatorInitMachine;
 exports.useAuthenticatorRoute = useAuthenticatorRoute;
-exports.useDataState = useDataState;
+exports.useControlledReducer = useControlledReducer;
 exports.useDeprecationWarning = useDeprecationWarning;
 exports.useDropZone = useDropZone;
 exports.useField = useField;

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

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

package/dist/types/hooks/useAsyncReducer.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+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>];

package/dist/types/hooks/useControlledReducer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function useControlledReducer<R extends React.Reducer<any, any>, S extends React.ReducerState<R>>(reducer: R, initialState: S, options?: {
+    controlledState?: S;
+    onStateChange?: (state: S) => void;
+}): [S, React.Dispatch<React.ReducerAction<R>>];

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { AuthenticatorComponentDefaults, AuthenticatorComponentDefaultProps, AuthenticatorComponentOverrides, AuthenticatorFooterComponent, AuthenticatorFormFieldsComponent, AuthenticatorHeaderComponent, AuthenticatorLegacyField, AuthenticatorMachineContext, AuthenticatorProvider, AuthenticatorRouteComponentKey, AuthenticatorRouteComponentName, isAuthenticatorComponentRouteKey, resolveAuthenticatorComponents, useAuthenticator, useAuthenticatorRoute, UseAuthenticator, useAuthenticatorInitMachine, UseAuthenticatorRoute, } from './Authenticator';
 export { FormProvider, FormProviderProps, RenderNothing, FormValues, FormHandle, useField, useForm, UseForm, Validate, Validator, withFormProvider, } from './components';
-export { AsyncDataAction, DataAction, useDeprecationWarning, UseDeprecationWarning, useGetUrl, useHasValueUpdated, usePreviousValue, useSetUserAgent, useTimeout, useDataState, DataState, useDropZone, UseDropZoneParams, } from './hooks';
+export { AsyncReducer, AsyncReducerState, useAsyncReducer, useControlledReducer, useDeprecationWarning, UseDeprecationWarning, useDropZone, UseDropZoneParams, useGetUrl, useHasValueUpdated, usePreviousValue, useSetUserAgent, useTimeout, } from './hooks';
 export { MergeProps } from './types';
 export { createContextUtilities } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "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.0",
+    "@aws-amplify/ui": "6.10.2",
     "@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/hooks/index.ts

@@ -1,10 +1,10 @@
+export { default as useControlledReducer } from './useControlledReducer';
+export { default as useDropZone, UseDropZoneParams } from './useDropZone';
 export {
-  useDataState,
-  AsyncDataAction,
-  DataAction,
-  DataState,
-} from './useDataState';
-
+  default as useAsyncReducer,
+  AsyncReducer,
+  AsyncReducerState,
+} from './useAsyncReducer';
 export {
   default as useDeprecationWarning,
   UseDeprecationWarning,
@@ -14,4 +14,3 @@ export { default as useHasValueUpdated } from './useHasValueUpdated';
 export { default as usePreviousValue } from './usePreviousValue';
 export { default as useSetUserAgent } from './useSetUserAgent';
 export { default as useTimeout } from './useTimeout';
-export { default as useDropZone, UseDropZoneParams } from './useDropZone';

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/useControlledReducer.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { isUndefined } from '@aws-amplify/ui';
+
+import useHasValueUpdated from './useHasValueUpdated';
+
+export default function useControlledReducer<
+  R extends React.Reducer<any, any>,
+  S extends React.ReducerState<R>,
+>(
+  reducer: R,
+  initialState: S,
+  options?: {
+    controlledState?: S;
+    onStateChange?: (state: S) => void;
+  }
+): [S, React.Dispatch<React.ReducerAction<R>>] {
+  const { controlledState, onStateChange } = options ?? {};
+
+  const [uncontrolledState, dispatch] = React.useReducer(
+    reducer,
+    controlledState ?? initialState
+  );
+
+  const controlledStateRef = React.useRef<S | undefined>();
+  if (!isUndefined(controlledState)) {
+    controlledStateRef.current = controlledState;
+  }
+
+  const hasUncontrolledStateChanged = useHasValueUpdated(
+    uncontrolledState,
+    true
+  );
+  React.useEffect(() => {
+    // only run `onStateChange` if `uncontrolledState` has changed,
+    // ignore reference change to `onStateChange`
+    if (hasUncontrolledStateChanged) {
+      onStateChange?.(uncontrolledState);
+    }
+  }, [hasUncontrolledStateChanged, onStateChange, uncontrolledState]);
+
+  const state = controlledStateRef.current
+    ? controlledStateRef.current
+    : uncontrolledState;
+
+  return React.useMemo(() => [state, dispatch], [state]);
+}

package/src/index.ts

@@ -35,19 +35,19 @@ export {
 } from './components';
 
 export {
-  AsyncDataAction,
-  DataAction,
+  AsyncReducer,
+  AsyncReducerState,
+  useAsyncReducer,
+  useControlledReducer,
   useDeprecationWarning,
   UseDeprecationWarning,
+  useDropZone,
+  UseDropZoneParams,
   useGetUrl,
   useHasValueUpdated,
   usePreviousValue,
   useSetUserAgent,
   useTimeout,
-  useDataState,
-  DataState,
-  useDropZone,
-  UseDropZoneParams,
 } from './hooks';
 
 export { MergeProps } from './types';

package/dist/esm/hooks/useDataState/useDataState.mjs

@@ -1,48 +0,0 @@
-import React__default from 'react';
-import { isFunction } from '@aws-amplify/ui';
-
-// default state
-const INITIAL_STATE = { hasError: false, isLoading: false, message: undefined };
-const LOADING_STATE = { hasError: false, isLoading: true, message: undefined };
-const ERROR_STATE = { hasError: true, isLoading: false };
-const resolveMaybeAsync = async (value) => {
-    const awaited = await value;
-    return awaited;
-};
-/**
- * @internal may be updated in future versions
- */
-function useDataState(action, initialData, options) {
-    const [dataState, setDataState] = React__default.useState(() => ({
-        ...INITIAL_STATE,
-        data: initialData,
-    }));
-    const prevData = React__default.useRef(initialData);
-    const pendingId = React__default.useRef();
-    const { onSuccess, onError } = options ?? {};
-    const handleAction = React__default.useCallback((input) => {
-        const id = Symbol();
-        pendingId.current = id;
-        setDataState(({ data }) => ({ ...LOADING_STATE, data }));
-        resolveMaybeAsync(action(prevData.current, input))
-            .then((data) => {
-            if (pendingId.current !== id)
-                return;
-            prevData.current = data;
-            if (isFunction(onSuccess))
-                onSuccess(data);
-            setDataState({ ...INITIAL_STATE, data });
-        })
-            .catch((error) => {
-            if (pendingId.current !== id)
-                return;
-            if (isFunction(onError))
-                onError(error);
-            const { message } = error;
-            setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
-        });
-    }, [action, onError, onSuccess]);
-    return [dataState, handleAction];
-}
-
-export { useDataState as default };

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

@@ -1,2 +0,0 @@
-export { default as useDataState } from './useDataState';
-export { AsyncDataAction, DataAction, DataState } from './types';

package/dist/types/hooks/useDataState/types.d.ts

@@ -1,8 +0,0 @@
-export interface DataState<T> {
-    data: T;
-    hasError: boolean;
-    isLoading: boolean;
-    message: string | undefined;
-}
-export type DataAction<T = any, K = any> = (prevData: T, input: K) => T;
-export type AsyncDataAction<T = any, K = any> = (prevData: T, input: K) => Promise<T>;

package/dist/types/hooks/useDataState/useDataState.d.ts

@@ -1,8 +0,0 @@
-import { AsyncDataAction, DataAction, DataState } from './types';
-/**
- * @internal may be updated in future versions
- */
-export default function useDataState<T, K>(action: DataAction<T, K> | AsyncDataAction<T, K>, initialData: T, options?: {
-    onSuccess?: (data: T) => void;
-    onError?: (error: Error) => void;
-}): [state: DataState<T>, handleAction: (input: K) => void];

package/src/hooks/useDataState/index.ts

@@ -1,2 +0,0 @@
-export { default as useDataState } from './useDataState';
-export { AsyncDataAction, DataAction, DataState } from './types';

package/src/hooks/useDataState/types.ts

@@ -1,13 +0,0 @@
-export interface DataState<T> {
-  data: T;
-  hasError: boolean;
-  isLoading: boolean;
-  message: string | undefined;
-}
-
-export type DataAction<T = any, K = any> = (prevData: T, input: K) => T;
-
-export type AsyncDataAction<T = any, K = any> = (
-  prevData: T,
-  input: K
-) => Promise<T>;

package/src/hooks/useDataState/useDataState.ts

@@ -1,70 +0,0 @@
-import React from 'react';
-import { isFunction } from '@aws-amplify/ui';
-
-import { AsyncDataAction, DataAction, DataState } from './types';
-
-// default state
-const INITIAL_STATE = { hasError: false, isLoading: false, message: undefined };
-const LOADING_STATE = { hasError: false, isLoading: true, message: undefined };
-const ERROR_STATE = { hasError: true, isLoading: false };
-
-const resolveMaybeAsync = async <T>(
-  value: T | Promise<T>
-): Promise<Awaited<T>> => {
-  const awaited = await value;
-  return awaited;
-};
-
-/**
- * @internal may be updated in future versions
- */
-export default function useDataState<T, K>(
-  action: DataAction<T, K> | AsyncDataAction<T, K>,
-  initialData: T,
-  options?: {
-    onSuccess?: (data: T) => void;
-    onError?: (error: Error) => void;
-  }
-): [state: DataState<T>, handleAction: (input: K) => void] {
-  const [dataState, setDataState] = React.useState<DataState<T>>(() => ({
-    ...INITIAL_STATE,
-    data: initialData,
-  }));
-
-  const prevData = React.useRef(initialData);
-  const pendingId = React.useRef<Symbol | undefined>();
-
-  const { onSuccess, onError } = options ?? {};
-
-  const handleAction: (input: K) => void = React.useCallback(
-    (input) => {
-      const id = Symbol();
-      pendingId.current = id;
-
-      setDataState(({ data }) => ({ ...LOADING_STATE, data }));
-
-      resolveMaybeAsync(action(prevData.current, input))
-        .then((data: T) => {
-          if (pendingId.current !== id) return;
-
-          prevData.current = data;
-
-          if (isFunction(onSuccess)) onSuccess(data);
-
-          setDataState({ ...INITIAL_STATE, data });
-        })
-        .catch((error: Error) => {
-          if (pendingId.current !== id) return;
-
-          if (isFunction(onError)) onError(error);
-
-          const { message } = error;
-
-          setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
-        });
-    },
-    [action, onError, onSuccess]
-  );
-
-  return [dataState, handleAction];
-}