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

package/dist/esm/browser.mjs

@@ -12,8 +12,12 @@ import './components/StorageBrowser/components/elements/definitions.mjs';
 import './components/StorageBrowser/components/elements/IconElement.mjs';
 import './components/StorageBrowser/components/composables/context.mjs';
 import '@aws-amplify/ui-react-core';
+import './components/StorageBrowser/useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
-export { componentsDefault } from './components/StorageBrowser/components/defaults.mjs';
-export { default as createStorageBrowser } from './components/StorageBrowser/createStorageBrowser/createStorageBrowser.mjs';
+import './components/StorageBrowser/credentials/context.mjs';
+import './components/StorageBrowser/configuration/context.mjs';
 import './components/StorageBrowser/displayText/context.mjs';
 export { DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT as DefaultStorageBrowserDisplayText } from './components/StorageBrowser/displayText/libraries/en/default.mjs';
+import './components/StorageBrowser/filePreview/context.mjs';
+export { componentsDefault } from './components/StorageBrowser/components/defaults.mjs';
+export { default as createStorageBrowser } from './components/StorageBrowser/createStorageBrowser/createStorageBrowser.mjs';

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

@@ -6,7 +6,16 @@ import '../components/elements/IconElement.mjs';
 import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } 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';
 
 const Fallback = () => (React__default.createElement("div", { className: STORAGE_BROWSER_BLOCK_TO_BE_UPDATED },
     React__default.createElement("div", { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__error-boundary` }, "Something went wrong.")));

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

@@ -7,6 +7,15 @@ import './elements/definitions.mjs';
 import './elements/IconElement.mjs';
 import '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react-core';
+import '../useAction/context.mjs';
+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';
 
 function ComponentsProvider(props) {
     const { children, composables } = props;

package/dist/esm/components/StorageBrowser/components/base/Table.mjs

@@ -7,7 +7,7 @@ import { STORAGE_BROWSER_BLOCK } from './constants.mjs';
 const Table = ({ headers, rows }) => {
     return (React__default.createElement(TableElement, { className: `${STORAGE_BROWSER_BLOCK}__table` },
         React__default.createElement(TableHeadElement, { className: `${STORAGE_BROWSER_BLOCK}__table-head` }, headers.length ? (React__default.createElement(TableRowElement, { className: `${STORAGE_BROWSER_BLOCK}__table-row` }, headers.map(({ key, content }) => (React__default.createElement(TableHeaderElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-header` }, content))))) : null),
-        React__default.createElement(TableBodyElement, { className: `${STORAGE_BROWSER_BLOCK}__table-body` }, rows?.map(({ key, content }) => (React__default.createElement(TableRowElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-row` }, content.map(({ key, content, type }) => {
+        React__default.createElement(TableBodyElement, { className: `${STORAGE_BROWSER_BLOCK}__table-body` }, rows?.map(({ key, content, active }) => (React__default.createElement(TableRowElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-row${active ? ` ${STORAGE_BROWSER_BLOCK}__table-row_active` : ''}` }, content.map(({ key, content, type }) => {
             return type === 'header' ? (React__default.createElement(TableHeaderElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-header`, role: "rowheader" }, content)) : (React__default.createElement(TableDataCellElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-data-cell` }, content));
         })))))));
 };

package/dist/esm/components/StorageBrowser/components/base/preview/DownloadButton.mjs

