@aws-amplify/ui-react-storage 0.0.0-studio-e5b8195-20230912200241 → 0.0.0-test-delay-3b0be8c-20250107175849

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

@@ -0,0 +1,76 @@
+import { getHeaders } from './getHeaders.mjs';
+
+const getLocationsViewTableData = ({ displayText, pageItems, onNavigate, onDownload, }) => {
+    const { tableColumnActionsHeader, tableColumnBucketHeader, tableColumnFolderHeader, tableColumnPermissionsHeader, getDownloadLabel, getPermissionName, } = displayText;
+    const headers = getHeaders({
+        hasObjectLocations: pageItems.some(({ type }) => type === 'OBJECT'),
+        tableColumnActionsHeader,
+        tableColumnBucketHeader,
+        tableColumnFolderHeader,
+        tableColumnPermissionsHeader,
+    });
+    const rows = pageItems.map((location) => {
+        const { bucket, id, permissions, prefix } = location;
+        return {
+            key: id,
+            content: headers.map(({ key: columnKey }) => {
+                const key = `${columnKey}-${id}`;
+                switch (columnKey) {
+                    case 'bucket': {
+                        return { key, type: 'text', content: { text: bucket } };
+                    }
+                    case 'folder': {
+                        return location.type === 'OBJECT'
+                            ? {
+                                key,
+                                type: 'text',
+                                content: {
+                                    text: prefix,
+                                },
+                            }
+                            : {
+                                key,
+                                type: 'button',
+                                content: {
+                                    label: prefix || bucket,
+                                    onClick: () => {
+                                        onNavigate(location);
+                                    },
+                                },
+                            };
+                    }
+                    case 'permission': {
+                        return {
+                            key,
+                            type: 'text',
+                            content: { text: getPermissionName(permissions) },
+                        };
+                    }
+                    case 'action': {
+                        return location.type === 'OBJECT' &&
+                            location.permissions.includes('get')
+                            ? {
+                                key,
+                                type: 'button',
+                                content: {
+                                    icon: 'download',
+                                    ariaLabel: getDownloadLabel(location.prefix),
+                                    onClick: () => {
+                                        onDownload(location);
+                                    },
+                                },
+                            }
+                            : {
+                                key,
+                                type: 'text',
+                                content: { text: '' },
+                            };
+                    }
+                }
+            }),
+        };
+    });
+    return { headers, rows };
+};
+
+export { getLocationsViewTableData };

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

