@strapi/upload 5.51.0 → 5.51.2

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

@@ -1,25 +1,40 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Grid, Box, IconButton, CardBody, Flex, Typography, Card, CardHeader } from '@strapi/design-system';
+import { Grid, Box, Flex, Checkbox, IconButton, CardBody, Typography, Card, CardHeader } from '@strapi/design-system';
 import { Folder, More } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled, css } from 'styled-components';
 import { ASSET_TYPES } from '../../../../enums.mjs';
+import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions.mjs';
 import { prefixFileUrlWithBackendUrl } from '../../../utils/files.mjs';
 import { getAssetIcon } from '../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../utils/translations.mjs';
+import { useAssetSelection } from '../hooks/useAssetSelection.mjs';
 import { useFolderNavigation } from '../hooks/useFolderNavigation.mjs';
+import { folderKey, assetKey } from '../utils/selection.mjs';
 import { useAssetsDndOptional } from './Dnd/AssetsDndProvider.mjs';
 import { useFolderDraggableDroppable, useFileDraggable } from './Dnd/useAssetDnd.mjs';
 
 /* -------------------------------------------------------------------------------------------------
  * AssetsGrid
- * -----------------------------------------------------------------------------------------------*/ const StyledCard = styled(Card)`
-  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+ * -----------------------------------------------------------------------------------------------*/ // Top-left selection checkbox overlaid on the asset preview, always visible.
+const CheckboxOverlay = styled(Flex)`
+  position: absolute;
+  top: ${({ theme })=>theme.spaces[3]};
+  left: ${({ theme })=>theme.spaces[3]};
+  z-index: 1;
+  box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+`;
+const StyledCard = styled(Card)`
+  border: 1px solid
+    ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary600 : theme.colors.neutral200};
   border-radius: 8px;
   overflow: hidden;
   cursor: ${({ $isMovePending })=>$isMovePending ? 'wait' : 'pointer'};
   opacity: ${({ $isDragging })=>$isDragging ? 0.4 : 1};
   pointer-events: ${({ $isMovePending })=>$isMovePending ? 'none' : 'auto'};
+  background: ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary100 : undefined};
+  /* Shift+click range selection must not highlight card text. */
+  user-select: none;
 
   &:hover {
     background: ${({ theme })=>theme.colors.primary100};
@@ -37,12 +52,14 @@ import { useFolderDraggableDroppable, useFileDraggable } from './Dnd/useAssetDnd
 `;
 const StyledFolderCard = styled(Flex)`
   width: 100%;
+  user-select: none;
   padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[3]}`}; // 8px 12px
   align-items: center;
   gap: ${({ theme })=>theme.spaces[2]}; // 8px
-  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border: 1px solid
+    ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary600 : theme.colors.neutral200};
   border-radius: ${({ theme })=>theme.borderRadius};
-  background: ${({ theme })=>theme.colors.neutral0};
+  background: ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary100 : theme.colors.neutral0};
   cursor: ${({ $isMovePending, $isInvalidDropTarget })=>{
     if ($isMovePending) {
         return 'wait';
@@ -75,21 +92,48 @@ const FolderName = styled(Typography)`
   flex: 1;
   min-width: 0;
 `;
-const FolderCard = ({ folder })=>{
+const FolderCard = ({ folder, orderedItemKeys })=>{
     const { formatMessage } = useIntl();
     const { navigateToFolder } = useFolderNavigation();
     const { isMovePending } = useAssetsDndOptional() ?? {
         isMovePending: false
     };
+    const { isSelected, toggle, selectRange } = useAssetSelection();
+    const { canUpdate } = useMediaLibraryPermissions();
     const { draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging }, droppable: { setNodeRef: setDropRef }, showValidDropHighlight, showInvalidDropCursor } = useFolderDraggableDroppable(folder);
+    const key = folderKey(folder.id);
     const setNodeRef = (node)=>{
         setDragRef(node);
         setDropRef(node);
     };
+    // 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.
+    const handleClick = (e)=>{
+        if (e.shiftKey) {
+            selectRange(orderedItemKeys, key);
+        } else if (e.metaKey || e.ctrlKey) {
+            toggle(key);
+        } else {
+            navigateToFolder(folder);
+        }
+    };
     const handleKeyDown = (e)=>{
-        if (e.key === 'Enter' || e.key === ' ') {
+        if (e.key === 'Enter') {
             e.preventDefault();
             navigateToFolder(folder);
+        } else if (e.key === ' ') {
+            e.preventDefault();
+            toggle(key);
+        }
+    };
+    // Checkbox is the pointer path to selection; Shift extends the range.
+    const handleCheckboxClick = (e)=>{
+        e.stopPropagation();
+        if (e.shiftKey) {
+            selectRange(orderedItemKeys, key);
+        } else {
+            toggle(key);
         }
     };
     return /*#__PURE__*/ jsxs(StyledFolderCard, {
@@ -100,11 +144,25 @@ const FolderCard = ({ folder })=>{
         $isMovePending: isMovePending,
         $isValidDropTarget: showValidDropHighlight,
         $isInvalidDropTarget: showInvalidDropCursor,
-        onClick: ()=>navigateToFolder(folder),
+        $isSelected: isSelected(key),
+        onClick: handleClick,
         onKeyDown: handleKeyDown,
         role: "listitem",
         tabIndex: 0,
         children: [
+            canUpdate && /*#__PURE__*/ jsx(Flex, {
+                onKeyDown: (e)=>e.stopPropagation(),
+                children: /*#__PURE__*/ jsx(Checkbox, {
+                    checked: isSelected(key),
+                    onClick: handleCheckboxClick,
+                    "aria-label": formatMessage({
+                        id: getTranslationKey('list.table.row.select'),
+                        defaultMessage: 'Select {name}'
+                    }, {
+                        name: folder.name
+                    })
+                })
+            }),
             /*#__PURE__*/ jsx(FolderIconContainer, {
                 children: /*#__PURE__*/ jsx(Folder, {
                     width: 20,
@@ -193,6 +251,7 @@ const AssetPreview = ({ asset })=>{
 /* -------------------------------------------------------------------------------------------------
  * AssetCard
  * -----------------------------------------------------------------------------------------------*/ const StyledCardHeader = styled(CardHeader)`