@@ -0,0 +1,39 @@
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import React__default, { useMemo, useCallback } from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../../elements/definitions.mjs';
+import { IconElement } from '../../elements/IconElement.mjs';
+import { getFileName } from '../../../views/utils/files/fileName.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/ui';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../actions/configs/defaults.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+
+const DownloadButton = ({ fileKey }) => {
+    const [{ isProcessing: downloadPending }, handleDownload] = useAction('download');
+    const fileName = useMemo(() => getFileName(fileKey), [fileKey]);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { downloadButtonLabel }, } = displayText;
+    const handleDownloadClick = useCallback(() => {
+        handleDownload({
+            data: {
+                fileKey: fileName,
+                key: fileKey,
+                id: crypto.randomUUID(),
+            },
+        });
+    }, [fileName, fileKey, handleDownload]);
+    return (React__default.createElement(ButtonElement, { ['aria-label']: `Download ${fileName} file`, className: `${STORAGE_BROWSER_BLOCK}__download-button`, onClick: handleDownloadClick, disabled: downloadPending, variant: "primary" },
+        downloadPending ? (React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK}__download-button_icon`, variant: "action-progress" })) : null,
+        downloadButtonLabel));
+};
+
+export { DownloadButton };

package/dist/esm/components/StorageBrowser/components/base/preview/FileMetadata.mjs

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement, HeadingElement, TextElement } from '../../elements/definitions.mjs';
+import '../../elements/IconElement.mjs';
+import { getFileExtension } from '../../../views/utils/files/fileType.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import { humanFileSize } from '@aws-amplify/ui';
+
+const NONE = 'None';
+function FileMetadata({ fileData, }) {
+    const { key, lastModified, versionId = NONE, size, eTag } = fileData;
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { keyLabel, sizeLabel, versionIdLabel, lastModifiedLabel, entityTagLabel, typeLabel, fileInformationTitle, unknownValue, }, } = displayText;
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-section` },
+        React__default.createElement(HeadingElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-title` }, fileInformationTitle),
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-metadata` }, [
+            { label: keyLabel, value: key },
+            {
+                label: sizeLabel,
+                value: humanFileSize(size, true),
+            },
+            { label: versionIdLabel, value: versionId },
+            {
+                label: lastModifiedLabel,
+                value: lastModified?.toLocaleString() || unknownValue,
+            },
+            { label: entityTagLabel, value: eTag },
+            {
+                label: typeLabel,
+                value: getFileExtension(key) ?? NONE,
+            },
+        ].map(({ label, value }) => (React__default.createElement(ViewElement, { key: label, className: `${STORAGE_BROWSER_BLOCK}__file-metadata-item` },
+            React__default.createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__file-metadata-label` },
+                label,
+                ":"),
+            React__default.createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__file-metadata-value` }, value)))))));
+}
+
+export { FileMetadata };

