@aws-amplify/ui-react-storage 3.15.0 → 3.17.0

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

@@ -99,16 +99,19 @@ function useProcessTasks(handler, options) {
         const getTask = () => tasksRef.current.get(data.id);
         const { options } = _input;
         const { onProgress: _onProgress } = options ?? {};
-        const onProgress = ({ id }, progress, status = 'PENDING') => {
+        const onProgress = ({ id }, progressDetails, status = 'PENDING') => {
+            const isNumber = typeof progressDetails === 'number';
             const task = updateTask(id, {
-                progress,
+                progress: isNumber ? progressDetails : progressDetails.progress,
+                failureCount: isNumber ? undefined : progressDetails.failureCount,
+                successCount: isNumber ? undefined : progressDetails.successCount,
                 status,
             });
             if (task && isFunction(onTaskProgress)) {
-                onTaskProgress(task, progress);
+                onTaskProgress(task, progressDetails);
             }
             if (task && isFunction(_onProgress)) {
-                _onProgress(data, progress, status);
+                _onProgress(data, progressDetails, status);
             }
         };
         const input = { ..._input, data, all, options: { ...options, onProgress } };

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

@@ -3,6 +3,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import { useGetActionInput } from '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import { DEFAULT_ACTION_CONCURRENCY } from './constants.mjs';
 import { useProcessTasks } from '../tasks/useProcessTasks.mjs';
 

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

@@ -7,6 +7,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import { useGetActionInput } from '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 
 const useListFolderItems = () => {
     const { handlers } = useActionHandlers({

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

@@ -4,6 +4,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import { useGetActionInput } from '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import { USE_LIST_ERROR_MESSAGE } from './constants.mjs';
 import { useActionHandlers } from './context.mjs';
 import { createEnhancedListHandler } from './createEnhancedListHandler.mjs';

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

@@ -1,9 +1,4 @@
 import { isFunction } from '@aws-amplify/ui';
-import '@aws-amplify/storage/internals';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../actions/configs/context.mjs';
 import { isDefaultActionViewType } from '../actions/configs/defaults.mjs';
 
 const resolveHandler = (value) => (isFunction(value) ? value : value.handler);

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

@@ -0,0 +1,12 @@
+const DEFAULT_PAGE_SIZE = 100;
+const validatePageSize = (pageSize) => {
+    if (pageSize === undefined ||
+        pageSize === null ||
+        !Number.isInteger(pageSize) ||
+        pageSize < 1) {
+        return DEFAULT_PAGE_SIZE;
+    }
+    return pageSize;
+};
+
+export { validatePageSize };

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

@@ -11,10 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -11,16 +11,17 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';
 import useResolveTableData from '../../hooks/useResolveTableData/useResolveTableData.mjs';
 import { COPY_TABLE_RESOLVERS } from '../../utils/tableResolvers/copyResolvers.mjs';
 import { FILE_DATA_ITEM_TABLE_KEYS } from '../../utils/tableResolvers/constants.mjs';
+import 'aws-amplify';
+import 'jszip';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
 import { FoldersMessageProvider } from './FoldersMessageControl.mjs';
 import { FoldersPaginationProvider } from './FoldersPaginationControl.mjs';
 import { FoldersTableProvider } from './FoldersTableControl.mjs';

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

@@ -13,10 +13,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -9,10 +9,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useFolders } from './useFolders.mjs';
 

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

@@ -4,12 +4,9 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '@aws-amplify/ui';
 import { useList } from '../../../useAction/useList.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { usePaginate } from '../../hooks/usePaginate.mjs';
 import { useSearch } from '../../hooks/useSearch.mjs';

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

@@ -11,10 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -7,10 +7,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useStore } from '../../../store/context.mjs';
 

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

@@ -1,15 +1,16 @@
 import React__default from 'react';
+import { classNames } from '@aws-amplify/ui';
 import '@aws-amplify/ui-react';
 import { ViewElement } from '../../../components/elements/definitions.mjs';
 import '../../../components/elements/IconElement.mjs';
 import { ActionCancelControl } from '../../../controls/ActionCancelControl.mjs';
+import { ActionConfirmationModalControl } from '../../../controls/ActionConfirmationModalControl.mjs';
 import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';
 import { ActionStartControl } from '../../../controls/ActionStartControl.mjs';
 import { DataTableControl } from '../../../controls/DataTableControl.mjs';
 import { MessageControl } from '../../../controls/MessageControl.mjs';
 import { StatusDisplayControl } from '../../../controls/StatusDisplayControl.mjs';
 import { TitleControl } from '../../../controls/TitleControl.mjs';
-import { classNames } from '@aws-amplify/ui';
 import { STORAGE_BROWSER_BLOCK } from '../../../components/base/constants.mjs';
 import '../../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
@@ -18,10 +19,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';
@@ -43,11 +41,13 @@ const DeleteView = ({ className, ...props }) => {
                     React__default.createElement(MessageControl, null)),
                 React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
                     React__default.createElement(ActionCancelControl, null),
-                    React__default.createElement(ActionStartControl, null))))));
+                    React__default.createElement(ActionStartControl, null))),
+            React__default.createElement(ActionConfirmationModalControl, null))));
 };
 DeleteView.displayName = 'DeleteView';
 DeleteView.Provider = DeleteViewProvider;
 DeleteView.Cancel = ActionCancelControl;
