@aws-amplify/ui-react-storage 3.3.9 → 3.4.0

package/dist/esm/components/StorageBrowser/actions/useAction/createEnhancedListHandler.mjs

@@ -0,0 +1,123 @@
+const SEARCH_LIMIT = 10000;
+const SEARCH_PAGE_SIZE = 1000;
+/**
+ * Normalizes and converts a string to lower case,
+ * handling Unicode characters and locale-specific case mappings.
+ * Uses NFKD to fully decompose unicode: https://unicode.org/reports/tr15/#Normalization_Forms_Table
+ */
+function normalize(input) {
+    return input
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '') // remove diacritic modifiers
+        .toLocaleLowerCase();
+}
+/**
+ * Performs a case-insensitive check to determine if a string includes another string,
+ * handling Unicode characters and locale-specific case mappings.
+ *
+ * @param {string} input - The string to search within.
+ * @param {string} query - The substring to search for.
+ * @returns {boolean} - Returns `true` if `query` is found in `input` (case-insensitively), otherwise `false`.
+ *
+ * @example
+ * caseInsensitiveIncludes("Photos", "photo"); // true
+ * caseInsensitiveIncludes("Hello", "HELLO");   // true
+ * caseInsensitiveIncludes("\uFB00", "\u0046\u0046");   // ff = FF true
+ * caseInsensitiveIncludes("Cafè", "cafe");   // true
+ */
+function caseInsensitiveIncludes(input, query) {
+    return normalize(input).includes(normalize(query));
+}
+function searchItems({ prefix = '', list, options }) {
+    const { query, filterBy, groupBy } = options;
+    // filter keys that match `filterBy` search option
+    const filteredItems = list.filter((item) => {
+        const key = typeof filterBy === 'function' ? filterBy(item) : filterBy;
+        const path = item[key];
+        const suffix = path.slice(prefix.length);
+        return caseInsensitiveIncludes(suffix, query);
+    });
+    if (!groupBy) {
+        return filteredItems;
+    }
+    // group items using the provided grouping delimiter
+    const uniquePaths = new Map();
+    for (const item of filteredItems) {
+        const key = typeof filterBy === 'function' ? filterBy(item) : filterBy;
+        const path = item[key];
+        const components = path.split(groupBy);
+        for (const [i, component] of components.entries()) {
+            if (!caseInsensitiveIncludes(component, query)) {
+                continue;
+            }
+            // list of components ending with match
+            const matchedPathSegments = components.slice(0, i + 1);
+            // create new path
+            let matchedPath = matchedPathSegments.join(groupBy);
+            const isFolder = matchedPath !== path;
+            if (isFolder) {
+                matchedPath += groupBy;
+            }
+            // ignore anything below the prefix for matching
+            if (matchedPath.length > prefix.length && !uniquePaths.has(matchedPath)) {
+                // add a new item
+                uniquePaths.set(matchedPath, {
+                    ...item,
+                    id: crypto.randomUUID(),
+                    [key]: matchedPath,
+                    type: isFolder ? 'FOLDER' : 'FILE',
+                });
+            }
+        }
+    }
+    return Array.from(uniquePaths.values());
+}
+const createEnhancedListHandler = (action) => {
+    return async function listActionHandler(prevState, { options, ...input }) {
+        const { nextToken: _nextToken, refresh, reset, search, ...rest } = options ?? {};
+        if (reset) {
+            return { items: [], nextToken: undefined };
+        }
+        // collect and filter results on `search`
+        if (search) {
+            const result = [];
+            let nextNextToken = undefined;
+            do {
+                const output = (await action({
+                    ...input,
+                    options: {
+                        ...rest,
+                        pageSize: SEARCH_PAGE_SIZE,
+                        nextToken: nextNextToken,
+                    },
+                }));
+                result.push(...output.items);
+                nextNextToken = output.nextToken;
+            } while (nextNextToken && result.length < SEARCH_LIMIT);
+            return {
+                items: searchItems({
+                    list: result,
+                    prefix: input.prefix,
+                    options: search,
+                }),
+                search: {
+                    // search limit reached but we still have a next token
+                    hasExhaustedSearch: !!nextNextToken,
+                },
+                nextToken: undefined,
+            };
+        }
+        // ignore provided `nextToken` on `refresh`
+        const nextToken = refresh ? undefined : _nextToken;
+        const output = (await action({
+            ...input,
+            options: { ...rest, nextToken },
+        }));
+        return {
+            items: [...(refresh ? [] : prevState.items), ...output.items],
+            nextToken: output.nextToken,
+        };
+    };
+};
+
+export { SEARCH_LIMIT, SEARCH_PAGE_SIZE, createEnhancedListHandler, searchItems };

