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

package/dist/esm/components/StorageBrowser/views/hooks/useFilePreview/useFilePreview.mjs

@@ -0,0 +1,115 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { determineFileType } from '../../utils/files/fileType.mjs';
+import { useFilePreviewContext } from '../../../filePreview/context.mjs';
+import { useGetActionInput } from '../../../configuration/context.mjs';
+import { resolveUrlOptions } from '../../utils/files/url.mjs';
+import { resolveMaxFileSize } from '../../utils/files/fileSize.mjs';
+import { safeGetProperties } from '../../utils/files/safeGetProperties.mjs';
+import { getUrl } from '@aws-amplify/storage/internals';
+import { constructBucket } from '../../../actions/handlers/utils.mjs';
+import '@aws-amplify/ui';
+import 'aws-amplify/storage';
+import { useStore } from '../../../store/context.mjs';
+
+function useFilePreview({ activeFile, }) {
+    const filePreviewContext = useFilePreviewContext();
+    const [enabled, setEnabled] = useState(true);
+    const getConfig = useGetActionInput();
+    const [{ location }] = useStore();
+    const [filePreviewContent, setFilePreviewContent] = useState({ isLoading: true });
+    const { fileTypeResolver, urlOptions, maxFileSize } = (filePreviewContext ?? {}) || {};
+    const getFilePreview = useCallback(async () => {
+        if (!activeFile || !activeFile?.key || !location.current) {
+            setEnabled(false);
+            return;
+        }
+        const config = getConfig(location.current);
+        const { accountId, customEndpoint, credentials } = config;
+        const sharedOptions = {
+            bucket: constructBucket(config),
+            expectedBucketOwner: accountId,
+        };
+        try {
+            setEnabled(true);
+            setFilePreviewContent({
+                isLoading: true,
+            });
+            const properties = await safeGetProperties({
+                path: activeFile.key,
+                options: sharedOptions,
+            });
+            const enrichedFile = {
+                ...activeFile,
+                ...properties,
+            };
+            const fileType = determineFileType({
+                fileData: enrichedFile,
+                fileTypeResolver,
+            });
+            const finalFile = {
+                ...enrichedFile,
+                fileType,
+            };
+            const sizeLimit = resolveMaxFileSize(maxFileSize, fileType);
+            const isLimitExceeded = ((finalFile.size || activeFile?.size) ?? 0) > sizeLimit;
+            if (isLimitExceeded) {
+                setFilePreviewContent({
+                    ok: false,
+                    isLoading: false,
+                    error: 'LIMIT_EXCEEDED',
+                });
+                return;
+            }
+            const { url } = await getUrl({
+                path: finalFile.key,
+                options: {
+                    customEndpoint,
+                    locationCredentialsProvider: credentials,
+                    contentDisposition: 'attachment',
+                    ...sharedOptions,
+                    ...resolveUrlOptions(urlOptions, fileType),
+                },
+            });
+            setFilePreviewContent({
+                ok: true,
+                isLoading: false,
+                fileData: finalFile,
+                url: url.toString(),
+            });
+        }
+        catch (error) {
+            setFilePreviewContent({
+                isLoading: false,
+                ok: false,
+                error: 'GENERIC_ERROR',
+            });
+        }
+    }, [
+        location,
+        getConfig,
+        fileTypeResolver,
+        maxFileSize,
+        urlOptions,
+        activeFile,
+    ]);
+    useEffect(() => {
+        getFilePreview();
+    }, [getFilePreview, activeFile]);
+    return useMemo(() => {
+        if (filePreviewContext === false || !enabled) {
+            return {
+                optout: filePreviewContext === false,
+                enabled: false,
+                handleRetry: () => undefined,
+            };
+        }
+        return {
+            optout: false,
+            enabled: true,
+            handleRetry: () => getFilePreview(),
+            ...filePreviewContent,
+        };
+    }, [getFilePreview, filePreviewContext, filePreviewContent, enabled]);
+}
+
+export { useFilePreview };

package/dist/esm/components/StorageBrowser/views/utils/files/const.mjs

