@strapi/upload 5.48.1 → 5.50.0

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

@@ -5,7 +5,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
-var enums = require('../../../enums.js');
+var enums = require('../../../../enums.js');
 var files = require('../../../utils/files.js');
 var getAssetIcon = require('../../../utils/getAssetIcon.js');
 var translations = require('../../../utils/translations.js');
@@ -132,7 +132,7 @@ const IconPreview = styledComponents.styled(designSystem.Flex)`
 `;
 const AssetPreview = ({ asset })=>{
     const { alternativeText, ext, formats, mime, url } = asset;
-    if (mime?.includes(enums.AssetType.Image)) {
+    if (mime?.includes(enums.ASSET_TYPES.Image)) {
         const mediaURL = files.prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? files.prefixFileUrlWithBackendUrl(url);
         if (mediaURL) {
             return /*#__PURE__*/ jsxRuntime.jsx(PreviewContainer, {

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

@@ -1 +1 @@
-{"version":3,"file":"AssetsGrid.js","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsGrid.tsx"],"sourcesContent":["import {\n  Box,\n  Card,\n  CardBody,\n  CardHeader,\n  Flex,\n  Grid,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Folder as FolderIcon, More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\n\nimport type { File } from '../../../../../../shared/contracts/files';\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\n/* -------------------------------------------------------------------------------------------------\n * AssetsGrid\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledCard = styled(Card)`\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: 8px;\n  overflow: hidden;\n  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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"}
+{"version":3,"file":"AssetsGrid.js","sources":["../../../../../../admin/src/future/pages/Assets/components/AssetsGrid.tsx"],"sourcesContent":["import {\n  Box,\n  Card,\n  CardBody,\n  CardHeader,\n  Flex,\n  Grid,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Folder as FolderIcon, More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\n\nimport 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(ASSET_TYPES.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","ASSET_TYPES","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":";;;;;;;;;;;;;AAuBA;;AAEkG,qGAElG,MAAMA,UAAAA,GAAaC,uBAAAA,CAAOC,iBAAAA,CAAK;oBACX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;;;;;gBAM7C,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACE,UAAU,CAAC;;;;uBAIlC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACG,UAAU,CAAC;;;AAGhE,CAAC;AAED;;AAEkG,qGAElG,MAAMC,UAAAA,GAAaP,uBAAAA,CAAOQ,gBAAAA,CAAI;;AAE9B,CAAC;AAED,MAAMC,gBAAAA,GAAmBT,uBAAAA,CAAOU,iBAAAA,CAAK;;AAE1B,WAAA,EAAE,CAAC,EAAER,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMS,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAET,KAAAA,CAAMS,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;OAE7D,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMS,MAAM,CAAC,CAAA,CAAE,CAAC;oBACpB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;AAC5C,iBAAA,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMU,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACU,QAAQ,CAAC;;;;;gBAKrC,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACE,UAAU,CAAC;;;;uBAIlC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACG,UAAU,CAAC;;;AAGhE,CAAC;AAED,MAAMQ,mBAAAA,GAAsBd,uBAAAA,CAAOU,iBAAAA,CAAK;;SAE/B,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACY,UAAU,CAAC;AAClD,CAAC;AAED,MAAMC,UAAAA,GAAahB,uBAAAA,CAAOiB,uBAAAA,CAAW;;;AAGrC,CAAC;AAMD,MAAMC,UAAAA,GAAa,CAAC,EAAEC,MAAM,EAAmB,GAAA;IAC7C,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,uCAAAA,EAAAA;AAE7B,IAAA,MAAMC,gBAAgB,CAACC,CAAAA,GAAAA;AACrB,QAAA,IAAIA,EAAEC,GAAG,KAAK,WAAWD,CAAAA,CAAEC,GAAG,KAAK,GAAA,EAAK;AACtCD,YAAAA,CAAAA,CAAEE,cAAc,EAAA;YAChBL,gBAAAA,CAAiBH,MAAAA,CAAAA;AACnB,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACES,eAAA,CAACnB,gBAAAA,EAAAA;AACCoB,QAAAA,OAAAA,EAAS,IAAMP,gBAAAA,CAAiBH,MAAAA,CAAAA;QAChCW,SAAAA,EAAWN,aAAAA;QACXO,IAAAA,EAAK,UAAA;QACLC,QAAAA,EAAU,CAAA;;0BAEVC,cAAA,CAACnB,mBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAmB,cAAA,CAACC,YAAAA,EAAAA;oBAAWC,KAAAA,EAAO,EAAA;oBAAIC,MAAAA,EAAQ;;;0BAEjCH,cAAA,CAACjB,UAAAA,EAAAA;gBAAWqB,SAAAA,EAAU,YAAA;gBAAaC,QAAQ,EAAA,IAAA;AACxCnB,gBAAAA,QAAAA,EAAAA,MAAAA,CAAOoB;;0BAEVN,cAAA,CAACO,uBAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAOrB,aAAAA,CAAc;AACnBsB,oBAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,2BAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;gBACAC,OAAAA,EAAQ,OAAA;gBACRhB,OAAAA,EAAS,CAACJ,CAAAA,GAAwBA,CAAAA,CAAEqB,eAAe,EAAA;AAEnD,gBAAA,QAAA,gBAAAb,cAAA,CAACc,UAAAA,EAAAA,EAAAA;;;;AAIT,CAAA;AAEA;;AAEkG,qGAElG,MAAMC,gBAAAA,GAAmBhD,uBAAAA,CAAOQ,gBAAAA,CAAI;;;;;;;MAO9B,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC8C,UAAU,CAAC;;;;AAI/C,CAAC;AAED,MAAMC,WAAAA,GAAclD,uBAAAA,CAAOmD,GAAG;;;;;;;AAO9B,CAAC;AAED,MAAMC,WAAAA,GAAcpD,uBAAAA,CAAOU,iBAAAA,CAAK;;;;;;SAMvB,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACkD,UAAU,CAAC;cACpC,EAAE,CAAC,EAAEnD,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC8C,UAAU,CAAC;AACvD,CAAC;AAMD,MAAMK,YAAAA,GAAe,CAAC,EAAEC,KAAK,EAAqB,GAAA;IAChD,MAAM,EAAEC,eAAe,EAAEC,GAAG,EAAEC,OAAO,EAAEC,IAAI,EAAEC,GAAG,EAAE,GAAGL,KAAAA;AAErD,IAAA,IAAII,IAAAA,EAAME,QAAAA,CAASC,iBAAAA,CAAYC,KAAK,CAAA,EAAG;AACrC,QAAA,MAAMC,QAAAA,GACJC,iCAAAA,CAA4BP,OAAAA,EAASQ,SAAAA,EAAWN,QAAQK,iCAAAA,CAA4BL,GAAAA,CAAAA;AAEtF,QAAA,IAAII,QAAAA,EAAU;AACZ,YAAA,qBACE/B,cAAA,CAACe,gBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAf,cAAA,CAACiB,WAAAA,EAAAA;oBAAYiB,GAAAA,EAAKH,QAAAA;AAAUI,oBAAAA,GAAAA,EAAKZ,eAAAA,IAAmB;;;AAG1D,QAAA;AACF,IAAA;IAEA,MAAMa,OAAAA,GAAUC,0BAAaX,IAAAA,EAAMF,GAAAA,CAAAA;AAEnC,IAAA,qBACExB,cAAA,CAACe,gBAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAf,cAAA,CAACmB,WAAAA,EAAAA;YAAYmB,cAAAA,EAAe,QAAA;YAASC,UAAAA,EAAW,QAAA;AAC9C,YAAA,QAAA,gBAAAvC,cAAA,CAACoC,OAAAA,EAAAA;gBAAQlC,KAAAA,EAAO,EAAA;gBAAIC,MAAAA,EAAQ;;;;AAIpC,CAAA;AAEA;;AAEkG,qGAElG,MAAMqC,gBAAAA,GAAmBzE,uBAAAA,CAAO0E,uBAAAA,CAAW;2BAChB,EAAE,CAAC,EAAExE,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;AACpE,CAAC;AAED,MAAMuE,UAAAA,GAAa3E,uBAAAA,CAAOU,iBAAAA,CAAK;;;AAG/B,CAAC;AAED,MAAMkE,YAAAA,GAAe5E,uBAAAA,CAAOU,iBAAAA,CAAK;SACxB,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACY,UAAU,CAAC;;AAElD,CAAC;AAED,MAAM8D,QAAAA,GAAW7E,uBAAAA,CAAOiB,uBAAAA,CAAW;;;AAGnC,CAAC;AAOD,MAAM6D,YAAY,CAAC,EAAEvB,KAAK,EAAEwB,gBAAgB,EAAkB,GAAA;IAC5D,MAAM,EAAE3D,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM2D,WAAWV,yBAAAA,CAAaf,KAAAA,CAAMI,IAAI,EAAEJ,MAAME,GAAG,CAAA;AAEnD,IAAA,MAAMjC,gBAAgB,CAACC,CAAAA,GAAAA;AACrB,QAAA,IAAIA,EAAEC,GAAG,KAAK,WAAWD,CAAAA,CAAEC,GAAG,KAAK,GAAA,EAAK;AACtCD,YAAAA,CAAAA,CAAEE,cAAc,EAAA;AAChBoD,YAAAA,gBAAAA,CAAiBxB,MAAMb,EAAE,CAAA;AAC3B,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEd,eAAA,CAAC7B,UAAAA,EAAAA;QACCiC,QAAAA,EAAU,CAAA;QACVD,IAAAA,EAAK,UAAA;QACLF,OAAAA,EAAS,IAAMkD,gBAAAA,CAAiBxB,KAAAA,CAAMb,EAAE,CAAA;QACxCZ,SAAAA,EAAWN,aAAAA;;0BAEXS,cAAA,CAACwC,gBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAxC,cAAA,CAACqB,YAAAA,EAAAA;oBAAaC,KAAAA,EAAOA;;;0BAEvBtB,cAAA,CAACgD,qBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAArD,eAAA,CAAC+C,UAAAA,EAAAA;oBAAWH,UAAAA,EAAW,QAAA;oBAASU,GAAAA,EAAK,CAAA;;sCACnCjD,cAAA,CAAC2C,YAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAA3C,cAAA,CAAC+C,QAAAA,EAAAA;gCAAS7C,KAAAA,EAAO,EAAA;gCAAIC,MAAAA,EAAQ;;;sCAE/BH,cAAA,CAAC4C,QAAAA,EAAAA;4BAASxC,SAAAA,EAAU,YAAA;4BAAaC,QAAQ,EAAA,IAAA;AACtCiB,4BAAAA,QAAAA,EAAAA,KAAAA,CAAMhB;;sCAETN,cAAA,CAACO,uBAAAA,EAAAA;AACCC,4BAAAA,KAAAA,EAAOrB,aAAAA,CAAc;AACnBsB,gCAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,2BAAA,CAAA;gCACtBC,cAAAA,EAAgB;AAClB,6BAAA,CAAA;4BACAC,OAAAA,EAAQ,OAAA;AAER,4BAAA,QAAA,gBAAAZ,cAAA,CAACc,UAAAA,EAAAA,EAAAA;;;;;;;AAMb,CAAA;AAYO,MAAMoC,UAAAA,GAAa,CAAC,EAAEC,MAAM,EAAEC,OAAAA,GAAU,EAAE,EAAEN,gBAAgB,EAAmB,GAAA;IACpF,MAAM,EAAE3D,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMiE,UAAAA,GAAaD,OAAAA,CAAQE,MAAM,GAAGH,OAAOG,MAAM;AAEjD,IAAA,IAAID,eAAe,CAAA,EAAG;AACpB,QAAA,qBACErD,cAAA,CAACzB,gBAAAA,EAAAA;YAAIgF,OAAAA,EAAS,CAAA;AACZ,YAAA,QAAA,gBAAAvD,cAAA,CAAChB,uBAAAA,EAAAA;gBAAWoB,SAAAA,EAAU,YAAA;0BACnBjB,aAAAA,CAAc;oBACbsB,EAAAA,EAAI,kDAAA;oBACJE,cAAAA,EAAgB;AAClB,iBAAA;;;AAIR,IAAA;IAEA,qBACEhB,eAAA,CAAC6D,kBAAKC,IAAI,EAAA;QAACR,GAAAA,EAAK,CAAA;QAAGnD,IAAAA,EAAK,MAAA;;YACrBsD,OAAAA,CAAQE,MAAM,GAAG,CAAA,kBAChBtD,cAAA,CAAC1B,UAAAA,EAAAA;wCACC0B,cAAA,CAACwD,kBAAKC,IAAI,EAAA;oBAACR,GAAAA,EAAK,CAAA;AACbG,oBAAAA,QAAAA,EAAAA,OAAAA,CAAQM,GAAG,CAAC,CAACxE,MAAAA,iBACZc,cAAA,CAACwD,kBAAKG,IAAI,EAAA;4BAACC,GAAAA,EAAK,CAAA;4BAAGC,CAAAA,EAAG,CAAA;4BAAGC,CAAAA,EAAG,CAAA;4BAAGC,EAAAA,EAAI,EAAA;AACjC,4BAAA,QAAA,gBAAA/D,cAAA,CAACf,UAAAA,EAAAA;gCAAWC,MAAAA,EAAQA;;AADsB,yBAAA,EAAA,CAAC,OAAO,EAAEA,MAAAA,CAAOuB,EAAE,CAAA,CAAE,CAAA;;;AAOxE0C,YAAAA,MAAAA,CAAOO,GAAG,CAAC,CAACpC,KAAAA,iBACXtB,cAAA,CAACwD,kBAAKG,IAAI,EAAA;oBACRC,GAAAA,EAAK,CAAA;oBACLC,CAAAA,EAAG,CAAA;oBACHC,CAAAA,EAAG,CAAA;oBACHC,EAAAA,EAAI,EAAA;oBAEJC,SAAAA,EAAU,QAAA;oBACVzB,UAAAA,EAAW,SAAA;AAEX,oBAAA,QAAA,gBAAAvC,cAAA,CAAC6C,SAAAA,EAAAA;wBAAUvB,KAAAA,EAAOA,KAAAA;wBAAOwB,gBAAAA,EAAkBA;;AAJtCxB,iBAAAA,EAAAA,KAAAA,CAAMb,EAAE,CAAA;;;AASvB;;;;"}

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

@@ -3,7 +3,7 @@ import { Box, Typography, Grid, IconButton, CardBody, Flex, Card, CardHeader } f
 import { Folder, More } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
-import { AssetType } from '../../../enums.mjs';
+import { ASSET_TYPES } from '../../../../enums.mjs';
 import { prefixFileUrlWithBackendUrl } from '../../../utils/files.mjs';
 import { getAssetIcon } from '../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../utils/translations.mjs';
@@ -130,7 +130,7 @@ const IconPreview = styled(Flex)`
 `;
 const AssetPreview = ({ asset })=>{
     const { alternativeText, ext, formats, mime, url } = asset;
-    if (mime?.includes(AssetType.Image)) {
+    if (mime?.includes(ASSET_TYPES.Image)) {
         const mediaURL = prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
         if (mediaURL) {
             return /*#__PURE__*/ jsx(PreviewContainer, {

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  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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"}
+{"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 { ASSET_TYPES } from '../../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../utils/files';\nimport { getAssetIcon } from '../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useFolderNavigation } from '../hooks/useFolderNavigation';\n\nimport 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(ASSET_TYPES.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","ASSET_TYPES","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/DropZone/UploadDropZone.js

@@ -9,7 +9,8 @@ var styledComponents = require('styled-components');
 var translations = require('../../../../utils/translations.js');
 var UploadDropZoneContext = require('./UploadDropZoneContext.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -26,7 +27,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /* -------------------------------------------------------------------------------------------------
  * DropZoneOverlay

package/dist/admin/future/pages/Assets/components/DropZone/UploadDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadDropZone.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/DropZone/UploadDropZone.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Folder } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport { useUploadDropZone } from './UploadDropZoneContext';\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst setOpacity = (hex: string, alpha: number) =>\n  `${hex}${Math.floor(alpha * 255)\n    .toString(16)\n    .padStart(2, '0')}`;\n\nconst DropZoneOverlay = styled(Box)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: ${({ theme }) => setOpacity(theme.colors.primary200, 0.3)};\n  border: 1px solid ${({ theme }) => theme.colors.primary700};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  pointer-events: none;\n`;\n\nconst DropZoneWithOverlay = ({ children }: { children: React.ReactNode }) => {\n  const { isDragging } = useUploadDropZone();\n  return (\n    <Box position=\"relative\">\n      {isDragging && <DropZoneOverlay />}\n      {children}\n    </Box>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneMessage\n * -----------------------------------------------------------------------------------------------*/\n\nconst DropFilesMessageImpl = styled(Box)<{ $leftContentWidth: number }>`\n  position: fixed;\n  bottom: ${({ theme }) => theme.spaces[8]};\n  left: 50%;\n  transform: translateX(calc(-50% + ${({ $leftContentWidth }) => $leftContentWidth / 2}px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  background: ${({ theme }) => theme.colors.primary600};\n  padding: ${({ theme }) => theme.spaces[4]} ${({ theme }) => theme.spaces[6]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 2;\n`;\n\ninterface DropFilesMessageProps {\n  uploadDropZoneRef?: React.RefObject<HTMLDivElement>;\n  folderName: string;\n}\n\nconst DropFilesMessage = ({ uploadDropZoneRef, folderName }: DropFilesMessageProps) => {\n  const { formatMessage } = useIntl();\n  const { isDragging } = useUploadDropZone();\n\n  // Dropzone message position (relative to main content)\n  const [leftContentWidth, setLeftContentWidth] = React.useState(0);\n\n  // Calculate the left content width to position the dropzone message correctly\n  React.useEffect(() => {\n    if (!uploadDropZoneRef?.current) return;\n\n    const updateRect = () => {\n      const rect = uploadDropZoneRef.current?.getBoundingClientRect();\n      if (rect) {\n        setLeftContentWidth((prev) => (prev !== rect.left ? rect.left : prev));\n      }\n    };\n\n    updateRect();\n    const resizeObserver = new ResizeObserver(updateRect);\n    resizeObserver.observe(uploadDropZoneRef.current);\n    return () => resizeObserver.disconnect();\n  }, [uploadDropZoneRef]);\n\n  if (!isDragging) return null;\n\n  return (\n    <DropFilesMessageImpl $leftContentWidth={leftContentWidth}>\n      <Typography textColor=\"neutral0\">\n        {formatMessage({\n          id: getTranslationKey('dropzone.upload.message'),\n          defaultMessage: 'Drop here to upload to',\n        })}\n      </Typography>\n      <Flex gap={2} alignItems=\"center\">\n        <Folder width={20} height={20} fill=\"neutral0\" />\n        <Typography textColor=\"neutral0\" fontWeight=\"semiBold\">\n          {folderName}\n        </Typography>\n      </Flex>\n    </DropFilesMessageImpl>\n  );\n};\n\nexport { DropZoneWithOverlay, DropFilesMessage };\n"],"names":["setOpacity","hex","alpha","Math","floor","toString","padStart","DropZoneOverlay","styled","Box","theme","colors","primary200","primary700","borderRadius","DropZoneWithOverlay","children","isDragging","useUploadDropZone","_jsxs","position","_jsx","DropFilesMessageImpl","spaces","$leftContentWidth","primary600","DropFilesMessage","uploadDropZoneRef","folderName","formatMessage","useIntl","leftContentWidth","setLeftContentWidth","React","useState","useEffect","current","updateRect","rect","getBoundingClientRect","prev","left","resizeObserver","ResizeObserver","observe","disconnect","Typography","textColor","id","getTranslationKey","defaultMessage","Flex","gap","alignItems","Folder","width","height","fill","fontWeight"],"mappings":"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"}
+{"version":3,"file":"UploadDropZone.js","sources":["../../../../../../../admin/src/future/pages/Assets/components/DropZone/UploadDropZone.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Folder } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport { useUploadDropZone } from './UploadDropZoneContext';\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst setOpacity = (hex: string, alpha: number) =>\n  `${hex}${Math.floor(alpha * 255)\n    .toString(16)\n    .padStart(2, '0')}`;\n\nconst DropZoneOverlay = styled(Box)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: ${({ theme }) => setOpacity(theme.colors.primary200, 0.3)};\n  border: 1px solid ${({ theme }) => theme.colors.primary700};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  pointer-events: none;\n`;\n\nconst DropZoneWithOverlay = ({ children }: { children: React.ReactNode }) => {\n  const { isDragging } = useUploadDropZone();\n  return (\n    <Box position=\"relative\">\n      {isDragging && <DropZoneOverlay />}\n      {children}\n    </Box>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DropZoneMessage\n * -----------------------------------------------------------------------------------------------*/\n\nconst DropFilesMessageImpl = styled(Box)<{ $leftContentWidth: number }>`\n  position: fixed;\n  bottom: ${({ theme }) => theme.spaces[8]};\n  left: 50%;\n  transform: translateX(calc(-50% + ${({ $leftContentWidth }) => $leftContentWidth / 2}px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${({ theme }) => theme.spaces[2]};\n  background: ${({ theme }) => theme.colors.primary600};\n  padding: ${({ theme }) => theme.spaces[4]} ${({ theme }) => theme.spaces[6]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 2;\n`;\n\ninterface DropFilesMessageProps {\n  uploadDropZoneRef?: React.RefObject<HTMLDivElement>;\n  folderName: string;\n}\n\nconst DropFilesMessage = ({ uploadDropZoneRef, folderName }: DropFilesMessageProps) => {\n  const { formatMessage } = useIntl();\n  const { isDragging } = useUploadDropZone();\n\n  // Dropzone message position (relative to main content)\n  const [leftContentWidth, setLeftContentWidth] = React.useState(0);\n\n  // Calculate the left content width to position the dropzone message correctly\n  React.useEffect(() => {\n    if (!uploadDropZoneRef?.current) return;\n\n    const updateRect = () => {\n      const rect = uploadDropZoneRef.current?.getBoundingClientRect();\n      if (rect) {\n        setLeftContentWidth((prev) => (prev !== rect.left ? rect.left : prev));\n      }\n    };\n\n    updateRect();\n    const resizeObserver = new ResizeObserver(updateRect);\n    resizeObserver.observe(uploadDropZoneRef.current);\n    return () => resizeObserver.disconnect();\n  }, [uploadDropZoneRef]);\n\n  if (!isDragging) return null;\n\n  return (\n    <DropFilesMessageImpl $leftContentWidth={leftContentWidth}>\n      <Typography textColor=\"neutral0\">\n        {formatMessage({\n          id: getTranslationKey('dropzone.upload.message'),\n          defaultMessage: 'Drop here to upload to',\n        })}\n      </Typography>\n      <Flex gap={2} alignItems=\"center\">\n        <Folder width={20} height={20} fill=\"neutral0\" />\n        <Typography textColor=\"neutral0\" fontWeight=\"semiBold\">\n          {folderName}\n        </Typography>\n      </Flex>\n    </DropFilesMessageImpl>\n  );\n};\n\nexport { DropZoneWithOverlay, DropFilesMessage };\n"],"names":["setOpacity","hex","alpha","Math","floor","toString","padStart","DropZoneOverlay","styled","Box","theme","colors","primary200","primary700","borderRadius","DropZoneWithOverlay","children","isDragging","useUploadDropZone","_jsxs","position","_jsx","DropFilesMessageImpl","spaces","$leftContentWidth","primary600","DropFilesMessage","uploadDropZoneRef","folderName","formatMessage","useIntl","leftContentWidth","setLeftContentWidth","React","useState","useEffect","current","updateRect","rect","getBoundingClientRect","prev","left","resizeObserver","ResizeObserver","observe","disconnect","Typography","textColor","id","getTranslationKey","defaultMessage","Flex","gap","alignItems","Folder","width","height","fill","fontWeight"],"mappings":"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"}