@aws-amplify/ui-react-storage 3.3.10 → 3.4.1

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

@@ -0,0 +1,218 @@
+import React__default from 'react';
+import { isUndefined, isFunction } from '@aws-amplify/ui';
+import { useDataState } from '@aws-amplify/ui-react-core';
+import { usePaginate } from '../hooks/usePaginate.mjs';
+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 '../../actions/configs/context.mjs';
+import { defaultActionViewConfigs } from '../../actions/configs/defaults.mjs';
+import '@aws-amplify/storage/internals';
+import { downloadHandler } from '../../actions/handlers/download.mjs';
+import { listLocationItemsHandler } from '../../actions/handlers/listLocationItems.mjs';
+import 'aws-amplify/storage';
+import { createEnhancedListHandler } from '../../actions/useAction/createEnhancedListHandler.mjs';
+import { useGetActionInput } from '../../providers/configuration/context.mjs';
+import '@aws-amplify/ui-react-core/elements';
+import '../../providers/configuration/credentials/context.mjs';
+import { useSearch } from '../hooks/useSearch.mjs';
+import { useProcessTasks } from '../../tasks/useProcessTasks.mjs';
+
+const DEFAULT_PAGE_SIZE = 100;
+const DEFAULT_LIST_OPTIONS = {
+    delimiter: '/',
+    pageSize: DEFAULT_PAGE_SIZE,
+};
+const listLocationItemsAction = createEnhancedListHandler(listLocationItemsHandler);
+const getDownloadErrorMessageFromFailedDownloadTask = (tasks) => {
+    if (!tasks.length) {
+        return undefined;
+    }
+    return `Failed to download ${tasks[0].data.fileKey ?? tasks[0].data.key} due to error: ${tasks[0].message}.`;
+};
+const useLocationDetailView = (options) => {
+    const getConfig = useGetActionInput();
+    const { initialValues, onExit, onNavigate } = options ?? {};
+    const listOptionsRef = React__default.useRef({
+        ...DEFAULT_LIST_OPTIONS,
+        ...initialValues,
+    });
+    const listOptions = listOptionsRef.current;
+    const [{ location, locationItems }, dispatchStoreAction] = useStore();
+    const { current, key } = location;
+    const { permissions, prefix } = current ?? {};
+    const { fileDataItems } = locationItems;
+    const hasInvalidPrefix = isUndefined(prefix);
+    const [downloadTaskResult, handleDownload] = useProcessTasks(downloadHandler);
+    const [{ data, isLoading, hasError, message }, handleList] = useDataState(listLocationItemsAction, { items: [], nextToken: undefined });
+    // set up pagination
+    const { items, nextToken, search } = data;
+    const { hasExhaustedSearch = false } = search ?? {};
+    const hasNextToken = !!nextToken;
+    const paginateCallback = () => {
+        if (hasInvalidPrefix || !nextToken)
+            return;
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        handleList({
+            config: getConfig(),
+            prefix: key,
+            options: { ...listOptions, nextToken },
+        });
+    };
+    const { currentPage, onPaginate, handleReset, highestPageVisited, pageItems, } = usePaginate({
+        items,
+        paginateCallback,
+        pageSize: listOptions.pageSize,
+        hasNextToken,
+    });
+    const onSearch = (query, includeSubfolders) => {
+        if (hasInvalidPrefix)
+            return;
+        const searchOptions = {
+            ...listOptions,
+            delimiter: includeSubfolders ? undefined : listOptions.delimiter,
+            search: {
+                query,
+                filterBy: 'key',
+                groupBy: includeSubfolders ? listOptions.delimiter : undefined,
+            },
+        };
+        handleReset();
+        handleList({ config: getConfig(), prefix: key, options: searchOptions });
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+    };
+    const { searchQuery, isSearchingSubfolders, onSearchQueryChange, onSearchSubmit, onToggleSearchSubfolders, resetSearch, } = useSearch({ onSearch });
+    const onRefresh = () => {
+        if (hasInvalidPrefix)
+            return;
+        handleReset();
+        resetSearch();
+        handleList({
+            config: getConfig(),
+            prefix: key,
+            options: { ...listOptions, refresh: true },
+        });
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+    };
+    React__default.useEffect(() => {
+        if (hasInvalidPrefix)
+            return;
+        handleList({
+            config: getConfig(),
+            prefix: key,
+            options: { ...listOptions, refresh: true },
+        });
+        handleReset();
+    }, [
+        handleList,
+        handleReset,
+        listOptions,
+        hasInvalidPrefix,
+        getConfig,
+        prefix,
+        key,
+    ]);
+    // Logic for Select All Files functionality
+    const fileItems = React__default.useMemo(() => pageItems.filter((item) => item.type === 'FILE'), [pageItems]);
+    const areAllFilesSelected = fileDataItems?.length === fileItems.length;
+    const shouldShowEmptyMessage = pageItems.length === 0 && !isLoading && !hasError;
+    const actions = React__default.useMemo(() => {
+        if (!permissions) {
+            return [];
+        }
+        return Object.entries(defaultActionViewConfigs).map(([actionType, config]) => {
+            const { actionsListItemConfig } = config ?? {};
+            const { icon, hide, disable, label } = actionsListItemConfig ?? {};
+            return {
+                actionType,
+                icon,
+                isDisabled: isFunction(disable)
+                    ? disable(fileDataItems)
+                    : disable ?? false,
+                isHidden: isFunction(hide) ? hide(permissions) : hide,
+                label,
+            };
+        });
+    }, [fileDataItems, permissions]);
+    return {
+        actions,
+        page: currentPage,
+        pageItems,
+        location,
+        areAllFilesSelected,
+        fileDataItems,
+        hasFiles: fileItems.length > 0,
+        hasError,
+        hasDownloadError: downloadTaskResult.statusCounts.FAILED > 0,
+        hasNextPage: hasNextToken,
+        highestPageVisited,
+        message,
+        downloadErrorMessage: getDownloadErrorMessageFromFailedDownloadTask(downloadTaskResult.tasks),
+        shouldShowEmptyMessage,
+        isLoading,
+        isSearchingSubfolders,
+        onPaginate,
+        searchQuery,
+        hasExhaustedSearch,
+        onRefresh,
+        onNavigate: (location, path) => {
+            onNavigate?.(location, path);
+            resetSearch();
+            dispatchStoreAction({ type: 'NAVIGATE', location, path });
+            dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        },
+        onDropFiles: (files) => {
+            dispatchStoreAction({ type: 'ADD_FILE_ITEMS', files });
+            const actionType = 'upload';
+            dispatchStoreAction({ type: 'SET_ACTION_TYPE', actionType });
+            options?.onActionSelect?.(actionType);
+        },
+        onDownload: (data) => {
+            handleDownload({ config: getConfig(), data });
+        },
+        onNavigateHome: () => {
+            onExit?.();
+            dispatchStoreAction({ type: 'RESET_LOCATION' });
+            handleList({
+                config: getConfig(),
+                // @todo: prefix should not be required to refresh
+                prefix: prefix ?? '',
+                options: { reset: true },
+            });
+            dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+            dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        },
+        onActionSelect: (actionType) => {
+            options?.onActionSelect?.(actionType);
+            dispatchStoreAction({ type: 'SET_ACTION_TYPE', actionType });
+        },
+        onSelect: (isSelected, fileItem) => {
+            dispatchStoreAction(isSelected
+                ? { type: 'REMOVE_LOCATION_ITEM', id: fileItem.id }
+                : { type: 'SET_LOCATION_ITEMS', items: [fileItem] });
+        },
+        onSelectAll: () => {
+            dispatchStoreAction(areAllFilesSelected
+                ? { type: 'RESET_LOCATION_ITEMS' }
+                : { type: 'SET_LOCATION_ITEMS', items: fileItems });
+        },
+        onSearch: onSearchSubmit,
+        onSearchClear: () => {
+            resetSearch();
+            if (hasInvalidPrefix)
+                return;
+            handleList({
+                config: getConfig(),
+                prefix: key,
+                options: { ...listOptions, refresh: true },
+            });
+            handleReset();
+        },
+        onSearchQueryChange,
+        onToggleSearchSubfolders,
+    };
+};
+
+export { DEFAULT_LIST_OPTIONS, useLocationDetailView };

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

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../context/elements/definitions.mjs';
+import '../../context/elements/IconElement.mjs';
+import { DataRefreshControl } from '../../controls/DataRefreshControl.mjs';
+import { DataTableControl } from '../../controls/DataTableControl.mjs';
+import { LoadingIndicatorControl } from '../../controls/LoadingIndicatorControl.mjs';
+import { MessageControl } from '../../controls/MessageControl.mjs';
+import { PaginationControl } from '../../controls/PaginationControl.mjs';
+import { SearchControl } from '../../controls/SearchControl.mjs';
+import { TitleControl } from '../../controls/TitleControl.mjs';
+import { LocationsViewProvider } from './LocationsViewProvider.mjs';
+import { useLocationsView } from './useLocationsView.mjs';
+import { classNames } from '@aws-amplify/ui';
+
+const LocationsView = ({ className, ...props }) => {
+    const state = useLocationsView(props);
+    const { hasError } = state;
+    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className), "data-testid": "LOCATIONS_VIEW" },
+        React__default.createElement(LocationsViewProvider, { ...state },
+            React__default.createElement(TitleControl, null),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__controls` },
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search` },
+                    React__default.createElement(SearchControl, null)),
+                React__default.createElement(PaginationControl, null),
+                React__default.createElement(DataRefreshControl, null)),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                React__default.createElement(LoadingIndicatorControl, null),
+                hasError ? null : React__default.createElement(DataTableControl, null)),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+                React__default.createElement(MessageControl, null)))));
+};
+LocationsView.displayName = 'LocationsView';
+LocationsView.Provider = LocationsViewProvider;
+LocationsView.LoadingIndicator = LoadingIndicatorControl;
+LocationsView.LocationsTable = DataTableControl;
+LocationsView.Message = MessageControl;
+LocationsView.Pagination = PaginationControl;
+LocationsView.Refresh = DataRefreshControl;
+LocationsView.Search = SearchControl;
+LocationsView.Title = TitleControl;
+
+export { LocationsView };

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