package/dist/esm/components/StorageBrowser/components/base/preview/FilePreviewLayout.mjs

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement, HeadingElement } from '../../elements/definitions.mjs';
+import '../../elements/IconElement.mjs';
+import { FileMetadata } from './FileMetadata.mjs';
+
+function FilePreviewLayout({ fileData, children, }) {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { filePreviewTitle }, } = displayText;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-section` },
+            React__default.createElement(HeadingElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-title` }, filePreviewTitle),
+            React__default.createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__file-preview-content` }, children)),
+        React__default.createElement(FileMetadata, { fileData: fileData })));
+}
+
+export { FilePreviewLayout };

package/dist/esm/components/StorageBrowser/components/base/preview/ImagePreview.mjs

@@ -0,0 +1,37 @@
+import React__default, { useState, useCallback } from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import { PreviewPlaceholder } from './PreviewPlaceholder.mjs';
+import { PreviewFallback } from './PreviewFallback.mjs';
+import { getFileName } from '../../../views/utils/files/fileName.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+
+function ImagePreview({ url, fileKey, }) {
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [imageKey, setImageKey] = useState(0);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { imageLoadErrorDescription }, } = displayText;
+    const handleError = useCallback(() => {
+        setError('Failed to load image');
+        setIsLoading(false);
+    }, []);
+    const handleLoad = useCallback(() => {
+        setIsLoading(false);
+        setError(null);
+    }, []);
+    const handleRetry = useCallback(() => {
+        setError(null);
+        setIsLoading(true);
+        setImageKey((prev) => prev + 1);
+    }, []);
+    if (error) {
+        return (React__default.createElement(PreviewFallback, { fileKey: fileKey, message: error, description: imageLoadErrorDescription, isError: true, onRetry: handleRetry, showRetry: true }));
+    }
+    return (React__default.createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__image-container` },
+        isLoading && React__default.createElement(PreviewPlaceholder, null),
+        React__default.createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__image-preview`, style: { display: isLoading ? 'none' : 'flex' } },
+            React__default.createElement("img", { key: imageKey, className: classNames(ComponentClassName.StorageImage), src: url, alt: `Image preview for ${getFileName(fileKey)}`, onError: handleError, onLoad: handleLoad }))));
+}
+
+export { ImagePreview };

package/dist/esm/components/StorageBrowser/components/base/preview/PreviewFallback.mjs

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import { DownloadButton } from './DownloadButton.mjs';
+import { classNames } from '@aws-amplify/ui';
+import '@aws-amplify/ui-react';
+import { ViewElement, TextElement, ButtonElement } from '../../elements/definitions.mjs';
+import { IconElement } from '../../elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import { getFileName } from '../../../views/utils/files/fileName.mjs';
+import { getFileThumbnail } from '../../../views/LocationDetailView/getLocationDetailViewTableData/fileIcon.mjs';
+
+function PreviewFallback({ fileKey, message, description, isError = false, onRetry, showRetry = false, }) {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { errorDescription, unsupportedFileDescription, filePrefix, retryButtonLabel, }, } = displayText;
+    const fileName = getFileName(fileKey);
+    const fallbackClass = isError
+        ? `${STORAGE_BROWSER_BLOCK}__preview-fallback--error`
+        : `${STORAGE_BROWSER_BLOCK}__preview-fallback--default`;
+    return (React__default.createElement(ViewElement, { className: classNames(`${STORAGE_BROWSER_BLOCK}__preview-fallback`, fallbackClass) },
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-icon` },
+            React__default.createElement(IconElement, { className: "amplify-icon", variant: isError ? 'error' : getFileThumbnail(fileKey) })),
+        React__default.createElement(ViewElement, null,
+            React__default.createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-title` }, message),
+            React__default.createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-description` }, description ??
+                (isError ? errorDescription : unsupportedFileDescription)),
+            React__default.createElement(TextElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-filename` },
+                filePrefix,
+                fileName)),
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-fallback-actions` },
+            showRetry && onRetry && (React__default.createElement(ButtonElement, { variant: "primary", onClick: onRetry, ['aria-label']: `Retry loading ${fileName} file` }, retryButtonLabel)),
+            React__default.createElement(DownloadButton, { fileKey: fileKey }))));
+}
+
+export { PreviewFallback };

package/dist/esm/components/StorageBrowser/components/base/preview/PreviewPlaceholder.mjs

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { Placeholder } from '@aws-amplify/ui-react';
+import { ViewElement } from '../../elements/definitions.mjs';
+import '../../elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+function PreviewPlaceholder() {
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-placeholder` },
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__preview-placeholder-content` },
+            React__default.createElement(Placeholder, { width: "100%", height: "400px" }))));
+}
+
+export { PreviewPlaceholder };

package/dist/esm/components/StorageBrowser/components/base/preview/TextPreview.mjs