package/dist/esm/components/StorageBrowser/actions/useAction/useListLocations.mjs

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { useDataState } from '@aws-amplify/ui-react-core';
+import { useActionConfig } from '../configs/context.mjs';
+import '@aws-amplify/storage/internals';
+import '@aws-amplify/ui';
+import 'aws-amplify/storage';
+import { createEnhancedListHandler } from './createEnhancedListHandler.mjs';
+
+const useListLocations = () => {
+    const { handler } = useActionConfig('listLocations');
+    const enhancedHandler = React__default.useMemo(() => createEnhancedListHandler(handler), [handler]);
+    return useDataState(enhancedHandler, {
+        items: [],
+        nextToken: undefined,
+    });
+};
+
+export { useListLocations };

package/dist/esm/components/StorageBrowser/adapters/createAmplifyAuthAdapter/createAmplifyAuthAdapter.mjs

@@ -0,0 +1,42 @@
+import { Amplify } from 'aws-amplify';
+import { fetchAuthSession } from 'aws-amplify/auth';
+import { Hub } from 'aws-amplify/utils';
+import { createAmplifyListLocationsHandler } from './createAmplifyListLocationsHandler.mjs';
+
+const MISSING_BUCKET_OR_REGION_ERROR = 'Amplify Storage configuration not found. Did you run `Amplify.configure` from your project root?';
+const MISSING_IDENTITY_ID_ERROR = '`identityId` not found.';
+const MISSING_TEMPORARY_CREDENTIALS_ERROR = 'Temporary Auth `credentials` not found.';
+const isTemporaryCredentials = (value) => !!value?.sessionToken || !!value?.expiration;
+const createAmplifyAuthAdapter = () => {
+    const { bucket, region } = Amplify.getConfig()?.Storage?.S3 ?? {};
+    if (!bucket || !region) {
+        throw new Error(MISSING_BUCKET_OR_REGION_ERROR);
+    }
+    const listLocations = createAmplifyListLocationsHandler();
+    const getLocationCredentials = async () => {
+        const { credentials, identityId } = await fetchAuthSession();
+        if (!isTemporaryCredentials(credentials)) {
+            throw new Error(MISSING_TEMPORARY_CREDENTIALS_ERROR);
+        }
+        if (!identityId) {
+            throw new Error(MISSING_IDENTITY_ID_ERROR);
+        }
+        return { credentials, identityId };
+    };
+    const registerAuthListener = (onStateChange) => {
+        const remove = Hub.listen('auth', (data) => {
+            if (data.payload.event === 'signedOut') {
+                onStateChange();
+                remove();
+            }
+        });
+    };
+    return {
+        getLocationCredentials,
+        listLocations,
+        registerAuthListener,
+        region,
+    };
+};
+
+export { MISSING_BUCKET_OR_REGION_ERROR, MISSING_IDENTITY_ID_ERROR, MISSING_TEMPORARY_CREDENTIALS_ERROR, createAmplifyAuthAdapter };

package/dist/esm/components/StorageBrowser/adapters/createAmplifyAuthAdapter/createAmplifyListLocationsHandler.mjs

