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

package/dist/{createStorageBrowser-CG-6mXiT.js → createStorageBrowser-B-J76Lyp.js}

@@ -36,7 +36,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var JSZip__default = /*#__PURE__*/_interopDefault(JSZip);
 
-const VERSION = '3.15.0';
+const VERSION = '3.16.0';
 
 const DEFAULT_CHECKSUM_ALGORITHM = 'crc-32';
 // 5MiB for multipart upload
@@ -422,27 +422,58 @@ const createFolderHandler = (input) => {
     };
 };
 
-const deleteHandler = ({ config, data, }) => {
+const deleteHandler = ({ config, data, options, }) => {
     const { key } = data;
     const { accountId, credentials, customEndpoint } = config;
-    const result = internals.remove({
+    const { onProgress } = options ?? {};
+    let cumulativeSuccessCount = 0;
+    let cumulativeFailureCount = 0;
+    let operationCancel = () => {
+        // noop
+    };
+    const cancel = () => {
+        operationCancel?.();
+    };
+    const operation = internals.remove({
         path: key,
         options: {
             bucket: constructBucket$1(config),
             locationCredentialsProvider: credentials,
             expectedBucketOwner: accountId,
             customEndpoint,
+            onProgress: (progress) => {
+                if (!progress) {
+                    return;
+                }
+                const batchSuccessCount = progress?.deleted?.length ?? 0;
+                const batchFailureCount = progress?.failed?.length ?? 0;
+                cumulativeSuccessCount += batchSuccessCount;
+                cumulativeFailureCount += batchFailureCount;
+                onProgress?.(data, {
+                    successCount: cumulativeSuccessCount,
+                    failureCount: cumulativeFailureCount,
+                });
+            },
         },
+    });
+    operationCancel = operation?.cancel ? operation?.cancel : () => { };
+    const operationPromise = operation?.result ?? operation;
+    const result = operationPromise
+        ?.then?.(({ path }) => {
+        return {
+            status: 'COMPLETE',
+            value: {
+                key: path,
+                successCount: cumulativeSuccessCount,
+                failureCount: cumulativeFailureCount,
+            },
+        };
     })
-        .then(({ path }) => ({
-        status: 'COMPLETE',
-        value: { key: path },
-    }))
-        .catch((error) => {
+        ?.catch?.((error) => {
         const { message } = error;
         return { error, message, status: 'FAILED' };
     });
-    return { result };
+    return { result, cancel };
 };
 
 const zipProgressManager = ({ dataMap, onZipProgress, }) => {
@@ -792,10 +823,50 @@ const defaultValue$7 = {
 };
 const { useActionConfigs, ActionConfigsProvider } = uiReactCore.createContextUtilities({ contextName: 'ActionConfigs', defaultValue: defaultValue$7 });
 
+/**
+ * Selection utility functions for LocationItems
+ */
+/**
+ * Get selected files from dataItems
+ */
+const getSelectedFiles = (dataItems) => {
+    return dataItems?.filter((item) => item.type === 'FILE') ?? [];
+};
+/**
+ * Get selected folders from dataItems
+ */
+const getSelectedFolders = (dataItems) => {
+    return dataItems?.filter((item) => item.type === 'FOLDER') ?? [];
+};
+/**
+ * Check if selection contains folders
+ */
+const hasSelectedFolders = (dataItems) => {
+    return dataItems?.some((item) => item.type === 'FOLDER') ?? false;
+};
+/**
+ * Get selection summary
+ */
+const getSelectionSummary = (dataItems) => {
+    const files = getSelectedFiles(dataItems);
+    const folders = getSelectedFolders(dataItems);
+    return {
+        total: dataItems?.length ?? 0,
+        files: files.length,
+        folders: folders.length,
+        hasFiles: files.length > 0,
+        hasFolders: folders.length > 0,
+        isMixed: files.length > 0 && folders.length > 0,
+    };
+};
+
 const copyActionConfig = {
     viewName: 'CopyView',
     actionListItem: {
-        disable: (selected) => !selected || selected.length === 0,
+        disable: (selected) => {
+            const hasNoSelection = !selected || selected.length === 0;
+            return hasNoSelection || hasSelectedFolders(selected);
+        },
         hide: (permissions) => !permissions.includes('write'),
         icon: 'copy-file',
         label: 'Copy',
@@ -805,7 +876,10 @@ const copyActionConfig = {
 const deleteActionConfig = {
     viewName: 'DeleteView',
     actionListItem: {
-        disable: (selected) => !selected || selected.length === 0,
+        disable: (selected) => {
+            const hasNoSelection = !selected || selected.length === 0;
+            return hasNoSelection;
+        },
         hide: (permissions) => !permissions.includes('delete'),
         icon: 'delete-file',
         label: 'Delete',
@@ -833,7 +907,10 @@ const uploadActionConfig = {
 const downloadActionConfig = {
     viewName: 'DownloadView',
     actionListItem: {
-        disable: (selected) => !selected || selected.length === 0,
+        disable: (selected) => {
+            const hasNoSelection = !selected || selected.length === 0;
+            return hasNoSelection || hasSelectedFolders(selected);
+        },
         hide: (permissions) => !permissions.includes('get'),
         icon: 'download',
         label: 'Download',
@@ -1038,7 +1115,7 @@ const OrderedListElement = elements.defineBaseElement({
     type: 'ol',
     displayName: 'OrderedList',
 });
-elements.defineBaseElement({
+const UnorderedListElement = elements.defineBaseElement({
     type: 'ul',
     displayName: 'UnorderedList',
 });
@@ -1178,6 +1255,34 @@ const { useComposables, ComposablesProvider } = uiReactCore.createContextUtiliti
 
 const ActionCancel = ({ onCancel, isDisabled, label, }) => (React__namespace["default"].createElement(ButtonElement, { variant: "cancel", className: `${STORAGE_BROWSER_BLOCK}__cancel`, onClick: onCancel, disabled: isDisabled }, label));
 
+const ActionConfirmationModal = ({ isOpen = false, title, message, content, onConfirm, onCancel, confirmLabel, cancelLabel, }) => {
+    const modalRef = React__namespace["default"].useRef(null);
+    React__namespace["default"].useEffect(() => {
+        if (isOpen && modalRef.current) {
+            modalRef.current.focus();
+        }
+    }, [isOpen]);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            onCancel?.();
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (React__namespace["default"].createElement("div", { ref: modalRef, className: "amplify-modal__overlay", role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown: handleKeyDown, onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onCancel?.();
+            }
+        } },
+        React__namespace["default"].createElement(ViewElement, { className: "amplify-modal__content", role: "document" },
+            React__namespace["default"].createElement(HeadingElement, { className: "amplify-modal__title" }, title),
+            message && (React__namespace["default"].createElement(TextElement, { className: "amplify-modal__body" }, message)),
+            content && (React__namespace["default"].createElement(ViewElement, { className: "amplify-modal__body" }, content)),
+            React__namespace["default"].createElement(ViewElement, { className: "amplify-modal__footer" },
+                React__namespace["default"].createElement(ButtonElement, { className: "amplify-modal__cancel", onClick: onCancel, variant: "cancel" }, cancelLabel),
+                React__namespace["default"].createElement(ButtonElement, { className: "amplify-modal__confirm", onClick: onConfirm, variant: "primary" }, confirmLabel)))));
+};
+
 const ActionDestination$1 = ({ isNavigable, items, label, }) => {
     if (!items.length) {
         return null;
@@ -1804,7 +1909,7 @@ const DEPRECATED_PROP_KEYS = ['actionType', 'location', 'path'];
 const template = (key, index, values) => `\`${key}\`${index < values.length - 1 ? ', ' : ''}`;
 const getMissingLocationKeys = (location) => location === null
     ? []
-    : REQUIRED_LOCATION_KEYS.filter((key) => !location[key]);
+    : REQUIRED_LOCATION_KEYS.filter((key) => location[key] === undefined || location[key] === null);
 let didWarnConflictingBehavior = false;
 let didWarnDeprecatedAndConflictingProps = false;
 let didWarnDeprecatedProps = false;
@@ -2065,16 +2170,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 && ui.isFunction(onTaskProgress)) {
-                onTaskProgress(task, progress);
+                onTaskProgress(task, progressDetails);
             }
             if (task && ui.isFunction(_onProgress)) {
-                _onProgress(data, progress, status);
+                _onProgress(data, progressDetails, status);
             }
         };
         const input = { ..._input, data, all, options: { ...options, onProgress } };
@@ -2284,6 +2392,7 @@ const DEFAULT_ACTION_VIEW_DISPLAY_TEXT = {
     tableColumnNameHeader: 'Name',
     tableColumnTypeHeader: 'Type',
     tableColumnSizeHeader: 'Size',
+    tableColumnProgressHeader: 'Progress',
 };
 const DEFAULT_LIST_VIEW_DISPLAY_TEXT = {
     loadingIndicatorLabel: 'Loading',
@@ -2376,21 +2485,133 @@ const DEFAULT_COPY_VIEW_DISPLAY_TEXT = {
     searchClearLabel: 'Clear search',
 };
 
+const pluralize = (count, word) => count === 1 ? word : `${word}s`;
+const formatCount = (count, word) => `${count === 1 ? '' : 'All '}${count} ${pluralize(count, word)}`;
 const DEFAULT_DELETE_VIEW_DISPLAY_TEXT = {
     ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
     title: 'Delete',
     actionStartLabel: 'Delete',
+    confirmationModalTitle: 'Confirm Deletion',
+    confirmationModalConfirmLabel: 'Delete',
+    confirmationModalCancelLabel: 'Cancel',
+    confirmationModalMessage: 'The items that will be deleted contain {count} folder{plural}',
+    confirmationModalFolderListTitle: 'Folder list:',
     getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
+        const { counts, tasks } = data ?? {};
+        const { COMPLETE = 0, FAILED = 0, TOTAL = 0 } = counts ?? {};
+        if (!TOTAL || TOTAL === 0) {
+            return { content: 'No items to delete.', type: 'info' };
+        }
+        if (tasks && tasks.length > 0) {
+            const folderTasks = tasks.filter((task) => task.data.type === 'FOLDER');
+            const fileTasks = tasks.filter((task) => task.data.type === 'FILE');
+            const completeFolders = folderTasks.filter((task) => task.status === 'COMPLETE').length;
+            const failedFolders = folderTasks.filter((task) => task.status === 'FAILED').length;
+            const completeFiles = fileTasks.filter((task) => task.status === 'COMPLETE').length;
+            const failedFiles = fileTasks.filter((task) => task.status === 'FAILED').length;
+            const hasFolders = folderTasks.length > 0;
+            const hasFiles = fileTasks.length > 0;
+            const isMixed = hasFolders && hasFiles;
+            // All successful
+            if (COMPLETE === TOTAL) {
+                if (isMixed) {
+                    return {
+                        content: `${formatCount(completeFolders, 'folder')} and ${completeFiles} ${pluralize(completeFiles, 'file')} deleted successfully.`,
+                        type: 'success',
+                    };
+                }
+                else if (hasFolders) {
+                    return {
+                        content: `${formatCount(completeFolders, 'folder')} deleted successfully.`,
+                        type: 'success',
+                    };
+                }
+                else {
+                    return {
+                        content: `${formatCount(completeFiles, 'file')} deleted successfully.`,
+                        type: 'success',
+                    };
+                }
+            }
+            // Complete failure
+            if (FAILED === TOTAL) {
+                if (isMixed) {
+                    return {
+                        content: `Failed to delete ${failedFolders} ${pluralize(failedFolders, 'folder')} and ${failedFiles} ${pluralize(failedFiles, 'file')}. Some contents may have been deleted.`,
+                        type: 'error',
+                    };
+                }
+                else if (hasFolders) {
+                    return {
+                        content: `Failed to delete ${failedFolders} ${pluralize(failedFolders, 'folder')}. Some items may have been deleted.`,
+                        type: 'error',
+                    };
+                }
+                else {
+                    return {
+                        content: `Failed to delete ${failedFiles} ${pluralize(failedFiles, 'file')}.`,
+                        type: 'error',
+                    };
+                }
+            }
+            // Partial failure
+            if (isMixed) {
+                const messages = [];
+                if (completeFiles > 0) {
+                    messages.push(`${completeFiles} ${pluralize(completeFiles, 'file')} deleted`);
+                }
+                if (completeFolders > 0) {
+                    messages.push(`${completeFolders} ${pluralize(completeFolders, 'folder')} deleted`);
+                }
+                if (failedFiles > 0) {
+                    messages.push(`${failedFiles} ${pluralize(failedFiles, 'file')} failed`);
+                }
+                if (failedFolders > 0) {
+                    messages.push(`${failedFolders} ${pluralize(failedFolders, 'folder')} failed`);
+                }
+                return {
+                    content: messages.join(', ') + '. Some items may have been deleted.',
+                    type: 'error',
+                };
+            }
+            else if (hasFolders) {
+                // Folders only partial failure
+                if (completeFolders > 0) {
+                    return {
+                        content: `${completeFolders} ${pluralize(completeFolders, 'folder')} deleted, ${failedFolders} ${pluralize(failedFolders, 'folder')} failed. Some items may have been deleted.`,
+                        type: 'error',
+                    };
+                }
+                else {
+                    return {
+                        content: `Failed to delete ${failedFolders} ${pluralize(failedFolders, 'folder')}. Some items may have been deleted.`,
+                        type: 'error',
+                    };
+                }
+            }
+            else {
+                // Files only partial failure
+                return {
+                    content: `${completeFiles} ${pluralize(completeFiles, 'file')} deleted, ${failedFiles} ${pluralize(failedFiles, 'file')} failed.`,
+                    type: 'error',
+                };
+            }
+        }
+        // Fallback to generic messaging if tasks not available
         if (COMPLETE === TOTAL) {
-            return { content: 'All files deleted.', type: 'success' };
+            return {
+                content: `${formatCount(TOTAL, 'item')} deleted successfully.`,
+                type: 'success',
+            };
         }
         if (FAILED === TOTAL) {
-            return { content: 'All files failed to delete.', type: 'error' };
+            return {
+                content: `Failed to delete ${formatCount(TOTAL, 'item')}.`,
+                type: 'error',
+            };
         }
         return {
-            content: `${COMPLETE} files deleted, ${FAILED} files failed to delete.`,
+            content: `${COMPLETE} ${pluralize(COMPLETE, 'item')} deleted, ${FAILED} ${pluralize(FAILED, 'item')} failed to delete.`,
             type: 'error',
         };
     },
@@ -2465,6 +2686,7 @@ const DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT = {
     tableColumnSizeHeader: 'Size',
     tableColumnTypeHeader: 'Type',
     selectFileLabel: 'Select file',
+    selectFolderLabel: 'Select folder',
     selectAllFilesLabel: 'Select all files',
     getActionListItemLabel: (key = '') => {
         switch (key) {
@@ -3287,6 +3509,7 @@ const Title$1 = ({ title }) => (React__namespace["default"].createElement(Headin
 
 const DEFAULT_COMPOSABLES = {
     ActionCancel,
+    ActionConfirmationModal,
     ActionDestination: ActionDestination$1,
     ActionExit,
     ActionStart,
@@ -3477,6 +3700,26 @@ const ActionCancelControl = () => {
     return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
+const useActionConfirmationModal = () => {
+    const { data: { confirmationModal = {} }, onConfirmationModalConfirm = () => { }, onConfirmationModalCancel = () => { }, } = useControlsContext();
+    return {
+        isOpen: false,
+        title: 'Confirm Action',
+        message: '',
+        confirmLabel: 'Confirm',
+        cancelLabel: 'Cancel',
+        ...confirmationModal,
+        onConfirm: onConfirmationModalConfirm,
+        onCancel: onConfirmationModalCancel,
+    };
+};
+
+const ActionConfirmationModalControl = () => {
+    const props = useActionConfirmationModal();
+    const Resolved = useResolvedComposable(ActionConfirmationModal, 'ActionConfirmationModal');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
 const getNavigationItems = ({ destinationParts, location, onNavigate, }) => {
     const { bucket, permissions, prefix = '', type } = location;
     const destinationSubpaths = [];
@@ -4011,9 +4254,18 @@ const FILE_DATA_ITEM_TABLE_KEYS = [
     'status',
     'cancel',
 ];
+const DELETE_TABLE_KEYS = [
+    'name',
+    'folder',
+    'type',
+    'size',
+    'status',
+    'progress',
+    'cancel',
+];
 
-const getFileType = (value, fallback = '') => value.lastIndexOf('.') !== -1
-    ? value.slice(value.lastIndexOf('.') + 1)
+const getFileType = (value, fallback = '') => value?.lastIndexOf?.('.') !== -1
+    ? value?.slice(value?.lastIndexOf?.('.') + 1)
     : fallback;
 const getCellName = (value) => 
 // `value.split` always returns an array with at least one entry
@@ -4028,7 +4280,7 @@ const getFileDataCellFolder = (task) => {
         ? task.data.sourceKey
         : task.data.key;
     const { fileKey } = task.data;
-    return targetKey.slice(0, -fileKey.length);
+    return targetKey.slice(0, -fileKey?.length);
 };
 const getUploadCellProgress = ({ progress, status, }) => {
     // prefer `progress` if available, 1 if status is complete, default 0
@@ -4073,31 +4325,31 @@ const getFileDataCancelCellContent = (data) => {
  * Generates a unique key for a table cell based on the key and item id
  */
 const getFileDataCellKey = ({ key, item, }) => `${key}-${item.data.id}`;
-const name$2 = (data) => {
+const name$3 = (data) => {
     const key = getFileDataCellKey(data);
     const { item } = data;
     const text = item.data.fileKey;
     const icon = STATUS_ICONS[item.status];
     return { key, type: 'text', content: { icon, text } };
 };
-const folder$2 = (data) => {
+const folder$3 = (data) => {
     const key = getFileDataCellKey(data);
     const text = getFileDataCellFolder(data.item);
     return { key, type: 'text', content: { text } };
 };
-const type$2 = (data) => {
+const type$3 = (data) => {
     const key = getFileDataCellKey(data);
     const { fileKey } = data.item.data;
     const text = getFileType(fileKey);
     return { key, type: 'text', content: { text } };
 };
-const size$2 = (data) => {
+const size$3 = (data) => {
     const key = getFileDataCellKey(data);
     const { size: value } = data.item.data;
     const displayValue = getFileSize(value);
     return { key, type: 'number', content: { value, displayValue } };
 };
-const cancel$2 = (data) => {
+const cancel$3 = (data) => {
     const key = getFileDataCellKey(data);
     const content = getFileDataCancelCellContent(data);
     return { key, type: 'button', content };
@@ -4113,12 +4365,12 @@ const status$3 = (data) => {
     return { key, type: 'text', content: { text } };
 };
 const COPY_CELL_RESOLVERS = {
-    name: name$2,
-    folder: folder$2,
-    type: type$2,
-    size: size$2,
+    name: name$3,
+    folder: folder$3,
+    type: type$3,
+    size: size$3,
     status: status$3,
-    cancel: cancel$2,
+    cancel: cancel$3,
     /**
      * @deprecated
      *
@@ -4140,8 +4392,160 @@ const COPY_TABLE_RESOLVERS = {
     getRowKey: ({ item }) => item.data.id,
 };
 
+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__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+        React__namespace["default"].createElement(TextElement, { className: "amplify-modal__list-title" },
+            React__namespace["default"].createElement("strong", null, folderListTitle)),
+        React__namespace["default"].createElement(UnorderedListElement, { className: "amplify-modal__list" }, folders.map((folder) => (React__namespace["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$1(config);
+        let fileCount = 0;
+        let nextToken;
+        let hasMoreItems = true;
+        while (hasMoreItems && fileCount < MAX_FILE_COUNT_LIMIT) {
+            const { items, nextToken: listNextToken } = await internals.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;
+    }
+};
+
+const getDeleteCellKey = (data) => `${data.key}-${data.item.data.id}`;
+const getCellDataFolder = (data) => {
+    const { type, key } = data;
+    const fileKey = getFileKey(key);
+    const targetKey = data.key;
+    if (type === 'FOLDER') {
+        const pathWithoutTrailingSlash = targetKey.replace(/\/$/, '');
+        const lastSlashIndex = pathWithoutTrailingSlash.lastIndexOf('/');
+        return lastSlashIndex >= 0
+            ? pathWithoutTrailingSlash.slice(0, lastSlashIndex + 1)
+            : '';
+    }
+    return targetKey.slice(0, -fileKey?.length);
+};
+const name$2 = (data) => {
+    const key = getDeleteCellKey(data);
+    const { item } = data;
+    let text;
+    if (item.data.type === 'FOLDER') {
+        text = `${getFolderName(item.data.key)}/`;
+    }
+    else {
+        text = item.data.fileKey ?? getCellName(item.data.key);
+    }
+    const icon = STATUS_ICONS[item.status];
+    return { key, type: 'text', content: { icon, text } };
+};
+const folder$2 = (data) => {
+    const key = getDeleteCellKey(data);
+    const text = getCellDataFolder(data.item.data);
+    return { key, type: 'text', content: { text } };
+};
+const type$2 = (data) => {
+    const key = getDeleteCellKey(data);
+    if (data.item.data.type === 'FOLDER') {
+        return { key, type: 'text', content: { text: 'Folder' } };
+    }
+    const text = getFileType(data.item.data.key);
+    return { key, type: 'text', content: { text } };
+};
+const size$2 = (data) => {
+    const key = getDeleteCellKey(data);
+    const itemData = data.item.data;
+    if (data.item.data.type === 'FOLDER') {
+        return { key, type: 'text', content: { text: '-' } };
+    }
+    const value = 'size' in itemData ? itemData.size : 0;
+    const displayValue = getFileSize(value);
+    return { key, type: 'number', content: { value, displayValue } };
+};
+const getCancelCellContent = (data) => {
+    const { item, props } = data;
+    const { cancel, status } = item;
+    const { isProcessing, onTaskRemove } = props;
+    const isQueued = status === 'QUEUED';
+    const isRemovable = isQueued && !isProcessing;
+    const isCancelable = isProcessing && !!cancel;
+    const itemAriaValue = getCellName(item.data.fileKey ?? item.data.key);
+    const ariaLabel = `${isRemovable ? 'Remove' : 'Cancel'} item: ${itemAriaValue}`;
+    const isDisabled = !isRemovable && !isCancelable;
+    const onClick = !isCancelable && !isRemovable
+        ? undefined
+        : () => {
+            if (isRemovable) {
+                onTaskRemove?.(item);
+                return;
+            }
+            if (isCancelable)
+                cancel();
+        };
+    return { ariaLabel, isDisabled, onClick, icon: 'cancel' };
+};
+const cancel$2 = (data) => {
+    const key = getDeleteCellKey(data);
+    const content = getCancelCellContent(data);
+    return { key, type: 'button', content };
+};
 const status$2 = (data) => {
-    const key = getFileDataCellKey(data);
+    const key = getDeleteCellKey(data);
     const { item: { status }, props: { displayText }, } = data;
     const statusLabelKey = STATUS_LABELS[status];
     const text = isDeleteViewDisplayTextKey(statusLabelKey)
@@ -4149,21 +4553,47 @@ const status$2 = (data) => {
         : '';
     return { key, type: 'text', content: { text } };
 };
+const progress$2 = (data) => {
+    const key = getDeleteCellKey(data);
+    const { item } = data;
+    const itemIsFile = item.data.type === 'FILE';
+    if (itemIsFile) {
+        const text = item.status === 'COMPLETE' ? 'Deleted' : '-';
+        return { key, type: 'text', content: { text } };
+    }
+    if ((item.status === 'PENDING' ||
+        item.status === 'FAILED' ||
+        item.status === 'CANCELED') &&
+        item.data.totalCount !== undefined) {
+        const countDisplay = item.data.totalCount ?? '?';
+        const text = `${item.successCount ?? 0}/${countDisplay} files`;
+        return { key, type: 'text', content: { text } };
+    }
+    else if (item.status === 'COMPLETE') {
+        if (item.data.totalCount === null) {
+            const text = `${item.successCount ?? 0} files deleted`;
+            return { key, type: 'text', content: { text } };
+        }
+        const text = `${item.data.totalCount} files deleted`;
+        return { key, type: 'text', content: { text } };
+    }
+    else {
+        const text = item.data.totalCount === null
+            ? 'Count failed'
+            : item.data.totalCount !== undefined
+                ? `${item.data.totalCount} files`
+                : 'Calculating...';
+        return { key, type: 'text', content: { text } };
+    }
+};
 const DELETE_CELL_RESOLVERS = {
     name: name$2,
     folder: folder$2,
     type: type$2,
     size: size$2,
     status: status$2,
+    progress: progress$2,
     cancel: cancel$2,
-    /**
-     * @deprecated
-     *
-     * non-upload view tables do not include "progress" headers but include here to
-     * keep TS happy as "progress" headers were included in display text interfaces
-     * and cannot be removed from the tables without a breaking change
-     */
-    progress: ui.noop,
 };
 const DELETE_TABLE_RESOLVERS = {
     getCell: (data) => DELETE_CELL_RESOLVERS[data.key](data),
@@ -4920,6 +5350,7 @@ function CopyViewProvider({ children, ...props }) {
 }
 
 const DEFAULT_STATE = {
+    dataItems: undefined,
     fileDataItems: undefined,
 };
 const locationItemsReducer = (prevState, event) => {
@@ -4928,27 +5359,29 @@ const locationItemsReducer = (prevState, event) => {
             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;
+            const nextDataItems = !prevState.dataItems?.length
+                ? items
+                : prevState.dataItems.concat(items.filter((data) => !prevState.dataItems?.some(({ id }) => id === data.id)));
+            const fileItems = items.filter((item) => item.type === 'FILE');
+            const nextFileDataItems = !prevState.fileDataItems?.length
+                ? fileItems.map(createFileDataItem)
+                : prevState.fileDataItems.concat(fileItems
+                    .filter((data) => !prevState.fileDataItems?.some(({ id }) => id === data.id))
+                    .map(createFileDataItem));
             return {
-                fileDataItems: prevState.fileDataItems.concat(nextFileDataItems),
+                dataItems: nextDataItems,
+                fileDataItems: 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) {
+            const dataItems = prevState.dataItems?.filter((item) => item.id !== id);
+            const fileDataItems = prevState.fileDataItems?.filter((item) => item.id !== id);
+            if (dataItems?.length === prevState.dataItems?.length &&
+                fileDataItems?.length === prevState.fileDataItems?.length) {
                 return prevState;
             }
-            return { fileDataItems };
+            return { dataItems, fileDataItems };
         }
         case 'RESET_LOCATION_ITEMS': {
             return DEFAULT_STATE;
@@ -5184,12 +5617,12 @@ CopyView.Title = TitleControl;
 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__namespace["default"].createElement(ControlsContextProvider, { data: {
@@ -5207,24 +5640,80 @@ 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));
 }
 
 // assign to constant to ensure referential equality
 const EMPTY_ITEMS$1 = [];
 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$1 } = locationItems;
-    const [processState, handleProcess] = useAction('delete', { items });
+    const { dataItems = EMPTY_ITEMS$1 } = locationItems;
+    const getConfig = useGetActionInput();
+    const [itemsWithCount, setItemsWithCount] = React__namespace["default"].useState(dataItems);
+    const folderCountsRef = React__namespace["default"].useRef(new Map());
+    // Sync itemsWithCount with dataItems when dataItems changes (e.g., item removal)
+    React__namespace["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__namespace["default"].useState(false);
     const { isProcessing, isProcessingComplete, statusCounts, tasks } = processState;
+    const selectionSummary = getSelectionSummary(dataItems);
+    const { hasFolders } = selectionSummary;
+    React__namespace["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
@@ -5243,6 +5732,11 @@ const useDeleteView = (options) => {
     const onTaskRemove = React__namespace["default"].useCallback(({ data }) => {
         locationItemsDispatch({ type: 'REMOVE_LOCATION_ITEM', id: data.id });
     }, [locationItemsDispatch]);
+    const confirmationModal = React__namespace["default"].useMemo(() => createDeleteConfirmationModalProps({
+        items: dataItems,
+        showConfirmation,
+        displayText,
+    }), [dataItems, showConfirmation, displayText]);
     return {
         isProcessing,
         isProcessingComplete,
@@ -5253,6 +5747,9 @@ const useDeleteView = (options) => {
         onActionExit,
         onActionStart,
         onTaskRemove,
+        onConfirmDelete,
+        onCancelConfirmation,
+        confirmationModal,
     };
 };
 
@@ -5271,11 +5768,13 @@ const DeleteView = ({ className, ...props }) => {
                     React__namespace["default"].createElement(MessageControl, null)),
                 React__namespace["default"].createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
                     React__namespace["default"].createElement(ActionCancelControl, null),
-                    React__namespace["default"].createElement(ActionStartControl, null))))));
+                    React__namespace["default"].createElement(ActionStartControl, null))),
+            React__namespace["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;
@@ -5489,34 +5988,45 @@ const getFileRowContent = ({ filePreviewEnabled, permissions, isSelected, itemLo
     }
 });
 
-const getFolderRowContent = ({ itemSubPath, rowId, onNavigate, }) => LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
-    const key = `${columnKey}-${rowId}`;
-    switch (columnKey) {
-        case 'checkbox': {
-            return { key, type: 'text', content: { text: '' } };
-        }
-        case 'name': {
-            return {
-                key,
-                type: 'button',
-                content: {
-                    icon: 'folder',
-                    ariaLabel: itemSubPath,
-                    label: itemSubPath,
-                    onClick: onNavigate,
-                },
-            };
-        }
-        case 'type': {
-            return { key, type: 'text', content: { text: 'Folder' } };
-        }
-        case 'last-modified':
-        case 'size':
-        case 'download': {
-            return { key, type: 'text', content: { text: '' } };
+const getFolderRowContent = ({ itemSubPath, rowId, isSelected, selectFolderLabel, onNavigate, onSelect, }) => {
+    return LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
+        const key = `${columnKey}-${rowId}`;
+        switch (columnKey) {
+            case 'checkbox': {
+                return {
+                    key,
+                    type: 'checkbox',
+                    content: {
+                        checked: isSelected,
+                        id: key,
+                        label: `${selectFolderLabel} ${itemSubPath}`,
+                        onSelect,
+                    },
+                };
+            }
+            case 'name': {
+                return {
+                    key,
+                    type: 'button',
+                    content: {
+                        icon: 'folder',
+                        ariaLabel: itemSubPath,
+                        label: itemSubPath,
+                        onClick: onNavigate,
+                    },
+                };
+            }
+            case 'type': {
+                return { key, type: 'text', content: { text: 'Folder' } };
+            }
+            case 'last-modified':
+            case 'size':
+            case 'download': {
+                return { key, type: 'text', content: { text: '' } };
+            }
         }
-    }
-});
+    });
+};
 
 const getHeaders$1 = ({ tableColumnLastModifiedHeader, tableColumnNameHeader, tableColumnSizeHeader, tableColumnTypeHeader, areAllFilesSelected, selectAllFilesLabel, onSelectAll, hasFiles, }) => LOCATION_DETAIL_VIEW_HEADERS.map((key) => {
     switch (key) {
@@ -5583,7 +6093,7 @@ const getHeaders$1 = ({ tableColumnLastModifiedHeader, tableColumnNameHeader, ta
     }
 });
 
-const getLocationDetailViewTableData = ({ filePreviewEnabled, activeFile, onSelectActiveFile, areAllFilesSelected, displayText, location, fileDataItems, hasFiles, pageItems, selectFileLabel, selectAllFilesLabel, getDateDisplayValue, onDownload, onNavigate, onSelect, onSelectAll, }) => {
+const getLocationDetailViewTableData = ({ filePreviewEnabled, activeFile, onSelectActiveFile, areAllFilesSelected, displayText, location, fileDataItems, dataItems, hasFiles, pageItems, selectFileLabel, selectAllFilesLabel, getDateDisplayValue, onDownload, onNavigate, onSelect, onSelectAll, }) => {
     const { tableColumnLastModifiedHeader, tableColumnNameHeader, tableColumnSizeHeader, tableColumnTypeHeader, } = displayText;
     const headers = getHeaders$1({
         areAllFilesSelected,
@@ -5641,6 +6151,10 @@ const getLocationDetailViewTableData = ({ filePreviewEnabled, activeFile, onSele
                     }
                     onNavigate({ ...current, id }, itemLocationPath);
                 };
+                const isSelected = dataItems?.some((item) => item.id === id) ?? false;
+                const onFolderSelect = () => {
+                    onSelect(isSelected, locationItem);
+                };
                 return {
                     key: id,
                     active: false,
@@ -5648,6 +6162,9 @@ const getLocationDetailViewTableData = ({ filePreviewEnabled, activeFile, onSele
                         itemSubPath,
                         rowId: id,
                         onNavigate: onFolderNavigate,
+                        selectFolderLabel: selectFileLabel,
+                        isSelected,
+                        onSelect: onFolderSelect,
                     }),
                 };
             }
@@ -5659,7 +6176,7 @@ const getLocationDetailViewTableData = ({ filePreviewEnabled, activeFile, onSele
 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),
@@ -5716,6 +6233,7 @@ function LocationDetailViewProvider({ children, ...props }) {
                 onNavigate,
                 onSelect,
                 onSelectAll: onToggleSelectAll,
+                dataItems,
             }),
             title: getTitle(location),
             message: messageControlContent,
@@ -5888,7 +6406,7 @@ const useLocationDetailView = (options) => {
     const [activeFile, setActiveFile] = React__namespace["default"].useState();
     const { current, key } = location;
     const { permissions, prefix } = current ?? {};
-    const { fileDataItems } = locationItems;
+    const { dataItems, fileDataItems } = locationItems;
     const hasInvalidPrefix = ui.isUndefined(prefix);
     const [{ task }, handleDownload] = useAction('download');
     const [{ value, isLoading, hasError, message }, handleList] = useList('locationItems');
@@ -6015,13 +6533,13 @@ const useLocationDetailView = (options) => {
                     actionType: type,
                     icon,
                     isDisabled: ui.isFunction(disable)
-                        ? disable(fileDataItems)
+                        ? disable(dataItems)
                         : disable ?? false,
                     isHidden: ui.isFunction(hide) ? hide(permissions) : hide,
                     label,
                 };
             });
-    }, [actionConfigs, fileDataItems, permissions]);
+    }, [actionConfigs, dataItems, permissions]);
     return {
         actionItems,
         actionType,
@@ -6032,6 +6550,7 @@ const useLocationDetailView = (options) => {
         page: currentPage,
         pageItems,
         location,
+        dataItems,
         fileDataItems,
         hasError,
         hasDownloadError: task?.status === 'FAILED',
@@ -6087,16 +6606,16 @@ const useLocationDetailView = (options) => {
             storeDispatch({ type: 'RESET_ACTION_TYPE' });
             locationItemsDispatch({ type: 'RESET_LOCATION_ITEMS' });
         },
-        onSelect: (isSelected, fileItem) => {
+        onSelect: (isSelected, item) => {
             locationItemsDispatch(isSelected
-                ? { type: 'REMOVE_LOCATION_ITEM', id: fileItem.id }
-                : { type: 'SET_LOCATION_ITEMS', items: [fileItem] });
+                ? { type: 'REMOVE_LOCATION_ITEM', id: item.id }
+                : { type: 'SET_LOCATION_ITEMS', items: [item] });
         },
         onToggleSelectAll: () => {
-            const fileItems = pageItems.filter((item) => item.type === 'FILE');
-            locationItemsDispatch(fileItems.length === fileDataItems?.length
+            const selectableItems = pageItems;
+            locationItemsDispatch(selectableItems.length === dataItems?.length
                 ? { type: 'RESET_LOCATION_ITEMS' }
-                : { type: 'SET_LOCATION_ITEMS', items: fileItems });
+                : { type: 'SET_LOCATION_ITEMS', items: selectableItems });
         },
         onSearch: () => {
             setActiveFile(undefined);