@strapi/upload 5.37.0 → 5.38.0

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsGrid.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsGrid.tsx"],"sourcesContent":["import {\n  Box,\n  Card,\n  CardBody,\n  CardHeader,\n  Flex,\n  Grid,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Folder as FolderIcon, More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } 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":";;;;;;;;;;;AAuBA;;AAEkG,qGAElG,MAAMA,UAAAA,GAAaC,MAAOC,CAAAA,IAAAA,CAAK;oBACX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG7D,CAAC;AAED;;AAEkG,qGAElG,MAAMC,UAAAA,GAAaL,MAAOM,CAAAA,GAAAA,CAAI;;AAE9B,CAAC;AAED,MAAMC,gBAAAA,GAAmBP,MAAOQ,CAAAA,IAAAA,CAAK;;AAE1B,WAAA,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMO,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAEP,KAAAA,CAAMO,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;OAE7D,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMO,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;oBACpB,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AAC5C,iBAAA,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMQ,YAAY,CAAC;cACvC,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACQ,QAAQ,CAAC;;;;;gBAKrC,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACS,UAAU,CAAC;;;;uBAIlC,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACU,UAAU,CAAC;;;AAGhE,CAAC;AAED,MAAMC,mBAAAA,GAAsBd,MAAOQ,CAAAA,IAAAA,CAAK;;SAE/B,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACY,UAAU,CAAC;AAClD,CAAC;AAED,MAAMC,UAAAA,GAAahB,MAAOiB,CAAAA,UAAAA,CAAW;;;AAGrC,CAAC;AAMD,MAAMC,UAAa,GAAA,CAAC,EAAEC,MAAM,EAAmB,GAAA;IAC7C,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,mBAAAA,EAAAA;AAE7B,IAAA,qBACEC,IAACjB,CAAAA,gBAAAA,EAAAA;AAAiBkB,QAAAA,OAAAA,EAAS,IAAMH,gBAAiBH,CAAAA,MAAAA,CAAAA;QAASO,IAAK,EAAA,QAAA;QAASC,QAAU,EAAA,CAAA;;0BACjFC,GAACd,CAAAA,mBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAc,GAACC,CAAAA,MAAAA,EAAAA;oBAAWC,KAAO,EAAA,EAAA;oBAAIC,MAAQ,EAAA;;;0BAEjCH,GAACZ,CAAAA,UAAAA,EAAAA;gBAAWgB,SAAU,EAAA,YAAA;gBAAaC,QAAQ,EAAA,IAAA;AACxCd,gBAAAA,QAAAA,EAAAA,MAAAA,CAAOe;;0BAEVN,GAACO,CAAAA,UAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAOhB,aAAc,CAAA;AACnBiB,oBAAAA,EAAAA,EAAIC,iBAAkB,CAAA,2BAAA,CAAA;oBACtBC,cAAgB,EAAA;AAClB,iBAAA,CAAA;gBACAC,OAAQ,EAAA,OAAA;gBACRf,OAAS,EAAA,CAACgB,CAAwBA,GAAAA,CAAAA,CAAEC,eAAe,EAAA;AAEnD,gBAAA,QAAA,gBAAAd,GAACe,CAAAA,IAAAA,EAAAA,EAAAA;;;;AAIT,CAAA;AAEA;;AAEkG,qGAElG,MAAMC,gBAAAA,GAAmB5C,MAAOM,CAAAA,GAAAA,CAAI;;;;;;;MAO9B,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC0C,UAAU,CAAC;;;;AAI/C,CAAC;AAED,MAAMC,WAAAA,GAAc9C,MAAO+C,CAAAA,GAAG;;;;;;;AAO9B,CAAC;AAED,MAAMC,WAAAA,GAAchD,MAAOQ,CAAAA,IAAAA,CAAK;;;;;;SAMvB,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC8C,UAAU,CAAC;cACpC,EAAE,CAAC,EAAE/C,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC0C,UAAU,CAAC;AACvD,CAAC;AAMD,MAAMK,YAAe,GAAA,CAAC,EAAEC,KAAK,EAAqB,GAAA;IAChD,MAAM,EAAEC,eAAe,EAAEC,GAAG,EAAEC,OAAO,EAAEC,IAAI,EAAEC,GAAG,EAAE,GAAGL,KAAAA;AAErD,IAAA,IAAII,IAAME,EAAAA,QAAAA,CAASC,SAAUC,CAAAA,KAAK,CAAG,EAAA;AACnC,QAAA,MAAMC,QACJC,GAAAA,2BAAAA,CAA4BP,OAASQ,EAAAA,SAAAA,EAAWN,QAAQK,2BAA4BL,CAAAA,GAAAA,CAAAA;AAEtF,QAAA,IAAII,QAAU,EAAA;AACZ,YAAA,qBACEhC,GAACgB,CAAAA,gBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAhB,GAACkB,CAAAA,WAAAA,EAAAA;oBAAYiB,GAAKH,EAAAA,QAAAA;AAAUI,oBAAAA,GAAAA,EAAKZ,eAAmB,IAAA;;;AAG1D;AACF;IAEA,MAAMa,OAAAA,GAAUC,aAAaX,IAAMF,EAAAA,GAAAA,CAAAA;AAEnC,IAAA,qBACEzB,GAACgB,CAAAA,gBAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAhB,GAACoB,CAAAA,WAAAA,EAAAA;YAAYmB,cAAe,EAAA,QAAA;YAASC,UAAW,EAAA,QAAA;AAC9C,YAAA,QAAA,gBAAAxC,GAACqC,CAAAA,OAAAA,EAAAA;gBAAQnC,KAAO,EAAA,EAAA;gBAAIC,MAAQ,EAAA;;;;AAIpC,CAAA;AAEA;;AAEkG,qGAElG,MAAMsC,gBAAAA,GAAmBrE,MAAOsE,CAAAA,UAAAA,CAAW;;AAE3C,CAAC;AAED,MAAMC,UAAAA,GAAavE,MAAOQ,CAAAA,IAAAA,CAAK;;AAE/B,CAAC;AAED,MAAMgE,YAAAA,GAAexE,MAAOQ,CAAAA,IAAAA,CAAK;SACxB,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACY,UAAU,CAAC;;AAElD,CAAC;AAED,MAAM0D,QAAAA,GAAWzE,MAAOiB,CAAAA,UAAAA,CAAW;;;AAGnC,CAAC;AAMD,MAAMyD,SAAY,GAAA,CAAC,EAAEvB,KAAK,EAAkB,GAAA;IAC1C,MAAM,EAAE/B,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMsD,WAAWT,YAAaf,CAAAA,KAAAA,CAAMI,IAAI,EAAEJ,MAAME,GAAG,CAAA;AAEnD,IAAA,qBACE7B,IAACzB,CAAAA,UAAAA,EAAAA;;0BACC6B,GAACyC,CAAAA,gBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAzC,GAACsB,CAAAA,YAAAA,EAAAA;oBAAaC,KAAOA,EAAAA;;;0BAEvBvB,GAACgD,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAApD,IAAC+C,CAAAA,UAAAA,EAAAA;oBAAWH,UAAW,EAAA,QAAA;oBAASS,GAAK,EAAA,CAAA;oBAAGC,UAAY,EAAA,CAAA;;sCAClDlD,GAAC4C,CAAAA,YAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAA5C,GAAC+C,CAAAA,QAAAA,EAAAA;gCAAS7C,KAAO,EAAA,EAAA;gCAAIC,MAAQ,EAAA;;;sCAE/BH,GAAC6C,CAAAA,QAAAA,EAAAA;4BAASzC,SAAU,EAAA,YAAA;4BAAaC,QAAQ,EAAA,IAAA;AACtCkB,4BAAAA,QAAAA,EAAAA,KAAAA,CAAMjB;;sCAETN,GAACO,CAAAA,UAAAA,EAAAA;AACCC,4BAAAA,KAAAA,EAAOhB,aAAc,CAAA;AACnBiB,gCAAAA,EAAAA,EAAIC,iBAAkB,CAAA,2BAAA,CAAA;gCACtBC,cAAgB,EAAA;AAClB,6BAAA,CAAA;4BACAC,OAAQ,EAAA,OAAA;AAER,4BAAA,QAAA,gBAAAZ,GAACe,CAAAA,IAAAA,EAAAA,EAAAA;;;;;;;AAMb,CAAA;AAWO,MAAMoC,aAAa,CAAC,EAAEC,MAAM,EAAEC,OAAAA,GAAU,EAAE,EAAmB,GAAA;IAClE,MAAM,EAAE7D,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAM6D,UAAaD,GAAAA,OAAAA,CAAQE,MAAM,GAAGH,OAAOG,MAAM;AAEjD,IAAA,IAAID,eAAe,CAAG,EAAA;AACpB,QAAA,qBACEtD,GAACtB,CAAAA,GAAAA,EAAAA;YAAI8E,OAAS,EAAA,CAAA;AACZ,YAAA,QAAA,gBAAAxD,GAACX,CAAAA,UAAAA,EAAAA;gBAAWe,SAAU,EAAA,YAAA;0BACnBZ,aAAc,CAAA;oBACbiB,EAAI,EAAA,kDAAA;oBACJE,cAAgB,EAAA;AAClB,iBAAA;;;AAIR;IAEA,qBACEf,IAAA,CAAC6D,KAAKC,IAAI,EAAA;QAACT,GAAK,EAAA,CAAA;;YACbI,OAAQE,CAAAA,MAAM,GAAG,CAAA,kBAChBvD,GAACvB,CAAAA,UAAAA,EAAAA;wCACCuB,GAAA,CAACyD,KAAKC,IAAI,EAAA;oBAACT,GAAK,EAAA,CAAA;AACbI,oBAAAA,QAAAA,EAAAA,OAAAA,CAAQM,GAAG,CAAC,CAACpE,MACZ,iBAAAS,GAAA,CAACyD,KAAKG,IAAI,EAAA;4BAACC,GAAK,EAAA,CAAA;4BAAGC,CAAG,EAAA,CAAA;4BAAGC,CAAG,EAAA,CAAA;4BAAGC,EAAI,EAAA,EAAA;AACjC,4BAAA,QAAA,gBAAAhE,GAACV,CAAAA,UAAAA,EAAAA;gCAAWC,MAAQA,EAAAA;;AADsB,yBAAA,EAAA,CAAC,OAAO,EAAEA,MAAOkB,CAAAA,EAAE,CAAE,CAAA,CAAA;;;AAOxE2C,YAAAA,MAAAA,CAAOO,GAAG,CAAC,CAACpC,KACX,iBAAAvB,GAAA,CAACyD,KAAKG,IAAI,EAAA;oBACRC,GAAK,EAAA,CAAA;oBACLC,CAAG,EAAA,CAAA;oBACHC,CAAG,EAAA,CAAA;oBACHC,EAAI,EAAA,EAAA;oBAEJC,SAAU,EAAA,QAAA;oBACVzB,UAAW,EAAA,SAAA;AAEX,oBAAA,QAAA,gBAAAxC,GAAC8C,CAAAA,SAAAA,EAAAA;wBAAUvB,KAAOA,EAAAA;;AAJbA,iBAAAA,EAAAA,KAAAA,CAAMd,EAAE,CAAA;;;AASvB;;;;"}
+{"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  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/AssetsTable.js

@@ -39,6 +39,16 @@ const StyledTd = styledComponents.styled(designSystem.RawTd)`
 const StyledTr = styledComponents.styled(designSystem.RawTr)`
   height: 48px;
   background: ${({ theme })=>theme.colors.neutral0};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: -2px;
+  }
 
   &:last-child {
     ${StyledTd} {
@@ -62,15 +72,25 @@ const AssetPreviewCell = ({ asset })=>{
         height: "3.2rem",
         shrink: 0,
         children: /*#__PURE__*/ jsxRuntime.jsx(DocIcon, {
-            width: 16,
-            height: 16
+            width: 20,
+            height: 20
         })
     });
 };
