@strapi/upload 5.37.1 → 5.38.0

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/AssetDetails/AssetPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Loader, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/files';\nimport { getAssetIcon } from '../../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type {\n  File,\n  AssetWithPopulatedCreatedBy,\n} from '../../../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewContainer = styled(Box)`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  max-height: 24rem;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding: ${({ theme }) => theme.spaces[3]};\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n`;\n\nconst AssetContainer = styled(Flex)`\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n`;\n\nconst StyledImage = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledVideo = styled.video`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledAudio = styled.audio`\n  width: 100%;\n`;\n\nconst StyledPdfIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  border: none;\n`;\n\nconst IconFallback = styled(Flex)`\n  height: 100%;\n  aspect-ratio: 1;\n  width: auto;\n  max-width: 100%;\n  margin: 0 auto;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst LoaderOverlay = styled(Flex)`\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AssetLoader\n * -----------------------------------------------------------------------------------------------*/\n\nconst AssetLoader = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <LoaderOverlay justifyContent=\"center\" alignItems=\"center\">\n      <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n    </LoaderOverlay>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetPreviewContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetPreviewProps {\n  asset: File | AssetWithPopulatedCreatedBy;\n}\n\nexport const AssetPreview = ({ asset }: AssetPreviewProps) => {\n  const { formatMessage } = useIntl();\n  const { alternativeText, ext, mime, url } = asset;\n  const mediaUrl = prefixFileUrlWithBackendUrl(url);\n\n  const [isMediaLoaded, setIsMediaLoaded] = React.useState(false);\n  React.useEffect(() => {\n    setIsMediaLoaded(false);\n  }, [mediaUrl]);\n\n  if (mime?.includes(AssetType.Image)) {\n    const imageUrl = prefixFileUrlWithBackendUrl(url);\n\n    if (imageUrl) {\n      return (\n        <PreviewContainer>\n          {!isMediaLoaded && <AssetLoader />}\n          <AssetContainer>\n            <StyledImage\n              src={imageUrl}\n              alt={alternativeText || asset.name || ''}\n              onLoad={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </AssetContainer>\n        </PreviewContainer>\n      );\n    }\n  }\n\n  if (mime?.includes(AssetType.Video) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledVideo\n            src={mediaUrl}\n            controls\n            title={asset.name}\n            onLoadedData={() => setIsMediaLoaded(true)}\n            onError={() => setIsMediaLoaded(true)}\n          >\n            {formatMessage({\n              id: getTranslationKey('asset-details.videoNotSupported'),\n              defaultMessage: 'Your browser does not support the video tag.',\n            })}\n          </StyledVideo>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  if (mime?.includes(AssetType.Audio) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <Flex\n            width=\"100%\"\n            padding={4}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            height=\"100%\"\n            minHeight=\"12rem\"\n          >\n            <StyledAudio\n              src={mediaUrl}\n              controls\n              onLoadedData={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </Flex>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const isPdf =\n    ext?.toLowerCase() === 'pdf' || ext?.toLowerCase() === '.pdf' || mime === 'application/pdf';\n  if (isPdf && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledPdfIframe\n            src={`${mediaUrl}#toolbar=0`}\n            title={asset.name}\n            onLoad={() => setIsMediaLoaded(true)}\n          />\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n  return (\n    <PreviewContainer>\n      <IconFallback\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap={1}\n        direction=\"column\"\n        hasRadius\n      >\n        <DocIcon width={24} height={24} />\n        <Typography variant=\"pi\">\n          {formatMessage({\n            id: getTranslationKey('asset-details.noPreview'),\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </IconFallback>\n    </PreviewContainer>\n  );\n};\n"],"names":["PreviewContainer","styled","Box","theme","borderRadius","spaces","colors","neutral100","AssetContainer","Flex","StyledImage","img","StyledVideo","video","StyledAudio","audio","StyledPdfIframe","iframe","IconFallback","neutral500","neutral150","LoaderOverlay","AssetLoader","formatMessage","useIntl","_jsx","justifyContent","alignItems","Loader","id","defaultMessage","AssetPreview","asset","alternativeText","ext","mime","url","mediaUrl","prefixFileUrlWithBackendUrl","isMediaLoaded","setIsMediaLoaded","React","useState","useEffect","includes","AssetType","Image","imageUrl","_jsxs","src","alt","name","onLoad","onError","Video","controls","title","onLoadedData","getTranslationKey","Audio","width","padding","height","minHeight","isPdf","toLowerCase","DocIcon","getAssetIcon","gap","direction","hasRadius","Typography","variant"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetPreview.mjs

