@aws-amplify/ui-react-storage 3.16.0 → 3.17.0

package/dist/browser.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var internals = require('@aws-amplify/storage/internals');
 require('aws-amplify');
 require('@aws-amplify/ui');
-var createStorageBrowser = require('./createStorageBrowser-B-J76Lyp.js');
+var createStorageBrowser = require('./createStorageBrowser-De4hcP-u.js');
 require('jszip');
 require('aws-amplify/storage');
 require('react');

package/dist/{createStorageBrowser-B-J76Lyp.js → createStorageBrowser-De4hcP-u.js}

@@ -36,7 +36,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var JSZip__default = /*#__PURE__*/_interopDefault(JSZip);
 
-const VERSION = '3.16.0';
+const VERSION = '3.17.0';
 
 const DEFAULT_CHECKSUM_ALGORITHM = 'crc-32';
 // 5MiB for multipart upload
@@ -665,7 +665,7 @@ const downloadHandler = (() => {
     return handler;
 })();
 
-const DEFAULT_PAGE_SIZE$5 = 1000;
+const DEFAULT_PAGE_SIZE$2 = 1000;
 const parseItems = (items, excludedPath) => items
     // remove root `key` from results
     .filter(({ path }) => path !== excludedPath)
@@ -698,7 +698,7 @@ const parseResult = ({ excludedSubpaths, items }, prefix) => filterDotItems([...
 const listLocationItemsHandler = async (input) => {
     const { config, prefix, options } = input;
     const { bucket: _bucket, credentials, customEndpoint, region: globalRegion, accountId, } = config;
-    const { exclude, delimiter, nextToken, pageSize: _pageSize = DEFAULT_PAGE_SIZE$5, ..._options } = options ?? {};
+    const { exclude, delimiter, nextToken, pageSize: _pageSize = DEFAULT_PAGE_SIZE$2, ..._options } = options ?? {};
     const bucketRegion = getBucketRegion(_bucket, globalRegion);
     const bucket = { bucketName: _bucket, region: bucketRegion };
     const subpathStrategy = {
@@ -1814,10 +1814,10 @@ function useCredentialsStore({ getLocationCredentials: handler, initialValue, on
     return store;
 }
 
-const ERROR_MESSAGE$2 = '`useCredentials` must be called from within a `CredentialsProvider`.';
+const ERROR_MESSAGE$3 = '`useCredentials` must be called from within a `CredentialsProvider`.';
 const { useCredentials, CredentialsContext } = uiReactCore.createContextUtilities({
     contextName: 'Credentials',
-    errorMessage: ERROR_MESSAGE$2,
+    errorMessage: ERROR_MESSAGE$3,
 });
 function CredentialsProvider({ children, ...props }) {
     const initialValue = React__namespace["default"].useContext(CredentialsContext);
@@ -2017,10 +2017,10 @@ function useGetActionInputCallback({ accountId, customEndpoint, region, }) {
     }, [accountId, current, customEndpoint, getCredentials, key, region]);
 }
 
-const ERROR_MESSAGE$1 = '`useGetActionInput` must be called from within a `ConfigurationProvider`.';
+const ERROR_MESSAGE$2 = '`useGetActionInput` must be called from within a `ConfigurationProvider`.';
 const { useGetActionInput, GetActionInputContext } = uiReactCore.createContextUtilities({
     contextName: 'GetActionInput',
-    errorMessage: ERROR_MESSAGE$1,
+    errorMessage: ERROR_MESSAGE$2,
 });
 function GetActionInputProvider({ accountId, children, customEndpoint, region, }) {
     const value = useGetActionInputCallback({
@@ -2042,6 +2042,27 @@ function createConfigurationProvider(input) {
     return Provider;
 }
 
+const DEFAULT_PAGE_SIZE$1 = 100;
+const validatePageSize = (pageSize) => {
+    if (pageSize === undefined ||
+        pageSize === null ||
+        !Number.isInteger(pageSize) ||
+        pageSize < 1) {
+        return DEFAULT_PAGE_SIZE$1;
+    }
+    return pageSize;
+};
+
+const ERROR_MESSAGE$1 = '`usePaginationConfig` must be called from within a `PaginationConfigProvider`.';
+const { usePaginationConfig, PaginationConfigContext } = uiReactCore.createContextUtilities({
+    contextName: 'PaginationConfig',
+    errorMessage: ERROR_MESSAGE$1,
+});
+function PaginationConfigProvider({ children, pageSize, }) {
+    const value = React__namespace["default"].useMemo(() => ({ pageSize: validatePageSize(pageSize) }), [pageSize]);
+    return (React__namespace["default"].createElement(PaginationConfigContext.Provider, { value: value }, children));
+}
+
 const DEFAULT_ACTION_CONCURRENCY = 4;
 const USE_LIST_ERROR_MESSAGE = '`useList` must be called from within `StorageBrowser.Provider`';
 
@@ -4994,8 +5015,7 @@ function FileItemsProvider({ children, validateFile, }) {
 
 const DEFAULT_OVERWRITE_ENABLED = false;
 
-const DEFAULT_PAGE_SIZE$4 = 100;
-const usePaginate = ({ items, onPaginate, page = 1, pageSize = DEFAULT_PAGE_SIZE$4, }) => {
+const usePaginate = ({ items, onPaginate, page = 1, pageSize, }) => {
     const [currentPage, setCurrentPage] = React__namespace["default"].useState(page);
     const visitedRef = React__namespace["default"].useRef(page);
     const handleReset = React__namespace["default"].useRef(() => {
@@ -5005,19 +5025,31 @@ const usePaginate = ({ items, onPaginate, page = 1, pageSize = DEFAULT_PAGE_SIZE
     }).current;
     return React__namespace["default"].useMemo(() => {
         const hasItems = Array.isArray(items);
+        const totalItems = hasItems ? items.length : 0;
+        const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+        // Auto-adjust current page if it's beyond available pages
+        // For server-side pagination, don't auto-adjust if onPaginate callback is provided
+        let adjustedCurrentPage = currentPage;
+        if (currentPage > totalPages && !ui.isFunction(onPaginate)) {
+            adjustedCurrentPage = totalPages;
+            setCurrentPage(adjustedCurrentPage);
+        }
         const highestPageVisited = visitedRef.current;
-        const isFirstPage = currentPage === 1;
-        const start = isFirstPage ? 0 : (currentPage - 1) * pageSize;
-        const end = isFirstPage ? pageSize : currentPage * pageSize;
+        const isFirstPage = adjustedCurrentPage === 1;
+        const start = isFirstPage ? 0 : (adjustedCurrentPage - 1) * pageSize;
+        const end = isFirstPage ? pageSize : adjustedCurrentPage * pageSize;
         const pageItems = hasItems ? items.slice(start, end) : [];
         return {
-            currentPage,
+            currentPage: adjustedCurrentPage,
             handlePaginate: (page) => {
                 if (page < 1)
                     return;
+                // For server-side pagination, allow going beyond totalPages if onPaginate is provided
+                if (page > totalPages && !ui.isFunction(onPaginate))
+                    return;
                 if (ui.isFunction(onPaginate))
                     onPaginate(page);
-                if (page > currentPage && page > highestPageVisited)
+                if (page > adjustedCurrentPage && page > highestPageVisited)
                     visitedRef.current = page;
                 setCurrentPage(page);
             },
@@ -5028,9 +5060,10 @@ const usePaginate = ({ items, onPaginate, page = 1, pageSize = DEFAULT_PAGE_SIZE
     }, [currentPage, handleReset, items, onPaginate, pageSize]);
 };
 
-const DEFAULT_PAGE_SIZE$3 = 100;
 const useUploadView = (options) => {
-    const { onExit: _onExit } = options ?? {};
+    const { pageSize: configPageSize } = usePaginationConfig();
+    const { onExit: _onExit, pageSize: propPageSize } = options ?? {};
+    const pageSize = propPageSize ?? configPageSize;
     const [{ location }, storeDispatch] = useStore();
     const [{ validItems, invalidItems: invalidFiles }, fileItemsDispatch] = useFileItems();
     const { current } = location;
@@ -5043,6 +5076,7 @@ const useUploadView = (options) => {
     const [{ isProcessing, isProcessingComplete, statusCounts, tasks }, handleUploads,] = useAction('upload', { items });
     const { currentPage, handlePaginate, pageItems: pageTasks, } = usePaginate({
         items: tasks,
+        pageSize,
     });
     const onDropFiles = (files) => {
         if (files) {
@@ -5080,8 +5114,8 @@ const useUploadView = (options) => {
         statusCounts,
         tasks: pageTasks,
         page: currentPage,
-        hasNextPage: currentPage * DEFAULT_PAGE_SIZE$3 < items.length,
-        highestPageVisited: Math.ceil(items.length / DEFAULT_PAGE_SIZE$3),
+        hasNextPage: currentPage * pageSize < items.length,
+        highestPageVisited: Math.ceil(items.length / pageSize),
         onActionCancel,
         onActionExit,
         onActionStart,
@@ -5095,7 +5129,7 @@ const useUploadView = (options) => {
 
 const UploadView = ({ className, ...props }) => {
     const state = useUploadView(props);
-    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className) },
+    return (React__namespace["default"].createElement(ViewElement, { className: ui.classNames(STORAGE_BROWSER_BLOCK, className), "data-testid": "UPLOAD_VIEW" },
         React__namespace["default"].createElement(UploadViewProvider, { ...state },
             React__namespace["default"].createElement(ActionExitControl, null),
             React__namespace["default"].createElement(TitleControl, null),
@@ -5419,13 +5453,13 @@ function useSearch(props) {
     };
 }
 
-const DEFAULT_PAGE_SIZE$2 = 100;
-const DEFAULT_LIST_OPTIONS$2 = {
-    pageSize: DEFAULT_PAGE_SIZE$2,
+const DEFAULT_PAGE_SIZE = 100;
+const DEFAULT_LIST_OPTIONS = {
+    pageSize: DEFAULT_PAGE_SIZE,
     delimiter: '/',
     exclude: 'FILE',
 };
-const DEFAULT_REFRESH_OPTIONS = { ...DEFAULT_LIST_OPTIONS$2, refresh: true };
+const DEFAULT_REFRESH_OPTIONS = { ...DEFAULT_LIST_OPTIONS, refresh: true };
 const useFolders = ({ destination, setDestination, }) => {
     const { current, key } = destination;
     const [{ value, hasError, isLoading, message }, handleList] = useList('folderItems');
@@ -5442,19 +5476,19 @@ const useFolders = ({ destination, setDestination, }) => {
             return;
         handleList({
             prefix: key,
-            options: { ...DEFAULT_LIST_OPTIONS$2, nextToken },
+            options: { ...DEFAULT_LIST_OPTIONS, nextToken },
         });
     };
     const { currentPage: page, handlePaginate, highestPageVisited, pageItems, handleReset, } = usePaginate({
         items,
         onPaginate,
-        pageSize: DEFAULT_PAGE_SIZE$2,
+        pageSize: DEFAULT_PAGE_SIZE,
     });
     const onSearch = (query) => {
         handleReset();
         handleList({
             prefix: key,
-            options: { ...DEFAULT_LIST_OPTIONS$2, search: { query, filterBy: 'key' } },
+            options: { ...DEFAULT_LIST_OPTIONS, search: { query, filterBy: 'key' } },
         });
     };
     const { onSearchSubmit, searchQuery: query, resetSearch, onSearchQueryChange: onQuery, } = useSearch({ onSearch });
@@ -6383,23 +6417,22 @@ function useFilePreview({ activeFile, }) {
     }, [getFilePreview, filePreviewContext, filePreviewContent, enabled]);
 }
 
-const DEFAULT_PAGE_SIZE$1 = 100;
-const DEFAULT_LIST_OPTIONS$1 = {
-    delimiter: '/',
-    pageSize: DEFAULT_PAGE_SIZE$1,
-};
 const getDownloadErrorMessageFromFailedDownloadTask = (task) => {
     if (!task)
         return;
     return `Failed to download ${task.data.fileKey ?? task.data.key} due to error: ${task.message}.`;
 };
 const useLocationDetailView = (options) => {
-    const { initialValues, onExit, onNavigate } = options ?? {};
-    const listOptionsRef = React__namespace["default"].useRef({
-        ...DEFAULT_LIST_OPTIONS$1,
+    const { pageSize: configPageSize } = usePaginationConfig();
+    const { initialValues = {}, onExit, onNavigate, pageSize: propPageSize, } = options ?? {};
+    const pageSize = propPageSize ?? configPageSize;
+    const listOptions = React__namespace["default"].useMemo(() => ({
         ...initialValues,
-    });
-    const listOptions = listOptionsRef.current;
+        delimiter: '/',
+        pageSize,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pageSize, initialValues.delimiter, initialValues.pageSize]);
     const [{ location, actionType }, storeDispatch] = useStore();
     const [locationItems, locationItemsDispatch] = useLocationItems();
     const fileItemsDispatch = useFileItems()[1];
@@ -6829,12 +6862,8 @@ function LocationsViewProvider({ children, ...props }) {
 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 { pageSize: configPageSize } = usePaginationConfig();
     const handleDownload = useAction('download')[1];
     const [state, handleList] = useList('locations');
     const dispatchStoreAction = useStore()[1];
@@ -6842,12 +6871,15 @@ const useLocationsView = (options) => {
     const { items, nextToken, hasExhaustedSearch = false } = value;
     const hasNextToken = !!nextToken;
     const onNavigate = options?.onNavigate;
+    const pageSize = options?.pageSize ?? configPageSize;
     const initialValues = options?.initialValues ?? {};
-    const listOptionsRef = React__namespace["default"].useRef({
-        ...DEFAULT_LIST_OPTIONS,
+    const listOptions = React__namespace["default"].useMemo(() => ({
         ...initialValues,
-    });
-    const listOptions = listOptionsRef.current;
+        exclude: DEFAULT_EXCLUDE,
+        pageSize,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pageSize, initialValues.pageSize]);
     // initial load
     React__namespace["default"].useEffect(() => {
         handleList({ options: { ...listOptions, refresh: true } });
@@ -7051,17 +7083,18 @@ function createProvider({ actions, components, config, options, filePreview = {}
      * Provides state, configuration and action values that are shared between
      * the primary View components
      */
-    function Provider({ children, displayText, views, ...props }) {
+    function Provider({ children, displayText, views, pageSize, ...props }) {
         return (React__namespace["default"].createElement(StoreProvider, { ...props },
             React__namespace["default"].createElement(ConfigurationProvider, null,
-                React__namespace["default"].createElement(ActionConfigsProvider, { actionConfigs: actionConfigs },
-                    React__namespace["default"].createElement(ActionHandlersProvider, { handlers: handlers },
-                        React__namespace["default"].createElement(DisplayTextProvider, { displayText: displayText },
-                            React__namespace["default"].createElement(ViewsProvider, { actions: resolvedActions, views: views },
-                                React__namespace["default"].createElement(ComponentsProvider, { composables: composables },
-                                    React__namespace["default"].createElement(LocationItemsProvider, null,
-                                        React__namespace["default"].createElement(FileItemsProvider, { validateFile: validateFile },
-                                            React__namespace["default"].createElement(FilePreviewProvider, { filePreview: filePreview }, children)))))))))));
+                React__namespace["default"].createElement(PaginationConfigProvider, { pageSize: pageSize },
+                    React__namespace["default"].createElement(ActionConfigsProvider, { actionConfigs: actionConfigs },
+                        React__namespace["default"].createElement(ActionHandlersProvider, { handlers: handlers },
+                            React__namespace["default"].createElement(DisplayTextProvider, { displayText: displayText },
+                                React__namespace["default"].createElement(ViewsProvider, { actions: resolvedActions, views: views },
+                                    React__namespace["default"].createElement(ComponentsProvider, { composables: composables },
+                                        React__namespace["default"].createElement(LocationItemsProvider, null,
+                                            React__namespace["default"].createElement(FileItemsProvider, { validateFile: validateFile },
+                                                React__namespace["default"].createElement(FilePreviewProvider, { filePreview: filePreview }, children))))))))))));
     }
     return Provider;
 }

package/dist/esm/browser.mjs

@@ -18,6 +18,7 @@ import './components/StorageBrowser/useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
 import './components/StorageBrowser/credentials/context.mjs';
 import './components/StorageBrowser/configuration/context.mjs';
+import './components/StorageBrowser/configuration/paginationContext.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';

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import '../actions/configs/defaults.mjs';
 import '../displayText/context.mjs';
 import '../filePreview/context.mjs';

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

@@ -11,6 +11,7 @@ import '../useAction/context.mjs';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import '../actions/configs/defaults.mjs';
 import '../displayText/context.mjs';
 import '../filePreview/context.mjs';

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '@aws-amplify/ui';
 import '../../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';

package/dist/esm/components/StorageBrowser/configuration/paginationContext.mjs

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { validatePageSize } from '../utils/validatePageSize.mjs';
+
+const ERROR_MESSAGE = '`usePaginationConfig` must be called from within a `PaginationConfigProvider`.';
+const { usePaginationConfig, PaginationConfigContext } = createContextUtilities({
+    contextName: 'PaginationConfig',
+    errorMessage: ERROR_MESSAGE,
+});
+function PaginationConfigProvider({ children, pageSize, }) {
+    const value = React__default.useMemo(() => ({ pageSize: validatePageSize(pageSize) }), [pageSize]);
+    return (React__default.createElement(PaginationConfigContext.Provider, { value: value }, children));
+}
+
+export { PaginationConfigContext, PaginationConfigProvider, usePaginationConfig };

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import '../actions/configs/defaults.mjs';
 import '../displayText/context.mjs';
 import '../filePreview/context.mjs';

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

@@ -9,6 +9,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import '@aws-amplify/ui-react-core';
 import '../actions/configs/defaults.mjs';
 import '../views/LocationActionView/CreateFolderView/CreateFolderView.mjs';

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

@@ -16,6 +16,7 @@ import { ComponentsProvider } from '../components/ComponentsProvider.mjs';
 import { componentsDefault } from '../components/defaults.mjs';
 import { createConfigurationProvider } from '../configuration/createConfigurationProvider.mjs';
 import '../configuration/context.mjs';
+import { PaginationConfigProvider } from '../configuration/paginationContext.mjs';
 import { DisplayTextProvider } from '../displayText/context.mjs';
 import { FileItemsProvider } from '../fileItems/context.mjs';
 import { defaultValidateFile } from '../fileItems/utils.mjs';
@@ -69,17 +70,18 @@ function createProvider({ actions, components, config, options, filePreview = {}
      * Provides state, configuration and action values that are shared between
      * the primary View components
      */
-    function Provider({ children, displayText, views, ...props }) {
+    function Provider({ children, displayText, views, pageSize, ...props }) {
         return (React__default.createElement(StoreProvider, { ...props },
             React__default.createElement(ConfigurationProvider, null,
-                React__default.createElement(ActionConfigsProvider, { actionConfigs: actionConfigs },
-                    React__default.createElement(ActionHandlersProvider, { handlers: handlers },
-                        React__default.createElement(DisplayTextProvider, { displayText: displayText },
-                            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 },
-                                            React__default.createElement(FilePreviewProvider, { filePreview: filePreview }, children)))))))))));
+                React__default.createElement(PaginationConfigProvider, { pageSize: pageSize },
+                    React__default.createElement(ActionConfigsProvider, { actionConfigs: actionConfigs },
+                        React__default.createElement(ActionHandlersProvider, { handlers: handlers },
+                            React__default.createElement(DisplayTextProvider, { displayText: displayText },
+                                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 },
+                                                React__default.createElement(FilePreviewProvider, { filePreview: filePreview }, children))))))))))));
     }
     return Provider;
 }

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

@@ -9,6 +9,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import '../actions/configs/defaults.mjs';
 import { assertRegisterAuthListener } from '../validators/assertRegisterAuthListener.mjs';
 import '../views/context/actionViews.mjs';

package/dist/esm/components/StorageBrowser/useAction/useHandler.mjs

@@ -3,6 +3,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import { useGetActionInput } from '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import { DEFAULT_ACTION_CONCURRENCY } from './constants.mjs';
 import { useProcessTasks } from '../tasks/useProcessTasks.mjs';
 

package/dist/esm/components/StorageBrowser/useAction/useListFolderItems.mjs

@@ -7,6 +7,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import { useGetActionInput } from '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 
 const useListFolderItems = () => {
     const { handlers } = useActionHandlers({

package/dist/esm/components/StorageBrowser/useAction/useListLocationItems.mjs

@@ -4,6 +4,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import { useGetActionInput } from '../configuration/context.mjs';
+import '../configuration/paginationContext.mjs';
 import { USE_LIST_ERROR_MESSAGE } from './constants.mjs';
 import { useActionHandlers } from './context.mjs';
 import { createEnhancedListHandler } from './createEnhancedListHandler.mjs';

package/dist/esm/components/StorageBrowser/utils/validatePageSize.mjs

@@ -0,0 +1,12 @@
+const DEFAULT_PAGE_SIZE = 100;
+const validatePageSize = (pageSize) => {
+    if (pageSize === undefined ||
+        pageSize === null ||
+        !Number.isInteger(pageSize) ||
+        pageSize < 1) {
+        return DEFAULT_PAGE_SIZE;
+    }
+    return pageSize;
+};
+
+export { validatePageSize };

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -13,6 +13,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -9,6 +9,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useFolders } from './useFolders.mjs';
 

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

@@ -4,6 +4,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '@aws-amplify/ui';
 import { useList } from '../../../useAction/useList.mjs';
 import '../../../actions/configs/defaults.mjs';

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -7,6 +7,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useStore } from '../../../store/context.mjs';
 

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

@@ -19,6 +19,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -10,6 +10,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import { useGetActionInput } from '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../../displayText/context.mjs';
 import { createDeleteConfirmationModalProps, countFilesInFolder } from './utils.mjs';

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

@@ -18,6 +18,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';

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

@@ -9,6 +9,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 
 // assign to constant to ensure referential equality

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../../configuration/context.mjs';
+import '../../../configuration/paginationContext.mjs';
 import '../../../actions/configs/defaults.mjs';
 import '../../../displayText/context.mjs';
 import '../../../filePreview/context.mjs';
@@ -33,7 +34,7 @@ import { useUploadView } from './useUploadView.mjs';
 
 const UploadView = ({ className, ...props }) => {
     const state = useUploadView(props);
-    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className) },
+    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className), "data-testid": "UPLOAD_VIEW" },
         React__default.createElement(UploadViewProvider, { ...state },
             React__default.createElement(ActionExitControl, null),
             React__default.createElement(TitleControl, null),

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

@@ -1,21 +1,23 @@
 import React__default from 'react';
+import '@aws-amplify/ui-react-core/elements';
+import '../../../credentials/context.mjs';
+import '@aws-amplify/storage/internals';
+import '../../../configuration/context.mjs';
+import { usePaginationConfig } from '../../../configuration/paginationContext.mjs';
 import { useFileItems } from '../../../fileItems/context.mjs';
 import '@aws-amplify/ui';
 import { useStore } from '../../../store/context.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 '../../../actions/configs/defaults.mjs';
 import { DEFAULT_OVERWRITE_ENABLED } from './constants.mjs';
 import { usePaginate } from '../../hooks/usePaginate.mjs';
 
-const DEFAULT_PAGE_SIZE = 100;
 const useUploadView = (options) => {
-    const { onExit: _onExit } = options ?? {};
+    const { pageSize: configPageSize } = usePaginationConfig();
+    const { onExit: _onExit, pageSize: propPageSize } = options ?? {};
+    const pageSize = propPageSize ?? configPageSize;
     const [{ location }, storeDispatch] = useStore();
     const [{ validItems, invalidItems: invalidFiles }, fileItemsDispatch] = useFileItems();
     const { current } = location;
@@ -28,6 +30,7 @@ const useUploadView = (options) => {
     const [{ isProcessing, isProcessingComplete, statusCounts, tasks }, handleUploads,] = useAction('upload', { items });
     const { currentPage, handlePaginate, pageItems: pageTasks, } = usePaginate({
         items: tasks,
+        pageSize,
     });
     const onDropFiles = (files) => {
         if (files) {
@@ -65,8 +68,8 @@ const useUploadView = (options) => {
         statusCounts,
         tasks: pageTasks,
         page: currentPage,
-        hasNextPage: currentPage * DEFAULT_PAGE_SIZE < items.length,
-        highestPageVisited: Math.ceil(items.length / DEFAULT_PAGE_SIZE),
+        hasNextPage: currentPage * pageSize < items.length,
+        highestPageVisited: Math.ceil(items.length / pageSize),
         onActionCancel,
         onActionExit,
         onActionStart,

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../configuration/context.mjs';
+import '../../configuration/paginationContext.mjs';
 import '../../actions/configs/defaults.mjs';
 import '../../displayText/context.mjs';
 import '../../filePreview/context.mjs';

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

@@ -7,6 +7,10 @@ import 'jszip';
 import 'aws-amplify/storage';
 import { useActionConfigs } from '../../actions/configs/context.mjs';
 import '../../actions/configs/defaults.mjs';
+import '@aws-amplify/ui-react-core/elements';
+import '../../credentials/context.mjs';
+import '../../configuration/context.mjs';
+import { usePaginationConfig } from '../../configuration/paginationContext.mjs';
 import { useFileItems } from '../../fileItems/context.mjs';
 import { useLocationItems } from '../../locationItems/context.mjs';
 import { useStore } from '../../store/context.mjs';
@@ -16,23 +20,22 @@ import { useList } from '../../useAction/useList.mjs';
 import { useSearch } from '../hooks/useSearch.mjs';
 import { useFilePreview } from '../hooks/useFilePreview/useFilePreview.mjs';
 
-const DEFAULT_PAGE_SIZE = 100;
-const DEFAULT_LIST_OPTIONS = {
-    delimiter: '/',
-    pageSize: DEFAULT_PAGE_SIZE,
-};
 const getDownloadErrorMessageFromFailedDownloadTask = (task) => {
     if (!task)
         return;
     return `Failed to download ${task.data.fileKey ?? task.data.key} due to error: ${task.message}.`;
 };
 const useLocationDetailView = (options) => {
-    const { initialValues, onExit, onNavigate } = options ?? {};
-    const listOptionsRef = React__default.useRef({
-        ...DEFAULT_LIST_OPTIONS,
+    const { pageSize: configPageSize } = usePaginationConfig();
+    const { initialValues = {}, onExit, onNavigate, pageSize: propPageSize, } = options ?? {};
+    const pageSize = propPageSize ?? configPageSize;
+    const listOptions = React__default.useMemo(() => ({
         ...initialValues,
-    });
-    const listOptions = listOptionsRef.current;
+        delimiter: '/',
+        pageSize,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pageSize, initialValues.delimiter, initialValues.pageSize]);
     const [{ location, actionType }, storeDispatch] = useStore();
     const [locationItems, locationItemsDispatch] = useLocationItems();
     const fileItemsDispatch = useFileItems()[1];
@@ -267,4 +270,4 @@ const useLocationDetailView = (options) => {
     };
 };
 
-export { DEFAULT_LIST_OPTIONS, useLocationDetailView };
+export { useLocationDetailView };

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../configuration/context.mjs';
+import '../../configuration/paginationContext.mjs';
 import '../../actions/configs/defaults.mjs';
 import '../../displayText/context.mjs';
 import '../../filePreview/context.mjs';

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

@@ -11,6 +11,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../configuration/context.mjs';
+import '../../configuration/paginationContext.mjs';
 import '../../actions/configs/defaults.mjs';
 import { useDisplayText } from '../../displayText/context.mjs';
 import '../../filePreview/context.mjs';

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

@@ -6,6 +6,10 @@ import 'jszip';
 import 'aws-amplify/storage';
 import '../../actions/configs/context.mjs';
 import '../../actions/configs/defaults.mjs';
+import '@aws-amplify/ui-react-core/elements';
+import '../../credentials/context.mjs';
+import '../../configuration/context.mjs';
+import { usePaginationConfig } from '../../configuration/paginationContext.mjs';
 import { useStore } from '../../store/context.mjs';
 import '../../useAction/context.mjs';
 import { useAction } from '../../useAction/useAction.mjs';
@@ -16,12 +20,8 @@ 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 { pageSize: configPageSize } = usePaginationConfig();
     const handleDownload = useAction('download')[1];
     const [state, handleList] = useList('locations');
     const dispatchStoreAction = useStore()[1];
@@ -29,12 +29,15 @@ const useLocationsView = (options) => {
     const { items, nextToken, hasExhaustedSearch = false } = value;
     const hasNextToken = !!nextToken;
     const onNavigate = options?.onNavigate;
+    const pageSize = options?.pageSize ?? configPageSize;
     const initialValues = options?.initialValues ?? {};
-    const listOptionsRef = React__default.useRef({
-        ...DEFAULT_LIST_OPTIONS,
+    const listOptions = React__default.useMemo(() => ({
         ...initialValues,
-    });
-    const listOptions = listOptionsRef.current;
+        exclude: DEFAULT_EXCLUDE,
+        pageSize,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pageSize, initialValues.pageSize]);
     // initial load
     React__default.useEffect(() => {
         handleList({ options: { ...listOptions, refresh: true } });
@@ -108,4 +111,4 @@ const useLocationsView = (options) => {
     };
 };
 
-export { DEFAULT_LIST_OPTIONS, useLocationsView };
+export { useLocationsView };

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

@@ -1,13 +1,14 @@
 import React__default from 'react';
 import { UploadView } from '../LocationActionView/UploadView/UploadView.mjs';
-import '../../fileItems/context.mjs';
-import '@aws-amplify/ui';
-import '../../store/context.mjs';
-import '../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core/elements';
 import '../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../configuration/context.mjs';
+import '../../configuration/paginationContext.mjs';
+import '../../fileItems/context.mjs';
+import '@aws-amplify/ui';
+import '../../store/context.mjs';
+import '../../useAction/context.mjs';
 import '@aws-amplify/ui-react-core';
 import '../../actions/configs/defaults.mjs';
 import { CreateFolderView } from '../LocationActionView/CreateFolderView/CreateFolderView.mjs';

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

@@ -8,6 +8,7 @@ import '@aws-amplify/ui-react-core/elements';
 import '../../credentials/context.mjs';
 import '@aws-amplify/storage/internals';
 import '../../configuration/context.mjs';
+import '../../configuration/paginationContext.mjs';
 import '@aws-amplify/ui-react-core';
 import '../../actions/configs/defaults.mjs';
 import '../LocationActionView/CreateFolderView/CreateFolderView.mjs';

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

@@ -1,8 +1,7 @@
 import React__default from 'react';
 import { isFunction } from '@aws-amplify/ui';
 
-const DEFAULT_PAGE_SIZE = 100;
-const usePaginate = ({ items, onPaginate, page = 1, pageSize = DEFAULT_PAGE_SIZE, }) => {
+const usePaginate = ({ items, onPaginate, page = 1, pageSize, }) => {
     const [currentPage, setCurrentPage] = React__default.useState(page);
     const visitedRef = React__default.useRef(page);
     const handleReset = React__default.useRef(() => {
@@ -12,19 +11,31 @@ const usePaginate = ({ items, onPaginate, page = 1, pageSize = DEFAULT_PAGE_SIZE
     }).current;
     return React__default.useMemo(() => {
         const hasItems = Array.isArray(items);
+        const totalItems = hasItems ? items.length : 0;
+        const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+        // Auto-adjust current page if it's beyond available pages
+        // For server-side pagination, don't auto-adjust if onPaginate callback is provided
+        let adjustedCurrentPage = currentPage;
+        if (currentPage > totalPages && !isFunction(onPaginate)) {
+            adjustedCurrentPage = totalPages;
+            setCurrentPage(adjustedCurrentPage);
+        }
         const highestPageVisited = visitedRef.current;
-        const isFirstPage = currentPage === 1;
-        const start = isFirstPage ? 0 : (currentPage - 1) * pageSize;
-        const end = isFirstPage ? pageSize : currentPage * pageSize;
+        const isFirstPage = adjustedCurrentPage === 1;
+        const start = isFirstPage ? 0 : (adjustedCurrentPage - 1) * pageSize;
+        const end = isFirstPage ? pageSize : adjustedCurrentPage * pageSize;
         const pageItems = hasItems ? items.slice(start, end) : [];
         return {
-            currentPage,
+            currentPage: adjustedCurrentPage,
             handlePaginate: (page) => {
                 if (page < 1)
                     return;
+                // For server-side pagination, allow going beyond totalPages if onPaginate is provided
+                if (page > totalPages && !isFunction(onPaginate))
+                    return;
                 if (isFunction(onPaginate))
                     onPaginate(page);
-                if (page > currentPage && page > highestPageVisited)
+                if (page > adjustedCurrentPage && page > highestPageVisited)
                     visitedRef.current = page;
                 setCurrentPage(page);
             },

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.16.0';
+const VERSION = '3.17.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-B-J76Lyp.js');
+var createStorageBrowser = require('./createStorageBrowser-De4hcP-u.js');
 require('@aws-amplify/storage/internals');
 require('aws-amplify');
 require('jszip');

package/dist/types/components/StorageBrowser/StorageBrowserAmplify.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import type { StorageBrowserProps as StorageBrowserPropsBase } from './createStorageBrowser';
+import type { StorageBrowserProps as StorageBrowserPropsBase, StorageBrowserProviderProps as StorageBrowserProviderPropsBase } from './createStorageBrowser';
 export interface StorageBrowserProps extends StorageBrowserPropsBase {
 }
+export interface StorageBrowserProviderProps extends StorageBrowserProviderPropsBase {
+}
 export declare function StorageBrowser(props: StorageBrowserProps): React.JSX.Element;

package/dist/types/components/StorageBrowser/configuration/index.d.ts

@@ -1,3 +1,5 @@
 export { createConfigurationProvider } from './createConfigurationProvider';
 export { useGetActionInput } from './context';
 export type { GetActionInput } from './types';
+export { usePaginationConfig, PaginationConfigProvider, } from './paginationContext';
+export type { PaginationConfig } from './paginationContext';

package/dist/types/components/StorageBrowser/configuration/paginationContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface PaginationConfig {
+    pageSize: number;
+}
+export declare const usePaginationConfig: (params?: {
+    errorMessage?: string | undefined;
+} | undefined) => PaginationConfig, PaginationConfigContext: React.Context<PaginationConfig>;
+export interface PaginationConfigProviderProps {
+    children?: React.ReactNode;
+    pageSize?: number;
+}
+export declare function PaginationConfigProvider({ children, pageSize, }: PaginationConfigProviderProps): React.JSX.Element;

package/dist/types/components/StorageBrowser/createStorageBrowser/types.d.ts

@@ -245,12 +245,18 @@ export interface StorageBrowserProps<TActionType = string, TViews = {}> {
      * @description accepts default top level `views` overrides and custom `views` defined by the `actions` parameter of `createStorageBrowser`
      */
     views?: StorageBrowserViews<TActionType, TViews>;
+    /**
+     * @description Number of items to display per page in listings
+     * @default 100
+     * @minimum 1
+     */
+    pageSize?: number;
 }
 /**
  * @description `StorageBrowser.Provider` component properties
  * @template TViews Optional type of custom action view components.
  */
-export interface StorageBrowserProviderProps<TViews = {}> extends StoreProviderProps, Pick<StorageBrowserProps, 'defaultValue' | 'displayText' | 'onValueChange' | 'value'> {
+export interface StorageBrowserProviderProps<TViews = {}> extends StoreProviderProps, Pick<StorageBrowserProps, 'defaultValue' | 'displayText' | 'onValueChange' | 'value' | 'pageSize'> {
     /**
      * @description accepts custom action views rendered by `LocationActionView`
      */

package/dist/types/components/StorageBrowser/store/types.d.ts

@@ -54,6 +54,13 @@ export interface StoreProviderProps {
      * @deprecated
      */
     path?: string;
+    /**
+     * @description Number of items to display per page in listings
+     * @default 100
+     * @minimum 1
+     * @maximum 1000
+     */
+    pageSize?: number;
 }
 export type StoreActionType = {
     type: 'CHANGE_ACTION_TYPE';

package/dist/types/components/StorageBrowser/utils/index.d.ts

@@ -0,0 +1 @@
+export { validatePageSize } from './validatePageSize';

package/dist/types/components/StorageBrowser/utils/validatePageSize.d.ts

@@ -0,0 +1 @@
+export declare const validatePageSize: (pageSize: number | undefined) => number;

package/dist/types/components/StorageBrowser/views/LocationActionView/UploadView/types.d.ts

@@ -13,6 +13,12 @@ export interface UploadViewState extends ActionViewState<UploadHandlerData> {
     invalidFiles: FileItems | undefined;
 }
 export interface UploadViewProps extends ActionViewProps, Partial<UploadViewState> {
+    /**
+     * @description Number of items to display per page in task listings
+     * @default 100
+     * @minimum 1
+     */
+    pageSize?: number;
 }
 export interface UploadViewProviderProps extends UploadViewState {
     children?: React.ReactNode;
@@ -37,4 +43,5 @@ export interface UploadViewType extends ActionViewType<UploadHandlerData, Upload
 }
 export interface UseUploadViewOptions {
     onExit?: (location?: LocationData) => void;
+    pageSize?: number;
 }

package/dist/types/components/StorageBrowser/views/LocationDetailView/types.d.ts

@@ -79,7 +79,7 @@ export interface LocationDetailViewType {
     Title: () => React.JSX.Element | null;
     FilePreview: (props: FilePreviewProps) => React.JSX.Element | null;
 }
-interface InitialValues {
+export interface InitialValues {
     pageSize?: number;
     delimiter?: string;
 }
@@ -88,5 +88,5 @@ export interface UseLocationDetailViewOptions {
     onActionSelect?: (actionType: string) => void;
     onExit?: () => void;
     onNavigate?: (location: LocationData, path?: string) => void;
+    pageSize?: number;
 }
-export {};

package/dist/types/components/StorageBrowser/views/LocationsView/types.d.ts

@@ -35,11 +35,11 @@ export interface LocationsViewType {
     Search: () => React.JSX.Element | null;
     Title: () => React.JSX.Element | null;
 }
-interface InitialValues {
+export interface InitialValues {
     pageSize?: number;
 }
 export interface UseLocationsViewOptions {
     initialValues?: InitialValues;
     onNavigate?: (location: LocationData) => void;
+    pageSize?: number;
 }
-export {};

package/dist/types/components/StorageBrowser/views/hooks/usePaginate.d.ts

@@ -9,7 +9,7 @@ interface UsePaginateInput<T> {
     items?: T[];
     onPaginate?: (page?: number) => void;
     page?: number;
-    pageSize?: number;
+    pageSize: number;
 }
 export declare const usePaginate: <T>({ items, onPaginate, page, pageSize, }: UsePaginateInput<T>) => UsePaginateState<T>;
 export {};

package/dist/types/components/StorageBrowser/views/types.d.ts

@@ -13,6 +13,12 @@ export interface ListViewState<T = any> {
     pageItems: T[];
 }
 export interface ListViewProps extends ActionViewProps, Partial<ListViewState> {
+    /**
+     * @description Number of items to display per page in listings
+     * @default 100
+     * @minimum 1
+     */
+    pageSize?: number;
 }
 export type StorageBrowserViews<T = string, K = {}> = Partial<PrimaryViews<T> & DefaultActionViews & K>;
 export interface PrimaryViews<T = string> {

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export type { FileUploaderHandle, FileUploaderProps, StorageImageProps, StorageManagerHandle, StorageManagerProps, DropZoneProps, ContainerProps, FileListProps, FilePickerProps, FileListHeaderProps, FileListFooterProps, } from './components';
 export { FileUploader, StorageImage, StorageManager } from './components';
-export type { StorageBrowserProps } from './components/StorageBrowser/StorageBrowserAmplify';
+export type { StorageBrowserProps, StorageBrowserProviderProps, } from './components/StorageBrowser/StorageBrowserAmplify';
 export { StorageBrowser } from './components/StorageBrowser/StorageBrowserAmplify';

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.16.0";
+export declare const VERSION = "3.17.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -46,9 +46,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.15.0",
-    "@aws-amplify/ui-react": "6.15.0",
-    "@aws-amplify/ui-react-core": "3.6.0",
+    "@aws-amplify/ui": "6.15.1",
+    "@aws-amplify/ui-react": "6.15.1",
+    "@aws-amplify/ui-react-core": "3.6.1",
     "tslib": "^2.5.2",
     "jszip": "^3.10.1"
   },
@@ -78,7 +78,7 @@
       "name": "StorageBrowser",
       "path": "dist/esm/index.mjs",
       "import": "{ StorageBrowser }",
-      "limit": "121 kB"
+      "limit": "121.1 kB"
     },
     {
       "name": "FileUploader",