@@ -0,0 +1,43 @@
+import React__default from 'react';
+import { ControlsContextProvider } from '../../controls/context.mjs';
+import { useDisplayText } from '../../displayText/context.mjs';
+import '@aws-amplify/ui';
+import { getLocationsViewTableData } from './getLocationsViewTableData/getLocationsViewTableData.mjs';
+
+function LocationsViewProvider({ children, ...props }) {
+    const { LocationsView: displayText } = useDisplayText();
+    const { loadingIndicatorLabel, title, searchPlaceholder, searchSubmitLabel, searchClearLabel, getListLocationsResultMessage, } = displayText;
+    const { hasError, hasNextPage, highestPageVisited, page, isLoading, searchQuery, hasExhaustedSearch, pageItems, message, onDownload, onRefresh, onPaginate, onNavigate, onSearch, onSearchQueryChange, onSearchClear, } = props;
+    const messageControlContent = getListLocationsResultMessage({
+        hasExhaustedSearch,
+        isLoading,
+        locations: pageItems,
+        hasError,
+        message,
+    });
+    return (React__default.createElement(ControlsContextProvider, { data: {
+            isDataRefreshDisabled: isLoading,
+            loadingIndicatorLabel,
+            tableData: getLocationsViewTableData({
+                displayText,
+                pageItems,
+                onDownload,
+                onNavigate,
+            }),
+            paginationData: {
+                page,
+                hasNextPage,
+                highestPageVisited,
+                onPaginate,
+            },
+            title,
+            searchPlaceholder,
+            searchClearLabel,
+            searchSubmitLabel,
+            searchQuery,
+            message: messageControlContent,
+            isLoading,
+        }, onSearch: onSearch, onRefresh: onRefresh, onSearchQueryChange: onSearchQueryChange, onSearchClear: onSearchClear }, children));
+}
+
+export { LocationsViewProvider };

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