@@ -0,0 +1,64 @@
+import React__default, { useState, useCallback, useEffect } from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../elements/definitions.mjs';
+import '../../elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import { PreviewFallback } from './PreviewFallback.mjs';
+import { PreviewPlaceholder } from './PreviewPlaceholder.mjs';
+
+function TextPreview({ url, fileKey, }) {
+    const [content, setContent] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [retryCount, setRetryCount] = useState(0);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { emptyFileMessage, textLoadErrorDescription }, } = displayText;
+    const handleRetry = useCallback(() => {
+        setRetryCount((prev) => prev + 1);
+    }, []);
+    useEffect(() => {
+        if (!url)
+            return;
+        const controller = new AbortController();
+        async function loadTextFileContent() {
+            try {
+                setIsLoading(true);
+                setError(null);
+                const response = await fetch(url, {
+                    signal: controller.signal,
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch file: ${response.statusText}`);
+                }
+                const textContent = await response.text();
+                setContent(textContent);
+            }
+            catch (err) {
+                if (err instanceof Error && err.name !== 'AbortError') {
+                    const errorMessage = err.message || 'Failed to load file';
+                    setError(errorMessage);
+                }
+            }
+            finally {
+                if (!controller.signal.aborted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+        loadTextFileContent();
+        return () => {
+            controller.abort();
+        };
+    }, [url, fileKey, retryCount]);
+    if (isLoading) {
+        return React__default.createElement(PreviewPlaceholder, null);
+    }
+    if (error) {
+        return (React__default.createElement(PreviewFallback, { fileKey: fileKey, message: error, description: textLoadErrorDescription, isError: true, onRetry: handleRetry, showRetry: true }));
+    }
+    return (React__default.createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__text-container` },
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__text-preview` }, content || emptyFileMessage)));
+}
+
+export { TextPreview };

package/dist/esm/components/StorageBrowser/components/base/preview/VideoPreview.mjs

@@ -0,0 +1,61 @@
+import React__default, { useState, useCallback } from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import { PreviewPlaceholder } from './PreviewPlaceholder.mjs';
+import { PreviewFallback } from './PreviewFallback.mjs';
+import { getFileName } from '../../../views/utils/files/fileName.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+
+function VideoPreview({ url, fileKey, }) {
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [videoKey, setVideoKey] = useState(0);
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { videoLoadErrorDescription }, } = displayText;
+    const handleError = useCallback((event) => {
+        const videoElement = event.currentTarget;
+        const errorCode = videoElement.error?.code;
+        let errorMessage = 'Failed to load video';
+        switch (errorCode) {
+            case MediaError.MEDIA_ERR_ABORTED:
+                errorMessage = 'Video loading was aborted';
+                break;
+            case MediaError.MEDIA_ERR_NETWORK:
+                errorMessage = 'Network error occurred while loading video';
+                break;
+            case MediaError.MEDIA_ERR_DECODE:
+                errorMessage = 'Video format is not supported or corrupted';
+                break;
+            case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+                errorMessage = 'Video format is not supported';
+                break;
+            default:
+                errorMessage = 'An unknown error occurred while loading video';
+        }
+        setError(errorMessage);
+        setIsLoading(false);
+    }, []);
+    const handleLoadStart = useCallback(() => {
+        setIsLoading(true);
+        setError(null);
+    }, []);
+    const handleLoadedData = useCallback(() => {
+        setIsLoading(false);
+        setError(null);
+    }, []);
+    const handleRetry = useCallback(() => {
+        setError(null);
+        setIsLoading(true);
+        setVideoKey((prev) => prev + 1);
+    }, []);
+    if (error) {
+        return (React__default.createElement(PreviewFallback, { fileKey: fileKey, message: error, description: videoLoadErrorDescription, isError: true, onRetry: handleRetry, showRetry: true }));
+    }
+    return (React__default.createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__video-container` },
+        isLoading && React__default.createElement(PreviewPlaceholder, null),
+        React__default.createElement("div", { className: `${STORAGE_BROWSER_BLOCK}__video-preview`, style: { display: isLoading ? 'none' : 'flex' } },
+            React__default.createElement("video", { key: videoKey, controls: true, preload: "metadata", onError: handleError, onLoadStart: handleLoadStart, onLoadedData: handleLoadedData, "aria-label": `Video preview for ${getFileName(fileKey)}` },
+                React__default.createElement("source", { src: url }),
+                "Your browser does not support the video tag."))));
+}
+
+export { VideoPreview };

package/dist/esm/components/StorageBrowser/components/composables/DataTable/DataTable.mjs

@@ -39,8 +39,9 @@ const DataTable = ({ headers, isLoading, rows, }) => {
     });
     const mappedRows = isLoading
         ? []
