@aws-amplify/ui-react-storage 3.3.9 → 3.4.0

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

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { noop } from '@aws-amplify/ui';
+import { assertLocationData } from '../../../validators/assertLocationData.mjs';
+
+const ERROR_MESSAGE = 'Invalid `location` value provided as initial value to `LocationProvider.';
+const DEFAULT_STATE = {
+    current: undefined,
+    path: '',
+    key: '',
+};
+function handleAction(state, action) {
+    switch (action.type) {
+        case 'NAVIGATE': {
+            const { location, path = '' } = action;
+            if (state.current?.id === location.id && state.path === path) {
+                return state;
+            }
+            return {
+                current: location,
+                path,
+                key: `${location.prefix ?? ''}${path}`,
+            };
+        }
+        case 'RESET_LOCATION': {
+            return DEFAULT_STATE;
+        }
+    }
+}
+const defaultValue = [DEFAULT_STATE, noop];
+const { LocationContext, useLocation } = createContextUtilities({
+    contextName: 'Location',
+    defaultValue,
+});
+function LocationProvider({ children, location, path = '', }) {
+    if (location) {
+        assertLocationData(location, ERROR_MESSAGE);
+    }
+    const value = React__default.useReducer(handleAction, location
+        ? {
+            current: location,
+            path,
+            key: `${location.prefix ?? ''}${path}`,
+        }
+        : DEFAULT_STATE);
+    return (React__default.createElement(LocationContext.Provider, { value: value }, children));
+}
+
+export { DEFAULT_STATE, ERROR_MESSAGE, LocationContext, LocationProvider, useLocation };

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

@@ -0,0 +1,52 @@
+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';
+
+const DEFAULT_STATE = {
+    fileDataItems: undefined,
+};
+const locationItemsReducer = (prevState, event) => {
+    switch (event.type) {
+        case 'SET_LOCATION_ITEMS': {
+            const { items } = event;
+            if (!items?.length)
+                return prevState;
+            if (!prevState.fileDataItems?.length) {
+                return { fileDataItems: items.map(createFileDataItem) };
+            }
+            const nextFileDataItems = items?.reduce((fileDataItems, data) => prevState.fileDataItems?.some(({ id }) => id === data.id)
+                ? fileDataItems
+                : fileDataItems.concat(createFileDataItem(data)), []);
+            if (!nextFileDataItems?.length)
+                return prevState;
+            return {
+                fileDataItems: prevState.fileDataItems.concat(nextFileDataItems),
+            };
+        }
+        case 'REMOVE_LOCATION_ITEM': {
+            const { id } = event;
+            if (!prevState.fileDataItems)
+                return prevState;
+            const fileDataItems = prevState.fileDataItems.filter((item) => item.id !== id);
+            if (fileDataItems.length === prevState.fileDataItems.length) {
+                return prevState;
+            }
+            return { fileDataItems };
+        }
+        case 'RESET_LOCATION_ITEMS': {
+            return DEFAULT_STATE;
+        }
+    }
+};
+const defaultValue = [DEFAULT_STATE, noop];
+const { LocationItemsContext, useLocationItems } = createContextUtilities({ contextName: 'LocationItems', defaultValue });
+function LocationItemsProvider({ children, }) {
+    const value = React__default.useReducer(locationItemsReducer, DEFAULT_STATE);
+    return (React__default.createElement(LocationItemsContext.Provider, { value: value }, children));
+}
+
+export { DEFAULT_STATE, LocationItemsContext, LocationItemsProvider, useLocationItems };

package/dist/esm/components/StorageBrowser/providers/store/useStore.mjs

