@aws-amplify/ui-react-core 3.3.2 → 3.3.4

package/dist/esm/hooks/{useDataState.mjs → useDataState/useDataState.mjs}

@@ -1,5 +1,5 @@
-import { isFunction } from '@aws-amplify/ui';
 import React__default from 'react';
+import { isFunction } from '@aws-amplify/ui';
 
 // default state
 const INITIAL_STATE = { hasError: false, isLoading: false, message: undefined };
@@ -9,25 +9,36 @@ 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 = crypto.randomUUID();
+        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);
-            prevData.current = data;
             setDataState({ ...INITIAL_STATE, data });
         })
-            .catch(({ message }) => {
+            .catch((error) => {
+            if (pendingId.current !== id)
+                return;
             if (isFunction(onError))
-                onError(message);
+                onError(error);
+            const { message } = error;
             setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
         });
     }, [action, onError, onSuccess]);

package/dist/esm/index.mjs

@@ -9,7 +9,7 @@ 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.mjs';
+export { default as useDataState } from './hooks/useDataState/useDataState.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';

package/dist/index.js

@@ -563,25 +563,36 @@ 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 = crypto.randomUUID();
+        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);
-            prevData.current = data;
             setDataState({ ...INITIAL_STATE, data });
         })
-            .catch(({ message }) => {
+            .catch((error) => {
+            if (pendingId.current !== id)
+                return;
             if (ui.isFunction(onError))
-                onError(message);
+                onError(error);
+            const { message } = error;
             setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
         });
     }, [action, onError, onSuccess]);

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

@@ -1,4 +1,4 @@
-export { default as useDataState, AsyncDataAction, DataAction, DataState, } from './useDataState';
+export { useDataState, AsyncDataAction, DataAction, DataState, } from './useDataState';
 export { default as useDeprecationWarning, UseDeprecationWarning, } from './useDeprecationWarning';
 export { default as useGetUrl } from './useGetUrl';
 export { default as useHasValueUpdated } from './useHasValueUpdated';

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

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

package/dist/types/hooks/{useDataState.d.ts → useDataState/types.d.ts}

@@ -6,7 +6,3 @@ export interface DataState<T> {
 }
 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>;
-export default function useDataState<T, K>(action: DataAction<T, K> | AsyncDataAction<T, K>, initialData: T, options?: {
-    onSuccess?: (data: T) => void;
-    onError?: (message: string) => void;
-}): [state: DataState<T>, handleAction: (input: K) => void];

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

@@ -0,0 +1,8 @@
+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/dist/types/hooks/useDataState/useDataState.native.d.ts

@@ -0,0 +1 @@
+export default function useDataState(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "3.3.2",
+  "version": "3.3.4",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "src/index.ts",
@@ -40,7 +40,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.8.2",
+    "@aws-amplify/ui": "6.9.1",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "react-hook-form": "^7.53.2",

package/src/hooks/index.ts

@@ -1,5 +1,5 @@
 export {
-  default as useDataState,
+  useDataState,
   AsyncDataAction,
   DataAction,
   DataState,

package/src/hooks/useDataState/index.ts

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

package/src/hooks/useDataState/types.ts

@@ -0,0 +1,13 @@
+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.native.ts

@@ -0,0 +1,3 @@
+export default function useDataState(): void {
+  throw new Error('useDataState is not implemented for React Native');
+}

package/src/hooks/{useDataState.ts → useDataState/useDataState.ts}

@@ -1,19 +1,7 @@
-import { isFunction } from '@aws-amplify/ui';
 import React from 'react';
+import { isFunction } from '@aws-amplify/ui';
 
-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>;
+import { AsyncDataAction, DataAction, DataState } from './types';
 
 // default state
 const INITIAL_STATE = { hasError: false, isLoading: false, message: undefined };
@@ -27,12 +15,15 @@ const resolveMaybeAsync = async <T>(
   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?: (message: string) => void;
+    onError?: (error: Error) => void;
   }
 ): [state: DataState<T>, handleAction: (input: K) => void] {
   const [dataState, setDataState] = React.useState<DataState<T>>(() => ({
@@ -41,22 +32,33 @@ export default function useDataState<T, K>(
   }));
 
   const prevData = React.useRef(initialData);
+  const pendingId = React.useRef<string | undefined>();
 
   const { onSuccess, onError } = options ?? {};
 
   const handleAction: (input: K) => void = React.useCallback(
     (input) => {
+      const id = crypto.randomUUID();
+      pendingId.current = id;
+
       setDataState(({ data }) => ({ ...LOADING_STATE, data }));
 
       resolveMaybeAsync(action(prevData.current, input))
         .then((data: T) => {
-          if (isFunction(onSuccess)) onSuccess(data);
+          if (pendingId.current !== id) return;
 
           prevData.current = data;
+
+          if (isFunction(onSuccess)) onSuccess(data);
+
           setDataState({ ...INITIAL_STATE, data });
         })
-        .catch(({ message }: Error) => {
-          if (isFunction(onError)) onError(message);
+        .catch((error: Error) => {
+          if (pendingId.current !== id) return;
+
+          if (isFunction(onError)) onError(error);
+
+          const { message } = error;
 
           setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
         });