npm - @strapi/upload - Versions diffs - 5.51.2 → 5.52.1 - Mend

@strapi/upload 5.51.2 → 5.52.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (253) hide show

package/dist/admin/future/pages/Assets/components/AssetsGrid.mjs CHANGED Viewed

@@ -1,22 +1,38 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Grid, Box, Flex, Checkbox, IconButton, CardBody, Typography, Card, CardHeader } from '@strapi/design-system';
-import { Folder, More } from '@strapi/icons';
+import { Grid, Box, Flex, Checkbox, CardBody, Card, CardHeader } from '@strapi/design-system';
+import { Folder } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled, css } from 'styled-components';
 import { ASSET_TYPES } from '../../../../enums.mjs';
+import { TruncatedText } from '../../../components/TruncatedText.mjs';
 import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions.mjs';
 import { prefixFileUrlWithBackendUrl } from '../../../utils/files.mjs';
 import { getAssetIcon } from '../../../utils/getAssetIcon.mjs';
+import { isEventFromWithin } from '../../../utils/isEventFromWithin.mjs';
 import { getTranslationKey } from '../../../utils/translations.mjs';
 import { useAssetSelection } from '../hooks/useAssetSelection.mjs';
+import { useBusyAssetsOptional } from '../hooks/useBusyAssets.mjs';
 import { useFolderNavigation } from '../hooks/useFolderNavigation.mjs';
 import { folderKey, assetKey } from '../utils/selection.mjs';
+import { AssetActionsMenu } from './AssetActionsMenu.mjs';
+import { BusyOverlay } from './BusyOverlay.mjs';
 import { useAssetsDndOptional } from './Dnd/AssetsDndProvider.mjs';
 import { useFolderDraggableDroppable, useFileDraggable } from './Dnd/useAssetDnd.mjs';
+import { FolderActionsMenu } from './FolderActionsMenu.mjs';
 /* -------------------------------------------------------------------------------------------------
  * AssetsGrid
- * -----------------------------------------------------------------------------------------------*/ // Top-left selection checkbox overlaid on the asset preview, always visible.
+ * -----------------------------------------------------------------------------------------------*/ // Cards own click, Enter and Space; the controls sitting on them (checkbox, "..."
+// menu) must not let those reach the card. Scoped to the wrapper's own DOM
+// subtree so the menu's portaled content — a React child of the wrapper, but
+// never a DOM descendant — still reaches `document`, where Radix listens in
+// order to dismiss its layers.
+const stopCardEvent = (e)=>{
+    if (isEventFromWithin(e)) {
+        e.stopPropagation();
+    }
+};
+// Top-left selection checkbox overlaid on the asset preview, always visible.
 const CheckboxOverlay = styled(Flex)`
   position: absolute;
   top: ${({ theme })=>theme.spaces[3]};
@@ -29,9 +45,11 @@ const StyledCard = styled(Card)`
     ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary600 : theme.colors.neutral200};
   border-radius: 8px;
   overflow: hidden;
-  cursor: ${({ $isMovePending })=>$isMovePending ? 'wait' : 'pointer'};
+  cursor: ${({ $isMovePending, $isBusy })=>$isMovePending || $isBusy ? 'wait' : 'pointer'};
   opacity: ${({ $isDragging })=>$isDragging ? 0.4 : 1};
-  pointer-events: ${({ $isMovePending })=>$isMovePending ? 'none' : 'auto'};
+  /* No opacity change while busy — the overlay does the dimming, and stacking
+     one on the other would wash the card out. */
+  pointer-events: ${({ $isMovePending, $isBusy })=>$isMovePending || $isBusy ? 'none' : 'auto'};
   background: ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary100 : undefined};
   /* Shift+click range selection must not highlight card text. */
   user-select: none;
@@ -88,7 +106,7 @@ const FolderIconContainer = styled(Flex)`
   flex-shrink: 0;
   color: ${({ theme })=>theme.colors.neutral600};
 `;
-const FolderName = styled(Typography)`
+const FolderName = styled(TruncatedText)`
   flex: 1;
   min-width: 0;
 `;
@@ -100,7 +118,7 @@ const FolderCard = ({ folder, orderedItemKeys })=>{
     };
     const { isSelected, toggle, selectRange } = useAssetSelection();
     const { canUpdate } = useMediaLibraryPermissions();
-    const { draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging }, droppable: { setNodeRef: setDropRef }, showValidDropHighlight, showInvalidDropCursor } = useFolderDraggableDroppable(folder);
+    const { dragData, draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging }, droppable: { setNodeRef: setDropRef }, showValidDropHighlight, showInvalidDropCursor } = useFolderDraggableDroppable(folder);
     const key = folderKey(folder.id);
     const setNodeRef = (node)=>{
         setDragRef(node);
@@ -109,7 +127,14 @@ const FolderCard = ({ folder, orderedItemKeys })=>{
     // Folders share the selection mechanism with assets (toggle, range,
     // select-all). 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 card — from
+    // navigating into the folder or starting a drag.
     const handleClick = (e)=>{
+        if (!isEventFromWithin(e)) {
+            return;
+        }
         if (e.shiftKey) {
             selectRange(orderedItemKeys, key);
         } else if (e.metaKey || e.ctrlKey) {
@@ -119,6 +144,9 @@ const FolderCard = ({ folder, orderedItemKeys })=>{
         }
     };
     const handleKeyDown = (e)=>{
+        if (!isEventFromWithin(e)) {
+            return;
+        }
         if (e.key === 'Enter') {
             e.preventDefault();
             navigateToFolder(folder);
@@ -147,6 +175,11 @@ const FolderCard = ({ folder, orderedItemKeys })=>{
         $isSelected: isSelected(key),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
+        onPointerDown: (e)=>{
+            if (isEventFromWithin(e)) {
+                listeners?.onPointerDown?.(e);
+            }
+        },
         role: "listitem",
         tabIndex: 0,
         children: [
@@ -171,17 +204,16 @@ const FolderCard = ({ folder, orderedItemKeys })=>{
             }),
             /*#__PURE__*/ jsx(FolderName, {
                 textColor: "neutral800",
-                ellipsis: true,
                 children: folder.name
             }),
-            /*#__PURE__*/ jsx(IconButton, {
-                label: formatMessage({
-                    id: getTranslationKey('control-card.more-actions'),
-                    defaultMessage: 'More actions'
-                }),
-                variant: "ghost",
-                onClick: (e)=>e.stopPropagation(),
-                children: /*#__PURE__*/ jsx(More, {})
+            /*#__PURE__*/ jsx(Flex, {
+                onClick: stopCardEvent,
+                onKeyDown: stopCardEvent,
+                onPointerDown: stopCardEvent,
+                children: /*#__PURE__*/ jsx(FolderActionsMenu, {
+                    folder: folder,
+                    dragData: dragData
+                })
             })
         ]
     });
@@ -218,9 +250,21 @@ const IconPreview = styled(Flex)`
   background: ${({ theme })=>theme.colors.neutral100};
 `;
 const AssetPreview = ({ asset })=>{
-    const { alternativeText, ext, formats, mime, url, isLocal, isUrlSigned } = asset;
+    const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;
     if (mime?.includes(ASSET_TYPES.Image)) {
-        const mediaURL = prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
+        // Replace keeps the same hash/URL, so without a cache-buster the browser
+        // serves the stale thumbnail after a Replace Media. `updatedAt`
+        // changes on replace, so it re-fetches exactly once per replacement.
+        // Skipped for signed URLs — an extra query param invalidates the signature.
+        const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;
+        const appendCacheBuster = (raw)=>{
+            if (cacheKey === undefined) {
+                return raw;
+            }
+            return raw.includes('?') ? `${raw}&v=${cacheKey}` : `${raw}?v=${cacheKey}`;
+        };
+        const rawMediaURL = prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
+        const mediaURL = rawMediaURL ? appendCacheBuster(rawMediaURL) : rawMediaURL;
         if (mediaURL) {
             return /*#__PURE__*/ jsx(PreviewContainer, {
                 children: /*#__PURE__*/ jsx(StyledImage, {
@@ -262,7 +306,7 @@ const FileTypeIcon = styled(Flex)`
   color: ${({ theme })=>theme.colors.neutral600};
   flex-shrink: 0;
 `;
-const FileName = styled(Typography)`
+const FileName = styled(TruncatedText)`
   flex: 1;
   min-width: 0;
 `;