@@ -0,0 +1,29 @@
+const getHeaders = ({ hasObjectLocations, tableColumnActionsHeader, tableColumnBucketHeader, tableColumnFolderHeader, tableColumnPermissionsHeader, }) => {
+    const headers = [
+        {
+            key: 'folder',
+            type: 'sort',
+            content: { label: tableColumnFolderHeader },
+        },
+        {
+            key: 'bucket',
+            type: 'sort',
+            content: { label: tableColumnBucketHeader },
+        },
+        {
+            key: 'permission',
+            type: 'sort',
+            content: { label: tableColumnPermissionsHeader },
+        },
+    ];
+    if (hasObjectLocations) {
+        headers.push({
+            key: 'action',
+            type: 'sort',
+            content: { label: tableColumnActionsHeader },
+        });
+    }
+    return headers;
+};
+
+export { getHeaders };

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,122 @@
+import React__default from 'react';
+import { usePaginate } from '../hooks/usePaginate.mjs';
+import '../../actions/configs/context.mjs';
+import '@aws-amplify/storage/internals';
+import { createFileDataItemFromLocation } from '../../actions/handlers/utils.mjs';
+import '@aws-amplify/ui';
+import { downloadHandler } from '../../actions/handlers/download.mjs';
+import 'aws-amplify/storage';
+import { useListLocations } from '../../actions/useAction/useListLocations.mjs';
+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 { useSearch } from '../hooks/useSearch.mjs';
+import { useGetActionInput } from '../../providers/configuration/context.mjs';
+import '@aws-amplify/ui-react-core/elements';
+import '../../providers/configuration/credentials/context.mjs';
+import { useProcessTasks } from '../../tasks/useProcessTasks.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 getConfig = useGetActionInput();
+    const [state, handleList] = useListLocations();
+    const { data, message, hasError, isLoading } = state;
+    const [_, handleDownload] = useProcessTasks(downloadHandler);
+    const [, dispatchStoreAction] = useStore();
+    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 });
+    const shouldShowEmptyMessage = pageItems.length === 0 && !isLoading && !hasError;
+    return {
+        isLoading,
+        hasError,
+        message,
+        page: currentPage,
+        hasNextPage: hasNextToken,
+        highestPageVisited,
+        pageItems,
+        shouldShowEmptyMessage,
+        searchQuery,
+        hasExhaustedSearch,
+        onDownload: (location) => {
+            handleDownload({
+                config: getConfig(location),
+                data: createFileDataItemFromLocation(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.mjs

@@ -0,0 +1,43 @@
+import React__default from 'react';
+import './LocationActionView/CopyView/CopyView.mjs';
+import '@aws-amplify/ui';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../providers/configuration/context.mjs';
+import '@aws-amplify/ui-react-core/elements';
+import '../actions/configs/context.mjs';
+import '@aws-amplify/ui-react-core';
+import '../providers/configuration/credentials/context.mjs';
+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 './LocationActionView/CreateFolderView/CreateFolderView.mjs';
+import './LocationActionView/DeleteView/DeleteView.mjs';
+import './LocationActionView/UploadView/UploadView.mjs';
+import { LocationActionView } from './LocationActionView/LocationActionView.mjs';
+import { LocationDetailView } from './LocationDetailView/LocationDetailView.mjs';
+import { LocationsView } from './LocationsView/LocationsView.mjs';
+
+const ERROR_MESSAGE = '`useViews` must be called from within a `ViewsProvider`';
+const ViewsContext = React__default.createContext(undefined);
+function ViewsProvider({ children, views, }) {
+    // destructure `views` to prevent extraneous rerender of components in the
+    // scenario of an unstable reference provided as `views`
+    const { LocationDetailView: LocationDetailView$1, LocationActionView: LocationActionView$1, LocationsView: LocationsView$1 } = views ?? {};
+    const value = React__default.useMemo(() => ({
+        LocationActionView: LocationActionView$1 ?? LocationActionView,
+        LocationDetailView: LocationDetailView$1 ?? LocationDetailView,
+        LocationsView: LocationsView$1 ?? LocationsView,
+    }), [LocationDetailView$1, LocationActionView$1, LocationsView$1]);
+    return (React__default.createElement(ViewsContext.Provider, { value: value }, children));
+}
+function useViews() {
+    const context = React__default.useContext(ViewsContext);
+    if (!context) {
+        throw new Error(ERROR_MESSAGE);
+    }
+    return context;
+}
+
+export { ViewsProvider, useViews };

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

@@ -0,0 +1,47 @@
+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 './LocationActionView/UploadView/UploadView.mjs';
+import { useUploadView } from './LocationActionView/UploadView/useUploadView.mjs';
+import { useActionView } from './LocationActionView/useActionView.mjs';
+import 'react';
+import '../actions/configs/context.mjs';
+import '@aws-amplify/storage/internals';
+import '@aws-amplify/ui';
+import 'aws-amplify/storage';
+import '@aws-amplify/ui-react-core';
+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 './LocationsView/LocationsView.mjs';
+import { useLocationsView } from './LocationsView/useLocationsView.mjs';
+import './LocationDetailView/LocationDetailView.mjs';
+import { useLocationDetailView } from './LocationDetailView/useLocationDetailView.mjs';
+
+const DEFAULT_USE_VIEWS = {
+    CopyView: useCopyView,
+    CreateFolderView: useCreateFolderView,
+    DeleteView: useDeleteView,
+    LocationDetailView: useLocationDetailView,
+    LocationsView: useLocationsView,
+    UploadView: useUploadView,
+};
+const isDefaultUseViewName = (viewName) => Object.keys(DEFAULT_USE_VIEWS).some((key) => key === viewName);
+const createUseView = (configs) => {
+    const hooks = Object.values(configs).reduce((out, { componentName }) => ({
+        ...out,
+        [componentName.slice(0, -4)]: isDefaultUseViewName(componentName)
+            ? DEFAULT_USE_VIEWS[componentName]
+            : useActionView,
+    }), {});
+    return function useView(type) {
+        // todo: add assertion here
+        return hooks[type](type);
+    };
+};
+
+export { createUseView };

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 };