@strapi/upload 5.36.1 → 5.37.0

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 { 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';\n\nimport type { File } from '../../../../../../shared/contracts/files';\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 * 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}\n\nexport const AssetsGrid = ({ assets }: AssetsGridProps) => {\n  const { formatMessage } = useIntl();\n\n  if (assets.length === 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      {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","PreviewContainer","Box","neutral100","StyledImage","img","IconPreview","Flex","neutral500","AssetPreview","asset","alternativeText","ext","formats","mime","url","includes","AssetType","Image","mediaURL","prefixFileUrlWithBackendUrl","thumbnail","_jsx","src","alt","DocIcon","getAssetIcon","justifyContent","alignItems","width","height","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","neutral600","FileName","Typography","AssetCard","formatMessage","useIntl","TypeIcon","_jsxs","CardBody","gap","paddingTop","textColor","ellipsis","name","IconButton","label","id","getTranslationKey","defaultMessage","variant","More","AssetsGrid","assets","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`;\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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"}

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

@@ -1,12 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Card, Box, Flex, CardHeader, Typography, Grid, CardBody, IconButton } from '@strapi/design-system';
-import { More } from '@strapi/icons';
+import { Card, Box, Flex, Typography, CardHeader, Grid, IconButton, CardBody } from '@strapi/design-system';
+import { Folder, More } from '@strapi/icons';
 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';
+import { useFolderNavigation } from '../hooks/useFolderNavigation.mjs';
 
 /* -------------------------------------------------------------------------------------------------
  * AssetsGrid
@@ -15,6 +16,70 @@ import { getTranslationKey } from '../../../utils/translations.mjs';
   border-radius: 8px;
   overflow: hidden;
 `;
+/* -------------------------------------------------------------------------------------------------
+ * FolderCard
+ * -----------------------------------------------------------------------------------------------*/ const FoldersRow = styled(Box)`
+  grid-column: 1 / -1;
+`;
+const StyledFolderCard = styled(Flex)`
+  width: 100%;
+  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-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral0};
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: 2px;
+  }
+`;
+const FolderIconContainer = styled(Flex)`
+  flex-shrink: 0;
+  color: ${({ theme })=>theme.colors.neutral600};
+`;
+const FolderName = styled(Typography)`
+  flex: 1;
+  min-width: 0;
+`;
+const FolderCard = ({ folder })=>{
+    const { formatMessage } = useIntl();
+    const { navigateToFolder } = useFolderNavigation();
+    return /*#__PURE__*/ jsxs(StyledFolderCard, {
+        onClick: ()=>navigateToFolder(folder),
+        role: "button",
+        tabIndex: 0,
+        children: [
+            /*#__PURE__*/ jsx(FolderIconContainer, {
+                children: /*#__PURE__*/ jsx(Folder, {
+                    width: 20,
+                    height: 20
+                })
+            }),
+            /*#__PURE__*/ jsx(FolderName, {
+                textColor: "neutral800",
+                ellipsis: true,
+                children: folder.name
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                label: formatMessage({
+                    id: getTranslationKey('control-card.more-actions'),
+                    defaultMessage: 'More actions'
+                }),
+                variant: "ghost",
+                onClick: (e)=>e.stopPropagation(),
+                children: /*#__PURE__*/ jsx(More, {})
+            })
+        ]
+    });
+};
 /* -------------------------------------------------------------------------------------------------
  * AssetPreview
  * -----------------------------------------------------------------------------------------------*/ const PreviewContainer = styled(Box)`
@@ -128,9 +193,10 @@ const AssetCard = ({ asset })=>{
         ]
     });
 };
-const AssetsGrid = ({ assets })=>{
+const AssetsGrid = ({ assets, folders = [] })=>{
     const { formatMessage } = useIntl();
-    if (assets.length === 0) {
+    const totalItems = folders.length + assets.length;
+    if (totalItems === 0) {
         return /*#__PURE__*/ jsx(Box, {
             padding: 8,
             children: /*#__PURE__*/ jsx(Typography, {
@@ -142,19 +208,35 @@ const AssetsGrid = ({ assets })=>{
             })
         });
     }
-    return /*#__PURE__*/ jsx(Grid.Root, {
+    return /*#__PURE__*/ jsxs(Grid.Root, {
         gap: 4,
-        children: assets.map((asset)=>/*#__PURE__*/ jsx(Grid.Item, {
-                col: 3,
-                m: 4,
-                s: 6,
-                xs: 12,
-                direction: "column",
-                alignItems: "stretch",
-                children: /*#__PURE__*/ jsx(AssetCard, {
-                    asset: asset
+        children: [
+            folders.length > 0 && /*#__PURE__*/ jsx(FoldersRow, {
+                children: /*#__PURE__*/ jsx(Grid.Root, {
+                    gap: 4,
+                    children: folders.map((folder)=>/*#__PURE__*/ jsx(Grid.Item, {
+                            col: 3,
+                            m: 4,
+                            s: 6,
+                            xs: 12,
+                            children: /*#__PURE__*/ jsx(FolderCard, {
+                                folder: folder
+                            })
+                        }, `folder-${folder.id}`))
                 })
-            }, asset.id))
+            }),
+            assets.map((asset)=>/*#__PURE__*/ jsx(Grid.Item, {
+                    col: 3,
+                    m: 4,
+                    s: 6,
+                    xs: 12,
+                    direction: "column",
+                    alignItems: "stretch",
+                    children: /*#__PURE__*/ jsx(AssetCard, {
+                        asset: asset
+                    })
+                }, 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 { 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';\n\nimport type { File } from '../../../../../../shared/contracts/files';\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 * 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}\n\nexport const AssetsGrid = ({ assets }: AssetsGridProps) => {\n  const { formatMessage } = useIntl();\n\n  if (assets.length === 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      {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","PreviewContainer","Box","neutral100","StyledImage","img","IconPreview","Flex","neutral500","AssetPreview","asset","alternativeText","ext","formats","mime","url","includes","AssetType","Image","mediaURL","prefixFileUrlWithBackendUrl","thumbnail","_jsx","src","alt","DocIcon","getAssetIcon","justifyContent","alignItems","width","height","StyledCardHeader","CardHeader","CardFooter","FileTypeIcon","neutral600","FileName","Typography","AssetCard","formatMessage","useIntl","TypeIcon","_jsxs","CardBody","gap","paddingTop","textColor","ellipsis","name","IconButton","label","id","getTranslationKey","defaultMessage","variant","More","AssetsGrid","assets","length","padding","Grid","Root","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  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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"}

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

@@ -10,6 +10,7 @@ var files = require('../../../utils/files.js');
 var getAssetIcon = require('../../../utils/getAssetIcon.js');
 var translations = require('../../../utils/translations.js');
 var constants = require('../constants.js');
+var useFolderNavigation = require('../hooks/useFolderNavigation.js');
 
 const StyledTable = styledComponents.styled(designSystem.RawTable)`
   width: 100%;
