@aws-amplify/ui-react-storage 3.0.17 → 3.1.0

package/dist/index.js

@@ -7,6 +7,7 @@ var ui = require('@aws-amplify/ui');
 var uiReact = require('@aws-amplify/ui-react');
 var internal = require('@aws-amplify/ui-react/internal');
 var uiReactCore = require('@aws-amplify/ui-react-core');
+var auth = require('aws-amplify/auth');
 var storage = require('aws-amplify/storage');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -32,29 +33,55 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const VERSION = '3.0.17';
+const VERSION = '3.1.0';
 
-const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, onStorageGetError, validateObjectExistence, ...rest }) => {
-    const resolvedValidateObjectExistence = ui.isUndefined(validateObjectExistence)
-        ? true
-        : validateObjectExistence;
-    const options = React__namespace.useMemo(() => ({
-        accessLevel,
-        targetIdentityId: identityId,
-        validateObjectExistence: resolvedValidateObjectExistence,
-    }), [accessLevel, identityId, resolvedValidateObjectExistence]);
+const MISSING_REQUIRED_PROP_MESSAGE = '`StorageImage` requires either an `imgKey` or `path` prop.';
+const HAS_DEPRECATED_PROPS_MESSAGE = '`imgKey`, `accessLevel`, and `identityId` will be replaced with `path` in a future major version. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props';
+const HAS_PATH_AND_KEY_MESSAGE = '`imgKey` is ignored when both `imgKey` and `path` props are provided.';
+const HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE = '`accessLevel` and `identityId` are ignored when the `path` prop is provided.';
+const getDeprecationMessage = ({ hasImgkey, hasPath, hasDeprecatedOptions, }) => {
+    let message = '';
+    if (hasPath && hasImgkey) {
+        message = HAS_PATH_AND_KEY_MESSAGE;
+    }
+    else if (hasPath && hasDeprecatedOptions) {
+        message = HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE;
+    }
+    else if (hasImgkey) {
+        message = HAS_DEPRECATED_PROPS_MESSAGE;
+    }
+    return message;
+};
+const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, path, onStorageGetError, onGetUrlError, validateObjectExistence = true, ...rest }) => {
+    const hasImgkey = !!imgKey;
+    const hasPath = !!path;
+    const hasDeprecatedOptions = !!accessLevel || !!identityId;
+    const message = getDeprecationMessage({
+        hasDeprecatedOptions,
+        hasImgkey,
+        hasPath,
+    });
+    internal.useDeprecationWarning({ message, shouldWarn: !!message });
+    if (!hasImgkey && !hasPath) {
+        throw new Error(MISSING_REQUIRED_PROP_MESSAGE);
+    }
     uiReactCore.useSetUserAgent({
         componentName: 'StorageImage',
         packageName: 'react-storage',
         version: VERSION,
     });
-    const url = internal.useStorageURL({
-        key: imgKey,
-        options,
-        fallbackURL: fallbackSrc,
-        onStorageGetError,
-    });
-    return (React__namespace.createElement(uiReact.Image, { ...rest, className: ui.classNames(ui.ComponentClassName.StorageImage, className), src: url }));
+    const onError = onGetUrlError ?? onStorageGetError;
+    const input = React__namespace.useMemo(() => ({
+        ...(path ? { path } : { key: imgKey }),
+        onError,
+        options: {
+            accessLevel,
+            targetIdentityId: identityId,
+            validateObjectExistence,
+        },
+    }), [accessLevel, imgKey, identityId, onError, path, validateObjectExistence]);
+    const { url } = uiReactCore.useGetUrl(input);
+    return (React__namespace.createElement(uiReact.Image, { ...rest, className: ui.classNames(ui.ComponentClassName.StorageImage, className), src: url?.toString() ?? fallbackSrc }));
 };
 
 var FileStatus;
@@ -137,7 +164,7 @@ function storageManagerStateReducer(state, action) {
                             ...currentFile,
                             status: FileStatus.UPLOADING,
                             progress: 0,
-                            uploadTask: uploadTask ? uploadTask : undefined,
+                            uploadTask,
                         },
                     ];
                 }
@@ -206,51 +233,37 @@ function storageManagerStateReducer(state, action) {
     }
 }
 
-const addFilesAction = ({ files, status, getFileErrorMessage, }) => {
-    return {
-        type: StorageManagerActionTypes.ADD_FILES,
-        files,
-        status,
-        getFileErrorMessage,
-    };
-};
-const clearFilesAction = () => {
-    return {
-        type: StorageManagerActionTypes.CLEAR_FILES,
-    };
-};
-const queueFilesAction = () => {
-    return {
-        type: StorageManagerActionTypes.QUEUE_FILES,
-    };
-};
-const setUploadingFileAction = ({ id, uploadTask, }) => {
-    return {
-        type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
-        id,
-        uploadTask,
-    };
-};
-const setUploadProgressAction = ({ id, progress, }) => {
-    return {
-        type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS,
-        id,
-        progress,
-    };
-};
-const setUploadStatusAction = ({ id, status, }) => {
-    return {
-        type: StorageManagerActionTypes.SET_STATUS,
-        id,
-        status,
-    };
-};
-const removeUploadAction = ({ id }) => {
-    return {
-        type: StorageManagerActionTypes.REMOVE_UPLOAD,
-        id,
-    };
-};
+const addFilesAction = ({ files, status, getFileErrorMessage, }) => ({
+    type: StorageManagerActionTypes.ADD_FILES,
+    files,
+    status,
+    getFileErrorMessage,
+});
+const clearFilesAction = () => ({
+    type: StorageManagerActionTypes.CLEAR_FILES,
+});
+const queueFilesAction = () => ({
+    type: StorageManagerActionTypes.QUEUE_FILES,
+});
+const setUploadingFileAction = ({ id, uploadTask, }) => ({
+    type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
+    id,
+    uploadTask,
+});
+const setUploadProgressAction = ({ id, progress, }) => ({
+    type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS,
+    id,
+    progress,
+});
+const setUploadStatusAction = ({ id, status, }) => ({
+    type: StorageManagerActionTypes.SET_STATUS,
+    id,
+    status,
+});
+const removeUploadAction = ({ id }) => ({
+    type: StorageManagerActionTypes.REMOVE_UPLOAD,
+    id,
+});
 
 const isDefaultFile = (file) => !!(ui.isObject(file) && file.key);
 const createFileFromDefault = (file) => isDefaultFile(file)
@@ -303,157 +316,6 @@ function useStorageManager(defaultFiles = []) {
     };
 }
 
-function uploadFile({ file, key, level = 'private', progressCallback: onProgress, errorCallback, completeCallback, ...rest }) {
-    const contentType = file.type || 'binary/octet-stream';
-    const input = {
-        key,
-        data: file,
-        options: {
-            accessLevel: level,
-            contentType,
-            onProgress,
-            ...rest,
-        },
-    };
-    const output = storage.uploadData(input);
-    output.result
-        .then(() => {
-        if (output.state === 'SUCCESS') {
-            completeCallback?.({ key });
-        }
-    })
-        .catch((e) => {
-        const error = e;
-        errorCallback?.(error.message);
-    });
-    return output;
-}
-
-/**
- * Utility function that takes the processFile prop, along with a file a key
- * and returns a Promise that resolves to { file, key, ..rest }
- * regardless if processFile is defined and if it is sync or async
- */
-const resolveFile = ({ processFile, file, key, }) => {
-    return new Promise((resolve, reject) => {
-        const result = ui.isFunction(processFile)
-            ? processFile({ file, key })
-            : { file, key };
-        if (result instanceof Promise) {
-            result.then(resolve).catch(reject);
-        }
-        else {
-            resolve(result);
-        }
-    });
-};
-
-function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
-    React__namespace.useEffect(() => {
-        const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
-        if (filesReadyToUpload.length > maxFileCount) {
-            return;
-        }
-        for (const { file, key, id } of filesReadyToUpload) {
-            const onComplete = (event) => {
-                if (ui.isFunction(onUploadSuccess)) {
-                    onUploadSuccess(event);
-                }
-                setUploadSuccess({ id });
-            };
-            const onProgress = (event) => {
-                /**
-                 * When a file is zero bytes, the progress.total will equal zero.
-                 * Therefore, this will prevent a divide by zero error.
-                 */
-                const progressPercentage = event.totalBytes === undefined || event.totalBytes === 0
-                    ? 100
-                    : Math.floor((event.transferredBytes / event.totalBytes) * 100);
-                setUploadProgress({ id, progress: progressPercentage });
-            };
-            if (file) {
-                resolveFile({ processFile, file, key }).then(({ key: processedKey, ...rest }) => {
-                    // prepend `path` to `processedKey`
-                    const resolvedKey = ui.isString(path)
-                        ? `${path}${processedKey}`
-                        : processedKey;
-                    if (ui.isFunction(onUploadStart)) {
-                        onUploadStart({ key: resolvedKey });
-                    }
-                    const uploadTask = uploadFile({
-                        ...rest,
-                        key: resolvedKey,
-                        level: accessLevel,
-                        progressCallback: onProgress,
-                        errorCallback: (error) => {
-                            if (ui.isFunction(onUploadError)) {
-                                onUploadError(error, { key: resolvedKey });
-                            }
-                        },
-                        completeCallback: onComplete,
-                    });
-                    setUploadingFile({ id, uploadTask });
-                });
-            }
-        }
-    }, [
-        files,
-        accessLevel,
-        isResumable,
-        setUploadProgress,
-        setUploadingFile,
-        onUploadError,
-        onUploadSuccess,
-        onUploadStart,
-        maxFileCount,
-        setUploadSuccess,
-        processFile,
-        path,
-    ]);
-}
-
-function Container({ children, className, }) {
-    return React__default["default"].createElement(uiReact.View, { className: className }, children);
-}
-
-function DropZone({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
-    const { dropFilesText } = displayText;
-    const icons = internal.useIcons('storageManager');
-    return (React__default["default"].createElement(uiReact.View, { className: ui.classNames(inDropZone &&
-            ui.classNameModifier(ui.ComponentClassName.StorageManagerDropZone, 'active'), ui.ComponentClassName.StorageManagerDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
-        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, className: ui.ComponentClassName.StorageManagerDropZoneIcon }, icons?.upload ?? React__default["default"].createElement(internal.IconUpload, null)),
-        React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerDropZoneText }, dropFilesText),
-        children));
-}
-
-const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, percentage, status, uploadSuccessfulText, }) => {
-    const icons = internal.useIcons('storageManager');
-    switch (status) {
-        case FileStatus.UPLOADING: {
-            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getUploadingText(percentage)));
-        }
-        case FileStatus.PAUSED:
-            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getPausedText(percentage)));
-        case FileStatus.UPLOADED:
-            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'success')) },
-                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.success ?? React__default["default"].createElement(internal.IconCheck, null)),
-                uploadSuccessfulText));
-        case FileStatus.ERROR:
-            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'error')) },
-                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.error ?? React__default["default"].createElement(internal.IconError, null)),
-                errorMessage));
-        default:
-            return null;
-    }
-};
-
-const FileRemoveButton = ({ altText, onClick, }) => {
-    const icons = internal.useIcons('storageManager');
-    return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick },
-        React__default["default"].createElement(uiReact.VisuallyHidden, null, altText),
-        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default["default"].createElement(internal.IconClose, null))));
-};
-
 /**
  * Format bytes as human-readable text.
  *
@@ -555,6 +417,174 @@ const filterAllowedFiles = (files, acceptedFileTypes) => {
     });
 };
 
+/**
+ * Utility function that takes the processFile prop, along with a file a key
+ * and returns a Promise that resolves to { file, key, ..rest }
+ * regardless if processFile is defined and if it is sync or async
+ */
+const resolveFile = ({ processFile, ...input }) => {
+    return new Promise((resolve, reject) => {
+        const result = ui.isFunction(processFile) ? processFile(input) : input;
+        if (result instanceof Promise) {
+            result.then(resolve).catch(reject);
+        }
+        else {
+            resolve(result);
+        }
+    });
+};
+
+const getInput = ({ accessLevel, file, key, onProgress, path, processFile, }) => {
+    return async () => {
+        const hasCallbackPath = ui.isTypedFunction(path);
+        const hasStringPath = ui.isString(path);
+        const hasKeyInput = !!accessLevel && !hasCallbackPath;
+        const { file: data, key: fileKey, ...rest } = await resolveFile({ file, key, processFile });
+        const contentType = file.type || 'binary/octet-stream';
+        // IMPORTANT: always pass `...rest` here for backwards compatibility
+        const options = { contentType, onProgress, ...rest };
+        if (hasKeyInput) {
+            // legacy handling of `path` is to prefix to `fileKey`
+            const resolvedKey = hasStringPath ? `${path}${fileKey}` : fileKey;
+            return { data, key: resolvedKey, options: { ...options, accessLevel } };
+        }
+        const { identityId } = await auth.fetchAuthSession();
+        const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
+        return { data: file, path: resolvedPath, options };
+    };
+};
+
+async function uploadFile({ input, onError, onStart, onComplete, }) {
+    const resolvedInput = await input();
+    const uploadTask = storage.uploadData(resolvedInput);
+    const key = resolvedInput?.key ??
+        resolvedInput?.path;
+    if (ui.isFunction(onStart)) {
+        onStart({ key, uploadTask });
+    }
+    uploadTask.result
+        .then((result) => {
+        if (ui.isFunction(onComplete) && uploadTask.state === 'SUCCESS') {
+            onComplete(result);
+        }
+    })
+        .catch((error) => {
+        if (ui.isFunction(onError)) {
+            onError({ key, error });
+        }
+    });
+    return uploadTask;
+}
+
+function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
+    React__namespace.useEffect(() => {
+        const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
+        if (filesReadyToUpload.length > maxFileCount) {
+            return;
+        }
+        for (const { file, key, id } of filesReadyToUpload) {
+            const onProgress = (event) => {
+                /**
+                 * When a file is zero bytes, the progress.total will equal zero.
+                 * Therefore, this will prevent a divide by zero error.
+                 */
+                const progress = event.totalBytes === undefined || event.totalBytes === 0
+                    ? 100
+                    : Math.floor((event.transferredBytes / event.totalBytes) * 100);
+                setUploadProgress({ id, progress });
+            };
+            if (file) {
+                const input = getInput({
+                    accessLevel,
+                    file,
+                    key,
+                    onProgress,
+                    path,
+                    processFile,
+                });
+                uploadFile({
+                    input,
+                    onComplete: (event) => {
+                        if (ui.isFunction(onUploadSuccess)) {
+                            onUploadSuccess({
+                                key: event.key ??
+                                    event.path,
+                            });
+                        }
+                        setUploadSuccess({ id });
+                    },
+                    onError: ({ key, error }) => {
+                        if (ui.isFunction(onUploadError)) {
+                            onUploadError(error.message, { key });
+                        }
+                    },
+                    onStart: ({ key, uploadTask }) => {
+                        if (ui.isFunction(onUploadStart)) {
+                            onUploadStart({ key });
+                        }
+                        setUploadingFile({ id, uploadTask });
+                    },
+                });
+            }
+        }
+    }, [
+        files,
+        accessLevel,
+        isResumable,
+        setUploadProgress,
+        setUploadingFile,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        maxFileCount,
+        setUploadSuccess,
+        processFile,
+        path,
+    ]);
+}
+
+function Container({ children, className, }) {
+    return React__default["default"].createElement(uiReact.View, { className: className }, children);
+}
+
+function DropZone({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
+    const { dropFilesText } = displayText;
+    const icons = internal.useIcons('storageManager');
+    return (React__default["default"].createElement(uiReact.View, { className: ui.classNames(inDropZone &&
+            ui.classNameModifier(ui.ComponentClassName.StorageManagerDropZone, 'active'), ui.ComponentClassName.StorageManagerDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
+        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, className: ui.ComponentClassName.StorageManagerDropZoneIcon }, icons?.upload ?? React__default["default"].createElement(internal.IconUpload, null)),
+        React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerDropZoneText }, dropFilesText),
+        children));
+}
+
+const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, percentage, status, uploadSuccessfulText, }) => {
+    const icons = internal.useIcons('storageManager');
+    switch (status) {
+        case FileStatus.UPLOADING: {
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getUploadingText(percentage)));
+        }
+        case FileStatus.PAUSED:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileStatus }, getPausedText(percentage)));
+        case FileStatus.UPLOADED:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'success')) },
+                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.success ?? React__default["default"].createElement(internal.IconCheck, null)),
+                uploadSuccessfulText));
+        case FileStatus.ERROR:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.StorageManagerFileStatus, ui.classNameModifier(ui.ComponentClassName.StorageManagerFileStatus, 'error')) },
+                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.error ?? React__default["default"].createElement(internal.IconError, null)),
+                errorMessage));
+        default:
+            return null;
+    }
+};
+
+const FileRemoveButton = ({ altText, onClick, }) => {
+    const icons = internal.useIcons('storageManager');
+    return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick },
+        React__default["default"].createElement(uiReact.VisuallyHidden, null, altText),
+        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default["default"].createElement(internal.IconClose, null))));
+};
+
 const UploadDetails = ({ displayName, fileSize, }) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileMain },
@@ -640,10 +670,21 @@ function FilePicker({ children, className = ui.ComponentClassName.StorageManager
 }
 
 const logger = ui.getLogger('Storage');
-function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload = true, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onUploadError, onUploadSuccess, onFileRemove, onUploadStart, showThumbnails = true, processFile, components, path, }, ref) {
-    if (!accessLevel || !maxFileCount) {
-        logger.warn('StorageManager requires accessLevel and maxFileCount props');
+const MISSING_REQUIRED_PROPS_MESSAGE = '`StorageManager` requires a `maxFileCount` prop to be provided.';
+const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE = '`StorageManager` does not allow usage of a `path` callback prop with an `accessLevel` prop.';
+const ACCESS_LEVEL_DEPRECATION_MESSAGE = '`accessLevel` has been deprecated and will be removed in a future major version. See migration notes at https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager';
+const StorageManagerBase = React__namespace.forwardRef(function StorageManager({ acceptedFileTypes = [], accessLevel, autoUpload = true, components, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onFileRemove, onUploadError, onUploadStart, onUploadSuccess, path, processFile, showThumbnails = true, }, ref) {
+    if (!maxFileCount) {
+        // eslint-disable-next-line no-console
+        console.warn(MISSING_REQUIRED_PROPS_MESSAGE);
+    }
+    if (accessLevel && typeof path === 'function') {
+        throw new Error(ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE);
     }
+    uiReactCore.useDeprecationWarning({
+        message: ACCESS_LEVEL_DEPRECATION_MESSAGE,
+        shouldWarn: !!accessLevel,
+    });
     const Components = {
         Container,
         DropZone,
@@ -716,15 +757,15 @@ function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload =
     const onUploadAll = () => {
         queueFiles();
     };
-    const onPauseUpload = ({ id, uploadTask, }) => {
+    const onPauseUpload = ({ id, uploadTask }) => {
         uploadTask.pause();
         setUploadPaused({ id });
     };
-    const onResumeUpload = ({ id, uploadTask, }) => {
+    const onResumeUpload = ({ id, uploadTask }) => {
         uploadTask.resume();
         setUploadResumed({ id });
     };
-    const onCancelUpload = ({ id, uploadTask, }) => {
+    const onCancelUpload = ({ id, uploadTask }) => {
         // At this time we don't know if the delete
         // permissions are enabled (required to cancel upload),
         // so we do a pause instead and remove from files
@@ -776,8 +817,9 @@ function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload =
         hasFiles ? (React__namespace.createElement(Components.FileListHeader, { allUploadsSuccessful: allUploadsSuccessful, displayText: displayText, fileCount: files.length, remainingFilesCount: remainingFilesCount, selectedFilesCount: selectedFilesCount })) : null,
         React__namespace.createElement(Components.FileList, { displayText: displayText, files: files, isResumable: isResumable, onCancelUpload: onCancelUpload, onDeleteUpload: onDeleteUpload, onResume: onResumeUpload, onPause: onPauseUpload, showThumbnails: showThumbnails, hasMaxFilesError: hasMaxFilesError, maxFileCount: maxFileCount }),
         hasUploadActions ? (React__namespace.createElement(Components.FileListFooter, { displayText: displayText, remainingFilesCount: remainingFilesCount, onClearAll: onClearAll, onUploadAll: onUploadAll })) : null));
-}
-const StorageManager = Object.assign(React__namespace.forwardRef(StorageManagerBase), {
+});
+// pass an empty object as first param to avoid destructive action on `StorageManagerBase`
+const StorageManager = Object.assign({}, StorageManagerBase, {
     Container,
     DropZone,
     FileList,

package/dist/types/components/StorageImage/StorageImage.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-import type { StorageImageProps } from './types';
-export declare const StorageImage: ({ accessLevel, className, fallbackSrc, identityId, imgKey, onStorageGetError, validateObjectExistence, ...rest }: StorageImageProps) => JSX.Element;
+import type { StorageImageProps, StorageImagePathProps } from './types';
+export declare const MISSING_REQUIRED_PROP_MESSAGE = "`StorageImage` requires either an `imgKey` or `path` prop.";
+export declare const HAS_DEPRECATED_PROPS_MESSAGE = "`imgKey`, `accessLevel`, and `identityId` will be replaced with `path` in a future major version. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props";
+export declare const HAS_PATH_AND_KEY_MESSAGE = "`imgKey` is ignored when both `imgKey` and `path` props are provided.";
+export declare const HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE = "`accessLevel` and `identityId` are ignored when the `path` prop is provided.";
+export declare const StorageImage: ({ accessLevel, className, fallbackSrc, identityId, imgKey, path, onStorageGetError, onGetUrlError, validateObjectExistence, ...rest }: StorageImageProps | StorageImagePathProps) => JSX.Element;

package/dist/types/components/StorageImage/types.d.ts

@@ -1,10 +1,40 @@
 import { StorageAccessLevel } from '@aws-amplify/core';
 import { ImageProps } from '@aws-amplify/ui-react';
 export interface StorageImageProps extends Omit<ImageProps, 'src'> {
+    /**
+     * @deprecated
+     * `imgKey` will be replaced with `path` in a future major version of Amplify UI. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props
+     */
     imgKey: string;
+    /**
+     * @deprecated
+     * `accessLevel` will be replaced with `path` in a future major version of Amplify UI. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props
+     */
     accessLevel: StorageAccessLevel;
+    /**
+     * @deprecated
+     * `identityId` will be replaced with `path` in a future major version of Amplify UI. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props
+     */
     identityId?: string;
     fallbackSrc?: string;
     validateObjectExistence?: boolean;
+    /**
+     * @deprecated use `onGetUrlError`
+     *
+     * `onStorageGetError` will be replaced with `onGetUrlError` in a future major version of Amplify UI. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props
+     */
     onStorageGetError?: (error: Error) => void;
+    onGetUrlError?: (error: Error) => void;
+    path?: never;
 }
+type OmittedPropKey = 'accessLevel' | 'imgKey' | 'identityId' | 'onStorageGetError' | 'path';
+export interface StorageImagePathProps extends Omit<StorageImageProps, OmittedPropKey> {
+    path: string | ((input: {
+        identityId?: string;
+    }) => string);
+    imgKey?: never;
+    accessLevel?: never;
+    identityId?: never;
+    onStorageGetError?: never;
+}
+export {};

package/dist/types/components/StorageManager/StorageManager.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { StorageManagerProps, StorageManagerHandle } from './types';
+import { StorageManagerProps, StorageManagerPathProps, StorageManagerHandle } from './types';
 import { Container, DropZone, FileList, FileListHeader, FileListFooter, FilePicker } from './ui';
-declare const StorageManager: React.ForwardRefExoticComponent<StorageManagerProps & React.RefAttributes<StorageManagerHandle>> & {
+export declare const MISSING_REQUIRED_PROPS_MESSAGE = "`StorageManager` requires a `maxFileCount` prop to be provided.";
+export declare const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE = "`StorageManager` does not allow usage of a `path` callback prop with an `accessLevel` prop.";
+export declare const ACCESS_LEVEL_DEPRECATION_MESSAGE = "`accessLevel` has been deprecated and will be removed in a future major version. See migration notes at https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager";
+declare const StorageManager: React.ForwardRefExoticComponent<(StorageManagerProps | StorageManagerPathProps) & React.RefAttributes<StorageManagerHandle>> & {
     Container: typeof Container;
     DropZone: typeof DropZone;
     FileList: typeof FileList;

package/dist/types/components/StorageManager/hooks/useStorageManager/actions.d.ts

@@ -1,13 +1,10 @@
-import { UploadDataOutput } from 'aws-amplify/storage';
 import { FileStatus } from '../../types';
 import { Action, AddFilesActionParams } from './types';
+import { TaskEvent } from '../../utils';
 export declare const addFilesAction: ({ files, status, getFileErrorMessage, }: AddFilesActionParams) => Action;
 export declare const clearFilesAction: () => Action;
 export declare const queueFilesAction: () => Action;
-export declare const setUploadingFileAction: ({ id, uploadTask, }: {
-    id: string;
-    uploadTask: UploadDataOutput | undefined;
-}) => Action;
+export declare const setUploadingFileAction: ({ id, uploadTask, }: TaskEvent) => Action;
 export declare const setUploadProgressAction: ({ id, progress, }: {
     id: string;
     progress: number;

package/dist/types/components/StorageManager/hooks/useStorageManager/types.d.ts

@@ -1,5 +1,5 @@
-import { UploadDataOutput } from 'aws-amplify/storage';
 import { FileStatus, StorageFiles } from '../../types';
+import { UploadTask } from '../../utils';
 export interface UseStorageManagerState {
     files: StorageFiles;
 }
@@ -29,7 +29,7 @@ export type Action = {
 } | {
     type: StorageManagerActionTypes.SET_STATUS_UPLOADING;
     id: string;
-    uploadTask?: UploadDataOutput;
+    uploadTask?: UploadTask;
 } | {
     type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS;
     id: string;