@@ -0,0 +1,115 @@
+import React__default from 'react';
+import '../../providers/store/location/context.mjs';
+import '../../providers/store/files/context.mjs';
+import '../../providers/store/actionType/context.mjs';
+import '../../providers/store/locationItems/context.mjs';
+import { useStore } from '../../providers/store/useStore.mjs';
+import '../../useAction/context.mjs';
+import { useAction } from '../../useAction/useAction.mjs';
+import { useList } from '../../useAction/useList.mjs';
+import '@aws-amplify/ui';
+import '@aws-amplify/storage/internals';
+import { getFileKey } from '../../actions/handlers/utils.mjs';
+import 'aws-amplify/storage';
+import '../../actions/configs/context.mjs';
+import { usePaginate } from '../hooks/usePaginate.mjs';
+import { useSearch } from '../hooks/useSearch.mjs';
+
+const DEFAULT_EXCLUDE = {
+    exactPermissions: ['delete', 'write'],
+};
+const DEFAULT_PAGE_SIZE = 100;
+const DEFAULT_LIST_OPTIONS = {
+    exclude: DEFAULT_EXCLUDE,
+    pageSize: DEFAULT_PAGE_SIZE,
+};
+const useLocationsView = (options) => {
+    const handleDownload = useAction('download')[1];
+    const [state, handleList] = useList('locations');
+    const dispatchStoreAction = useStore()[1];
+    const { data, message, hasError, isLoading } = state;
+    const { items, nextToken, search } = data;
+    const hasNextToken = !!nextToken;
+    const { hasExhaustedSearch = false } = search ?? {};
+    const onNavigate = options?.onNavigate;
+    const initialValues = options?.initialValues ?? {};
+    const listOptionsRef = React__default.useRef({
+        ...DEFAULT_LIST_OPTIONS,
+        ...initialValues,
+    });
+    const listOptions = listOptionsRef.current;
+    // initial load
+    React__default.useEffect(() => {
+        handleList({ options: { ...listOptions, refresh: true } });
+    }, [handleList, listOptions]);
+    // set up pagination
+    const paginateCallback = () => {
+        if (!nextToken)
+            return;
+        handleList({ options: { ...listOptions, nextToken } });
+    };
+    const { currentPage, onPaginate, handleReset, highestPageVisited, pageItems, } = usePaginate({
+        items,
+        paginateCallback,
+        pageSize: listOptions.pageSize,
+        hasNextToken,
+    });
+    const onSearch = (query) => {
+        handleReset();
+        handleList({
+            options: {
+                ...listOptions,
+                search: {
+                    query,
+                    filterBy: (location) => {
+                        return location.prefix ? 'prefix' : 'bucket';
+                    },
+                },
+            },
+        });
+    };
+    const { searchQuery, onSearchQueryChange, onSearchSubmit, resetSearch } = useSearch({ onSearch });
+    return {
+        isLoading,
+        hasError,
+        message,
+        page: currentPage,
+        hasNextPage: hasNextToken,
+        highestPageVisited,
+        pageItems,
+        searchQuery,
+        hasExhaustedSearch,
+        onDownload: (location) => {
+            const { prefix: key } = location;
+            handleDownload({
+                data: {
+                    fileKey: getFileKey(key),
+                    key,
+                    id: crypto.randomUUID(),
+                },
+                location,
+            });
+        },
+        onNavigate: (location) => {
+            onNavigate?.(location);
+            dispatchStoreAction({ type: 'NAVIGATE', location });
+        },
+        onRefresh: () => {
+            resetSearch();
+            handleReset();
+            handleList({ options: { ...listOptions, refresh: true } });
+        },
+        onPaginate,
+        onSearch: onSearchSubmit,
+        onSearchQueryChange,
+        onSearchClear: () => {
+            resetSearch();
+            handleReset();
+            handleList({
+                options: { ...listOptions, refresh: true },
+            });
+        },
+    };
+};
+
+export { DEFAULT_LIST_OPTIONS, useLocationsView };

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

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import { UploadView } from '../LocationActionView/UploadView/UploadView.mjs';
+import '@aws-amplify/ui';
+import '../../providers/store/location/context.mjs';
+import '../../providers/store/files/context.mjs';
+import '../../providers/store/actionType/context.mjs';
+import '../../providers/store/locationItems/context.mjs';
+import '../../useAction/context.mjs';
+import '../../providers/configuration/context.mjs';
+import '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react-core/elements';
+import '../../providers/configuration/credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../actions/configs/context.mjs';
+import { CreateFolderView } from '../LocationActionView/CreateFolderView/CreateFolderView.mjs';
+import { CopyView } from '../LocationActionView/CopyView/CopyView.mjs';
+import { DeleteView } from '../LocationActionView/DeleteView/DeleteView.mjs';
+
+const DEFAULT_ACTION_VIEWS = {
+    createFolder: CreateFolderView,
+    copy: CopyView,
+    delete: DeleteView,
+    upload: UploadView,
+};
+const ActionViewsContext = React__default.createContext({
+    action: DEFAULT_ACTION_VIEWS,
+});
+function useActionViews() {
+    return React__default.useContext(ActionViewsContext);
+}
+
+export { ActionViewsContext, DEFAULT_ACTION_VIEWS, useActionViews };

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