@@ -141,13 +142,98 @@ const AssetRow = ({ asset })=>{
         ]
     });
 };
-const AssetsTable = ({ assets })=>{
+const FolderTr = styledComponents.styled(StyledTr)`
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+`;
+const FolderRow = ({ folder })=>{
+    const isMobile = strapiAdmin.useIsMobile();
+    const { formatDate, formatMessage } = reactIntl.useIntl();
+    const { navigateToFolder } = useFolderNavigation.useFolderNavigation();
+    return /*#__PURE__*/ jsxRuntime.jsxs(FolderTr, {
+        onClick: ()=>navigateToFolder(folder),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    gap: 3,
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            justifyContent: "center",
+                            alignItems: "center",
+                            borderRadius: "4px",
+                            color: "neutral600",
+                            width: "3.2rem",
+                            height: "3.2rem",
+                            shrink: 0,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(icons.Folder, {
+                                width: 20,
+                                height: 20
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            textColor: "neutral800",
+                            fontWeight: "semiBold",
+                            ellipsis: true,
+                            children: folder.name
+                        })
+                    ]
+                })
+            }),
+            !isMobile && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            textColor: "neutral600",
+                            children: folder.createdAt ? formatDate(new Date(folder.createdAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            textColor: "neutral600",
+                            children: folder.updatedAt ? formatDate(new Date(folder.updatedAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            textColor: "neutral600",
+                            children: "-"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    justifyContent: "flex-end",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        label: formatMessage({
+                            id: translations.getTranslationKey('control-card.more-actions'),
+                            defaultMessage: 'More actions'
+                        }),
+                        variant: "ghost",
+                        onClick: (e)=>e.stopPropagation(),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.More, {})
+                    })
+                })
+            })
+        ]
+    });
+};
+const AssetsTable = ({ assets, folders = [] })=>{
     const isMobile = strapiAdmin.useIsMobile();
     const { formatMessage } = reactIntl.useIntl();
     const visibleHeaders = isMobile ? constants.TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions') : constants.TABLE_HEADERS;
+    const totalRows = folders.length + assets.length;
     return /*#__PURE__*/ jsxRuntime.jsxs(StyledTable, {
         colCount: visibleHeaders.length,
-        rowCount: assets.length + 1,
+        rowCount: totalRows + 1,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(StyledThead, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.RawTr, {
@@ -175,7 +261,7 @@ const AssetsTable = ({ assets })=>{
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.RawTbody, {
-                children: assets.length === 0 ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.RawTr, {
+                children: totalRows === 0 ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.RawTr, {
                     children: /*#__PURE__*/ jsxRuntime.jsx(StyledBodyTd, {
                         colSpan: visibleHeaders.length,
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
@@ -186,9 +272,16 @@ const AssetsTable = ({ assets })=>{
                             })
                         })
                     })
-                }) : assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(AssetRow, {
-                        asset: asset
-                    }, asset.id))
+                }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [
+                        folders.map((folder)=>/*#__PURE__*/ jsxRuntime.jsx(FolderRow, {
+                                folder: folder
+                            }, `folder-${folder.id}`)),
+                        assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(AssetRow, {
+                                asset: asset
+                            }, asset.id))
+                    ]
+                })
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsTable.js","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsTable.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  RawTable,\n  RawTbody,\n  RawTd,\n  RawTh,\n  RawThead,\n  RawTr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { formatBytes } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { TABLE_HEADERS } from '../constants';\n\nimport type { File } from '../../../../../../shared/contracts/files';\n\nconst StyledTable = styled(RawTable)`\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n  border-radius: 4px;\n  overflow: hidden;\n`;\n\nconst StyledThead = styled(RawThead)`\n  background: ${({ theme }) => theme.colors.neutral100};\n\n  tr {\n    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n`;\n\nconst StyledTh = styled(RawTh)`\n  height: 40px;\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  text-align: left;\n`;\n\nconst StyledTd = styled(RawTd)`\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst StyledTr = styled(RawTr)`\n  height: 48px;\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  &:last-child {\n    ${StyledTd} {\n      border-bottom: 0;\n    }\n  }\n`;\n\nconst StyledBodyTd = styled(RawTd)`\n  padding: ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface AssetPreviewCellProps {\n  asset: File;\n}\n\nconst AssetPreviewCell = ({ asset }: AssetPreviewCellProps) => {\n  const { ext, mime } = asset;\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      borderRadius=\"4px\"\n      color=\"neutral500\"\n      width=\"3.2rem\"\n      height=\"3.2rem\"\n      shrink={0}\n    >\n      <DocIcon width={16} height={16} />\n    </Flex>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n}\n\nconst AssetRow = ({ asset }: AssetRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\n\n  return (\n    <StyledTr>\n      <StyledTd>\n        <Flex gap={3} alignItems=\"center\">\n          <AssetPreviewCell asset={asset} />\n          <Flex direction=\"column\" alignItems=\"flex-start\">\n            <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n              {asset.name}\n            </Typography>\n            {isMobile && (\n              <Typography textColor=\"neutral600\" variant=\"pi\">\n                {asset.size ? formatBytes(asset.size, 1) : '-'}\n              </Typography>\n            )}\n          </Flex>\n        </Flex>\n      </StyledTd>\n      {!isMobile && (\n        <>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.createdAt ? formatDate(new Date(asset.createdAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.updatedAt ? formatDate(new Date(asset.updatedAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.size ? formatBytes(asset.size, 1) : '-'}\n            </Typography>\n          </StyledTd>\n        </>\n      )}\n      <StyledTd>\n        <Flex justifyContent=\"flex-end\">\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        </Flex>\n      </StyledTd>\n    </StyledTr>\n  );\n};\n\ninterface AssetsTableProps {\n  assets: File[];\n}\n\nexport const AssetsTable = ({ assets }: AssetsTableProps) => {\n  const isMobile = useIsMobile();\n  const { formatMessage } = useIntl();\n\n  const visibleHeaders = isMobile\n    ? TABLE_HEADERS.filter((h) => h.name === 'name' || h.name === 'actions')\n    : TABLE_HEADERS;\n\n  return (\n    <StyledTable colCount={visibleHeaders.length} rowCount={assets.length + 1}>\n      <StyledThead>\n        <RawTr>\n          {visibleHeaders.map((header) => {\n            const tableHeaderLabel = formatMessage(header.label);\n            const isVisuallyHidden = 'isVisuallyHidden' in header && header.isVisuallyHidden;\n\n            if (isVisuallyHidden) {\n              return (\n                <StyledTh key={header.name}>\n                  <VisuallyHidden>\n                    {formatMessage({\n                      id: getTranslationKey('table.header.actions'),\n                      defaultMessage: 'actions',\n                    })}\n                  </VisuallyHidden>\n                </StyledTh>\n              );\n            }\n\n            return (\n              <StyledTh key={header.name}>\n                <Typography textColor=\"neutral600\" variant=\"sigma\">\n                  {tableHeaderLabel}\n                </Typography>\n              </StyledTh>\n            );\n          })}\n        </RawTr>\n      </StyledThead>\n      <RawTbody>\n        {assets.length === 0 ? (\n          <RawTr>\n            <StyledBodyTd colSpan={visibleHeaders.length}>\n              <Typography textColor=\"neutral600\">\n                {formatMessage({\n                  id: 'app.components.EmptyStateLayout.content-document',\n                  defaultMessage: 'No content found',\n                })}\n              </Typography>\n            </StyledBodyTd>\n          </RawTr>\n        ) : (\n          assets.map((asset) => <AssetRow key={asset.id} asset={asset} />)\n        )}\n      </RawTbody>\n    </StyledTable>\n  );\n};\n"],"names":["StyledTable","styled","RawTable","theme","colors","neutral150","StyledThead","RawThead","neutral100","StyledTh","RawTh","spaces","StyledTd","RawTd","StyledTr","RawTr","neutral0","StyledBodyTd","AssetPreviewCell","asset","ext","mime","DocIcon","getAssetIcon","_jsx","Flex","justifyContent","alignItems","borderRadius","color","width","height","shrink","AssetRow","isMobile","useIsMobile","formatDate","formatMessage","useIntl","_jsxs","gap","direction","Typography","textColor","fontWeight","ellipsis","name","variant","size","formatBytes","_Fragment","createdAt","Date","dateStyle","updatedAt","IconButton","label","id","getTranslationKey","defaultMessage","More","AssetsTable","assets","visibleHeaders","TABLE_HEADERS","filter","h","colCount","length","rowCount","map","header","tableHeaderLabel","isVisuallyHidden","VisuallyHidden","RawTbody","colSpan"],"mappings":"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"}
+{"version":3,"file":"AssetsTable.js","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsTable.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  RawTable,\n  RawTbody,\n  RawTd,\n  RawTh,\n  RawThead,\n  RawTr,\n  Typography,\n  VisuallyHidden,\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 { formatBytes } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { TABLE_HEADERS } from '../constants';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\n\nimport type { File } from '../../../../../../shared/contracts/files';\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\nconst StyledTable = styled(RawTable)`\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n  border-radius: 4px;\n  overflow: hidden;\n`;\n\nconst StyledThead = styled(RawThead)`\n  background: ${({ theme }) => theme.colors.neutral100};\n\n  tr {\n    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  }\n`;\n\nconst StyledTh = styled(RawTh)`\n  height: 40px;\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  text-align: left;\n`;\n\nconst StyledTd = styled(RawTd)`\n  padding: 0 ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst StyledTr = styled(RawTr)`\n  height: 48px;\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  &:last-child {\n    ${StyledTd} {\n      border-bottom: 0;\n    }\n  }\n`;\n\nconst StyledBodyTd = styled(RawTd)`\n  padding: ${({ theme }) => theme.spaces[4]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface AssetPreviewCellProps {\n  asset: File;\n}\n\nconst AssetPreviewCell = ({ asset }: AssetPreviewCellProps) => {\n  const { ext, mime } = asset;\n\n  const DocIcon = getAssetIcon(mime, ext);\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      borderRadius=\"4px\"\n      color=\"neutral500\"\n      width=\"3.2rem\"\n      height=\"3.2rem\"\n      shrink={0}\n    >\n      <DocIcon width={16} height={16} />\n    </Flex>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n}\n\nconst AssetRow = ({ asset }: AssetRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\n\n  return (\n    <StyledTr>\n      <StyledTd>\n        <Flex gap={3} alignItems=\"center\">\n          <AssetPreviewCell asset={asset} />\n          <Flex direction=\"column\" alignItems=\"flex-start\">\n            <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n              {asset.name}\n            </Typography>\n            {isMobile && (\n              <Typography textColor=\"neutral600\" variant=\"pi\">\n                {asset.size ? formatBytes(asset.size, 1) : '-'}\n              </Typography>\n            )}\n          </Flex>\n        </Flex>\n      </StyledTd>\n      {!isMobile && (\n        <>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.createdAt ? formatDate(new Date(asset.createdAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.updatedAt ? formatDate(new Date(asset.updatedAt), { dateStyle: 'long' }) : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {asset.size ? formatBytes(asset.size, 1) : '-'}\n            </Typography>\n          </StyledTd>\n        </>\n      )}\n      <StyledTd>\n        <Flex justifyContent=\"flex-end\">\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        </Flex>\n      </StyledTd>\n    </StyledTr>\n  );\n};\n\nconst FolderTr = styled(StyledTr)`\n  cursor: pointer;\n\n  &:hover {\n    background: ${({ theme }) => theme.colors.primary100};\n  }\n`;\n\ninterface FolderRowProps {\n  folder: Folder;\n}\n\nconst FolderRow = ({ folder }: FolderRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\n  const { navigateToFolder } = useFolderNavigation();\n\n  return (\n    <FolderTr onClick={() => navigateToFolder(folder)}>\n      <StyledTd>\n        <Flex gap={3} alignItems=\"center\">\n          <Flex\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            borderRadius=\"4px\"\n            color=\"neutral600\"\n            width=\"3.2rem\"\n            height=\"3.2rem\"\n            shrink={0}\n          >\n            <FolderIcon width={20} height={20} />\n          </Flex>\n          <Typography textColor=\"neutral800\" fontWeight=\"semiBold\" ellipsis>\n            {folder.name}\n          </Typography>\n        </Flex>\n      </StyledTd>\n      {!isMobile && (\n        <>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {folder.createdAt\n                ? formatDate(new Date(folder.createdAt), { dateStyle: 'long' })\n                : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">\n              {folder.updatedAt\n                ? formatDate(new Date(folder.updatedAt), { dateStyle: 'long' })\n                : '-'}\n            </Typography>\n          </StyledTd>\n          <StyledTd>\n            <Typography textColor=\"neutral600\">-</Typography>\n          </StyledTd>\n        </>\n      )}\n      <StyledTd>\n        <Flex justifyContent=\"flex-end\">\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        </Flex>\n      </StyledTd>\n    </FolderTr>\n  );\n};\n\ninterface AssetsTableProps {\n  assets: File[];\n  folders?: Folder[];\n}\n\nexport const AssetsTable = ({ assets, folders = [] }: AssetsTableProps) => {\n  const isMobile = useIsMobile();\n  const { formatMessage } = useIntl();\n\n  const visibleHeaders = isMobile\n    ? TABLE_HEADERS.filter((h) => h.name === 'name' || h.name === 'actions')\n    : TABLE_HEADERS;\n\n  const totalRows = folders.length + assets.length;\n\n  return (\n    <StyledTable colCount={visibleHeaders.length} rowCount={totalRows + 1}>\n      <StyledThead>\n        <RawTr>\n          {visibleHeaders.map((header) => {\n            const tableHeaderLabel = formatMessage(header.label);\n            const isVisuallyHidden = 'isVisuallyHidden' in header && header.isVisuallyHidden;\n\n            if (isVisuallyHidden) {\n              return (\n                <StyledTh key={header.name}>\n                  <VisuallyHidden>\n                    {formatMessage({\n                      id: getTranslationKey('table.header.actions'),\n                      defaultMessage: 'actions',\n                    })}\n                  </VisuallyHidden>\n                </StyledTh>\n              );\n            }\n\n            return (\n              <StyledTh key={header.name}>\n                <Typography textColor=\"neutral600\" variant=\"sigma\">\n                  {tableHeaderLabel}\n                </Typography>\n              </StyledTh>\n            );\n          })}\n        </RawTr>\n      </StyledThead>\n      <RawTbody>\n        {totalRows === 0 ? (\n          <RawTr>\n            <StyledBodyTd colSpan={visibleHeaders.length}>\n              <Typography textColor=\"neutral600\">\n                {formatMessage({\n                  id: 'app.components.EmptyStateLayout.content-document',\n                  defaultMessage: 'No content found',\n                })}\n              </Typography>\n            </StyledBodyTd>\n          </RawTr>\n        ) : (\n          <>\n            {folders.map((folder) => (\n              <FolderRow key={`folder-${folder.id}`} folder={folder} />\n            ))}\n            {assets.map((asset) => (\n              <AssetRow key={asset.id} asset={asset} />\n            ))}\n          </>\n        )}\n      </RawTbody>\n    </StyledTable>\n  );\n};\n"],"names":["StyledTable","styled","RawTable","theme","colors","neutral150","StyledThead","RawThead","neutral100","StyledTh","RawTh","spaces","StyledTd","RawTd","StyledTr","RawTr","neutral0","StyledBodyTd","AssetPreviewCell","asset","ext","mime","DocIcon","getAssetIcon","_jsx","Flex","justifyContent","alignItems","borderRadius","color","width","height","shrink","AssetRow","isMobile","useIsMobile","formatDate","formatMessage","useIntl","_jsxs","gap","direction","Typography","textColor","fontWeight","ellipsis","name","variant","size","formatBytes","_Fragment","createdAt","Date","dateStyle","updatedAt","IconButton","label","id","getTranslationKey","defaultMessage","More","FolderTr","primary100","FolderRow","folder","navigateToFolder","useFolderNavigation","onClick","FolderIcon","e","stopPropagation","AssetsTable","assets","folders","visibleHeaders","TABLE_HEADERS","filter","h","totalRows","length","colCount","rowCount","map","header","tableHeaderLabel","isVisuallyHidden","VisuallyHidden","RawTbody","colSpan"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAMA,WAAAA,GAAcC,uBAAOC,CAAAA,qBAAAA,CAAS;;;;oBAIhB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG7D,CAAC;AAED,MAAMC,WAAAA,GAAcL,uBAAOM,CAAAA,qBAAAA,CAAS;cACtB,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACI,UAAU,CAAC;;;6BAG1B,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAEtE,CAAC;AAED,MAAMI,QAAAA,GAAWR,uBAAOS,CAAAA,kBAAAA,CAAM;;aAEjB,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMQ,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;AAE9C,CAAC;AAED,MAAMC,QAAAA,GAAWX,uBAAOY,CAAAA,kBAAAA,CAAM;aACjB,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAMQ,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;2BACnB,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AACpE,CAAC;AAED,MAAMS,QAAAA,GAAWb,uBAAOc,CAAAA,kBAAAA,CAAM;;cAEhB,EAAE,CAAC,EAAEZ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACY,QAAQ,CAAC;;;AAGjD,IAAA,EAAEJ,QAAS,CAAA;;;;AAIf,CAAC;AAED,MAAMK,YAAAA,GAAehB,uBAAOY,CAAAA,kBAAAA,CAAM;WACvB,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAMQ,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;2BACjB,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AACpE,CAAC;AAMD,MAAMa,gBAAmB,GAAA,CAAC,EAAEC,KAAK,EAAyB,GAAA;AACxD,IAAA,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGF,KAAAA;IAEtB,MAAMG,OAAAA,GAAUC,0BAAaF,IAAMD,EAAAA,GAAAA,CAAAA;AAEnC,IAAA,qBACEI,cAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,QAAA;QACfC,UAAW,EAAA,QAAA;QACXC,YAAa,EAAA,KAAA;QACbC,KAAM,EAAA,YAAA;QACNC,KAAM,EAAA,QAAA;QACNC,MAAO,EAAA,QAAA;QACPC,MAAQ,EAAA,CAAA;AAER,QAAA,QAAA,gBAAAR,cAACF,CAAAA,OAAAA,EAAAA;YAAQQ,KAAO,EAAA,EAAA;YAAIC,MAAQ,EAAA;;;AAGlC,CAAA;AAMA,MAAME,QAAW,GAAA,CAAC,EAAEd,KAAK,EAAiB,GAAA;AACxC,IAAA,MAAMe,QAAWC,GAAAA,uBAAAA,EAAAA;AACjB,IAAA,MAAM,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAEtC,IAAA,qBACEC,eAACzB,CAAAA,QAAAA,EAAAA;;0BACCU,cAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAA2B,eAACd,CAAAA,iBAAAA,EAAAA;oBAAKe,GAAK,EAAA,CAAA;oBAAGb,UAAW,EAAA,QAAA;;sCACvBH,cAACN,CAAAA,gBAAAA,EAAAA;4BAAiBC,KAAOA,EAAAA;;sCACzBoB,eAACd,CAAAA,iBAAAA,EAAAA;4BAAKgB,SAAU,EAAA,QAAA;4BAASd,UAAW,EAAA,YAAA;;8CAClCH,cAACkB,CAAAA,uBAAAA,EAAAA;oCAAWC,SAAU,EAAA,YAAA;oCAAaC,UAAW,EAAA,UAAA;oCAAWC,QAAQ,EAAA,IAAA;AAC9D1B,oCAAAA,QAAAA,EAAAA,KAAAA,CAAM2B;;AAERZ,gCAAAA,QAAAA,kBACCV,cAACkB,CAAAA,uBAAAA,EAAAA;oCAAWC,SAAU,EAAA,YAAA;oCAAaI,OAAQ,EAAA,IAAA;AACxC5B,oCAAAA,QAAAA,EAAAA,KAAAA,CAAM6B,IAAI,GAAGC,iBAAAA,CAAY9B,KAAM6B,CAAAA,IAAI,EAAE,CAAK,CAAA,GAAA;;;;;;;AAMpD,YAAA,CAACd,QACA,kBAAAK,eAAA,CAAAW,mBAAA,EAAA;;kCACE1B,cAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AACnBxB,4BAAAA,QAAAA,EAAAA,KAAAA,CAAMgC,SAAS,GAAGf,UAAAA,CAAW,IAAIgB,IAAKjC,CAAAA,KAAAA,CAAMgC,SAAS,CAAG,EAAA;gCAAEE,SAAW,EAAA;6BAAY,CAAA,GAAA;;;kCAGtF7B,cAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AACnBxB,4BAAAA,QAAAA,EAAAA,KAAAA,CAAMmC,SAAS,GAAGlB,UAAAA,CAAW,IAAIgB,IAAKjC,CAAAA,KAAAA,CAAMmC,SAAS,CAAG,EAAA;gCAAED,SAAW,EAAA;6BAAY,CAAA,GAAA;;;kCAGtF7B,cAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AACnBxB,4BAAAA,QAAAA,EAAAA,KAAAA,CAAM6B,IAAI,GAAGC,iBAAAA,CAAY9B,KAAM6B,CAAAA,IAAI,EAAE,CAAK,CAAA,GAAA;;;;;0BAKnDxB,cAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAY,cAACC,CAAAA,iBAAAA,EAAAA;oBAAKC,cAAe,EAAA,UAAA;AACnB,oBAAA,QAAA,gBAAAF,cAAC+B,CAAAA,uBAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOnB,aAAc,CAAA;AACnBoB,4BAAAA,EAAAA,EAAIC,8BAAkB,CAAA,2BAAA,CAAA;4BACtBC,cAAgB,EAAA;AAClB,yBAAA,CAAA;wBACAZ,OAAQ,EAAA,OAAA;AAER,wBAAA,QAAA,gBAAAvB,cAACoC,CAAAA,UAAAA,EAAAA,EAAAA;;;;;;AAMb,CAAA;AAEA,MAAMC,QAAAA,GAAW5D,uBAAOa,CAAAA,QAAAA,CAAS;;;;gBAIjB,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC0D,UAAU,CAAC;;AAEzD,CAAC;AAMD,MAAMC,SAAY,GAAA,CAAC,EAAEC,MAAM,EAAkB,GAAA;AAC3C,IAAA,MAAM9B,QAAWC,GAAAA,uBAAAA,EAAAA;AACjB,IAAA,MAAM,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IACtC,MAAM,EAAE2B,gBAAgB,EAAE,GAAGC,uCAAAA,EAAAA;AAE7B,IAAA,qBACE3B,eAACsB,CAAAA,QAAAA,EAAAA;AAASM,QAAAA,OAAAA,EAAS,IAAMF,gBAAiBD,CAAAA,MAAAA,CAAAA;;0BACxCxC,cAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAA2B,eAACd,CAAAA,iBAAAA,EAAAA;oBAAKe,GAAK,EAAA,CAAA;oBAAGb,UAAW,EAAA,QAAA;;sCACvBH,cAACC,CAAAA,iBAAAA,EAAAA;4BACCC,cAAe,EAAA,QAAA;4BACfC,UAAW,EAAA,QAAA;4BACXC,YAAa,EAAA,KAAA;4BACbC,KAAM,EAAA,YAAA;4BACNC,KAAM,EAAA,QAAA;4BACNC,MAAO,EAAA,QAAA;4BACPC,MAAQ,EAAA,CAAA;AAER,4BAAA,QAAA,gBAAAR,cAAC4C,CAAAA,YAAAA,EAAAA;gCAAWtC,KAAO,EAAA,EAAA;gCAAIC,MAAQ,EAAA;;;sCAEjCP,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;4BAAaC,UAAW,EAAA,UAAA;4BAAWC,QAAQ,EAAA,IAAA;AAC9DmB,4BAAAA,QAAAA,EAAAA,MAAAA,CAAOlB;;;;;AAIb,YAAA,CAACZ,QACA,kBAAAK,eAAA,CAAAW,mBAAA,EAAA;;kCACE1B,cAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AACnBqB,4BAAAA,QAAAA,EAAAA,MAAAA,CAAOb,SAAS,GACbf,UAAAA,CAAW,IAAIgB,IAAKY,CAAAA,MAAAA,CAAOb,SAAS,CAAG,EAAA;gCAAEE,SAAW,EAAA;6BACpD,CAAA,GAAA;;;kCAGR7B,cAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AACnBqB,4BAAAA,QAAAA,EAAAA,MAAAA,CAAOV,SAAS,GACblB,UAAAA,CAAW,IAAIgB,IAAKY,CAAAA,MAAAA,CAAOV,SAAS,CAAG,EAAA;gCAAED,SAAW,EAAA;6BACpD,CAAA,GAAA;;;kCAGR7B,cAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AAAa,4BAAA,QAAA,EAAA;;;;;0BAIzCnB,cAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAY,cAACC,CAAAA,iBAAAA,EAAAA;oBAAKC,cAAe,EAAA,UAAA;AACnB,oBAAA,QAAA,gBAAAF,cAAC+B,CAAAA,uBAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOnB,aAAc,CAAA;AACnBoB,4BAAAA,EAAAA,EAAIC,8BAAkB,CAAA,2BAAA,CAAA;4BACtBC,cAAgB,EAAA;AAClB,yBAAA,CAAA;wBACAZ,OAAQ,EAAA,OAAA;wBACRoB,OAAS,EAAA,CAACE,CAAwBA,GAAAA,CAAAA,CAAEC,eAAe,EAAA;AAEnD,wBAAA,QAAA,gBAAA9C,cAACoC,CAAAA,UAAAA,EAAAA,EAAAA;;;;;;AAMb,CAAA;AAOO,MAAMW,cAAc,CAAC,EAAEC,MAAM,EAAEC,OAAAA,GAAU,EAAE,EAAoB,GAAA;AACpE,IAAA,MAAMvC,QAAWC,GAAAA,uBAAAA,EAAAA;IACjB,MAAM,EAAEE,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMoC,cAAiBxC,GAAAA,QAAAA,GACnByC,uBAAcC,CAAAA,MAAM,CAAC,CAACC,CAAAA,GAAMA,CAAE/B,CAAAA,IAAI,KAAK,MAAA,IAAU+B,CAAE/B,CAAAA,IAAI,KAAK,SAC5D6B,CAAAA,GAAAA,uBAAAA;AAEJ,IAAA,MAAMG,SAAYL,GAAAA,OAAAA,CAAQM,MAAM,GAAGP,OAAOO,MAAM;AAEhD,IAAA,qBACExC,eAACvC,CAAAA,WAAAA,EAAAA;AAAYgF,QAAAA,QAAAA,EAAUN,eAAeK,MAAM;AAAEE,QAAAA,QAAAA,EAAUH,SAAY,GAAA,CAAA;;0BAClEtD,cAAClB,CAAAA,WAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAkB,cAACT,CAAAA,kBAAAA,EAAAA;8BACE2D,cAAeQ,CAAAA,GAAG,CAAC,CAACC,MAAAA,GAAAA;wBACnB,MAAMC,gBAAAA,GAAmB/C,aAAc8C,CAAAA,MAAAA,CAAO3B,KAAK,CAAA;AACnD,wBAAA,MAAM6B,gBAAmB,GAAA,kBAAA,IAAsBF,MAAUA,IAAAA,MAAAA,CAAOE,gBAAgB;AAEhF,wBAAA,IAAIA,gBAAkB,EAAA;AACpB,4BAAA,qBACE7D,cAACf,CAAAA,QAAAA,EAAAA;AACC,gCAAA,QAAA,gBAAAe,cAAC8D,CAAAA,2BAAAA,EAAAA;8CACEjD,aAAc,CAAA;AACboB,wCAAAA,EAAAA,EAAIC,8BAAkB,CAAA,sBAAA,CAAA;wCACtBC,cAAgB,EAAA;AAClB,qCAAA;;AALWwB,6BAAAA,EAAAA,MAAAA,CAAOrC,IAAI,CAAA;AAS9B;AAEA,wBAAA,qBACEtB,cAACf,CAAAA,QAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAe,cAACkB,CAAAA,uBAAAA,EAAAA;gCAAWC,SAAU,EAAA,YAAA;gCAAaI,OAAQ,EAAA,OAAA;AACxCqC,gCAAAA,QAAAA,EAAAA;;AAFUD,yBAAAA,EAAAA,MAAAA,CAAOrC,IAAI,CAAA;AAM9B,qBAAA;;;0BAGJtB,cAAC+D,CAAAA,qBAAAA,EAAAA;AACET,gBAAAA,QAAAA,EAAAA,SAAAA,KAAc,kBACbtD,cAACT,CAAAA,kBAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAS,cAACP,CAAAA,YAAAA,EAAAA;AAAauE,wBAAAA,OAAAA,EAASd,eAAeK,MAAM;AAC1C,wBAAA,QAAA,gBAAAvD,cAACkB,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;sCACnBN,aAAc,CAAA;gCACboB,EAAI,EAAA,kDAAA;gCACJE,cAAgB,EAAA;AAClB,6BAAA;;;AAKN,iBAAA,CAAA,iBAAApB,eAAA,CAAAW,mBAAA,EAAA;;AACGuB,wBAAAA,OAAAA,CAAQS,GAAG,CAAC,CAAClB,MAAAA,iBACZxC,cAACuC,CAAAA,SAAAA,EAAAA;gCAAsCC,MAAQA,EAAAA;AAA/B,6BAAA,EAAA,CAAC,OAAO,EAAEA,MAAOP,CAAAA,EAAE,CAAE,CAAA,CAAA,CAAA;AAEtCe,wBAAAA,MAAAA,CAAOU,GAAG,CAAC,CAAC/D,KAAAA,iBACXK,cAACS,CAAAA,QAAAA,EAAAA;gCAAwBd,KAAOA,EAAAA;AAAjBA,6BAAAA,EAAAA,KAAAA,CAAMsC,EAAE,CAAA;;;;;;AAOrC;;;;"}

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

@@ -1,13 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useIsMobile } from '@strapi/admin/strapi-admin';
 import { RawTable, RawThead, RawTh, RawTd, RawTr, VisuallyHidden, Typography, RawTbody, Flex, IconButton } from '@strapi/design-system';