@@ -0,0 +1,62 @@
+const DEFAULT_URL_OPTIONS = {
+    expiresIn: 7200,
+    validateObjectExistence: true,
+};
+const DEFAULT_FILE_SIZE_LIMIT = 200 * 1024 * 1024; // 200MB
+const DEFAULT_FILE_SIZE_LIMITS = {
+    image: 200 * 1024 * 1024,
+    video: 2 * 1024 * 1024 * 1024,
+    text: 10 * 1024 * 1024, // 10MB
+};
+const GENERIC_CONTENT_TYPES = new Set([
+    'application/octet-stream',
+    'binary/octet-stream',
+    'application/unknown',
+    'unknown/unknown',
+    'application/force-download',
+    'application/download',
+    'application/x-download',
+    'application/binary',
+]);
+const EXTENSION_MAPPINGS = {
+    // Images
+    jpg: 'image',
+    jpeg: 'image',
+    png: 'image',
+    gif: 'image',
+    webp: 'image',
+    svg: 'image',
+    bmp: 'image',
+    tiff: 'image',
+    tif: 'image',
+    ico: 'image',
+    heic: 'image',
+    heif: 'image',
+    avif: 'image',
+    // Videos
+    mp4: 'video',
+    avi: 'video',
+    mov: 'video',
+    wmv: 'video',
+    flv: 'video',
+    webm: 'video',
+    mkv: 'video',
+    m4v: 'video',
+    mpg: 'video',
+    mpeg: 'video',
+    '3gp': 'video',
+    ogv: 'video',
+    // Plain text files only
+    txt: 'text',
+    csv: 'text',
+    log: 'text',
+    json: 'text',
+    xml: 'text',
+    yaml: 'text',
+    yml: 'text',
+    ini: 'text',
+    conf: 'text',
+    cfg: 'text',
+};
+
+export { DEFAULT_FILE_SIZE_LIMIT, DEFAULT_FILE_SIZE_LIMITS, DEFAULT_URL_OPTIONS, EXTENSION_MAPPINGS, GENERIC_CONTENT_TYPES };

package/dist/esm/components/StorageBrowser/views/utils/files/fileName.mjs

@@ -0,0 +1,12 @@
+/**
+ * Extracts the filename from a file key path
+ * @param fileKey - The full file key/path
+ * @returns The filename (last part after '/') or empty string if fileKey is null/undefined
+ */
+function getFileName(fileKey) {
+    if (!fileKey)
+        return '';
+    return fileKey.split('/').pop() ?? fileKey;
+}
+
+export { getFileName };

package/dist/esm/components/StorageBrowser/views/utils/files/fileSize.mjs

@@ -0,0 +1,23 @@
+import { DEFAULT_FILE_SIZE_LIMITS, DEFAULT_FILE_SIZE_LIMIT } from './const.mjs';
+
+function resolveMaxFileSize(maxFileSize, fileType) {
+    if (typeof maxFileSize === 'number') {
+        return maxFileSize;
+    }
+    if (typeof maxFileSize === 'function' && fileType) {
+        try {
+            const result = maxFileSize(fileType);
+            if (typeof result === 'number') {
+                return result;
+            }
+        }
+        catch (error) {
+            //
+        }
+    }
+    return fileType
+        ? DEFAULT_FILE_SIZE_LIMITS[fileType] || DEFAULT_FILE_SIZE_LIMIT
+        : DEFAULT_FILE_SIZE_LIMIT;
+}
+
+export { resolveMaxFileSize };

package/dist/esm/components/StorageBrowser/views/utils/files/fileType.mjs