@@ -0,0 +1,36 @@
+import { listPaths } from '@aws-amplify/storage/internals';
+import { parseAmplifyAuthPermission } from '../permissionParsers.mjs';
+import { getPaginatedLocations } from './getPaginatedLocations.mjs';
+
+const createAmplifyListLocationsHandler = () => {
+    let cachedItems = [];
+    return async function listLocations(input) {
+        const { options } = input ?? {};
+        const { nextToken, pageSize } = options ?? {};
+        if (cachedItems.length > 0) {
+            return getPaginatedLocations({
+                items: cachedItems,
+                pageSize,
+                nextToken,
+            });
+        }
+        const { locations } = await listPaths();
+        const sanitizedItems = locations.map(({ bucket, permission, prefix, type }) => {
+            return {
+                type,
+                permissions: parseAmplifyAuthPermission(permission),
+                bucket,
+                prefix: prefix.endsWith('*') ? prefix.slice(0, -1) : prefix,
+                id: crypto.randomUUID(),
+            };
+        });
+        cachedItems = sanitizedItems;
+        return getPaginatedLocations({
+            items: cachedItems,
+            pageSize,
+            nextToken,
+        });
+    };
+};
+
+export { createAmplifyListLocationsHandler };

package/dist/esm/components/StorageBrowser/adapters/createAmplifyAuthAdapter/getPaginatedLocations.mjs

@@ -0,0 +1,22 @@
+const getPaginatedLocations = ({ items, pageSize, nextToken, }) => {
+    if (pageSize) {
+        if (nextToken) {
+            if (Number(nextToken) > items.length) {
+                return { items: [], nextToken: undefined };
+            }
+            const start = -nextToken;
+            const end = start + pageSize < 0 ? start + pageSize : undefined;
+            return {
+                items: items.slice(start, end),
+                nextToken: end ? `${-end}` : undefined,
+            };
+        }
+        return {
+            items: items.slice(0, pageSize),
+            nextToken: items.length > pageSize ? `${items.length - pageSize}` : undefined,
+        };
+    }
+    return { items, nextToken: undefined };
+};
+
+export { getPaginatedLocations };

package/dist/esm/components/StorageBrowser/adapters/createManagedAuthAdapter/createLocationCredentialsHandler.mjs

@@ -0,0 +1,26 @@
+import { getDataAccess } from '@aws-amplify/storage/internals';
+import { toAccessGrantPermission } from '../permissionParsers.mjs';
+
+const createLocationCredentialsHandler = (handlerInput) => {
+    const { accountId, region, credentialsProvider, customEndpoint } = handlerInput;
+    /**
+     * Retrieves credentials for the specified scope & permission.
+     *
+     * @param input - An object specifying the requested scope & permission.
+     *
+     * @returns A promise which will resolve with the requested credentials.
+     */
+    return (input) => {
+        const { scope, permissions } = input;
+        return getDataAccess({
+            accountId,
+            credentialsProvider,
+            permission: toAccessGrantPermission(permissions),
+            region,
+            scope,
+            customEndpoint,
+        });
+    };
+};
+
+export { createLocationCredentialsHandler };

package/dist/esm/components/StorageBrowser/adapters/createManagedAuthAdapter/createManagedAuthAdapter.mjs

@@ -0,0 +1,40 @@
+import { createLocationCredentialsHandler } from './createLocationCredentialsHandler.mjs';
+import '../../actions/configs/context.mjs';
+import '@aws-amplify/storage/internals';
+import '@aws-amplify/ui';
+import { listLocationsHandler } from '../../actions/handlers/listLocations.mjs';
+import 'aws-amplify/storage';
+import 'react';
+import '@aws-amplify/ui-react-core';
+
+/**
+ * Create configuration including handlers to call S3 Access Grant APIs to list and get
+ * credentials for different locations.
+ *
+ * @param options - Configuration options for the adapter.
+ * @returns - An object containing the handlers to call S3 Access Grant APIs and region
+ */
+const createManagedAuthAdapter = ({ accountId, credentialsProvider, customEndpoint, region, registerAuthListener, }) => {
+    const config = {
+        accountId,
+        credentials: credentialsProvider,
+        customEndpoint,
+        region,
+    };
+    const listLocations = ({ options } = {}) => listLocationsHandler({ config, options });
+    const getLocationCredentials = createLocationCredentialsHandler({
+        credentialsProvider,
+        accountId,
+        customEndpoint,
+        region,
+    });
+    return {
+        accountId,
+        listLocations,
+        getLocationCredentials,
+        region,
+        registerAuthListener,
+    };
+};
+
+export { createManagedAuthAdapter };

