@strapi/upload 5.51.2 → 5.52.1

package/dist/admin/future/pages/Assets/components/AssetsSearchInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsSearchInput.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsSearchInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react';\n\nimport { useDebounce, useIsMobile, useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Box, Searchbar, SearchForm } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSearch } from '../hooks/useAssetSearch';\n\nconst DEBOUNCE_MS = 300;\n\n/**\n * Keyword search over the whole Media Library. Owns the typing state and the\n * debounce; `useAssetSearch` owns the `?_q=` URL param.\n */\nexport const AssetsSearchInput = () => {\n  const { formatMessage } = useIntl();\n  const { searchQuery, setSearchQuery } = useAssetSearch();\n  const isMobile = useIsMobile();\n\n  const [value, setValue] = useState(searchQuery);\n  const debouncedValue = useDebounce(value, DEBOUNCE_MS);\n\n  // Tracks the last value the URL and the input agreed on. Without it the two\n  // effects below would ping-pong: each would see the other's write as a change\n  // worth reacting to.\n  const lastCommittedRef = useRef(searchQuery);\n\n  // Read directly rather than through `useFolderNavigation`, which strips\n  // malformed `?folder=` values as a side effect.\n  const [{ query }] = useQueryParams<{ folder?: string }>();\n  const folderParam = query?.folder ?? '';\n  const lastFolderRef = useRef(folderParam);\n\n  // Commit settled input to the URL.\n  useEffect(() => {\n    if (debouncedValue === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = debouncedValue;\n    setSearchQuery(debouncedValue);\n  }, [debouncedValue, setSearchQuery]);\n\n  // Re-sync on external changes — back/forward, or \"Clear search\" in the empty\n  // state.\n  useEffect(() => {\n    if (searchQuery === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [searchQuery]);\n\n  // A folder navigation clears `_q`, but a term typed and never committed lives\n  // only in the debounce — without this it lands afterwards and reactivates the\n  // global search. `_q` alone can't see it: it was never non-empty.\n  useEffect(() => {\n    if (folderParam === lastFolderRef.current) {\n      return;\n    }\n\n    lastFolderRef.current = folderParam;\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [folderParam, searchQuery]);\n\n  const searchForm = (\n    <SearchForm onSubmit={(event: FormEvent<HTMLFormElement>) => event.preventDefault()}>\n      <Searchbar\n        name=\"search-assets\"\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n        onClear={() => setValue('')}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        placeholder={formatMessage({\n          id: getTranslationKey('header.search.placeholder'),\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n      >\n        {formatMessage({\n          id: getTranslationKey('search.label'),\n          defaultMessage: 'Search for an asset',\n        })}\n      </Searchbar>\n    </SearchForm>\n  );\n\n  // TODO: (design question)The input stays visible at every breakpoint; on mobile it takes the full\n  // width of the toolbar instead of its intrinsic size.\n  if (isMobile) {\n    return <Box width=\"100%\">{searchForm}</Box>;\n  }\n\n  return searchForm;\n};\n"],"names":["DEBOUNCE_MS","AssetsSearchInput","formatMessage","useIntl","searchQuery","setSearchQuery","useAssetSearch","isMobile","useIsMobile","value","setValue","useState","debouncedValue","useDebounce","lastCommittedRef","useRef","query","useQueryParams","folderParam","folder","lastFolderRef","useEffect","current","searchForm","_jsx","SearchForm","onSubmit","event","preventDefault","Searchbar","name","onChange","target","onClear","clearLabel","id","defaultMessage","placeholder","getTranslationKey","size","Box","width"],"mappings":"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"}
+{"version":3,"file":"AssetsSearchInput.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsSearchInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react';\n\nimport { useDebounce, useIsMobile, useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Box, Searchbar, SearchForm } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSearch } from '../hooks/useAssetSearch';\n\nconst DEBOUNCE_MS = 300;\n\n// The DS Searchbar nests two bordered boxes: its own shell (neutral150) wrapping\n// the field (neutral200). Side by side they read as a single 2px, two-tone\n// border, which sits oddly next to the 1px neutral200 on the Filter button in the\n// same toolbar. Dropping the shell's border leaves the field's own — same width\n// and colour as the button — and costs nothing, since the focus ring lives on the\n// field too.\nconst StyledSearchForm = styled(SearchForm)`\n  > div {\n    border: none;\n  }\n`;\n\n/**\n * Keyword search over the whole Media Library. Owns the typing state and the\n * debounce; `useAssetSearch` owns the `?_q=` URL param.\n */\nexport const AssetsSearchInput = () => {\n  const { formatMessage } = useIntl();\n  const { searchQuery, setSearchQuery } = useAssetSearch();\n  const { trackUsage } = useTracking();\n  const isMobile = useIsMobile();\n\n  const [value, setValue] = useState(searchQuery);\n  const debouncedValue = useDebounce(value, DEBOUNCE_MS);\n\n  // Tracks the last value the URL and the input agreed on. Without it the two\n  // effects below would ping-pong: each would see the other's write as a change\n  // worth reacting to.\n  const lastCommittedRef = useRef(searchQuery);\n\n  // Read directly rather than through `useFolderNavigation`, which strips\n  // malformed `?folder=` values as a side effect.\n  const [{ query }] = useQueryParams<{ folder?: string }>();\n  const folderParam = query?.folder ?? '';\n  const lastFolderRef = useRef(folderParam);\n\n  // Commit settled input to the URL.\n  useEffect(() => {\n    if (debouncedValue === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = debouncedValue;\n    // Only a real query counts as a search — clearing the box (empty value) is\n    // a reset, not a `didSearch`.\n    if (debouncedValue) {\n      trackUsage('didSearchMediaLibraryElements', { location: MEDIA_LIBRARY_LOCATION });\n    }\n    setSearchQuery(debouncedValue);\n  }, [debouncedValue, setSearchQuery, trackUsage]);\n\n  // Re-sync on external changes — back/forward, or \"Clear search\" in the empty\n  // state.\n  useEffect(() => {\n    if (searchQuery === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [searchQuery]);\n\n  // A folder navigation clears `_q`, but a term typed and never committed lives\n  // only in the debounce — without this it lands afterwards and reactivates the\n  // global search. `_q` alone can't see it: it was never non-empty.\n  useEffect(() => {\n    if (folderParam === lastFolderRef.current) {\n      return;\n    }\n\n    lastFolderRef.current = folderParam;\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [folderParam, searchQuery]);\n\n  const searchForm = (\n    <StyledSearchForm onSubmit={(event: FormEvent<HTMLFormElement>) => event.preventDefault()}>\n      <Searchbar\n        name=\"search-assets\"\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n        onClear={() => setValue('')}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        placeholder={formatMessage({\n          id: getTranslationKey('header.search.placeholder'),\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n      >\n        {formatMessage({\n          id: getTranslationKey('search.label'),\n          defaultMessage: 'Search for an asset',\n        })}\n      </Searchbar>\n    </StyledSearchForm>\n  );\n\n  // Mobile: fills the toolbar row (own line). Desktop: keeps its intrinsic size,\n  // with empty space between it and the right-aligned Sort/Toggle group.\n  if (isMobile) {\n    return <Box width=\"100%\">{searchForm}</Box>;\n  }\n\n  return searchForm;\n};\n"],"names":["DEBOUNCE_MS","StyledSearchForm","styled","SearchForm","AssetsSearchInput","formatMessage","useIntl","searchQuery","setSearchQuery","useAssetSearch","trackUsage","useTracking","isMobile","useIsMobile","value","setValue","useState","debouncedValue","useDebounce","lastCommittedRef","useRef","query","useQueryParams","folderParam","folder","lastFolderRef","useEffect","current","location","MEDIA_LIBRARY_LOCATION","searchForm","_jsx","onSubmit","event","preventDefault","Searchbar","name","onChange","target","onClear","clearLabel","id","defaultMessage","placeholder","getTranslationKey","size","Box","width"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/AssetsTable.js

@@ -6,16 +6,22 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
+var TruncatedText = require('../../../components/TruncatedText.js');
 var useMediaLibraryPermissions = require('../../../hooks/useMediaLibraryPermissions.js');
+var useTracking = require('../../../hooks/useTracking.js');
 var files = require('../../../utils/files.js');
 var getAssetIcon = require('../../../utils/getAssetIcon.js');
+var isEventFromWithin = require('../../../utils/isEventFromWithin.js');
 var translations = require('../../../utils/translations.js');
 var constants = require('../constants.js');
 var useAssetSelection = require('../hooks/useAssetSelection.js');
+var useBusyAssets = require('../hooks/useBusyAssets.js');
 var useFolderNavigation = require('../hooks/useFolderNavigation.js');
 var selection = require('../utils/selection.js');
+var AssetActionsMenu = require('./AssetActionsMenu.js');
 var AssetsDndProvider = require('./Dnd/AssetsDndProvider.js');
 var useAssetDnd = require('./Dnd/useAssetDnd.js');
+var FolderActionsMenu = require('./FolderActionsMenu.js');
 
 const StyledTable = styledComponents.styled(designSystem.RawTable)`
   width: 100%;
@@ -24,6 +30,28 @@ const StyledTable = styledComponents.styled(designSystem.RawTable)`
   border: 1px solid ${({ theme })=>theme.colors.neutral150};
   border-radius: 4px;
   overflow: hidden;
+
+  /* Below desktop only the name column remains. A fixed layout makes a long
+     name ellipsize instead of widening the table past the viewport — the
+     checkbox (first) and actions (last) columns keep a fixed width and the name
+     takes the rest. Desktop keeps the content-sized auto layout. */
+  table-layout: fixed;
+
+  & td:last-child,
+  & th:last-child {
+    width: 5.6rem;
+    white-space: nowrap;
+  }
+
+  ${({ theme })=>theme.breakpoints.large} {
+    table-layout: auto;
+
+    & td:last-child,
+    & th:last-child {
+      width: auto;
+      white-space: normal;
+    }
+  }
 `;
 const StyledThead = styledComponents.styled(designSystem.RawThead)`
   background: ${({ theme })=>theme.colors.neutral100};
@@ -45,14 +73,14 @@ const StyledTr = styledComponents.styled.tr`
   height: 48px;
   user-select: none;
   background: ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary100 : theme.colors.neutral0};
-  cursor: ${({ $isMovePending, $isInvalidDropTarget })=>{
-    if ($isMovePending) {
+  cursor: ${({ $isMovePending, $isBusy, $isInvalidDropTarget })=>{
+    if ($isMovePending || $isBusy) {
         return 'wait';
     }
     return $isInvalidDropTarget ? 'not-allowed' : 'pointer';
 }};
-  opacity: ${({ $isDragging })=>$isDragging ? 0.4 : 1};
-  pointer-events: ${({ $isMovePending })=>$isMovePending ? 'none' : 'auto'};
+  opacity: ${({ $isDragging, $isBusy })=>$isDragging || $isBusy ? 0.4 : 1};
+  pointer-events: ${({ $isMovePending, $isBusy })=>$isMovePending || $isBusy ? 'none' : 'auto'};
 
   ${({ $isValidDropTarget, theme })=>$isValidDropTarget && styledComponents.css`
       background: ${theme.colors.primary100};
@@ -75,16 +103,29 @@ const StyledTr = styledComponents.styled.tr`
     }
   }
 `;
-// Leading checkbox column. Narrow + centred so the control sits flush against the
-// row's left edge.
+// Leading checkbox column. Fixed narrow width so it holds its own column under
+// the mobile fixed table-layout (a 1% width would collapse and let the name
+// cell's preview overlap the control).
 const CheckboxTd = styledComponents.styled(StyledTd)`
-  width: 1%;
+  width: 5.6rem;
   white-space: nowrap;
 `;
 const CheckboxTh = styledComponents.styled(StyledTh)`
-  width: 1%;
+  width: 5.6rem;
   white-space: nowrap;
 `;
+// Flags an asset whose caption or alternative text is empty — mirrors the
+// per-field warning shown in the details drawer. Pushed to the far end of the
+// name cell (shrink 0 so a long name never crowds it out).
+const MetadataWarning = styledComponents.styled(icons.WarningCircle)`
+  flex-shrink: 0;
+  width: 1.6rem;
+  height: 1.6rem;
+
+  path {
+    fill: ${({ theme })=>theme.colors.warning500};
+  }
+`;
 // The asset filename is its own interactive element: clicking it opens the
 // details drawer instead of selecting the row.
 const NameButton = styledComponents.styled.button`
@@ -105,8 +146,14 @@ const NameButton = styledComponents.styled.button`
     border-radius: 2px;
   }
 `;
+// Shields the row from its own controls (checkbox, "..." trigger) without
+// severing propagation for the menu's portaled content — those events are React
+// children of the cell but not DOM descendants, and Radix needs them to reach
+// `document` to dismiss its layers.
 const stopRowEvent = (e)=>{
-    e.stopPropagation();
+    if (isEventFromWithin.isEventFromWithin(e)) {
+        e.stopPropagation();
+    }
 };
 const AssetPreviewCell = ({ asset })=>{
     const { ext, mime } = asset;
@@ -126,20 +173,35 @@ const AssetPreviewCell = ({ asset })=>{
     });
 };
 const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
-    const isMobile = strapiAdmin.useIsMobile();
+    const isDesktop = strapiAdmin.useIsDesktop();
     const { formatDate, formatMessage } = reactIntl.useIntl();
     const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
         isMovePending: false
     };
-    const { attributes, listeners, setNodeRef, isDragging } = useAssetDnd.useFileDraggable(asset);
+    const { attributes, listeners, setNodeRef, isDragging, dragData } = useAssetDnd.useFileDraggable(asset);
     const { isSelected, toggle, selectRange } = useAssetSelection.useAssetSelection();
     const { canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const busyMessage = useBusyAssets.useBusyAssetsOptional()?.getBusyMessage(asset.id) ?? null;
     const key = selection.assetKey(asset.id);
     const selected = isSelected(key);
+    // Caption and alternative text apply to every file type — same "empty =
+    // falsy" rule as the drawer's per-field warning.
+    const isMetadataMissing = !asset.caption || !asset.alternativeText;
+    const metadataMissingLabel = formatMessage({
+        id: translations.getTranslationKey('list.table.row.metadata-missing'),
+        defaultMessage: 'This asset is missing metadata (caption or alternative text).'
+    });
     // Plain click opens the asset details; pointer selection lives on the
     // checkbox only. Modifier clicks keep the selection semantics: shift selects
     // a range, cmd/ctrl toggles.
+    //
+    // The containment guard on this and the handler below is what keeps the
+    // actions menu's portaled dialogs — React children of this row — from
+    // opening the details drawer or toggling the selection.
     const handleRowClick = (e)=>{
+        if (!isEventFromWithin.isEventFromWithin(e)) {
+            return;
+        }
         if (e.shiftKey) {
             selectRange(orderedItemKeys, key);
         } else if (e.metaKey || e.ctrlKey) {
@@ -150,6 +212,9 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
     };
     // Desktop: Space toggles selection (additive), Enter opens the details drawer.
     const handleKeyDown = (e)=>{
+        if (!isEventFromWithin.isEventFromWithin(e)) {
+            return;
+        }
         if (e.key === 'Enter') {
             e.preventDefault();
             onAssetItemClick(asset.id);
@@ -176,14 +241,20 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
         ...listeners,
         $isDragging: isDragging,
         $isMovePending: isMovePending,
+        $isBusy: busyMessage !== null,
         $isSelected: selected,
         tabIndex: 0,
         role: "row",
         onDragStart: (e)=>e.preventDefault(),
         onClick: handleRowClick,
         onKeyDown: handleKeyDown,
+        onPointerDown: (e)=>{
+            if (isEventFromWithin.isEventFromWithin(e)) {
+                listeners?.onPointerDown?.(e);
+            }
+        },
         children: [
-            !isMobile && canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
+            canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
@@ -201,38 +272,61 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    gap: 3,
                     alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 2,
+                    minWidth: 0,
                     children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(AssetPreviewCell, {
-                            asset: asset
-                        }),
                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            direction: "column",
-                            alignItems: "flex-start",
+                            gap: 3,
+                            alignItems: "center",
                             minWidth: 0,
                             children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(NameButton, {
-                                    type: "button",
-                                    onClick: handleNameClick,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                        textColor: "neutral800",
-                                        fontWeight: "semiBold",
-                                        ellipsis: true,
-                                        children: asset.name
+                                busyMessage !== null ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                    justifyContent: "center",
+                                    width: "3.2rem",
+                                    height: "3.2rem",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+                                        small: true,
+                                        children: busyMessage
                                     })
+                                }) : /*#__PURE__*/ jsxRuntime.jsx(AssetPreviewCell, {
+                                    asset: asset
                                 }),
-                                isMobile && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                    textColor: "neutral600",
-                                    variant: "pi",
-                                    children: asset.size ? files.formatBytes(asset.size, 1) : '-'
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    direction: "column",
+                                    alignItems: "flex-start",
+                                    minWidth: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(NameButton, {
+                                            type: "button",
+                                            onClick: handleNameClick,
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(TruncatedText.TruncatedText, {
+                                                textColor: "neutral800",
+                                                fontWeight: "semiBold",
+                                                children: asset.name
+                                            })
+                                        }),
+                                        !isDesktop && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            textColor: "neutral600",
+                                            variant: "pi",
+                                            children: asset.size ? files.formatBytes(asset.size, 1) : '-'
+                                        })
+                                    ]
                                 })
                             ]
+                        }),
+                        isMetadataMissing && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                            label: metadataMissingLabel,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(MetadataWarning, {
+                                "aria-label": metadataMissingLabel,
+                                role: "img"
+                            })
                         })
                     ]
                 })
             }),
-            !isMobile && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            isDesktop && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
@@ -259,16 +353,14 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+                onClick: stopRowEvent,
+                onKeyDown: stopRowEvent,
+                onPointerDown: stopRowEvent,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     justifyContent: "flex-end",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        label: formatMessage({
-                            id: translations.getTranslationKey('control-card.more-actions'),
-                            defaultMessage: 'More actions'
-                        }),
-                        variant: "ghost",
-                        onClick: (e)=>e.stopPropagation(),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.More, {})
+                    children: /*#__PURE__*/ jsxRuntime.jsx(AssetActionsMenu.AssetActionsMenu, {
+                        asset: asset,
+                        dragData: dragData
                     })
                 })
             })
@@ -281,7 +373,7 @@ const FolderTr = styledComponents.styled(StyledTr)`
   }
 `;
 const FolderRow = ({ folder, orderedItemKeys })=>{
-    const isMobile = strapiAdmin.useIsMobile();
+    const isDesktop = strapiAdmin.useIsDesktop();
     const { formatDate, formatMessage } = reactIntl.useIntl();
     const { navigateToFolder } = useFolderNavigation.useFolderNavigation();
     const { isSelected, toggle, selectRange } = useAssetSelection.useAssetSelection();
@@ -289,11 +381,18 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
     const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
         isMovePending: false
     };
-    const { draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging }, droppable: { setNodeRef: setDropRef }, showValidDropHighlight, showInvalidDropCursor } = useAssetDnd.useFolderDraggableDroppable(folder);
+    const { dragData, draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging }, droppable: { setNodeRef: setDropRef }, showValidDropHighlight, showInvalidDropCursor } = useAssetDnd.useFolderDraggableDroppable(folder);
     const key = selection.folderKey(folder.id);
     // Folders share the selection mechanism with assets. Only the plain-click
     // semantic differs: it navigates into the folder instead of selecting it.
+    //
+    // The containment guard on this and the handlers below is what keeps the
+    // actions menu's portaled dialogs — React children of this row — from
+    // navigating into the folder or starting a drag.
     const handleRowClick = (e)=>{
+        if (!isEventFromWithin.isEventFromWithin(e)) {
+            return;
+        }
         if (e.shiftKey) {
             selectRange(orderedItemKeys, key);
         } else if (e.metaKey || e.ctrlKey) {
@@ -304,6 +403,9 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
     };
     // Enter navigates into the folder, Space toggles selection (same as assets).
     const handleKeyDown = (e)=>{
+        if (!isEventFromWithin.isEventFromWithin(e)) {
+            return;
+        }
         if (e.key === 'Enter') {
             e.preventDefault();
             navigateToFolder(folder);
@@ -334,11 +436,20 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
         $isSelected: isSelected(key),
         tabIndex: 0,
         role: "row",
-        onDragStart: (e)=>e.preventDefault(),
+        onDragStart: (e)=>{
+            if (isEventFromWithin.isEventFromWithin(e)) {
+                e.preventDefault();
+            }
+        },
         onClick: handleRowClick,
         onKeyDown: handleKeyDown,
+        onPointerDown: (e)=>{
+            if (isEventFromWithin.isEventFromWithin(e)) {
+                listeners?.onPointerDown?.(e);
+            }
+        },
         children: [
-            !isMobile && canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
+            canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
@@ -358,6 +469,7 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                     gap: 3,
                     alignItems: "center",
+                    minWidth: 0,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             justifyContent: "center",
@@ -372,16 +484,15 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
                                 height: 20
                             })
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        /*#__PURE__*/ jsxRuntime.jsx(TruncatedText.TruncatedText, {
                             textColor: "neutral800",
                             fontWeight: "semiBold",
-                            ellipsis: true,
                             children: folder.name
                         })
                     ]
                 })
             }),
-            !isMobile && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            isDesktop && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
@@ -408,16 +519,14 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+                onClick: stopRowEvent,
+                onKeyDown: stopRowEvent,
+                onPointerDown: stopRowEvent,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     justifyContent: "flex-end",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        label: formatMessage({
-                            id: translations.getTranslationKey('control-card.more-actions'),
-                            defaultMessage: 'More actions'
-                        }),
-                        variant: "ghost",
-                        onClick: (e)=>e.stopPropagation(),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.More, {})
+                    children: /*#__PURE__*/ jsxRuntime.jsx(FolderActionsMenu.FolderActionsMenu, {
+                        folder: folder,
+                        dragData: dragData
                     })
                 })
             })
@@ -425,16 +534,18 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
     });
 };
 const AssetsTable = ({ assets, folders = [], mixedItems = null, onAssetItemClick })=>{
-    const isMobile = strapiAdmin.useIsMobile();
+    const isDesktop = strapiAdmin.useIsDesktop();
     const { formatMessage } = reactIntl.useIntl();
     const { selectedKeys, selectAll, clear } = useAssetSelection.useAssetSelection();
     const { canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
-    const visibleHeaders = isMobile ? constants.TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions') : constants.TABLE_HEADERS;
+    const { trackUsage } = useTracking.useTracking();
+    // Below the desktop breakpoint only the name (and actions) column is kept —
+    // the date/size columns don't fit; size moves under the name as a subtitle.
+    const visibleHeaders = isDesktop ? constants.TABLE_HEADERS : constants.TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions');
     // The checkbox column is a dedicated structural column (not part of
-    // TABLE_HEADERS). Hidden on mobile (multi-select deferred) and without the
-    // update permission — every bulk action needs `assets.update`, so a
-    // read-only user has nothing to select for.
-    const showCheckboxColumn = !isMobile && canUpdate;
+    // TABLE_HEADERS). Hidden only without the update permission — every bulk
+    // action needs `assets.update`, so a read-only user has nothing to select for.
+    const showCheckboxColumn = canUpdate;
     const colCount = visibleHeaders.length + (showCheckboxColumn ? 1 : 0);
     const totalRows = folders.length + assets.length;
     // Render order — folders first by default, or the interleaved mixed order.
@@ -448,6 +559,7 @@ const AssetsTable = ({ assets, folders = [], mixedItems = null, onAssetItemClick
         if (allSelected) {
             clear();
         } else {
+            trackUsage('didSelectAllMediaLibraryElements');
             selectAll(orderedItemKeys);
         }
     };