@@ -0,0 +1,32 @@
+import { capitalize, isObject, isFunction } from '@aws-amplify/ui';
+import { DEFAULT_ACTION_VIEWS } from './actionViews.mjs';
+import { DEFAULT_PRIMARY_VIEWS } from './primaryViews.mjs';
+
+const getViews = (views, customConfigs) => {
+    const resolvedDefaultActionViews = Object.entries(DEFAULT_ACTION_VIEWS).reduce((output, [actionName, component]) => {
+        // use viewName to lookup overrides for default action views
+        const viewName = capitalize(`${actionName}View`);
+        return {
+            ...output,
+            [actionName]: (views?.[viewName] ?? component),
+        };
+    }, {});
+    const customActionViews = !isObject(customConfigs)
+        ? {}
+        : Object.entries(customConfigs).reduce((acc, [key, config]) => {
+            // ignore custom actions that are only handlers
+            return !isObject(config) || isFunction(config)
+                ? acc
+                : { ...acc, [key]: views?.[config.viewName] };
+        }, {});
+    return {
+        action: { ...resolvedDefaultActionViews, ...customActionViews },
+        primary: {
+            LocationActionView: views?.LocationActionView ?? DEFAULT_PRIMARY_VIEWS.LocationActionView,
+            LocationDetailView: views?.LocationDetailView ?? DEFAULT_PRIMARY_VIEWS.LocationDetailView,
+            LocationsView: views?.LocationsView ?? DEFAULT_PRIMARY_VIEWS.LocationsView,
+        },
+    };
+};
+
+export { getViews };

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

@@ -0,0 +1,32 @@
+import React__default from 'react';
+import '../LocationActionView/CopyView/CopyView.mjs';
+import '@aws-amplify/ui';
+import '../../providers/store/location/context.mjs';
+import '../../providers/store/files/context.mjs';
+import '../../providers/store/actionType/context.mjs';
+import '../../providers/store/locationItems/context.mjs';
+import '../../useAction/context.mjs';
+import '../../providers/configuration/context.mjs';
+import '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react-core/elements';
+import '../../providers/configuration/credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../actions/configs/context.mjs';
+import '../LocationActionView/CreateFolderView/CreateFolderView.mjs';
+import '../LocationActionView/DeleteView/DeleteView.mjs';
+import { LocationActionView } from '../LocationActionView/LocationActionView.mjs';
+import '../LocationActionView/UploadView/UploadView.mjs';
+import { LocationDetailView } from '../LocationDetailView/LocationDetailView.mjs';
+import { LocationsView } from '../LocationsView/LocationsView.mjs';
+
+const DEFAULT_PRIMARY_VIEWS = {
+    LocationActionView: LocationActionView,
+    LocationDetailView: LocationDetailView,
+    LocationsView: LocationsView,
+};
+const PrimaryViewsContext = React__default.createContext({
+    primary: DEFAULT_PRIMARY_VIEWS,
+});
+
+export { DEFAULT_PRIMARY_VIEWS, PrimaryViewsContext };

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

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { getViews } from './getViews.mjs';
+import { ActionViewsContext } from './actionViews.mjs';
+import { PrimaryViewsContext } from './primaryViews.mjs';
+
+function ViewsProvider({ children, views, actions, }) {
+    const { custom } = actions ?? {};
+    const value = React__default.useMemo(() => getViews(views, custom), [custom, views]);
+    return (React__default.createElement(PrimaryViewsContext.Provider, { value: value },
+        React__default.createElement(ActionViewsContext.Provider, { value: value }, children)));
+}
+function useViews() {
+    return {
+        primary: React__default.useContext(PrimaryViewsContext).primary,
+        action: React__default.useContext(ActionViewsContext).action,
+    };
+}
+
+export { ViewsProvider, useViews };

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

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { isFunction } from '@aws-amplify/ui';
+
+const usePaginate = ({ hasNextToken, items, paginateCallback, pageSize, }) => {
+    const [currentPage, setCurrentPage] = React__default.useState(1);
+    const handleReset = React__default.useRef(() => {
+        setCurrentPage(1);
+    }).current;
+    return React__default.useMemo(() => {
+        const resultCount = Array.isArray(items) ? items.length : 0;
+        const highestPageVisited = Math.ceil(resultCount / pageSize);
+        const isFirstPage = currentPage === 1;
+        const start = isFirstPage ? 0 : (currentPage - 1) * pageSize;
+        const end = isFirstPage ? pageSize : currentPage * pageSize;
+        const pageItems = Array.isArray(items) ? items.slice(start, end) : [];
+        return {
+            currentPage,
+            onPaginate: (page) => {
+                const shouldPaginate = page >= 1 && (page <= highestPageVisited || hasNextToken);
+                if (shouldPaginate) {
+                    if (isFunction(paginateCallback))
+                        paginateCallback();
+                    setCurrentPage(page);
+                }
+            },
+            handleReset,
+            highestPageVisited,
+            pageItems,
+        };
+    }, [
+        currentPage,
+        handleReset,
+        hasNextToken,
+        items,
+        paginateCallback,
+        pageSize,
+    ]);
+};
+
+export { usePaginate };

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+
+function useSearch(props) {
+    const { onSearch } = props;
+    const [searchQuery, setQuery] = React__default.useState('');
+    const [isSearchingSubfolders, setIsSearchingSubfolders] = React__default.useState(false);
+    const resetSearch = () => {
+        setQuery('');
+        setIsSearchingSubfolders(false);
+    };
+    return {
+        searchQuery,
+        isSearchingSubfolders,
+        onSearchQueryChange: (value) => {
+            setQuery(value);
+        },
+        onToggleSearchSubfolders: () => {
+            setIsSearchingSubfolders((prev) => !prev);
+        },
+        onSearchSubmit: () => {
+            onSearch?.(searchQuery, isSearchingSubfolders);
+        },
+        resetSearch,
+    };
+}
+
+export { useSearch };

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