@@ -0,0 +1,87 @@
+import { GENERIC_CONTENT_TYPES, EXTENSION_MAPPINGS } from './const.mjs';
+
+function isGenericContentType(contentType) {
+    if (!contentType || typeof contentType !== 'string') {
+        return true;
+    }
+    const normalizedContentType = contentType.toLowerCase().trim();
+    return GENERIC_CONTENT_TYPES.has(normalizedContentType);
+}
+function isTextBasedApplicationType(contentType) {
+    if (contentType === 'application/json' ||
+        (contentType.startsWith('application/') && contentType.includes('+json'))) {
+        return true;
+    }
+    if (contentType === 'application/xml' ||
+        (contentType.startsWith('application/') && contentType.includes('+xml'))) {
+        return true;
+    }
+    const textBasedTypes = [
+        'application/csv',
+        'application/yaml',
+        'application/toml',
+    ];
+    return textBasedTypes.includes(contentType);
+}
+function getFileTypeFromContentType(contentType) {
+    if (!contentType || typeof contentType !== 'string') {
+        return null;
+    }
+    const normalizedContentType = contentType.toLowerCase().trim().split(';')[0];
+    if (normalizedContentType.startsWith('image/')) {
+        return 'image';
+    }
+    if (normalizedContentType.startsWith('video/')) {
+        return 'video';
+    }
+    if (normalizedContentType.startsWith('text/') ||
+        isTextBasedApplicationType(normalizedContentType)) {
+        return 'text';
+    }
+    return null;
+}
+function getFileExtension(key) {
+    if (!key || typeof key !== 'string') {
+        return null;
+    }
+    const lastDotIndex = key.lastIndexOf('.');
+    if (lastDotIndex === -1 || lastDotIndex === key.length - 1) {
+        return null;
+    }
+    return key.slice(lastDotIndex + 1).toLowerCase();
+}
+function getFileTypeFromExtension(extension) {
+    if (!extension || typeof extension !== 'string') {
+        return null;
+    }
+    const normalizedExtension = extension.toLowerCase().trim();
+    return EXTENSION_MAPPINGS[normalizedExtension] || null;
+}
+function determineFileType(options) {
+    const { fileData, fileTypeResolver } = options;
+    const { contentType, key } = fileData ?? {};
+    if (typeof fileTypeResolver === 'function') {
+        try {
+            const customResult = fileTypeResolver(fileData);
+            if (customResult !== undefined && customResult !== null) {
+                return customResult;
+            }
+        }
+        catch (error) {
+            //
+        }
+    }
+    if (!isGenericContentType(contentType)) {
+        const typeFromContentType = getFileTypeFromContentType(contentType);
+        if (typeFromContentType) {
+            return typeFromContentType;
+        }
+    }
+    const extension = getFileExtension(key);
+    if (extension) {
+        return getFileTypeFromExtension(extension);
+    }
+    return null;
+}
+
+export { determineFileType, getFileExtension, getFileTypeFromContentType, getFileTypeFromExtension, isGenericContentType };

package/dist/esm/components/StorageBrowser/views/utils/files/safeGetProperties.mjs

@@ -0,0 +1,12 @@
+import { getProperties } from 'aws-amplify/storage';
+
+async function safeGetProperties(params) {
+    try {
+        return await getProperties(params);
+    }
+    catch (error) {
+        return {};
+    }
+}
+
+export { safeGetProperties };

package/dist/esm/components/StorageBrowser/views/utils/files/url.mjs

@@ -0,0 +1,16 @@
+import { DEFAULT_URL_OPTIONS } from './const.mjs';
+
+function resolveUrlOptions(options, fileType) {
+    if (!options) {
+        return DEFAULT_URL_OPTIONS;
+    }
+    if (typeof options === 'function' && fileType) {
+        return options(fileType) ?? DEFAULT_URL_OPTIONS;
+    }
+    return {
+        ...DEFAULT_URL_OPTIONS,
+        ...options,
+    };
+}
+
+export { resolveUrlOptions };

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.12.2';
+const VERSION = '3.13.0';
 
 export { VERSION };

package/dist/index.js

@@ -9,7 +9,7 @@ var uiReactCore = require('@aws-amplify/ui-react-core');
 var auth = require('aws-amplify/auth');
 var storage = require('aws-amplify/storage');
 var internal = require('@aws-amplify/ui-react/internal');
-var createStorageBrowser = require('./createStorageBrowser-pzJe4BD8.js');
+var createStorageBrowser = require('./createStorageBrowser-BazPNsU_.js');
 require('@aws-amplify/storage/internals');
 require('aws-amplify');
 require('aws-amplify/utils');

package/dist/styles.css

@@ -5668,6 +5668,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
   background-color: var(--amplify-components-table-row-striped-background-color);
 }