@@ -0,0 +1,47 @@
+import React__default from 'react';
+import { useActionType } from './actionType/context.mjs';
+import { useFiles } from './files/context.mjs';
+import { useLocation } from './location/context.mjs';
+import { useLocationItems } from './locationItems/context.mjs';
+
+function useStore() {
+    const [actionType, dispatchActionType] = useActionType();
+    const [files, dispatchFilesAction] = useFiles();
+    const [location, dispatchLocationAction] = useLocation();
+    const [locationItems, dispatchLocationItemsAction] = useLocationItems();
+    const dispatchHandler = React__default.useCallback((action) => {
+        switch (action.type) {
+            case 'ADD_FILE_ITEMS':
+            case 'REMOVE_FILE_ITEM':
+            case 'SELECT_FILES':
+            case 'RESET_FILE_ITEMS': {
+                dispatchFilesAction(action);
+                break;
+            }
+            case 'NAVIGATE':
+            case 'RESET_LOCATION': {
+                dispatchLocationAction(action);
+                break;
+            }
+            case 'SET_LOCATION_ITEMS':
+            case 'REMOVE_LOCATION_ITEM':
+            case 'RESET_LOCATION_ITEMS': {
+                dispatchLocationItemsAction(action);
+                break;
+            }
+            case 'SET_ACTION_TYPE':
+            case 'RESET_ACTION_TYPE': {
+                dispatchActionType(action);
+                break;
+            }
+        }
+    }, [
+        dispatchActionType,
+        dispatchFilesAction,
+        dispatchLocationAction,
+        dispatchLocationItemsAction,
+    ]);
+    return [{ actionType, files, location, locationItems }, dispatchHandler];
+}
+
+export { useStore };

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

@@ -0,0 +1,11 @@
+const INITIAL_STATUS_COUNTS = {
+    CANCELED: 0,
+    COMPLETE: 0,
+    FAILED: 0,
+    PENDING: 0,
+    OVERWRITE_PREVENTED: 0,
+    QUEUED: 0,
+    TOTAL: 0,
+};
+
+export { INITIAL_STATUS_COUNTS };

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

@@ -0,0 +1,150 @@
+import React__default from 'react';
+import { getStatusCounts, isProcessingTasks, hasCompletedProcessingTasks } from './utils.mjs';
+import { isFunction } from '@aws-amplify/ui';
+
+const QUEUED_TASK_BASE = {
+    cancel: undefined,
+    message: undefined,
+    progress: undefined,
+    status: 'QUEUED',
+};
+const isTaskHandlerInput = (input) => !!input.data;
+const useProcessTasks = (handler, items, options) => {
+    const { concurrency, ...callbacks } = options ?? {};
+    const callbacksRef = React__default.useRef(callbacks);
+    if (callbacks) {
+        callbacksRef.current = callbacks;
+    }
+    const tasksRef = React__default.useRef(new Map());
+    const flush = React__default.useReducer(() => ({}), {})[1];
+    const updateTask = React__default.useCallback((id, next) => {
+        const { onTaskRemove } = callbacksRef.current;
+        const task = tasksRef.current.get(id);
+        if (!task)
+            return;
+        if (!next) {
+            onTaskRemove?.(task);
+            tasksRef.current.delete(id);
+        }
+        else {
+            tasksRef.current.set(id, { ...task, ...next });
+        }
+        flush();
+    }, [flush]);
+    const createTask = React__default.useCallback((data) => {
+        const getTask = () => tasksRef.current.get(data.id);
+        const { onTaskCancel } = callbacksRef.current;
+        function cancel() {
+            const task = getTask();
+            if (!task || task?.status !== 'QUEUED')
+                return;
+            if (task && isFunction(onTaskCancel))
+                onTaskCancel(task);
+            updateTask(data.id, { cancel: undefined, status: 'CANCELED' });
+        }
+        const task = { ...QUEUED_TASK_BASE, cancel, data };
+        tasksRef.current.set(data.id, task);
+    }, [updateTask]);
+    React__default.useEffect(() => {
+        // Sync tasks with items by first creating a lookup of current tasks
+        const taskLookup = {};
+        tasksRef.current.forEach(({ data }) => {
+            taskLookup[data.id] = true;
+        });
+        items?.forEach((item) => {
+            if (!taskLookup[item.id]) {
+                // If an item doesn't yet have a task created for it, create one
+                createTask(item);
+            }
+            // Remove the item from the lookup to mark it as "synced"
+            delete taskLookup[item.id];
+        });
+        // Remaining tasks are items which have been removed from state but not yet from tasks, so they should be removed
+        Object.keys(taskLookup).forEach((taskId) => {
+            // This should not happen, but if the task is pending then it cannot be removed
+            if (tasksRef.current.get(taskId)?.status === 'PENDING')
+                return;
+            updateTask(taskId);
+        });
+        flush();
+    }, [createTask, flush, updateTask, items]);
+    const processNextTask = (_input) => {
+        const hasInputData = isTaskHandlerInput(_input);
+        if (hasInputData) {
+            createTask(_input.data);
+            flush();
+        }
+        const { data } = hasInputData
+            ? _input
+            : [...tasksRef.current.values()].find(({ status }) => status === 'QUEUED') ?? {};
+        if (!data)
+            return;
+        const { onTaskCancel, onTaskComplete, onTaskError, onTaskProgress, onTaskSuccess, } = callbacksRef.current;
+        const getTask = () => tasksRef.current.get(data.id);
+        const onProgress = ({ id }, progress) => {
+            const task = getTask();
+            if (task && isFunction(onTaskProgress)) {
+                onTaskProgress(task, progress);
+            }
+            updateTask(id, { progress });
+        };
+        const { options } = _input;
+        const input = { ..._input, data, options: { ...options, onProgress } };
+        const { cancel: _cancel, result } = handler(input);
+        const cancel = !_cancel
+            ? undefined
+            : () => {
+                const task = getTask();
+                if (task && isFunction(onTaskCancel))
+                    onTaskCancel(task);
+                _cancel();
+            };
+        result
+            .then((output) => {
+            const task = getTask();
+            if (task && isFunction(onTaskSuccess))
+                onTaskSuccess(task);
+            updateTask(data.id, output);
+        })
+            .catch((e) => {
+            const task = getTask();
+            if (task && isFunction(onTaskError))
+                onTaskError(task, e);
+            updateTask(data.id, { message: e.message, status: 'FAILED' });
+        })
+            .finally(() => {
+            const task = getTask();
+            if (task && isFunction(onTaskComplete))
+                onTaskComplete(task);
+            // ignore process next task for single operation inputs
+            if (hasInputData)
+                return;
+            processNextTask(_input);
+        });
+        updateTask(data.id, { cancel, status: 'PENDING' });
+    };
+    const tasks = [...tasksRef.current.values()];
+    const statusCounts = getStatusCounts(tasks);
+    const isProcessing = isProcessingTasks(statusCounts);
+    const isProcessingComplete = hasCompletedProcessingTasks(statusCounts);
+    const handleProcessTasks = (input) => {
+        if (isProcessing) {
+            return;
+        }
+        if (!concurrency) {
+            processNextTask(input);
+            return;
+        }
+        let count = 0;
+        while (count < concurrency) {
+            processNextTask(input);
+            count++;
+        }
+    };
+    return [
+        { isProcessing, isProcessingComplete, statusCounts, tasks },
+        handleProcessTasks,
+    ];
+};
+
+export { useProcessTasks };

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

@@ -0,0 +1,16 @@
+import { INITIAL_STATUS_COUNTS } from './constants.mjs';
+
+const getStatusCounts = (tasks = []) => tasks.reduce((counts, { status }) => ({ ...counts, [status]: counts[status] + 1 }), { ...INITIAL_STATUS_COUNTS, TOTAL: tasks.length });
+const isProcessingTasks = (statusCounts) => {
+    if (statusCounts.TOTAL === 0 || statusCounts.TOTAL === statusCounts.QUEUED) {
+        return false;
+    }
+    return !(statusCounts.QUEUED === 0 && statusCounts.PENDING === 0);
+};
+const hasCompletedProcessingTasks = (statusCounts) => {
+    if (statusCounts.TOTAL === 0 || isProcessingTasks(statusCounts))
+        return false;
+    return statusCounts.QUEUED === 0 && statusCounts.PENDING === 0;
+};
+
+export { getStatusCounts, hasCompletedProcessingTasks, isProcessingTasks };