@@ -0,0 +1,38 @@
+import './LocationActionView/CopyView/CopyView.mjs';
+import { useCopyView } from './LocationActionView/CopyView/useCopyView.mjs';
+import './LocationActionView/CreateFolderView/CreateFolderView.mjs';
+import { useCreateFolderView } from './LocationActionView/CreateFolderView/useCreateFolderView.mjs';
+import './LocationActionView/DeleteView/DeleteView.mjs';
+import { useDeleteView } from './LocationActionView/DeleteView/useDeleteView.mjs';
+import 'react';
+import '../providers/store/location/context.mjs';
+import '../providers/store/files/context.mjs';
+import '../providers/store/actionType/context.mjs';
+import '../providers/store/locationItems/context.mjs';
+import './context/actionViews.mjs';
+import './LocationActionView/UploadView/UploadView.mjs';
+import { useUploadView } from './LocationActionView/UploadView/useUploadView.mjs';
+import '@aws-amplify/ui';
+import './LocationsView/LocationsView.mjs';
+import { useLocationsView } from './LocationsView/useLocationsView.mjs';
+import './LocationDetailView/LocationDetailView.mjs';
+import { useLocationDetailView } from './LocationDetailView/useLocationDetailView.mjs';
+
+const USE_VIEW_HOOKS = {
+    Copy: useCopyView,
+    CreateFolder: useCreateFolderView,
+    Delete: useDeleteView,
+    LocationDetail: useLocationDetailView,
+    Locations: useLocationsView,
+    Upload: useUploadView,
+};
+const isUseViewType = (value) => !!USE_VIEW_HOOKS?.[value];
+// @ts-expect-error
+const useView = (type) => {
+    if (!isUseViewType(type)) {
+        throw new Error(`Value of \`${type}\` cannot be used to index \`useView\``);
+    }
+    return USE_VIEW_HOOKS[type]();
+};
+
+export { useView };

