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

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

@@ -10,11 +10,12 @@ 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 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

@@ -649,55 +649,6 @@ function useDataState(action, initialData, options) {
     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 +681,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 +868,84 @@ function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _
     };
 }
 
+/**
+ * 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:
@@ -1013,6 +1034,7 @@ exports.resolveAuthenticatorComponents = resolveAuthenticatorComponents;
 exports.useAuthenticator = useAuthenticator;
 exports.useAuthenticatorInitMachine = useAuthenticatorInitMachine;
 exports.useAuthenticatorRoute = useAuthenticatorRoute;
+exports.useControlledReducer = useControlledReducer;
 exports.useDataState = useDataState;
 exports.useDeprecationWarning = useDeprecationWarning;
 exports.useDropZone = useDropZone;

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 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/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 { AsyncDataAction, DataAction, useControlledReducer, useDeprecationWarning, UseDeprecationWarning, useGetUrl, useHasValueUpdated, usePreviousValue, useSetUserAgent, useTimeout, useDataState, DataState, useDropZone, UseDropZoneParams, } 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.1",
   "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.10.0",
+    "@aws-amplify/ui": "6.10.1",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "react-hook-form": "^7.53.2",

package/src/hooks/index.ts

@@ -5,6 +5,8 @@ export {
   DataState,
 } from './useDataState';
 
+export { default as useControlledReducer } from './useControlledReducer';
+export { default as useDropZone, UseDropZoneParams } from './useDropZone';
 export {
   default as useDeprecationWarning,
   UseDeprecationWarning,
@@ -14,4 +16,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/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

@@ -37,6 +37,7 @@ export {
 export {
   AsyncDataAction,
   DataAction,
+  useControlledReducer,
   useDeprecationWarning,
   UseDeprecationWarning,
   useGetUrl,