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

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

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { useDataState } from '@aws-amplify/ui-react-core';
+import { USE_LIST_ERROR_MESSAGE } from './constants.mjs';
+import { useActionHandlers } from './context.mjs';
+import { createEnhancedListHandler } from './createEnhancedListHandler.mjs';
+
+const useListLocations = () => {
+    const { handlers } = useActionHandlers({
+        errorMessage: USE_LIST_ERROR_MESSAGE,
+    });
+    const { listLocations } = handlers;
+    const enhancedHandler = React__default.useMemo(() => createEnhancedListHandler(listLocations), [listLocations]);
+    return useDataState(enhancedHandler, {
+        items: [],
+        nextToken: undefined,
+    });
+};
+
+export { useListLocations };

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

@@ -0,0 +1,26 @@
+import { isFunction } from '@aws-amplify/ui';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../actions/configs/context.mjs';
+import { isDefaultActionViewType } from '../actions/configs/defaults.mjs';
+
+const resolveHandler = (value) => (isFunction(value) ? value : value.handler);
+const getActionHandlers = (configs) => {
+    const { copy: copyConfig, createFolder: createFolderConfig, delete: deleteConfig, download, upload: uploadConfig, listLocationItems, listLocations, } = configs.default;
+    const defaultHandlers = {
+        copy: copyConfig.handler,
+        createFolder: createFolderConfig.handler,
+        delete: deleteConfig.handler,
+        download,
+        listLocationItems,
+        listLocations,
+        upload: uploadConfig.handler,
+    };
+    return !configs.custom
+        ? defaultHandlers
+        : Object.entries(configs.custom).reduce((handlers, [key, config]) => isDefaultActionViewType(key)
+            ? handlers
+            : { ...handlers, [key]: resolveHandler(config) }, defaultHandlers);
+};
+
+export { getActionHandlers };

package/dist/esm/components/StorageBrowser/validators/assertAccountId.mjs

@@ -0,0 +1,7 @@
+function assertAccountId(value) {
+    if (!value) {
+        throw new Error('Storage Browser: Must provide accountId to `listCallerAccessGrants`.');
+    }
+}
+
+export { assertAccountId };

package/dist/esm/components/StorageBrowser/validators/assertLocationData.mjs

@@ -0,0 +1,24 @@
+import { isObject, isString } from '@aws-amplify/ui';
+
+function assertLocationPermissions(value, message) {
+    if (!Array.isArray(value) ||
+        value.some((inputPermissionEntry) => typeof inputPermissionEntry !== 'string' ||
+            !['list', 'get', 'write', 'delete'].includes(inputPermissionEntry))) {
+        throw new Error(message);
+    }
+}
+function assertLocationData(value, message = 'Invalid value provided as `location`.') {
+    const locationStringDataKeys = ['bucket', 'id', 'prefix', 'type'];
+    if (!isObject(value) ||
+        locationStringDataKeys.some((key) => !isString(value[key]))) {
+        throw new Error(message);
+    }
+    assertLocationPermissions(value?.permissions, message);
+}
+function assertPrefix(value, message) {
+    if (!isString(value)) {
+        throw new Error(message ?? 'Invalid value provided as `prefix`.');
+    }
+}
+
+export { assertLocationData, assertPrefix };

package/dist/esm/components/StorageBrowser/validators/assertRegisterAuthListener.mjs

@@ -0,0 +1,9 @@
+import { isFunction } from '@aws-amplify/ui';
+
+function assertRegisterAuthListener(value) {
+    if (!isFunction(value)) {
+        throw new Error('StorageBrowser: `registerAuthListener` must be a function.');
+    }
+}
+
+export { assertRegisterAuthListener };

package/dist/esm/components/StorageBrowser/validators/isFileTooBig.mjs