-import { More } from '@strapi/icons';
+import { More, Folder } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { formatBytes } from '../../../utils/files.mjs';
 import { getAssetIcon } from '../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../utils/translations.mjs';
 import { TABLE_HEADERS } from '../constants.mjs';
+import { useFolderNavigation } from '../hooks/useFolderNavigation.mjs';
 
 const StyledTable = styled(RawTable)`
   width: 100%;
@@ -139,13 +140,98 @@ const AssetRow = ({ asset })=>{
         ]
     });
 };
-const AssetsTable = ({ assets })=>{
+const FolderTr = styled(StyledTr)`
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+`;
+const FolderRow = ({ folder })=>{
+    const isMobile = useIsMobile();
+    const { formatDate, formatMessage } = useIntl();
+    const { navigateToFolder } = useFolderNavigation();
+    return /*#__PURE__*/ jsxs(FolderTr, {
+        onClick: ()=>navigateToFolder(folder),
+        children: [
+            /*#__PURE__*/ jsx(StyledTd, {
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    gap: 3,
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            justifyContent: "center",
+                            alignItems: "center",
+                            borderRadius: "4px",
+                            color: "neutral600",
+                            width: "3.2rem",
+                            height: "3.2rem",
+                            shrink: 0,
+                            children: /*#__PURE__*/ jsx(Folder, {
+                                width: 20,
+                                height: 20
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral800",
+                            fontWeight: "semiBold",
+                            ellipsis: true,
+                            children: folder.name
+                        })
+                    ]
+                })
+            }),
+            !isMobile && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: folder.createdAt ? formatDate(new Date(folder.createdAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: folder.updatedAt ? formatDate(new Date(folder.updatedAt), {
+                                dateStyle: 'long'
+                            }) : '-'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(StyledTd, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral600",
+                            children: "-"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(StyledTd, {
+                children: /*#__PURE__*/ jsx(Flex, {
+                    justifyContent: "flex-end",
+                    children: /*#__PURE__*/ jsx(IconButton, {
+                        label: formatMessage({
+                            id: getTranslationKey('control-card.more-actions'),
+                            defaultMessage: 'More actions'
+                        }),
+                        variant: "ghost",
+                        onClick: (e)=>e.stopPropagation(),
+                        children: /*#__PURE__*/ jsx(More, {})
+                    })
+                })
+            })
+        ]
+    });
+};
+const AssetsTable = ({ assets, folders = [] })=>{
     const isMobile = useIsMobile();
     const { formatMessage } = useIntl();
     const visibleHeaders = isMobile ? TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions') : TABLE_HEADERS;
+    const totalRows = folders.length + assets.length;
     return /*#__PURE__*/ jsxs(StyledTable, {
         colCount: visibleHeaders.length,
-        rowCount: assets.length + 1,
+        rowCount: totalRows + 1,
         children: [
             /*#__PURE__*/ jsx(StyledThead, {
                 children: /*#__PURE__*/ jsx(RawTr, {
@@ -173,7 +259,7 @@ const AssetsTable = ({ assets })=>{
                 })
             }),
             /*#__PURE__*/ jsx(RawTbody, {
-                children: assets.length === 0 ? /*#__PURE__*/ jsx(RawTr, {
+                children: totalRows === 0 ? /*#__PURE__*/ jsx(RawTr, {
                     children: /*#__PURE__*/ jsx(StyledBodyTd, {
                         colSpan: visibleHeaders.length,
                         children: /*#__PURE__*/ jsx(Typography, {
@@ -184,9 +270,16 @@ const AssetsTable = ({ assets })=>{
                             })
                         })
                     })
-                }) : assets.map((asset)=>/*#__PURE__*/ jsx(AssetRow, {
-                        asset: asset
-                    }, asset.id))
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        folders.map((folder)=>/*#__PURE__*/ jsx(FolderRow, {
+                                folder: folder
+                            }, `folder-${folder.id}`)),
+                        assets.map((asset)=>/*#__PURE__*/ jsx(AssetRow, {
+                                asset: asset
+                            }, asset.id))
+                    ]
+                })
             })
         ]
     });