package/dist/esm/components/StorageBrowser/adapters/permissionParsers.mjs

@@ -0,0 +1,42 @@
+const toAccessGrantPermission = (permission) => {
+    let result = '';
+    permission.forEach((access) => {
+        if (['read', 'get', 'list'].includes(access)) {
+            if (!result.includes('READ')) {
+                result = 'READ' + result;
+            }
+        }
+        if (['write', 'delete'].includes(access)) {
+            if (!result.includes('WRITE')) {
+                result += 'WRITE';
+            }
+        }
+    });
+    if (result === '') {
+        throw new Error('Improper Permission: Please provide correct permission.');
+    }
+    return result;
+};
+const parseAmplifyAuthPermission = (permissions) => {
+    const result = [];
+    permissions.forEach((access) => {
+        if (access === 'read') {
+            if (!result.includes('list')) {
+                result.push('list');
+            }
+            if (!result.includes('get')) {
+                result.push('get');
+            }
+        }
+        else if (['delete', 'get', 'list', 'write'].includes(access) &&
+            !result.includes(access)) {
+            result.push(access);
+        }
+    });
+    if (result.length === 0) {
+        throw new Error('Improper Permission: Please provide correct permission.');
+    }
+    return result.sort();
+};
+
+export { parseAmplifyAuthPermission, toAccessGrantPermission };

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

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { NavElement, OrderedListElement, ListItemElement, ButtonElement, SpanElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+import { isFunction } from '@aws-amplify/ui';
+import { Separator } from './Separator.mjs';
+
+const Breadcrumb = ({ isCurrent, name, onNavigate, }) => {
+    const isNavigable = isFunction(onNavigate);
+    return (React__default.createElement(ListItemElement, { "aria-current": isCurrent ? 'page' : undefined, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-list-item` },
+        React__default.createElement(React__default.Fragment, null,
+            !isCurrent && isNavigable ? (React__default.createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-button`, onClick: onNavigate, variant: "navigate" }, name)) : (React__default.createElement(SpanElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-text`, variant: "navigation-text" }, name)),
+            !isCurrent ? React__default.createElement(Separator, null) : null)));
+};
+function BreadcrumbNavigation({ breadcrumbs, role = 'navigation', }) {
+    return (React__default.createElement(NavElement, { "aria-label": 'Breadcrumb', className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb`, role: role },
+        React__default.createElement(OrderedListElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-list` }, breadcrumbs.map(({ isCurrent, name, onNavigate }, index) => {
+            return (React__default.createElement(Breadcrumb, { key: `${index}-breadcrumb-${name}`, isCurrent: isCurrent, name: name, onNavigate: onNavigate }));
+        }))));
+}
+
+export { Breadcrumb, BreadcrumbNavigation };

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

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { DescriptionListElement, ViewElement, DescriptionTermElement, DescriptionDetailsElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const Description = ({ term, details }) => {
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__description` },
+        React__default.createElement(DescriptionTermElement, { className: `${STORAGE_BROWSER_BLOCK}__description-term`, role: "term" }, term),
+        React__default.createElement(DescriptionDetailsElement, { className: `${STORAGE_BROWSER_BLOCK}__description-details`, role: "definition" }, details)));
+};
+const DescriptionList = ({ descriptions, className = '', }) => {
+    return (React__default.createElement(DescriptionListElement, { className: `${STORAGE_BROWSER_BLOCK}__description-list ${className}`, role: "list" }, descriptions.map(({ term, details }, index) => (React__default.createElement(Description, { term: term, details: details, key: `${index}-description-${term}` })))));
+};
+
+export { DescriptionList };

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

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement, ButtonElement } from '../context/elements/definitions.mjs';
+import { IconElement } from '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+function MenuItem({ isDisabled, icon, label, onClick, }) {
+    return (React__default.createElement(ButtonElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-item`, disabled: isDisabled, role: 'menuitem', onClick: onClick, variant: "menu-item" },
+        icon && (React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-item-icon`, variant: icon })),
+        label));
+}
+function DropdownMenu({ isDisabled = false, items, onItemSelect, }) {
+    const [isOpen, setIsOpen] = React__default.useState(false);
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu` },
+        React__default.createElement(ButtonElement, { "aria-label": "Menu Toggle", className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-toggle`, disabled: isDisabled || !items?.length, "data-testid": "MENU_TOGGLE", onClick: () => {
+                setIsOpen((prev) => !prev);
+            }, variant: "menu-toggle" },
+            React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-toggle-icon`, variant: "vertical-kebab" })),
+        React__default.createElement(ViewElement, { "aria-label": "Menu Items", className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-list${isOpen
+                ? ` ${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__menu-list--open`
+                : ''}`, "data-testid": "MENU_LIST", role: "menu", variant: "menu-list" }, items
+            .filter(({ isHidden }) => !isHidden)
+            .map(({ icon, id, isDisabled, label }) => {
+            return (React__default.createElement(MenuItem, { key: `menu-item-${id}`, isDisabled: isDisabled, icon: icon, label: label, onClick: () => {
+                    setIsOpen(false);
+                    onItemSelect?.(id);
+                } }));
+        }))));
+}
+
+export { DropdownMenu, MenuItem };

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

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ViewElement, LabelElement, InputElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+function Field({ 'aria-describedby': ariaDescribedBy = 'fieldError', className = `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__field`, children, label, icon = null, id, ...props }) {
+    return (React__default.createElement(ViewElement, { className: className },
+        icon,
+        label ? (React__default.createElement(LabelElement, { className: `${className}__label`, htmlFor: id }, label)) : null,
+        React__default.createElement(InputElement, { ...props, "aria-describedby": ariaDescribedBy, className: `${className}-input`, id: id, type: 'text' }),
+        children));
+}
+
+export { Field };

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

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import { IconElement } from '../context/elements/IconElement.mjs';
+
+function PaginationButton({ isDisabled, onClick, type, }) {
+    if (!type)
+        return null;
+    const buttonType = `paginate-${type}`;
+    return (React__default.createElement(ButtonElement, { "aria-label": `Go to ${type} page`, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-button--${buttonType}`, disabled: isDisabled, onClick: onClick, variant: buttonType },
+        React__default.createElement(IconElement, { className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__pagination-button-icon`, variant: buttonType })));
+}
+
+export { PaginationButton };

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

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { SpanElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK_TO_BE_UPDATED } from '../constants.mjs';
+
+function Separator() {
+    return (React__default.createElement(SpanElement, { "aria-hidden": true, className: `${STORAGE_BROWSER_BLOCK_TO_BE_UPDATED}__breadcrumb-separator` }, "/"));
+}
+
+export { Separator };

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

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { TableElement, TableHeadElement, TableRowElement, TableHeaderElement, TableBodyElement, TableDataCellElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const Table = ({ headers, rows }) => {
+    return (React__default.createElement(TableElement, { className: `${STORAGE_BROWSER_BLOCK}__table` },
+        React__default.createElement(TableHeadElement, { className: `${STORAGE_BROWSER_BLOCK}__table-head` }, headers.length ? (React__default.createElement(TableRowElement, { className: `${STORAGE_BROWSER_BLOCK}__table-row` }, headers.map(({ key, content }) => (React__default.createElement(TableHeaderElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-header` }, content))))) : null),
+        React__default.createElement(TableBodyElement, { className: `${STORAGE_BROWSER_BLOCK}__table-body` }, rows?.map(({ key, content }) => (React__default.createElement(TableRowElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-row` }, content.map(({ key, content, type }) => {
+            return type === 'header' ? (React__default.createElement(TableHeaderElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-header`, role: "rowheader" }, content)) : (React__default.createElement(TableDataCellElement, { key: key, className: `${STORAGE_BROWSER_BLOCK}__table-data-cell` }, content));
+        })))))));
+};
+
+export { Table };

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

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { CheckboxField, Pagination as Pagination$1, SearchField as SearchField$1, Breadcrumbs, Loader, TextField, Button, Menu, MenuItem, View, Heading } from '@aws-amplify/ui-react';
+import './context/elements/definitions.mjs';
+import { IconElement } from './context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from './constants.mjs';
+
+const OverwriteToggle = ({ isDisabled, isOverwritingEnabled, label = '', onToggle, }) => {
+    return (React.createElement(CheckboxField, { name: label, label: label, labelPosition: "end", isDisabled: isDisabled, checked: isOverwritingEnabled, onChange: () => {
+            onToggle?.();
+        } }));
+};
+const SearchSubfoldersToggle = ({ isSearchingSubfolders, label = '', onToggle, }) => {
+    return (React.createElement(CheckboxField, { name: label, label: label, labelPosition: "end", checked: isSearchingSubfolders, onChange: () => {
+            onToggle?.();
+        } }));
+};
+const Pagination = ({ page = 1, onPaginate, hasNextPage, highestPageVisited, }) => {
+    return (React.createElement(Pagination$1, { currentPage: page, totalPages: highestPageVisited ?? 1, hasMorePages: hasNextPage, siblingCount: 1, onChange: (index) => {
+            onPaginate?.(index ?? 0);
+        }, onNext: () => {
+            onPaginate?.(page + 1);
+        }, onPrevious: () => {
+            onPaginate?.(page - 1);
+        } }));
+};
+const SearchField = ({ onQueryChange, onSearch, onClear, placeholder, label, query, }) => {
+    return (React.createElement(SearchField$1, { label: label, size: "small", clearButtonLabel: "Clear search", placeholder: placeholder, value: query, onChange: (e) => {
+            onQueryChange?.(e.target.value);
+        }, onSubmit: () => {
+            onSearch?.();
+        }, onClear: () => {
+            onClear?.();
+        } }));
+};
+const Navigation = ({ items }) => {
+    return (React.createElement(Breadcrumbs.Container, null, items.map((item, i) => {
+        return (React.createElement(Breadcrumbs.Item, { key: i },
+            React.createElement(Breadcrumbs.Link, { as: item.isCurrent ? 'span' : 'button', isCurrent: item.isCurrent, onClick: item.onNavigate }, item.name),
+            item.isCurrent ? null : React.createElement(Breadcrumbs.Separator, null)));
+    })));
+};
+const LoadingIndicator = ({ isLoading }) => {
+    if (isLoading) {
+        return (React.createElement(Loader, { className: "amplify-storage-browser__loader", variation: "linear", size: "small" }));
+    }
+};
+const FolderNameField = ({ onChange, label, placeholder, validationMessage, onValidate, }) => {
+    const handleValidate = ({ target: { value }, }) => {
+        onValidate?.(value);
+    };
+    return (React.createElement(TextField, { label: label, placeholder: placeholder, errorMessage: validationMessage, hasError: !!validationMessage, onBlur: handleValidate, onChange: (event) => {
+            const { value } = event.target;
+            handleValidate?.(event);
+            onChange?.(value);
+        } }));
+};
+const DataRefresh = ({ onRefresh }) => {
+    return (React.createElement(Button, { onClick: () => {
+            onRefresh?.();
+        }, "aria-label": "Refresh data" },
+        React.createElement(IconElement, { className: "amplify-icon", variant: "refresh" })));
+};
+const ActionsList = ({ items, onActionSelect, isDisabled, }) => {
+    return (React.createElement(Menu, { isDisabled: isDisabled, trigger: React.createElement(Button, { ariaLabel: "Menu Toggle" },
+            React.createElement(IconElement, { className: "amplify-icon", variant: "menu" })) }, items
+        .filter(({ isHidden }) => !isHidden)
+        .map(({ actionType, icon, label, isDisabled }, i) => {
+        return (React.createElement(MenuItem, { key: i, size: "small", gap: "xs", isDisabled: isDisabled, onClick: () => {
+                onActionSelect?.(actionType);
+            } },
+            icon && React.createElement(IconElement, { variant: icon }),
+            label));
+    })));
+};
+const StatusDisplay = ({ statuses, total }) => {
+    if (!statuses?.length) {
+        return null;
+    }
+    return (React.createElement(View, { as: "dl", className: `${STORAGE_BROWSER_BLOCK}__status-display` }, statuses.map(({ name, count }, i) => (React.createElement(View, { as: "div", className: `${STORAGE_BROWSER_BLOCK}__status`, key: i },
+        React.createElement(View, { as: "dt", className: `${STORAGE_BROWSER_BLOCK}__status-label` }, name),
+        React.createElement(View, { as: "dd", className: `${STORAGE_BROWSER_BLOCK}__status-value` }, `${count}/${total}`))))));
+};
+const ActionDestination = ({ isNavigable, items, label, }) => {
+    if (!items.length) {
+        return null;
+    }
+    return (React.createElement(View, { as: "dl", className: `${STORAGE_BROWSER_BLOCK}__destination` },
+        React.createElement(View, { as: "dt", className: `${STORAGE_BROWSER_BLOCK}__destination-label` }, label),
+        React.createElement(View, { as: "dd", className: `${STORAGE_BROWSER_BLOCK}__destination-value` },
+            React.createElement(Breadcrumbs.Container, null, items.map((item, i) => {
+                return (React.createElement(Breadcrumbs.Item, { key: i },
+                    isNavigable ? (React.createElement(Breadcrumbs.Link, { as: item.isCurrent ? 'span' : 'button', isCurrent: item.isCurrent, onClick: item.onNavigate }, item.name)) : (item.name),
+                    item.isCurrent ? null : React.createElement(Breadcrumbs.Separator, null)));
+            })))));
+};
+const Title = ({ title }) => {
+    return (React.createElement(Heading, { className: `${STORAGE_BROWSER_BLOCK}__title`, level: 2 }, title));
+};
+const componentsDefault = {
+    ActionDestination,
+    ActionsList,
+    DataRefresh,
+    LoadingIndicator,
+    Pagination,
+    Navigation,
+    OverwriteToggle,
+    SearchField,
+    SearchSubfoldersToggle,
+    StatusDisplay,
+    FolderNameField,
+    Title,
+};
+
+export { componentsDefault };

package/dist/esm/components/StorageBrowser/composables/ActionCancel.mjs

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import '@aws-amplify/ui-react';
+import { ButtonElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+
+const ActionCancel = ({ onCancel, isDisabled, label, }) => (React__default.createElement(ButtonElement, { variant: "cancel", className: `${STORAGE_BROWSER_BLOCK}__cancel`, onClick: onCancel, disabled: isDisabled }, label));
+
+export { ActionCancel };

package/dist/esm/components/StorageBrowser/composables/ActionDestination.mjs

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement, SpanElement, DescriptionListElement, DescriptionTermElement, DescriptionDetailsElement } from '../context/elements/definitions.mjs';
+import '../context/elements/IconElement.mjs';
+import { Separator } from '../components/Separator.mjs';
+import { BreadcrumbNavigation } from '../components/BreadcrumbNavigation.mjs';
+
+const ActionDestination = ({ isNavigable, items, label, }) => {
+    if (!items.length) {
+        return null;
+    }
+    return (React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__destination` }, isNavigable ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(SpanElement, null, `${label}:`),
+        React__default.createElement(BreadcrumbNavigation, { breadcrumbs: items, role: "complementary" }))) : (React__default.createElement(DescriptionListElement, { className: `${STORAGE_BROWSER_BLOCK}__description-list`, role: "list" },
+        React__default.createElement(DescriptionTermElement, { className: `${STORAGE_BROWSER_BLOCK}__description-term`, role: "term" }, `${label}:`),
+        items.map(({ name }, index) => {
+            return (React__default.createElement(React__default.Fragment, { key: `action-destination-item-${name}-${index}` },
+                React__default.createElement(DescriptionDetailsElement, { className: `${STORAGE_BROWSER_BLOCK}__description-details`, role: "definition" },
+                    React__default.createElement(SpanElement, { variant: "destination-text" }, name)),
+                index === items.length - 1 ? null : React__default.createElement(Separator, null)));
+        })))));
+};
+
+export { ActionDestination };