+.amplify-table--striped .amplify-table__row.amplify-storage-browser__table-row_active:nth-child(odd) {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
@@ -6686,6 +6689,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   box-shadow: var(--amplify-shadows-small);
   z-index: 2;
 }
+.amplify-storage-browser__table-row_active {
+  background-color: var(--amplify-colors-background-info);
+}
 .amplify-storage-browser__table-header {
   border: none;
   padding: var(--amplify-space-xxxs);
@@ -6768,7 +6774,251 @@ html[dir=rtl] .amplify-field-group__inner-start {
   top: 0;
   z-index: 3;
 }
+.amplify-storage-browser__content-with-preview {
+  display: flex;
+  height: 100%;
+}
+.amplify-storage-browser__file-preview {
+  overflow: auto;
+  flex: 1;
+  width: 50%;
+  position: sticky;
+  top: 10px;
+  bottom: 10px;
+  height: -moz-fit-content;
+  height: fit-content;
+  max-height: calc(100svh - 20px);
+  padding: var(--amplify-space-medium);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
+  border-radius: var(--amplify-radii-small);
+  margin-inline-start: var(--amplify-space-large);
+  padding-block-end: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-header {
+  margin-block-end: var(--amplify-space-medium);
+  display: flex;
+  justify-content: flex-end;
+}
+.amplify-storage-browser__file-preview-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+}
+.amplify-storage-browser__file-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amplify-space-large);
+  align-items: center;
+}
+.amplify-storage-browser__file-preview-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+  flex: 1;
+}
+.amplify-storage-browser__file-preview-title {
+  margin-block-end: var(--amplify-space-medium);
+  color: var(--amplify-colors-font-primary);
+  font-size: var(--amplify-font-sizes-large);
+  font-weight: var(--amplify-font-weights-semibold);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__file-metadata {
+  display: grid;
+  gap: var(--amplify-space-small);
+  background-color: var(--amplify-colors-background-secondary);
+  padding: var(--amplify-space-medium);
+  border-radius: var(--amplify-radii-small);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--amplify-space-xs);
+  border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__file-metadata-item:last-child {
+  border-block-end: none;
+}
+.amplify-storage-browser__file-metadata-label {
+  font-weight: var(--amplify-font-weights-medium);
+  color: var(--amplify-colors-font-primary);
+  margin: 0;
+}
+.amplify-storage-browser__file-metadata-value {
+  color: var(--amplify-colors-font-secondary);
+  margin: 0;
+  word-break: break-all;
+  text-align: end;
+  max-width: 60%;
+}
+.amplify-storage-browser__preview-fallback {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) dashed var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-large);
+  text-align: center;
+}
+.amplify-storage-browser__preview-fallback--error {
+  color: var(--amplify-colors-font-error);
+  background-color: var(--amplify-colors-background-error);
+  border-color: var(--amplify-colors-border-error);
+}
+.amplify-storage-browser__preview-fallback--default {
+  color: var(--amplify-colors-font-secondary);
+  background-color: var(--amplify-colors-background-secondary);
+  border-color: var(--amplify-colors-border-secondary);
+}
+.amplify-storage-browser__preview-fallback-icon {
+  font-size: var(--amplify-font-sizes-xxxxl);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-title {
+  font-weight: var(--amplify-font-weights-bold);
+  font-size: var(--amplify-font-sizes-large);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-description {
+  font-size: var(--amplify-font-sizes-small);
+  margin-block-end: var(--amplify-space-xs);
+}
+.amplify-storage-browser__preview-fallback-filename {
+  font-size: var(--amplify-font-sizes-xs);
+  font-family: var(--amplify-fonts-monospace), monospace;
+}
+.amplify-storage-browser__preview-fallback-actions {
+  display: flex;
+  gap: var(--amplify-space-small);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.amplify-storage-browser__preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--amplify-space-medium);
+  height: 400px;
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--amplify-space-small);
+  width: 100%;
+}
+.amplify-storage-browser__preview-placeholder-info {
+  color: var(--amplify-colors-font-secondary);
+  font-size: var(--amplify-font-sizes-small);
+  text-align: center;
+}
+.amplify-storage-browser__text-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__text-preview {
+  height: 400px;
+  width: 100%;
+  display: block;
+  background-color: var(--amplify-colors-background-secondary);
+  border: var(--amplify-border-widths-small) solid var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  padding: var(--amplify-space-medium);
+  font-family: var(--amplify-fonts-monospace), monospace;
+  font-size: var(--amplify-font-sizes-small);
+  line-height: 1.5;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.amplify-storage-browser__video-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__video-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 400px;
+  border-radius: var(--amplify-radii-small);
+  background-color: var(--amplify-colors-background-secondary);
+  flex-shrink: 0;
+}
+.amplify-storage-browser__video-preview video {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.amplify-storage-browser__image-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  align-items: center;
+}
+.amplify-storage-browser__image-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  width: 100%;
+  background-color: var(--amplify-colors-background-secondary);
+  border-radius: var(--amplify-radii-small);
+  flex-shrink: 0;
+  flex-flow: column nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__image-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+  border-radius: var(--amplify-radii-small);
+}
+.amplify-storage-browser__download-button {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+.amplify-storage-browser__download-button_icon {
+  animation-delay: 0s;
+  animation-direction: normal;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: spin;
+}
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .amplify-ai-conversation {
   display: flex;
   flex-direction: column;

package/dist/types/components/StorageBrowser/actions/configs/defaults.d.ts

@@ -12,8 +12,8 @@ export declare const defaultActionViewConfigs: {
     upload: UploadActionConfig;
 };
 export type DefaultActionViewType = keyof typeof defaultActionViewConfigs;
-export declare const DEFAULT_ACTION_VIEW_TYPES: ("upload" | "copy" | "delete" | "download" | "createFolder")[];
-export declare const isDefaultActionViewType: (value?: string) => value is "upload" | "copy" | "delete" | "download" | "createFolder";
+export declare const DEFAULT_ACTION_VIEW_TYPES: ("upload" | "copy" | "download" | "delete" | "createFolder")[];
+export declare const isDefaultActionViewType: (value?: string) => value is "upload" | "copy" | "download" | "delete" | "createFolder";
 export declare const defaultActionConfigs: {
     listLocationItems: import("../handlers").ListLocationItemsHandler;
     copy: CopyActionConfig;

package/dist/types/components/StorageBrowser/actions/handlers/types.d.ts

@@ -1,3 +1,4 @@
+import type { AllFileTypes } from '../../createStorageBrowser/types';
 import type { LocationCredentialsProvider } from '../../storage-internal';
 /**
  * `location` grant scope
@@ -44,6 +45,9 @@ export interface FileData {
     id: string;
     size: number;
     type: 'FILE';
+    contentType?: string;
+    fileType?: AllFileTypes | null;
+    versionId?: string;
 }
 export type LocationItemData = FileData | FolderData;
 export interface FileDataItem extends FileData, TaskData {

package/dist/types/components/StorageBrowser/components/base/Table.d.ts

@@ -6,6 +6,7 @@ interface TableItem {
 }
 interface TableRow {
     content: WithKey<TableItem>[];
+    active?: boolean;
 }
 interface TableProps {
     headers: WithKey<TableItem>[];

package/dist/types/components/StorageBrowser/components/base/preview/DownloadButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DownloadButton: React.FC<{
+    fileKey: string;
+}>;

package/dist/types/components/StorageBrowser/components/base/preview/FileMetadata.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FileData } from '../../../actions';
+interface FileMetadataProps {
+    fileData: FileData;
+}
+export declare function FileMetadata({ fileData, }: FileMetadataProps): React.JSX.Element;
+export {};

package/dist/types/components/StorageBrowser/components/base/preview/FilePreviewLayout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { FileData } from '../../../actions';
+interface FilePreviewLayoutProps {
+    fileData: FileData;
+    children: React.ReactNode;
+}
+export declare function FilePreviewLayout({ fileData, children, }: FilePreviewLayoutProps): React.JSX.Element;
+export {};

package/dist/types/components/StorageBrowser/components/base/preview/ImagePreview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { PreviewComponentProps } from './type';
+export declare function ImagePreview({ url, fileKey, }: PreviewComponentProps): React.JSX.Element;