package/dist/esm/components/StorageBrowser/validators/assertAccountId.mjs

@@ -0,0 +1,7 @@
+function assertAccountId(value) {
+    if (!value) {
+        throw new Error('Storage Browser: Must provide accountId to `listCallerAccessGrants`.');
+    }
+}
+
+export { assertAccountId };

package/dist/esm/components/StorageBrowser/validators/assertLocationData.mjs

@@ -0,0 +1,24 @@
+import { isObject, isString } from '@aws-amplify/ui';
+
+function assertLocationPermissions(value, message) {
+    if (!Array.isArray(value) ||
+        value.some((inputPermissionEntry) => typeof inputPermissionEntry !== 'string' ||
+            !['list', 'get', 'write', 'delete'].includes(inputPermissionEntry))) {
+        throw new Error(message);
+    }
+}
+function assertLocationData(value, message = 'Invalid value provided as `location`.') {
+    const locationStringDataKeys = ['bucket', 'id', 'prefix', 'type'];
+    if (!isObject(value) ||
+        locationStringDataKeys.some((key) => !isString(value[key]))) {
+        throw new Error(message);
+    }
+    assertLocationPermissions(value?.permissions, message);
+}
+function assertPrefix(value, message) {
+    if (!isString(value)) {
+        throw new Error(message ?? 'Invalid value provided as `prefix`.');
+    }
+}
+
+export { assertLocationData, assertPrefix };

package/dist/esm/components/StorageBrowser/validators/assertRegisterAuthListener.mjs

@@ -0,0 +1,9 @@
+import { isFunction } from '@aws-amplify/ui';
+
+function assertRegisterAuthListener(value) {
+    if (!isFunction(value)) {
+        throw new Error('StorageBrowser: `registerAuthListener` must be a function.');
+    }
+}
+
+export { assertRegisterAuthListener };

package/dist/esm/components/StorageBrowser/validators/isFileTooBig.mjs

@@ -0,0 +1,4 @@
+const UPLOAD_FILE_SIZE_LIMIT = 160 * 1000 * 1000 * 1000;
+const isFileTooBig = (file) => file.size > UPLOAD_FILE_SIZE_LIMIT;
+
+export { UPLOAD_FILE_SIZE_LIMIT, isFileTooBig };

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