@@ -0,0 +1,4 @@
+const UPLOAD_FILE_SIZE_LIMIT = 160 * 1000 * 1000 * 1000;
+const isFileTooBig = (file) => file.size > UPLOAD_FILE_SIZE_LIMIT;
+
+export { UPLOAD_FILE_SIZE_LIMIT, isFileTooBig };

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

@@ -0,0 +1,66 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { ActionCancelControl } from '../../../controls/ActionCancelControl.mjs';
+import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';
+import { ActionStartControl } from '../../../controls/ActionStartControl.mjs';
+import { DataTableControl } from '../../../controls/DataTableControl.mjs';
+import { LoadingIndicatorControl } from '../../../controls/LoadingIndicatorControl.mjs';
+import { MessageControl } from '../../../controls/MessageControl.mjs';
+import { SearchFieldControl } from '../../../controls/SearchFieldControl.mjs';
+import { StatusDisplayControl } from '../../../controls/StatusDisplayControl.mjs';
+import { TitleControl } from '../../../controls/TitleControl.mjs';
+import { CopyViewProvider } from './CopyViewProvider.mjs';
+import { FoldersMessageControl } from './FoldersMessageControl.mjs';
+import { FoldersPaginationControl } from './FoldersPaginationControl.mjs';
+import { FoldersTableControl } from './FoldersTableControl.mjs';
+import { ActionDestinationControl } from '../../../controls/ActionDestinationControl.mjs';
+import { useCopyView } from './useCopyView.mjs';
+import { classNames } from '@aws-amplify/ui';
+
+const CopyView = ({ className, ...props }) => {
+    const state = useCopyView(props);
+    const { isProcessing, isProcessingComplete } = state;
+    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className) },
+        React__default.createElement(CopyViewProvider, { ...state },
+            React__default.createElement(ActionExitControl, null),
+            React__default.createElement(TitleControl, null),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                React__default.createElement(DataTableControl, null)),
+            isProcessing || isProcessingComplete ? null : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__controls` },
+                    React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__search` },
+                        React__default.createElement(SearchFieldControl, null)),
+                    React__default.createElement(FoldersPaginationControl, null)),
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__data-table` },
+                    React__default.createElement(LoadingIndicatorControl, null),
+                    React__default.createElement(FoldersTableControl, null),
+                    React__default.createElement(FoldersMessageControl, null)))),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__summary` },
+                React__default.createElement(ActionDestinationControl, null),
+                React__default.createElement(StatusDisplayControl, null)),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__default.createElement(MessageControl, null),
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__default.createElement(ActionCancelControl, null),
+                    React__default.createElement(ActionStartControl, null))))));
+};
+CopyView.displayName = 'CopyView';
+CopyView.Provider = CopyViewProvider;
+CopyView.Cancel = ActionCancelControl;
+CopyView.Destination = ActionDestinationControl;
+CopyView.Exit = ActionExitControl;
+CopyView.FoldersLoadingIndicator = LoadingIndicatorControl;
+CopyView.FoldersMessage = FoldersMessageControl;
+CopyView.FoldersPagination = FoldersPaginationControl;
+CopyView.FoldersSearch = SearchFieldControl;
+CopyView.FoldersTable = FoldersTableControl;
+CopyView.Message = MessageControl;
+CopyView.Start = ActionStartControl;
+CopyView.Statuses = StatusDisplayControl;
+CopyView.TasksTable = DataTableControl;
+CopyView.Title = TitleControl;
+
+export { CopyView };

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