+  position: relative;
   border-bottom: 1px solid ${({ theme })=>theme.colors.neutral200};
 `;
 const CardFooter = styled(Flex)`
@@ -207,17 +266,72 @@ const FileName = styled(Typography)`
   flex: 1;
   min-width: 0;
 `;
-const AssetCard = ({ asset, onAssetItemClick })=>{
+// The asset filename is its own interactive element: clicking it opens the
+// details drawer instead of selecting the card (mirrors the table view).
+const NameButton = styled.button`
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+`;
+const AssetCard = ({ asset, orderedItemKeys, onAssetItemClick })=>{
     const { formatMessage } = useIntl();
     const TypeIcon = getAssetIcon(asset.mime, asset.ext);
     const { isMovePending } = useAssetsDndOptional() ?? {
         isMovePending: false
     };
     const { attributes, listeners, setNodeRef, isDragging } = useFileDraggable(asset);
+    const { isSelected, toggle, selectRange } = useAssetSelection();
+    const { canUpdate } = useMediaLibraryPermissions();
+    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.
+    const handleCardClick = (e)=>{
+        if (e.shiftKey) {
+            selectRange(orderedItemKeys, key);
+        } else if (e.metaKey || e.ctrlKey) {
+            toggle(key);
+        } else {
+            onAssetItemClick(asset.id);
+        }
+    };
+    // Space toggles selection (additive), Enter opens the details drawer.
     const handleKeyDown = (e)=>{
-        if (e.key === 'Enter' || e.key === ' ') {
+        if (e.key === 'Enter') {
             e.preventDefault();
             onAssetItemClick(asset.id);
+        } else if (e.key === ' ') {
+            e.preventDefault();
+            toggle(key);
+        }
+    };
+    const handleNameClick = (e)=>{
+        e.stopPropagation();
+        onAssetItemClick(asset.id);
+    };
+    // Same semantics as the table's row checkbox: Shift extends the range,
+    // otherwise a plain additive toggle. Never bubbles into the card click.
+    const handleCheckboxClick = (e)=>{
+        e.stopPropagation();
+        if (e.shiftKey) {
+            selectRange(orderedItemKeys, key);
+        } else {
+            toggle(key);
         }
     };
     return /*#__PURE__*/ jsxs(StyledCard, {
@@ -226,16 +340,32 @@ const AssetCard = ({ asset, onAssetItemClick })=>{
         ...listeners,
         $isDragging: isDragging,
         $isMovePending: isMovePending,
+        $isSelected: selected,
         tabIndex: 0,
         role: "listitem",
         onDragStart: (e)=>e.preventDefault(),
-        onClick: ()=>onAssetItemClick(asset.id),
+        onClick: handleCardClick,
         onKeyDown: handleKeyDown,
         children: [
-            /*#__PURE__*/ jsx(StyledCardHeader, {
-                children: /*#__PURE__*/ jsx(AssetPreview, {
-                    asset: asset
-                })
+            /*#__PURE__*/ jsxs(StyledCardHeader, {
+                children: [
+                    canUpdate && /*#__PURE__*/ jsx(CheckboxOverlay, {
+                        onKeyDown: (e)=>e.stopPropagation(),
+                        children: /*#__PURE__*/ jsx(Checkbox, {
+                            checked: selected,
+                            onClick: handleCheckboxClick,
+                            "aria-label": formatMessage({
+                                id: getTranslationKey('list.table.row.select'),
+                                defaultMessage: 'Select {name}'
+                            }, {
+                                name: asset.name
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(AssetPreview, {
+                        asset: asset
+                    })
+                ]
             }),
             /*#__PURE__*/ jsx(CardBody, {
                 children: /*#__PURE__*/ jsxs(CardFooter, {
@@ -248,10 +378,14 @@ const AssetCard = ({ asset, onAssetItemClick })=>{
                                 height: 20
                             })
                         }),
-                        /*#__PURE__*/ jsx(FileName, {
-                            textColor: "primary800",
-                            ellipsis: true,
-                            children: asset.name
+                        /*#__PURE__*/ jsx(NameButton, {
+                            type: "button",
+                            onClick: handleNameClick,
+                            children: /*#__PURE__*/ jsx(FileName, {
+                                textColor: "primary800",
+                                ellipsis: true,
+                                children: asset.name
+                            })
                         }),
                         /*#__PURE__*/ jsx(IconButton, {
                             label: formatMessage({
@@ -270,6 +404,12 @@ const AssetCard = ({ asset, onAssetItemClick })=>{
 };
 const AssetsGrid = ({ assets, folders = [], onAssetItemClick })=>{
     const totalItems = folders.length + assets.length;
+    // Render order: folders always on top in the grid (mixing is table-only) —
+    // range selection follows it.
+    const orderedItemKeys = [
+        ...folders.map((folder)=>folderKey(folder.id)),
+        ...assets.map((asset)=>assetKey(asset.id))
+    ];
     // The empty state is owned by the page (`AssetsView` renders `EmptyState`) — an
     // empty grid renders nothing at all.
     if (totalItems === 0) {
@@ -289,7 +429,8 @@ const AssetsGrid = ({ assets, folders = [], onAssetItemClick })=>{
                             s: 6,
                             xs: 12,
                             children: /*#__PURE__*/ jsx(FolderCard, {
-                                folder: folder
+                                folder: folder,
+                                orderedItemKeys: orderedItemKeys
                             })
                         }, `folder-${folder.id}`))
                 })
@@ -303,6 +444,7 @@ const AssetsGrid = ({ assets, folders = [], onAssetItemClick })=>{
                     alignItems: "stretch",
                     children: /*#__PURE__*/ jsx(AssetCard, {
                         asset: asset,
+                        orderedItemKeys: orderedItemKeys,
                         onAssetItemClick: onAssetItemClick
                     })
                 }, asset.id))

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

@@ -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  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 { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\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\nconst StyledCard = styled(Card)<{ $isDragging?: boolean; $isMovePending?: boolean }>`\n  border: 1px solid ${({ theme }) => 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\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}>`\n  width: 100%;\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 ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => 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}\n\nconst FolderCard = ({ folder }: FolderCardProps) => {\n  const { formatMessage } = useIntl();\n  const { navigateToFolder } = useFolderNavigation();\n  const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n  const {\n    draggable: { attributes, listeners, setNodeRef: setDragRef, isDragging },\n    droppable: { setNodeRef: setDropRef },\n    showValidDropHighlight,\n    showInvalidDropCursor,\n  } = useFolderDraggableDroppable(folder);\n\n  const setNodeRef = (node: HTMLElement | null) => {\n    setDragRef(node);\n    setDropRef(node);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      navigateToFolder(folder);\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      onClick={() => navigateToFolder(folder)}\n      onKeyDown={handleKeyDown}\n      role=\"listitem\"\n      tabIndex={0}\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  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\ninterface AssetCardProps {\n  asset: File;\n  onAssetItemClick: (assetId: number) => void;\n}\n\nconst AssetCard = ({ asset, 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\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      onAssetItemClick(asset.id);\n    }\n  };\n\n  return (\n    <StyledCard\n      ref={setNodeRef}\n      {...attributes}\n      {...listeners}\n      $isDragging={isDragging}\n      $isMovePending={isMovePending}\n      tabIndex={0}\n      role=\"listitem\"\n      onDragStart={(e) => e.preventDefault()}\n      onClick={() => onAssetItemClick(asset.id)}\n      onKeyDown={handleKeyDown}\n    >\n      <StyledCardHeader>\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          <FileName textColor=\"primary800\" ellipsis>\n            {asset.name}\n          </FileName>\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  // 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} />\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 asset={asset} onAssetItemClick={onAssetItemClick} />\n        </Grid.Item>\n      ))}\n    </Grid.Root>\n  );\n};\n"],"names":["StyledCard","styled","Card","theme","colors","neutral200","$isMovePending","$isDragging","primary100","primary600","FoldersRow","Box","StyledFolderCard","Flex","spaces","borderRadius","neutral0","$isInvalidDropTarget","$isValidDropTarget","css","FolderIconContainer","neutral600","FolderName","Typography","FolderCard","folder","formatMessage","useIntl","navigateToFolder","useFolderNavigation","isMovePending","useAssetsDndOptional","draggable","attributes","listeners","setNodeRef","setDragRef","isDragging","droppable","setDropRef","showValidDropHighlight","showInvalidDropCursor","useFolderDraggableDroppable","node","handleKeyDown","e","key","preventDefault","_jsxs","ref","onClick","onKeyDown","role","tabIndex","_jsx","FolderIcon","width","height","textColor","ellipsis","name","IconButton","label","id","getTranslationKey","defaultMessage","variant","stopPropagation","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","undefined","onDragStart","DocIcon","getAssetIcon","justifyContent","alignItems","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","FileName","AssetCard","onAssetItemClick","TypeIcon","useFileDraggable","CardBody","gap","AssetsGrid","assets","folders","totalItems","length","Grid","Root","data-testid","map","Item","col","m","s","xs","direction"],"mappings":"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"}
+{"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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"}

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

@@ -0,0 +1,100 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var translations = require('../../../utils/translations.js');
+var useAssetSearch = require('../hooks/useAssetSearch.js');
+
+const DEBOUNCE_MS = 300;
+/**
+ * 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 isMobile = strapiAdmin.useIsMobile();
+    const [value, setValue] = React.useState(searchQuery);
+    const debouncedValue = strapiAdmin.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 = React.useRef(searchQuery);
+    // Read directly rather than through `useFolderNavigation`, which strips
+    // malformed `?folder=` values as a side effect.
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const folderParam = query?.folder ?? '';
+    const lastFolderRef = React.useRef(folderParam);
+    // Commit settled input to the URL.
+    React.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.
+    React.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.
+    React.useEffect(()=>{
+        if (folderParam === lastFolderRef.current) {
+            return;
+        }
+        lastFolderRef.current = folderParam;
+        lastCommittedRef.current = searchQuery;
+        setValue(searchQuery);
+    }, [
+        folderParam,
+        searchQuery
+    ]);
+    const searchForm = /*#__PURE__*/ jsxRuntime.jsx(designSystem.SearchForm, {
+        onSubmit: (event)=>event.preventDefault(),
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
+            name: "search-assets",
+            value: value,
+            onChange: (event)=>setValue(event.target.value),
+            onClear: ()=>setValue(''),
+            clearLabel: formatMessage({
+                id: 'clearLabel',
+                defaultMessage: 'Clear'
+            }),
+            placeholder: formatMessage({
+                id: translations.getTranslationKey('header.search.placeholder'),
+                defaultMessage: 'Search'
+            }),
+            size: "S",
+            children: formatMessage({
+                id: translations.getTranslationKey('search.label'),
+                defaultMessage: 'Search for an asset'
+            })
+        })
+    });
+    // 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.
+    if (isMobile) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            width: "100%",
+            children: searchForm
+        });
+    }
+    return searchForm;
+};
+
+exports.AssetsSearchInput = AssetsSearchInput;
+//# sourceMappingURL=AssetsSearchInput.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,98 @@
+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 { useIntl } from 'react-intl';
+import { getTranslationKey } from '../../../utils/translations.mjs';
+import { useAssetSearch } from '../hooks/useAssetSearch.mjs';
+
+const DEBOUNCE_MS = 300;
+/**
+ * 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(SearchForm, {
+        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'
+            })
+        })
+    });
+    // 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.
+    if (isMobile) {
+        return /*#__PURE__*/ jsx(Box, {
+            width: "100%",
+            children: searchForm
+        });
+    }
+    return searchForm;
+};
+
+export { AssetsSearchInput };
+//# sourceMappingURL=AssetsSearchInput.mjs.map