@aws-amplify/ui-react-storage 3.12.1 → 3.13.0

package/dist/esm/components/StorageBrowser/displayText/libraries/en/locationDetailView.mjs

@@ -1,6 +1,33 @@
 import { DEFAULT_LIST_VIEW_DISPLAY_TEXT } from './shared.mjs';
 
 const DEFAULT_ERROR_MESSAGE = 'There was an error loading items.';
+const DEFAULT_FILE_PREVIEW_DISPLAY_TEXT = {
+    closeButtonLabel: 'Close',
+    filePreviewTitle: 'File Preview',
+    fileInformationTitle: 'File Information',
+    errorMessage: 'Something went wrong',
+    sizeLimitMessage: 'File preview not possible due to preview size limit',
+    unsupportedFileMessage: 'File preview not supported for this file type',
+    keyLabel: 'Key',
+    sizeLabel: 'Size',
+    versionIdLabel: 'Version Id',
+    lastModifiedLabel: 'Last Modified',
+    entityTagLabel: 'Entity tag',
+    typeLabel: 'Type',
+    unknownValue: 'Unknown',
+    errorDescription: 'We encountered an issue while loading the file preview.',
+    unsupportedFileDescription: 'This file format is not supported for preview. You can download the file to view it with an appropriate application.',
+    imageLoadErrorDescription: 'The image could not be loaded. This may be due to network issues, file corruption, or an unsupported image format.',
+    videoLoadErrorDescription: 'The video could not be played. This may be due to network issues, file corruption, or an unsupported video format or codec.',
+    textLoadErrorDescription: 'The text file could not be loaded. This may be due to network issues, file access permissions, or the file being too large to display.',
+    generalPreviewErrorDescription: 'An unexpected error occurred while loading the file preview. Please try again or download the file to view it with an appropriate application.',
+    fileSizeLimitDescription: 'This file is too large to preview in the browser. You can download the file to view it with an appropriate application.',
+    filePrefix: 'File: ',
+    retryButtonLabel: 'Retry',
+    downloadButtonLabel: 'Download',
+    getTextErrorMessage: (error) => `Error loading file: ${error}`,
+    emptyFileMessage: 'File is empty',
+};
 const DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT = {
     ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
     getListItemsResultMessage: (data) => {
@@ -64,6 +91,7 @@ const DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT = {
         const { bucket = '' } = current ?? {};
         return key || bucket;
     },
+    filePreview: DEFAULT_FILE_PREVIEW_DISPLAY_TEXT,
 };
 
 export { DEFAULT_ERROR_MESSAGE, DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT };

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

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+
+const { FilePreviewContext, useFilePreview: useFilePreviewContext } = createContextUtilities({
+    contextName: 'FilePreview',
+    defaultValue: {},
+});
+function FilePreviewProvider({ children, filePreview, }) {
+    return (React__default.createElement(FilePreviewContext.Provider, { value: filePreview }, children));
+}
+
+export { FilePreviewContext, FilePreviewProvider, useFilePreviewContext };

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

@@ -6,7 +6,16 @@ import '../../../components/elements/IconElement.mjs';
 import { STORAGE_BROWSER_BLOCK } from '../../../components/base/constants.mjs';
 import '../../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
+import '../../../displayText/context.mjs';
+import '../../../filePreview/context.mjs';
 import { ActionCancelControl } from '../../../controls/ActionCancelControl.mjs';
 import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';
 import { ActionStartControl } from '../../../controls/ActionStartControl.mjs';

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

@@ -6,8 +6,16 @@ import '../../../components/elements/IconElement.mjs';
 import { ControlsContextProvider } from '../../../controls/context.mjs';
 import '../../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.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';

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

@@ -8,8 +8,16 @@ import '../../../components/elements/IconElement.mjs';
 import '@aws-amplify/ui';
 import { STORAGE_BROWSER_BLOCK } from '../../../components/base/constants.mjs';
 import '../../../components/composables/context.mjs';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
+import '../../../filePreview/context.mjs';
 
 const defaultValue = {};
 const { useFoldersMessage, FoldersMessageProvider } = createContextUtilities({ contextName: 'FoldersMessage', defaultValue });

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

@@ -6,7 +6,16 @@ import '../../../components/elements/IconElement.mjs';
 import { STORAGE_BROWSER_BLOCK } from '../../../components/base/constants.mjs';
 import '../../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
+import '../../../displayText/context.mjs';
+import '../../../filePreview/context.mjs';
 import { ActionStartControl } from '../../../controls/ActionStartControl.mjs';
 import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';
 import { FolderNameFieldControl } from '../../../controls/FolderNameFieldControl.mjs';

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

@@ -13,7 +13,16 @@ 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';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
+import '../../../displayText/context.mjs';
+import '../../../filePreview/context.mjs';
 import { DeleteViewProvider } from './DeleteViewProvider.mjs';
 import { useDeleteView } from './useDeleteView.mjs';
 

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

@@ -13,7 +13,16 @@ 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';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
+import '../../../displayText/context.mjs';
+import '../../../filePreview/context.mjs';
 import { DownloadViewProvider } from './DownloadViewProvider.mjs';
 import { useDownloadView } from './useDownloadView.mjs';
 

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

@@ -6,7 +6,16 @@ import '../../../components/elements/IconElement.mjs';
 import { STORAGE_BROWSER_BLOCK } from '../../../components/base/constants.mjs';
 import '../../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import '../../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
+import '../../../displayText/context.mjs';
+import '../../../filePreview/context.mjs';
 import { ActionCancelControl } from '../../../controls/ActionCancelControl.mjs';
 import { ActionDestinationControl } from '../../../controls/ActionDestinationControl.mjs';
 import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';

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

@@ -6,7 +6,16 @@ import '../../components/elements/IconElement.mjs';
 import { STORAGE_BROWSER_BLOCK } from '../../components/base/constants.mjs';
 import '../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import '../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../actions/configs/context.mjs';
+import '../../actions/configs/defaults.mjs';
+import '../../displayText/context.mjs';
+import '../../filePreview/context.mjs';
 import '../../controls/context.mjs';
 import { ActionsListControl } from '../../controls/ActionsListControl.mjs';
 import { DataRefreshControl } from '../../controls/DataRefreshControl.mjs';
@@ -21,6 +30,7 @@ import { SearchSubfoldersToggleControl } from '../../controls/SearchSubfoldersTo
 import { TitleControl } from '../../controls/TitleControl.mjs';
 import { LocationDetailViewProvider } from './LocationDetailViewProvider.mjs';
 import { useLocationDetailView } from './useLocationDetailView.mjs';
+import { FilePreviewControl } from '../../controls/FilePreviewControl.mjs';
 
 const LocationDetailView = ({ className, ...props }) => {
     const state = useLocationDetailView(props);
@@ -36,10 +46,12 @@ const LocationDetailView = ({ className, ...props }) => {
                 React__default.createElement(PaginationControl, null),
                 React__default.createElement(DataRefreshControl, null),
                 React__default.createElement(ActionsListControl, null)),
-            hasError ? null : (React__default.createElement(DropZoneControl, null,
-                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
-                    React__default.createElement(LoadingIndicatorControl, null),
-                    React__default.createElement(DataTableControl, null)))),
+            hasError ? null : (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__content-with-preview` },
+                React__default.createElement(DropZoneControl, null,
+                    React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                        React__default.createElement(LoadingIndicatorControl, null),
+                        React__default.createElement(DataTableControl, null))),
+                React__default.createElement(FilePreviewControl, null))),
             React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
                 React__default.createElement(MessageControl, null)))));
 };
@@ -56,5 +68,6 @@ LocationDetailView.Refresh = DataRefreshControl;
 LocationDetailView.Search = SearchFieldControl;
 LocationDetailView.SearchSubfoldersToggle = SearchSubfoldersToggleControl;
 LocationDetailView.Title = TitleControl;
+LocationDetailView.FilePreview = FilePreviewControl;
 
 export { LocationDetailView };

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, page, pageItems, hasNextPage, highestPageVisited, isLoading, isSearchSubfoldersEnabled, location, fileDataItems, hasError, hasDownloadError, message, downloadErrorMessage, searchQuery, hasExhaustedSearch, onActionSelect, onDropFiles, onRefresh, onPaginate, onDownload, onNavigate, onNavigateHome, onSelect, onToggleSelectAll, onSearch, onSearchQueryChange, onSearchClear, onToggleSearchSubfolders, } = 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, } = props;
     const actionsWithDisplayText = actionItems.map((item) => ({
         ...item,
         label: getActionListItemLabel(item.label),
@@ -26,6 +26,9 @@ function LocationDetailViewProvider({ children, ...props }) {
         actionItems.every(({ isHidden }) => isHidden);
     return (React__default.createElement(ControlsContextProvider, { data: {
             actions: actionsWithDisplayText,
+            activeFile,
+            activeFileHasNext,
+            activeFileHasPrev,
             isActionsListDisabled,
             isDataRefreshDisabled: isLoading,
             isLoading,
@@ -42,7 +45,11 @@ function LocationDetailViewProvider({ children, ...props }) {
             searchSubmitLabel,
             searchClearLabel,
             searchQuery,
+            filePreviewState,
             tableData: getLocationDetailViewTableData({
+                filePreviewEnabled,
+                activeFile,
+                onSelectActiveFile,
                 areAllFilesSelected,
                 displayText,
                 location,
@@ -59,7 +66,7 @@ function LocationDetailViewProvider({ children, ...props }) {
             }),
             title: getTitle(location),
             message: messageControlContent,
-        }, onActionSelect: onActionSelect, onDropFiles: onDropFiles, onNavigate: onNavigate, onNavigateHome: onNavigateHome, onPaginate: onPaginate, onRefresh: onRefresh, onSearch: onSearch, onSearchQueryChange: onSearchQueryChange, onSearchClear: onSearchClear, onToggleSearchSubfolders: onToggleSearchSubfolders }, children));
+        }, onActionSelect: onActionSelect, onDropFiles: onDropFiles, onNavigate: onNavigate, onNavigateHome: onNavigateHome, onPaginate: onPaginate, onRefresh: onRefresh, onSearch: onSearch, onSelectActiveFile: onSelectActiveFile, onSearchQueryChange: onSearchQueryChange, onSearchClear: onSearchClear, onToggleSearchSubfolders: onToggleSearchSubfolders, onRetryFilePreview: onRetryFilePreview }, children));
 }
 
 export { LocationDetailViewProvider };

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

@@ -6,5 +6,73 @@ const LOCATION_DETAIL_VIEW_HEADERS = [
     'size',
     'download',
 ];
+const GENERIC_FILE_ICON = 'file';
+const EXTENSION_THUMBNAIL_MAPPINGS = {
+    // Images
+    jpg: 'file-image',
+    jpeg: 'file-image',
+    png: 'file-image',
+    gif: 'file-image',
+    webp: 'file-image',
+    svg: 'file-image',
+    bmp: 'file-image',
+    tiff: 'file-image',
+    tif: 'file-image',
+    ico: 'file-image',
+    heic: 'file-image',
+    heif: 'file-image',
+    avif: 'file-image',
+    // Videos
+    mp4: 'file-video',
+    avi: 'file-video',
+    mov: 'file-video',
+    wmv: 'file-video',
+    flv: 'file-video',
+    webm: 'file-video',
+    mkv: 'file-video',
+    m4v: 'file-video',
+    mpg: 'file-video',
+    mpeg: 'file-video',
+    '3gp': 'file-video',
+    ogv: 'file-video',
+    // Plain text files only
+    txt: 'file-text',
+    log: 'file-text',
+    json: 'file-text',
+    xml: 'file-text',
+    yaml: 'file-text',
+    yml: 'file-text',
+    ini: 'file-text',
+    conf: 'file-text',
+    cfg: 'file-text',
+    // Audio
+    mp3: 'file-audio',
+    wav: 'file-audio',
+    flac: 'file-audio',
+    aac: 'file-audio',
+    ogg: 'file-audio',
+    wma: 'file-audio',
+    m4a: 'file-audio',
+    // Documents
+    pdf: 'file-pdf',
+    // Excel
+    xls: 'file-excel',
+    xlsx: 'file-excel',
+    csv: 'file-excel',
+    // Word
+    doc: 'file-word',
+    docx: 'file-word',
+    rtf: 'file-word',
+    // PowerPoint
+    ppt: 'file-powerpoint',
+    pptx: 'file-powerpoint',
+    // Archives
+    zip: 'file-archive',
+    rar: 'file-archive',
+    '7z': 'file-archive',
+    tar: 'file-archive',
+    gz: 'file-archive',
+    bz2: 'file-archive',
+};
 
-export { LOCATION_DETAIL_VIEW_HEADERS };
+export { EXTENSION_THUMBNAIL_MAPPINGS, GENERIC_FILE_ICON, LOCATION_DETAIL_VIEW_HEADERS };

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

@@ -0,0 +1,11 @@
+import { getFileExtension } from '../../utils/files/fileType.mjs';
+import { GENERIC_FILE_ICON, EXTENSION_THUMBNAIL_MAPPINGS } from './constants.mjs';
+
+function getFileThumbnail(fileKey) {
+    const extension = getFileExtension(fileKey);
+    if (!fileKey || !extension)
+        return GENERIC_FILE_ICON;
+    return EXTENSION_THUMBNAIL_MAPPINGS[extension] || GENERIC_FILE_ICON;
+}
+
+export { getFileThumbnail };

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

@@ -1,7 +1,8 @@
 import { humanFileSize } from '@aws-amplify/ui';
 import { LOCATION_DETAIL_VIEW_HEADERS } from './constants.mjs';
+import { getFileThumbnail } from './fileIcon.mjs';
 
-const getFileRowContent = ({ permissions, isSelected, itemLocationKey, getDateDisplayValue, lastModified, rowId, rowKey, selectFileLabel, size, onDownload, onSelect, }) => LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
+const getFileRowContent = ({ filePreviewEnabled, permissions, isSelected, itemLocationKey, getDateDisplayValue, lastModified, rowId, rowKey, selectFileLabel, size, onDownload, onSelect, onClick, }) => LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
     const key = `${columnKey}-${rowId}`;
     switch (columnKey) {
         case 'checkbox': {
@@ -19,11 +20,13 @@ const getFileRowContent = ({ permissions, isSelected, itemLocationKey, getDateDi
         case 'name': {
             return {
                 key,
-                type: 'text',
+                type: filePreviewEnabled ? 'button' : 'text',
                 content: {
-                    icon: 'file',
-                    ariaLabel: 'file',
-                    text: rowKey.slice(itemLocationKey.length),
+                    icon: getFileThumbnail(rowKey),
+                    ariaLabel: `${rowKey.slice(itemLocationKey.length)} file`,
+                    ...(filePreviewEnabled
+                        ? { label: rowKey.slice(itemLocationKey.length), onClick }
+                        : { text: rowKey.slice(itemLocationKey.length) }),
                 },
             };
         }

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

@@ -8,7 +8,7 @@ import { getFileRowContent } from './getFileRowContent.mjs';
 import { getFolderRowContent } from './getFolderRowContent.mjs';
 import { getHeaders } from './getHeaders.mjs';
 
-const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, location, fileDataItems, hasFiles, pageItems, selectFileLabel, selectAllFilesLabel, getDateDisplayValue, onDownload, onNavigate, onSelect, onSelectAll, }) => {
+const getLocationDetailViewTableData = ({ filePreviewEnabled, activeFile, onSelectActiveFile, areAllFilesSelected, displayText, location, fileDataItems, hasFiles, pageItems, selectFileLabel, selectAllFilesLabel, getDateDisplayValue, onDownload, onNavigate, onSelect, onSelectAll, }) => {
     const { tableColumnLastModifiedHeader, tableColumnNameHeader, tableColumnSizeHeader, tableColumnTypeHeader, } = displayText;
     const headers = getHeaders({
         areAllFilesSelected,
@@ -33,9 +33,14 @@ const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, loca
                 const onFileSelect = () => {
                     onSelect(isSelected, locationItem);
                 };
+                const onClick = () => {
+                    onSelectActiveFile(locationItem);
+                };
                 return {
                     key: id,
+                    active: activeFile?.id === id,
                     content: getFileRowContent({
+                        filePreviewEnabled,
                         permissions: current?.permissions ?? [],
                         isSelected,
                         itemLocationKey: `${current?.prefix ?? ''}${path}`,
@@ -47,6 +52,7 @@ const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, loca
                         size,
                         onDownload: onFileDownload,
                         onSelect: onFileSelect,
+                        onClick,
                     }),
                 };
             }
@@ -62,6 +68,7 @@ const getLocationDetailViewTableData = ({ areAllFilesSelected, displayText, loca
                 };
                 return {
                     key: id,
+                    active: false,
                     content: getFolderRowContent({
                         itemSubPath,
                         rowId: id,

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { useCallback } from 'react';
 import { isUndefined, isFunction } from '@aws-amplify/ui';
 import { usePaginate } from '../hooks/usePaginate.mjs';
 import '@aws-amplify/storage/internals';
@@ -12,6 +12,7 @@ import '../../useAction/context.mjs';
 import { useAction } from '../../useAction/useAction.mjs';
 import { useList } from '../../useAction/useList.mjs';
 import { useSearch } from '../hooks/useSearch.mjs';
+import { useFilePreview } from '../hooks/useFilePreview/useFilePreview.mjs';
 
 const DEFAULT_PAGE_SIZE = 100;
 const DEFAULT_LIST_OPTIONS = {
@@ -33,6 +34,7 @@ const useLocationDetailView = (options) => {
     const [{ location, actionType }, storeDispatch] = useStore();
     const [locationItems, locationItemsDispatch] = useLocationItems();
     const fileItemsDispatch = useFileItems()[1];
+    const [activeFile, setActiveFile] = React__default.useState();
     const { current, key } = location;
     const { permissions, prefix } = current ?? {};
     const { fileDataItems } = locationItems;
@@ -71,7 +73,62 @@ const useLocationDetailView = (options) => {
         handleList({ prefix: key, options: searchOptions });
         locationItemsDispatch({ type: 'RESET_LOCATION_ITEMS' });
     };
+    const { activeFileHasPrev, activeFileHasNext } = React__default.useMemo(() => {
+        if (!activeFile)
+            return {
+                activeFileHasNext: false,
+                activeFileHasPrev: false,
+            };
+        const idx = pageItems.findIndex((item) => item.id === activeFile?.id);
+        let pIdx = idx;
+        do {
+            --pIdx;
+        } while (pIdx >= 0 && pageItems[pIdx].type !== 'FILE');
+        let nIdx = idx;
+        do {
+            ++nIdx;
+        } while (nIdx <= pageItems.length - 1 && pageItems[nIdx].type !== 'FILE');
+        return {
+            activeFileHasPrev: pIdx >= 0,
+            activeFileHasNext: nIdx <= pageItems.length - 1,
+        };
+    }, [activeFile, pageItems]);
+    const getSuitableNextItem = useCallback((direction, type) => {
+        // first find the position
+        let newIdx = pageItems.findIndex((item) => item.id === activeFile?.id);
+        if (direction === 'prev') {
+            do {
+                --newIdx;
+            } while (newIdx >= 0 && pageItems[newIdx].type !== type);
+            if (pageItems[newIdx].type === type) {
+                return pageItems[newIdx];
+            }
+        }
+        else {
+            do {
+                ++newIdx;
+            } while (newIdx <= pageItems.length - 1 &&
+                pageItems[newIdx].type !== type);
+            if (pageItems[newIdx].type === type) {
+                return pageItems[newIdx];
+            }
+        }
+    }, [activeFile, pageItems]);
+    const onSelectActiveFile = (arg) => {
+        if (arg === 'prev') {
+            setActiveFile(getSuitableNextItem('prev', 'FILE'));
+        }
+        else if (arg === 'next') {
+            setActiveFile(getSuitableNextItem('next', 'FILE'));
+        }
+        else {
+            setActiveFile(arg);
+        }
+    };
     const { searchQuery, isSearchingSubfolders: isSearchSubfoldersEnabled, onSearchQueryChange, onSearchSubmit, onToggleSearchSubfolders, resetSearch, } = useSearch({ onSearch });
+    const { handleRetry, optout, ...filePreviewState } = useFilePreview({
+        activeFile,
+    });
     const onRefresh = () => {
         if (hasInvalidPrefix)
             return;
@@ -81,6 +138,7 @@ const useLocationDetailView = (options) => {
             prefix: key,
             options: { ...listOptions, refresh: true },
         });
+        setActiveFile(undefined);
         locationItemsDispatch({ type: 'RESET_LOCATION_ITEMS' });
     };
     React__default.useEffect(() => {
@@ -91,6 +149,7 @@ const useLocationDetailView = (options) => {
             options: { ...listOptions, refresh: true },
         });
         handleReset();
+        setActiveFile(undefined);
     }, [handleList, handleReset, listOptions, hasInvalidPrefix, key]);
     const { actionConfigs } = useActionConfigs();
     const actionItems = React__default.useMemo(() => {
@@ -115,6 +174,10 @@ const useLocationDetailView = (options) => {
     return {
         actionItems,
         actionType,
+        activeFile,
+        activeFileHasNext,
+        activeFileHasPrev,
+        onSelectActiveFile,
         page: currentPage,
         pageItems,
         location,
@@ -127,8 +190,13 @@ const useLocationDetailView = (options) => {
         downloadErrorMessage: getDownloadErrorMessageFromFailedDownloadTask(task),
         isLoading,
         isSearchSubfoldersEnabled,
-        onPaginate: handlePaginate,
+        onPaginate: (p) => {
+            handlePaginate(p);
+            setActiveFile(undefined);
+        },
         searchQuery,
+        filePreviewState,
+        filePreviewEnabled: !optout,
         hasExhaustedSearch,
         onRefresh,
         onActionExit: () => {
@@ -146,6 +214,7 @@ const useLocationDetailView = (options) => {
             resetSearch();
             storeDispatch({ type: 'CHANGE_LOCATION', location, path });
             locationItemsDispatch({ type: 'RESET_LOCATION_ITEMS' });
+            setActiveFile(undefined);
         },
         onDropFiles: (files) => {
             fileItemsDispatch({ type: 'ADD_FILES', files });
@@ -178,7 +247,10 @@ const useLocationDetailView = (options) => {
                 ? { type: 'RESET_LOCATION_ITEMS' }
                 : { type: 'SET_LOCATION_ITEMS', items: fileItems });
         },
-        onSearch: onSearchSubmit,
+        onSearch: () => {
+            setActiveFile(undefined);
+            onSearchSubmit();
+        },
         onSearchClear: () => {
             resetSearch();
             if (hasInvalidPrefix)
@@ -187,6 +259,7 @@ const useLocationDetailView = (options) => {
             handleReset();
         },
         onSearchQueryChange,
+        onRetryFilePreview: handleRetry,
         onToggleSearchSubfolders,
     };
 };

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

@@ -6,7 +6,16 @@ import '../../components/elements/IconElement.mjs';
 import { STORAGE_BROWSER_BLOCK } from '../../components/base/constants.mjs';
 import '../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import '../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../actions/configs/context.mjs';
+import '../../actions/configs/defaults.mjs';
+import '../../displayText/context.mjs';
+import '../../filePreview/context.mjs';
 import '../../controls/context.mjs';
 import { DataRefreshControl } from '../../controls/DataRefreshControl.mjs';
 import { DataTableControl } from '../../controls/DataTableControl.mjs';

package/dist/esm/components/StorageBrowser/views/LocationsView/LocationsViewProvider.mjs

@@ -6,8 +6,16 @@ import '../../components/elements/IconElement.mjs';
 import { ControlsContextProvider } from '../../controls/context.mjs';
 import '../../components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import '../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
+import '../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../configuration/context.mjs';
+import 'aws-amplify/storage';
+import '../../actions/configs/context.mjs';
+import '../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../displayText/context.mjs';
+import '../../filePreview/context.mjs';
 import { getLocationsViewTableData } from './getLocationsViewTableData/getLocationsViewTableData.mjs';
 
 function LocationsViewProvider({ children, ...props }) {

package/dist/esm/components/StorageBrowser/views/context/primaryViews.mjs

@@ -19,6 +19,7 @@ import { LocationActionView } from '../LocationActionView/LocationActionView.mjs
 import '../LocationActionView/UploadView/UploadView.mjs';
 import '../../fileItems/context.mjs';
 import { LocationDetailView } from '../LocationDetailView/LocationDetailView.mjs';
+import '../../filePreview/context.mjs';
 import { LocationsView } from '../LocationsView/LocationsView.mjs';
 
 const DEFAULT_PRIMARY_VIEWS = {