@@ -0,0 +1,59 @@
+import React__default from 'react';
+import { ControlsContextProvider } from '../../../controls/context.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import '@aws-amplify/ui';
+import { getActionViewTableData } from '../getActionViewTableData.mjs';
+import { FoldersMessageProvider } from './FoldersMessageControl.mjs';
+import { FoldersPaginationProvider } from './FoldersPaginationControl.mjs';
+import { FoldersTableProvider } from './FoldersTableControl.mjs';
+
+function CopyViewProvider({ children, ...props }) {
+    const { CopyView: displayText } = useDisplayText();
+    const { actionCancelLabel, actionDestinationLabel, actionExitLabel, actionStartLabel, getActionCompleteMessage, overwriteWarningMessage, searchPlaceholder, searchSubmitLabel, searchClearLabel, statusDisplayCanceledLabel, statusDisplayCompletedLabel, statusDisplayFailedLabel, statusDisplayQueuedLabel, } = displayText;
+    const { destination, folders, isProcessing, isProcessingComplete, location, statusCounts, tasks, onActionCancel, onActionExit, onActionStart, onSelectDestination, onTaskRemove, } = props;
+    const { hasNextPage, highestPageVisited, hasError: hasFoldersError, message: foldersErrorMessage, query, hasExhaustedSearch, isLoading, page, pageItems, onPaginate, onQuery, onSearchClear, onSearch, onSelectFolder, } = folders;
+    const { key: locationKey } = location ?? {};
+    const tableData = getActionViewTableData({
+        tasks,
+        locationKey,
+        isProcessing,
+        displayText,
+        onTaskRemove,
+    });
+    const isActionStartDisabled = isProcessing || isProcessingComplete || !destination?.current;
+    const isActionCancelDisabled = !isProcessing || isProcessingComplete;
+    const message = !isProcessingComplete
+        ? {
+            content: overwriteWarningMessage,
+            type: 'warning',
+        }
+        : getActionCompleteMessage({ counts: statusCounts });
+    return (React__default.createElement(ControlsContextProvider, { data: {
+            actionCancelLabel,
+            actionDestinationLabel,
+            actionExitLabel,
+            actionStartLabel,
+            destination,
+            isActionCancelDisabled,
+            isActionDestinationNavigable: !isProcessing && !isProcessingComplete,
+            isActionExitDisabled: isProcessing,
+            isActionStartDisabled,
+            isLoading,
+            message,
+            searchQuery: query,
+            searchPlaceholder,
+            searchSubmitLabel,
+            searchClearLabel,
+            statusCounts,
+            statusDisplayCanceledLabel,
+            statusDisplayCompletedLabel,
+            statusDisplayFailedLabel,
+            statusDisplayQueuedLabel,
+            tableData,
+        }, onActionCancel: onActionCancel, onActionExit: onActionExit, onActionStart: onActionStart, onSearch: onSearch, onSearchClear: onSearchClear, onSearchQueryChange: onQuery, onSelectDestination: onSelectDestination },
+        React__default.createElement(FoldersPaginationProvider, { hasNextPage: hasNextPage, highestPageVisited: highestPageVisited, page: page, onPaginate: onPaginate },
+            React__default.createElement(FoldersTableProvider, { destination: destination, folders: pageItems, onSelectFolder: onSelectFolder },
+                React__default.createElement(FoldersMessageProvider, { folders: folders.pageItems, hasError: hasFoldersError, message: foldersErrorMessage, query: query, hasExhaustedSearch: hasExhaustedSearch }, children)))));
+}
+
+export { CopyViewProvider };

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { ControlsContextProvider } from '../../../controls/context.mjs';
+import { MessageControl } from '../../../controls/MessageControl.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import '@aws-amplify/ui';
+
+const defaultValue = {};
+const { useFoldersMessage, FoldersMessageProvider } = createContextUtilities({ contextName: 'FoldersMessage', defaultValue });
+const FoldersMessageControl = () => {
+    const { CopyView: { getListFoldersResultsMessage }, } = useDisplayText();
+    const { hasError, folders, message, query, hasExhaustedSearch } = useFoldersMessage();
+    const messageContent = getListFoldersResultsMessage({
+        hasError,
+        folders,
+        message,
+        query,
+        hasExhaustedSearch,
+    });
+    return (React__default.createElement(ControlsContextProvider, { data: { message: messageContent } },
+        React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+            React__default.createElement(MessageControl, null))));
+};
+FoldersMessageControl.displayName = 'FoldersMessage';
+
+export { FoldersMessageControl, FoldersMessageProvider, useFoldersMessage };

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

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { Pagination } from '../../../composables/Pagination.mjs';
+import { useResolvedComposable } from '../../../controls/hooks/useResolvedComposable.mjs';
+
+const defaultValue = {};
+const { FoldersPaginationProvider, useFoldersPagination } = createContextUtilities({ contextName: 'FoldersPagination', defaultValue });
+const FoldersPaginationControl = () => {
+    const props = useFoldersPagination();
+    const Resolved = useResolvedComposable(Pagination, 'Pagination');
+    return React__default.createElement(Resolved, { ...props });
+};
+FoldersPaginationControl.displayName = 'FoldersPagination';
+
+export { FoldersPaginationControl, FoldersPaginationProvider, useFoldersPagination };

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

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { ControlsContextProvider } from '../../../controls/context.mjs';
+import { DataTableControl } from '../../../controls/DataTableControl.mjs';
+import { getDestinationPickerTableData } from './getDestinationPickerTableData.mjs';
+
+const defaultValue = {};
+const { useFoldersTable, FoldersTableProvider } = createContextUtilities({ contextName: 'FoldersTable', defaultValue });
+const FoldersTableControl = () => {
+    const { destination, folders, onSelectFolder } = useFoldersTable();
+    const { current, path = '' } = destination ?? {};
+    const tableData = getDestinationPickerTableData({
+        prefix: current?.prefix ?? '',
+        path,
+        folders,
+        onSelectFolder,
+    });
+    return (React__default.createElement(ControlsContextProvider, { data: { tableData } },
+        React__default.createElement(DataTableControl, null)));
+};
+FoldersTableControl.displayName = 'FoldersTable';
+
+export { FoldersTableControl, FoldersTableProvider, useFoldersTable };

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

@@ -0,0 +1,35 @@
+const DESTINATION_PICKER_COLUMNS = [
+    { key: 'name', type: 'sort', content: { label: 'Folder name' } },
+];
+const getDestinationPickerTableData = ({ prefix, path, folders, onSelectFolder, }) => {
+    const rows = !folders
+        ? []
+        : folders.map(({ id, key }) => {
+            const folderSubPath = key.slice(`${prefix ?? ''}${path}`.length);
+            const folderLocationPath = key.slice(prefix.length);
+            const row = {
+                key: id,
+                content: [
+                    {
+                        key: `${DESTINATION_PICKER_COLUMNS[0].key}-${id}`,
+                        type: 'button',
+                        content: {
+                            icon: 'folder',
+                            ariaLabel: folderSubPath,
+                            label: folderSubPath,
+                            onClick: () => {
+                                onSelectFolder?.(id, folderLocationPath);
+                            },
+                        },
+                    },
+                ],
+            };
+            return row;
+        });
+    return {
+        headers: DESTINATION_PICKER_COLUMNS,
+        rows,
+    };
+};
+
+export { getDestinationPickerTableData };

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

@@ -0,0 +1,94 @@
+import React__default, { useRef, useState } from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import '../../../providers/store/location/context.mjs';
+import '../../../providers/store/files/context.mjs';
+import '../../../providers/store/actionType/context.mjs';
+import '../../../providers/store/locationItems/context.mjs';
+import { useStore } from '../../../providers/store/useStore.mjs';
+import '../../../useAction/context.mjs';
+import { useAction } from '../../../useAction/useAction.mjs';
+import '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react-core/elements';
+import '../../../providers/configuration/credentials/context.mjs';
+import '../../../providers/configuration/context.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import { useFolders } from './useFolders.mjs';
+
+const useCopyView = (options) => {
+    const { onExit } = options ?? {};
+    const [{ location, locationItems: { fileDataItems }, }, dispatchStoreAction,] = useStore();
+    const idLookup = useRef({});
+    const [destination, setDestination] = useState(location);
+    const data = React__default.useMemo(() => {
+        idLookup.current = {};
+        return fileDataItems?.map((item) => {
+            // generate new `id` on each `destination.key` change to refresh
+            // task data provided to `useActon`
+            const id = crypto.randomUUID();
+            idLookup.current[id] = item.id;
+            return {
+                ...item,
+                id,
+                key: `${destination.key}${item.fileKey}`,
+                sourceKey: item.key,
+            };
+        });
+    }, [destination.key, fileDataItems]);
+    const folders = useFolders({ destination, setDestination });
+    const [processState, handleProcess] = useAction('copy', { items: data });
+    const { isProcessing, isProcessingComplete, statusCounts, tasks } = processState;
+    const { current } = location;
+    const { onInitialize } = folders;
+    // initial load
+    React__default.useEffect(() => {
+        onInitialize();
+    }, [onInitialize]);
+    const onActionStart = () => {
+        handleProcess();
+    };
+    const onActionCancel = () => {
+        tasks.forEach((task) => {
+            if (isFunction(task.cancel))
+                task.cancel();
+        });
+    };
+    const onActionExit = () => {
+        // clear files state
+        dispatchStoreAction({ type: 'RESET_LOCATION_ITEMS' });
+        // clear selected action
+        dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+        if (isFunction(onExit))
+            onExit(current);
+    };
+    const onTaskRemove = React__default.useCallback(({ data }) => {
+        dispatchStoreAction({
+            type: 'REMOVE_LOCATION_ITEM',
+            id: idLookup.current[data.id],
+        });
+    }, [dispatchStoreAction]);
+    const onSelectDestination = (selectedDestination, path) => {
+        setDestination({
+            current: selectedDestination,
+            path: path ?? '',
+            key: `${selectedDestination.prefix ?? ''}${path}`,
+        });
+    };
+    return {
+        destination,
+        isProcessing,
+        isProcessingComplete,
+        folders,
+        location,
+        statusCounts,
+        tasks,
+        onActionCancel,
+        onActionStart,
+        onActionExit,
+        onSelectDestination,
+        onTaskRemove,
+    };
+};
+
+export { useCopyView };

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