+DeleteView.ConfirmationModal = ActionConfirmationModalControl;
 DeleteView.Exit = ActionExitControl;
 DeleteView.Message = MessageControl;
 DeleteView.Start = ActionStartControl;

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

@@ -3,18 +3,18 @@ import { ControlsContextProvider } from '../../../controls/context.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import useResolveTableData from '../../hooks/useResolveTableData/useResolveTableData.mjs';
 import '@aws-amplify/ui';
-import { FILE_DATA_ITEM_TABLE_KEYS } from '../../utils/tableResolvers/constants.mjs';
+import { DELETE_TABLE_KEYS } from '../../utils/tableResolvers/constants.mjs';
 import { DELETE_TABLE_RESOLVERS } from '../../utils/tableResolvers/deleteResolvers.mjs';
 
 function DeleteViewProvider({ children, ...props }) {
     const { DeleteView: displayText } = useDisplayText();
     const { actionCancelLabel, actionExitLabel, actionStartLabel, title, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, getActionCompleteMessage, } = displayText;
-    const { isProcessing, isProcessingComplete, statusCounts, tasks: items, onActionCancel, onActionStart, onActionExit, onTaskRemove, } = props;
+    const { isProcessing, isProcessingComplete, statusCounts, tasks, confirmationModal, onActionCancel, onActionStart, onActionExit, onTaskRemove, onConfirmDelete, onCancelConfirmation, } = props;
     const message = isProcessingComplete
-        ? getActionCompleteMessage({ counts: statusCounts })
+        ? getActionCompleteMessage({ counts: statusCounts, tasks })
         : undefined;
-    const tableData = useResolveTableData(FILE_DATA_ITEM_TABLE_KEYS, DELETE_TABLE_RESOLVERS, {
-        items,
+    const tableData = useResolveTableData(DELETE_TABLE_KEYS, DELETE_TABLE_RESOLVERS, {
+        items: tasks,
         props: { displayText, isProcessing, onTaskRemove },
     });
     return (React__default.createElement(ControlsContextProvider, { data: {
@@ -32,7 +32,8 @@ function DeleteViewProvider({ children, ...props }) {
             tableData,
             title,
             message,
-        }, onActionStart: onActionStart, onActionExit: onActionExit, onActionCancel: onActionCancel }, children));
+            confirmationModal,
+        }, onActionStart: onActionStart, onActionExit: onActionExit, onActionCancel: onActionCancel, onConfirmationModalConfirm: onConfirmDelete, onConfirmationModalCancel: onCancelConfirmation }, children));
 }
 
 export { DeleteViewProvider };

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

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { isFunction } from '@aws-amplify/ui';
 import { useLocationItems } from '../../../locationItems/context.mjs';
