@strapi/upload 5.53.0 → 5.55.0

package/dist/admin/pages/Assets/AssetsPage.js

@@ -0,0 +1,828 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ToggleGroup = require('@radix-ui/react-toggle-group');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var useAIMetadataEnabled = require('../../hooks/useAIMetadataEnabled.js');
+var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
+var useTracking = require('../../hooks/useTracking.js');
+var api = require('../../services/api.js');
+var folders = require('../../services/folders.js');
+var settings = require('../../services/settings.js');
+var itemLocations = require('../../utils/itemLocations.js');
+var translations = require('../../utils/translations.js');
+var typeFromMime = require('../../utils/typeFromMime.js');
+var AssetDetailsDrawer = require('./components/AssetDetails/AssetDetailsDrawer.js');
+var AssetsGrid = require('./components/AssetsGrid.js');
+var AssetsSearchInput = require('./components/AssetsSearchInput.js');
+var AssetsTable = require('./components/AssetsTable.js');
+var BulkActionsBar = require('./components/BulkActionsBar.js');
+var AssetsDndProvider = require('./components/Dnd/AssetsDndProvider.js');
+var UploadDropZone = require('./components/DropZone/UploadDropZone.js');
+var UploadDropZoneContext = require('./components/DropZone/UploadDropZoneContext.js');
+var EmptyState = require('./components/EmptyState.js');
+var FilterBadges = require('./components/FilterBadges.js');
+var FilterMenu = require('./components/FilterMenu.js');
+var FolderFormDialog = require('./components/FolderFormDialog.js');
+var FolderTree = require('./components/FolderTree/FolderTree.js');
+var ImportFromUrlDialog = require('./components/ImportFromUrlDialog.js');
+var MainAreaContextMenu = require('./components/MainAreaContextMenu.js');
+var SortMenu = require('./components/SortMenu.js');
+var constants = require('./constants.js');
+var useAssetSearch = require('./hooks/useAssetSearch.js');
+var useAssetSelection = require('./hooks/useAssetSelection.js');
+var useBusyAssets = require('./hooks/useBusyAssets.js');
+var useFolderInfo = require('./hooks/useFolderInfo.js');
+var useFolderNavigation = require('./hooks/useFolderNavigation.js');
+var useInfiniteAssets = require('./hooks/useInfiniteAssets.js');
+var useInfiniteScrollSentinel = require('./hooks/useInfiniteScrollSentinel.js');
+var useListFilters = require('./hooks/useListFilters.js');
+var useListScrollRestoration = require('./hooks/useListScrollRestoration.js');
+var useListSort = require('./hooks/useListSort.js');
+var buildAssetFilters = require('./utils/buildAssetFilters.js');
+var listQueryKey = require('./utils/listQueryKey.js');
+var mergeMixedList = require('./utils/mergeMixedList.js');
+var renderedKeys = require('./utils/renderedKeys.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
+
+// The negative bottom margin shrinks the trigger area by a pixel so the 1px
+// sentinel sitting exactly at the fold (when a page's rows happen to fill the
+// viewport) reads as "not visible" and doesn't pull an extra page. It still
+// triggers as soon as the sentinel scrolls a hair into view. Tune the bottom
+// value if the list over- or under-fetches near the fold.
+const INTERSECTION_OPTIONS = {
+    threshold: 0,
+    rootMargin: '0px 0px -1px 0px'
+};
+// Module-level so the header sentinel's observer isn't rebuilt every render.
+const HEADER_SENTINEL_OPTIONS = {
+    threshold: 0
+};
+const ITEM_COUNT_MESSAGE = {
+    id: translations.getTranslationKey('header.content.item-count'),
+    defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+};
+const SEARCH_RESULTS_COUNT_MESSAGES = {
+    both: {
+        id: translations.getTranslationKey('header.search-results.count'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}}'
+    },
+    folders: {
+        id: translations.getTranslationKey('header.search-results.count.folders'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}}'
+    },
+    assets: {
+        id: translations.getTranslationKey('header.search-results.count.assets'),
+        defaultMessage: '{numberAssets, plural, =0 {0 assets} one {1 asset} other {# assets}}'
+    }
+};
+const getSearchResultsCountMessage = (numberFolders, numberAssets)=>{
+    if (numberFolders === 0) {
+        return SEARCH_RESULTS_COUNT_MESSAGES.assets;
+    }
+    if (numberAssets === 0) {
+        return SEARCH_RESULTS_COUNT_MESSAGES.folders;
+    }
+    return SEARCH_RESULTS_COUNT_MESSAGES.both;
+};
+const AssetsView = ({ view, folders, isLoadingFolders, assets, isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error, locations, searchQuery, assetsSort, foldersPosition, hasActiveFilters, onClearFilters, onAssetItemClick, onAddAssets, canAddAssets, onClearSearch })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isGridView = view === constants.viewOptions.GRID;
+    const isLoading = isLoadingAssets || isLoadingFolders;
+    // "Folders: Mixed with files" — interleave the complete folder list into the
+    // loaded asset stream client-side, following the active sort. Table view
+    // only: the grid always keeps folders in their own band on top.
+    const mixedItems = React.useMemo(()=>foldersPosition === 'mixed' && !isGridView ? mergeMixedList.mergeMixedList({
+            folders,
+            assets,
+            sort: assetsSort,
+            hasNextPage
+        }) : null, [
+        foldersPosition,
+        isGridView,
+        folders,
+        assets,
+        assetsSort,
+        hasNextPage
+    ]);
+    // Derived once here so the table, the grid and the bulk bar all agree on what
+    // is on screen — in mixed mode that is not simply every folder.
+    const renderedKeys$1 = renderedKeys.buildRenderedKeys({
+        folders,
+        assets,
+        mixedItems
+    });
+    const loadMoreRef = useInfiniteScrollSentinel.useInfiniteScrollSentinel({
+        hasNextPage,
+        isFetchingMore,
+        onLoadMore: fetchNextPage,
+        options: INTERSECTION_OPTIONS
+    });
+    if (isLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            justifyContent: "center",
+            padding: 8,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+                children: formatMessage({
+                    id: 'app.loading',
+                    defaultMessage: 'Loading...'
+                })
+            })
+        });
+    }
+    if (error) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            padding: 8,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                textColor: "danger600",
+                children: formatMessage({
+                    id: translations.getTranslationKey('list.assets.error'),
+                    defaultMessage: 'An error occurred while fetching assets.'
+                })
+            })
+        });
+    }
+    if (folders.length === 0 && assets.length === 0) {
+        // While searching, the search empty state wins (it names the query); a
+        // filter-only dead end gets the filtered variant with its Clear action.
+        return hasActiveFilters && !searchQuery ? /*#__PURE__*/ jsxRuntime.jsx(EmptyState.FilteredEmptyState, {
+            onClearFilters: onClearFilters
+        }) : /*#__PURE__*/ jsxRuntime.jsx(EmptyState.EmptyState, {
+            onAddAssets: onAddAssets,
+            canAddAssets: canAddAssets,
+            searchQuery: searchQuery,
+            onClearSearch: onClearSearch
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            isGridView ? /*#__PURE__*/ jsxRuntime.jsx(AssetsGrid.AssetsGrid, {
+                folders: folders,
+                assets: assets,
+                renderedKeys: renderedKeys$1,
+                onAssetItemClick: onAssetItemClick
+            }) : /*#__PURE__*/ jsxRuntime.jsx(AssetsTable.AssetsTable, {
+                assets: assets,
+                folders: folders,
+                mixedItems: mixedItems,
+                renderedKeys: renderedKeys$1,
+                onAssetItemClick: onAssetItemClick
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                ref: loadMoreRef,
+                style: {
+                    height: 1
+                }
+            }),
+            isFetchingMore && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                justifyContent: "center",
+                padding: 4,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+                    children: formatMessage({
+                        id: translations.getTranslationKey('list.assets.loading-more'),
+                        defaultMessage: 'Loading more assets...'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(BulkActionsBar.BulkActionsBar, {
+                assets: assets,
+                renderedKeys: renderedKeys$1,
+                locations: locations
+            })
+        ]
+    });
+};
+const ClearSelectionOnChange = ({ listQueryKey })=>{
+    const { clear } = useAssetSelection.useAssetSelection();
+    React.useEffect(()=>{
+        clear();
+    }, [
+        listQueryKey,
+        clear
+    ]);
+    return null;
+};
+/* -------------------------------------------------------------------------------------------------
+ * AssetsPage
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * Mirrors the design-system Toggle look (grey track, white active segment
+ * card) — reproduced locally because the DS component is a labels-only
+ * boolean input (no icons) and paints its left segment in danger red. Here
+ * both segments use the primary blue when active.
+ */ const StyledToggleGroup = styledComponents.styled(ToggleGroup__namespace.Root)`
+  display: flex;
+  padding: ${({ theme })=>theme.spaces[1]};
+  background: ${({ theme })=>theme.colors.neutral100};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const StyledToggleItem = styledComponents.styled(ToggleGroup__namespace.Item)`
+  display: flex;
+  flex: 1 1 50%;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme })=>theme.spaces[2]};
+  padding: 0.6rem ${({ theme })=>theme.spaces[3]};
+  border: 1px solid transparent;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: transparent;
+  color: ${({ theme })=>theme.colors.neutral600};
+  cursor: pointer;
+  font-size: ${({ theme })=>theme.fontSizes[1]};
+  font-weight: ${({ theme })=>theme.fontWeights.semiBold};
+  white-space: nowrap;
+
+  &:hover {
+    color: ${({ theme })=>theme.colors.neutral700};
+  }
+
+  &[data-state='on'] {
+    background: ${({ theme })=>theme.colors.neutral0};
+    border-color: ${({ theme })=>theme.colors.neutral200};
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+
+  svg {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+`;
+// A single sticky header — same layout scrolled or not, so the toolbar
+// alignment can't reflow the way the shared sticky header did. Once the list
+// scrolls under it, it shrinks (reduced vertical padding + a shadow to lift it
+// off the rows), like the sticky headers elsewhere in the admin. Horizontal
+// padding stays responsive (passed as props); only the vertical rhythm + shadow
+// change here so they can animate.
+const StickyHeader = styledComponents.styled(designSystem.Box)`
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  /* Transparent at rest (the grey page shows through); an opaque background +
+     shadow appear only once it sticks and content scrolls under it. */
+  background: transparent;
+  /* Horizontal padding matches the list's default spacing (Layouts.Content /
+     RESPONSIVE_DEFAULT_SPACING: 4 / 6 / 10) so the header lines up with the rows. */
+  padding: ${({ theme })=>`${theme.spaces[6]} ${theme.spaces[4]}`};
+  transition:
+    padding 0.2s ease,
+    background 0.2s ease,
+    box-shadow 0.2s ease;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    padding-left: ${({ theme })=>theme.spaces[6]};
+    padding-right: ${({ theme })=>theme.spaces[6]};
+  }
+  ${({ theme })=>theme.breakpoints.large} {
+    padding-left: ${({ theme })=>theme.spaces[10]};
+    padding-right: ${({ theme })=>theme.spaces[10]};
+  }
+
+  /* Compacting is scoped to medium and up, where the header actually sticks. On
+     mobile it scrolls away with the list, so shrinking it mid-scroll animated a
+     header the user could no longer see — the transition read as a glitch on the
+     way back up rather than as the header settling. */
+  ${({ $compact, theme })=>$compact && styledComponents.css`
+      ${theme.breakpoints.medium} {
+        padding-top: ${theme.spaces[3]};
+        padding-bottom: ${theme.spaces[3]};
+        padding-left: ${theme.spaces[4]};
+        padding-right: ${theme.spaces[4]};
+        background: ${theme.colors.neutral0};
+        box-shadow: ${theme.shadows.tableShadow};
+      }
+      ${theme.breakpoints.large} {
+        padding-left: ${theme.spaces[6]};
+        padding-right: ${theme.spaces[6]};
+      }
+    `}
+`;
+// New button aligns with the title, not the toolbar.
+const TitleRow = styledComponents.styled(designSystem.Flex)`
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: ${({ theme })=>theme.spaces[4]};
+
+  h1 {
+    font-size: 1.8rem;
+  }
+`;
+// Two groups in source order (Filter, Search / Sort, Toggle). Mobile: stacked —
+// Filter+Search on row 1, Sort+Toggle on row 2. Desktop (large+): one row,
+// Filter+Search on the left, Sort+Toggle pushed right.
+const Toolbar = styledComponents.styled(designSystem.Flex)`
+  margin-top: ${({ theme })=>theme.spaces[5]};
+  flex-direction: column;
+  align-items: stretch;
+  gap: ${({ theme })=>theme.spaces[3]};
+  transition: margin-top 0.2s ease;
+
+  /* Tightening the gap to the title belongs to the compact header, so it is
+     scoped to the breakpoints that compact. On mobile the header never sticks,
+     and this was the last thing still shifting as the page scrolled. */
+  ${({ $compact, theme })=>$compact && styledComponents.css`
+      ${theme.breakpoints.medium} {
+        margin-top: ${theme.spaces[2]};
+      }
+    `}
+
+  ${({ theme })=>theme.breakpoints.large} {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+const ToolbarGroup = styledComponents.styled(designSystem.Flex)`
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[3]};
+`;
+// Filter + Search. On mobile the group fills the row (search grows into it);
+// on desktop it keeps its intrinsic size and sits at the left edge.
+const FilterSearchGroup = styledComponents.styled(ToolbarGroup)``;
+// Sort + Toggle. Mobile: spread across the row (Sort left, Toggle right).
+// Desktop: sit together at the right edge (space-between on the toolbar leaves
+// the empty space between the search and here).
+const SortToggleGroup = styledComponents.styled(ToolbarGroup)`
+  justify-content: space-between;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    justify-content: flex-end;
+    flex: 0 0 auto;
+  }
+`;
+// Fills the row on mobile; intrinsic width on desktop.
+const SearchSlot = styledComponents.styled(designSystem.Box)`
+  flex: 1;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    flex: 0 1 auto;
+  }
+`;
+// Toggle labels are hidden below desktop — icons only (buttons keep aria-label).
+const ToggleLabel = styledComponents.styled.span`
+  display: none;
+
+  ${({ theme })=>theme.breakpoints.large} {
+    display: inline;
+  }
+`;
+const AssetsPage = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { openDetails } = AssetDetailsDrawer.useAssetDetailsParam();
+    const { canCreate, canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation.useFolderNavigation();
+    // Deleted or missing folders (404) need a fetch — handled here, not in
+    // `useFolderNavigation` (which only strips malformed ?folder= values).
+    const { error: currentFolderError } = folders.useGetFolderQuery({
+        id: currentFolderId
+    }, {
+        skip: currentFolderId === null
+    });
+    React.useEffect(()=>{
+        if (currentFolderError?.name === 'NotFoundError') {
+            navigateToRoot();
+        }
+    }, [
+        currentFolderError,
+        navigateToRoot
+    ]);
+    const { title, itemCount } = useFolderInfo.useFolderInfo(currentFolderId);
+    const { searchQuery, isSearching, clearSearch } = useAssetSearch.useAssetSearch();
+    const listSort = useListSort.useListSort();
+    const listFilters = useListFilters.useListFilters();
+    // Resolve relative presets against "now" only when the filters change —
+    // keeps the query args (and RTK cache keys) stable between renders.
+    const builtFilters = React.useMemo(()=>buildAssetFilters.buildAssetFilters(listFilters.filters, new Date()), // eslint-disable-next-line react-hooks/exhaustive-deps -- serialized is the value identity of filters
+    [
+        listFilters.serialized
+    ]);
+    const { assets, subscribers: assetPageSubscribers, pagination, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error: assetsError } = useInfiniteAssets.useInfiniteAssets({
+        // The real folder is passed even while searching: the service drops the folder
+        // filter when `search` is set, so results are still global. List filters
+        // compose with both modes.
+        folder: currentFolderId,
+        search: searchQuery || undefined,
+        sort: listSort.assetsSort,
+        filters: builtFilters.fileClauses,
+        enabled: builtFilters.showFiles
+    });
+    const { data: fetchedFolders = [], isLoading: isLoadingFolders } = folders.useGetFoldersQuery({
+        parentId: currentFolderId,
+        search: searchQuery || undefined,
+        sort: listSort.foldersSort,
+        filters: builtFilters.folderClauses
+    }, {
+        skip: !builtFilters.showFolders
+    });
+    // A type badge can exclude folders structurally (e.g. "Type is Picture").
+    const folders$1 = React.useMemo(()=>builtFilters.showFolders ? fetchedFolders : [], [
+        builtFilters.showFolders,
+        fetchedFolders
+    ]);
+    // Both move affordances (drag and the bulk bar) resolve each item's parent
+    // from the rows on screen — while searching, results are global and the
+    // folder currently open says nothing about where an item lives.
+    const itemLocations$1 = React.useMemo(()=>itemLocations.buildItemLocations(assets, folders$1), [
+        assets,
+        folders$1
+    ]);
+    const itemCountLabel = formatMessage(ITEM_COUNT_MESSAGE, {
+        count: itemCount
+    });
+    const searchResultsTitle = formatMessage({
+        id: translations.getTranslationKey('header.search-results'),
+        defaultMessage: 'Search results for "{query}"'
+    }, {
+        query: searchQuery
+    });
+    const numberFolders = folders$1.length;
+    const numberAssets = pagination?.total ?? 0;
+    const searchResultsCountLabel = formatMessage(getSearchResultsCountMessage(numberFolders, numberAssets), {
+        numberFolders,
+        numberAssets
+    });
+    let pageHeaderTitle;
+    if (isSearching) {
+        pageHeaderTitle = `${searchResultsTitle} (${searchResultsCountLabel})`;
+    } else if (title) {
+        pageHeaderTitle = `${title} (${itemCountLabel})`;
+    } else {
+        pageHeaderTitle = formatMessage({
+            id: 'app.loading',
+            defaultMessage: 'Loading...'
+        });
+    }
+    const [isCreateFolderDialogOpen, setIsCreateFolderDialogOpen] = React.useState(false);
+    // View state
+    const [view, setView] = strapiAdmin.usePersistentState(constants.localStorageKeys.view, constants.viewOptions.GRID);
+    const isGridView = view === constants.viewOptions.GRID;
+    // Dialog state
+    const [isUrlDialogOpen, setIsUrlDialogOpen] = React.useState(false);
+    // Refs
+    const fileInputRef = React.useRef(null);
+    const uploadDropZoneRef = React.useRef(null);
+    // Shrink the sticky header once the list scrolls beneath it. A zero-height
+    // sentinel sits at the very top of the scroll content; when it leaves the
+    // viewport we're scrolled → compact.
+    const [isHeaderCompact, setIsHeaderCompact] = React.useState(false);
+    const onHeaderSentinelVisibility = React.useCallback((isVisible)=>setIsHeaderCompact(!isVisible), []);
+    const headerSentinelRef = strapiAdmin.useElementOnScreen(onHeaderSentinelVisibility, HEADER_SENTINEL_OPTIONS);
+    // Upload handlers
+    const [uploadFiles] = api.useUploadFilesMutation();
+    const [uploadFromUrls] = api.useUploadFromUrlsMutation();
+    // `concurrentUploadRequests` echoes the app config. Missing settings (still
+    // loading, no permission) fall back to sequential — never faster than the
+    // server asked for.
+    const { data: settings$1 } = settings.useGetUploadSettingsQuery();
+    const concurrency = settings$1?.data?.concurrentUploadRequests ?? 1;
+    // Drives the post-upload AI metadata phase shown per row in the progress
+    // dialog. No mime argument: the files are not known until they are picked,
+    // and the server filters the batch on the same allowlist anyway.
+    const isAiMetadataEnabled = useAIMetadataEnabled.useAIMetadataEnabled();
+    const { trackUsage } = useTracking.useTracking();
+    const uploadFilesToFolder = async (files, folderId)=>{
+        if (files.length === 0) return;
+        // Mirror the legacy `willAddMediaLibraryAssets` payload: the count of files
+        // about to upload, broken down by asset type.
+        const assetsCountByType = files.reduce((acc, file)=>{
+            const type = typeFromMime.typeFromMime(file.type);
+            acc[type] = (acc[type] ?? 0) + 1;
+            return acc;
+        }, {});
+        trackUsage('willAddMediaLibraryAssets', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION,
+            ...assetsCountByType
+        });
+        const formData = new FormData();
+        const fileInfoArray = [];
+        files.forEach((file)=>{
+            formData.append('files', file);
+            fileInfoArray.push({
+                name: file.name,
+                caption: null,
+                alternativeText: null,
+                folder: folderId
+            });
+        });
+        formData.append('fileInfo', JSON.stringify(fileInfoArray));
+        try {
+            await uploadFiles({
+                formData,
+                totalFiles: files.length,
+                concurrency,
+                generateAiMetadata: Boolean(isAiMetadataEnabled)
+            }).unwrap();
+        } catch  {
+        // Error is already dispatched to store from the API queryFn
+        }
+    };
+    const handleFileSelect = ()=>{
+        fileInputRef.current?.click();
+    };
+    const handleFileChange = async (e)=>{
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            trackUsage('didSelectFile', {
+                source: 'computer',
+                location: useTracking.MEDIA_LIBRARY_LOCATION
+            });
+            await uploadFilesToFolder(Array.from(files), currentFolderId);
+        }
+        e.target.value = '';
+    };
+    const handleDrop = async (files)=>{
+        // Defence in depth: the provider is `disabled` without `assets.create`
+        // (so onDrop won't fire), but guard here too in case it's ever wired live.
+        if (!canCreate) return;
+        trackUsage('didSelectFile', {
+            source: 'computer',
+            location: useTracking.MEDIA_LIBRARY_LOCATION
+        });
+        await uploadFilesToFolder(files, currentFolderId);
+    };
+    const handleUrlUpload = async (urls)=>{
+        trackUsage('didSelectFile', {
+            source: 'url',
+            location: useTracking.MEDIA_LIBRARY_LOCATION
+        });
+        // Counts-by-type aren't available client-side for the URL flow (the server
+        // fetches the files), so this fires the event with location only.
+        trackUsage('willAddMediaLibraryAssets', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION
+        });
+        try {
+            await uploadFromUrls({
+                urls,
+                folderId: currentFolderId,
+                generateAiMetadata: Boolean(isAiMetadataEnabled)
+            }).unwrap();
+        } catch  {
+        // Error is already dispatched to store from the API queryFn
+        }
+    };
+    // The view is deliberately absent: table and grid render the same list, so
+    // toggling views keeps the selection.
+    const listQueryKey$1 = listQueryKey.getListQueryKey({
+        folderId: currentFolderId,
+        search: searchQuery,
+        // Folder position changes the render order too — selection must reset.
+        sort: `${listSort.assetsSort};folders=${listSort.foldersPosition}`,
+        filter: listFilters.serialized || null
+    });
+    const scrollAnchorRef = useListScrollRestoration.useListScrollRestoration(listQueryKey$1);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(UploadDropZoneContext.UploadDropZoneProvider, {
+                onDrop: handleDrop,
+                disabled: !canCreate,
+                children: /*#__PURE__*/ jsxRuntime.jsx(useAssetSelection.AssetSelectionProvider, {
+                    disabled: !canUpdate,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(useBusyAssets.BusyAssetsProvider, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(AssetsDndProvider.AssetsDndProvider, {
+                            locations: itemLocations$1,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(ClearSelectionOnChange, {
+                                    listQueryKey: listQueryKey$1
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Root, {
+                                    sideNav: /*#__PURE__*/ jsxRuntime.jsx(FolderTree.FolderTree, {
+                                        currentFolderId: currentFolderId,
+                                        showActiveFolder: !isSearching,
+                                        onSelectFolder: navigateToFolderId
+                                    }),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Main, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                                            ref: uploadDropZoneRef,
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                                        type: "file",
+                                                        ref: fileInputRef,
+                                                        onChange: handleFileChange,
+                                                        multiple: true
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                                    ref: headerSentinelRef,
+                                                    height: 0,
+                                                    "aria-hidden": true
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                                    ref: scrollAnchorRef,
+                                                    height: 0,
+                                                    "aria-hidden": true
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(MainAreaContextMenu.MainAreaContextMenu, {
+                                                    disabled: !canCreate,
+                                                    onCreateFolder: ()=>setIsCreateFolderDialogOpen(true),
+                                                    onImportFiles: handleFileSelect,
+                                                    onImportFromUrl: ()=>setIsUrlDialogOpen(true)
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsxs(StickyHeader, {
+                                                    $compact: isHeaderCompact,
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsxs(TitleRow, {
+                                                            children: [
+                                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                                    variant: "alpha",
+                                                                    tag: "h1",
+                                                                    children: pageHeaderTitle
+                                                                }),
+                                                                canCreate && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SimpleMenu, {
+                                                                    popoverPlacement: "bottom-end",
+                                                                    variant: "default",
+                                                                    endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {}),
+                                                                    label: formatMessage({
+                                                                        id: translations.getTranslationKey('new'),
+                                                                        defaultMessage: 'New'
+                                                                    }),
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                                            onSelect: ()=>setIsCreateFolderDialogOpen(true),
+                                                                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {}),
+                                                                            children: formatMessage({
+                                                                                id: translations.getTranslationKey('folder.create.title'),
+                                                                                defaultMessage: 'New folder'
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                                            onSelect: handleFileSelect,
+                                                                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Files, {}),
+                                                                            children: formatMessage({
+                                                                                id: translations.getTranslationKey('import-files'),
+                                                                                defaultMessage: 'File upload'
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                                            onSelect: ()=>setIsUrlDialogOpen(true),
+                                                                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
+                                                                            children: formatMessage({
+                                                                                id: translations.getTranslationKey('import-from-url'),
+                                                                                defaultMessage: 'File upload from URL'
+                                                                            })
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsxs(Toolbar, {
+                                                            $compact: isHeaderCompact,
+                                                            children: [
+                                                                /*#__PURE__*/ jsxRuntime.jsxs(FilterSearchGroup, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                                                            children: /*#__PURE__*/ jsxRuntime.jsx(FilterMenu.FilterMenu, {
+                                                                                listFilters: listFilters
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(SearchSlot, {
+                                                                            children: /*#__PURE__*/ jsxRuntime.jsx(AssetsSearchInput.AssetsSearchInput, {})
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ jsxRuntime.jsxs(SortToggleGroup, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                                                            children: /*#__PURE__*/ jsxRuntime.jsx(SortMenu.SortMenu, {
+                                                                                sort: listSort,
+                                                                                showFoldersGroup: !isGridView
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleGroup, {
+                                                                            type: "single",
+                                                                            value: isGridView ? 'grid' : 'table',
+                                                                            onValueChange: (value)=>value && setView(value === 'grid' ? constants.viewOptions.GRID : constants.viewOptions.TABLE),
+                                                                            "aria-label": formatMessage({
+                                                                                id: translations.getTranslationKey('view.switch.label'),
+                                                                                defaultMessage: 'View options'
+                                                                            }),
+                                                                            children: [
+                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
+                                                                                    value: "table",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: translations.getTranslationKey('view.table'),
+                                                                                        defaultMessage: 'Table view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(ToggleLabel, {
+                                                                                            children: formatMessage({
+                                                                                                id: translations.getTranslationKey('view.table'),
+                                                                                                defaultMessage: 'Table view'
+                                                                                            })
+                                                                                        })
+                                                                                    ]
+                                                                                }),
+                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
+                                                                                    value: "grid",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: translations.getTranslationKey('view.grid'),
+                                                                                        defaultMessage: 'Grid view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {}),
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(ToggleLabel, {
+                                                                                            children: formatMessage({
+                                                                                                id: translations.getTranslationKey('view.grid'),
+                                                                                                defaultMessage: 'Grid view'
+                                                                                            })
+                                                                                        })
+                                                                                    ]
+                                                                                })
+                                                                            ]
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(FilterBadges.FilterBadges, {
+                                                            listFilters: listFilters,
+                                                            compact: isHeaderCompact
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Content, {
+                                                    children: [
+                                                        assetPageSubscribers,
+                                                        /*#__PURE__*/ jsxRuntime.jsxs(UploadDropZone.DropZoneWithOverlay, {
+                                                            children: [
+                                                                /*#__PURE__*/ jsxRuntime.jsx(UploadDropZone.DropFilesMessage, {
+                                                                    uploadDropZoneRef: uploadDropZoneRef,
+                                                                    folderName: title
+                                                                }),
+                                                                /*#__PURE__*/ jsxRuntime.jsx(AssetsView, {
+                                                                    view: view,
+                                                                    folders: folders$1,
+                                                                    isLoadingFolders: isLoadingFolders,
+                                                                    assets: assets,
+                                                                    isLoadingAssets: isLoadingAssets,
+                                                                    isFetchingMore: isFetchingMore,
+                                                                    hasNextPage: hasNextPage,
+                                                                    fetchNextPage: fetchNextPage,
+                                                                    error: assetsError,
+                                                                    locations: itemLocations$1,
+                                                                    searchQuery: searchQuery,
+                                                                    assetsSort: listSort.assetsSort,
+                                                                    foldersPosition: listSort.foldersPosition,
+                                                                    hasActiveFilters: listFilters.filters.length > 0,
+                                                                    onClearFilters: listFilters.clearFilters,
+                                                                    onAssetItemClick: openDetails,
+                                                                    onAddAssets: handleFileSelect,
+                                                                    canAddAssets: canCreate,
+                                                                    onClearSearch: clearSearch
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(FolderFormDialog.FolderFormDialog, {
+                open: isCreateFolderDialogOpen,
+                mode: "create",
+                parentFolderName: title,
+                parentFolderId: currentFolderId,
+                onClose: ()=>setIsCreateFolderDialogOpen(false)
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(ImportFromUrlDialog.ImportFromUrlDialog, {
+                open: isUrlDialogOpen,
+                onClose: ()=>setIsUrlDialogOpen(false),
+                onUpload: handleUrlUpload
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(AssetDetailsDrawer.AssetDetailsDrawer, {})
+        ]
+    });
+};
+
+exports.AssetsPage = AssetsPage;
+//# sourceMappingURL=AssetsPage.js.map