@aws-amplify/ui-react-storage 0.0.0-studio-console-80bb2e2-20230921222703 → 0.0.0-testdelay-84839eb-20250107181059

package/dist/esm/components/StorageBrowser/actions/handlers/upload.mjs

@@ -0,0 +1,58 @@
+import { isCancelError } from 'aws-amplify/storage';
+import { isFunction } from '@aws-amplify/ui';
+import { uploadData } from '@aws-amplify/storage/internals';
+import { constructBucket, getProgress } from './utils.mjs';
+
+// 5MB for multipart upload
+// https://github.com/aws-amplify/amplify-js/blob/1a5366d113c9af4ce994168653df3aadb142c581/packages/storage/src/providers/s3/utils/constants.ts#L16
+const MULTIPART_UPLOAD_THRESHOLD_BYTES = 5 * 1024 * 1024;
+const DEFAULT_CHECKSUM_ALGORITHM = 'crc-32';
+const UNDEFINED_CALLBACKS = {
+    cancel: undefined,
+    pause: undefined,
+    resume: undefined,
+};
+const uploadHandler = ({ config, data, options }) => {
+    const { accountId, credentials, customEndpoint } = config;
+    const { key, file, preventOverwrite } = data;
+    const { onProgress } = options ?? {};
+    const input = {
+        path: key,
+        data: file,
+        options: {
+            bucket: constructBucket(config),
+            expectedBucketOwner: accountId,
+            locationCredentialsProvider: credentials,
+            onProgress: (event) => {
+                if (isFunction(onProgress))
+                    onProgress(data, getProgress(event));
+            },
+            preventOverwrite,
+            customEndpoint,
+            checksumAlgorithm: DEFAULT_CHECKSUM_ALGORITHM,
+        },
+    };
+    const { cancel, pause, resume, result } = uploadData(input);
+    return {
+        ...(file.size > MULTIPART_UPLOAD_THRESHOLD_BYTES
+            ? { cancel, pause, resume }
+            : UNDEFINED_CALLBACKS),
+        result: result
+            .then((output) => ({
+            status: 'COMPLETE',
+            value: { key: output.path },
+        }))
+            .catch((error) => {
+            const { message } = error;
+            if (error.name === 'PreconditionFailed') {
+                return { message, status: 'OVERWRITE_PREVENTED' };
+            }
+            return {
+                message,
+                status: isCancelError(error) ? 'CANCELED' : 'FAILED',
+            };
+        }),
+    };
+};
+
+export { DEFAULT_CHECKSUM_ALGORITHM, MULTIPART_UPLOAD_THRESHOLD_BYTES, UNDEFINED_CALLBACKS, uploadHandler };

package/dist/esm/components/StorageBrowser/actions/handlers/utils.mjs

@@ -0,0 +1,89 @@
+const constructBucket = ({ bucket: bucketName, region, }) => ({ bucketName, region });
+const parseAccessGrantLocation = (location) => {
+    const { permission, scope, type } = location;
+    if (!scope.startsWith('s3://')) {
+        throw new Error(`Invalid scope: ${scope}`);
+    }
+    const id = crypto.randomUUID();
+    // remove default path
+    const slicedScope = scope.slice(5);
+    let bucket, prefix;
+    switch (type) {
+        case 'BUCKET': {
+            // { scope: 's3://bucket/*', type: 'BUCKET', },
+            bucket = slicedScope.slice(0, -2);
+            prefix = '';
+            break;
+        }
+        case 'PREFIX': {
+            // { scope: 's3://bucket/path/*', type: 'PREFIX', },
+            bucket = slicedScope.slice(0, slicedScope.indexOf('/'));
+            prefix = `${slicedScope.slice(bucket.length + 1, -1)}`;
+            break;
+        }
+        case 'OBJECT': {
+            // { scope: 's3://bucket/path/to/object', type: 'OBJECT', },
+            bucket = slicedScope.slice(0, slicedScope.indexOf('/'));
+            prefix = slicedScope.slice(bucket.length + 1);
+            break;
+        }
+        default: {
+            throw new Error(`Invalid location type: ${type}`);
+        }
+    }
+    let permissions;
+    switch (permission) {
+        case 'READ':
+            permissions = ['get', 'list'];
+            break;
+        case 'READWRITE':
+            permissions = ['delete', 'get', 'list', 'write'];
+            break;
+        case 'WRITE':
+            permissions = ['delete', 'write'];
+            break;
+        default:
+            throw new Error(`Invalid location permission: ${permission}`);
+    }
+    return { bucket, id, permissions: permissions, prefix, type };
+};
+const isSamePermissions = (permissionsToExclude, locationPermissions) => {
+    if (permissionsToExclude.length !== locationPermissions.length) {
+        return false;
+    }
+    const sortedLocationPermissions = locationPermissions.sort();
+    return permissionsToExclude
+        .sort()
+        .every((permission, index) => permission === sortedLocationPermissions[index]);
+};
+const isSameType = (typeToExclude, locationType) => typeof typeToExclude === 'string'
+    ? typeToExclude === locationType
+    : typeToExclude.includes(locationType);
+const shouldExcludeLocation = ({ permissions, type }, exclude) => {
+    const excludedByPermssions = !!(exclude?.exactPermissions &&
+        isSamePermissions(exclude.exactPermissions, permissions));
+    const excludedByType = !!(exclude?.type && isSameType(exclude.type, type));
+    return excludedByPermssions || excludedByType;
+};
+const getFilteredLocations = (locations, exclude) => locations.reduce((filteredLocations, location) => {
+    const parsedLocation = parseAccessGrantLocation(location);
+    const isNonFolderLikePrefix = !parsedLocation.prefix.endsWith('/') &&
+        parsedLocation.type === 'PREFIX';
+    if (isNonFolderLikePrefix) {
+        return filteredLocations;
+    }
+    if (!shouldExcludeLocation(parsedLocation, exclude)) {
+        filteredLocations.push(parsedLocation);
+    }
+    return filteredLocations;
+}, []);
+const getFileKey = (key) => key.slice(key.lastIndexOf('/') + 1, key.length);
+const createFileDataItem = (data) => ({
+    ...data,
+    fileKey: getFileKey(data.key),
+});
+const isFileItem = (value) => !!value.file;
+const isFileDataItem = (item) => !!item.fileKey;
+const getProgress = ({ totalBytes, transferredBytes, }) => totalBytes ? transferredBytes / totalBytes : undefined;
+
+export { constructBucket, createFileDataItem, getFileKey, getFilteredLocations, getProgress, isFileDataItem, isFileItem, parseAccessGrantLocation, shouldExcludeLocation };

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,38 @@
+import { createLocationCredentialsHandler } from './createLocationCredentialsHandler.mjs';
+import '@aws-amplify/storage/internals';
+import '@aws-amplify/ui';
+import { listLocationsHandler } from '../../actions/handlers/listLocations.mjs';
+import 'aws-amplify/storage';
+import '../../actions/configs/context.mjs';
+
+/**
+ * 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 };