@aws-amplify/ui-react-storage 3.7.1 → 3.8.0

package/dist/{createAmplifyAuthAdapter-D6MKiBgI.js → createAmplifyAuthAdapter-BcJMLIum.js}

@@ -32,7 +32,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const VERSION = '3.7.1';
+const VERSION = '3.8.0';
 
 const constructBucket = ({ bucket: bucketName, region, }) => ({ bucketName, region });
 const parseAccessGrantLocation = (location) => {
@@ -845,7 +845,7 @@ const CheckboxHeader = ({ content, }) => {
     return (React__namespace["default"].createElement(uiReact.Checkbox, { name: label ?? '', checked: checked, labelHidden: true, label: label, onChange: onSelect, id: id }));
 };
 
-const DataTable = ({ headers, rows, }) => {
+const DataTable = ({ headers, isLoading, rows, }) => {
     const mappedHeaders = headers.map(({ key, content, type }) => {
         switch (type) {
             case 'checkbox': {
@@ -869,44 +869,46 @@ const DataTable = ({ headers, rows, }) => {
             }
         }
     });
-    const mappedRows = rows.map(({ key, content }) => ({
-        key,
-        content: content.map(({ key, content, type }) => {
-            switch (type) {
-                case 'button': {
-                    return {
-                        key,
-                        content: React__namespace["default"].createElement(ButtonDataCell, { content: content }),
-                    };
-                }
-                case 'checkbox': {
-                    return {
-                        key,
-                        content: React__namespace["default"].createElement(CheckboxDataCell, { content: content }),
-                    };
-                }
-                case 'date': {
-                    return {
-                        key,
-                        content: React__namespace["default"].createElement(DateDataCell, { content: content }),
-                    };
-                }
-                case 'number': {
-                    return {
-                        key,
-                        content: React__namespace["default"].createElement(NumberDataCell, { content: content }),
-                    };
-                }
-                case 'text':
-                default: {
-                    return {
-                        key,
-                        content: React__namespace["default"].createElement(TextDataCell, { content: content }),
-                    };
+    const mappedRows = isLoading
+        ? []
+        : rows.map(({ key, content }) => ({
+            key,
+            content: content.map(({ key, content, type }) => {
+                switch (type) {
+                    case 'button': {
+                        return {
+                            key,
+                            content: React__namespace["default"].createElement(ButtonDataCell, { content: content }),
+                        };
+                    }
+                    case 'checkbox': {
+                        return {
+                            key,
+                            content: React__namespace["default"].createElement(CheckboxDataCell, { content: content }),
+                        };
+                    }
+                    case 'date': {
+                        return {
+                            key,
+                            content: React__namespace["default"].createElement(DateDataCell, { content: content }),
+                        };
+                    }
+                    case 'number': {
+                        return {
+                            key,
+                            content: React__namespace["default"].createElement(NumberDataCell, { content: content }),
+                        };
+                    }
+                    case 'text':
+                    default: {
+                        return {
+                            key,
+                            content: React__namespace["default"].createElement(TextDataCell, { content: content }),
+                        };
+                    }
                 }
-            }
-        }),
-    }));
+            }),
+        }));
     return React__namespace["default"].createElement(Table, { headers: mappedHeaders, rows: mappedRows });
 };
 
@@ -1184,1282 +1186,1283 @@ const componentsDefault = {
     Title,
 };
 
-const Fallback = () => (React__namespace["default"].createElement("div", { className: STORAGE_BROWSER_BLOCK_TO_BE_UPDATED },
-    React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__error-boundary` }, "Something went wrong.")));
-class ErrorBoundary extends React__namespace["default"].Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError(_error) {
-        // Update state so the next render will show the fallback UI.
-        return { hasError: true };
-    }
-    render() {
-        const { hasError } = this.state;
-        const { children } = this.props;
-        if (hasError) {
-            return React__namespace["default"].createElement(Fallback, null);
-        }
-        return children;
-    }
-}
-
-const CREDENTIALS_STORE_DEFAULT_SIZE = 10;
-const CREDENTIALS_REFRESH_WINDOW_MS = 30000;
-
-const serializedPermissions = (permissions) => permissions.sort().join('_');
-const createCacheKey = (location) => `${location.scope}_${serializedPermissions(location.permissions)}`;
-const pastTTL = (credentials) => {
-    const { expiration } = credentials;
-    return expiration.getTime() - CREDENTIALS_REFRESH_WINDOW_MS <= Date.now();
+const DEFAULT_ACTION_VIEW_DISPLAY_TEXT = {
+    actionCancelLabel: 'Cancel',
+    actionExitLabel: 'Exit',
+    actionDestinationLabel: 'Destination',
+    statusDisplayCanceledLabel: 'Canceled',
+    statusDisplayCompletedLabel: 'Completed',
+    statusDisplayFailedLabel: 'Failed',
+    statusDisplayInProgressLabel: 'In progress',
+    statusDisplayTotalLabel: 'Total',
+    statusDisplayQueuedLabel: 'Not started',
+    // empty by default
+    tableColumnCancelHeader: '',
+    tableColumnStatusHeader: 'Status',
+    tableColumnFolderHeader: 'Folder',
+    tableColumnNameHeader: 'Name',
+    tableColumnTypeHeader: 'Type',
+    tableColumnSizeHeader: 'Size',
+    tableColumnProgressHeader: 'Progress',
 };
-const setCacheRecord = (store, key, value) => {
-    if (store.capacity === store.values.size) {
-        // Pop least used entry. The Map's key are in insertion order.
-        // So first key is the last recently inserted.
-        const [oldestKey] = store.values.keys();
-        store.values.delete(oldestKey);
-        // TODO(@AllanZhengYP): Add log info when record is evicted.
-    }
-    // Add latest used value to the cache.
-    store.values.set(key, value);
+const DEFAULT_LIST_VIEW_DISPLAY_TEXT = {
+    loadingIndicatorLabel: 'Loading',
+    searchSubmitLabel: 'Submit',
+    searchClearLabel: 'Clear search',
+    getDateDisplayValue: (date) => new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        year: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h12',
+    }).format(date),
 };
-const dispatchRefresh = (refreshHandler, value, onRefreshFailure) => {
-    if (value.inflightCredentials) {
-        return value.inflightCredentials;
-    }
-    value.inflightCredentials = (async () => {
-        try {
-            const { credentials } = await refreshHandler({
-                scope: value.scope,
-                permissions: value.permissions,
-            });
-            value.credentials = credentials;
-            return { credentials };
-        }
-        catch (e) {
-            onRefreshFailure();
-            throw e;
+
+const DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Create folder',
+    actionStartLabel: 'Create folder',
+    folderNameLabel: 'Folder name',
+    folderNamePlaceholder: 'Folder name cannot contain "/", nor end or start with "."',
+    getValidationMessage: () => 'Folder name cannot contain "/", nor end or start with "."',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { FAILED, OVERWRITE_PREVENTED } = counts ?? {};
+        if (OVERWRITE_PREVENTED) {
+            return {
+                content: 'A folder already exists with the provided name',
+                type: 'warning',
+            };
         }
-        finally {
-            value.inflightCredentials = undefined;
+        if (FAILED) {
+            return {
+                content: 'There was an issue creating the folder.',
+                type: 'error',
+            };
         }
-    })();
-    return value.inflightCredentials;
-};
-/**
- * @internal
- */
-const initStore = (refreshHandler, size = CREDENTIALS_STORE_DEFAULT_SIZE) => {
-    internals.assertValidationError(size > 0, internals.StorageValidationErrorCode.InvalidLocationCredentialsCacheSize);
-    return {
-        capacity: size,
-        refreshHandler,
-        values: new Map(),
-    };
-};
-const getCacheValue = (store, location) => {
-    const cacheKey = createCacheKey(location);
-    const cachedValue = store.values.get(cacheKey);
-    const cachedCredentials = cachedValue?.credentials;
-    if (!cachedCredentials) {
-        return null;
-    }
-    // Delete and re-insert to key to map to indicate a latest reference in LRU.
-    store.values.delete(cacheKey);
-    if (!pastTTL(cachedCredentials)) {
-        // TODO(@AllanZhengYP): If the credential is still valid but will expire
-        // soon, we should return credentials AND dispatch a refresh.
-        store.values.set(cacheKey, cachedValue);
-        return cachedCredentials;
-    }
-    return null;
+        return { content: 'Folder created.', type: 'success' };
+    },
 };
-/**
- * Fetch new credentials value with refresh handler and cache the result in
- * LRU cache.
- * @internal
- */
-const fetchNewValue = async (store, location) => {
-    const storeValues = store.values;
-    const key = createCacheKey(location);
-    if (!storeValues.has(key)) {
-        const newStoreValue = {
-            scope: location.scope,
-            permissions: location.permissions,
+
+const DEFAULT_COPY_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Copy',
+    actionStartLabel: 'Copy',
+    actionDestinationLabel: 'Copy destination',
+    getListFoldersResultsMessage: ({ folders, query, message, hasError, hasExhaustedSearch, }) => {
+        if (!folders?.length) {
+            return {
+                content: query
+                    ? `No folders found matching "${query}"`
+                    : 'No subfolders found within selected folder.',
+                type: 'info',
+            };
+        }
+        if (message && !!query) {
+            return { content: 'Error loading folders.', type: 'error' };
+        }
+        if (hasError) {
+            return { content: 'Error loading folders.', type: 'error' };
+        }
+        if (hasExhaustedSearch) {
+            return {
+                content: 'Showing results for up to the first 10,000 items.',
+                type: 'info',
+            };
+        }
+    },
+    loadingIndicatorLabel: 'Loading',
+    overwriteWarningMessage: 'Copied files will overwrite existing files at selected destination.',
+    searchPlaceholder: 'Search for folders',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
+        if (COMPLETE === TOTAL) {
+            return {
+                content: 'All files copied.',
+                type: 'success',
+            };
+        }
+        if (FAILED === TOTAL) {
+            return { content: 'All files failed to copy.', type: 'error' };
+        }
+        return {
+            content: `${COMPLETE} files copied, ${FAILED} files failed to copy.`,
+            type: 'error',
         };
-        setCacheRecord(store, key, newStoreValue);
-    }
-    const storeValue = storeValues.get(key);
-    return dispatchRefresh(store.refreshHandler, storeValue, () => {
-        store.values.delete(key);
-    });
+    },
+    searchSubmitLabel: 'Submit',
+    searchClearLabel: 'Clear search',
 };
 
-/**
- * Keep all cache records for all instances of credentials store in a singleton
- * so we can reliably de-reference from the memory when we destroy a store
- * instance.
- */
-const storeRegistry = new WeakMap();
-/**
- * @internal
- */
-const createStore = (refreshHandler, size) => {
-    const storeSymbol = { value: Symbol('LocationCredentialsStore') };
-    storeRegistry.set(storeSymbol, initStore(refreshHandler, size));
-    return storeSymbol;
-};
-const getCredentialsStore = (storeSymbol) => {
-    internals.assertValidationError(storeRegistry.has(storeSymbol), internals.StorageValidationErrorCode.LocationCredentialsStoreDestroyed);
-    return storeRegistry.get(storeSymbol);
-};
-/**
- * @internal
- */
-const getValue = async (input) => {
-    const { storeSymbol: storeReference, location, forceRefresh } = input;
-    const store = getCredentialsStore(storeReference);
-    if (!forceRefresh) {
-        const credentials = getCacheValue(store, location);
-        if (credentials !== null) {
-            return { credentials };
+const DEFAULT_DELETE_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Delete',
+    actionStartLabel: 'Delete',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
+        if (COMPLETE === TOTAL) {
+            return { content: 'All files deleted.', type: 'success' };
         }
-    }
-    return fetchNewValue(store, location);
-};
-const removeStore = (storeSymbol) => {
-    storeRegistry.delete(storeSymbol);
+        if (FAILED === TOTAL) {
+            return { content: 'All files failed to delete.', type: 'error' };
+        }
+        return {
+            content: `${COMPLETE} files deleted, ${FAILED} files failed to delete.`,
+            type: 'error',
+        };
+    },
 };
 
-const validateS3Uri = (uri) => {
-    const s3UrlSchemaRegex = /^s3:\/\/[^/]+/;
-    internals.assertValidationError(s3UrlSchemaRegex.test(uri), internals.StorageValidationErrorCode.InvalidS3Uri);
-};
-const createLocationCredentialsStore = (input) => {
-    const storeSymbol = createStore(input.handler);
-    const store = {
-        getProvider(providerLocation) {
-            const locationCredentialsProvider = async ({ forceRefresh = false, } = {}) => {
-                validateS3Uri(providerLocation.scope);
-                // TODO(@AllanZhengYP): validate the action bucket and paths matches provider scope.
-                return getValue({
-                    storeSymbol,
-                    location: { ...providerLocation },
-                    forceRefresh,
-                });
+const DEFAULT_ERROR_MESSAGE$1 = 'There was an error loading items.';
+const DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
+    getListItemsResultMessage: (data) => {
+        const { items, hasExhaustedSearch, hasError = false, message, isLoading, } = data ?? {};
+        if (isLoading) {
+            return undefined;
+        }
+        if (hasError) {
+            return {
+                type: 'error',
+                content: message ?? DEFAULT_ERROR_MESSAGE$1,
             };
-            return locationCredentialsProvider;
-        },
-        destroy() {
-            removeStore(storeSymbol);
-        },
-    };
-    return store;
-};
-
-const createCredentialsStore = ({ ...input }) => {
-    const { destroy, getProvider } = createLocationCredentialsStore(input);
-    return {
-        destroy,
-        getCredentials: ({ scope, permissions }) => getProvider({
-            scope,
-            permissions,
-        }),
-    };
-};
-const isCredentialsStore = (value) => ui.isFunction(value?.getCredentials);
-function useCredentialsStore({ getLocationCredentials: handler, initialValue, onDestroy, registerAuthListener, }) {
-    const hasExistingStore = isCredentialsStore(initialValue);
-    const [store, setStore] = React__namespace["default"].useState(() => hasExistingStore ? initialValue : createCredentialsStore({ handler }));
-    const { destroy } = store;
-    React__namespace["default"].useEffect(() => {
-        if (hasExistingStore) {
-            return;
         }
-        const handleAuthStatusChange = () => {
-            destroy();
-            if (ui.isFunction(onDestroy)) {
-                onDestroy();
-            }
-            setStore(createCredentialsStore({ handler }));
-        };
-        // provide `handleAuthStatusChange` to consumer
-        registerAuthListener(handleAuthStatusChange);
-    }, [destroy, handler, hasExistingStore, onDestroy, registerAuthListener]);
-    return store;
-}
-
-const ERROR_MESSAGE$3 = '`useCredentials` must be called from within a `CredentialsProvider`.';
-const { useCredentials, CredentialsContext } = uiReactCore.createContextUtilities({
-    contextName: 'Credentials',
-    errorMessage: ERROR_MESSAGE$3,
-});
-function CredentialsProvider({ children, ...props }) {
-    const initialValue = React__namespace["default"].useContext(CredentialsContext);
-    const value = useCredentialsStore({ ...props, initialValue });
-    return (React__namespace["default"].createElement(CredentialsContext.Provider, { value: value }, children));
-}
-
-const ERROR_MESSAGE$2 = 'Invalid `location` value provided as initial value to `LocationProvider.';
-const DEFAULT_STATE$1 = {
-    current: undefined,
-    path: '',
-    key: '',
-};
-function handleAction$1(state, action) {
-    switch (action.type) {
-        case 'NAVIGATE': {
-            const { location, path = '' } = action;
-            if (state.current?.id === location.id && state.path === path) {
-                return state;
-            }
+        if (!items?.length && hasExhaustedSearch) {
             return {
-                current: location,
-                path,
-                key: `${location.prefix ?? ''}${path}`,
+                type: 'info',
+                content: `No results found in the first 10,000 items.`,
             };
         }
-        case 'RESET_LOCATION': {
-            return DEFAULT_STATE$1;
+        if (!items?.length) {
+            return {
+                type: 'info',
+                content: 'No files.',
+            };
         }
-    }
-}
-const defaultValue$7 = [DEFAULT_STATE$1, ui.noop];
-const { LocationContext, useLocation } = uiReactCore.createContextUtilities({
-    contextName: 'Location',
-    defaultValue: defaultValue$7,
-});
-function LocationProvider({ children, location, path = '', }) {
-    if (location) {
-        assertLocationData(location, ERROR_MESSAGE$2);
-    }
-    const value = React__namespace["default"].useReducer(handleAction$1, location
-        ? {
-            current: location,
-            path,
-            key: `${location.prefix ?? ''}${path}`,
+        if (hasExhaustedSearch) {
+            return {
+                type: 'info',
+                content: `Showing results for up to the first 10,000 items.`,
+            };
         }
-        : DEFAULT_STATE$1);
-    return (React__namespace["default"].createElement(LocationContext.Provider, { value: value }, children));
-}
-
-const compareFileItems = (prev, next) => prev.key.localeCompare(next.key);
-const resolveFiles = (prevItems, files) => {
-    if (!files?.length)
-        return prevItems;
-    // construct `nextItems` and filter out existing `file` entries
-    const nextItems = files.reduce((items, file) => {
-        const { name, webkitRelativePath } = file;
-        return prevItems.some(({ file: existing }) => existing.name === name &&
-            existing.webkitRelativePath === webkitRelativePath)
-            ? items
-            : items.concat({
-                key: ui.isEmpty(webkitRelativePath) ? name : webkitRelativePath,
-                id: crypto.randomUUID(),
-                file,
-            });
-    }, []);
-    if (!nextItems.length)
-        return prevItems;
-    if (!prevItems.length) {
-        return nextItems.sort(compareFileItems);
-    }
-    return prevItems.concat(nextItems).sort(compareFileItems);
+        // TODO: add more cases as needed
+        return undefined;
+    },
+    searchSubfoldersToggleLabel: 'Include subfolders',
+    searchPlaceholder: 'Search current folder',
+    tableColumnLastModifiedHeader: 'Last modified',
+    tableColumnNameHeader: 'Name',
+    tableColumnSizeHeader: 'Size',
+    tableColumnTypeHeader: 'Type',
+    selectFileLabel: 'Select file',
+    selectAllFilesLabel: 'Select all files',
+    getActionListItemLabel: (key = '') => {
+        switch (key) {
+            case 'Copy':
+                return 'Copy';
+            case 'Delete':
+                return 'Delete';
+            case 'Create folder':
+                return 'Create folder';
+            case 'Upload':
+                return 'Upload';
+            default:
+                return key;
+        }
+    },
+    getTitle: (location) => {
+        const { current, key } = location;
+        const { bucket = '' } = current ?? {};
+        return key || bucket;
+    },
 };
-const filesReducer = (prevItems, input) => {
-    switch (input.type) {
-        case 'ADD_FILE_ITEMS': {
-            return resolveFiles(prevItems, input.files);
+
+const DEFAULT_ERROR_MESSAGE = 'There was an error loading locations.';
+const DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
+    title: 'Home',
+    searchPlaceholder: 'Filter folders and files',
+    getListLocationsResultMessage: (data) => {
+        const { isLoading, items, hasExhaustedSearch, hasError = false, message, } = data ?? {};
+        if (isLoading) {
+            return undefined;
         }
-        case 'REMOVE_FILE_ITEM': {
-            const filteredItems = prevItems.filter(({ id }) => id !== input.id);
-            return filteredItems.length === prevItems.length
-                ? prevItems
-                : filteredItems;
+        if (hasError) {
+            return {
+                type: 'error',
+                content: message ?? DEFAULT_ERROR_MESSAGE,
+            };
         }
-        case 'RESET_FILE_ITEMS': {
-            return [];
+        if (items?.length === 0 && !hasExhaustedSearch) {
+            return {
+                type: 'info',
+                content: 'No folders or files.',
+            };
         }
-        // TODO: clear message
-    }
-};
-const parseFileSelectParams = (value) => {
-    if (ui.isUndefined(value))
-        return ['FILE', undefined];
-    if (ui.isString(value))
-        return [value, undefined];
-    const [selectType, ...rest] = value;
-    return [selectType, !rest?.length ? undefined : { accept: rest.join() }];
-};
-
-const defaultValue$6 = [undefined, ui.noop];
-const { FilesContext, useFiles } = uiReactCore.createContextUtilities({
-    contextName: 'Files',
-    defaultValue: defaultValue$6,
-});
-function FilesProvider({ children, }) {
-    const [items, dispatch] = React__namespace["default"].useReducer(filesReducer, []);
-    const [fileInput, handleFileSelect] = internal.useFileSelect((nextFiles) => {
-        dispatch({ type: 'ADD_FILE_ITEMS', files: nextFiles });
-    });
-    const handleFilesAction = React__namespace["default"].useCallback((action) => {
-        if (action.type === 'SELECT_FILES') {
-            handleFileSelect(...parseFileSelectParams(action.selectionType));
+        if (hasExhaustedSearch) {
+            return {
+                type: 'info',
+                content: `Showing results for up to the first 10,000 items.`,
+            };
         }
-        else {
-            dispatch(action);
+        // TODO: add more cases as needed
+        return undefined;
+    },
+    getPermissionName: (permissions) => {
+        let text = '';
+        if (permissions.includes('get') || permissions.includes('list')) {
+            text = 'Read';
         }
-    }, [handleFileSelect]);
-    const value = React__namespace["default"].useMemo(() => [items, handleFilesAction], [items, handleFilesAction]);
-    return (React__namespace["default"].createElement(FilesContext.Provider, { value: value },
-        fileInput,
-        children));
-}
-
-const handleAction = (event) => {
-    switch (event.type) {
-        case 'SET_ACTION_TYPE': {
-            return event.actionType;
+        if (permissions.includes('write') || permissions.includes('delete')) {
+            text = text ? 'Read/Write' : 'Write';
         }
-        case 'RESET_ACTION_TYPE': {
-            return undefined;
+        if (!text) {
+            text = permissions.join('/');
         }
-    }
+        return text;
+    },
+    getDownloadLabel: (fileName) => `Download ${fileName}`,
+    tableColumnBucketHeader: 'Bucket',
+    tableColumnFolderHeader: 'Folder',
+    tableColumnPermissionsHeader: 'Permissions',
+    tableColumnActionsHeader: 'Actions',
 };
-function useActionTypeState(initialState) {
-    const [actionType, setActionType] = React__namespace["default"].useState(initialState);
-    const handler = React__namespace["default"].useCallback((action) => setActionType(handleAction(action)), []);
-    return [actionType, handler];
-}
-
-const defaultValue$5 = [undefined, ui.noop];
-const { ActionTypeContext, useActionType } = uiReactCore.createContextUtilities({
-    contextName: 'ActionType',
-    defaultValue: defaultValue$5,
-});
-function ActionTypeProvider({ actionType, children, }) {
-    const value = useActionTypeState(actionType);
-    return (React__namespace["default"].createElement(ActionTypeContext.Provider, { value: value }, children));
-}
 
-const DEFAULT_STATE = {
-    fileDataItems: undefined,
-};
-const locationItemsReducer = (prevState, event) => {
-    switch (event.type) {
-        case 'SET_LOCATION_ITEMS': {
-            const { items } = event;
-            if (!items?.length)
-                return prevState;
-            if (!prevState.fileDataItems?.length) {
-                return { fileDataItems: items.map(createFileDataItem) };
-            }
-            const nextFileDataItems = items?.reduce((fileDataItems, data) => prevState.fileDataItems?.some(({ id }) => id === data.id)
-                ? fileDataItems
-                : fileDataItems.concat(createFileDataItem(data)), []);
-            if (!nextFileDataItems?.length)
-                return prevState;
+const DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT = {
+    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
+    title: 'Upload',
+    actionStartLabel: 'Upload',
+    addFilesLabel: 'Add files',
+    addFolderLabel: 'Add folder',
+    getActionCompleteMessage: (data) => {
+        const { counts } = data ?? {};
+        const { COMPLETE, FAILED, OVERWRITE_PREVENTED, CANCELED, TOTAL } = counts ?? {};
+        const hasPreventedOverwrite = !!OVERWRITE_PREVENTED;
+        const hasFailure = !!FAILED;
+        const hasSuccess = !!COMPLETE;
+        const hasCanceled = !!CANCELED;
+        const type = hasFailure
+            ? 'error'
+            : hasPreventedOverwrite || hasCanceled
+                ? 'warning'
+                : 'success';
+        const preventedOverwriteMessage = hasPreventedOverwrite
+            ? [
+                'Overwrite prevented for',
+                OVERWRITE_PREVENTED === TOTAL ? 'all' : String(OVERWRITE_PREVENTED),
+                OVERWRITE_PREVENTED > 1 || OVERWRITE_PREVENTED === TOTAL
+                    ? `files`
+                    : 'file',
+            ].join(' ')
+            : undefined;
+        const canceledMessage = hasCanceled
+            ? [
+                CANCELED === TOTAL ? 'All' : String(CANCELED),
+                CANCELED > 1 || CANCELED === TOTAL ? `uploads` : 'upload',
+                'canceled',
+            ].join(' ')
+            : undefined;
+        const failedMessage = hasFailure
+            ? [
+                FAILED === TOTAL ? 'All' : String(FAILED),
+                FAILED > 1 || FAILED === TOTAL ? `files` : 'file',
+                'failed to upload',
+            ].join(' ')
+            : undefined;
+        const completedMessage = hasSuccess
+            ? [
+                COMPLETE === TOTAL ? 'All' : String(COMPLETE),
+                COMPLETE > 1 || COMPLETE === TOTAL ? `files` : 'file',
+                'uploaded',
+            ].join(' ')
+            : undefined;
+        const messages = [
+            preventedOverwriteMessage,
+            failedMessage,
+            canceledMessage,
+            completedMessage,
+        ].filter(Boolean);
+        if (messages.length > 0) {
             return {
-                fileDataItems: prevState.fileDataItems.concat(nextFileDataItems),
+                content: messages.join(', ') + '.',
+                type,
             };
         }
-        case 'REMOVE_LOCATION_ITEM': {
-            const { id } = event;
-            if (!prevState.fileDataItems)
-                return prevState;
-            const fileDataItems = prevState.fileDataItems.filter((item) => item.id !== id);
-            if (fileDataItems.length === prevState.fileDataItems.length) {
-                return prevState;
-            }
-            return { fileDataItems };
+        return { content: 'All files uploaded.', type };
+    },
+    getFilesValidationMessage: (data) => {
+        if (!data?.invalidFiles) {
+            return undefined;
         }
-        case 'RESET_LOCATION_ITEMS': {
-            return DEFAULT_STATE;
+        const tooBigFileNames = data.invalidFiles
+            .filter(({ file }) => isFileTooBig(file))
+            .map(({ file }) => file.name)
+            .join(', ');
+        if (tooBigFileNames) {
+            return {
+                content: `Files larger than 160GB cannot be added to the upload queue: ${tooBigFileNames}`,
+                type: 'warning',
+            };
         }
-    }
+        return undefined;
+    },
+    statusDisplayOverwritePreventedLabel: 'Overwrite prevented',
+    overwriteToggleLabel: 'Overwrite existing files',
 };
-const defaultValue$4 = [DEFAULT_STATE, ui.noop];
-const { LocationItemsContext, useLocationItems } = uiReactCore.createContextUtilities({ contextName: 'LocationItems', defaultValue: defaultValue$4 });
-function LocationItemsProvider({ children, }) {
-    const value = React__namespace["default"].useReducer(locationItemsReducer, DEFAULT_STATE);
-    return (React__namespace["default"].createElement(LocationItemsContext.Provider, { value: value }, children));
+
+const DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT = {
+    CopyView: DEFAULT_COPY_VIEW_DISPLAY_TEXT,
+    CreateFolderView: DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT,
+    DeleteView: DEFAULT_DELETE_VIEW_DISPLAY_TEXT,
+    LocationDetailView: DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT,
+    LocationsView: DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT,
+    UploadView: DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT,
+};
+
+const { DisplayTextContext, useDisplayText } = uiReactCore.createContextUtilities({
+    contextName: 'DisplayText',
+    errorMessage: '`useDisplayText` must be called inside `DisplayTextProvider`',
+});
+function resolveDisplayText(displayText) {
+    if (!displayText)
+        return DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT;
+    // override
+    const { CopyView, CreateFolderView, DeleteView, LocationDetailView, LocationsView, UploadView, } = displayText;
+    return {
+        CopyView: { ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CopyView, ...CopyView },
+        CreateFolderView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CreateFolderView,
+            ...CreateFolderView,
+        },
+        DeleteView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.DeleteView,
+            ...DeleteView,
+        },
+        LocationDetailView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView,
+            ...LocationDetailView,
+        },
+        LocationsView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationsView,
+            ...LocationsView,
+        },
+        UploadView: {
+            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.UploadView,
+            ...UploadView,
+        },
+    };
+}
+function DisplayTextProvider({ children, displayText: _override, }) {
+    // do deep merge here of default and override here
+    const resolvedDisplayText = React__namespace["default"].useMemo(() => resolveDisplayText(_override), [_override]);
+    return (React__namespace["default"].createElement(DisplayTextContext.Provider, { value: resolvedDisplayText }, children));
 }
 
-function StoreProvider(props) {
-    const { actionType, children, location, path } = props;
-    return (React__namespace["default"].createElement(FilesProvider, null,
-        React__namespace["default"].createElement(LocationProvider, { location: location, path: path },
-            React__namespace["default"].createElement(LocationItemsProvider, null,
-                React__namespace["default"].createElement(ActionTypeProvider, { actionType: actionType }, children)))));
+const Fallback = () => (React__namespace["default"].createElement("div", { className: STORAGE_BROWSER_BLOCK_TO_BE_UPDATED },
+    React__namespace["default"].createElement("div", { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__error-boundary` }, "Something went wrong.")));
+class ErrorBoundary extends React__namespace["default"].Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(_error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    render() {
+        const { hasError } = this.state;
+        const { children } = this.props;
+        if (hasError) {
+            return React__namespace["default"].createElement(Fallback, null);
+        }
+        return children;
+    }
 }
 
-function useStore() {
-    const [actionType, dispatchActionType] = useActionType();
-    const [files, dispatchFilesAction] = useFiles();
-    const [location, dispatchLocationAction] = useLocation();
-    const [locationItems, dispatchLocationItemsAction] = useLocationItems();
-    const dispatchHandler = React__namespace["default"].useCallback((action) => {
-        switch (action.type) {
-            case 'ADD_FILE_ITEMS':
-            case 'REMOVE_FILE_ITEM':
-            case 'SELECT_FILES':
-            case 'RESET_FILE_ITEMS': {
-                dispatchFilesAction(action);
-                break;
-            }
-            case 'NAVIGATE':
-            case 'RESET_LOCATION': {
-                dispatchLocationAction(action);
-                break;
-            }
-            case 'SET_LOCATION_ITEMS':
-            case 'REMOVE_LOCATION_ITEM':
-            case 'RESET_LOCATION_ITEMS': {
-                dispatchLocationItemsAction(action);
-                break;
-            }
-            case 'SET_ACTION_TYPE':
-            case 'RESET_ACTION_TYPE': {
-                dispatchActionType(action);
-                break;
-            }
-        }
-    }, [
-        dispatchActionType,
-        dispatchFilesAction,
-        dispatchLocationAction,
-        dispatchLocationItemsAction,
-    ]);
-    return [{ actionType, files, location, locationItems }, dispatchHandler];
-}
-
-const getErrorMessage = (propertyName) => `Unable to resolve credentials due to invalid value of '${propertyName}'`;
-function useGetActionInputCallback({ accountId, customEndpoint, region, }) {
-    const { getCredentials } = useCredentials();
-    const [{ location }] = useStore();
-    const { current, key } = location;
-    return React__namespace["default"].useCallback((_location) => {
-        // prefer passed in location / prefix over current location in state
-        const location = _location ?? current;
-        // when `location` has been provided as a param, resolve `_prefix` to `location.prefix`.
-        // in the default scenario where `current` is the target `location` use the fully qualified `key`
-        // that includes the default `prefix` and any additional prefixes from navigation
-        const prefix = _location ? _location.prefix : key;
-        assertLocationData(location, getErrorMessage('locationData'));
-        assertPrefix(prefix, getErrorMessage('prefix'));
-        const { bucket, permissions, type } = location;
-        // BUCKET/PREFIX grants end with `*`, but object grants do not.
-        const scope = `s3://${bucket}/${prefix}${type === 'OBJECT' ? '' : '*'}`;
-        return {
-            accountId,
-            bucket,
-            credentials: getCredentials({
-                permissions,
-                scope,
-            }),
-            region,
-            customEndpoint,
-        };
-    }, [accountId, current, customEndpoint, getCredentials, key, region]);
-}
-
-const ERROR_MESSAGE$1 = '`useGetActionInput` must be called from within a `ConfigurationProvider`.';
-const { useGetActionInput, GetActionInputContext } = uiReactCore.createContextUtilities({
-    contextName: 'GetActionInput',
-    errorMessage: ERROR_MESSAGE$1,
-});
-function GetActionInputProvider({ accountId, children, customEndpoint, region, }) {
-    const value = useGetActionInputCallback({
-        accountId,
-        customEndpoint,
-        region,
-    });
-    return (React__namespace["default"].createElement(GetActionInputContext.Provider, { value: value }, children));
-}
-
-const Passthrough = ({ children }) => (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, children));
-function createConfigurationProvider(input) {
-    const { accountId, ChildComponent, displayName, region, customEndpoint, ...rest } = input;
-    const Child = elements.isComponent(ChildComponent) ? ChildComponent : Passthrough;
-    const Provider = (props) => (React__namespace["default"].createElement(CredentialsProvider, { ...rest },
-        React__namespace["default"].createElement(GetActionInputProvider, { accountId: accountId, region: region, customEndpoint: customEndpoint },
-            React__namespace["default"].createElement(Child, { ...props }))));
-    Provider.displayName = displayName;
-    return Provider;
-}
-
-const defaultValue$3 = { data: {} };
-const { useControlsContext, ControlsContextProvider } = uiReactCore.createContextUtilities({
-    contextName: 'ControlsContext',
-    defaultValue: defaultValue$3,
-});
+const CREDENTIALS_STORE_DEFAULT_SIZE = 10;
+const CREDENTIALS_REFRESH_WINDOW_MS = 30000;
 
-const useActionCancel = () => {
-    const { data: { actionCancelLabel, isActionCancelDisabled }, onActionCancel, } = useControlsContext();
-    return {
-        onCancel: onActionCancel,
-        isDisabled: isActionCancelDisabled,
-        label: actionCancelLabel,
-    };
+const serializedPermissions = (permissions) => permissions.sort().join('_');
+const createCacheKey = (location) => `${location.scope}_${serializedPermissions(location.permissions)}`;
+const pastTTL = (credentials) => {
+    const { expiration } = credentials;
+    return expiration.getTime() - CREDENTIALS_REFRESH_WINDOW_MS <= Date.now();
 };
-
-function useResolvedComposable(DefaultComposable, name) {
-    const { composables } = useComposables();
-    const Composable = React__namespace["default"].useMemo(() => {
-        const ResolvedComposable = (props) => {
-            const Resolved = composables?.[name] ?? DefaultComposable;
-            return React__namespace["default"].createElement(Resolved, { ...props });
-        };
-        ResolvedComposable.displayName = name;
-        return ResolvedComposable;
-    }, [composables, DefaultComposable, name]);
-    return Composable;
-}
-
-const ActionCancelControl = () => {
-    const props = useActionCancel();
-    const Resolved = useResolvedComposable(ActionCancel, 'ActionCancel');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const setCacheRecord = (store, key, value) => {
+    if (store.capacity === store.values.size) {
+        // Pop least used entry. The Map's key are in insertion order.
+        // So first key is the last recently inserted.
+        const [oldestKey] = store.values.keys();
+        store.values.delete(oldestKey);
+        // TODO(@AllanZhengYP): Add log info when record is evicted.
+    }
+    // Add latest used value to the cache.
+    store.values.set(key, value);
 };
-
-const getNavigationItems = ({ destinationParts, location, onNavigate, }) => {
-    const { bucket, permissions, prefix = '', type } = location;
-    const destinationSubpaths = [];
-    return destinationParts.map((part, index) => {
-        const isCurrent = index === destinationParts.length - 1;
-        if (index !== 0) {
-            destinationSubpaths.push(part);
+const dispatchRefresh = (refreshHandler, value, onRefreshFailure) => {
+    if (value.inflightCredentials) {
+        return value.inflightCredentials;
+    }
+    value.inflightCredentials = (async () => {
+        try {
+            const { credentials } = await refreshHandler({
+                scope: value.scope,
+                permissions: value.permissions,
+            });
+            value.credentials = credentials;
+            return { credentials };
         }
-        const destinationPath = `${destinationSubpaths.concat('').join('/')}`;
-        const destination = {
-            id: crypto.randomUUID(),
-            type,
-            permissions,
-            bucket,
-            prefix,
-        };
-        return {
-            name: part,
-            ...(isCurrent && { isCurrent }),
-            onNavigate: () => {
-                onNavigate?.(destination, destinationPath);
-            },
-        };
-    });
-};
-
-const getNavigationParts = ({ location, path, includeBucketInPrefix, }) => {
-    const { bucket, prefix = '', type } = location;
-    const trimmedPrefix = prefix.endsWith('/') ? prefix.slice(0, -1) : prefix;
-    const trimmedPath = path.endsWith('/') ? path.slice(0, -1) : path;
-    const firstPrefixPart = [];
-    if (type !== 'BUCKET') {
-        if (includeBucketInPrefix) {
-            firstPrefixPart.push(bucket);
+        catch (e) {
+            onRefreshFailure();
+            throw e;
         }
-        if (trimmedPrefix) {
-            if (includeBucketInPrefix) {
-                firstPrefixPart.push('/');
-            }
-            firstPrefixPart.push(trimmedPrefix);
+        finally {
+            value.inflightCredentials = undefined;
         }
+    })();
+    return value.inflightCredentials;
+};
+/**
+ * @internal
+ */
+const initStore = (refreshHandler, size = CREDENTIALS_STORE_DEFAULT_SIZE) => {
+    internals.assertValidationError(size > 0, internals.StorageValidationErrorCode.InvalidLocationCredentialsCacheSize);
+    return {
+        capacity: size,
+        refreshHandler,
+        values: new Map(),
+    };
+};
+const getCacheValue = (store, location) => {
+    const cacheKey = createCacheKey(location);
+    const cachedValue = store.values.get(cacheKey);
+    const cachedCredentials = cachedValue?.credentials;
+    if (!cachedCredentials) {
+        return null;
     }
-    const prefixParts = type === 'BUCKET' ? [bucket] : [firstPrefixPart.join('')];
-    if (type === 'BUCKET' && trimmedPrefix) {
-        prefixParts.push(trimmedPrefix);
+    // Delete and re-insert to key to map to indicate a latest reference in LRU.
+    store.values.delete(cacheKey);
+    if (!pastTTL(cachedCredentials)) {
+        // TODO(@AllanZhengYP): If the credential is still valid but will expire
+        // soon, we should return credentials AND dispatch a refresh.
+        store.values.set(cacheKey, cachedValue);
+        return cachedCredentials;
     }
-    const pathParts = trimmedPath ? trimmedPath.split('/') : [];
-    return prefixParts.concat(pathParts);
+    return null;
 };
-
-// import { ActionDestinationProps } from '../../composables/ActionDestination';
-const useActionDestination = () => {
-    const { data, onSelectDestination } = useControlsContext();
-    const { actionDestinationLabel, isActionDestinationNavigable, destination } = data;
-    return React__namespace["default"].useMemo(() => {
-        if (!destination?.current) {
-            return { items: [] };
-        }
-        const { current, path } = destination;
-        const destinationParts = getNavigationParts({
-            location: current,
-            path,
-        });
-        return {
-            label: actionDestinationLabel,
-            items: getNavigationItems({
-                location: current,
-                destinationParts,
-                onNavigate: onSelectDestination,
-            }),
-            isNavigable: isActionDestinationNavigable,
+/**
+ * Fetch new credentials value with refresh handler and cache the result in
+ * LRU cache.
+ * @internal
+ */
+const fetchNewValue = async (store, location) => {
+    const storeValues = store.values;
+    const key = createCacheKey(location);
+    if (!storeValues.has(key)) {
+        const newStoreValue = {
+            scope: location.scope,
+            permissions: location.permissions,
         };
-    }, [
-        actionDestinationLabel,
-        isActionDestinationNavigable,
-        destination,
-        onSelectDestination,
-    ]);
+        setCacheRecord(store, key, newStoreValue);
+    }
+    const storeValue = storeValues.get(key);
+    return dispatchRefresh(store.refreshHandler, storeValue, () => {
+        store.values.delete(key);
+    });
+};
+
+/**
+ * Keep all cache records for all instances of credentials store in a singleton
+ * so we can reliably de-reference from the memory when we destroy a store
+ * instance.
+ */
+const storeRegistry = new WeakMap();
+/**
+ * @internal
+ */
+const createStore = (refreshHandler, size) => {
+    const storeSymbol = { value: Symbol('LocationCredentialsStore') };
+    storeRegistry.set(storeSymbol, initStore(refreshHandler, size));
+    return storeSymbol;
+};
+const getCredentialsStore = (storeSymbol) => {
+    internals.assertValidationError(storeRegistry.has(storeSymbol), internals.StorageValidationErrorCode.LocationCredentialsStoreDestroyed);
+    return storeRegistry.get(storeSymbol);
+};
+/**
+ * @internal
+ */
+const getValue = async (input) => {
+    const { storeSymbol: storeReference, location, forceRefresh } = input;
+    const store = getCredentialsStore(storeReference);
+    if (!forceRefresh) {
+        const credentials = getCacheValue(store, location);
+        if (credentials !== null) {
+            return { credentials };
+        }
+    }
+    return fetchNewValue(store, location);
 };
-
-const ActionDestinationControl = () => {
-    const props = useActionDestination();
-    const Resolved = useResolvedComposable(ActionDestination$1, 'ActionDestination');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const removeStore = (storeSymbol) => {
+    storeRegistry.delete(storeSymbol);
 };
 
-const useActionExit = () => {
-    const { data: { actionExitLabel: label, isActionExitDisabled: isDisabled }, onActionExit: onExit, } = useControlsContext();
-    return { label, isDisabled, onExit };
+const validateS3Uri = (uri) => {
+    const s3UrlSchemaRegex = /^s3:\/\/[^/]+/;
+    internals.assertValidationError(s3UrlSchemaRegex.test(uri), internals.StorageValidationErrorCode.InvalidS3Uri);
 };
-
-const ActionExitControl = () => {
-    const props = useActionExit();
-    const Resolved = useResolvedComposable(ActionExit, 'ActionExit');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const createLocationCredentialsStore = (input) => {
+    const storeSymbol = createStore(input.handler);
+    const store = {
+        getProvider(providerLocation) {
+            const locationCredentialsProvider = async ({ forceRefresh = false, } = {}) => {
+                validateS3Uri(providerLocation.scope);
+                // TODO(@AllanZhengYP): validate the action bucket and paths matches provider scope.
+                return getValue({
+                    storeSymbol,
+                    location: { ...providerLocation },
+                    forceRefresh,
+                });
+            };
+            return locationCredentialsProvider;
+        },
+        destroy() {
+            removeStore(storeSymbol);
+        },
+    };
+    return store;
 };
 
-const useActionStart = () => {
-    const { data: { actionStartLabel, isActionStartDisabled }, onActionStart, } = useControlsContext();
+const createCredentialsStore = ({ ...input }) => {
+    const { destroy, getProvider } = createLocationCredentialsStore(input);
     return {
-        label: actionStartLabel,
-        isDisabled: isActionStartDisabled,
-        onStart: onActionStart,
+        destroy,
+        getCredentials: ({ scope, permissions }) => getProvider({
+            scope,
+            permissions,
+        }),
     };
 };
+const isCredentialsStore = (value) => ui.isFunction(value?.getCredentials);
+function useCredentialsStore({ getLocationCredentials: handler, initialValue, onDestroy, registerAuthListener, }) {
+    const hasExistingStore = isCredentialsStore(initialValue);
+    const [store, setStore] = React__namespace["default"].useState(() => hasExistingStore ? initialValue : createCredentialsStore({ handler }));
+    const { destroy } = store;
+    React__namespace["default"].useEffect(() => {
+        if (hasExistingStore) {
+            return;
+        }
+        const handleAuthStatusChange = () => {
+            destroy();
+            if (ui.isFunction(onDestroy)) {
+                onDestroy();
+            }
+            setStore(createCredentialsStore({ handler }));
+        };
+        // provide `handleAuthStatusChange` to consumer
+        registerAuthListener(handleAuthStatusChange);
+    }, [destroy, handler, hasExistingStore, onDestroy, registerAuthListener]);
+    return store;
+}
 
-const ActionStartControl = () => {
-    const props = useActionStart();
-    const Resolved = useResolvedComposable(ActionStart, 'ActionStart');
-    return React__namespace["default"].createElement(Resolved, { ...props });
-};
+const ERROR_MESSAGE$3 = '`useCredentials` must be called from within a `CredentialsProvider`.';
+const { useCredentials, CredentialsContext } = uiReactCore.createContextUtilities({
+    contextName: 'Credentials',
+    errorMessage: ERROR_MESSAGE$3,
+});
+function CredentialsProvider({ children, ...props }) {
+    const initialValue = React__namespace["default"].useContext(CredentialsContext);
+    const value = useCredentialsStore({ ...props, initialValue });
+    return (React__namespace["default"].createElement(CredentialsContext.Provider, { value: value }, children));
+}
 
-const useAddFiles = () => {
-    const { data: { addFilesLabel, isAddFilesDisabled }, onAddFiles, } = useControlsContext();
-    return {
-        isDisabled: isAddFilesDisabled,
-        label: addFilesLabel,
-        onAddFiles,
-    };
+const ERROR_MESSAGE$2 = 'Invalid `location` value provided as initial value to `LocationProvider.';
+const DEFAULT_STATE$1 = {
+    current: undefined,
+    path: '',
+    key: '',
 };
+function handleAction$1(state, action) {
+    switch (action.type) {
+        case 'NAVIGATE': {
+            const { location, path = '' } = action;
+            if (state.current?.id === location.id && state.path === path) {
+                return state;
+            }
+            return {
+                current: location,
+                path,
+                key: `${location.prefix ?? ''}${path}`,
+            };
+        }
+        case 'RESET_LOCATION': {
+            return DEFAULT_STATE$1;
+        }
+    }
+}
+const defaultValue$7 = [DEFAULT_STATE$1, ui.noop];
+const { LocationContext, useLocation } = uiReactCore.createContextUtilities({
+    contextName: 'Location',
+    defaultValue: defaultValue$7,
+});
+function LocationProvider({ children, location, path = '', }) {
+    if (location) {
+        assertLocationData(location, ERROR_MESSAGE$2);
+    }
+    const value = React__namespace["default"].useReducer(handleAction$1, location
+        ? {
+            current: location,
+            path,
+            key: `${location.prefix ?? ''}${path}`,
+        }
+        : DEFAULT_STATE$1);
+    return (React__namespace["default"].createElement(LocationContext.Provider, { value: value }, children));
+}
 
-const AddFilesControl = () => {
-    const props = useAddFiles();
-    const Resolved = useResolvedComposable(AddFiles, 'AddFiles');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const compareFileItems = (prev, next) => prev.key.localeCompare(next.key);
+const resolveFiles = (prevItems, files) => {
+    if (!files?.length)
+        return prevItems;
+    // construct `nextItems` and filter out existing `file` entries
+    const nextItems = files.reduce((items, file) => {
+        const { name, webkitRelativePath } = file;
+        return prevItems.some(({ file: existing }) => existing.name === name &&
+            existing.webkitRelativePath === webkitRelativePath)
+            ? items
+            : items.concat({
+                key: ui.isEmpty(webkitRelativePath) ? name : webkitRelativePath,
+                id: crypto.randomUUID(),
+                file,
+            });
+    }, []);
+    if (!nextItems.length)
+        return prevItems;
+    if (!prevItems.length) {
+        return nextItems.sort(compareFileItems);
+    }
+    return prevItems.concat(nextItems).sort(compareFileItems);
 };
-
-const useAddFolder = () => {
-    const { data: { addFolderLabel, isAddFolderDisabled }, onAddFolder, } = useControlsContext();
-    return {
-        isDisabled: isAddFolderDisabled,
-        label: addFolderLabel,
-        onAddFolder,
-    };
+const filesReducer = (prevItems, input) => {
+    switch (input.type) {
+        case 'ADD_FILE_ITEMS': {
+            return resolveFiles(prevItems, input.files);
+        }
+        case 'REMOVE_FILE_ITEM': {
+            const filteredItems = prevItems.filter(({ id }) => id !== input.id);
+            return filteredItems.length === prevItems.length
+                ? prevItems
+                : filteredItems;
+        }
+        case 'RESET_FILE_ITEMS': {
+            return [];
+        }
+        // TODO: clear message
+    }
 };
-
-const AddFolderControl = () => {
-    const props = useAddFolder();
-    const Resolved = useResolvedComposable(AddFolder, 'AddFolder');
-    return React__namespace["default"].createElement(Resolved, { ...props });
+const parseFileSelectParams = (value) => {
+    if (ui.isUndefined(value))
+        return ['FILE', undefined];
+    if (ui.isString(value))
+        return [value, undefined];
+    const [selectType, ...rest] = value;
+    return [selectType, !rest?.length ? undefined : { accept: rest.join() }];
 };
 
-const compareContent$3 = ({ label: a }, { label: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
+const defaultValue$6 = [undefined, ui.noop];
+const { FilesContext, useFiles } = uiReactCore.createContextUtilities({
+    contextName: 'Files',
+    defaultValue: defaultValue$6,
+});
+function FilesProvider({ children, }) {
+    const [items, dispatch] = React__namespace["default"].useReducer(filesReducer, []);
+    const [fileInput, handleFileSelect] = internal.useFileSelect((nextFiles) => {
+        dispatch({ type: 'ADD_FILE_ITEMS', files: nextFiles });
+    });
+    const handleFilesAction = React__namespace["default"].useCallback((action) => {
+        if (action.type === 'SELECT_FILES') {
+            handleFileSelect(...parseFileSelectParams(action.selectionType));
+        }
+        else {
+            dispatch(action);
+        }
+    }, [handleFileSelect]);
+    const value = React__namespace["default"].useMemo(() => [items, handleFilesAction], [items, handleFilesAction]);
+    return (React__namespace["default"].createElement(FilesContext.Provider, { value: value },
+        fileInput,
+        children));
+}
+
+const handleAction = (event) => {
+    switch (event.type) {
+        case 'SET_ACTION_TYPE': {
+            return event.actionType;
+        }
+        case 'RESET_ACTION_TYPE': {
+            return undefined;
+        }
     }
-    return b === undefined ? -1 : a.localeCompare(b);
 };
-const compareButtonData = (a, b, direction) => direction === 'ascending'
-    ? compareContent$3(a.content, b.content)
-    : compareContent$3(b.content, a.content);
+function useActionTypeState(initialState) {
+    const [actionType, setActionType] = React__namespace["default"].useState(initialState);
+    const handler = React__namespace["default"].useCallback((action) => setActionType(handleAction(action)), []);
+    return [actionType, handler];
+}
+
+const defaultValue$5 = [undefined, ui.noop];
+const { ActionTypeContext, useActionType } = uiReactCore.createContextUtilities({
+    contextName: 'ActionType',
+    defaultValue: defaultValue$5,
+});
+function ActionTypeProvider({ actionType, children, }) {
+    const value = useActionTypeState(actionType);
+    return (React__namespace["default"].createElement(ActionTypeContext.Provider, { value: value }, children));
+}
 
-const compareContent$2 = ({ value: a }, { value: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
-    }
-    return b === undefined ? -1 : a.getTime() - b.getTime();
+const DEFAULT_STATE = {
+    fileDataItems: undefined,
 };
-const compareDateData = (a, b, direction) => direction === 'ascending'
-    ? compareContent$2(a.content, b.content)
-    : compareContent$2(b.content, a.content);
-
-const compareContent$1 = ({ value: a }, { value: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
+const locationItemsReducer = (prevState, event) => {
+    switch (event.type) {
+        case 'SET_LOCATION_ITEMS': {
+            const { items } = event;
+            if (!items?.length)
+                return prevState;
+            if (!prevState.fileDataItems?.length) {
+                return { fileDataItems: items.map(createFileDataItem) };
+            }
+            const nextFileDataItems = items?.reduce((fileDataItems, data) => prevState.fileDataItems?.some(({ id }) => id === data.id)
+                ? fileDataItems
+                : fileDataItems.concat(createFileDataItem(data)), []);
+            if (!nextFileDataItems?.length)
+                return prevState;
+            return {
+                fileDataItems: prevState.fileDataItems.concat(nextFileDataItems),
+            };
+        }
+        case 'REMOVE_LOCATION_ITEM': {
+            const { id } = event;
+            if (!prevState.fileDataItems)
+                return prevState;
+            const fileDataItems = prevState.fileDataItems.filter((item) => item.id !== id);
+            if (fileDataItems.length === prevState.fileDataItems.length) {
+                return prevState;
+            }
+            return { fileDataItems };
+        }
+        case 'RESET_LOCATION_ITEMS': {
+            return DEFAULT_STATE;
+        }
     }
-    return b === undefined ? -1 : a - b;
 };
-const compareNumberData = (a, b, direction) => direction === 'ascending'
-    ? compareContent$1(a.content, b.content)
-    : compareContent$1(b.content, a.content);
+const defaultValue$4 = [DEFAULT_STATE, ui.noop];
+const { LocationItemsContext, useLocationItems } = uiReactCore.createContextUtilities({ contextName: 'LocationItems', defaultValue: defaultValue$4 });
+function LocationItemsProvider({ children, }) {
+    const value = React__namespace["default"].useReducer(locationItemsReducer, DEFAULT_STATE);
+    return (React__namespace["default"].createElement(LocationItemsContext.Provider, { value: value }, children));
+}
 
-const compareContent = ({ text: a }, { text: b }) => {
-    if (a === undefined) {
-        return b === undefined ? 0 : 1;
-    }
-    return b === undefined ? -1 : a.localeCompare(b);
-};
-const compareTextData = (a, b, direction) => direction === 'ascending'
-    ? compareContent(a.content, b.content)
-    : compareContent(b.content, a.content);
+function StoreProvider(props) {
+    const { actionType, children, location, path } = props;
+    return (React__namespace["default"].createElement(FilesProvider, null,
+        React__namespace["default"].createElement(LocationProvider, { location: location, path: path },
+            React__namespace["default"].createElement(LocationItemsProvider, null,
+                React__namespace["default"].createElement(ActionTypeProvider, { actionType: actionType }, children)))));
+}
 
-const GROUP_ORDER = [
-    'checkbox',
-    'button',
-    'date',
-    'number',
-    'text',
-];
-const UNSORTABLE_GROUPS = ['checkbox'];
-const useDataTable = () => {
-    const { data } = useControlsContext();
-    const { tableData } = data;
-    const defaultSortIndex = React__namespace["default"].useMemo(() => tableData?.headers?.findIndex(({ type }) => type === 'sort') ?? -1, [tableData]);
-    const [sortState, setSortState] = React__namespace["default"].useState({
-        index: defaultSortIndex,
-        direction: 'ascending',
-    });
-    const mappedHeaders = React__namespace["default"].useMemo(() => tableData?.headers.map((header, index) => {
-        const { type } = header;
-        switch (type) {
-            case 'sort': {
-                return {
-                    ...header,
-                    content: {
-                        ...header.content,
-                        onSort: () => {
-                            setSortState({
-                                index,
-                                direction: sortState.index === index
-                                    ? sortState.direction === 'ascending'
-                                        ? 'descending'
-                                        : 'ascending'
-                                    : 'ascending',
-                            });
-                        },
-                        sortDirection: sortState.index === index ? sortState.direction : undefined,
-                    },
-                };
+function useStore() {
+    const [actionType, dispatchActionType] = useActionType();
+    const [files, dispatchFilesAction] = useFiles();
+    const [location, dispatchLocationAction] = useLocation();
+    const [locationItems, dispatchLocationItemsAction] = useLocationItems();
+    const dispatchHandler = React__namespace["default"].useCallback((action) => {
+        switch (action.type) {
+            case 'ADD_FILE_ITEMS':
+            case 'REMOVE_FILE_ITEM':
+            case 'SELECT_FILES':
+            case 'RESET_FILE_ITEMS': {
+                dispatchFilesAction(action);
+                break;
             }
-            case 'checkbox':
-            case 'text':
-            default: {
-                return header;
+            case 'NAVIGATE':
+            case 'RESET_LOCATION': {
+                dispatchLocationAction(action);
+                break;
+            }
+            case 'SET_LOCATION_ITEMS':
+            case 'REMOVE_LOCATION_ITEM':
+            case 'RESET_LOCATION_ITEMS': {
+                dispatchLocationItemsAction(action);
+                break;
+            }
+            case 'SET_ACTION_TYPE':
+            case 'RESET_ACTION_TYPE': {
+                dispatchActionType(action);
+                break;
             }
         }
-    }), [sortState, tableData]);
-    const sortedRows = React__namespace["default"].useMemo(() => {
-        // Early return if there is no table data
-        if (!tableData) {
-            return;
-        }
-        // Return rows as is if there are no sortable columns
-        if (sortState.index < 0) {
-            return tableData.rows;
-        }
-        const { index, direction } = sortState;
-        const groupedRows = {
-            button: [],
-            checkbox: [],
-            date: [],
-            number: [],
-            text: [],
+    }, [
+        dispatchActionType,
+        dispatchFilesAction,
+        dispatchLocationAction,
+        dispatchLocationItemsAction,
+    ]);
+    return [{ actionType, files, location, locationItems }, dispatchHandler];
+}
+
+const getErrorMessage = (propertyName) => `Unable to resolve credentials due to invalid value of '${propertyName}'`;
+function useGetActionInputCallback({ accountId, customEndpoint, region, }) {
+    const { getCredentials } = useCredentials();
+    const [{ location }] = useStore();
+    const { current, key } = location;
+    return React__namespace["default"].useCallback((_location) => {
+        // prefer passed in location / prefix over current location in state
+        const location = _location ?? current;
+        // when `location` has been provided as a param, resolve `_prefix` to `location.prefix`.
+        // in the default scenario where `current` is the target `location` use the fully qualified `key`
+        // that includes the default `prefix` and any additional prefixes from navigation
+        const prefix = _location ? _location.prefix : key;
+        assertLocationData(location, getErrorMessage('locationData'));
+        assertPrefix(prefix, getErrorMessage('prefix'));
+        const { bucket, permissions, type } = location;
+        // BUCKET/PREFIX grants end with `*`, but object grants do not.
+        const scope = `s3://${bucket}/${prefix}${type === 'OBJECT' ? '' : '*'}`;
+        return {
+            accountId,
+            bucket,
+            credentials: getCredentials({
+                permissions,
+                scope,
+            }),
+            region,
+            customEndpoint,
         };
-        tableData.rows.forEach((row) => {
-            const { type } = row.content[index];
-            groupedRows[type].push(row);
-        });
-        const groupOrder = direction === 'ascending' ? GROUP_ORDER : [...GROUP_ORDER].reverse();
-        return groupOrder
-            .map((groupType) => {
-            if (UNSORTABLE_GROUPS.includes(groupType)) {
-                return groupedRows[groupType];
-            }
-            return groupedRows[groupType].sort((rowA, rowB) => {
-                switch (groupType) {
-                    case 'button': {
-                        return compareButtonData(rowA.content[index], rowB.content[index], direction);
-                    }
-                    case 'date': {
-                        return compareDateData(rowA.content[index], rowB.content[index], direction);
-                    }
-                    case 'number': {
-                        return compareNumberData(rowA.content[index], rowB.content[index], direction);
-                    }
-                    case 'text':
-                    default: {
-                        return compareTextData(rowA.content[index], rowB.content[index], direction);
-                    }
-                }
-            });
-        })
-            .flat();
-    }, [sortState, tableData]);
+    }, [accountId, current, customEndpoint, getCredentials, key, region]);
+}
+
+const ERROR_MESSAGE$1 = '`useGetActionInput` must be called from within a `ConfigurationProvider`.';
+const { useGetActionInput, GetActionInputContext } = uiReactCore.createContextUtilities({
+    contextName: 'GetActionInput',
+    errorMessage: ERROR_MESSAGE$1,
+});
+function GetActionInputProvider({ accountId, children, customEndpoint, region, }) {
+    const value = useGetActionInputCallback({
+        accountId,
+        customEndpoint,
+        region,
+    });
+    return (React__namespace["default"].createElement(GetActionInputContext.Provider, { value: value }, children));
+}
+
+const Passthrough = ({ children }) => (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, children));
+function createConfigurationProvider(input) {
+    const { accountId, ChildComponent, displayName, region, customEndpoint, ...rest } = input;
+    const Child = elements.isComponent(ChildComponent) ? ChildComponent : Passthrough;
+    const Provider = (props) => (React__namespace["default"].createElement(CredentialsProvider, { ...rest },
+        React__namespace["default"].createElement(GetActionInputProvider, { accountId: accountId, region: region, customEndpoint: customEndpoint },
+            React__namespace["default"].createElement(Child, { ...props }))));
+    Provider.displayName = displayName;
+    return Provider;
+}
+
+const defaultValue$3 = { data: {} };
+const { useControlsContext, ControlsContextProvider } = uiReactCore.createContextUtilities({
+    contextName: 'ControlsContext',
+    defaultValue: defaultValue$3,
+});
+
+const useActionCancel = () => {
+    const { data: { actionCancelLabel, isActionCancelDisabled }, onActionCancel, } = useControlsContext();
     return {
-        headers: mappedHeaders ?? [],
-        rows: sortedRows ?? [],
+        onCancel: onActionCancel,
+        isDisabled: isActionCancelDisabled,
+        label: actionCancelLabel,
     };
 };
 
-const DataTableControl = () => {
-    const props = useDataTable();
-    const Resolved = useResolvedComposable(DataTable, 'DataTable');
+function useResolvedComposable(DefaultComposable, name) {
+    const { composables } = useComposables();
+    const Composable = React__namespace["default"].useMemo(() => {
+        const ResolvedComposable = (props) => {
+            const Resolved = composables?.[name] ?? DefaultComposable;
+            return React__namespace["default"].createElement(Resolved, { ...props });
+        };
+        ResolvedComposable.displayName = name;
+        return ResolvedComposable;
+    }, [composables, DefaultComposable, name]);
+    return Composable;
+}
+
+const ActionCancelControl = () => {
+    const props = useActionCancel();
+    const Resolved = useResolvedComposable(ActionCancel, 'ActionCancel');
     return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-/**
- * This hook, not to be confused with the useDropZone vended from @aws-amplify/ui-react-core, is only intended for use
- * with its corresponding DropZone control.
- */
-const useDropZone = () => {
-    const { onDropFiles } = useControlsContext();
-    return { onDropFiles };
+const getNavigationItems = ({ destinationParts, location, onNavigate, }) => {
+    const { bucket, permissions, prefix = '', type } = location;
+    const destinationSubpaths = [];
+    return destinationParts.map((part, index) => {
+        const isCurrent = index === destinationParts.length - 1;
+        if (index !== 0) {
+            destinationSubpaths.push(part);
+        }
+        const destinationPath = `${destinationSubpaths.concat('').join('/')}`;
+        const destination = {
+            id: crypto.randomUUID(),
+            type,
+            permissions,
+            bucket,
+            prefix,
+        };
+        return {
+            name: part,
+            ...(isCurrent && { isCurrent }),
+            onNavigate: () => {
+                onNavigate?.(destination, destinationPath);
+            },
+        };
+    });
 };
 
-const DropZoneControl = ({ children, }) => {
-    const props = useDropZone();
-    const Resolved = useResolvedComposable(DropZone, 'DropZone');
-    return React__namespace["default"].createElement(Resolved, { ...props }, children);
+const getNavigationParts = ({ location, path, includeBucketInPrefix, }) => {
+    const { bucket, prefix = '', type } = location;
+    const trimmedPrefix = prefix.endsWith('/') ? prefix.slice(0, -1) : prefix;
+    const trimmedPath = path.endsWith('/') ? path.slice(0, -1) : path;
+    const firstPrefixPart = [];
+    if (type !== 'BUCKET') {
+        if (includeBucketInPrefix) {
+            firstPrefixPart.push(bucket);
+        }
+        if (trimmedPrefix) {
+            if (includeBucketInPrefix) {
+                firstPrefixPart.push('/');
+            }
+            firstPrefixPart.push(trimmedPrefix);
+        }
+    }
+    const prefixParts = type === 'BUCKET' ? [bucket] : [firstPrefixPart.join('')];
+    if (type === 'BUCKET' && trimmedPrefix) {
+        prefixParts.push(trimmedPrefix);
+    }
+    const pathParts = trimmedPath ? trimmedPath.split('/') : [];
+    return prefixParts.concat(pathParts);
 };
 
-const useOverwriteToggle = () => {
-    const { data: { isOverwritingEnabled, isOverwriteToggleDisabled, overwriteToggleLabel, }, onToggleOverwrite, } = useControlsContext();
-    return {
-        isDisabled: isOverwriteToggleDisabled,
-        isOverwritingEnabled,
-        label: overwriteToggleLabel,
-        onToggle: onToggleOverwrite,
-    };
+// import { ActionDestinationProps } from '../../composables/ActionDestination';
+const useActionDestination = () => {
+    const { data, onSelectDestination } = useControlsContext();
+    const { actionDestinationLabel, isActionDestinationNavigable, destination } = data;
+    return React__namespace["default"].useMemo(() => {
+        if (!destination?.current) {
+            return { items: [] };
+        }
+        const { current, path } = destination;
+        const destinationParts = getNavigationParts({
+            location: current,
+            path,
+        });
+        return {
+            label: actionDestinationLabel,
+            items: getNavigationItems({
+                location: current,
+                destinationParts,
+                onNavigate: onSelectDestination,
+            }),
+            isNavigable: isActionDestinationNavigable,
+        };
+    }, [
+        actionDestinationLabel,
+        isActionDestinationNavigable,
+        destination,
+        onSelectDestination,
+    ]);
 };
 
-const OverwriteToggleControl = () => {
-    const props = useOverwriteToggle();
-    const Resolved = useResolvedComposable(OverwriteToggle$1, 'OverwriteToggle');
+const ActionDestinationControl = () => {
+    const props = useActionDestination();
+    const Resolved = useResolvedComposable(ActionDestination$1, 'ActionDestination');
     return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const useMessage = () => {
-    const { data: { message = {} }, } = useControlsContext();
-    return message;
+const useActionExit = () => {
+    const { data: { actionExitLabel: label, isActionExitDisabled: isDisabled }, onActionExit: onExit, } = useControlsContext();
+    return { label, isDisabled, onExit };
 };
 
-const MessageControl = () => {
-    const props = useMessage();
-    const Resolved = useResolvedComposable(Message, 'Message');
+const ActionExitControl = () => {
+    const props = useActionExit();
+    const Resolved = useResolvedComposable(ActionExit, 'ActionExit');
     return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const useStatusDisplay = () => {
-    const { data } = useControlsContext();
-    const { statusCounts, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, } = data;
-    if (!statusCounts?.TOTAL) {
-        return { statuses: [], total: 0 };
-    }
-    const statuses = [
-        { name: statusDisplayCompletedLabel ?? '', count: statusCounts.COMPLETE },
-        { name: statusDisplayFailedLabel ?? '', count: statusCounts.FAILED },
-        { name: statusDisplayCanceledLabel ?? '', count: statusCounts.CANCELED },
-        { name: statusDisplayQueuedLabel ?? '', count: statusCounts.QUEUED },
-    ];
-    return { statuses, total: statusCounts.TOTAL };
+const useActionStart = () => {
+    const { data: { actionStartLabel, isActionStartDisabled }, onActionStart, } = useControlsContext();
+    return {
+        label: actionStartLabel,
+        isDisabled: isActionStartDisabled,
+        onStart: onActionStart,
+    };
 };
 
-const StatusDisplayControl = () => {
-    const props = useStatusDisplay();
-    const Resolved = useResolvedComposable(StatusDisplay$1, 'StatusDisplay');
+const ActionStartControl = () => {
+    const props = useActionStart();
+    const Resolved = useResolvedComposable(ActionStart, 'ActionStart');
     return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const useTitle = () => {
-    const { data } = useControlsContext();
+const useAddFiles = () => {
+    const { data: { addFilesLabel, isAddFilesDisabled }, onAddFiles, } = useControlsContext();
     return {
-        title: data?.title,
+        isDisabled: isAddFilesDisabled,
+        label: addFilesLabel,
+        onAddFiles,
     };
 };
 
-const TitleControl = () => {
-    const props = useTitle();
-    const Resolved = useResolvedComposable(Title$1, 'Title');
+const AddFilesControl = () => {
+    const props = useAddFiles();
+    const Resolved = useResolvedComposable(AddFiles, 'AddFiles');
     return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const DEFAULT_ACTION_VIEW_DISPLAY_TEXT = {
-    actionCancelLabel: 'Cancel',
-    actionExitLabel: 'Exit',
-    actionDestinationLabel: 'Destination',
-    statusDisplayCanceledLabel: 'Canceled',
-    statusDisplayCompletedLabel: 'Completed',
-    statusDisplayFailedLabel: 'Failed',
-    statusDisplayInProgressLabel: 'In progress',
-    statusDisplayTotalLabel: 'Total',
-    statusDisplayQueuedLabel: 'Not started',
-    // empty by default
-    tableColumnCancelHeader: '',
-    tableColumnStatusHeader: 'Status',
-    tableColumnFolderHeader: 'Folder',
-    tableColumnNameHeader: 'Name',
-    tableColumnTypeHeader: 'Type',
-    tableColumnSizeHeader: 'Size',
-    tableColumnProgressHeader: 'Progress',
+const useAddFolder = () => {
+    const { data: { addFolderLabel, isAddFolderDisabled }, onAddFolder, } = useControlsContext();
+    return {
+        isDisabled: isAddFolderDisabled,
+        label: addFolderLabel,
+        onAddFolder,
+    };
 };
-const DEFAULT_LIST_VIEW_DISPLAY_TEXT = {
-    loadingIndicatorLabel: 'Loading',
-    searchSubmitLabel: 'Submit',
-    searchClearLabel: 'Clear search',
-    getDateDisplayValue: (date) => new Intl.DateTimeFormat('en-US', {
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        year: 'numeric',
-        minute: 'numeric',
-        hourCycle: 'h12',
-    }).format(date),
+
+const AddFolderControl = () => {
+    const props = useAddFolder();
+    const Resolved = useResolvedComposable(AddFolder, 'AddFolder');
+    return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Create folder',
-    actionStartLabel: 'Create folder',
-    folderNameLabel: 'Folder name',
-    folderNamePlaceholder: 'Folder name cannot contain "/", nor end or start with "."',
-    getValidationMessage: () => 'Folder name cannot contain "/", nor end or start with "."',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { FAILED, OVERWRITE_PREVENTED } = counts ?? {};
-        if (OVERWRITE_PREVENTED) {
-            return {
-                content: 'A folder already exists with the provided name',
-                type: 'warning',
-            };
-        }
-        if (FAILED) {
-            return {
-                content: 'There was an issue creating the folder.',
-                type: 'error',
-            };
-        }
-        return { content: 'Folder created.', type: 'success' };
-    },
+const compareContent$3 = ({ label: a }, { label: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a.localeCompare(b);
+};
+const compareButtonData = (a, b, direction) => direction === 'ascending'
+    ? compareContent$3(a.content, b.content)
+    : compareContent$3(b.content, a.content);
+
+const compareContent$2 = ({ value: a }, { value: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a.getTime() - b.getTime();
 };
+const compareDateData = (a, b, direction) => direction === 'ascending'
+    ? compareContent$2(a.content, b.content)
+    : compareContent$2(b.content, a.content);
 
-const DEFAULT_COPY_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Copy',
-    actionStartLabel: 'Copy',
-    actionDestinationLabel: 'Copy destination',
-    getListFoldersResultsMessage: ({ folders, query, message, hasError, hasExhaustedSearch, }) => {
-        if (!folders?.length) {
-            return {
-                content: query
-                    ? `No folders found matching "${query}"`
-                    : 'No subfolders found within selected folder.',
-                type: 'info',
-            };
-        }
-        if (message && !!query) {
-            return { content: 'Error loading folders.', type: 'error' };
-        }
-        if (hasError) {
-            return { content: 'Error loading folders.', type: 'error' };
-        }
-        if (hasExhaustedSearch) {
-            return {
-                content: 'Showing results for up to the first 10,000 items.',
-                type: 'info',
-            };
+const compareContent$1 = ({ value: a }, { value: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a - b;
+};
+const compareNumberData = (a, b, direction) => direction === 'ascending'
+    ? compareContent$1(a.content, b.content)
+    : compareContent$1(b.content, a.content);
+
+const compareContent = ({ text: a }, { text: b }) => {
+    if (a === undefined) {
+        return b === undefined ? 0 : 1;
+    }
+    return b === undefined ? -1 : a.localeCompare(b);
+};
+const compareTextData = (a, b, direction) => direction === 'ascending'
+    ? compareContent(a.content, b.content)
+    : compareContent(b.content, a.content);
+
+const GROUP_ORDER = [
+    'checkbox',
+    'button',
+    'date',
+    'number',
+    'text',
+];
+const UNSORTABLE_GROUPS = ['checkbox'];
+const useDataTable = () => {
+    const { data } = useControlsContext();
+    const { isLoading, tableData } = data;
+    const defaultSortIndex = React__namespace["default"].useMemo(() => tableData?.headers?.findIndex(({ type }) => type === 'sort') ?? -1, [tableData]);
+    const [sortState, setSortState] = React__namespace["default"].useState({
+        index: defaultSortIndex,
+        direction: 'ascending',
+    });
+    const mappedHeaders = React__namespace["default"].useMemo(() => tableData?.headers.map((header, index) => {
+        const { type } = header;
+        switch (type) {
+            case 'sort': {
+                return {
+                    ...header,
+                    content: {
+                        ...header.content,
+                        onSort: () => {
+                            setSortState({
+                                index,
+                                direction: sortState.index === index
+                                    ? sortState.direction === 'ascending'
+                                        ? 'descending'
+                                        : 'ascending'
+                                    : 'ascending',
+                            });
+                        },
+                        sortDirection: sortState.index === index ? sortState.direction : undefined,
+                    },
+                };
+            }
+            case 'checkbox':
+            case 'text':
+            default: {
+                return header;
+            }
         }
-    },
-    loadingIndicatorLabel: 'Loading',
-    overwriteWarningMessage: 'Copied files will overwrite existing files at selected destination.',
-    searchPlaceholder: 'Search for folders',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
-        if (COMPLETE === TOTAL) {
-            return {
-                content: 'All files copied.',
-                type: 'success',
-            };
+    }), [sortState, tableData]);
+    const sortedRows = React__namespace["default"].useMemo(() => {
+        // Early return if there is no table data
+        if (!tableData) {
+            return;
         }
-        if (FAILED === TOTAL) {
-            return { content: 'All files failed to copy.', type: 'error' };
+        // Return rows as is if there are no sortable columns
+        if (sortState.index < 0) {
+            return tableData.rows;
         }
-        return {
-            content: `${COMPLETE} files copied, ${FAILED} files failed to copy.`,
-            type: 'error',
+        const { index, direction } = sortState;
+        const groupedRows = {
+            button: [],
+            checkbox: [],
+            date: [],
+            number: [],
+            text: [],
         };
-    },
-    searchSubmitLabel: 'Submit',
-    searchClearLabel: 'Clear search',
+        tableData.rows.forEach((row) => {
+            const { type } = row.content[index];
+            groupedRows[type].push(row);
+        });
+        const groupOrder = direction === 'ascending' ? GROUP_ORDER : [...GROUP_ORDER].reverse();
+        return groupOrder
+            .map((groupType) => {
+            if (UNSORTABLE_GROUPS.includes(groupType)) {
+                return groupedRows[groupType];
+            }
+            return groupedRows[groupType].sort((rowA, rowB) => {
+                switch (groupType) {
+                    case 'button': {
+                        return compareButtonData(rowA.content[index], rowB.content[index], direction);
+                    }
+                    case 'date': {
+                        return compareDateData(rowA.content[index], rowB.content[index], direction);
+                    }
+                    case 'number': {
+                        return compareNumberData(rowA.content[index], rowB.content[index], direction);
+                    }
+                    case 'text':
+                    default: {
+                        return compareTextData(rowA.content[index], rowB.content[index], direction);
+                    }
+                }
+            });
+        })
+            .flat();
+    }, [sortState, tableData]);
+    return {
+        headers: mappedHeaders ?? [],
+        isLoading,
+        rows: sortedRows ?? [],
+    };
 };
 
-const DEFAULT_DELETE_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Delete',
-    actionStartLabel: 'Delete',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, TOTAL } = counts ?? {};
-        if (COMPLETE === TOTAL) {
-            return { content: 'All files deleted.', type: 'success' };
-        }
-        if (FAILED === TOTAL) {
-            return { content: 'All files failed to delete.', type: 'error' };
-        }
-        return {
-            content: `${COMPLETE} files deleted, ${FAILED} files failed to delete.`,
-            type: 'error',
-        };
-    },
+const DataTableControl = () => {
+    const props = useDataTable();
+    const Resolved = useResolvedComposable(DataTable, 'DataTable');
+    return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const DEFAULT_ERROR_MESSAGE$1 = 'There was an error loading items.';
-const DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
-    getListItemsResultMessage: (data) => {
-        const { items, hasExhaustedSearch, hasError = false, message, isLoading, } = data ?? {};
-        if (isLoading) {
-            return undefined;
-        }
-        if (hasError) {
-            return {
-                type: 'error',
-                content: message ?? DEFAULT_ERROR_MESSAGE$1,
-            };
-        }
-        if (!items?.length && hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: `No results found in the first 10,000 items.`,
-            };
-        }
-        if (!items?.length) {
-            return {
-                type: 'info',
-                content: 'No files.',
-            };
-        }
-        if (hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: `Showing results for up to the first 10,000 items.`,
-            };
-        }
-        // TODO: add more cases as needed
-        return undefined;
-    },
-    searchSubfoldersToggleLabel: 'Include subfolders',
-    searchPlaceholder: 'Search current folder',
-    tableColumnLastModifiedHeader: 'Last modified',
-    tableColumnNameHeader: 'Name',
-    tableColumnSizeHeader: 'Size',
-    tableColumnTypeHeader: 'Type',
-    selectFileLabel: 'Select file',
-    selectAllFilesLabel: 'Select all files',
-    getActionListItemLabel: (key = '') => {
-        switch (key) {
-            case 'Copy':
-                return 'Copy';
-            case 'Delete':
-                return 'Delete';
-            case 'Create folder':
-                return 'Create folder';
-            case 'Upload':
-                return 'Upload';
-            default:
-                return key;
-        }
-    },
-    getTitle: (location) => {
-        const { current, key } = location;
-        const { bucket = '' } = current ?? {};
-        return key || bucket;
-    },
+/**
+ * This hook, not to be confused with the useDropZone vended from @aws-amplify/ui-react-core, is only intended for use
+ * with its corresponding DropZone control.
+ */
+const useDropZone = () => {
+    const { onDropFiles } = useControlsContext();
+    return { onDropFiles };
+};
+
+const DropZoneControl = ({ children, }) => {
+    const props = useDropZone();
+    const Resolved = useResolvedComposable(DropZone, 'DropZone');
+    return React__namespace["default"].createElement(Resolved, { ...props }, children);
 };
 
-const DEFAULT_ERROR_MESSAGE = 'There was an error loading locations.';
-const DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_LIST_VIEW_DISPLAY_TEXT,
-    title: 'Home',
-    searchPlaceholder: 'Filter folders and files',
-    getListLocationsResultMessage: (data) => {
-        const { isLoading, items, hasExhaustedSearch, hasError = false, message, } = data ?? {};
-        if (isLoading) {
-            return undefined;
-        }
-        if (hasError) {
-            return {
-                type: 'error',
-                content: message ?? DEFAULT_ERROR_MESSAGE,
-            };
-        }
-        if (items?.length === 0 && !hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: 'No folders or files.',
-            };
-        }
-        if (hasExhaustedSearch) {
-            return {
-                type: 'info',
-                content: `Showing results for up to the first 10,000 items.`,
-            };
-        }
-        // TODO: add more cases as needed
-        return undefined;
-    },
-    getPermissionName: (permissions) => {
-        let text = '';
-        if (permissions.includes('get') || permissions.includes('list')) {
-            text = 'Read';
-        }
-        if (permissions.includes('write') || permissions.includes('delete')) {
-            text = text ? 'Read/Write' : 'Write';
-        }
-        if (!text) {
-            text = permissions.join('/');
-        }
-        return text;
-    },
-    getDownloadLabel: (fileName) => `Download ${fileName}`,
-    tableColumnBucketHeader: 'Bucket',
-    tableColumnFolderHeader: 'Folder',
-    tableColumnPermissionsHeader: 'Permissions',
-    tableColumnActionsHeader: 'Actions',
+const useOverwriteToggle = () => {
+    const { data: { isOverwritingEnabled, isOverwriteToggleDisabled, overwriteToggleLabel, }, onToggleOverwrite, } = useControlsContext();
+    return {
+        isDisabled: isOverwriteToggleDisabled,
+        isOverwritingEnabled,
+        label: overwriteToggleLabel,
+        onToggle: onToggleOverwrite,
+    };
 };
 
-const DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT = {
-    ...DEFAULT_ACTION_VIEW_DISPLAY_TEXT,
-    title: 'Upload',
-    actionStartLabel: 'Upload',
-    addFilesLabel: 'Add files',
-    addFolderLabel: 'Add folder',
-    getActionCompleteMessage: (data) => {
-        const { counts } = data ?? {};
-        const { COMPLETE, FAILED, OVERWRITE_PREVENTED, CANCELED, TOTAL } = counts ?? {};
-        const hasPreventedOverwrite = !!OVERWRITE_PREVENTED;
-        const hasFailure = !!FAILED;
-        const hasSuccess = !!COMPLETE;
-        const hasCanceled = !!CANCELED;
-        const type = hasFailure
-            ? 'error'
-            : hasPreventedOverwrite || hasCanceled
-                ? 'warning'
-                : 'success';
-        const preventedOverwriteMessage = hasPreventedOverwrite
-            ? [
-                'Overwrite prevented for',
-                OVERWRITE_PREVENTED === TOTAL ? 'all' : String(OVERWRITE_PREVENTED),
-                OVERWRITE_PREVENTED > 1 || OVERWRITE_PREVENTED === TOTAL
-                    ? `files`
-                    : 'file',
-            ].join(' ')
-            : undefined;
-        const canceledMessage = hasCanceled
-            ? [
-                CANCELED === TOTAL ? 'All' : String(CANCELED),
-                CANCELED > 1 || CANCELED === TOTAL ? `uploads` : 'upload',
-                'canceled',
-            ].join(' ')
-            : undefined;
-        const failedMessage = hasFailure
-            ? [
-                FAILED === TOTAL ? 'All' : String(FAILED),
-                FAILED > 1 || FAILED === TOTAL ? `files` : 'file',
-                'failed to upload',
-            ].join(' ')
-            : undefined;
-        const completedMessage = hasSuccess
-            ? [
-                COMPLETE === TOTAL ? 'All' : String(COMPLETE),
-                COMPLETE > 1 || COMPLETE === TOTAL ? `files` : 'file',
-                'uploaded',
-            ].join(' ')
-            : undefined;
-        const messages = [
-            preventedOverwriteMessage,
-            failedMessage,
-            canceledMessage,
-            completedMessage,
-        ].filter(Boolean);
-        if (messages.length > 0) {
-            return {
-                content: messages.join(', ') + '.',
-                type,
-            };
-        }
-        return { content: 'All files uploaded.', type };
-    },
-    getFilesValidationMessage: (data) => {
-        if (!data?.invalidFiles) {
-            return undefined;
-        }
-        const tooBigFileNames = data.invalidFiles
-            .filter(({ file }) => isFileTooBig(file))
-            .map(({ file }) => file.name)
-            .join(', ');
-        if (tooBigFileNames) {
-            return {
-                content: `Files larger than 160GB cannot be added to the upload queue: ${tooBigFileNames}`,
-                type: 'warning',
-            };
-        }
-        return undefined;
-    },
-    statusDisplayOverwritePreventedLabel: 'Overwrite prevented',
-    overwriteToggleLabel: 'Overwrite existing files',
+const OverwriteToggleControl = () => {
+    const props = useOverwriteToggle();
+    const Resolved = useResolvedComposable(OverwriteToggle$1, 'OverwriteToggle');
+    return React__namespace["default"].createElement(Resolved, { ...props });
 };
 
-const DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT = {
-    CopyView: DEFAULT_COPY_VIEW_DISPLAY_TEXT,
-    CreateFolderView: DEFAULT_CREATE_FOLDER_VIEW_DISPLAY_TEXT,
-    DeleteView: DEFAULT_DELETE_VIEW_DISPLAY_TEXT,
-    LocationDetailView: DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT,
-    LocationsView: DEFAULT_LOCATIONS_VIEW_DISPLAY_TEXT,
-    UploadView: DEFAULT_UPLOAD_VIEW_DISPLAY_TEXT,
+const useMessage = () => {
+    const { data: { message = {} }, } = useControlsContext();
+    return message;
 };
 
-const { DisplayTextContext, useDisplayText } = uiReactCore.createContextUtilities({
-    contextName: 'DisplayText',
-    errorMessage: '`useDisplayText` must be called inside `DisplayTextProvider`',
-});
-function resolveDisplayText(displayText) {
-    if (!displayText)
-        return DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT;
-    // override
-    const { CopyView, CreateFolderView, DeleteView, LocationDetailView, LocationsView, UploadView, } = displayText;
+const MessageControl = () => {
+    const props = useMessage();
+    const Resolved = useResolvedComposable(Message, 'Message');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useStatusDisplay = () => {
+    const { data } = useControlsContext();
+    const { statusCounts, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, } = data;
+    if (!statusCounts?.TOTAL) {
+        return { statuses: [], total: 0 };
+    }
+    const statuses = [
+        { name: statusDisplayCompletedLabel ?? '', count: statusCounts.COMPLETE },
+        { name: statusDisplayFailedLabel ?? '', count: statusCounts.FAILED },
+        { name: statusDisplayCanceledLabel ?? '', count: statusCounts.CANCELED },
+        { name: statusDisplayQueuedLabel ?? '', count: statusCounts.QUEUED },
+    ];
+    return { statuses, total: statusCounts.TOTAL };
+};
+
+const StatusDisplayControl = () => {
+    const props = useStatusDisplay();
+    const Resolved = useResolvedComposable(StatusDisplay$1, 'StatusDisplay');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
+
+const useTitle = () => {
+    const { data } = useControlsContext();
     return {
-        CopyView: { ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CopyView, ...CopyView },
-        CreateFolderView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.CreateFolderView,
-            ...CreateFolderView,
-        },
-        DeleteView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.DeleteView,
-            ...DeleteView,
-        },
-        LocationDetailView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationDetailView,
-            ...LocationDetailView,
-        },
-        LocationsView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.LocationsView,
-            ...LocationsView,
-        },
-        UploadView: {
-            ...DEFAULT_STORAGE_BROWSER_DISPLAY_TEXT.UploadView,
-            ...UploadView,
-        },
+        title: data?.title,
     };
-}
-function DisplayTextProvider({ children, displayText: _override, }) {
-    // do deep merge here of default and override here
-    const resolvedDisplayText = React__namespace["default"].useMemo(() => resolveDisplayText(_override), [_override]);
-    return (React__namespace["default"].createElement(DisplayTextContext.Provider, { value: resolvedDisplayText }, children));
-}
+};
+
+const TitleControl = () => {
+    const props = useTitle();
+    const Resolved = useResolvedComposable(Title$1, 'Title');
+    return React__namespace["default"].createElement(Resolved, { ...props });
+};
 
 const getActionIcon = (status) => {
     switch (status) {
@@ -2624,7 +2627,7 @@ const getActionViewTableData = ({ tasks, displayText, isProcessing, locationKey,
                                 value: progress,
                                 displayValue: `${getPercentValue(
                                 // Default progress to 100% if progress value is unavailable but status is recognized as complete
-                                progress ?? status === 'COMPLETE' ? 1 : 0)}%`,
+                                progress ?? (status === 'COMPLETE' ? 1 : 0))}%`,
                             },
                         };
                     }
@@ -4765,6 +4768,23 @@ function useViews() {
     };
 }
 
+const DEFAULT_VIEW_HOOKS = {
+    Copy: useCopyView,
+    CreateFolder: useCreateFolderView,
+    Delete: useDeleteView,
+    LocationDetail: useLocationDetailView,
+    Locations: useLocationsView,
+    Upload: useUploadView,
+};
+const isUseViewType = (value) => !!DEFAULT_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 DEFAULT_VIEW_HOOKS[type]();
+};
+
 /**
  * Handles default `StorageBrowser` behavior:
  * - render `LocationsView` on init
@@ -4785,23 +4805,6 @@ function StorageBrowserDefault() {
     return React__namespace["default"].createElement(LocationsView, null);
 }
 
-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]();
-};
-
 function createStorageBrowser(input) {
     assertRegisterAuthListener(input.config.registerAuthListener);
     const { accountId, customEndpoint, registerAuthListener, getLocationCredentials, region, } = input.config;