-const AssetRow = ({ asset })=>{
+const AssetRow = ({ asset, onAssetItemClick })=>{
     const isMobile = strapiAdmin.useIsMobile();
     const { formatDate, formatMessage } = reactIntl.useIntl();
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onAssetItemClick(asset.id);
+        }
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(StyledTr, {
+        tabIndex: 0,
+        role: "row",
+        onClick: ()=>onAssetItemClick(asset.id),
+        onKeyDown: handleKeyDown,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -153,8 +173,17 @@ const FolderRow = ({ folder })=>{
     const isMobile = strapiAdmin.useIsMobile();
     const { formatDate, formatMessage } = reactIntl.useIntl();
     const { navigateToFolder } = useFolderNavigation.useFolderNavigation();
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            navigateToFolder(folder);
+        }
+    };
     return /*#__PURE__*/ jsxRuntime.jsxs(FolderTr, {
+        tabIndex: 0,
+        role: "row",
         onClick: ()=>navigateToFolder(folder),
+        onKeyDown: handleKeyDown,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -226,7 +255,7 @@ const FolderRow = ({ folder })=>{
         ]
     });
 };
-const AssetsTable = ({ assets, folders = [] })=>{
+const AssetsTable = ({ assets, folders = [], onAssetItemClick })=>{
     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;
@@ -278,7 +307,8 @@ const AssetsTable = ({ assets, folders = [] })=>{
                                 folder: folder
                             }, `folder-${folder.id}`)),
                         assets.map((asset)=>/*#__PURE__*/ jsxRuntime.jsx(AssetRow, {
-                                asset: asset
+                                asset: asset,
+                                onAssetItemClick: onAssetItemClick
                             }, 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 { 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":"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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  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  &: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={20} height={20} />\n    </Flex>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n  onAssetItemClick: (assetId: number) => void;\n}\n\nconst AssetRow = ({ asset, onAssetItemClick }: AssetRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\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    <StyledTr\n      tabIndex={0}\n      role=\"row\"\n      onClick={() => onAssetItemClick(asset.id)}\n      onKeyDown={handleKeyDown}\n    >\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  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      navigateToFolder(folder);\n    }\n  };\n\n  return (\n    <FolderTr\n      tabIndex={0}\n      role=\"row\"\n      onClick={() => navigateToFolder(folder)}\n      onKeyDown={handleKeyDown}\n    >\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  onAssetItemClick: (assetId: number) => void;\n}\n\nexport const AssetsTable = ({ assets, folders = [], onAssetItemClick }: 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} onAssetItemClick={onAssetItemClick} />\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","primary100","primary600","StyledBodyTd","AssetPreviewCell","asset","ext","mime","DocIcon","getAssetIcon","_jsx","Flex","justifyContent","alignItems","borderRadius","color","width","height","shrink","AssetRow","onAssetItemClick","isMobile","useIsMobile","formatDate","formatMessage","useIntl","handleKeyDown","e","key","preventDefault","id","_jsxs","tabIndex","role","onClick","onKeyDown","gap","direction","Typography","textColor","fontWeight","ellipsis","name","variant","size","formatBytes","_Fragment","createdAt","Date","dateStyle","updatedAt","IconButton","label","getTranslationKey","defaultMessage","More","FolderTr","FolderRow","folder","navigateToFolder","useFolderNavigation","FolderIcon","stopPropagation","AssetsTable","assets","folders","visibleHeaders","TABLE_HEADERS","filter","h","totalRows","length","colCount","rowCount","map","header","tableHeaderLabel","isVisuallyHidden","VisuallyHidden","RawTbody","colSpan"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 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, Folder } from '@strapi/icons';
+import { RawTr, VisuallyHidden, Typography, RawTbody, RawTable, RawThead, RawTh, RawTd, Flex, IconButton } from '@strapi/design-system';
+import { Folder, More } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { formatBytes } from '../../../utils/files.mjs';
@@ -37,6 +37,16 @@ const StyledTd = styled(RawTd)`
 const StyledTr = styled(RawTr)`
   height: 48px;
   background: ${({ theme })=>theme.colors.neutral0};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: -2px;
+  }
 
   &:last-child {
     ${StyledTd} {
@@ -60,15 +70,25 @@ const AssetPreviewCell = ({ asset })=>{
         height: "3.2rem",
         shrink: 0,
         children: /*#__PURE__*/ jsx(DocIcon, {
-            width: 16,
-            height: 16
+            width: 20,
+            height: 20
         })
     });
 };
-const AssetRow = ({ asset })=>{
+const AssetRow = ({ asset, onAssetItemClick })=>{
     const isMobile = useIsMobile();
     const { formatDate, formatMessage } = useIntl();
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onAssetItemClick(asset.id);
+        }
+    };
     return /*#__PURE__*/ jsxs(StyledTr, {
+        tabIndex: 0,
+        role: "row",
+        onClick: ()=>onAssetItemClick(asset.id),
+        onKeyDown: handleKeyDown,
         children: [
             /*#__PURE__*/ jsx(StyledTd, {
                 children: /*#__PURE__*/ jsxs(Flex, {
@@ -151,8 +171,17 @@ const FolderRow = ({ folder })=>{
     const isMobile = useIsMobile();
     const { formatDate, formatMessage } = useIntl();
     const { navigateToFolder } = useFolderNavigation();
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            navigateToFolder(folder);
+        }
+    };
     return /*#__PURE__*/ jsxs(FolderTr, {
+        tabIndex: 0,
+        role: "row",
         onClick: ()=>navigateToFolder(folder),
+        onKeyDown: handleKeyDown,
         children: [
             /*#__PURE__*/ jsx(StyledTd, {
                 children: /*#__PURE__*/ jsxs(Flex, {
@@ -224,7 +253,7 @@ const FolderRow = ({ folder })=>{
         ]
     });
 };
-const AssetsTable = ({ assets, folders = [] })=>{
+const AssetsTable = ({ assets, folders = [], onAssetItemClick })=>{
     const isMobile = useIsMobile();
     const { formatMessage } = useIntl();
     const visibleHeaders = isMobile ? TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions') : TABLE_HEADERS;
@@ -276,7 +305,8 @@ const AssetsTable = ({ assets, folders = [] })=>{
                                 folder: folder
                             }, `folder-${folder.id}`)),
                         assets.map((asset)=>/*#__PURE__*/ jsx(AssetRow, {
-                                asset: asset
+                                asset: asset,
+                                onAssetItemClick: onAssetItemClick
                             }, asset.id))
                     ]
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsTable.mjs","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,MAAOC,CAAAA,QAAAA,CAAS;;;;oBAIhB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG7D,CAAC;AAED,MAAMC,WAAAA,GAAcL,MAAOM,CAAAA,QAAAA,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,MAAOS,CAAAA,KAAAA,CAAM;;aAEjB,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMQ,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;AAE9C,CAAC;AAED,MAAMC,QAAAA,GAAWX,MAAOY,CAAAA,KAAAA,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,MAAOc,CAAAA,KAAAA,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,MAAOY,CAAAA,KAAAA,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,aAAaF,IAAMD,EAAAA,GAAAA,CAAAA;AAEnC,IAAA,qBACEI,GAACC,CAAAA,IAAAA,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,GAACF,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,WAAAA,EAAAA;AACjB,IAAA,MAAM,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAEtC,IAAA,qBACEC,IAACzB,CAAAA,QAAAA,EAAAA;;0BACCU,GAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAA2B,IAACd,CAAAA,IAAAA,EAAAA;oBAAKe,GAAK,EAAA,CAAA;oBAAGb,UAAW,EAAA,QAAA;;sCACvBH,GAACN,CAAAA,gBAAAA,EAAAA;4BAAiBC,KAAOA,EAAAA;;sCACzBoB,IAACd,CAAAA,IAAAA,EAAAA;4BAAKgB,SAAU,EAAA,QAAA;4BAASd,UAAW,EAAA,YAAA;;8CAClCH,GAACkB,CAAAA,UAAAA,EAAAA;oCAAWC,SAAU,EAAA,YAAA;oCAAaC,UAAW,EAAA,UAAA;oCAAWC,QAAQ,EAAA,IAAA;AAC9D1B,oCAAAA,QAAAA,EAAAA,KAAAA,CAAM2B;;AAERZ,gCAAAA,QAAAA,kBACCV,GAACkB,CAAAA,UAAAA,EAAAA;oCAAWC,SAAU,EAAA,YAAA;oCAAaI,OAAQ,EAAA,IAAA;AACxC5B,oCAAAA,QAAAA,EAAAA,KAAAA,CAAM6B,IAAI,GAAGC,WAAAA,CAAY9B,KAAM6B,CAAAA,IAAI,EAAE,CAAK,CAAA,GAAA;;;;;;;AAMpD,YAAA,CAACd,QACA,kBAAAK,IAAA,CAAAW,QAAA,EAAA;;kCACE1B,GAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,GAACkB,CAAAA,UAAAA,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,GAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,GAACkB,CAAAA,UAAAA,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,GAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,GAACkB,CAAAA,UAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AACnBxB,4BAAAA,QAAAA,EAAAA,KAAAA,CAAM6B,IAAI,GAAGC,WAAAA,CAAY9B,KAAM6B,CAAAA,IAAI,EAAE,CAAK,CAAA,GAAA;;;;;0BAKnDxB,GAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAY,GAACC,CAAAA,IAAAA,EAAAA;oBAAKC,cAAe,EAAA,UAAA;AACnB,oBAAA,QAAA,gBAAAF,GAAC+B,CAAAA,UAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOnB,aAAc,CAAA;AACnBoB,4BAAAA,EAAAA,EAAIC,iBAAkB,CAAA,2BAAA,CAAA;4BACtBC,cAAgB,EAAA;AAClB,yBAAA,CAAA;wBACAZ,OAAQ,EAAA,OAAA;AAER,wBAAA,QAAA,gBAAAvB,GAACoC,CAAAA,IAAAA,EAAAA,EAAAA;;;;;;AAMb,CAAA;AAEA,MAAMC,QAAAA,GAAW5D,MAAOa,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,WAAAA,EAAAA;AACjB,IAAA,MAAM,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IACtC,MAAM,EAAE2B,gBAAgB,EAAE,GAAGC,mBAAAA,EAAAA;AAE7B,IAAA,qBACE3B,IAACsB,CAAAA,QAAAA,EAAAA;AAASM,QAAAA,OAAAA,EAAS,IAAMF,gBAAiBD,CAAAA,MAAAA,CAAAA;;0BACxCxC,GAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAA2B,IAACd,CAAAA,IAAAA,EAAAA;oBAAKe,GAAK,EAAA,CAAA;oBAAGb,UAAW,EAAA,QAAA;;sCACvBH,GAACC,CAAAA,IAAAA,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,GAAC4C,CAAAA,MAAAA,EAAAA;gCAAWtC,KAAO,EAAA,EAAA;gCAAIC,MAAQ,EAAA;;;sCAEjCP,GAACkB,CAAAA,UAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;4BAAaC,UAAW,EAAA,UAAA;4BAAWC,QAAQ,EAAA,IAAA;AAC9DmB,4BAAAA,QAAAA,EAAAA,MAAAA,CAAOlB;;;;;AAIb,YAAA,CAACZ,QACA,kBAAAK,IAAA,CAAAW,QAAA,EAAA;;kCACE1B,GAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,GAACkB,CAAAA,UAAAA,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,GAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,GAACkB,CAAAA,UAAAA,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,GAACZ,CAAAA,QAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAY,GAACkB,CAAAA,UAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;AAAa,4BAAA,QAAA,EAAA;;;;;0BAIzCnB,GAACZ,CAAAA,QAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAY,GAACC,CAAAA,IAAAA,EAAAA;oBAAKC,cAAe,EAAA,UAAA;AACnB,oBAAA,QAAA,gBAAAF,GAAC+B,CAAAA,UAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOnB,aAAc,CAAA;AACnBoB,4BAAAA,EAAAA,EAAIC,iBAAkB,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,GAACoC,CAAAA,IAAAA,EAAAA,EAAAA;;;;;;AAMb,CAAA;AAOO,MAAMW,cAAc,CAAC,EAAEC,MAAM,EAAEC,OAAAA,GAAU,EAAE,EAAoB,GAAA;AACpE,IAAA,MAAMvC,QAAWC,GAAAA,WAAAA,EAAAA;IACjB,MAAM,EAAEE,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMoC,cAAiBxC,GAAAA,QAAAA,GACnByC,aAAcC,CAAAA,MAAM,CAAC,CAACC,CAAAA,GAAMA,CAAE/B,CAAAA,IAAI,KAAK,MAAA,IAAU+B,CAAE/B,CAAAA,IAAI,KAAK,SAC5D6B,CAAAA,GAAAA,aAAAA;AAEJ,IAAA,MAAMG,SAAYL,GAAAA,OAAAA,CAAQM,MAAM,GAAGP,OAAOO,MAAM;AAEhD,IAAA,qBACExC,IAACvC,CAAAA,WAAAA,EAAAA;AAAYgF,QAAAA,QAAAA,EAAUN,eAAeK,MAAM;AAAEE,QAAAA,QAAAA,EAAUH,SAAY,GAAA,CAAA;;0BAClEtD,GAAClB,CAAAA,WAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAkB,GAACT,CAAAA,KAAAA,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,GAACf,CAAAA,QAAAA,EAAAA;AACC,gCAAA,QAAA,gBAAAe,GAAC8D,CAAAA,cAAAA,EAAAA;8CACEjD,aAAc,CAAA;AACboB,wCAAAA,EAAAA,EAAIC,iBAAkB,CAAA,sBAAA,CAAA;wCACtBC,cAAgB,EAAA;AAClB,qCAAA;;AALWwB,6BAAAA,EAAAA,MAAAA,CAAOrC,IAAI,CAAA;AAS9B;AAEA,wBAAA,qBACEtB,GAACf,CAAAA,QAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAe,GAACkB,CAAAA,UAAAA,EAAAA;gCAAWC,SAAU,EAAA,YAAA;gCAAaI,OAAQ,EAAA,OAAA;AACxCqC,gCAAAA,QAAAA,EAAAA;;AAFUD,yBAAAA,EAAAA,MAAAA,CAAOrC,IAAI,CAAA;AAM9B,qBAAA;;;0BAGJtB,GAAC+D,CAAAA,QAAAA,EAAAA;AACET,gBAAAA,QAAAA,EAAAA,SAAAA,KAAc,kBACbtD,GAACT,CAAAA,KAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAS,GAACP,CAAAA,YAAAA,EAAAA;AAAauE,wBAAAA,OAAAA,EAASd,eAAeK,MAAM;AAC1C,wBAAA,QAAA,gBAAAvD,GAACkB,CAAAA,UAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;sCACnBN,aAAc,CAAA;gCACboB,EAAI,EAAA,kDAAA;gCACJE,cAAgB,EAAA;AAClB,6BAAA;;;AAKN,iBAAA,CAAA,iBAAApB,IAAA,CAAAW,QAAA,EAAA;;AACGuB,wBAAAA,OAAAA,CAAQS,GAAG,CAAC,CAAClB,MAAAA,iBACZxC,GAACuC,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,GAACS,CAAAA,QAAAA,EAAAA;gCAAwBd,KAAOA,EAAAA;AAAjBA,6BAAAA,EAAAA,KAAAA,CAAMsC,EAAE,CAAA;;;;;;AAOrC;;;;"}
+{"version":3,"file":"AssetsTable.mjs","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  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  &: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={20} height={20} />\n    </Flex>\n  );\n};\n\ninterface AssetRowProps {\n  asset: File;\n  onAssetItemClick: (assetId: number) => void;\n}\n\nconst AssetRow = ({ asset, onAssetItemClick }: AssetRowProps) => {\n  const isMobile = useIsMobile();\n  const { formatDate, formatMessage } = useIntl();\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    <StyledTr\n      tabIndex={0}\n      role=\"row\"\n      onClick={() => onAssetItemClick(asset.id)}\n      onKeyDown={handleKeyDown}\n    >\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  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      navigateToFolder(folder);\n    }\n  };\n\n  return (\n    <FolderTr\n      tabIndex={0}\n      role=\"row\"\n      onClick={() => navigateToFolder(folder)}\n      onKeyDown={handleKeyDown}\n    >\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  onAssetItemClick: (assetId: number) => void;\n}\n\nexport const AssetsTable = ({ assets, folders = [], onAssetItemClick }: 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} onAssetItemClick={onAssetItemClick} />\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","primary100","primary600","StyledBodyTd","AssetPreviewCell","asset","ext","mime","DocIcon","getAssetIcon","_jsx","Flex","justifyContent","alignItems","borderRadius","color","width","height","shrink","AssetRow","onAssetItemClick","isMobile","useIsMobile","formatDate","formatMessage","useIntl","handleKeyDown","e","key","preventDefault","id","_jsxs","tabIndex","role","onClick","onKeyDown","gap","direction","Typography","textColor","fontWeight","ellipsis","name","variant","size","formatBytes","_Fragment","createdAt","Date","dateStyle","updatedAt","IconButton","label","getTranslationKey","defaultMessage","More","FolderTr","FolderRow","folder","navigateToFolder","useFolderNavigation","FolderIcon","stopPropagation","AssetsTable","assets","folders","visibleHeaders","TABLE_HEADERS","filter","h","totalRows","length","colCount","rowCount","map","header","tableHeaderLabel","isVisuallyHidden","VisuallyHidden","RawTbody","colSpan"],"mappings":"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"}

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

@@ -0,0 +1,143 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var folders = require('../../../services/folders.js');
+var translations = require('../../../utils/translations.js');
+
+const StyledModalContent = styledComponents.styled(designSystem.Modal.Content)`
+  max-width: 51.6rem;
+`;
+const CreateFolderDialog = ({ open, folderName, parentFolderId, onClose })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const [name, setName] = React.useState('');
+    const [fieldError, setFieldError] = React.useState();
+    const [createFolder, { isLoading }] = folders.useCreateFolderMutation();
+    React.useEffect(()=>{
+        if (open) {
+            setName('');
+            setFieldError(undefined);
+        }
+    }, [
+        open
+    ]);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            setFieldError(formatMessage({
+                id: translations.getTranslationKey('folder.create.form.error.name-required'),
+                defaultMessage: 'Name is required'
+            }));
+            return;
+        }
+        try {
+            await createFolder({
+                name: trimmedName,
+                parent: parentFolderId
+            }).unwrap();
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: translations.getTranslationKey('folder.create.success'),
+                    defaultMessage: 'Folder has been created'
+                })
+            });
+            onClose();
+        } catch (err) {
+            const apiError = err;
+            if (apiError?.message) {
+                setFieldError(apiError.message);
+            } else {
+                toggleNotification({
+                    type: 'danger',
+                    message: formatMessage({
+                        id: translations.getTranslationKey('folder.create.form.error.unknown'),
+                        defaultMessage: 'An error occurred while creating the folder'
+                    })
+                });
+            }
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
+        open: open,
+        onOpenChange: onClose,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(StyledModalContent, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
+                        children: formatMessage({
+                            id: translations.getTranslationKey('folder.create.title-in'),
+                            defaultMessage: 'New folder in {folderName}'
+                        }, {
+                            folderName
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs("form", {
+                    onSubmit: handleSubmit,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+                                error: fieldError,
+                                name: "name",
+                                required: true,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('folder.form.name.label'),
+                                            defaultMessage: 'Folder name'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                                        value: name,
+                                        onChange: (e)=>{
+                                            setName(e.target.value);
+                                            setFieldError(undefined);
+                                        },
+                                        autoFocus: true
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Footer, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                gap: 2,
+                                justifyContent: "space-between",
+                                width: "100%",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        variant: "tertiary",
+                                        onClick: onClose,
+                                        type: "button",
+                                        children: formatMessage({
+                                            id: 'app.components.Button.cancel',
+                                            defaultMessage: 'Cancel'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        type: "submit",
+                                        loading: isLoading,
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('folder.create.submit'),
+                                            defaultMessage: 'Create folder'
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.CreateFolderDialog = CreateFolderDialog;
+//# sourceMappingURL=CreateFolderDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreateFolderDialog.js","sources":["../../../../../../admin/src/future/pages/Assets/components/CreateFolderDialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useNotification } from '@strapi/admin/strapi-admin';\nimport { Button, Field, Flex, Modal, TextInput } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useCreateFolderMutation } from '../../../services/folders';\nimport { getTranslationKey } from '../../../utils/translations';\n\ninterface CreateFolderDialogProps {\n  open: boolean;\n  folderName: string;\n  parentFolderId: number | null;\n  onClose: () => void;\n}\n\nconst StyledModalContent = styled(Modal.Content)`\n  max-width: 51.6rem;\n`;\n\nexport const CreateFolderDialog = ({\n  open,\n  folderName,\n  parentFolderId,\n  onClose,\n}: CreateFolderDialogProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const [name, setName] = useState('');\n  const [fieldError, setFieldError] = useState<string | undefined>();\n  const [createFolder, { isLoading }] = useCreateFolderMutation();\n\n  useEffect(() => {\n    if (open) {\n      setName('');\n      setFieldError(undefined);\n    }\n  }, [open]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    const trimmedName = name.trim();\n\n    if (!trimmedName) {\n      setFieldError(\n        formatMessage({\n          id: getTranslationKey('folder.create.form.error.name-required'),\n          defaultMessage: 'Name is required',\n        })\n      );\n      return;\n    }\n\n    try {\n      await createFolder({ name: trimmedName, parent: parentFolderId }).unwrap();\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({\n          id: getTranslationKey('folder.create.success'),\n          defaultMessage: 'Folder has been created',\n        }),\n      });\n\n      onClose();\n    } catch (err) {\n      const apiError = err as { message?: string };\n\n      if (apiError?.message) {\n        setFieldError(apiError.message);\n      } else {\n        toggleNotification({\n          type: 'danger',\n          message: formatMessage({\n            id: getTranslationKey('folder.create.form.error.unknown'),\n            defaultMessage: 'An error occurred while creating the folder',\n          }),\n        });\n      }\n    }\n  };\n\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <StyledModalContent>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage(\n              {\n                id: getTranslationKey('folder.create.title-in'),\n                defaultMessage: 'New folder in {folderName}',\n              },\n              { folderName }\n            )}\n          </Modal.Title>\n        </Modal.Header>\n        <form onSubmit={handleSubmit}>\n          <Modal.Body>\n            <Field.Root error={fieldError} name=\"name\" required>\n              <Field.Label>\n                {formatMessage({\n                  id: getTranslationKey('folder.form.name.label'),\n                  defaultMessage: 'Folder name',\n                })}\n              </Field.Label>\n              <TextInput\n                value={name}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                  setName(e.target.value);\n                  setFieldError(undefined);\n                }}\n                autoFocus\n              />\n              <Field.Error />\n            </Field.Root>\n          </Modal.Body>\n          <Modal.Footer>\n            <Flex gap={2} justifyContent=\"space-between\" width=\"100%\">\n              <Button variant=\"tertiary\" onClick={onClose} type=\"button\">\n                {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n              </Button>\n              <Button type=\"submit\" loading={isLoading}>\n                {formatMessage({\n                  id: getTranslationKey('folder.create.submit'),\n                  defaultMessage: 'Create folder',\n                })}\n              </Button>\n            </Flex>\n          </Modal.Footer>\n        </form>\n      </StyledModalContent>\n    </Modal.Root>\n  );\n};\n"],"names":["StyledModalContent","styled","Modal","Content","CreateFolderDialog","open","folderName","parentFolderId","onClose","formatMessage","useIntl","toggleNotification","useNotification","name","setName","useState","fieldError","setFieldError","createFolder","isLoading","useCreateFolderMutation","useEffect","undefined","handleSubmit","e","preventDefault","trimmedName","trim","id","getTranslationKey","defaultMessage","parent","unwrap","type","message","err","apiError","_jsx","Root","onOpenChange","_jsxs","Header","Title","form","onSubmit","Body","Field","error","required","Label","TextInput","value","onChange","target","autoFocus","Error","Footer","Flex","gap","justifyContent","width","Button","variant","onClick","loading"],"mappings":"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"}