@@ -0,0 +1,97 @@
+import React__default from 'react';
+import '../../../useAction/context.mjs';
+import '@aws-amplify/ui';
+import '../../../providers/configuration/context.mjs';
+import '../../../providers/store/location/context.mjs';
+import '../../../providers/store/files/context.mjs';
+import '../../../providers/store/actionType/context.mjs';
+import '../../../providers/store/locationItems/context.mjs';
+import { useList } from '../../../useAction/useList.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import { usePaginate } from '../../hooks/usePaginate.mjs';
+import { useSearch } from '../../hooks/useSearch.mjs';
+
+const DEFAULT_PAGE_SIZE = 100;
+const DEFAULT_LIST_OPTIONS = {
+    pageSize: DEFAULT_PAGE_SIZE,
+    delimiter: '/',
+    exclude: 'FILE',
+};
+const DEFAULT_REFRESH_OPTIONS = { ...DEFAULT_LIST_OPTIONS, refresh: true };
+const useFolders = ({ destination, setDestination, }) => {
+    const { current, key } = destination;
+    const [{ data, hasError, isLoading, message }, handleList] = useList('folderItems');
+    const { items, nextToken, search } = data;
+    const { hasExhaustedSearch = false } = search ?? {};
+    const onInitialize = React__default.useCallback(() => {
+        handleList({
+            prefix: key,
+            options: { ...DEFAULT_REFRESH_OPTIONS },
+        });
+    }, [handleList, key]);
+    const hasNextToken = !!nextToken;
+    const paginateCallback = () => {
+        if (!nextToken)
+            return;
+        handleList({
+            prefix: key,
+            options: { ...DEFAULT_LIST_OPTIONS, nextToken },
+        });
+    };
+    const { currentPage: page, onPaginate, highestPageVisited, pageItems, handleReset, } = usePaginate({
+        items,
+        paginateCallback,
+        pageSize: DEFAULT_PAGE_SIZE,
+        hasNextToken,
+    });
+    const onSearch = (query) => {
+        handleReset();
+        handleList({
+            prefix: key,
+            options: {
+                ...DEFAULT_LIST_OPTIONS,
+                search: { query, filterBy: 'key' },
+            },
+        });
+    };
+    const { onSearchSubmit, searchQuery: query, resetSearch, onSearchQueryChange: onQuery, } = useSearch({ onSearch });
+    const onSelectFolder = (id, folderLocationPath) => {
+        if (!current) {
+            return;
+        }
+        resetSearch();
+        setDestination({
+            current: { ...current, id },
+            path: folderLocationPath,
+            key: `${current.prefix ?? ''}${folderLocationPath}`,
+        });
+    };
+    return {
+        hasError,
+        hasNextPage: hasNextToken,
+        highestPageVisited,
+        isLoading,
+        message,
+        onInitialize,
+        page,
+        pageItems,
+        query,
+        hasExhaustedSearch,
+        onPaginate,
+        onQuery,
+        onSearch: onSearchSubmit,
+        onSearchClear: () => {
+            handleReset();
+            resetSearch();
+            handleList({
+                prefix: key,
+                options: { ...DEFAULT_REFRESH_OPTIONS },
+            });
+        },
+        onSelectFolder,
+    };
+};
+
+export { DEFAULT_LIST_OPTIONS, useFolders };

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