@@ -293,15 +337,23 @@ const AssetCard = ({ asset, orderedItemKeys, onAssetItemClick })=>{
     const { isMovePending } = useAssetsDndOptional() ?? {
         isMovePending: false
     };
-    const { attributes, listeners, setNodeRef, isDragging } = useFileDraggable(asset);
+    const { attributes, listeners, setNodeRef, isDragging, dragData } = useFileDraggable(asset);
     const { isSelected, toggle, selectRange } = useAssetSelection();
     const { canUpdate } = useMediaLibraryPermissions();
+    const busyMessage = useBusyAssetsOptional()?.getBusyMessage(asset.id) ?? null;
     const key = assetKey(asset.id);
     const selected = isSelected(key);
     // 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 card — from
+    // opening the details drawer or toggling the selection.
     const handleCardClick = (e)=>{
+        if (!isEventFromWithin(e)) {
+            return;
+        }
         if (e.shiftKey) {
             selectRange(orderedItemKeys, key);
         } else if (e.metaKey || e.ctrlKey) {
@@ -312,6 +364,9 @@ const AssetCard = ({ asset, orderedItemKeys, onAssetItemClick })=>{
     };
     // Space toggles selection (additive), Enter opens the details drawer.
     const handleKeyDown = (e)=>{
+        if (!isEventFromWithin(e)) {
+            return;
+        }
         if (e.key === 'Enter') {
             e.preventDefault();
             onAssetItemClick(asset.id);
@@ -340,12 +395,18 @@ const AssetCard = ({ asset, orderedItemKeys, onAssetItemClick })=>{
         ...listeners,
         $isDragging: isDragging,
         $isMovePending: isMovePending,
+        $isBusy: busyMessage !== null,
         $isSelected: selected,
         tabIndex: 0,
         role: "listitem",
         onDragStart: (e)=>e.preventDefault(),
         onClick: handleCardClick,
         onKeyDown: handleKeyDown,
+        onPointerDown: (e)=>{
+            if (isEventFromWithin(e)) {
+                listeners?.onPointerDown?.(e);
+            }
+        },
         children: [
             /*#__PURE__*/ jsxs(StyledCardHeader, {
                 children: [
@@ -364,7 +425,11 @@ const AssetCard = ({ asset, orderedItemKeys, onAssetItemClick })=>{
                     }),
                     /*#__PURE__*/ jsx(AssetPreview, {
                         asset: asset
-                    })
+                    }),
+                    busyMessage !== null ? /*#__PURE__*/ jsx(BusyOverlay, {
+                        zIndex: 2,
+                        children: busyMessage
+                    }) : null
                 ]
             }),
             /*#__PURE__*/ jsx(CardBody, {
@@ -383,18 +448,17 @@ const AssetCard = ({ asset, orderedItemKeys, onAssetItemClick })=>{
                             onClick: handleNameClick,
                             children: /*#__PURE__*/ jsx(FileName, {
                                 textColor: "primary800",
-                                ellipsis: true,
                                 children: asset.name
                             })
                         }),
-                        /*#__PURE__*/ jsx(IconButton, {
-                            label: formatMessage({
-                                id: getTranslationKey('control-card.more-actions'),
-                                defaultMessage: 'More actions'
-                            }),
-                            variant: "ghost",
-                            onClick: (e)=>e.stopPropagation(),
-                            children: /*#__PURE__*/ jsx(More, {})
+                        /*#__PURE__*/ jsx(Flex, {
+                            onClick: stopCardEvent,
+                            onKeyDown: stopCardEvent,
+                            onPointerDown: stopCardEvent,
+                            children: /*#__PURE__*/ jsx(AssetActionsMenu, {
+                                asset: asset,
+                                dragData: dragData
+                            })
                         })
                     ]
                 })

package/dist/admin/future/pages/Assets/components/AssetsGrid.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AssetsGrid.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsGrid.tsx"],"sourcesContent":["import {\n Box,\n Card,\n CardBody,\n CardHeader,\n Checkbox,\n Flex,\n Grid,\n IconButton,\n Typography,\n} from '@strapi/design-system';\nimport { Folder as FolderIcon, More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, css } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../../../enums';\nimport { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSelection } from '../hooks/useAssetSelection';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\nimport { assetKey, folderKey, type ItemKey } from '../utils/selection';\n\nimport { useAssetsDndOptional } from './Dnd/AssetsDndProvider';\nimport { useFileDraggable, useFolderDraggableDroppable } from './Dnd/useAssetDnd';\n\nimport type { File } from '../../../../../../shared/contracts/files';\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsGrid\n * -----------------------------------------------------------------------------------------------/\n\n// Top-left selection checkbox overlaid on the asset preview, always visible.\nconst CheckboxOverlay = styled(Flex)`\n position: absolute;\n top: ${({ theme }) => theme.spaces[3]};\n left: ${({ theme }) => theme.spaces[3]};\n z-index: 1;\n box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n`;\n\nconst StyledCard = styled(Card)<{\n $isDragging?: boolean;\n $isMovePending?: boolean;\n $isSelected?: boolean;\n}>`\n border: 1px solid\n ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary600 : theme.colors.neutral200)};\n border-radius: 8px;\n overflow: hidden;\n cursor: ${({ $isMovePending }) => ($isMovePending ? 'wait' : 'pointer')};\n opacity: ${({ $isDragging }) => ($isDragging ? 0.4 : 1)};\n pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n background: ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary100 : undefined)};\n / Shift+click range selection must not highlight card text. /\n user-select: none;\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary100};\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: 2px;\n }\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * FolderCard\n * -----------------------------------------------------------------------------------------------/\n\nconst FoldersRow = styled(Box)`\n grid-column: 1 / -1;\n`;\n\nconst StyledFolderCard = styled(Flex)<{\n $isDragging?: boolean;\n $isMovePending?: boolean;\n $isValidDropTarget?: boolean;\n $isInvalidDropTarget?: boolean;\n $isSelected?: boolean;\n}>`\n width: 100%;\n user-select: none;\n padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`}; // 8px 12px\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]}; // 8px\n border: 1px solid\n ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary600 : theme.colors.neutral200)};\n border-radius: ${({ theme }) => theme.borderRadius};\n background: ${({ theme, $isSelected }) =>\n $isSelected ? theme.colors.primary100 : theme.colors.neutral0};\n cursor: ${({ $isMovePending, $isInvalidDropTarget }) => {\n if ($isMovePending) {\n return 'wait';\n }\n\n return $isInvalidDropTarget ? 'not-allowed' : 'pointer';\n }};\n opacity: ${({ $isDragging }) => ($isDragging ? 0.4 : 1)};\n pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n transition: background 0.2s;\n\n ${({ $isValidDropTarget, theme }) =>\n $isValidDropTarget &&\n css`\n background: ${theme.colors.primary100};\n border: 1px dashed ${theme.colors.primary600};\n `}\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary100};\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: 2px;\n }\n`;\n\nconst FolderIconContainer = styled(Flex)`\n flex-shrink: 0;\n color: ${({ theme }) => theme.colors.neutral600};\n`;\n\nconst FolderName = styled(Typography)`\n flex: 1;\n min-width: 0;\n`;\n\ninterface FolderCardProps {\n folder: Folder;\n orderedItemKeys: ItemKey[];\n}\n\nconst FolderCard = ({ folder, orderedItemKeys }: FolderCardProps) => {\n const { formatMessage } = useIntl();\n const { navigateToFolder } = useFolderNavigation();\n const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n const { isSelected, toggle, selectRange } = useAssetSelection();\n const { canUpdate } = useMediaLibraryPermissions();\n const {\n draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging },\n droppable: { setNodeRef: setDropRef },\n showValidDropHighlight,\n showInvalidDropCursor,\n } = useFolderDraggableDroppable(folder);\n\n const key = folderKey(folder.id);\n\n const setNodeRef = (node: HTMLElement \| null) => {\n setDragRef(node);\n setDropRef(node);\n };\n\n // Folders share the selection mechanism with assets (toggle, range,\n // select-all). Only the plain-click semantic differs: it navigates into the\n // folder instead of selecting it.\n const handleClick = (e: React.MouseEvent) => {\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else if (e.metaKey \|\| e.ctrlKey) {\n toggle(key);\n } else {\n navigateToFolder(folder);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n navigateToFolder(folder);\n } else if (e.key === ' ') {\n e.preventDefault();\n toggle(key);\n }\n };\n\n // Checkbox is the pointer path to selection; Shift extends the range.\n const handleCheckboxClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else {\n toggle(key);\n }\n };\n\n return (\n <StyledFolderCard\n ref={setNodeRef}\n {...attributes}\n {...listeners}\n $isDragging={isDragging}\n $isMovePending={isMovePending}\n $isValidDropTarget={showValidDropHighlight}\n $isInvalidDropTarget={showInvalidDropCursor}\n $isSelected={isSelected(key)}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n role=\"listitem\"\n tabIndex={0}\n >\n {canUpdate && (\n <Flex onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}>\n <Checkbox\n checked={isSelected(key)}\n onClick={handleCheckboxClick}\n aria-label={formatMessage(\n {\n id: getTranslationKey('list.table.row.select'),\n defaultMessage: 'Select {name}',\n },\n { name: folder.name }\n )}\n />\n </Flex>\n )}\n <FolderIconContainer>\n <FolderIcon width={20} height={20} />\n </FolderIconContainer>\n <FolderName textColor=\"neutral800\" ellipsis>\n {folder.name}\n </FolderName>\n <IconButton\n label={formatMessage({\n id: getTranslationKey('control-card.more-actions'),\n defaultMessage: 'More actions',\n })}\n variant=\"ghost\"\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n >\n <More />\n </IconButton>\n </StyledFolderCard>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * AssetPreview\n * -----------------------------------------------------------------------------------------------/\n\nconst PreviewContainer = styled(Box)`\n position: relative;\n width: 100%;\n padding-bottom: 62.5%;\n height: 0;\n overflow: hidden;\n background: repeating-conic-gradient(\n ${({ theme }) => theme.colors.neutral100} 0% 25%,\n transparent 0% 50%\n )\n 50% / 20px 20px;\n`;\n\nconst StyledImage = styled.img`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nconst IconPreview = styled(Flex)`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n color: ${({ theme }) => theme.colors.neutral500};\n background: ${({ theme }) => theme.colors.neutral100};\n`;\n\ninterface AssetPreviewProps {\n asset: File;\n}\n\nconst AssetPreview = ({ asset }: AssetPreviewProps) => {\n const { alternativeText, ext, formats, mime, url, isLocal, isUrlSigned } = asset;\n\n if (mime?.includes(ASSET_TYPES.Image)) {\n const mediaURL =\n prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);\n\n if (mediaURL) {\n return (\n <PreviewContainer>\n <StyledImage\n src={mediaURL}\n alt={alternativeText \|\| ''}\n // Only signed remote URLs need crossOrigin (cache collision with\n // the preview). Public/unsigned remote thumbnails must render\n // without a bucket CORS rule. See #26581.\n crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n draggable={false}\n onDragStart={(e) => e.preventDefault()}\n />\n </PreviewContainer>\n );\n }\n }\n\n const DocIcon = getAssetIcon(mime, ext);\n\n return (\n <PreviewContainer>\n <IconPreview justifyContent=\"center\" alignItems=\"center\">\n <DocIcon width={48} height={48} />\n </IconPreview>\n </PreviewContainer>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * AssetCard\n * -----------------------------------------------------------------------------------------------/\n\nconst StyledCardHeader = styled(CardHeader)`\n position: relative;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst CardFooter = styled(Flex)`\n min-width: 0;\n width: 100%;\n`;\n\nconst FileTypeIcon = styled(Flex)`\n color: ${({ theme }) => theme.colors.neutral600};\n flex-shrink: 0;\n`;\n\nconst FileName = styled(Typography)`\n flex: 1;\n min-width: 0;\n`;\n\n// The asset filename is its own interactive element: clicking it opens the\n// details drawer instead of selecting the card (mirrors the table view).\nconst NameButton = styled.button`\n display: inline-flex;\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n padding: 0;\n margin: 0;\n cursor: pointer;\n text-align: left;\n color: inherit;\n font: inherit;\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: 2px;\n border-radius: 2px;\n }\n`;\n\ninterface AssetCardProps {\n asset: File;\n orderedItemKeys: ItemKey[];\n onAssetItemClick: (assetId: number) => void;\n}\n\nconst AssetCard = ({ asset, orderedItemKeys, onAssetItemClick }: AssetCardProps) => {\n const { formatMessage } = useIntl();\n const TypeIcon = getAssetIcon(asset.mime, asset.ext);\n const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n const { attributes, listeners, setNodeRef, isDragging } = useFileDraggable(asset);\n const { isSelected, toggle, selectRange } = useAssetSelection();\n const { canUpdate } = useMediaLibraryPermissions();\n\n const key = assetKey(asset.id);\n const selected = isSelected(key);\n\n // Plain click opens the asset details; pointer selection lives on the\n // checkbox only. Modifier clicks keep the selection semantics: shift selects\n // a range, cmd/ctrl toggles.\n const handleCardClick = (e: React.MouseEvent) => {\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else if (e.metaKey \|\| e.ctrlKey) {\n toggle(key);\n } else {\n onAssetItemClick(asset.id);\n }\n };\n\n // Space toggles selection (additive), Enter opens the details drawer.\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onAssetItemClick(asset.id);\n } else if (e.key === ' ') {\n e.preventDefault();\n toggle(key);\n }\n };\n\n const handleNameClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n onAssetItemClick(asset.id);\n };\n\n // Same semantics as the table's row checkbox: Shift extends the range,\n // otherwise a plain additive toggle. Never bubbles into the card click.\n const handleCheckboxClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else {\n toggle(key);\n }\n };\n\n return (\n <StyledCard\n ref={setNodeRef}\n {...attributes}\n {...listeners}\n $isDragging={isDragging}\n $isMovePending={isMovePending}\n $isSelected={selected}\n tabIndex={0}\n role=\"listitem\"\n onDragStart={(e) => e.preventDefault()}\n onClick={handleCardClick}\n onKeyDown={handleKeyDown}\n >\n <StyledCardHeader>\n {canUpdate && (\n <CheckboxOverlay onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}>\n <Checkbox\n checked={selected}\n onClick={handleCheckboxClick}\n aria-label={formatMessage(\n {\n id: getTranslationKey('list.table.row.select'),\n defaultMessage: 'Select {name}',\n },\n { name: asset.name }\n )}\n />\n </CheckboxOverlay>\n )}\n <AssetPreview asset={asset} />\n </StyledCardHeader>\n <CardBody>\n <CardFooter alignItems=\"center\" gap={2}>\n <FileTypeIcon>\n <TypeIcon width={20} height={20} />\n </FileTypeIcon>\n <NameButton type=\"button\" onClick={handleNameClick}>\n <FileName textColor=\"primary800\" ellipsis>\n {asset.name}\n </FileName>\n </NameButton>\n <IconButton\n label={formatMessage({\n id: getTranslationKey('control-card.more-actions'),\n defaultMessage: 'More actions',\n })}\n variant=\"ghost\"\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n >\n <More />\n </IconButton>\n </CardFooter>\n </CardBody>\n </StyledCard>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * AssetsGrid\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsGridProps {\n assets: File[];\n folders?: Folder[];\n onAssetItemClick: (assetId: number) => void;\n}\n\nexport const AssetsGrid = ({ assets, folders = [], onAssetItemClick }: AssetsGridProps) => {\n const totalItems = folders.length + assets.length;\n\n // Render order: folders always on top in the grid (mixing is table-only) —\n // range selection follows it.\n const orderedItemKeys: ItemKey[] = [\n ...folders.map((folder) => folderKey(folder.id)),\n ...assets.map((asset) => assetKey(asset.id)),\n ];\n\n // The empty state is owned by the page (`AssetsView` renders `EmptyState`) — an\n // empty grid renders nothing at all.\n if (totalItems === 0) {\n return null;\n }\n\n return (\n <Grid.Root gap={4} role=\"list\" data-testid=\"assets-grid\">\n {folders.length > 0 && (\n <FoldersRow>\n <Grid.Root gap={4}>\n {folders.map((folder) => (\n <Grid.Item col={3} m={4} s={6} xs={12} key={`folder-${folder.id}`}>\n <FolderCard folder={folder} orderedItemKeys={orderedItemKeys} />\n </Grid.Item>\n ))}\n </Grid.Root>\n </FoldersRow>\n )}\n {assets.map((asset) => (\n <Grid.Item\n col={3}\n m={4}\n s={6}\n xs={12}\n key={asset.id}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <AssetCard\n asset={asset}\n orderedItemKeys={orderedItemKeys}\n onAssetItemClick={onAssetItemClick}\n />\n </Grid.Item>\n ))}\n </Grid.Root>\n );\n};\n"],"names":["CheckboxOverlay","styled","Flex","theme","spaces","shadows","filterShadow","StyledCard","Card","$isSelected","colors","primary600","neutral200","$isMovePending","$isDragging","primary100","undefined","FoldersRow","Box","StyledFolderCard","borderRadius","neutral0","$isInvalidDropTarget","$isValidDropTarget","css","FolderIconContainer","neutral600","FolderName","Typography","FolderCard","folder","orderedItemKeys","formatMessage","useIntl","navigateToFolder","useFolderNavigation","isMovePending","useAssetsDndOptional","isSelected","toggle","selectRange","useAssetSelection","canUpdate","useMediaLibraryPermissions","draggable","attributes","listeners","setNodeRef","setDragRef","isDragging","droppable","setDropRef","showValidDropHighlight","showInvalidDropCursor","useFolderDraggableDroppable","key","folderKey","id","node","handleClick","e","shiftKey","metaKey","ctrlKey","handleKeyDown","preventDefault","handleCheckboxClick","stopPropagation","_jsxs","ref","onClick","onKeyDown","role","tabIndex","_jsx","Checkbox","checked","aria-label","getTranslationKey","defaultMessage","name","FolderIcon","width","height","textColor","ellipsis","IconButton","label","variant","More","PreviewContainer","neutral100","StyledImage","img","IconPreview","neutral500","AssetPreview","asset","alternativeText","ext","formats","mime","url","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","mediaURL","prefixFileUrlWithBackendUrl","thumbnail","src","alt","crossOrigin","onDragStart","DocIcon","getAssetIcon","justifyContent","alignItems","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","FileName","NameButton","button","AssetCard","onAssetItemClick","TypeIcon","useFileDraggable","assetKey","selected","handleCardClick","handleNameClick","CardBody","gap","type","AssetsGrid","assets","folders","totalItems","length","map","Grid","Root","data-testid","Item","col","m","s","xs","direction"],"mappings":"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"}
1	+ {"version":3,"file":"AssetsGrid.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsGrid.tsx"],"sourcesContent":["import { Box, Card, CardBody, CardHeader, Checkbox, Flex, Grid } from '@strapi/design-system';\nimport { Folder as FolderIcon } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, css } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../../../enums';\nimport { TruncatedText } from '../../../components/TruncatedText';\nimport { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { isEventFromWithin } from '../../../utils/isEventFromWithin';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSelection } from '../hooks/useAssetSelection';\nimport { useBusyAssetsOptional } from '../hooks/useBusyAssets';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\nimport { assetKey, folderKey, type ItemKey } from '../utils/selection';\n\nimport { AssetActionsMenu } from './AssetActionsMenu';\nimport { BusyOverlay } from './BusyOverlay';\nimport { useAssetsDndOptional } from './Dnd/AssetsDndProvider';\nimport { useFileDraggable, useFolderDraggableDroppable } from './Dnd/useAssetDnd';\nimport { FolderActionsMenu } from './FolderActionsMenu';\n\nimport type { File } from '../../../../../../shared/contracts/files';\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsGrid\n * -----------------------------------------------------------------------------------------------/\n\n// Cards own click, Enter and Space; the controls sitting on them (checkbox, \"...\"\n// menu) must not let those reach the card. Scoped to the wrapper's own DOM\n// subtree so the menu's portaled content — a React child of the wrapper, but\n// never a DOM descendant — still reaches `document`, where Radix listens in\n// order to dismiss its layers.\nconst stopCardEvent = (e: React.SyntheticEvent) => {\n if (isEventFromWithin(e)) {\n e.stopPropagation();\n }\n};\n\n// Top-left selection checkbox overlaid on the asset preview, always visible.\nconst CheckboxOverlay = styled(Flex)`\n position: absolute;\n top: ${({ theme }) => theme.spaces[3]};\n left: ${({ theme }) => theme.spaces[3]};\n z-index: 1;\n box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n`;\n\nconst StyledCard = styled(Card)<{\n $isDragging?: boolean;\n $isMovePending?: boolean;\n $isBusy?: boolean;\n $isSelected?: boolean;\n}>`\n border: 1px solid\n ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary600 : theme.colors.neutral200)};\n border-radius: 8px;\n overflow: hidden;\n cursor: ${({ $isMovePending, $isBusy }) => ($isMovePending \|\| $isBusy ? 'wait' : 'pointer')};\n opacity: ${({ $isDragging }) => ($isDragging ? 0.4 : 1)};\n / No opacity change while busy — the overlay does the dimming, and stacking\n one on the other would wash the card out. /\n pointer-events: ${({ $isMovePending, $isBusy }) => ($isMovePending \|\| $isBusy ? 'none' : 'auto')};\n background: ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary100 : undefined)};\n / Shift+click range selection must not highlight card text. /\n user-select: none;\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary100};\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: 2px;\n }\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * FolderCard\n * -----------------------------------------------------------------------------------------------/\n\nconst FoldersRow = styled(Box)`\n grid-column: 1 / -1;\n`;\n\nconst StyledFolderCard = styled(Flex)<{\n $isDragging?: boolean;\n $isMovePending?: boolean;\n $isValidDropTarget?: boolean;\n $isInvalidDropTarget?: boolean;\n $isSelected?: boolean;\n}>`\n width: 100%;\n user-select: none;\n padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`}; // 8px 12px\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]}; // 8px\n border: 1px solid\n ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary600 : theme.colors.neutral200)};\n border-radius: ${({ theme }) => theme.borderRadius};\n background: ${({ theme, $isSelected }) =>\n $isSelected ? theme.colors.primary100 : theme.colors.neutral0};\n cursor: ${({ $isMovePending, $isInvalidDropTarget }) => {\n if ($isMovePending) {\n return 'wait';\n }\n\n return $isInvalidDropTarget ? 'not-allowed' : 'pointer';\n }};\n opacity: ${({ $isDragging }) => ($isDragging ? 0.4 : 1)};\n pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n transition: background 0.2s;\n\n ${({ $isValidDropTarget, theme }) =>\n $isValidDropTarget &&\n css`\n background: ${theme.colors.primary100};\n border: 1px dashed ${theme.colors.primary600};\n `}\n\n &:hover {\n background: ${({ theme }) => theme.colors.primary100};\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: 2px;\n }\n`;\n\nconst FolderIconContainer = styled(Flex)`\n flex-shrink: 0;\n color: ${({ theme }) => theme.colors.neutral600};\n`;\n\nconst FolderName = styled(TruncatedText)`\n flex: 1;\n min-width: 0;\n`;\n\ninterface FolderCardProps {\n folder: Folder;\n orderedItemKeys: ItemKey[];\n}\n\nconst FolderCard = ({ folder, orderedItemKeys }: FolderCardProps) => {\n const { formatMessage } = useIntl();\n const { navigateToFolder } = useFolderNavigation();\n const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n const { isSelected, toggle, selectRange } = useAssetSelection();\n const { canUpdate } = useMediaLibraryPermissions();\n const {\n dragData,\n draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging },\n droppable: { setNodeRef: setDropRef },\n showValidDropHighlight,\n showInvalidDropCursor,\n } = useFolderDraggableDroppable(folder);\n\n const key = folderKey(folder.id);\n\n const setNodeRef = (node: HTMLElement \| null) => {\n setDragRef(node);\n setDropRef(node);\n };\n\n // Folders share the selection mechanism with assets (toggle, range,\n // select-all). Only the plain-click semantic differs: it navigates into the\n // folder instead of selecting it.\n //\n // The containment guard on this and the handlers below is what keeps the\n // actions menu's portaled dialogs — React children of this card — from\n // navigating into the folder or starting a drag.\n const handleClick = (e: React.MouseEvent) => {\n if (!isEventFromWithin(e)) {\n return;\n }\n\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else if (e.metaKey \|\| e.ctrlKey) {\n toggle(key);\n } else {\n navigateToFolder(folder);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!isEventFromWithin(e)) {\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n navigateToFolder(folder);\n } else if (e.key === ' ') {\n e.preventDefault();\n toggle(key);\n }\n };\n\n // Checkbox is the pointer path to selection; Shift extends the range.\n const handleCheckboxClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else {\n toggle(key);\n }\n };\n\n return (\n <StyledFolderCard\n ref={setNodeRef}\n {...attributes}\n {...listeners}\n $isDragging={isDragging}\n $isMovePending={isMovePending}\n $isValidDropTarget={showValidDropHighlight}\n $isInvalidDropTarget={showInvalidDropCursor}\n $isSelected={isSelected(key)}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onPointerDown={(e: React.PointerEvent) => {\n if (isEventFromWithin(e)) {\n listeners?.onPointerDown?.(e);\n }\n }}\n role=\"listitem\"\n tabIndex={0}\n >\n {canUpdate && (\n <Flex onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}>\n <Checkbox\n checked={isSelected(key)}\n onClick={handleCheckboxClick}\n aria-label={formatMessage(\n {\n id: getTranslationKey('list.table.row.select'),\n defaultMessage: 'Select {name}',\n },\n { name: folder.name }\n )}\n />\n </Flex>\n )}\n <FolderIconContainer>\n <FolderIcon width={20} height={20} />\n </FolderIconContainer>\n <FolderName textColor=\"neutral800\">{folder.name}</FolderName>\n <Flex onClick={stopCardEvent} onKeyDown={stopCardEvent} onPointerDown={stopCardEvent}>\n <FolderActionsMenu folder={folder} dragData={dragData} />\n </Flex>\n </StyledFolderCard>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * AssetPreview\n * -----------------------------------------------------------------------------------------------/\n\nconst PreviewContainer = styled(Box)`\n position: relative;\n width: 100%;\n padding-bottom: 62.5%;\n height: 0;\n overflow: hidden;\n background: repeating-conic-gradient(\n ${({ theme }) => theme.colors.neutral100} 0% 25%,\n transparent 0% 50%\n )\n 50% / 20px 20px;\n`;\n\nconst StyledImage = styled.img`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nconst IconPreview = styled(Flex)`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n color: ${({ theme }) => theme.colors.neutral500};\n background: ${({ theme }) => theme.colors.neutral100};\n`;\n\ninterface AssetPreviewProps {\n asset: File;\n}\n\nconst AssetPreview = ({ asset }: AssetPreviewProps) => {\n const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n if (mime?.includes(ASSET_TYPES.Image)) {\n // Replace keeps the same hash/URL, so without a cache-buster the browser\n // serves the stale thumbnail after a Replace Media. `updatedAt`\n // changes on replace, so it re-fetches exactly once per replacement.\n // Skipped for signed URLs — an extra query param invalidates the signature.\n const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;\n const appendCacheBuster = (raw: string) => {\n if (cacheKey === undefined) {\n return raw;\n }\n return raw.includes('?') ? `${raw}&v=${cacheKey}` : `${raw}?v=${cacheKey}`;\n };\n\n const rawMediaURL =\n prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);\n const mediaURL = rawMediaURL ? appendCacheBuster(rawMediaURL) : rawMediaURL;\n\n if (mediaURL) {\n return (\n <PreviewContainer>\n <StyledImage\n src={mediaURL}\n alt={alternativeText \|\| ''}\n // Only signed remote URLs need crossOrigin (cache collision with\n // the preview). Public/unsigned remote thumbnails must render\n // without a bucket CORS rule. See #26581.\n crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n draggable={false}\n onDragStart={(e) => e.preventDefault()}\n />\n </PreviewContainer>\n );\n }\n }\n\n const DocIcon = getAssetIcon(mime, ext);\n\n return (\n <PreviewContainer>\n <IconPreview justifyContent=\"center\" alignItems=\"center\">\n <DocIcon width={48} height={48} />\n </IconPreview>\n </PreviewContainer>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * AssetCard\n * -----------------------------------------------------------------------------------------------/\n\nconst StyledCardHeader = styled(CardHeader)`\n position: relative;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst CardFooter = styled(Flex)`\n min-width: 0;\n width: 100%;\n`;\n\nconst FileTypeIcon = styled(Flex)`\n color: ${({ theme }) => theme.colors.neutral600};\n flex-shrink: 0;\n`;\n\nconst FileName = styled(TruncatedText)`\n flex: 1;\n min-width: 0;\n`;\n\n// The asset filename is its own interactive element: clicking it opens the\n// details drawer instead of selecting the card (mirrors the table view).\nconst NameButton = styled.button`\n display: inline-flex;\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n padding: 0;\n margin: 0;\n cursor: pointer;\n text-align: left;\n color: inherit;\n font: inherit;\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: 2px;\n border-radius: 2px;\n }\n`;\n\ninterface AssetCardProps {\n asset: File;\n orderedItemKeys: ItemKey[];\n onAssetItemClick: (assetId: number) => void;\n}\n\nconst AssetCard = ({ asset, orderedItemKeys, onAssetItemClick }: AssetCardProps) => {\n const { formatMessage } = useIntl();\n const TypeIcon = getAssetIcon(asset.mime, asset.ext);\n const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n const { attributes, listeners, setNodeRef, isDragging, dragData } = useFileDraggable(asset);\n const { isSelected, toggle, selectRange } = useAssetSelection();\n const { canUpdate } = useMediaLibraryPermissions();\n const busyMessage = useBusyAssetsOptional()?.getBusyMessage(asset.id) ?? null;\n\n const key = assetKey(asset.id);\n const selected = isSelected(key);\n\n // Plain click opens the asset details; pointer selection lives on the\n // checkbox only. Modifier clicks keep the selection semantics: shift selects\n // a range, cmd/ctrl toggles.\n //\n // The containment guard on this and the handler below is what keeps the\n // actions menu's portaled dialogs — React children of this card — from\n // opening the details drawer or toggling the selection.\n const handleCardClick = (e: React.MouseEvent) => {\n if (!isEventFromWithin(e)) {\n return;\n }\n\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else if (e.metaKey \|\| e.ctrlKey) {\n toggle(key);\n } else {\n onAssetItemClick(asset.id);\n }\n };\n\n // Space toggles selection (additive), Enter opens the details drawer.\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!isEventFromWithin(e)) {\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n onAssetItemClick(asset.id);\n } else if (e.key === ' ') {\n e.preventDefault();\n toggle(key);\n }\n };\n\n const handleNameClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n onAssetItemClick(asset.id);\n };\n\n // Same semantics as the table's row checkbox: Shift extends the range,\n // otherwise a plain additive toggle. Never bubbles into the card click.\n const handleCheckboxClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (e.shiftKey) {\n selectRange(orderedItemKeys, key);\n } else {\n toggle(key);\n }\n };\n\n return (\n <StyledCard\n ref={setNodeRef}\n {...attributes}\n {...listeners}\n $isDragging={isDragging}\n $isMovePending={isMovePending}\n $isBusy={busyMessage !== null}\n $isSelected={selected}\n tabIndex={0}\n role=\"listitem\"\n onDragStart={(e) => e.preventDefault()}\n onClick={handleCardClick}\n onKeyDown={handleKeyDown}\n onPointerDown={(e: React.PointerEvent) => {\n if (isEventFromWithin(e)) {\n listeners?.onPointerDown?.(e);\n }\n }}\n >\n <StyledCardHeader>\n {canUpdate && (\n <CheckboxOverlay onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}>\n <Checkbox\n checked={selected}\n onClick={handleCheckboxClick}\n aria-label={formatMessage(\n {\n id: getTranslationKey('list.table.row.select'),\n defaultMessage: 'Select {name}',\n },\n { name: asset.name }\n )}\n />\n </CheckboxOverlay>\n )}\n <AssetPreview asset={asset} />\n {/ The header is the card's only positioned ancestor, and it's the part\n worth covering — the footer keeps the name legible while the preview\n is mid-replace. Below the checkbox overlay (z-index 1) would hide\n the spinner, so it sits above it. /}\n {busyMessage !== null ? <BusyOverlay zIndex={2}>{busyMessage}</BusyOverlay> : null}\n </StyledCardHeader>\n <CardBody>\n <CardFooter alignItems=\"center\" gap={2}>\n <FileTypeIcon>\n <TypeIcon width={20} height={20} />\n </FileTypeIcon>\n <NameButton type=\"button\" onClick={handleNameClick}>\n <FileName textColor=\"primary800\">{asset.name}</FileName>\n </NameButton>\n <Flex onClick={stopCardEvent} onKeyDown={stopCardEvent} onPointerDown={stopCardEvent}>\n <AssetActionsMenu asset={asset} dragData={dragData} />\n </Flex>\n </CardFooter>\n </CardBody>\n </StyledCard>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * AssetsGrid\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetsGridProps {\n assets: File[];\n folders?: Folder[];\n onAssetItemClick: (assetId: number) => void;\n}\n\nexport const AssetsGrid = ({ assets, folders = [], onAssetItemClick }: AssetsGridProps) => {\n const totalItems = folders.length + assets.length;\n\n // Render order: folders always on top in the grid (mixing is table-only) —\n // range selection follows it.\n const orderedItemKeys: ItemKey[] = [\n ...folders.map((folder) => folderKey(folder.id)),\n ...assets.map((asset) => assetKey(asset.id)),\n ];\n\n // The empty state is owned by the page (`AssetsView` renders `EmptyState`) — an\n // empty grid renders nothing at all.\n if (totalItems === 0) {\n return null;\n }\n\n return (\n <Grid.Root gap={4} role=\"list\" data-testid=\"assets-grid\">\n {folders.length > 0 && (\n <FoldersRow>\n <Grid.Root gap={4}>\n {folders.map((folder) => (\n <Grid.Item col={3} m={4} s={6} xs={12} key={`folder-${folder.id}`}>\n <FolderCard folder={folder} orderedItemKeys={orderedItemKeys} />\n </Grid.Item>\n ))}\n </Grid.Root>\n </FoldersRow>\n )}\n {assets.map((asset) => (\n <Grid.Item\n col={3}\n m={4}\n s={6}\n xs={12}\n key={asset.id}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <AssetCard\n asset={asset}\n orderedItemKeys={orderedItemKeys}\n onAssetItemClick={onAssetItemClick}\n />\n </Grid.Item>\n ))}\n </Grid.Root>\n );\n};\n"],"names":["stopCardEvent","e","isEventFromWithin","stopPropagation","CheckboxOverlay","styled","Flex","theme","spaces","shadows","filterShadow","StyledCard","Card","$isSelected","colors","primary600","neutral200","$isMovePending","$isBusy","$isDragging","primary100","undefined","FoldersRow","Box","StyledFolderCard","borderRadius","neutral0","$isInvalidDropTarget","$isValidDropTarget","css","FolderIconContainer","neutral600","FolderName","TruncatedText","FolderCard","folder","orderedItemKeys","formatMessage","useIntl","navigateToFolder","useFolderNavigation","isMovePending","useAssetsDndOptional","isSelected","toggle","selectRange","useAssetSelection","canUpdate","useMediaLibraryPermissions","dragData","draggable","attributes","listeners","setNodeRef","setDragRef","isDragging","droppable","setDropRef","showValidDropHighlight","showInvalidDropCursor","useFolderDraggableDroppable","key","folderKey","id","node","handleClick","shiftKey","metaKey","ctrlKey","handleKeyDown","preventDefault","handleCheckboxClick","_jsxs","ref","onClick","onKeyDown","onPointerDown","role","tabIndex","_jsx","Checkbox","checked","aria-label","getTranslationKey","defaultMessage","name","FolderIcon","width","height","textColor","FolderActionsMenu","PreviewContainer","neutral100","StyledImage","img","IconPreview","neutral500","AssetPreview","asset","alternativeText","ext","formats","mime","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","cacheKey","Date","getTime","appendCacheBuster","raw","rawMediaURL","prefixFileUrlWithBackendUrl","thumbnail","mediaURL","src","alt","crossOrigin","onDragStart","DocIcon","getAssetIcon","justifyContent","alignItems","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","FileName","NameButton","button","AssetCard","onAssetItemClick","TypeIcon","useFileDraggable","busyMessage","useBusyAssetsOptional","getBusyMessage","assetKey","selected","handleCardClick","handleNameClick","BusyOverlay","zIndex","CardBody","gap","type","AssetActionsMenu","AssetsGrid","assets","folders","totalItems","length","map","Grid","Root","data-testid","Item","col","m","s","xs","direction"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/AssetsSearchInput.js CHANGED Viewed

@@ -5,16 +5,30 @@ var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var useTracking = require('../../../hooks/useTracking.js');
 var translations = require('../../../utils/translations.js');
 var useAssetSearch = require('../hooks/useAssetSearch.js');
 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 = styledComponents.styled(designSystem.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 } = reactIntl.useIntl();
     const { searchQuery, setSearchQuery } = useAssetSearch.useAssetSearch();
+    const { trackUsage } = useTracking.useTracking();
     const isMobile = strapiAdmin.useIsMobile();
     const [value, setValue] = React.useState(searchQuery);
     const debouncedValue = strapiAdmin.useDebounce(value, DEBOUNCE_MS);
@@ -33,10 +47,18 @@ const DEBOUNCE_MS = 300;
             return;
         }
         lastCommittedRef.current = debouncedValue;
+        // Only a real query counts as a search — clearing the box (empty value) is
+        // a reset, not a `didSearch`.
+        if (debouncedValue) {
+            trackUsage('didSearchMediaLibraryElements', {
+                location: useTracking.MEDIA_LIBRARY_LOCATION
+            });
+        }
         setSearchQuery(debouncedValue);
     }, [
         debouncedValue,
-        setSearchQuery
+        setSearchQuery,
+        trackUsage
     ]);
     // Re-sync on external changes — back/forward, or "Clear search" in the empty
     // state.
@@ -63,7 +85,7 @@ const DEBOUNCE_MS = 300;
         folderParam,
         searchQuery
     ]);