@@ -0,0 +1,66 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { ActionCancelControl } from '../../../controls/ActionCancelControl.mjs';
+import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';
+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 { StatusDisplayControl } from '../../../controls/StatusDisplayControl.mjs';
+import { TitleControl } from '../../../controls/TitleControl.mjs';
+import { CopyViewProvider } from './CopyViewProvider.mjs';
+import { FoldersMessageControl } from './FoldersMessageControl.mjs';
+import { FoldersPaginationControl } from './FoldersPaginationControl.mjs';
+import { FoldersTableControl } from './FoldersTableControl.mjs';
+import { ActionDestinationControl } from '../../../controls/ActionDestinationControl.mjs';
+import { useCopyView } from './useCopyView.mjs';
+import { classNames } from '@aws-amplify/ui';
+
+const CopyView = ({ className, ...props }) => {
+    const state = useCopyView(props);
+    const { isProcessing, isProcessingComplete } = state;
+    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className) },
+        React__default.createElement(CopyViewProvider, { ...state },
+            React__default.createElement(ActionExitControl, null),
+            React__default.createElement(TitleControl, null),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                React__default.createElement(DataTableControl, null)),
+            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(FoldersPaginationControl, null)),
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                    React__default.createElement(LoadingIndicatorControl, null),
+                    React__default.createElement(FoldersTableControl, null),
+                    React__default.createElement(FoldersMessageControl, null)))),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__summary` },
+                React__default.createElement(ActionDestinationControl, null),
+                React__default.createElement(StatusDisplayControl, null)),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__default.createElement(MessageControl, null),
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__default.createElement(ActionCancelControl, null),
+                    React__default.createElement(ActionStartControl, null))))));
+};
+CopyView.displayName = 'CopyView';
+CopyView.Provider = CopyViewProvider;
+CopyView.Cancel = ActionCancelControl;
+CopyView.Destination = ActionDestinationControl;
+CopyView.Exit = ActionExitControl;
+CopyView.FoldersLoadingIndicator = LoadingIndicatorControl;
+CopyView.FoldersMessage = FoldersMessageControl;
+CopyView.FoldersPagination = FoldersPaginationControl;
+CopyView.FoldersSearch = SearchControl;
+CopyView.FoldersTable = FoldersTableControl;
+CopyView.Message = MessageControl;
+CopyView.Start = ActionStartControl;
+CopyView.Statuses = StatusDisplayControl;
+CopyView.TasksTable = DataTableControl;
+CopyView.Title = TitleControl;
+
+export { CopyView };

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

@@ -0,0 +1,59 @@
+import React__default from 'react';
+import { ControlsContextProvider } from '../../../controls/context.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import '@aws-amplify/ui';
+import { getActionViewTableData } from '../getActionViewTableData.mjs';
+import { FoldersMessageProvider } from './FoldersMessageControl.mjs';
+import { FoldersPaginationProvider } from './FoldersPaginationControl.mjs';
+import { FoldersTableProvider } from './FoldersTableControl.mjs';
+
+function CopyViewProvider({ children, ...props }) {
+    const { CopyView: displayText } = useDisplayText();
+    const { actionCancelLabel, actionDestinationLabel, actionExitLabel, actionStartLabel, getActionCompleteMessage, overwriteWarningMessage, searchPlaceholder, searchSubmitLabel, searchClearLabel, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, } = displayText;
+    const { destination, folders, isProcessing, isProcessingComplete, location, statusCounts, tasks, onActionCancel, onActionExit, onActionStart, onSelectDestination, onTaskRemove, } = props;
+    const { hasNextPage, highestPageVisited, hasError: hasFoldersError, message: foldersErrorMessage, query, hasExhaustedSearch, isLoading, page, pageItems, onPaginate, onQuery, onSearchClear, onSearch, onSelectFolder, } = folders;
+    const { key: locationKey } = location ?? {};
+    const tableData = getActionViewTableData({
+        tasks,
+        locationKey,
+        isProcessing,
+        displayText,
+        onTaskRemove,
+    });
+    const isActionStartDisabled = isProcessing || isProcessingComplete || !destination?.current;
+    const isActionCancelDisabled = !isProcessing || isProcessingComplete;
+    const message = !isProcessingComplete
+        ? {
+            content: overwriteWarningMessage,
+            type: 'warning',
+        }
+        : getActionCompleteMessage({ counts: statusCounts });
+    return (React__default.createElement(ControlsContextProvider, { data: {
+            actionCancelLabel,
+            actionDestinationLabel,
+            actionExitLabel,
+            actionStartLabel,
+            destination,
+            isActionCancelDisabled,
+            isActionDestinationNavigable: !isProcessing && !isProcessingComplete,
+            isActionExitDisabled: isProcessing,
+            isActionStartDisabled,
+            isLoading,
+            message,
+            searchQuery: query,
+            searchPlaceholder,
+            searchSubmitLabel,
+            searchClearLabel,
+            statusCounts,
+            statusDisplayCanceledLabel,
+            statusDisplayCompletedLabel,
+            statusDisplayFailedLabel,
+            statusDisplayQueuedLabel,
+            tableData,
+        }, onActionCancel: onActionCancel, onActionExit: onActionExit, onActionStart: onActionStart, onSearch: onSearch, onSearchClear: onSearchClear, onSearchQueryChange: onQuery, onSelectDestination: onSelectDestination },
+        React__default.createElement(FoldersPaginationProvider, { hasNextPage: hasNextPage, highestPageVisited: highestPageVisited, page: page, onPaginate: onPaginate },
+            React__default.createElement(FoldersTableProvider, { destination: destination, folders: pageItems, onSelectFolder: onSelectFolder },
+                React__default.createElement(FoldersMessageProvider, { folders: folders.pageItems, hasError: hasFoldersError, message: foldersErrorMessage, query: query, hasExhaustedSearch: hasExhaustedSearch }, children)))));
+}
+
+export { CopyViewProvider };

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { ControlsContextProvider } from '../../../controls/context.mjs';
+import { MessageControl } from '../../../controls/MessageControl.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import '@aws-amplify/ui';
+
+const defaultValue = {};
+const { useFoldersMessage, FoldersMessageProvider } = createContextUtilities({ contextName: 'FoldersMessage', defaultValue });
+const FoldersMessageControl = () => {
+    const { CopyView: { getListFoldersResultsMessage }, } = useDisplayText();
+    const { hasError, folders, message, query, hasExhaustedSearch } = useFoldersMessage();
+    const messageContent = getListFoldersResultsMessage({
+        hasError,
+        folders,
+        message,
+        query,
+        hasExhaustedSearch,
+    });
+    return (React__default.createElement(ControlsContextProvider, { data: { message: messageContent } },
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+            React__default.createElement(MessageControl, null))));
+};
+FoldersMessageControl.displayName = 'FoldersMessage';
+
+export { FoldersMessageControl, FoldersMessageProvider, useFoldersMessage };

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

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { Pagination } from '../../../composables/Pagination.mjs';
+import { useResolvedComposable } from '../../../controls/hooks/useResolvedComposable.mjs';
+
+const defaultValue = {};
+const { FoldersPaginationProvider, useFoldersPagination } = createContextUtilities({ contextName: 'FoldersPagination', defaultValue });
+const FoldersPaginationControl = () => {
+    const props = useFoldersPagination();
+    const Resolved = useResolvedComposable(Pagination, 'Pagination');
+    return React__default.createElement(Resolved, { ...props });
+};
+FoldersPaginationControl.displayName = 'FoldersPagination';
+
+export { FoldersPaginationControl, FoldersPaginationProvider, useFoldersPagination };

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

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { ControlsContextProvider } from '../../../controls/context.mjs';
+import { DataTableControl } from '../../../controls/DataTableControl.mjs';
+import { getDestinationPickerTableData } from './getDestinationPickerTableData.mjs';
+
+const defaultValue = {};
+const { useFoldersTable, FoldersTableProvider } = createContextUtilities({ contextName: 'FoldersTable', defaultValue });
+const FoldersTableControl = () => {
+    const { destination, folders, onSelectFolder } = useFoldersTable();
+    const { current, path = '' } = destination ?? {};
+    const tableData = getDestinationPickerTableData({
+        prefix: current?.prefix ?? '',
+        path,
+        folders,
+        onSelectFolder,
+    });
+    return (React__default.createElement(ControlsContextProvider, { data: { tableData } },
+        React__default.createElement(DataTableControl, null)));
+};
+FoldersTableControl.displayName = 'FoldersTable';
+
+export { FoldersTableControl, FoldersTableProvider, useFoldersTable };

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

@@ -0,0 +1,35 @@
+const DESTINATION_PICKER_COLUMNS = [
+    { key: 'name', type: 'sort', content: { label: 'Folder name' } },
+];
+const getDestinationPickerTableData = ({ prefix, path, folders, onSelectFolder, }) => {
+    const rows = !folders
+        ? []
+        : folders.map(({ id, key }) => {
+            const folderSubPath = key.slice(`${prefix ?? ''}${path}`.length);
+            const folderLocationPath = key.slice(prefix.length);
+            const row = {
+                key: id,
+                content: [
+                    {
+                        key: `${DESTINATION_PICKER_COLUMNS[0].key}-${id}`,
+                        type: 'button',
+                        content: {
+                            icon: 'folder',
+                            ariaLabel: folderSubPath,
+                            label: folderSubPath,
+                            onClick: () => {
+                                onSelectFolder?.(id, folderLocationPath);
+                            },
+                        },
+                    },
+                ],
+            };
+            return row;
+        });
+    return {
+        headers: DESTINATION_PICKER_COLUMNS,
+        rows,
+    };
+};
+
+export { getDestinationPickerTableData };