+import { getSelectionSummary } from '../../../locationItems/utils.mjs';
 import { useStore } from '../../../store/context.mjs';
 import '../../../useAction/context.mjs';
 import { useAction } from '../../../useAction/useAction.mjs';
@@ -8,28 +9,82 @@ import '@aws-amplify/ui-react-core';
 import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
-import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import { useGetActionInput } from '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import { createDeleteConfirmationModalProps, countFilesInFolder } from './utils.mjs';
 
 // assign to constant to ensure referential equality
 const EMPTY_ITEMS = [];
 const useDeleteView = (options) => {
     const { onExit: _onExit } = options ?? {};
+    const { DeleteView: displayText } = useDisplayText();
     const [{ location }, storeDispatch] = useStore();
     const [locationItems, locationItemsDispatch] = useLocationItems();
     const { current } = location;
-    const { fileDataItems: items = EMPTY_ITEMS } = locationItems;
-    const [processState, handleProcess] = useAction('delete', { items });
+    const { dataItems = EMPTY_ITEMS } = locationItems;
+    const getConfig = useGetActionInput();
+    const [itemsWithCount, setItemsWithCount] = React__default.useState(dataItems);
+    const folderCountsRef = React__default.useRef(new Map());
+    // Sync itemsWithCount with dataItems when dataItems changes (e.g., item removal)
+    React__default.useEffect(() => {
+        const itemsWithAppliedCounts = dataItems.map((item) => ({
+            ...item,
+            totalCount: folderCountsRef.current.get(item.id),
+        }));
+        setItemsWithCount(itemsWithAppliedCounts);
+    }, [dataItems]);
+    const [processState, handleProcess] = useAction('delete', {
+        items: itemsWithCount,
+    });
+    const [showConfirmation, setShowConfirmation] = React__default.useState(false);
     const { isProcessing, isProcessingComplete, statusCounts, tasks } = processState;
+    const selectionSummary = getSelectionSummary(dataItems);
+    const { hasFolders } = selectionSummary;
+    React__default.useEffect(() => {
+        const initializeFolderCounts = async () => {
+            if (!selectionSummary.hasFolders || !current) {
+                return;
+            }
+            const config = getConfig(current);
+            const foldersToCount = dataItems.filter((item) => item.type === 'FOLDER' && !folderCountsRef.current.has(item.id));
+            if (foldersToCount.length === 0) {
+                return;
+            }
+            await Promise.all(foldersToCount.map(async (folder) => {
+                try {
+                    const totalCount = await countFilesInFolder(folder.key, config);
+                    folderCountsRef.current.set(folder.id, totalCount);
+                }
+                catch (error) {
+                    folderCountsRef.current.set(folder.id, null);
+                }
+            }));
+            setItemsWithCount((currentItems) => currentItems.map((item) => ({
+                ...item,
+                totalCount: folderCountsRef.current.get(item.id),
+            })));
+        };
+        initializeFolderCounts();
+    }, [current, getConfig, selectionSummary.hasFolders, dataItems]);
     const onActionStart = () => {
         if (!current)
             return;
+        if (hasFolders) {
+            setShowConfirmation(true);
+        }
+        else {
+            handleProcess();
+        }
+    };
+    const onConfirmDelete = () => {
+        setShowConfirmation(false);
         handleProcess();
     };
+    const onCancelConfirmation = () => {
+        setShowConfirmation(false);
+    };
     const onActionCancel = () => {
         tasks.forEach((task) => {
             // @TODO Fixme, calling cancel on task doesn't currently work
@@ -48,6 +103,11 @@ const useDeleteView = (options) => {
     const onTaskRemove = React__default.useCallback(({ data }) => {
         locationItemsDispatch({ type: 'REMOVE_LOCATION_ITEM', id: data.id });
     }, [locationItemsDispatch]);
+    const confirmationModal = React__default.useMemo(() => createDeleteConfirmationModalProps({
+        items: dataItems,
+        showConfirmation,
+        displayText,
+    }), [dataItems, showConfirmation, displayText]);
     return {
         isProcessing,
         isProcessingComplete,
@@ -58,6 +118,9 @@ const useDeleteView = (options) => {
         onActionExit,
         onActionStart,
         onTaskRemove,
+        onConfirmDelete,
+        onCancelConfirmation,
+        confirmationModal,
     };
 };
 

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

@@ -0,0 +1,87 @@
+import React__default from 'react';
+import { getSelectedFolders } from '../../../locationItems/utils.mjs';
+import '@aws-amplify/ui-react';
+import { TextElement, UnorderedListElement, ListItemElement } from '../../../components/elements/definitions.mjs';
+import '../../../components/elements/IconElement.mjs';
+import { list } from '@aws-amplify/storage/internals';
+import { constructBucket } from '../../../actions/handlers/utils.mjs';
+import '@aws-amplify/ui';
+import 'jszip';
+import 'aws-amplify/storage';
+
+const getFolderName = (folderKey) => {
+    return folderKey.replace(/\/$/, '').split('/').pop() ?? folderKey;
+};
+/**
+ * Creates JSX content showing a list of folders to be deleted
+ */
+const createFolderListContent = (folders, folderListTitle) => {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(TextElement, { className: "amplify-modal__list-title" },
+            React__default.createElement("strong", null, folderListTitle)),
+        React__default.createElement(UnorderedListElement, { className: "amplify-modal__list" }, folders.map((folder) => (React__default.createElement(ListItemElement, { key: folder.id, className: "amplify-modal__list-item" }, getFolderName(folder.key)))))));
+};
+const createDeleteConfirmationModalProps = ({ items, showConfirmation, displayText, }) => {
+    const folders = getSelectedFolders(items);
+    const folderCount = folders.length;
+    return {
+        isOpen: showConfirmation,
+        title: displayText.confirmationModalTitle,
+        message: displayText.confirmationModalMessage
+            .replace('{count}', folderCount.toString())
+            .replace('{plural}', folderCount !== 1 ? 's' : ''),
+        confirmLabel: displayText.confirmationModalConfirmLabel,
+        cancelLabel: displayText.confirmationModalCancelLabel,
+        content: createFolderListContent(folders, displayText.confirmationModalFolderListTitle),
+    };
+};
+/**
+ * Maximum number of files to count before showing "+" notation
+ * This prevents expensive operations on very large folders
+ */
+const MAX_FILE_COUNT_LIMIT = 5000;
+const LIST_PAGE_SIZE = 1000;
+/**
+ * Count the total number of files in a folder with pagination and limits
+ * @param folderKey - The folder path to count files in
+ * @param config - Storage configuration
+ * @returns Promise<number | string> - File count or "5000+" if exceeds limit
+ */
+const countFilesInFolder = async (folderKey, config) => {
+    try {
+        const { accountId, credentials, customEndpoint } = config;
+        const bucket = constructBucket(config);
+        let fileCount = 0;
+        let nextToken;
+        let hasMoreItems = true;
+        while (hasMoreItems && fileCount < MAX_FILE_COUNT_LIMIT) {
+            const { items, nextToken: listNextToken } = await list({
+                path: folderKey,
+                options: {
+                    bucket,
+                    locationCredentialsProvider: credentials,
+                    expectedBucketOwner: accountId,
+                    customEndpoint,
+                    pageSize: LIST_PAGE_SIZE,
+                    nextToken,
+                },
+            });
+            const batchFileCount = items.filter((item) => !item.path.endsWith('/')).length;
+            fileCount += batchFileCount;
+            nextToken = listNextToken;
+            hasMoreItems = !!nextToken;
+            if (fileCount >= MAX_FILE_COUNT_LIMIT) {
+                return `${MAX_FILE_COUNT_LIMIT}+`;
+            }
+        }
+        if (hasMoreItems) {
+            return `${fileCount}+`;
+        }
+        return fileCount;
+    }
+    catch (error) {
+        return 0;
+    }
+};
+
+export { countFilesInFolder, createDeleteConfirmationModalProps, createFolderListContent, getFolderName };

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

@@ -18,10 +18,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

package/dist/esm/components/StorageBrowser/views/LocationActionView/DownloadView/DownloadViewProvider.mjs

@@ -3,6 +3,15 @@ import { ControlsContextProvider } from '../../../controls/context.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import useResolveTableData from '../../hooks/useResolveTableData/useResolveTableData.mjs';
 import '@aws-amplify/ui';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify';
+import 'jszip';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
+import '@aws-amplify/ui-react';
+import '../../../components/elements/definitions.mjs';
+import '../../../components/elements/IconElement.mjs';
 import { DOWNLOAD_TABLE_RESOLVERS, DOWNLOAD_TABLE_KEYS } from '../../utils/tableResolvers/downloadResolvers.mjs';
 
 function DownloadViewProvider({ children, ...props }) {

package/dist/esm/components/StorageBrowser/views/LocationActionView/DownloadView/useDownloadView.mjs

@@ -9,10 +9,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 
 // assign to constant to ensure referential equality

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

@@ -11,17 +11,14 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';
 import { ActionCancelControl } from '../../../controls/ActionCancelControl.mjs';
+import '../../../controls/context.mjs';
 import { ActionDestinationControl } from '../../../controls/ActionDestinationControl.mjs';
 import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';
-import '../../../controls/context.mjs';
 import { ActionStartControl } from '../../../controls/ActionStartControl.mjs';
 import { AddFilesControl } from '../../../controls/AddFilesControl.mjs';
 import { AddFolderControl } from '../../../controls/AddFolderControl.mjs';
@@ -37,7 +34,7 @@ import { useUploadView } from './useUploadView.mjs';
 
 const UploadView = ({ className, ...props }) => {
     const state = useUploadView(props);
-    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className) },
+    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className), "data-testid": "UPLOAD_VIEW" },
         React__default.createElement(UploadViewProvider, { ...state },
             React__default.createElement(ActionExitControl, null),
             React__default.createElement(TitleControl, null),

package/dist/esm/components/StorageBrowser/views/LocationActionView/UploadView/UploadViewProvider.mjs

@@ -9,6 +9,9 @@ import '../../../actions/configs/defaults.mjs';
 import { ControlsContextProvider } from '../../../controls/context.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import useResolveTableData from '../../hooks/useResolveTableData/useResolveTableData.mjs';
+import '@aws-amplify/ui-react';
+import '../../../components/elements/definitions.mjs';
+import '../../../components/elements/IconElement.mjs';
 import { UPLOAD_TABLE_RESOLVERS, UPLOAD_TABLE_KEYS } from '../../utils/tableResolvers/uploadResolvers.mjs';
 
 function UploadViewProvider({ children, ...props }) {

package/dist/esm/components/StorageBrowser/views/LocationActionView/UploadView/useUploadView.mjs

@@ -1,25 +1,23 @@
 import React__default from 'react';
+import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import { usePaginationConfig } from '../../../configuration/paginationContext.mjs';
 import { useFileItems } from '../../../fileItems/context.mjs';
 import '@aws-amplify/ui';
 import { useStore } from '../../../store/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 '../../../credentials/context.mjs';
-import '@aws-amplify/storage/internals';
-import '../../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../../actions/configs/context.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { DEFAULT_OVERWRITE_ENABLED } from './constants.mjs';
 import { usePaginate } from '../../hooks/usePaginate.mjs';
 
-const DEFAULT_PAGE_SIZE = 100;
 const useUploadView = (options) => {
-    const { onExit: _onExit } = options ?? {};
+    const { pageSize: configPageSize } = usePaginationConfig();
+    const { onExit: _onExit, pageSize: propPageSize } = options ?? {};
+    const pageSize = propPageSize ?? configPageSize;
     const [{ location }, storeDispatch] = useStore();
     const [{ validItems, invalidItems: invalidFiles }, fileItemsDispatch] = useFileItems();
     const { current } = location;
@@ -32,6 +30,7 @@ const useUploadView = (options) => {
     const [{ isProcessing, isProcessingComplete, statusCounts, tasks }, handleUploads,] = useAction('upload', { items });
     const { currentPage, handlePaginate, pageItems: pageTasks, } = usePaginate({
         items: tasks,
+        pageSize,
     });
     const onDropFiles = (files) => {
         if (files) {
@@ -69,8 +68,8 @@ const useUploadView = (options) => {
         statusCounts,
         tasks: pageTasks,
         page: currentPage,
-        hasNextPage: currentPage * DEFAULT_PAGE_SIZE < items.length,
-        highestPageVisited: Math.ceil(items.length / DEFAULT_PAGE_SIZE),
+        hasNextPage: currentPage * pageSize < items.length,
+        highestPageVisited: Math.ceil(items.length / pageSize),
         onActionCancel,
         onActionExit,
         onActionStart,

package/dist/esm/components/StorageBrowser/views/LocationDetailView/LocationDetailView.mjs

@@ -11,10 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../configuration/context.mjs';
-import 'aws-amplify';
-import 'jszip';
-import 'aws-amplify/storage';
-import '../../actions/configs/context.mjs';
+import '../../configuration/paginationContext.mjs';
 import '../../actions/configs/defaults.mjs';
 import '../../displayText/context.mjs';
 import '../../filePreview/context.mjs';

package/dist/esm/components/StorageBrowser/views/LocationDetailView/LocationDetailViewProvider.mjs

@@ -6,7 +6,7 @@ import { getLocationDetailViewTableData } from './getLocationDetailViewTableData
 function LocationDetailViewProvider({ children, ...props }) {
     const { LocationDetailView: displayText } = useDisplayText();
     const { LocationDetailView: { loadingIndicatorLabel, searchSubfoldersToggleLabel, selectFileLabel, selectAllFilesLabel, searchPlaceholder, searchSubmitLabel, searchClearLabel, getActionListItemLabel, getDateDisplayValue, getTitle, getListItemsResultMessage, }, } = useDisplayText();
-    const { actionItems, activeFile, activeFileHasNext, activeFileHasPrev, page, pageItems, hasNextPage, highestPageVisited, isLoading, isSearchSubfoldersEnabled, location, fileDataItems, hasError, hasDownloadError, message, downloadErrorMessage, searchQuery, hasExhaustedSearch, onActionSelect, onDropFiles, onRefresh, onPaginate, onDownload, onNavigate, onNavigateHome, onSelect, onSelectActiveFile, onToggleSelectAll, onSearch, onSearchQueryChange, onSearchClear, onToggleSearchSubfolders, filePreviewState, filePreviewEnabled, onRetryFilePreview, } = props;
+    const { actionItems, activeFile, activeFileHasNext, activeFileHasPrev, page, pageItems, hasNextPage, highestPageVisited, isLoading, isSearchSubfoldersEnabled, location, fileDataItems, hasError, hasDownloadError, message, downloadErrorMessage, searchQuery, hasExhaustedSearch, onActionSelect, onDropFiles, onRefresh, onPaginate, onDownload, onNavigate, onNavigateHome, onSelect, onSelectActiveFile, onToggleSelectAll, onSearch, onSearchQueryChange, onSearchClear, onToggleSearchSubfolders, filePreviewState, filePreviewEnabled, onRetryFilePreview, dataItems, } = props;
     const actionsWithDisplayText = actionItems.map((item) => ({
         ...item,
         label: getActionListItemLabel(item.label),
@@ -63,6 +63,7 @@ function LocationDetailViewProvider({ children, ...props }) {
                 onNavigate,
                 onSelect,
                 onSelectAll: onToggleSelectAll,
+                dataItems,
             }),
             title: getTitle(location),
             message: messageControlContent,