-        : rows.map(({ key, content }) => ({
+        : rows.map(({ key, content, active }) => ({
             key,
+            active,
             content: content.map(({ key, content, type }) => {
                 switch (type) {
                     case 'button': {

package/dist/esm/components/StorageBrowser/components/composables/FilePreview.mjs

@@ -0,0 +1,85 @@
+import React__default from 'react';
+import { ImagePreview } from '../base/preview/ImagePreview.mjs';
+import { useFilePreviewContext } from '../../filePreview/context.mjs';
+import { VideoPreview } from '../base/preview/VideoPreview.mjs';
+import { TextPreview } from '../base/preview/TextPreview.mjs';
+import { PreviewFallback } from '../base/preview/PreviewFallback.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement, ButtonElement } from '../elements/definitions.mjs';
+import { IconElement } from '../elements/IconElement.mjs';
+import { PreviewPlaceholder } from '../base/preview/PreviewPlaceholder.mjs';
+import '@aws-amplify/ui';
+import { STORAGE_BROWSER_BLOCK } from '../base/constants.mjs';
+import { useDisplayText } from '../../displayText/context.mjs';
+import { FilePreviewLayout } from '../base/preview/FilePreviewLayout.mjs';
+import { DownloadButton } from '../base/preview/DownloadButton.mjs';
+
+const rendererMap = {
+    image: ImagePreview,
+    video: VideoPreview,
+    text: TextPreview,
+};
+const DefaultRenderer = ({ url, type, fileKey }) => {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { unsupportedFileDescription, unsupportedFileMessage }, } = displayText;
+    if (type && type in rendererMap) {
+        const PreviewComponent = rendererMap[type];
+        return React__default.createElement(PreviewComponent, { fileKey: fileKey, url: url });
+    }
+    return (React__default.createElement(PreviewFallback, { fileKey: fileKey, message: unsupportedFileMessage, description: unsupportedFileDescription }));
+};
+const ResolvedRenderer = ({ fileKey, url, fileData }) => {
+    const { rendererResolver } = (useFilePreviewContext() ?? {}) || {};
+    if (rendererResolver && fileData.fileType) {
+        const CustomRenderer = rendererResolver(fileData.fileType);
+        if (CustomRenderer) {
+            return React__default.createElement(CustomRenderer, { url: url, fileData: fileData });
+        }
+    }
+    return (React__default.createElement(DefaultRenderer, { fileKey: fileKey, url: url, type: fileData.fileType }));
+};
+const FilePreviewContent = ({ filePreview, activeFile, onRetryFilePreview, onSelectActiveFile, activeFileHasNext, activeFileHasPrev, }) => {
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { errorMessage, sizeLimitMessage, generalPreviewErrorDescription, fileSizeLimitDescription, }, } = displayText;
+    const { key } = activeFile;
+    if (filePreview.isLoading) {
+        return (React__default.createElement(FilePreviewLayout, { fileData: activeFile },
+            React__default.createElement(PreviewPlaceholder, null)));
+    }
+    if (!filePreview.ok) {
+        if (filePreview.error === 'LIMIT_EXCEEDED') {
+            return (React__default.createElement(FilePreviewLayout, { fileData: activeFile },
+                React__default.createElement(PreviewFallback, { fileKey: key, message: sizeLimitMessage, description: fileSizeLimitDescription })));
+        }
+        return (React__default.createElement(FilePreviewLayout, { fileData: activeFile },
+            React__default.createElement(PreviewFallback, { fileKey: key, message: errorMessage, description: generalPreviewErrorDescription, isError: true, onRetry: onRetryFilePreview, showRetry: true })));
+    }
+    return (React__default.createElement(FilePreviewLayout, { fileData: filePreview.fileData },
+        React__default.createElement(ResolvedRenderer, { fileKey: key, url: filePreview.url, fileData: filePreview.fileData }),
+        React__default.createElement("div", { style: { display: 'flex', flexFlow: 'row nowrap' } },
+            React__default.createElement(ButtonElement, { disabled: !activeFileHasPrev, onClick: () => onSelectActiveFile('prev'), variant: 'paginate-previous' },
+                React__default.createElement(IconElement, { variant: 'paginate-previous' })),
+            React__default.createElement(DownloadButton, { fileKey: key }),
+            React__default.createElement(ButtonElement, { disabled: !activeFileHasNext, onClick: () => onSelectActiveFile('next'), variant: 'paginate-next' },
+                React__default.createElement(IconElement, { variant: 'paginate-next' })))));
+};
+function FilePreview(props) {
+    const { filePreview, activeFileHasNext, activeFileHasPrev, onRetryFilePreview = () => undefined, activeFile, onSelectActiveFile = () => undefined, } = props;
+    const { LocationDetailView: displayText } = useDisplayText();
+    const { filePreview: { closeButtonLabel }, } = displayText;
+    if (!activeFile || !filePreview) {
+        return null;
+    }
+    if (!filePreview.enabled) {
+        return null;
+    }
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview` },
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-header` },
+            React__default.createElement(ButtonElement, { variant: "exit", onClick: () => onSelectActiveFile(undefined) },
+                React__default.createElement(IconElement, { variant: "dismiss" }),
+                closeButtonLabel)),
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__file-preview-container` },
+            React__default.createElement(FilePreviewContent, { filePreview: filePreview, activeFile: activeFile, activeFileHasNext: activeFileHasNext, activeFileHasPrev: activeFileHasPrev, onRetryFilePreview: onRetryFilePreview, onSelectActiveFile: onSelectActiveFile }))));
+}
+
+export { FilePreview };

package/dist/esm/components/StorageBrowser/components/composables/defaults.mjs

@@ -12,6 +12,7 @@ import { FolderNameField } from './FolderNameField.mjs';
 import { LoadingIndicator } from './LoadingIndicator.mjs';
 import { Message } from './Message.mjs';
 import { Navigation } from './Navigation.mjs';
+import { FilePreview } from './FilePreview.mjs';
 import { OverwriteToggle } from './OverwriteToggle.mjs';
 import { Pagination } from './Pagination.mjs';
 import { SearchField } from './SearchField.mjs';
@@ -40,6 +41,7 @@ const DEFAULT_COMPOSABLES = {
     SearchField,
     StatusDisplay,
     Title,
+    FilePreview,
 };
 
 export { DEFAULT_COMPOSABLES };

package/dist/esm/components/StorageBrowser/components/elements/definitions.mjs

@@ -21,7 +21,7 @@ const NavElement = defineBaseElement({
     type: 'nav',
     displayName: 'Nav',
 });
-defineBaseElement({
+const TextElement = defineBaseElement({
     type: 'p',
     displayName: 'Text',
 });
@@ -83,4 +83,4 @@ const SpanElement = defineBaseElement({
     displayName: 'Span',
 });
 
-export { ButtonElement, DescriptionDetailsElement, DescriptionListElement, DescriptionTermElement, HeadingElement, InputElement, LabelElement, ListItemElement, NavElement, OrderedListElement, SpanElement, TableBodyElement, TableDataCellElement, TableElement, TableHeadElement, TableHeaderElement, TableRowElement, ViewElement };
+export { ButtonElement, DescriptionDetailsElement, DescriptionListElement, DescriptionTermElement, HeadingElement, InputElement, LabelElement, ListItemElement, NavElement, OrderedListElement, SpanElement, TableBodyElement, TableDataCellElement, TableElement, TableHeadElement, TableHeaderElement, TableRowElement, TextElement, ViewElement };

package/dist/esm/components/StorageBrowser/controls/DataTableControl.mjs

@@ -6,7 +6,16 @@ import '../components/elements/IconElement.mjs';
 import '../components/composables/context.mjs';
 import { DataTable } from '../components/composables/DataTable/DataTable.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 { useDataTable } from './hooks/useDataTable.mjs';
 import { useResolvedComposable } from './hooks/useResolvedComposable.mjs';
 

package/dist/esm/components/StorageBrowser/controls/FilePreviewControl.mjs

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { useResolvedComposable } from './hooks/useResolvedComposable.mjs';
+import { FilePreview } from '../components/composables/FilePreview.mjs';
+import { useControlsContext } from './context.mjs';
+
+function FilePreviewControl() {
+    const { data, onRetryFilePreview, onSelectActiveFile } = useControlsContext();
+    const { filePreviewState, activeFile, activeFileHasNext, activeFileHasPrev } = data;
+    const props = {
+        filePreview: filePreviewState,
+        activeFile,
+        activeFileHasNext,
+        activeFileHasPrev,
+        onRetryFilePreview,
+        onSelectActiveFile,
+    };
+    const Resolved = useResolvedComposable(FilePreview, 'FilePreview');
+    if (!activeFile) {
+        return null;
+    }
+    return React__default.createElement(Resolved, { ...props });
+}
+
+export { FilePreviewControl };

package/dist/esm/components/StorageBrowser/createStorageBrowser/StorageBrowserDefault.mjs

@@ -20,6 +20,7 @@ import '../views/context/actionViews.mjs';
 import '../views/LocationActionView/UploadView/UploadView.mjs';
 import '../fileItems/context.mjs';
 import '../views/LocationDetailView/LocationDetailView.mjs';
+import '../filePreview/context.mjs';
 import '../views/LocationsView/LocationsView.mjs';
 
 /**

package/dist/esm/components/StorageBrowser/createStorageBrowser/createProvider.mjs

@@ -17,6 +17,7 @@ import '../configuration/context.mjs';
 import { DisplayTextProvider } from '../displayText/context.mjs';
 import { FileItemsProvider } from '../fileItems/context.mjs';
 import { defaultValidateFile } from '../fileItems/utils.mjs';
+import { FilePreviewProvider } from '../filePreview/context.mjs';
 import { LocationItemsProvider } from '../locationItems/context.mjs';
 import { StoreProvider } from '../store/context.mjs';
 import { ActionHandlersProvider } from '../useAction/context.mjs';
@@ -32,7 +33,7 @@ import '../views/LocationActionView/UploadView/UploadView.mjs';
 import '../views/LocationDetailView/LocationDetailView.mjs';
 import '../views/LocationsView/LocationsView.mjs';
 
-function createProvider({ actions, components, config, options, }) {
+function createProvider({ actions, components, config, options, filePreview = {}, }) {
     const { accountId, customEndpoint, registerAuthListener, getLocationCredentials, region, listLocations, } = config;
     const resolvedActions = {
         default: {
@@ -75,7 +76,8 @@ function createProvider({ actions, components, config, options, }) {
                             React__default.createElement(ViewsProvider, { actions: resolvedActions, views: views },
                                 React__default.createElement(ComponentsProvider, { composables: composables },
                                     React__default.createElement(LocationItemsProvider, null,
-                                        React__default.createElement(FileItemsProvider, { validateFile: validateFile }, children))))))))));
+                                        React__default.createElement(FileItemsProvider, { validateFile: validateFile },
+                                            React__default.createElement(FilePreviewProvider, { filePreview: filePreview }, children)))))))))));
     }
     return Provider;
 }

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

@@ -25,6 +25,7 @@ import { LocationActionView } from '../views/LocationActionView/LocationActionVi
 import { UploadView } from '../views/LocationActionView/UploadView/UploadView.mjs';
 import '../fileItems/context.mjs';
 import { LocationDetailView } from '../views/LocationDetailView/LocationDetailView.mjs';
+import '../filePreview/context.mjs';
 import { LocationsView } from '../views/LocationsView/LocationsView.mjs';
 import { useView } from '../views/useView.mjs';
 import createProvider from './createProvider.mjs';

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

@@ -28,6 +28,10 @@ function resolveDisplayText(displayText) {
         LocationDetailView: {
             ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView,
             ...LocationDetailView,
+            filePreview: {
+                ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView.filePreview,
+                ...(LocationDetailView?.filePreview ?? {}),
+            },
         },
         LocationsView: {
             ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationsView,