@aws-amplify/ui-react-storage 0.0.0-theming-v2-b9a0c18-20240719193825 → 0.0.0-theming-v2-882f11a-20240805184032

package/dist/esm/components/StorageManager/StorageManager.mjs

@@ -58,7 +58,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFi
             getFileSizeErrorText,
         });
     };
-    const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setProcessedKey, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
     React.useImperativeHandle(ref, () => ({ clearFiles }));
     const { dragState, ...dropZoneProps } = useDropZone({
         acceptedFileTypes,
@@ -84,6 +84,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFi
         onUploadError,
         onUploadSuccess,
         onUploadStart,
+        onProcessFileSuccess: setProcessedKey,
         setUploadingFile,
         setUploadProgress,
         setUploadSuccess,
@@ -130,7 +131,9 @@ const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFi
         if (typeof onFileRemove === 'function') {
             const file = files.find((file) => file.id === id);
             if (file) {
-                onFileRemove({ key: file.key });
+                // return `processedKey` if available and `processFile` is provided
+                const key = (processFile && file?.processedKey) ?? file.key;
+                onFileRemove({ key });
             }
         }
     };

package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.mjs

@@ -12,6 +12,10 @@ const clearFilesAction = () => ({
 const queueFilesAction = () => ({
     type: StorageManagerActionTypes.QUEUE_FILES,
 });
+const setProcessedKeyAction = (input) => ({
+    ...input,
+    type: StorageManagerActionTypes.SET_PROCESSED_FILE_KEY,
+});
 const setUploadingFileAction = ({ id, uploadTask, }) => ({
     type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
     id,
@@ -32,4 +36,4 @@ const removeUploadAction = ({ id }) => ({
     id,
 });
 
-export { addFilesAction, clearFilesAction, queueFilesAction, removeUploadAction, setUploadProgressAction, setUploadStatusAction, setUploadingFileAction };
+export { addFilesAction, clearFilesAction, queueFilesAction, removeUploadAction, setProcessedKeyAction, setUploadProgressAction, setUploadStatusAction, setUploadingFileAction };

package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs

@@ -1,6 +1,12 @@
 import { FileStatus } from '../../types.mjs';
 import { StorageManagerActionTypes } from './types.mjs';
 
+const updateFiles = (files, nextFileData) => files.reduce((files, currentFile) => {
+    if (currentFile.id === nextFileData.id) {
+        return [...files, { ...currentFile, ...nextFileData }];
+    }
+    return [...files, currentFile];
+}, []);
 function storageManagerStateReducer(state, action) {
     switch (action.type) {
         case StorageManagerActionTypes.ADD_FILES: {
@@ -20,16 +26,10 @@ function storageManagerStateReducer(state, action) {
                 };
             });
             const newFiles = [...state.files, ...newUploads];
-            return {
-                ...state,
-                files: newFiles,
-            };
+            return { ...state, files: newFiles };
         }
         case StorageManagerActionTypes.CLEAR_FILES: {
-            return {
-                ...state,
-                files: [],
-            };
+            return { ...state, files: [] };
         }
         case StorageManagerActionTypes.QUEUE_FILES: {
             const { files } = state;
@@ -51,65 +51,26 @@ function storageManagerStateReducer(state, action) {
         }
         case StorageManagerActionTypes.SET_STATUS_UPLOADING: {
             const { id, uploadTask } = action;
-            const { files } = state;
-            const newFiles = files.reduce((files, currentFile) => {
-                if (currentFile.id === id) {
-                    return [
-                        ...files,
-                        {
-                            ...currentFile,
-                            status: FileStatus.UPLOADING,
-                            progress: 0,
-                            uploadTask,
-                        },
-                    ];
-                }
-                return [...files, currentFile];
-            }, []);
-            return {
-                ...state,
-                files: newFiles,
-            };
+            const status = FileStatus.UPLOADING;
+            const progress = 0;
+            const nextFileData = { status, progress, id, uploadTask };
+            const files = updateFiles(state.files, nextFileData);
+            return { ...state, files };
+        }
+        case StorageManagerActionTypes.SET_PROCESSED_FILE_KEY: {
+            const { processedKey, id } = action;
+            const files = updateFiles(state.files, { processedKey, id });
+            return { files };
         }
         case StorageManagerActionTypes.SET_UPLOAD_PROGRESS: {
             const { id, progress } = action;
-            const { files } = state;
-            const newFiles = files.reduce((files, currentFile) => {
-                if (currentFile.id === id) {
-                    return [
-                        ...files,
-                        {
-                            ...currentFile,
-                            progress,
-                        },
-                    ];
-                }
-                return [...files, currentFile];
-            }, []);
-            return {
-                ...state,
-                files: newFiles,
-            };
+            const files = updateFiles(state.files, { id, progress });
+            return { ...state, files };
         }
         case StorageManagerActionTypes.SET_STATUS: {
             const { id, status } = action;
-            const { files } = state;
-            const newFiles = files.reduce((files, currentFile) => {
-                if (currentFile.id === id) {
-                    return [
-                        ...files,
-                        {
-                            ...currentFile,
-                            status,
-                        },
-                    ];
-                }
-                return [...files, currentFile];
-            }, []);
-            return {
-                ...state,
-                files: newFiles,
-            };
+            const files = updateFiles(state.files, { id, status });
+            return { ...state, files };
         }
         case StorageManagerActionTypes.REMOVE_UPLOAD: {
             const { id } = action;

package/dist/esm/components/StorageManager/hooks/useStorageManager/types.mjs

@@ -4,6 +4,7 @@ var StorageManagerActionTypes;
     StorageManagerActionTypes["CLEAR_FILES"] = "CLEAR_FILES";
     StorageManagerActionTypes["QUEUE_FILES"] = "QUEUE_FILES";
     StorageManagerActionTypes["SET_STATUS"] = "SET_STATUS";
+    StorageManagerActionTypes["SET_PROCESSED_FILE_KEY"] = "SET_PROCESSED_FILE_KEY";
     StorageManagerActionTypes["SET_STATUS_UPLOADING"] = "SET_STATUS_UPLOADING";
     StorageManagerActionTypes["SET_UPLOAD_PROGRESS"] = "SET_UPLOAD_PROGRESS";
     StorageManagerActionTypes["REMOVE_UPLOAD"] = "REMOVE_UPLOAD";

package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.mjs

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { isObject } from '@aws-amplify/ui';
 import { FileStatus } from '../../types.mjs';
 import { storageManagerStateReducer } from './reducer.mjs';
-import { addFilesAction, clearFilesAction, queueFilesAction, setUploadingFileAction, setUploadProgressAction, setUploadStatusAction, removeUploadAction } from './actions.mjs';
+import { addFilesAction, clearFilesAction, queueFilesAction, setUploadingFileAction, setProcessedKeyAction, setUploadProgressAction, setUploadStatusAction, removeUploadAction } from './actions.mjs';
 
 const isDefaultFile = (file) => !!(isObject(file) && file.key);
 const createFileFromDefault = (file) => isDefaultFile(file)
@@ -26,6 +26,9 @@ function useStorageManager(defaultFiles = []) {
     const setUploadingFile = ({ uploadTask, id, }) => {
         dispatch(setUploadingFileAction({ id, uploadTask }));
     };
+    const setProcessedKey = (input) => {
+        dispatch(setProcessedKeyAction(input));
+    };
     const setUploadProgress = ({ progress, id, }) => {
         dispatch(setUploadProgressAction({ id, progress }));
     };
@@ -43,6 +46,7 @@ function useStorageManager(defaultFiles = []) {
     };
     return {
         removeUpload,
+        setProcessedKey,
         setUploadPaused,
         setUploadProgress,
         setUploadResumed,

package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs

@@ -4,7 +4,7 @@ import { getInput } from '../../utils/getInput.mjs';
 import { uploadFile } from '../../utils/uploadFile.mjs';
 import { FileStatus } from '../../types.mjs';
 
-function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
+function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }) {
     React.useEffect(() => {
         const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
         if (filesReadyToUpload.length > maxFileCount) {
@@ -22,10 +22,12 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
                 setUploadProgress({ id, progress });
             };
             if (file) {
+                const handleProcessFileSuccess = (input) => onProcessFileSuccess({ id, ...input });
                 const input = getInput({
                     accessLevel,
                     file,
                     key,
+                    onProcessFileSuccess: handleProcessFileSuccess,
                     onProgress,
                     path,
                     processFile,
@@ -62,6 +64,7 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
         setUploadProgress,
         setUploadingFile,
         onUploadError,
+        onProcessFileSuccess,
         onUploadSuccess,
         onUploadStart,
         maxFileCount,

package/dist/esm/components/StorageManager/ui/FileList/FileRemoveButton.mjs

@@ -4,7 +4,7 @@ import { Button, VisuallyHidden, View } from '@aws-amplify/ui-react';
 
 const FileRemoveButton = ({ altText, onClick, }) => {
     const icons = useIcons('storageManager');
-    return (React__default.createElement(Button, { size: "small", onClick: onClick },
+    return (React__default.createElement(Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
         React__default.createElement(VisuallyHidden, null, altText),
         React__default.createElement(View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default.createElement(IconClose, null))));
 };

package/dist/esm/components/StorageManager/utils/getInput.mjs

@@ -2,23 +2,37 @@ import { fetchAuthSession } from 'aws-amplify/auth';
 import { isTypedFunction, isString } from '@aws-amplify/ui';
 import { resolveFile } from './resolveFile.mjs';
 
-const getInput = ({ accessLevel, file, key, onProgress, path, processFile, }) => {
+const getInput = ({ accessLevel, file, key, onProcessFileSuccess, onProgress, path, processFile, }) => {
     return async () => {
         const hasCallbackPath = isTypedFunction(path);
         const hasStringPath = isString(path);
         const hasKeyInput = !!accessLevel && !hasCallbackPath;
-        const { file: data, key: fileKey, ...rest } = await resolveFile({ file, key, processFile });
+        const { file: data, key: processedKey, ...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 };
+        let inputResult;
         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 resolvedKey = hasStringPath
+                ? `${path}${processedKey}`
+                : processedKey;
+            inputResult = {
+                data,
+                key: resolvedKey,
+                options: { ...options, accessLevel },
+            };
         }
-        const { identityId } = await fetchAuthSession();
-        const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
-        return { data: file, path: resolvedPath, options };
+        else {
+            const { identityId } = await fetchAuthSession();
+            const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
+            inputResult = { data: file, path: resolvedPath, options };
+        }
+        if (processFile) {
+            // provide post-processing value of target `key`
+            onProcessFileSuccess({ processedKey });
+        }
+        return inputResult;
     };
 };
 

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.1.3';
+const VERSION = '3.1.6';
 
 export { VERSION };

package/dist/index.js

@@ -33,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const VERSION = '3.1.3';
+const VERSION = '3.1.6';
 
 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';
@@ -100,11 +100,18 @@ var StorageManagerActionTypes;
     StorageManagerActionTypes["CLEAR_FILES"] = "CLEAR_FILES";
     StorageManagerActionTypes["QUEUE_FILES"] = "QUEUE_FILES";
     StorageManagerActionTypes["SET_STATUS"] = "SET_STATUS";
+    StorageManagerActionTypes["SET_PROCESSED_FILE_KEY"] = "SET_PROCESSED_FILE_KEY";
     StorageManagerActionTypes["SET_STATUS_UPLOADING"] = "SET_STATUS_UPLOADING";
     StorageManagerActionTypes["SET_UPLOAD_PROGRESS"] = "SET_UPLOAD_PROGRESS";
     StorageManagerActionTypes["REMOVE_UPLOAD"] = "REMOVE_UPLOAD";
 })(StorageManagerActionTypes || (StorageManagerActionTypes = {}));
 
+const updateFiles = (files, nextFileData) => files.reduce((files, currentFile) => {
+    if (currentFile.id === nextFileData.id) {
+        return [...files, { ...currentFile, ...nextFileData }];
+    }
+    return [...files, currentFile];
+}, []);
 function storageManagerStateReducer(state, action) {
     switch (action.type) {
         case StorageManagerActionTypes.ADD_FILES: {
@@ -124,16 +131,10 @@ function storageManagerStateReducer(state, action) {
                 };
             });
             const newFiles = [...state.files, ...newUploads];
-            return {
-                ...state,
-                files: newFiles,
-            };
+            return { ...state, files: newFiles };
         }
         case StorageManagerActionTypes.CLEAR_FILES: {
-            return {
-                ...state,
-                files: [],
-            };
+            return { ...state, files: [] };
         }
         case StorageManagerActionTypes.QUEUE_FILES: {
             const { files } = state;
@@ -155,65 +156,26 @@ function storageManagerStateReducer(state, action) {
         }
         case StorageManagerActionTypes.SET_STATUS_UPLOADING: {
             const { id, uploadTask } = action;
-            const { files } = state;
-            const newFiles = files.reduce((files, currentFile) => {
-                if (currentFile.id === id) {
-                    return [
-                        ...files,
-                        {
-                            ...currentFile,
-                            status: FileStatus.UPLOADING,
-                            progress: 0,
-                            uploadTask,
-                        },
-                    ];
-                }
-                return [...files, currentFile];
-            }, []);
-            return {
-                ...state,
-                files: newFiles,
-            };
+            const status = FileStatus.UPLOADING;
+            const progress = 0;
+            const nextFileData = { status, progress, id, uploadTask };
+            const files = updateFiles(state.files, nextFileData);
+            return { ...state, files };
+        }
+        case StorageManagerActionTypes.SET_PROCESSED_FILE_KEY: {
+            const { processedKey, id } = action;
+            const files = updateFiles(state.files, { processedKey, id });
+            return { files };
         }
         case StorageManagerActionTypes.SET_UPLOAD_PROGRESS: {
             const { id, progress } = action;
-            const { files } = state;
-            const newFiles = files.reduce((files, currentFile) => {
-                if (currentFile.id === id) {
-                    return [
-                        ...files,
-                        {
-                            ...currentFile,
-                            progress,
-                        },
-                    ];
-                }
-                return [...files, currentFile];
-            }, []);
-            return {
-                ...state,
-                files: newFiles,
-            };
+            const files = updateFiles(state.files, { id, progress });
+            return { ...state, files };
         }
         case StorageManagerActionTypes.SET_STATUS: {
             const { id, status } = action;
-            const { files } = state;
-            const newFiles = files.reduce((files, currentFile) => {
-                if (currentFile.id === id) {
-                    return [
-                        ...files,
-                        {
-                            ...currentFile,
-                            status,
-                        },
-                    ];
-                }
-                return [...files, currentFile];
-            }, []);
-            return {
-                ...state,
-                files: newFiles,
-            };
+            const files = updateFiles(state.files, { id, status });
+            return { ...state, files };
         }
         case StorageManagerActionTypes.REMOVE_UPLOAD: {
             const { id } = action;
@@ -245,6 +207,10 @@ const clearFilesAction = () => ({
 const queueFilesAction = () => ({
     type: StorageManagerActionTypes.QUEUE_FILES,
 });
+const setProcessedKeyAction = (input) => ({
+    ...input,
+    type: StorageManagerActionTypes.SET_PROCESSED_FILE_KEY,
+});
 const setUploadingFileAction = ({ id, uploadTask, }) => ({
     type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
     id,
@@ -287,6 +253,9 @@ function useStorageManager(defaultFiles = []) {
     const setUploadingFile = ({ uploadTask, id, }) => {
         dispatch(setUploadingFileAction({ id, uploadTask }));
     };
+    const setProcessedKey = (input) => {
+        dispatch(setProcessedKeyAction(input));
+    };
     const setUploadProgress = ({ progress, id, }) => {
         dispatch(setUploadProgressAction({ id, progress }));
     };
@@ -304,6 +273,7 @@ function useStorageManager(defaultFiles = []) {
     };
     return {
         removeUpload,
+        setProcessedKey,
         setUploadPaused,
         setUploadProgress,
         setUploadResumed,
@@ -434,23 +404,37 @@ const resolveFile = ({ processFile, ...input }) => {
     });
 };
 
-const getInput = ({ accessLevel, file, key, onProgress, path, processFile, }) => {
+const getInput = ({ accessLevel, file, key, onProcessFileSuccess, 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 { file: data, key: processedKey, ...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 };
+        let inputResult;
         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 resolvedKey = hasStringPath
+                ? `${path}${processedKey}`
+                : processedKey;
+            inputResult = {
+                data,
+                key: resolvedKey,
+                options: { ...options, accessLevel },
+            };
+        }
+        else {
+            const { identityId } = await auth.fetchAuthSession();
+            const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
+            inputResult = { data: file, path: resolvedPath, options };
+        }
+        if (processFile) {
+            // provide post-processing value of target `key`
+            onProcessFileSuccess({ processedKey });
         }
-        const { identityId } = await auth.fetchAuthSession();
-        const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
-        return { data: file, path: resolvedPath, options };
+        return inputResult;
     };
 };
 
@@ -476,7 +460,7 @@ async function uploadFile({ input, onError, onStart, onComplete, }) {
     return uploadTask;
 }
 
-function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
+function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }) {
     React__namespace.useEffect(() => {
         const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
         if (filesReadyToUpload.length > maxFileCount) {
@@ -494,10 +478,12 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
                 setUploadProgress({ id, progress });
             };
             if (file) {
+                const handleProcessFileSuccess = (input) => onProcessFileSuccess({ id, ...input });
                 const input = getInput({
                     accessLevel,
                     file,
                     key,
+                    onProcessFileSuccess: handleProcessFileSuccess,
                     onProgress,
                     path,
                     processFile,
@@ -534,6 +520,7 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
         setUploadProgress,
         setUploadingFile,
         onUploadError,
+        onProcessFileSuccess,
         onUploadSuccess,
         onUploadStart,
         maxFileCount,
@@ -580,7 +567,7 @@ const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, perc
 
 const FileRemoveButton = ({ altText, onClick, }) => {
     const icons = internal.useIcons('storageManager');
-    return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick },
+    return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
         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))));
 };
@@ -708,7 +695,7 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
             getFileSizeErrorText,
         });
     };
-    const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setProcessedKey, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
     React__namespace.useImperativeHandle(ref, () => ({ clearFiles }));
     const { dragState, ...dropZoneProps } = internal.useDropZone({
         acceptedFileTypes,
@@ -734,6 +721,7 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
         onUploadError,
         onUploadSuccess,
         onUploadStart,
+        onProcessFileSuccess: setProcessedKey,
         setUploadingFile,
         setUploadProgress,
         setUploadSuccess,
@@ -780,7 +768,9 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
         if (typeof onFileRemove === 'function') {
             const file = files.find((file) => file.id === id);
             if (file) {
-                onFileRemove({ key: file.key });
+                // return `processedKey` if available and `processFile` is provided
+                const key = (processFile && file?.processedKey) ?? file.key;
+                onFileRemove({ key });
             }
         }
     };

package/dist/styles.css

@@ -4682,7 +4682,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-rating {
-  display: inline-flex;
+  display: flex;
   position: relative;
   text-align: left;
   font-size: var(--amplify-components-rating-default-size);

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

@@ -4,6 +4,10 @@ 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 setProcessedKeyAction: (input: {
+    id: string;
+    processedKey: string;
+}) => Action;
 export declare const setUploadingFileAction: ({ id, uploadTask, }: TaskEvent) => Action;
 export declare const setUploadProgressAction: ({ id, progress, }: {
     id: string;

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

@@ -8,6 +8,7 @@ export declare enum StorageManagerActionTypes {
     CLEAR_FILES = "CLEAR_FILES",
     QUEUE_FILES = "QUEUE_FILES",
     SET_STATUS = "SET_STATUS",
+    SET_PROCESSED_FILE_KEY = "SET_PROCESSED_FILE_KEY",
     SET_STATUS_UPLOADING = "SET_STATUS_UPLOADING",
     SET_UPLOAD_PROGRESS = "SET_UPLOAD_PROGRESS",
     REMOVE_UPLOAD = "REMOVE_UPLOAD"
@@ -34,6 +35,10 @@ export type Action = {
     type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS;
     id: string;
     progress: number;
+} | {
+    type: StorageManagerActionTypes.SET_PROCESSED_FILE_KEY;
+    id: string;
+    processedKey: string;
 } | {
     type: StorageManagerActionTypes.REMOVE_UPLOAD;
     id: string;

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

@@ -10,6 +10,10 @@ export interface UseStorageManager {
     clearFiles: () => void;
     queueFiles: () => void;
     setUploadingFile: TaskHandler;
+    setProcessedKey: (params: {
+        id: string;
+        processedKey: string;
+    }) => void;
     setUploadProgress: (params: {
         id: string;
         progress: number;

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

@@ -3,6 +3,10 @@ import { StorageManagerProps } from '../../types';
 import { UseStorageManager } from '../useStorageManager';
 export interface UseUploadFilesProps extends Pick<StorageManagerProps, 'isResumable' | 'onUploadSuccess' | 'onUploadError' | 'onUploadStart' | 'maxFileCount' | 'processFile'>, Pick<UseStorageManager, 'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'> {
     accessLevel?: StorageManagerProps['accessLevel'];
+    onProcessFileSuccess: (input: {
+        id: string;
+        processedKey: string;
+    }) => void;
     path?: string | PathCallback;
 }
-export declare function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }: UseUploadFilesProps): void;
+export declare function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }: UseUploadFilesProps): void;

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

@@ -15,6 +15,7 @@ export interface StorageFile {
     file?: File;
     status: FileStatus;
     progress: number;
+    processedKey?: string;
     uploadTask?: UploadTask;
     key: string;
     error: string;

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

@@ -6,8 +6,11 @@ export interface GetInputParams {
     accessLevel: StorageAccessLevel | undefined;
     file: File;
     key: string;
+    onProcessFileSuccess: (input: {
+        processedKey: string;
+    }) => void;
     onProgress: NonNullable<UploadDataWithPathInput['options']>['onProgress'];
     path: string | PathCallback | undefined;
     processFile: ProcessFile | undefined;
 }
-export declare const getInput: ({ accessLevel, file, key, onProgress, path, processFile, }: GetInputParams) => () => Promise<PathInput | UploadDataInput>;
+export declare const getInput: ({ accessLevel, file, key, onProcessFileSuccess, onProgress, path, processFile, }: GetInputParams) => () => Promise<PathInput | UploadDataInput>;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.1.3";
+export declare const VERSION = "3.1.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "0.0.0-theming-v2-b9a0c18-20240719193825",
+  "version": "0.0.0-theming-v2-882f11a-20240805184032",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -39,9 +39,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "0.0.0-theming-v2-b9a0c18-20240719193825",
-    "@aws-amplify/ui-react": "0.0.0-theming-v2-b9a0c18-20240719193825",
-    "@aws-amplify/ui-react-core": "0.0.0-theming-v2-b9a0c18-20240719193825",
+    "@aws-amplify/ui": "0.0.0-theming-v2-882f11a-20240805184032",
+    "@aws-amplify/ui-react": "0.0.0-theming-v2-882f11a-20240805184032",
+    "@aws-amplify/ui-react-core": "0.0.0-theming-v2-882f11a-20240805184032",
     "lodash": "4.17.21",
     "tslib": "^2.5.2"
   },