@aws-amplify/ui-react-storage 3.4.1 → 3.5.0

package/dist/esm/components/StorageBrowser/providers/configuration/createConfigurationProvider.mjs

@@ -1,21 +1,15 @@
 import React__default from 'react';
 import { isComponent } from '@aws-amplify/ui-react-core/elements';
-import { ActionConfigsProvider } from '../../actions/configs/context.mjs';
-import '@aws-amplify/storage/internals';
-import '@aws-amplify/ui';
-import 'aws-amplify/storage';
-import '@aws-amplify/ui-react-core';
 import { CredentialsProvider } from './credentials/context.mjs';
 import { GetActionInputProvider } from './context.mjs';
 
 const Passthrough = ({ children }) => (React__default.createElement(React__default.Fragment, null, children));
 function createConfigurationProvider(input) {
-    const { accountId, actions, ChildComponent, displayName, region, customEndpoint, ...rest } = input;
+    const { accountId, ChildComponent, displayName, region, customEndpoint, ...rest } = input;
     const Child = isComponent(ChildComponent) ? ChildComponent : Passthrough;
-    const Provider = (props) => (React__default.createElement(ActionConfigsProvider, { actions: actions },
-        React__default.createElement(CredentialsProvider, { ...rest },
-            React__default.createElement(GetActionInputProvider, { accountId: accountId, region: region, customEndpoint: customEndpoint },
-                React__default.createElement(Child, { ...props })))));
+    const Provider = (props) => (React__default.createElement(CredentialsProvider, { ...rest },
+        React__default.createElement(GetActionInputProvider, { accountId: accountId, region: region, customEndpoint: customEndpoint },
+            React__default.createElement(Child, { ...props }))));
     Provider.displayName = displayName;
     return Provider;
 }

package/dist/esm/components/StorageBrowser/providers/configuration/useGetActionInputCallback.mjs

@@ -13,18 +13,18 @@ function useGetActionInputCallback({ accountId, customEndpoint, region, }) {
     const { getCredentials } = useCredentials();
     const [{ location }] = useStore();
     const { current, key } = location;
-    return React__default.useCallback((location) => {
+    return React__default.useCallback((_location) => {
         // prefer passed in location / prefix over current location in state
-        const _location = location ?? current;
+        const location = _location ?? current;
         // when `location` has been provided as a param, resolve `_prefix` to `location.prefix`.
         // in the default scenario where `current` is the target `location` use the fully qualified `key`
         // that includes the default `prefix` and any additional prefixes from navigation
-        const _prefix = location ? location.prefix : key;
-        assertLocationData(_location, getErrorMessage('locationData'));
-        assertPrefix(_prefix, getErrorMessage('prefix'));
-        const { bucket, permissions, type } = _location;
+        const prefix = _location ? _location.prefix : key;
+        assertLocationData(location, getErrorMessage('locationData'));
+        assertPrefix(prefix, getErrorMessage('prefix'));
+        const { bucket, permissions, type } = location;
         // BUCKET/PREFIX grants end with `*`, but object grants do not.
-        const scope = `s3://${bucket}/${_prefix}${type === 'OBJECT' ? '' : '*'}`;
+        const scope = `s3://${bucket}/${prefix}${type === 'OBJECT' ? '' : '*'}`;
         return {
             accountId,
             bucket,

package/dist/esm/components/StorageBrowser/providers/store/locationItems/context.mjs

@@ -1,10 +1,10 @@
 import React__default from 'react';
 import { createContextUtilities } from '@aws-amplify/ui-react-core';
 import { noop } from '@aws-amplify/ui';
-import '../../../actions/configs/context.mjs';
 import '@aws-amplify/storage/internals';
 import { createFileDataItem } from '../../../actions/handlers/utils.mjs';
 import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
 
 const DEFAULT_STATE = {
     fileDataItems: undefined,

package/dist/esm/components/StorageBrowser/tasks/useProcessTasks.mjs

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { getStatusCounts, isProcessingTasks, hasCompletedProcessingTasks } from './utils.mjs';
 import { isFunction } from '@aws-amplify/ui';
+import { getStatusCounts, isProcessingTasks, hasCompletedProcessingTasks } from './utils.mjs';
 
 const QUEUED_TASK_BASE = {
     cancel: undefined,
@@ -17,6 +17,12 @@ const useProcessTasks = (handler, items, options) => {
     }
     const tasksRef = React__default.useRef(new Map());
     const flush = React__default.useReducer(() => ({}), {})[1];
+    const refreshTaskData = React__default.useCallback((id, data) => {
+        const task = tasksRef.current.get(id);
+        if (!task || task.data.id !== data.id)
+            return;
+        tasksRef.current.set(id, { ...task, data });
+    }, []);
     const updateTask = React__default.useCallback((id, next) => {
         const { onTaskRemove } = callbacksRef.current;
         const task = tasksRef.current.get(id);
@@ -56,6 +62,9 @@ const useProcessTasks = (handler, items, options) => {
                 // If an item doesn't yet have a task created for it, create one
                 createTask(item);
             }
+            else {
+                refreshTaskData(item.id, item);
+            }
             // Remove the item from the lookup to mark it as "synced"
             delete taskLookup[item.id];
         });
@@ -67,7 +76,7 @@ const useProcessTasks = (handler, items, options) => {
             updateTask(taskId);
         });
         flush();
-    }, [createTask, flush, updateTask, items]);
+    }, [createTask, flush, updateTask, items, refreshTaskData]);
     const processNextTask = (_input) => {
         const hasInputData = isTaskHandlerInput(_input);
         if (hasInputData) {
@@ -81,14 +90,18 @@ const useProcessTasks = (handler, items, options) => {
             return;
         const { onTaskCancel, onTaskComplete, onTaskError, onTaskProgress, onTaskSuccess, } = callbacksRef.current;
         const getTask = () => tasksRef.current.get(data.id);
+        const { options } = _input;
+        const { onProgress: _onProgress, onSuccess, onError } = options ?? {};
         const onProgress = ({ id }, progress) => {
             const task = getTask();
             if (task && isFunction(onTaskProgress)) {
                 onTaskProgress(task, progress);
             }
+            if (task && isFunction(_onProgress)) {
+                _onProgress(data, progress);
+            }
             updateTask(id, { progress });
         };
-        const { options } = _input;
         const input = { ..._input, data, options: { ...options, onProgress } };
         const { cancel: _cancel, result } = handler(input);
         const cancel = !_cancel
@@ -102,14 +115,19 @@ const useProcessTasks = (handler, items, options) => {
         result
             .then((output) => {
             const task = getTask();
-            if (task && isFunction(onTaskSuccess))
-                onTaskSuccess(task);
+            if (task && isFunction(onTaskSuccess)) {
+                onTaskSuccess(task, output?.value);
+            }
+            if (task && isFunction(onSuccess))
+                onSuccess(data, output?.value);
             updateTask(data.id, output);
         })
             .catch((e) => {
             const task = getTask();
             if (task && isFunction(onTaskError))
                 onTaskError(task, e);
+            if (task && isFunction(onError))
+                onError(data, e?.message);
             updateTask(data.id, { message: e.message, status: 'FAILED' });
         })
             .finally(() => {
@@ -141,8 +159,11 @@ const useProcessTasks = (handler, items, options) => {
             count++;
         }
     };
+    const reset = () => {
+        tasks.forEach(({ data }) => updateTask(data.id));
+    };
     return [
-        { isProcessing, isProcessingComplete, statusCounts, tasks },
+        { isProcessing, isProcessingComplete, reset, statusCounts, tasks },
         handleProcessTasks,
     ];
 };

package/dist/esm/components/StorageBrowser/useAction/constants.mjs

@@ -0,0 +1,4 @@
+const DEFAULT_ACTION_CONCURRENCY = 4;
+const USE_LIST_ERROR_MESSAGE = '`useList` must be called from within `StorageBrowser.Provider`';
+
+export { DEFAULT_ACTION_CONCURRENCY, USE_LIST_ERROR_MESSAGE };

package/dist/esm/components/StorageBrowser/useAction/context.mjs

@@ -0,0 +1,8 @@
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+
+const { ActionHandlersProvider, useActionHandlers } = createContextUtilities({
+    contextName: 'ActionHandlers',
+    errorMessage: '`useActionHandlers` must be called from within an `ActionHandlersProvider',
+});
+
+export { ActionHandlersProvider, useActionHandlers };

package/dist/esm/components/StorageBrowser/useAction/useAction.mjs

@@ -0,0 +1,18 @@
+import { useActionHandlers } from './context.mjs';
+import { useHandler } from './useHandler.mjs';
+
+const ERROR_MESSAGE = '`useAction` must be called from within `StorageBrowser.Provider`';
+const useAction = (key, options) => {
+    if (key === 'listLocations' ||
+        key === 'listLocationItems') {
+        throw new Error(`Value of \`${key}\` cannot be used to index \`useAction\``);
+    }
+    const { handlers } = useActionHandlers({ errorMessage: ERROR_MESSAGE });
+    const handler = handlers[key];
+    if (!handler) {
+        throw new Error(`No handler found for value of \`${key}\` provided to \`useAction\``);
+    }
+    return useHandler(handler, options);
+};
+
+export { ERROR_MESSAGE, useAction };

package/dist/esm/components/StorageBrowser/useAction/useHandler.mjs

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { isObject } from '@aws-amplify/ui';
+import { useGetActionInput } from '../providers/configuration/context.mjs';
+import '../providers/store/location/context.mjs';
+import '../providers/store/files/context.mjs';
+import '../providers/store/actionType/context.mjs';
+import '../providers/store/locationItems/context.mjs';
+import { useStore } from '../providers/store/useStore.mjs';
+import { useProcessTasks } from '../tasks/useProcessTasks.mjs';
+import { DEFAULT_ACTION_CONCURRENCY } from './constants.mjs';
+
+const isTasksOptions = (value) => isObject(value);
+const useHandler = (action, options) => {
+    const hasOptions = isTasksOptions(options);
+    const { items, onTaskSuccess } = options ?? {};
+    const getConfig = useGetActionInput();
+    const { location: { current }, } = useStore()[0];
+    const [state, processTask] = useProcessTasks(action, items, {
+        onTaskSuccess,
+        ...(items ? { concurrency: DEFAULT_ACTION_CONCURRENCY } : undefined),
+    });
+    const { reset, isProcessing, tasks } = state;
+    const handler = React__default.useCallback((input) => {
+        const { location } = input ?? {};
+        const config = getConfig(location ?? current);
+        if (!hasOptions) {
+            // clean up previous state
+            reset();
+            processTask({ ...input, config });
+            return;
+        }
+        processTask({ config });
+    }, [current, getConfig, hasOptions, processTask, reset]);
+    return [
+        hasOptions ? state : { isProcessing, task: tasks?.[0] },
+        handler,
+    ];
+};
+
+export { useHandler };

package/dist/esm/components/StorageBrowser/useAction/useList.mjs

@@ -0,0 +1,19 @@
+import { useListLocations } from './useListLocations.mjs';
+import { useListLocationItems } from './useListLocationItems.mjs';
+import { useListFolderItems } from './useListFolderItems.mjs';
+
+const LIST_ACTION_HOOKS = {
+    folderItems: useListFolderItems,
+    locationItems: useListLocationItems,
+    locations: useListLocations,
+};
+const isListActionViewType = (value) => Object.keys(LIST_ACTION_HOOKS).includes(value);
+// @ts-expect-error
+const useList = (type) => {
+    if (!isListActionViewType(type)) {
+        throw new Error(`Value of \`${type}\` cannot be used to index \`useList\``);
+    }
+    return LIST_ACTION_HOOKS[type]();
+};
+
+export { useList };

package/dist/esm/components/StorageBrowser/useAction/useListFolderItems.mjs

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { useDataState } from '@aws-amplify/ui-react-core';
+import { USE_LIST_ERROR_MESSAGE } from './constants.mjs';
+import { useActionHandlers } from './context.mjs';
+import { createEnhancedListHandler } from './createEnhancedListHandler.mjs';
+import '@aws-amplify/ui-react-core/elements';
+import '../providers/configuration/credentials/context.mjs';
+import { useGetActionInput } from '../providers/configuration/context.mjs';
+
+const useListFolderItems = () => {
+    const { handlers } = useActionHandlers({
+        errorMessage: USE_LIST_ERROR_MESSAGE,
+    });
+    const getConfig = useGetActionInput();
+    const { listLocationItems } = handlers;
+    const enhancedHandler = React__default.useMemo(() => createEnhancedListHandler((input) => listLocationItems({ ...input, config: getConfig() })), [getConfig, listLocationItems]);
+    return useDataState(enhancedHandler, {
+        items: [],
+        nextToken: undefined,
+    });
+};
+
+export { useListFolderItems };

package/dist/esm/components/StorageBrowser/useAction/useListLocationItems.mjs

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { useDataState } from '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react-core/elements';
+import '../providers/configuration/credentials/context.mjs';
+import { useGetActionInput } from '../providers/configuration/context.mjs';
+import { USE_LIST_ERROR_MESSAGE } from './constants.mjs';
+import { useActionHandlers } from './context.mjs';
+import { createEnhancedListHandler } from './createEnhancedListHandler.mjs';
+
+const useListLocationItems = () => {
+    const { handlers } = useActionHandlers({
+        errorMessage: USE_LIST_ERROR_MESSAGE,
+    });
+    const getConfig = useGetActionInput();
+    const { listLocationItems } = handlers;
+    const enhancedHandler = React__default.useMemo(() => createEnhancedListHandler((input) => listLocationItems({ ...input, config: getConfig() })), [getConfig, listLocationItems]);
+    return useDataState(enhancedHandler, {
+        items: [],
+        nextToken: undefined,
+    });
+};
+
+export { useListLocationItems };

package/dist/esm/components/StorageBrowser/{actions/useAction → useAction}/useListLocations.mjs

@@ -1,14 +1,15 @@
 import React__default from 'react';
 import { useDataState } from '@aws-amplify/ui-react-core';
-import { useActionConfig } from '../configs/context.mjs';
-import '@aws-amplify/storage/internals';
-import '@aws-amplify/ui';
-import 'aws-amplify/storage';
+import { USE_LIST_ERROR_MESSAGE } from './constants.mjs';
+import { useActionHandlers } from './context.mjs';
 import { createEnhancedListHandler } from './createEnhancedListHandler.mjs';
 
 const useListLocations = () => {
-    const { handler } = useActionConfig('listLocations');
-    const enhancedHandler = React__default.useMemo(() => createEnhancedListHandler(handler), [handler]);
+    const { handlers } = useActionHandlers({
+        errorMessage: USE_LIST_ERROR_MESSAGE,
+    });
+    const { listLocations } = handlers;
+    const enhancedHandler = React__default.useMemo(() => createEnhancedListHandler(listLocations), [listLocations]);
     return useDataState(enhancedHandler, {
         items: [],
         nextToken: undefined,

package/dist/esm/components/StorageBrowser/useAction/utils.mjs

@@ -0,0 +1,26 @@
+import { isFunction } from '@aws-amplify/ui';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../actions/configs/context.mjs';
+import { isDefaultActionViewType } from '../actions/configs/defaults.mjs';
+
+const resolveHandler = (value) => (isFunction(value) ? value : value.handler);
+const getActionHandlers = (configs) => {
+    const { copy: copyConfig, createFolder: createFolderConfig, delete: deleteConfig, download, upload: uploadConfig, listLocationItems, listLocations, } = configs.default;
+    const defaultHandlers = {
+        copy: copyConfig.handler,
+        createFolder: createFolderConfig.handler,
+        delete: deleteConfig.handler,
+        download,
+        listLocationItems,
+        listLocations,
+        upload: uploadConfig.handler,
+    };
+    return !configs.custom
+        ? defaultHandlers
+        : Object.entries(configs.custom).reduce((handlers, [key, config]) => isDefaultActionViewType(key)
+            ? handlers
+            : { ...handlers, [key]: resolveHandler(config) }, defaultHandlers);
+};
+
+export { getActionHandlers };

package/dist/esm/components/StorageBrowser/views/LocationActionView/CopyView/CopyView.mjs

@@ -9,7 +9,7 @@ import { ActionStartControl } from '../../../controls/ActionStartControl.mjs';
 import { DataTableControl } from '../../../controls/DataTableControl.mjs';
 import { LoadingIndicatorControl } from '../../../controls/LoadingIndicatorControl.mjs';
 import { MessageControl } from '../../../controls/MessageControl.mjs';
-import { SearchControl } from '../../../controls/SearchControl.mjs';
+import { SearchFieldControl } from '../../../controls/SearchFieldControl.mjs';
 import { StatusDisplayControl } from '../../../controls/StatusDisplayControl.mjs';
 import { TitleControl } from '../../../controls/TitleControl.mjs';
 import { CopyViewProvider } from './CopyViewProvider.mjs';
@@ -32,7 +32,7 @@ const CopyView = ({ className, ...props }) => {
             isProcessing || isProcessingComplete ? null : (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__controls` },
                     React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search` },
-                        React__default.createElement(SearchControl, null)),
+                        React__default.createElement(SearchFieldControl, null)),
                     React__default.createElement(FoldersPaginationControl, null)),
                 React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
                     React__default.createElement(LoadingIndicatorControl, null),
@@ -55,7 +55,7 @@ CopyView.Exit = ActionExitControl;
 CopyView.FoldersLoadingIndicator = LoadingIndicatorControl;
 CopyView.FoldersMessage = FoldersMessageControl;
 CopyView.FoldersPagination = FoldersPaginationControl;
-CopyView.FoldersSearch = SearchControl;
+CopyView.FoldersSearch = SearchFieldControl;
 CopyView.FoldersTable = FoldersTableControl;
 CopyView.Message = MessageControl;
 CopyView.Start = ActionStartControl;

package/dist/esm/components/StorageBrowser/views/LocationActionView/CopyView/useCopyView.mjs

@@ -1,28 +1,43 @@
-import React__default, { useState } from 'react';
+import React__default, { useRef, useState } from 'react';
 import { isFunction } from '@aws-amplify/ui';
-import { copyHandler } from '../../../actions/handlers/copy.mjs';
-import '@aws-amplify/storage/internals';
-import 'aws-amplify/storage';
-import { useProcessTasks } from '../../../tasks/useProcessTasks.mjs';
-import { useGetActionInput } from '../../../providers/configuration/context.mjs';
-import '@aws-amplify/ui-react-core/elements';
-import '../../../actions/configs/context.mjs';
-import '@aws-amplify/ui-react-core';
-import '../../../providers/configuration/credentials/context.mjs';
 import '../../../providers/store/location/context.mjs';
 import '../../../providers/store/files/context.mjs';
 import '../../../providers/store/actionType/context.mjs';
 import '../../../providers/store/locationItems/context.mjs';
 import { useStore } from '../../../providers/store/useStore.mjs';
+import '../../../useAction/context.mjs';
+import { useAction } from '../../../useAction/useAction.mjs';
+import '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react-core/elements';
+import '../../../providers/configuration/credentials/context.mjs';
+import '../../../providers/configuration/context.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
 import { useFolders } from './useFolders.mjs';
 
 const useCopyView = (options) => {
     const { onExit } = options ?? {};
     const [{ location, locationItems: { fileDataItems }, }, dispatchStoreAction,] = useStore();
-    const getInput = useGetActionInput();
-    const [processState, handleProcess] = useProcessTasks(copyHandler, fileDataItems, { concurrency: 4 });
+    const idLookup = useRef({});
     const [destination, setDestination] = useState(location);
+    const data = React__default.useMemo(() => {
+        idLookup.current = {};
+        return fileDataItems?.map((item) => {
+            // generate new `id` on each `destination.key` change to refresh
+            // task data provided to `useActon`
+            const id = crypto.randomUUID();
+            idLookup.current[id] = item.id;
+            return {
+                ...item,
+                id,
+                key: `${destination.key}${item.fileKey}`,
+                sourceKey: item.key,
+            };
+        });
+    }, [destination.key, fileDataItems]);
     const folders = useFolders({ destination, setDestination });
+    const [processState, handleProcess] = useAction('copy', { items: data });
     const { isProcessing, isProcessingComplete, statusCounts, tasks } = processState;
     const { current } = location;
     const { onInitialize } = folders;
@@ -31,10 +46,7 @@ const useCopyView = (options) => {
         onInitialize();
     }, [onInitialize]);
     const onActionStart = () => {
-        handleProcess({
-            config: getInput(),
-            destinationPrefix: destination.key,
-        });
+        handleProcess();
     };
     const onActionCancel = () => {
         tasks.forEach((task) => {
@@ -51,7 +63,10 @@ const useCopyView = (options) => {
             onExit(current);
     };
     const onTaskRemove = React__default.useCallback(({ data }) => {
-        dispatchStoreAction({ type: 'REMOVE_LOCATION_ITEM', id: data.id });
+        dispatchStoreAction({
+            type: 'REMOVE_LOCATION_ITEM',
+            id: idLookup.current[data.id],
+        });
     }, [dispatchStoreAction]);
     const onSelectDestination = (selectedDestination, path) => {
         setDestination({

package/dist/esm/components/StorageBrowser/views/LocationActionView/CopyView/useFolders.mjs

@@ -1,15 +1,16 @@
 import React__default from 'react';
-import { useDataState } from '@aws-amplify/ui-react-core';
-import { usePaginate } from '../../hooks/usePaginate.mjs';
-import '../../../actions/configs/context.mjs';
-import '@aws-amplify/storage/internals';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui';
-import { listLocationItemsHandler } from '../../../actions/handlers/listLocationItems.mjs';
+import '../../../providers/configuration/context.mjs';
+import '../../../providers/store/location/context.mjs';
+import '../../../providers/store/files/context.mjs';
+import '../../../providers/store/actionType/context.mjs';
+import '../../../providers/store/locationItems/context.mjs';
+import { useList } from '../../../useAction/useList.mjs';
+import '@aws-amplify/storage/internals';
 import 'aws-amplify/storage';
-import { createEnhancedListHandler } from '../../../actions/useAction/createEnhancedListHandler.mjs';
-import { useGetActionInput } from '../../../providers/configuration/context.mjs';
-import '@aws-amplify/ui-react-core/elements';
-import '../../../providers/configuration/credentials/context.mjs';
+import '../../../actions/configs/context.mjs';
+import { usePaginate } from '../../hooks/usePaginate.mjs';
 import { useSearch } from '../../hooks/useSearch.mjs';
 
 const DEFAULT_PAGE_SIZE = 100;
@@ -19,26 +20,22 @@ const DEFAULT_LIST_OPTIONS = {
     exclude: 'FILE',
 };
 const DEFAULT_REFRESH_OPTIONS = { ...DEFAULT_LIST_OPTIONS, refresh: true };
-const listLocationItemsAction = createEnhancedListHandler(listLocationItemsHandler);
 const useFolders = ({ destination, setDestination, }) => {
     const { current, key } = destination;
-    const [{ data, hasError, isLoading, message }, handleList] = useDataState(listLocationItemsAction, { items: [], nextToken: undefined });
-    const getInput = useGetActionInput();
+    const [{ data, hasError, isLoading, message }, handleList] = useList('folderItems');
     const { items, nextToken, search } = data;
     const { hasExhaustedSearch = false } = search ?? {};
     const onInitialize = React__default.useCallback(() => {
         handleList({
-            config: getInput(),
             prefix: key,
             options: { ...DEFAULT_REFRESH_OPTIONS },
         });
-    }, [getInput, handleList, key]);
+    }, [handleList, key]);
     const hasNextToken = !!nextToken;
     const paginateCallback = () => {
         if (!nextToken)
             return;
         handleList({
-            config: getInput(),
             prefix: key,
             options: { ...DEFAULT_LIST_OPTIONS, nextToken },
         });
@@ -52,7 +49,6 @@ const useFolders = ({ destination, setDestination, }) => {
     const onSearch = (query) => {
         handleReset();
         handleList({
-            config: getInput(),
             prefix: key,
             options: {
                 ...DEFAULT_LIST_OPTIONS,
@@ -90,7 +86,6 @@ const useFolders = ({ destination, setDestination, }) => {
             handleReset();
             resetSearch();
             handleList({
-                config: getInput(),
                 prefix: key,
                 options: { ...DEFAULT_REFRESH_OPTIONS },
             });

package/dist/esm/components/StorageBrowser/views/LocationActionView/CreateFolderView/useCreateFolderView.mjs

@@ -1,28 +1,36 @@
 import React__default from 'react';
 import { isFunction } from '@aws-amplify/ui';
-import '../../../actions/configs/context.mjs';
-import '@aws-amplify/storage/internals';
-import { createFolderHandler } from '../../../actions/handlers/createFolder.mjs';
-import 'aws-amplify/storage';
+import '../../../useAction/context.mjs';
+import { useAction } from '../../../useAction/useAction.mjs';
 import '@aws-amplify/ui-react-core';
-import { useGetActionInput } from '../../../providers/configuration/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
 import '../../../providers/configuration/credentials/context.mjs';
+import '../../../providers/configuration/context.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
 import '../../../providers/store/location/context.mjs';
 import '../../../providers/store/files/context.mjs';
 import '../../../providers/store/actionType/context.mjs';
 import '../../../providers/store/locationItems/context.mjs';
 import { useStore } from '../../../providers/store/useStore.mjs';
-import { useProcessTasks } from '../../../tasks/useProcessTasks.mjs';
 
 const useCreateFolderView = (options) => {
     const { onExit } = options ?? {};
     const [folderName, setFolderName] = React__default.useState('');
     const folderNameId = React__default.useRef(crypto.randomUUID()).current;
-    const getConfig = useGetActionInput();
-    const [{ tasks, isProcessing, isProcessingComplete, statusCounts }, handleCreateFolder,] = useProcessTasks(createFolderHandler);
     const [{ location }, dispatchStoreAction] = useStore();
-    const { current, key: destinationPrefix } = location;
+    const { current, key } = location;
+    const data = React__default.useMemo(() => [
+        {
+            // generate new `id` on each `folderName` change to refresh task
+            // data provided to `useAction`
+            id: crypto.randomUUID(),
+            key: `${key}${folderName}/`,
+            preventOverwrite: true,
+        },
+    ], [key, folderName]);
+    const [{ tasks, isProcessing, isProcessingComplete, statusCounts }, handleCreateFolder,] = useAction('createFolder', { items: data });
     return {
         folderName,
         folderNameId,
@@ -30,12 +38,7 @@ const useCreateFolderView = (options) => {
         isProcessingComplete,
         location,
         onActionStart: () => {
-            handleCreateFolder({
-                config: getConfig(),
-                data: { id: folderNameId, key: `${folderName}/` },
-                destinationPrefix,
-                options: { preventOverwrite: true },
-            });
+            handleCreateFolder();
         },
         onActionExit: () => {
             if (isFunction(onExit))

package/dist/esm/components/StorageBrowser/views/LocationActionView/DeleteView/useDeleteView.mjs

@@ -1,32 +1,37 @@
-import { isFunction } from '@aws-amplify/ui';
-import '@aws-amplify/storage/internals';
-import { deleteHandler } from '../../../actions/handlers/delete.mjs';
-import 'aws-amplify/storage';
 import React__default from 'react';
+import { isFunction } from '@aws-amplify/ui';
 import '../../../providers/store/location/context.mjs';
 import '../../../providers/store/files/context.mjs';
 import '../../../providers/store/actionType/context.mjs';
 import '../../../providers/store/locationItems/context.mjs';
 import { useStore } from '../../../providers/store/useStore.mjs';
-import { useGetActionInput } from '../../../providers/configuration/context.mjs';
-import '@aws-amplify/ui-react-core/elements';
-import '../../../actions/configs/context.mjs';
+import '../../../useAction/context.mjs';
+import { useAction } from '../../../useAction/useAction.mjs';
 import '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react-core/elements';
 import '../../../providers/configuration/credentials/context.mjs';
-import { useProcessTasks } from '../../../tasks/useProcessTasks.mjs';
+import '../../../providers/configuration/context.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
 
 const useDeleteView = (options) => {
     const { onExit: _onExit } = options ?? {};
     const [{ location, locationItems }, dispatchStoreAction] = useStore();
     const { fileDataItems } = locationItems;
-    const { current } = location;
-    const getInput = useGetActionInput();
-    const [processState, handleProcess] = useProcessTasks(deleteHandler, fileDataItems, { concurrency: 4 });
+    const { current, key } = location;
+    const data = React__default.useMemo(() => !fileDataItems
+        ? []
+        : fileDataItems.map((item) => ({
+            ...item,
+            key: `${key}${item.fileKey}`,
+        })), [fileDataItems, key]);
+    const [processState, handleProcess] = useAction('delete', { items: data });
     const { isProcessing, isProcessingComplete, statusCounts, tasks } = processState;
     const onActionStart = () => {
         if (!current)
             return;
-        handleProcess({ config: getInput() });
+        handleProcess();
     };
     const onActionCancel = () => {
         tasks.forEach((task) => {