package/dist/esm/components/StorageImage/StorageImage.mjs

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { Image } from '@aws-amplify/ui-react';
+import { useDeprecationWarning } from '@aws-amplify/ui-react/internal';
+import { useSetUserAgent, useGetUrl } from '@aws-amplify/ui-react-core';
+import { VERSION } from '../../version.mjs';
+
+const MISSING_REQUIRED_PROP_MESSAGE = '`StorageImage` requires either an `imgKey` or `path` prop.';
+const HAS_DEPRECATED_PROPS_MESSAGE = '`imgKey`, `accessLevel`, and `identityId` will be replaced with `path` in a future major version. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props';
+const HAS_PATH_AND_KEY_MESSAGE = '`imgKey` is ignored when both `imgKey` and `path` props are provided.';
+const HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE = '`accessLevel` and `identityId` are ignored when the `path` prop is provided.';
+const getDeprecationMessage = ({ hasImgkey, hasPath, hasDeprecatedOptions, }) => {
+    let message = '';
+    if (hasPath && hasImgkey) {
+        message = HAS_PATH_AND_KEY_MESSAGE;
+    }
+    else if (hasPath && hasDeprecatedOptions) {
+        message = HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE;
+    }
+    else if (hasImgkey) {
+        message = HAS_DEPRECATED_PROPS_MESSAGE;
+    }
+    return message;
+};
+const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, path, onStorageGetError, onGetUrlError, validateObjectExistence = true, ...rest }) => {
+    const hasImgkey = !!imgKey;
+    const hasPath = !!path;
+    const hasDeprecatedOptions = !!accessLevel || !!identityId;
+    const message = getDeprecationMessage({
+        hasDeprecatedOptions,
+        hasImgkey,
+        hasPath,
+    });
+    useDeprecationWarning({ message, shouldWarn: !!message });
+    if (!hasImgkey && !hasPath) {
+        throw new Error(MISSING_REQUIRED_PROP_MESSAGE);
+    }
+    useSetUserAgent({
+        componentName: 'StorageImage',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    const onError = onGetUrlError ?? onStorageGetError;
+    const input = React.useMemo(() => ({
+        ...(path ? { path } : { key: imgKey }),
+        onError,
+        options: {
+            accessLevel,
+            targetIdentityId: identityId,
+            validateObjectExistence,
+        },
+    }), [accessLevel, imgKey, identityId, onError, path, validateObjectExistence]);
+    const { url } = useGetUrl(input);
+    return (React.createElement(Image, { ...rest, className: classNames(ComponentClassName.StorageImage, className), src: url?.toString() ?? fallbackSrc }));
+};
+
+export { HAS_DEPRECATED_PROPS_MESSAGE, HAS_PATH_AND_KEY_MESSAGE, HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE, MISSING_REQUIRED_PROP_MESSAGE, StorageImage };

package/dist/esm/components/StorageManager/StorageManager.mjs

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { getLogger, ComponentClassName } from '@aws-amplify/ui';
+import { VisuallyHidden } from '@aws-amplify/ui-react';
+import { useDeprecationWarning, useDropZone, useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { useFileUploader } from '../FileUploader/hooks/useFileUploader/useFileUploader.mjs';
+import { useUploadFiles } from '../FileUploader/hooks/useUploadFiles/useUploadFiles.mjs';
+import { FileStatus } from '../FileUploader/types.mjs';
+import { Container } from './ui/Container/Container.mjs';
+import { DropZone } from './ui/DropZone/DropZone.mjs';
+import { FileList } from './ui/FileList/FileList.mjs';
+import { FileListHeader } from './ui/FileListHeader/FileListHeader.mjs';
+import { FileListFooter } from './ui/FileListFooter/FileListFooter.mjs';
+import { FilePicker } from './ui/FilePicker/FilePicker.mjs';
+import { checkMaxFileSize } from '../FileUploader/utils/checkMaxFileSize.mjs';
+import { defaultFileUploaderDisplayText } from '../FileUploader/utils/displayText.mjs';
+import { filterAllowedFiles } from '../FileUploader/utils/filterAllowedFiles.mjs';
+import 'aws-amplify/auth';
+import 'aws-amplify/storage';
+import { VERSION } from '../../version.mjs';
+
+const logger = getLogger('Storage');
+const MISSING_REQUIRED_PROPS_MESSAGE = '`StorageManager` requires a `maxFileCount` prop to be provided.';
+const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE = '`StorageManager` does not allow usage of a `path` callback prop with an `accessLevel` prop.';
+const ACCESS_LEVEL_DEPRECATION_MESSAGE = '`accessLevel` has been deprecated and will be removed in a future major version. See migration notes at https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager';
+const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFileTypes = [], accessLevel, autoUpload = true, components, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onFileRemove, onUploadError, onUploadStart, onUploadSuccess, path, processFile, showThumbnails = true, useAccelerateEndpoint, }, ref) {
+    useDeprecationWarning({
+        message: 'The `StorageManager` component has been renamed as the `FileUploader` component.',
+        shouldWarn: false,
+    });
+    if (!maxFileCount) {
+        // eslint-disable-next-line no-console
+        console.warn(MISSING_REQUIRED_PROPS_MESSAGE);
+    }
+    if (accessLevel && typeof path === 'function') {
+        throw new Error(ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE);
+    }
+    useDeprecationWarning({
+        message: ACCESS_LEVEL_DEPRECATION_MESSAGE,
+        shouldWarn: !!accessLevel,
+    });
+    const Components = {
+        Container,
+        DropZone,
+        FileList,
+        FilePicker,
+        FileListHeader,
+        FileListFooter,
+        ...components,
+    };
+    const allowMultipleFiles = maxFileCount === undefined ||
+        (typeof maxFileCount === 'number' && maxFileCount > 1);
+    const displayText = {
+        ...defaultFileUploaderDisplayText,
+        ...overrideDisplayText,
+    };
+    const { getFileSizeErrorText } = displayText;
+    const getMaxFileSizeErrorMessage = (file) => {
+        return checkMaxFileSize({
+            file,
+            maxFileSize,
+            getFileSizeErrorText,
+        });
+    };
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useFileUploader(defaultFiles);
+    React.useImperativeHandle(ref, () => ({ clearFiles }));
+    const { dragState, ...dropZoneProps } = useDropZone({
+        acceptedFileTypes,
+        onDropComplete: ({ acceptedFiles, rejectedFiles }) => {
+            if (rejectedFiles && rejectedFiles.length > 0) {
+                logger.warn('Rejected files: ', rejectedFiles);
+            }
+            // We need to filter out files by extension here,
+            // we don't get filenames on the drag event, only on drop
+            const _acceptedFiles = filterAllowedFiles(acceptedFiles, acceptedFileTypes);
+            addFiles({
+                files: _acceptedFiles,
+                status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+                getFileErrorMessage: getMaxFileSizeErrorMessage,
+            });
+        },
+    });
+    useUploadFiles({
+        accessLevel,
+        files,
+        isResumable,
+        maxFileCount,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        setUploadingFile,
+        setUploadProgress,
+        setUploadSuccess,
+        processFile,
+        path,
+        useAccelerateEndpoint,
+    });
+    const onFilePickerChange = (event) => {
+        const { files } = event.target;
+        if (!files || files.length === 0) {
+            return;
+        }
+        addFiles({
+            files: Array.from(files),
+            status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+            getFileErrorMessage: getMaxFileSizeErrorMessage,
+        });
+    };
+    const onClearAll = () => {
+        clearFiles();
+    };
+    const onUploadAll = () => {
+        queueFiles();
+    };
+    const onPauseUpload = ({ id, uploadTask }) => {
+        uploadTask.pause();
+        setUploadPaused({ id });
+    };
+    const onResumeUpload = ({ id, uploadTask }) => {
+        uploadTask.resume();
+        setUploadResumed({ id });
+    };
+    const onCancelUpload = ({ id, uploadTask }) => {
+        // At this time we don't know if the delete
+        // permissions are enabled (required to cancel upload),
+        // so we do a pause instead and remove from files
+        uploadTask.pause();
+        removeUpload({ id });
+    };
+    const onDeleteUpload = ({ id }) => {
+        // At this time we don't know if the delete
+        // permissions are enabled, so we do a soft delete
+        // from file list, but don't remove from storage
+        removeUpload({ id });
+        if (typeof onFileRemove === 'function') {
+            const file = files.find((file) => file.id === id);
+            if (file) {
+                const key = file.resolvedKey ?? file.key;
+                onFileRemove({ key });
+            }
+        }
+    };
+    // checks if all downloads completed to 100%
+    const allUploadsSuccessful = files.length === 0
+        ? false
+        : files.every((file) => file?.status === FileStatus.UPLOADED);
+    // Displays if over max files
+    const hasMaxFilesError = files.filter((file) => file.progress < 100).length > maxFileCount;
+    const uploadedFilesLength = files.filter((file) => file?.status === FileStatus.UPLOADED).length;
+    const remainingFilesCount = files.length - uploadedFilesLength;
+    // number of files selected for upload when autoUpload is turned off
+    const selectedFilesCount = autoUpload ? 0 : remainingFilesCount;
+    const hasFiles = files.length > 0;
+    const hasUploadActions = !autoUpload && remainingFilesCount > 0;
+    const hiddenInput = React.useRef(null);
+    function handleClick() {
+        if (hiddenInput.current) {
+            hiddenInput.current.click();
+            hiddenInput.current.value = '';
+        }
+    }
+    useSetUserAgent({
+        componentName: 'StorageManager',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    return (React.createElement(Components.Container, { className: `${ComponentClassName.StorageManager} ${hasFiles ? ComponentClassName.StorageManagerPreviewer : ''}` },
+        React.createElement(Components.DropZone, { inDropZone: dragState !== 'inactive', ...dropZoneProps, displayText: displayText },
+            React.createElement(React.Fragment, null,
+                React.createElement(Components.FilePicker, { onClick: handleClick }, displayText.browseFilesText),
+                React.createElement(VisuallyHidden, null,
+                    React.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: onFilePickerChange, multiple: allowMultipleFiles, accept: acceptedFileTypes.join(',') })))),
+        hasFiles ? (React.createElement(Components.FileListHeader, { allUploadsSuccessful: allUploadsSuccessful, displayText: displayText, fileCount: files.length, remainingFilesCount: remainingFilesCount, selectedFilesCount: selectedFilesCount })) : null,
+        React.createElement(Components.FileList, { displayText: displayText, files: files, isResumable: isResumable, onCancelUpload: onCancelUpload, onDeleteUpload: onDeleteUpload, onResume: onResumeUpload, onPause: onPauseUpload, showThumbnails: showThumbnails, hasMaxFilesError: hasMaxFilesError, maxFileCount: maxFileCount }),
+        hasUploadActions ? (React.createElement(Components.FileListFooter, { displayText: displayText, remainingFilesCount: remainingFilesCount, onClearAll: onClearAll, onUploadAll: onUploadAll })) : null));
+});
+// pass an empty object as first param to avoid destructive action on `StorageManagerBase`
+const StorageManager = Object.assign({}, StorageManagerBase, {
+    Container,
+    DropZone,
+    FileList,
+    FileListHeader,
+    FileListFooter,
+    FilePicker,
+});
+
+export { ACCESS_LEVEL_DEPRECATION_MESSAGE, ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE, MISSING_REQUIRED_PROPS_MESSAGE, StorageManager };

package/dist/esm/components/StorageManager/ui/Container/Container.mjs

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { View } from '@aws-amplify/ui-react';
+
+function Container({ children, className, }) {
+    return React__default.createElement(View, { className: className }, children);
+}
+
+export { Container };