@strapi/upload 5.51.1 → 5.52.0

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

@@ -0,0 +1,110 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useIsMobile, useDebounce, useQueryParams } from '@strapi/admin/strapi-admin';
+import { Searchbar, Box, SearchForm } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey } from '../../../utils/translations.mjs';
+import { useAssetSearch } from '../hooks/useAssetSearch.mjs';
+
+const DEBOUNCE_MS = 300;
+// The DS Searchbar nests two bordered boxes: its own shell (neutral150) wrapping
+// the field (neutral200). Side by side they read as a single 2px, two-tone
+// border, which sits oddly next to the 1px neutral200 on the Filter button in the
+// same toolbar. Dropping the shell's border leaves the field's own — same width
+// and colour as the button — and costs nothing, since the focus ring lives on the
+// field too.
+const StyledSearchForm = styled(SearchForm)`
+  > div {
+    border: none;
+  }
+`;
+/**
+ * Keyword search over the whole Media Library. Owns the typing state and the
+ * debounce; `useAssetSearch` owns the `?_q=` URL param.
+ */ const AssetsSearchInput = ()=>{
+    const { formatMessage } = useIntl();
+    const { searchQuery, setSearchQuery } = useAssetSearch();
+    const isMobile = useIsMobile();
+    const [value, setValue] = useState(searchQuery);
+    const debouncedValue = useDebounce(value, DEBOUNCE_MS);
+    // Tracks the last value the URL and the input agreed on. Without it the two
+    // effects below would ping-pong: each would see the other's write as a change
+    // worth reacting to.
+    const lastCommittedRef = useRef(searchQuery);
+    // Read directly rather than through `useFolderNavigation`, which strips
+    // malformed `?folder=` values as a side effect.
+    const [{ query }] = useQueryParams();
+    const folderParam = query?.folder ?? '';
+    const lastFolderRef = useRef(folderParam);
+    // Commit settled input to the URL.
+    useEffect(()=>{
+        if (debouncedValue === lastCommittedRef.current) {
+            return;
+        }
+        lastCommittedRef.current = debouncedValue;
+        setSearchQuery(debouncedValue);
+    }, [
+        debouncedValue,
+        setSearchQuery
+    ]);
+    // Re-sync on external changes — back/forward, or "Clear search" in the empty
+    // state.
+    useEffect(()=>{
+        if (searchQuery === lastCommittedRef.current) {
+            return;
+        }
+        lastCommittedRef.current = searchQuery;
+        setValue(searchQuery);
+    }, [
+        searchQuery
+    ]);
+    // A folder navigation clears `_q`, but a term typed and never committed lives
+    // only in the debounce — without this it lands afterwards and reactivates the
+    // global search. `_q` alone can't see it: it was never non-empty.
+    useEffect(()=>{
+        if (folderParam === lastFolderRef.current) {
+            return;
+        }
+        lastFolderRef.current = folderParam;
+        lastCommittedRef.current = searchQuery;
+        setValue(searchQuery);
+    }, [
+        folderParam,
+        searchQuery
+    ]);
+    const searchForm = /*#__PURE__*/ jsx(StyledSearchForm, {
+        onSubmit: (event)=>event.preventDefault(),
+        children: /*#__PURE__*/ jsx(Searchbar, {
+            name: "search-assets",
+            value: value,
+            onChange: (event)=>setValue(event.target.value),
+            onClear: ()=>setValue(''),
+            clearLabel: formatMessage({
+                id: 'clearLabel',
+                defaultMessage: 'Clear'
+            }),
+            placeholder: formatMessage({
+                id: getTranslationKey('header.search.placeholder'),
+                defaultMessage: 'Search'
+            }),
+            size: "S",
+            children: formatMessage({
+                id: getTranslationKey('search.label'),
+                defaultMessage: 'Search for an asset'
+            })
+        })
+    });
+    // Mobile: fills the toolbar row (own line). Desktop: keeps its intrinsic size,
+    // with empty space between it and the right-aligned Sort/Toggle group.
+    if (isMobile) {
+        return /*#__PURE__*/ jsx(Box, {
+            width: "100%",
+            children: searchForm
+        });
+    }
+    return searchForm;
+};
+
+export { AssetsSearchInput };
+//# sourceMappingURL=AssetsSearchInput.mjs.map

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

@@ -0,0 +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';\nimport { styled } from 'styled-components';\n\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 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    <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","isMobile","useIsMobile","value","setValue","useState","debouncedValue","useDebounce","lastCommittedRef","useRef","query","useQueryParams","folderParam","folder","lastFolderRef","useEffect","current","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,15 +6,20 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
+var useMediaLibraryPermissions = require('../../../hooks/useMediaLibraryPermissions.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%;
@@ -23,6 +28,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};
@@ -44,14 +71,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};
@@ -74,16 +101,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`
@@ -104,8 +144,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;
@@ -125,19 +171,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) {
@@ -148,6 +210,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);
@@ -174,14 +239,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 && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
+            canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
@@ -199,38 +270,62 @@ 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(designSystem.Typography, {
+                                                textColor: "neutral800",
+                                                fontWeight: "semiBold",
+                                                ellipsis: true,
+                                                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, {
@@ -257,16 +352,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
                     })
                 })
             })
@@ -279,18 +372,26 @@ 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();
+    const { canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
     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) {
@@ -301,6 +402,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);
@@ -331,11 +435,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 && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
+            canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
@@ -355,6 +468,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",
@@ -378,7 +492,7 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
                     ]
                 })
             }),
-            !isMobile && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            isDesktop && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
@@ -405,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
                     })
                 })
             })
@@ -422,13 +534,17 @@ 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 visibleHeaders = isMobile ? constants.TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions') : constants.TABLE_HEADERS;
+    const { canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    // 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) and is hidden on mobile.
-    const showCheckboxColumn = !isMobile;
+    // 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.