@@ -0,0 +1,36 @@
+import React__default from 'react';
+import { STORAGE_BROWSER_BLOCK } from '../../../constants.mjs';
+import '@aws-amplify/ui-react';
+import { ViewElement } from '../../../context/elements/definitions.mjs';
+import '../../../context/elements/IconElement.mjs';
+import { ActionStartControl } from '../../../controls/ActionStartControl.mjs';
+import { ActionExitControl } from '../../../controls/ActionExitControl.mjs';
+import { FolderNameFieldControl } from '../../../controls/FolderNameFieldControl.mjs';
+import { MessageControl } from '../../../controls/MessageControl.mjs';
+import { TitleControl } from '../../../controls/TitleControl.mjs';
+import { CreateFolderViewProvider } from './CreateFolderViewProvider.mjs';
+import { useCreateFolderView } from './useCreateFolderView.mjs';
+import { classNames } from '@aws-amplify/ui';
+
+const CreateFolderView = ({ className, ...props }) => {
+    const state = useCreateFolderView(props);
+    return (React__default.createElement(ViewElement, { className: classNames(STORAGE_BROWSER_BLOCK, className) },
+        React__default.createElement(CreateFolderViewProvider, { ...state },
+            React__default.createElement(ActionExitControl, null),
+            React__default.createElement(TitleControl, null),
+            React__default.createElement(FolderNameFieldControl, null),
+            React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__footer` },
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__message` },
+                    React__default.createElement(MessageControl, null)),
+                React__default.createElement(ViewElement, { className: `${STORAGE_BROWSER_BLOCK}__buttons` },
+                    React__default.createElement(ActionStartControl, null))))));
+};
+CreateFolderView.displayName = 'CreateFolderView';
+CreateFolderView.Provider = CreateFolderViewProvider;
+CreateFolderView.Exit = ActionExitControl;
+CreateFolderView.NameField = FolderNameFieldControl;
+CreateFolderView.Message = MessageControl;
+CreateFolderView.Start = ActionStartControl;
+CreateFolderView.Title = TitleControl;
+
+export { CreateFolderView };

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