-    const searchForm = /*#__PURE__*/ jsxRuntime.jsx(designSystem.SearchForm, {
+    const searchForm = /*#__PURE__*/ jsxRuntime.jsx(StyledSearchForm, {
         onSubmit: (event)=>event.preventDefault(),
         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
             name: "search-assets",
@@ -85,8 +107,8 @@ const DEBOUNCE_MS = 300;
             })
         })
     });
-    // TODO: (design question)The input stays visible at every breakpoint; on mobile it takes the full
-    // width of the toolbar instead of its intrinsic size.
+    // 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__*/ jsxRuntime.jsx(designSystem.Box, {
             width: "100%",

package/dist/admin/future/pages/Assets/components/AssetsSearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AssetsSearchInput.js","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":"~~;;;;;;;;;;AASA~~,MAAMA,WAAAA,GAAc,GAAA;AAEpB;;;UAIaC,iBAAAA,GAAoB,IAAA;IAC/B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGC,6BAAAA,EAAAA;~~AACxC~~,IAAA,MAAMC,QAAAA,GAAWC,uBAAAA,EAAAA;AAEjB,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,cAAAA,~~CAASP~~,WAAAA,CAAAA;IACnC,~~MAAMQ~~,cAAAA,GAAiBC,wBAAYJ,KAAAA,~~EAAOT~~,WAAAA,CAAAA;;;;AAK1C,IAAA,~~MAAMc~~,mBAAmBC,YAAAA,~~CAAOX~~,WAAAA,CAAAA;;;AAIhC,IAAA,MAAM,CAAC,~~EAAEY~~,KAAK,EAAE,CAAC,GAAGC,0BAAAA,EAAAA;IACpB,MAAMC,WAAAA,GAAcF,OAAOG,MAAAA,IAAU,EAAA;AACrC,IAAA,MAAMC,gBAAgBL,YAAAA,CAAOG,WAAAA,CAAAA;;IAG7BG,eAAAA,CAAU,IAAA;QACR,IAAIT,cAAAA,KAAmBE,gBAAAA,CAAiBQ,OAAO,EAAE;AAC/C,YAAA;AACF,QAAA;AAEAR,QAAAA,gBAAAA,CAAiBQ,OAAO,GAAGV,cAAAA;~~QAC3BP~~,cAAAA,~~CAAeO~~,cAAAA,CAAAA;IACjB,CAAA,EAAG;AAACA,QAAAA,cAAAA;~~AAAgBP~~,QAAAA;~~AAAe~~,KAAA,CAAA;;;~~IAInCgB~~,eAAAA,CAAU,IAAA;QACR,~~IAAIjB~~,WAAAA,~~KAAgBU~~,gBAAAA,CAAiBQ,OAAO,EAAE;AAC5C,YAAA;AACF,QAAA;AAEAR,QAAAA,gBAAAA,CAAiBQ,OAAO,~~GAAGlB~~,WAAAA;~~QAC3BM~~,QAAAA,~~CAASN~~,WAAAA,CAAAA;IACX,CAAA,EAAG;AAACA,QAAAA;AAAY,KAAA,CAAA;;;;~~IAKhBiB~~,eAAAA,CAAU,IAAA;QACR,IAAIH,WAAAA,KAAgBE,aAAAA,CAAcE,OAAO,EAAE;AACzC,YAAA;AACF,QAAA;AAEAF,QAAAA,aAAAA,CAAcE,OAAO,GAAGJ,WAAAA;AACxBJ,QAAAA,gBAAAA,CAAiBQ,OAAO,~~GAAGlB~~,WAAAA;~~QAC3BM~~,QAAAA,~~CAASN~~,WAAAA,CAAAA;IACX,CAAA,EAAG;~~AAACc~~,QAAAA,WAAAA;~~AAAad~~,QAAAA;AAAY,KAAA,CAAA;AAE7B,IAAA,~~MAAMmB~~,2BACJC,cAAA,~~CAACC~~,~~uBAAAA~~,EAAAA;~~QAAWC~~,QAAAA,EAAU,CAACC,KAAAA,GAAsCA,KAAAA,CAAMC,cAAc,EAAA;~~AAC/E~~,QAAA,QAAA,~~gBAAAJ~~,cAAA,~~CAACK~~,sBAAAA,EAAAA;YACCC,IAAAA,EAAK,eAAA;~~YACLrB~~,KAAAA,EAAOA,KAAAA;~~AACPsB~~,YAAAA,QAAAA,EAAU,CAACJ,KAAAA,~~GAAyCjB~~,QAAAA,~~CAASiB~~,KAAAA,CAAMK,MAAM,~~CAACvB~~,KAAK,CAAA;AAC/~~EwB~~,YAAAA,OAAAA,EAAS,~~IAAMvB~~,QAAAA,CAAS,EAAA,CAAA;~~AACxBwB~~,YAAAA,UAAAA,~~EAAYhC~~,aAAAA,CAAc;~~gBAAEiC~~,EAAAA,EAAI,YAAA;gBAAcC,cAAAA,EAAgB;AAAQ,aAAA,CAAA;AACtEC,YAAAA,WAAAA,~~EAAanC~~,aAAAA,CAAc;~~AACzBiC~~,gBAAAA,EAAAA,EAAIG,8BAAAA,CAAkB,2BAAA,CAAA;gBACtBF,cAAAA,EAAgB;AAClB,aAAA,CAAA;YACAG,IAAAA,EAAK,GAAA;~~sBAEJrC~~,aAAAA,CAAc;~~AACbiC~~,gBAAAA,EAAAA,EAAIG,8BAAAA,CAAkB,cAAA,CAAA;gBACtBF,cAAAA,EAAgB;AAClB,aAAA;;;;;AAON,IAAA,~~IAAI7B~~,QAAAA,EAAU;AACZ,QAAA,~~qBAAOiB~~,cAAA,~~CAACgB~~,gBAAAA,EAAAA;YAAIC,KAAAA,EAAM,MAAA;~~AAAQlB~~,YAAAA,QAAAA,EAAAA;;AAC5B,IAAA;IAEA,OAAOA,UAAAA;AACT;;;;"}
1	+ {"version":3,"file":"AssetsSearchInput.js","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/AssetsSearchInput.mjs CHANGED Viewed

@@ -1,18 +1,32 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { useIsMobile, useDebounce, useQueryParams } from '@strapi/admin/strapi-admin';
-import { SearchForm, Searchbar, Box } from '@strapi/design-system';
+import { Searchbar, Box, SearchForm } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking.mjs';
 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 { trackUsage } = useTracking();
     const isMobile = useIsMobile();
     const [value, setValue] = useState(searchQuery);
     const debouncedValue = useDebounce(value, DEBOUNCE_MS);
@@ -31,10 +45,18 @@ const DEBOUNCE_MS = 300;
             return;
         }
         lastCommittedRef.current = debouncedValue;
+        // Only a real query counts as a search — clearing the box (empty value) is
+        // a reset, not a `didSearch`.
+        if (debouncedValue) {
+            trackUsage('didSearchMediaLibraryElements', {
+                location: MEDIA_LIBRARY_LOCATION
+            });
+        }
         setSearchQuery(debouncedValue);
     }, [
         debouncedValue,
-        setSearchQuery
+        setSearchQuery,
+        trackUsage
     ]);
     // Re-sync on external changes — back/forward, or "Clear search" in the empty
     // state.
@@ -61,7 +83,7 @@ const DEBOUNCE_MS = 300;
         folderParam,
         searchQuery
     ]);
-    const searchForm = /*#__PURE__*/ jsx(SearchForm, {
+    const searchForm = /*#__PURE__*/ jsx(StyledSearchForm, {
         onSubmit: (event)=>event.preventDefault(),
         children: /*#__PURE__*/ jsx(Searchbar, {
             name: "search-assets",
@@ -83,8 +105,8 @@ const DEBOUNCE_MS = 300;
             })
         })
     });
-    // TODO: (design question)The input stays visible at every breakpoint; on mobile it takes the full
-    // width of the toolbar instead of its intrinsic size.
+    // 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%",