@@ -0,0 +1,194 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, Typography, Box, Loader } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { AssetType } from '../../../../enums.mjs';
+import { prefixFileUrlWithBackendUrl } from '../../../../utils/files.mjs';
+import { getAssetIcon } from '../../../../utils/getAssetIcon.mjs';
+import { getTranslationKey } from '../../../../utils/translations.mjs';
+
+/* -------------------------------------------------------------------------------------------------
+ * Styled components
+ * -----------------------------------------------------------------------------------------------*/ const PreviewContainer = styled(Box)`
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  max-height: 24rem;
+  overflow: hidden;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  padding: ${({ theme })=>theme.spaces[3]};
+  background: repeating-conic-gradient(
+      ${({ theme })=>theme.colors.neutral100} 0% 25%,
+      transparent 0% 50%
+    )
+    50% / 20px 20px;
+`;
+const AssetContainer = styled(Flex)`
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+`;
+const StyledImage = styled.img`
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+`;
+const StyledVideo = styled.video`
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+`;
+const StyledAudio = styled.audio`
+  width: 100%;
+`;
+const StyledPdfIframe = styled.iframe`
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  border: none;
+`;
+const IconFallback = styled(Flex)`
+  height: 100%;
+  aspect-ratio: 1;
+  width: auto;
+  max-width: 100%;
+  margin: 0 auto;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral150};
+`;
+const LoaderOverlay = styled(Flex)`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+`;
+/* -------------------------------------------------------------------------------------------------
+ * AssetLoader
+ * -----------------------------------------------------------------------------------------------*/ const AssetLoader = ()=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(LoaderOverlay, {
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsx(Loader, {
+            children: formatMessage({
+                id: 'app.loading',
+                defaultMessage: 'Loading...'
+            })
+        })
+    });
+};
+const AssetPreview = ({ asset })=>{
+    const { formatMessage } = useIntl();
+    const { alternativeText, ext, mime, url } = asset;
+    const mediaUrl = prefixFileUrlWithBackendUrl(url);
+    const [isMediaLoaded, setIsMediaLoaded] = React.useState(false);
+    React.useEffect(()=>{
+        setIsMediaLoaded(false);
+    }, [
+        mediaUrl
+    ]);
+    if (mime?.includes(AssetType.Image)) {
+        const imageUrl = prefixFileUrlWithBackendUrl(url);
+        if (imageUrl) {
+            return /*#__PURE__*/ jsxs(PreviewContainer, {
+                children: [
+                    !isMediaLoaded && /*#__PURE__*/ jsx(AssetLoader, {}),
+                    /*#__PURE__*/ jsx(AssetContainer, {
+                        children: /*#__PURE__*/ jsx(StyledImage, {
+                            src: imageUrl,
+                            alt: alternativeText || asset.name || '',
+                            onLoad: ()=>setIsMediaLoaded(true),
+                            onError: ()=>setIsMediaLoaded(true)
+                        })
+                    })
+                ]
+            });
+        }
+    }
+    if (mime?.includes(AssetType.Video) && mediaUrl) {
+        return /*#__PURE__*/ jsxs(PreviewContainer, {
+            children: [
+                !isMediaLoaded && /*#__PURE__*/ jsx(AssetLoader, {}),
+                /*#__PURE__*/ jsx(AssetContainer, {
+                    children: /*#__PURE__*/ jsx(StyledVideo, {
+                        src: mediaUrl,
+                        controls: true,
+                        title: asset.name,
+                        onLoadedData: ()=>setIsMediaLoaded(true),
+                        onError: ()=>setIsMediaLoaded(true),
+                        children: formatMessage({
+                            id: getTranslationKey('asset-details.videoNotSupported'),
+                            defaultMessage: 'Your browser does not support the video tag.'
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    if (mime?.includes(AssetType.Audio) && mediaUrl) {
+        return /*#__PURE__*/ jsxs(PreviewContainer, {
+            children: [
+                !isMediaLoaded && /*#__PURE__*/ jsx(AssetLoader, {}),
+                /*#__PURE__*/ jsx(AssetContainer, {
+                    children: /*#__PURE__*/ jsx(Flex, {
+                        width: "100%",
+                        padding: 4,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        height: "100%",
+                        minHeight: "12rem",
+                        children: /*#__PURE__*/ jsx(StyledAudio, {
+                            src: mediaUrl,
+                            controls: true,
+                            onLoadedData: ()=>setIsMediaLoaded(true),
+                            onError: ()=>setIsMediaLoaded(true)
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    const isPdf = ext?.toLowerCase() === 'pdf' || ext?.toLowerCase() === '.pdf' || mime === 'application/pdf';
+    if (isPdf && mediaUrl) {
+        return /*#__PURE__*/ jsxs(PreviewContainer, {
+            children: [
+                !isMediaLoaded && /*#__PURE__*/ jsx(AssetLoader, {}),
+                /*#__PURE__*/ jsx(AssetContainer, {
+                    children: /*#__PURE__*/ jsx(StyledPdfIframe, {
+                        src: `${mediaUrl}#toolbar=0`,
+                        title: asset.name,
+                        onLoad: ()=>setIsMediaLoaded(true)
+                    })
+                })
+            ]
+        });
+    }
+    const DocIcon = getAssetIcon(mime, ext);
+    return /*#__PURE__*/ jsx(PreviewContainer, {
+        children: /*#__PURE__*/ jsxs(IconFallback, {
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 1,
+            direction: "column",
+            hasRadius: true,
+            children: [
+                /*#__PURE__*/ jsx(DocIcon, {
+                    width: 24,
+                    height: 24
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    variant: "pi",
+                    children: formatMessage({
+                        id: getTranslationKey('asset-details.noPreview'),
+                        defaultMessage: 'No preview available'
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { AssetPreview };
+//# sourceMappingURL=AssetPreview.mjs.map

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/AssetDetails/AssetPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Loader, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/files';\nimport { getAssetIcon } from '../../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type {\n  File,\n  AssetWithPopulatedCreatedBy,\n} from '../../../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewContainer = styled(Box)`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  max-height: 24rem;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding: ${({ theme }) => theme.spaces[3]};\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n`;\n\nconst AssetContainer = styled(Flex)`\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n`;\n\nconst StyledImage = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledVideo = styled.video`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledAudio = styled.audio`\n  width: 100%;\n`;\n\nconst StyledPdfIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  border: none;\n`;\n\nconst IconFallback = styled(Flex)`\n  height: 100%;\n  aspect-ratio: 1;\n  width: auto;\n  max-width: 100%;\n  margin: 0 auto;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst LoaderOverlay = styled(Flex)`\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AssetLoader\n * -----------------------------------------------------------------------------------------------*/\n\nconst AssetLoader = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <LoaderOverlay justifyContent=\"center\" alignItems=\"center\">\n      <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n    </LoaderOverlay>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetPreviewContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetPreviewProps {\n  asset: File | AssetWithPopulatedCreatedBy;\n}\n\nexport const AssetPreview = ({ asset }: AssetPreviewProps) => {\n  const { formatMessage } = useIntl();\n  const { alternativeText, ext, mime, url } = asset;\n  const mediaUrl = prefixFileUrlWithBackendUrl(url);\n\n  const [isMediaLoaded, setIsMediaLoaded] = React.useState(false);\n  React.useEffect(() => {\n    setIsMediaLoaded(false);\n  }, [mediaUrl]);\n\n  if (mime?.includes(AssetType.Image)) {\n    const imageUrl = prefixFileUrlWithBackendUrl(url);\n\n    if (imageUrl) {\n      return (\n        <PreviewContainer>\n          {!isMediaLoaded && <AssetLoader />}\n          <AssetContainer>\n            <StyledImage\n              src={imageUrl}\n              alt={alternativeText || asset.name || ''}\n              onLoad={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </AssetContainer>\n        </PreviewContainer>\n      );\n    }\n  }\n\n  if (mime?.includes(AssetType.Video) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledVideo\n            src={mediaUrl}\n            controls\n            title={asset.name}\n            onLoadedData={() => setIsMediaLoaded(true)}\n            onError={() => setIsMediaLoaded(true)}\n          >\n            {formatMessage({\n              id: getTranslationKey('asset-details.videoNotSupported'),\n              defaultMessage: 'Your browser does not support the video tag.',\n            })}\n          </StyledVideo>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  if (mime?.includes(AssetType.Audio) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <Flex\n            width=\"100%\"\n            padding={4}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            height=\"100%\"\n            minHeight=\"12rem\"\n          >\n            <StyledAudio\n              src={mediaUrl}\n              controls\n              onLoadedData={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </Flex>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const isPdf =\n    ext?.toLowerCase() === 'pdf' || ext?.toLowerCase() === '.pdf' || mime === 'application/pdf';\n  if (isPdf && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledPdfIframe\n            src={`${mediaUrl}#toolbar=0`}\n            title={asset.name}\n            onLoad={() => setIsMediaLoaded(true)}\n          />\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n  return (\n    <PreviewContainer>\n      <IconFallback\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap={1}\n        direction=\"column\"\n        hasRadius\n      >\n        <DocIcon width={24} height={24} />\n        <Typography variant=\"pi\">\n          {formatMessage({\n            id: getTranslationKey('asset-details.noPreview'),\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </IconFallback>\n    </PreviewContainer>\n  );\n};\n"],"names":["PreviewContainer","styled","Box","theme","borderRadius","spaces","colors","neutral100","AssetContainer","Flex","StyledImage","img","StyledVideo","video","StyledAudio","audio","StyledPdfIframe","iframe","IconFallback","neutral500","neutral150","LoaderOverlay","AssetLoader","formatMessage","useIntl","_jsx","justifyContent","alignItems","Loader","id","defaultMessage","AssetPreview","asset","alternativeText","ext","mime","url","mediaUrl","prefixFileUrlWithBackendUrl","isMediaLoaded","setIsMediaLoaded","React","useState","useEffect","includes","AssetType","Image","imageUrl","_jsxs","src","alt","name","onLoad","onError","Video","controls","title","onLoadedData","getTranslationKey","Audio","width","padding","height","minHeight","isPdf","toLowerCase","DocIcon","getAssetIcon","gap","direction","hasRadius","Typography","variant"],"mappings":"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"}

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

@@ -17,6 +17,16 @@ var useFolderNavigation = require('../hooks/useFolderNavigation.js');
   border: 1px solid ${({ theme })=>theme.colors.neutral200};
   border-radius: 8px;
   overflow: hidden;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: 2px;
+  }
 `;
 /* -------------------------------------------------------------------------------------------------
  * FolderCard
@@ -54,9 +64,16 @@ const FolderName = styledComponents.styled(designSystem.Typography)`
 const FolderCard = ({ folder })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { navigateToFolder } = useFolderNavigation.useFolderNavigation();
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            navigateToFolder(folder);
+        }
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(StyledFolderCard, {
         onClick: ()=>navigateToFolder(folder),
-        role: "button",
+        onKeyDown: handleKeyDown,
+        role: "listitem",
         tabIndex: 0,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(FolderIconContainer, {
@@ -141,10 +158,11 @@ const AssetPreview = ({ asset })=>{
 /* -------------------------------------------------------------------------------------------------
  * AssetCard
  * -----------------------------------------------------------------------------------------------*/ const StyledCardHeader = styledComponents.styled(designSystem.CardHeader)`
-  border-bottom: none;
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral200};
 `;
 const CardFooter = styledComponents.styled(designSystem.Flex)`
   min-width: 0;
+  width: 100%;
 `;
 const FileTypeIcon = styledComponents.styled(designSystem.Flex)`
   color: ${({ theme })=>theme.colors.neutral600};
@@ -154,10 +172,20 @@ const FileName = styledComponents.styled(designSystem.Typography)`
   flex: 1;
   min-width: 0;
 `;
-const AssetCard = ({ asset })=>{
+const AssetCard = ({ asset, onAssetItemClick })=>{
     const { formatMessage } = reactIntl.useIntl();
     const TypeIcon = getAssetIcon.getAssetIcon(asset.mime, asset.ext);
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onAssetItemClick(asset.id);
+        }
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(StyledCard, {
+        tabIndex: 0,
+        role: "listitem",
+        onClick: ()=>onAssetItemClick(asset.id),
+        onKeyDown: handleKeyDown,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(StyledCardHeader, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(AssetPreview, {
@@ -168,12 +196,11 @@ const AssetCard = ({ asset })=>{
                 children: /*#__PURE__*/ jsxRuntime.jsxs(CardFooter, {
                     alignItems: "center",
                     gap: 2,
-                    paddingTop: 2,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(FileTypeIcon, {
                             children: /*#__PURE__*/ jsxRuntime.jsx(TypeIcon, {
-                                width: 16,
-                                height: 16
+                                width: 20,
+                                height: 20
                             })
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(FileName, {
@@ -195,7 +222,7 @@ const AssetCard = ({ asset })=>{
         ]
     });
 };
-const AssetsGrid = ({ assets, folders = [] })=>{
+const AssetsGrid = ({ assets, folders = [], onAssetItemClick })=>{
     const { formatMessage } = reactIntl.useIntl();
     const totalItems = folders.length + assets.length;
     if (totalItems === 0) {
@@ -212,6 +239,7 @@ const AssetsGrid = ({ assets, folders = [] })=>{
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
         gap: 4,
+        role: "list",
         children: [
             folders.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(FoldersRow, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
@@ -235,7 +263,8 @@ const AssetsGrid = ({ assets, folders = [] })=>{
                     direction: "column",
                     alignItems: "stretch",
                     children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard, {
-                        asset: asset
+                        asset: asset,
+                        onAssetItemClick: onAssetItemClick
                     })
                 }, asset.id))
         ]

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsGrid.js","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 } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\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)`\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: 8px;\n  overflow: hidden;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * FolderCard\n * -----------------------------------------------------------------------------------------------*/\n\nconst FoldersRow = styled(Box)`\n  grid-column: 1 / -1;\n`;\n\nconst StyledFolderCard = styled(Flex)`\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: pointer;\n  transition: background 0.2s;\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\n  return (\n    <StyledFolderCard onClick={() => navigateToFolder(folder)} role=\"button\" tabIndex={0}>\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 } = asset;\n\n  if (mime?.includes(AssetType.Image)) {\n    const mediaURL =\n      prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);\n\n    if (mediaURL) {\n      return (\n        <PreviewContainer>\n          <StyledImage src={mediaURL} alt={alternativeText || ''} />\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: none;\n`;\n\nconst CardFooter = styled(Flex)`\n  min-width: 0;\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}\n\nconst AssetCard = ({ asset }: AssetCardProps) => {\n  const { formatMessage } = useIntl();\n  const TypeIcon = getAssetIcon(asset.mime, asset.ext);\n\n  return (\n    <StyledCard>\n      <StyledCardHeader>\n        <AssetPreview asset={asset} />\n      </StyledCardHeader>\n      <CardBody>\n        <CardFooter alignItems=\"center\" gap={2} paddingTop={2}>\n          <FileTypeIcon>\n            <TypeIcon width={16} height={16} />\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          >\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}\n\nexport const AssetsGrid = ({ assets, folders = [] }: AssetsGridProps) => {\n  const { formatMessage } = useIntl();\n\n  const totalItems = folders.length + assets.length;\n\n  if (totalItems === 0) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"neutral600\">\n          {formatMessage({\n            id: 'app.components.EmptyStateLayout.content-document',\n            defaultMessage: 'No content found',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <Grid.Root gap={4}>\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} />\n        </Grid.Item>\n      ))}\n    </Grid.Root>\n  );\n};\n"],"names":["StyledCard","styled","Card","theme","colors","neutral200","FoldersRow","Box","StyledFolderCard","Flex","spaces","borderRadius","neutral0","primary100","primary600","FolderIconContainer","neutral600","FolderName","Typography","FolderCard","folder","formatMessage","useIntl","navigateToFolder","useFolderNavigation","_jsxs","onClick","role","tabIndex","_jsx","FolderIcon","width","height","textColor","ellipsis","name","IconButton","label","id","getTranslationKey","defaultMessage","variant","e","stopPropagation","More","PreviewContainer","neutral100","StyledImage","img","IconPreview","neutral500","AssetPreview","asset","alternativeText","ext","formats","mime","url","includes","AssetType","Image","mediaURL","prefixFileUrlWithBackendUrl","thumbnail","src","alt","DocIcon","getAssetIcon","justifyContent","alignItems","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","FileName","AssetCard","TypeIcon","CardBody","gap","paddingTop","AssetsGrid","assets","folders","totalItems","length","padding","Grid","Root","map","Item","col","m","s","xs","direction"],"mappings":"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"}
+{"version":3,"file":"AssetsGrid.js","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 } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\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)`\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\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  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: pointer;\n  transition: background 0.2s;\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\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      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 } = asset;\n\n  if (mime?.includes(AssetType.Image)) {\n    const mediaURL =\n      prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);\n\n    if (mediaURL) {\n      return (\n        <PreviewContainer>\n          <StyledImage src={mediaURL} alt={alternativeText || ''} />\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\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      tabIndex={0}\n      role=\"listitem\"\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          >\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 { formatMessage } = useIntl();\n\n  const totalItems = folders.length + assets.length;\n\n  if (totalItems === 0) {\n    return (\n      <Box padding={8}>\n        <Typography textColor=\"neutral600\">\n          {formatMessage({\n            id: 'app.components.EmptyStateLayout.content-document',\n            defaultMessage: 'No content found',\n          })}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <Grid.Root gap={4} role=\"list\">\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","primary100","primary600","FoldersRow","Box","StyledFolderCard","Flex","spaces","borderRadius","neutral0","FolderIconContainer","neutral600","FolderName","Typography","FolderCard","folder","formatMessage","useIntl","navigateToFolder","useFolderNavigation","handleKeyDown","e","key","preventDefault","_jsxs","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","includes","AssetType","Image","mediaURL","prefixFileUrlWithBackendUrl","thumbnail","src","alt","DocIcon","getAssetIcon","justifyContent","alignItems","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","FileName","AssetCard","onAssetItemClick","TypeIcon","CardBody","gap","AssetsGrid","assets","folders","totalItems","length","padding","Grid","Root","map","Item","col","m","s","xs","direction"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Card, Box, Flex, Typography, CardHeader, Grid, IconButton, CardBody } from '@strapi/design-system';
+import { Box, Typography, Grid, IconButton, CardBody, Flex, Card, CardHeader } from '@strapi/design-system';
 import { Folder, More } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
@@ -15,6 +15,16 @@ import { useFolderNavigation } from '../hooks/useFolderNavigation.mjs';
   border: 1px solid ${({ theme })=>theme.colors.neutral200};
   border-radius: 8px;
   overflow: hidden;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: 2px;
+  }
 `;
 /* -------------------------------------------------------------------------------------------------
  * FolderCard
@@ -52,9 +62,16 @@ const FolderName = styled(Typography)`
 const FolderCard = ({ folder })=>{
     const { formatMessage } = useIntl();
     const { navigateToFolder } = useFolderNavigation();
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            navigateToFolder(folder);
+        }
+    };
     return /*#__PURE__*/ jsxs(StyledFolderCard, {
         onClick: ()=>navigateToFolder(folder),
-        role: "button",
+        onKeyDown: handleKeyDown,
+        role: "listitem",
         tabIndex: 0,
         children: [
             /*#__PURE__*/ jsx(FolderIconContainer, {
@@ -139,10 +156,11 @@ const AssetPreview = ({ asset })=>{
 /* -------------------------------------------------------------------------------------------------
  * AssetCard
  * -----------------------------------------------------------------------------------------------*/ const StyledCardHeader = styled(CardHeader)`
-  border-bottom: none;
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral200};
 `;
 const CardFooter = styled(Flex)`
   min-width: 0;
+  width: 100%;
 `;
 const FileTypeIcon = styled(Flex)`
   color: ${({ theme })=>theme.colors.neutral600};
@@ -152,10 +170,20 @@ const FileName = styled(Typography)`
   flex: 1;
   min-width: 0;
 `;
-const AssetCard = ({ asset })=>{
+const AssetCard = ({ asset, onAssetItemClick })=>{
     const { formatMessage } = useIntl();
     const TypeIcon = getAssetIcon(asset.mime, asset.ext);
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onAssetItemClick(asset.id);
+        }
+    };
     return /*#__PURE__*/ jsxs(StyledCard, {
+        tabIndex: 0,
+        role: "listitem",
+        onClick: ()=>onAssetItemClick(asset.id),
+        onKeyDown: handleKeyDown,
         children: [
             /*#__PURE__*/ jsx(StyledCardHeader, {
                 children: /*#__PURE__*/ jsx(AssetPreview, {
@@ -166,12 +194,11 @@ const AssetCard = ({ asset })=>{
                 children: /*#__PURE__*/ jsxs(CardFooter, {
                     alignItems: "center",
                     gap: 2,
-                    paddingTop: 2,
                     children: [
                         /*#__PURE__*/ jsx(FileTypeIcon, {
                             children: /*#__PURE__*/ jsx(TypeIcon, {
-                                width: 16,
-                                height: 16
+                                width: 20,
+                                height: 20
                             })
                         }),
                         /*#__PURE__*/ jsx(FileName, {
@@ -193,7 +220,7 @@ const AssetCard = ({ asset })=>{
         ]
     });
 };
-const AssetsGrid = ({ assets, folders = [] })=>{
+const AssetsGrid = ({ assets, folders = [], onAssetItemClick })=>{
     const { formatMessage } = useIntl();
     const totalItems = folders.length + assets.length;
     if (totalItems === 0) {
@@ -210,6 +237,7 @@ const AssetsGrid = ({ assets, folders = [] })=>{
     }
     return /*#__PURE__*/ jsxs(Grid.Root, {
         gap: 4,
+        role: "list",
         children: [
             folders.length > 0 && /*#__PURE__*/ jsx(FoldersRow, {
                 children: /*#__PURE__*/ jsx(Grid.Root, {
@@ -233,7 +261,8 @@ const AssetsGrid = ({ assets, folders = [] })=>{
                     direction: "column",
                     alignItems: "stretch",
                     children: /*#__PURE__*/ jsx(AssetCard, {
-                        asset: asset
+                        asset: asset,
+                        onAssetItemClick: onAssetItemClick
                     })
                 }, asset.id))
         ]