@@ -0,0 +1,35 @@
+import React__default from 'react';
+import { ControlsContextProvider } from '../../../controls/context.mjs';
+import { useDisplayText } from '../../../displayText/context.mjs';
+import '@aws-amplify/ui';
+import { isValidFolderName } from './utils.mjs';
+
+function CreateFolderViewProvider({ children, ...props }) {
+    const { CreateFolderView: { actionExitLabel, actionStartLabel, folderNameLabel, folderNamePlaceholder, getActionCompleteMessage, getValidationMessage, title, }, } = useDisplayText();
+    const { folderName, folderNameId, isProcessing, isProcessingComplete, onActionStart, onActionExit, onFolderNameChange, statusCounts, } = props;
+    const [validationMessage, setValidationMessage] = React__default.useState();
+    const message = isProcessingComplete
+        ? getActionCompleteMessage({ counts: statusCounts })
+        : undefined;
+    const onValidateFolderName = (value) => {
+        setValidationMessage(() => isValidFolderName(value) ? undefined : getValidationMessage(value));
+    };
+    const isActionStartDisabled = !folderName.length ||
+        !!validationMessage ||
+        isProcessing ||
+        isProcessingComplete;
+    return (React__default.createElement(ControlsContextProvider, { data: {
+            actionExitLabel,
+            folderNameId,
+            folderNameLabel,
+            folderNamePlaceholder,
+            folderNameValidationMessage: validationMessage,
+            actionStartLabel,
+            isActionStartDisabled,
+            isActionExitDisabled: isProcessing,
+            message,
+            title,
+        }, onActionExit: onActionExit, onActionStart: onActionStart, onFolderNameChange: onFolderNameChange, onValidateFolderName: onValidateFolderName }, children));
+}
+
+export { CreateFolderViewProvider };

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

@@ -0,0 +1,56 @@
+import React__default from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import '../../../useAction/context.mjs';
+import { useAction } from '../../../useAction/useAction.mjs';
+import '@aws-amplify/ui-react-core';
+import '@aws-amplify/ui-react-core/elements';
+import '../../../providers/configuration/credentials/context.mjs';
+import '../../../providers/configuration/context.mjs';
+import '@aws-amplify/storage/internals';
+import 'aws-amplify/storage';
+import '../../../actions/configs/context.mjs';
+import '../../../providers/store/location/context.mjs';
+import '../../../providers/store/files/context.mjs';
+import '../../../providers/store/actionType/context.mjs';
+import '../../../providers/store/locationItems/context.mjs';
+import { useStore } from '../../../providers/store/useStore.mjs';
+
+const useCreateFolderView = (options) => {
+    const { onExit } = options ?? {};
+    const [folderName, setFolderName] = React__default.useState('');
+    const folderNameId = React__default.useRef(crypto.randomUUID()).current;
+    const [{ location }, dispatchStoreAction] = useStore();
+    const { current, key } = location;
+    const data = React__default.useMemo(() => [
+        {
+            // generate new `id` on each `folderName` change to refresh task
+            // data provided to `useAction`
+            id: crypto.randomUUID(),
+            key: `${key}${folderName}/`,
+            preventOverwrite: true,
+        },
+    ], [key, folderName]);
+    const [{ tasks, isProcessing, isProcessingComplete, statusCounts }, handleCreateFolder,] = useAction('createFolder', { items: data });
+    return {
+        folderName,
+        folderNameId,
+        isProcessing,
+        isProcessingComplete,
+        location,
+        onActionStart: () => {
+            handleCreateFolder();
+        },
+        onActionExit: () => {
+            if (isFunction(onExit))
+                onExit(current);
+            dispatchStoreAction({ type: 'RESET_ACTION_TYPE' });
+        },
+        onFolderNameChange: (value) => {
+            setFolderName(value.trim());
+        },
+        statusCounts,
+        tasks,
+    };
+};
+
+export { useCreateFolderView };