@strapi/upload 5.15.0 → 5.16.0

package/dist/admin/components/AssetCard/AssetCard.js

@@ -14,7 +14,7 @@ var DocAssetCard = require('./DocAssetCard.js');
 var ImageAssetCard = require('./ImageAssetCard.js');
 var VideoAssetCard = require('./VideoAssetCard.js');
 
-const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
+const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false, className })=>{
     const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
     const commonAssetCardProps = {
         id: asset.id,
@@ -27,7 +27,8 @@ const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size
         onSelect: handleSelect,
         onRemove: onRemove ? ()=>onRemove(asset) : undefined,
         selected: isSelected,
-        size
+        size,
+        className
     };
     if (asset.mime?.includes(constants.AssetType.Video)) {
         return /*#__PURE__*/ jsxRuntime.jsx(VideoAssetCard.VideoAssetCard, {

package/dist/admin/components/AssetCard/AssetCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCard.js","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,iCAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,8BAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,cAACC,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,cAACG,CAAAA,6BAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,wDAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,cAACc,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,cAACe,CAAAA,yBAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}
+{"version":3,"file":"AssetCard.js","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n  className?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n  className,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n    className,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","className","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;;;AA2BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAO,GAAA,GAAG,EACVC,KAAQ,GAAA,KAAK,EACbC,SAAS,EACM,GAAA;AACf,IAAA,MAAMC,YAAeN,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASS,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIX,MAAMW,EAAE;AACZC,QAAAA,YAAAA,EAAcZ,MAAMY,YAAY;QAChCC,SAAWC,EAAAA,iCAAAA,CAAiBd,MAAMe,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMhB,MAAMgB,IAAI;AAChBC,QAAAA,GAAAA,EAAKX,KAAQN,GAAAA,KAAAA,CAAMiB,GAAG,GAAIC,8BAAelB,KAAO,EAAA,IAAA,CAAA;AAChDmB,QAAAA,IAAAA,EAAMnB,MAAMmB,IAAI;QAChBhB,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASS,CAAAA,GAAAA,SAAAA;QACvCP,QAAUM,EAAAA,YAAAA;QACVJ,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASS,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUnB,EAAAA,UAAAA;AACVI,QAAAA,IAAAA;AACAE,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIP,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,cAACC,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,cAACG,CAAAA,6BAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK5B,KAAM6B,CAAAA,eAAe,IAAI7B,KAAAA,CAAMgB,IAAI;AACxCc,YAAAA,MAAAA,EAAQ9B,MAAM8B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,wDAA4BhC,KAAOiC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOjB,MAAMiB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOlC,MAAMkC,KAAK;AAClBC,YAAAA,SAAAA,EAAWnC,MAAMmC,SAAS;AAC1BC,YAAAA,WAAAA,EAAapC,OAAOoC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,cAACc,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,cAACe,CAAAA,yBAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

package/dist/admin/components/AssetCard/AssetCard.mjs

@@ -12,7 +12,7 @@ import { DocAssetCard } from './DocAssetCard.mjs';
 import { ImageAssetCard } from './ImageAssetCard.mjs';
 import { VideoAssetCard } from './VideoAssetCard.mjs';
 
-const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
+const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false, className })=>{
     const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
     const commonAssetCardProps = {
         id: asset.id,
@@ -25,7 +25,8 @@ const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size
         onSelect: handleSelect,
         onRemove: onRemove ? ()=>onRemove(asset) : undefined,
         selected: isSelected,
-        size
+        size,
+        className
     };
     if (asset.mime?.includes(AssetType.Video)) {
         return /*#__PURE__*/ jsx(VideoAssetCard, {

package/dist/admin/components/AssetCard/AssetCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,gBAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,eAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,GAACC,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,GAACG,CAAAA,cAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,4BAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,GAACc,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,GAACe,CAAAA,YAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}
+{"version":3,"file":"AssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n  className?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n  className,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n    className,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","className","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;AA2BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAO,GAAA,GAAG,EACVC,KAAQ,GAAA,KAAK,EACbC,SAAS,EACM,GAAA;AACf,IAAA,MAAMC,YAAeN,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASS,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIX,MAAMW,EAAE;AACZC,QAAAA,YAAAA,EAAcZ,MAAMY,YAAY;QAChCC,SAAWC,EAAAA,gBAAAA,CAAiBd,MAAMe,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMhB,MAAMgB,IAAI;AAChBC,QAAAA,GAAAA,EAAKX,KAAQN,GAAAA,KAAAA,CAAMiB,GAAG,GAAIC,eAAelB,KAAO,EAAA,IAAA,CAAA;AAChDmB,QAAAA,IAAAA,EAAMnB,MAAMmB,IAAI;QAChBhB,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASS,CAAAA,GAAAA,SAAAA;QACvCP,QAAUM,EAAAA,YAAAA;QACVJ,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASS,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUnB,EAAAA,UAAAA;AACVI,QAAAA,IAAAA;AACAE,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIP,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,GAACC,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,GAACG,CAAAA,cAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK5B,KAAM6B,CAAAA,eAAe,IAAI7B,KAAAA,CAAMgB,IAAI;AACxCc,YAAAA,MAAAA,EAAQ9B,MAAM8B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,4BAA4BhC,KAAOiC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOjB,MAAMiB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOlC,MAAMkC,KAAK;AAClBC,YAAAA,SAAAA,EAAWnC,MAAMmC,SAAS;AAC1BC,YAAAA,WAAAA,EAAapC,OAAOoC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIV,MAAMmB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,GAACc,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,GAACe,CAAAA,YAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

package/dist/admin/components/AssetCard/AssetCardBase.js

@@ -18,11 +18,15 @@ const Extension = styledComponents.styled.span`
 `;
 const CardActionsContainer = styledComponents.styled(designSystem.CardAction)`
   opacity: 0;
+  z-index: 1;
 
   &:focus-within {
     opacity: 1;
   }
 `;
+const CardCheckboxWrapper = styledComponents.styled.div`
+  z-index: 1;
+`;
 const CardContainer = styledComponents.styled(designSystem.Card)`
   cursor: pointer;
 
@@ -32,7 +36,7 @@ const CardContainer = styledComponents.styled(designSystem.Card)`
     }
   }
 `;
-const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
+const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image', className })=>{
     const { formatMessage } = reactIntl.useIntl();
     const handleClick = (e)=>{
         if (onEdit) {
@@ -47,6 +51,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         e.stopPropagation();
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+        className: className,
         role: "button",
         height: "100%",
         tabIndex: -1,
@@ -54,7 +59,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardHeader, {
                 children: [
-                    isSelectable && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    isSelectable && /*#__PURE__*/ jsxRuntime.jsx(CardCheckboxWrapper, {
                         onClick: handlePropagationClick,
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardCheckbox, {
                             checked: selected,

package/dist/admin/components/AssetCard/AssetCardBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCardBase.js","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer role=\"button\" height=\"100%\" tabIndex={-1} onClick={handleClick}>\n      <CardHeader>\n        {isSelectable && (\n          <div onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </div>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","div","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}
+{"version":3,"file":"AssetCardBase.js","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n  z-index: 1;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardCheckboxWrapper = styled.div`\n  z-index: 1;\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n  className?: string;\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n  className,\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer\n      className={className}\n      role=\"button\"\n      height=\"100%\"\n      tabIndex={-1}\n      onClick={handleClick}\n    >\n      <CardHeader>\n        {isSelectable && (\n          <CardCheckboxWrapper onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </CardCheckboxWrapper>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardCheckboxWrapper","div","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","className","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}

package/dist/admin/components/AssetCard/AssetCardBase.mjs

@@ -16,11 +16,15 @@ const Extension = styled.span`
 `;
 const CardActionsContainer = styled(CardAction)`
   opacity: 0;
+  z-index: 1;
 
   &:focus-within {
     opacity: 1;
   }
 `;
+const CardCheckboxWrapper = styled.div`
+  z-index: 1;
+`;
 const CardContainer = styled(Card)`
   cursor: pointer;
 
@@ -30,7 +34,7 @@ const CardContainer = styled(Card)`
     }
   }
 `;
-const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
+const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image', className })=>{
     const { formatMessage } = useIntl();
     const handleClick = (e)=>{
         if (onEdit) {
@@ -45,6 +49,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         e.stopPropagation();
     };
     return /*#__PURE__*/ jsxs(CardContainer, {
+        className: className,
         role: "button",
         height: "100%",
         tabIndex: -1,
@@ -52,7 +57,7 @@ const AssetCardBase = ({ children, extension, isSelectable = false, name, onSele
         children: [
             /*#__PURE__*/ jsxs(CardHeader, {
                 children: [
-                    isSelectable && /*#__PURE__*/ jsx("div", {
+                    isSelectable && /*#__PURE__*/ jsx(CardCheckboxWrapper, {
                         onClick: handlePropagationClick,
                         children: /*#__PURE__*/ jsx(CardCheckbox, {
                             checked: selected,

package/dist/admin/components/AssetCard/AssetCardBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetCardBase.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer role=\"button\" height=\"100%\" tabIndex={-1} onClick={handleClick}>\n      <CardHeader>\n        {isSelectable && (\n          <div onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </div>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","div","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}
+{"version":3,"file":"AssetCardBase.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n  z-index: 1;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardCheckboxWrapper = styled.div`\n  z-index: 1;\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n  className?: string;\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n  className,\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer\n      className={className}\n      role=\"button\"\n      height=\"100%\"\n      tabIndex={-1}\n      onClick={handleClick}\n    >\n      <CardHeader>\n        {isSelectable && (\n          <CardCheckboxWrapper onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </CardCheckboxWrapper>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardCheckboxWrapper","div","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","className","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}

package/dist/admin/components/AssetDialog/AssetDialog.js

@@ -87,6 +87,7 @@ const AssetContent = ({ allowedTypes = [], folderId = null, onClose, onAddAsset,
     };
     const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;
     const hasError = errorAssets || errorFolders;
+    const [activeTab, setActiveTab] = React__namespace.useState(selectedAssets.length > 0 ? 'selected' : 'browse');
     if (isLoading) {
         return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [
@@ -193,7 +194,8 @@ const AssetContent = ({ allowedTypes = [], folderId = null, onClose, onAddAsset,
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(TabsRoot, {
                 variant: "simple",
-                defaultValue: selectedAssets.length > 0 ? 'selected' : 'browse',
+                value: activeTab,
+                onValueChange: setActiveTab,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                         paddingLeft: 8,

package/dist/admin/components/AssetDialog/AssetDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetDialog.js","sources":["../../../../admin/src/components/AssetDialog/AssetDialog.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { Badge, Button, Divider, Flex, Loader, Modal, Tabs } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAssets } from '../../hooks/useAssets';\nimport { useFolders } from '../../hooks/useFolders';\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { useModalQueryParams } from '../../hooks/useModalQueryParams';\nimport { useSelectionState } from '../../hooks/useSelectionState';\nimport {\n  containsAssetFilter,\n  getTrad,\n  getAllowedFiles,\n  moveElement,\n  AllowedFiles,\n} from '../../utils';\nimport { EditAssetContent, Asset as EditAsset } from '../EditAssetDialog/EditAssetContent';\nimport { EditFolderContent } from '../EditFolderDialog/EditFolderDialog';\n\nimport {\n  BrowseStep,\n  FolderWithType,\n  FileWithType,\n  Filter as BrowseFilter,\n} from './BrowseStep/BrowseStep';\nimport { DialogFooter } from './DialogFooter';\nimport { SelectedStep } from './SelectedStep/SelectedStep';\n\nimport type { File as Asset, FilterCondition, Query } from '../../../../shared/contracts/files';\nimport type { Folder, FolderDefinition } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60vh + 8rem)`};\n`;\n\nexport interface FileRow extends Asset {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\ninterface AssetContentProps {\n  allowedTypes?: AllowedTypes[];\n  folderId?: number | null;\n  onClose: () => void;\n  onAddAsset: (arg?: { folderId: number | { id: number } | null | undefined }) => void;\n  onAddFolder: ({ folderId }: { folderId: number | { id: number } | null | undefined }) => void;\n  onChangeFolder: (folderId: number | null) => void;\n  onValidate: (selectedAssets: Asset[]) => void;\n  multiple?: boolean;\n  trackedLocation?: string;\n  initiallySelectedAssets?: Asset[];\n}\n\nexport const AssetContent = ({\n  allowedTypes = [],\n  folderId = null,\n  onClose,\n  onAddAsset,\n  onAddFolder,\n  onChangeFolder,\n  onValidate,\n  multiple = false,\n  initiallySelectedAssets = [],\n  trackedLocation,\n}: AssetContentProps) => {\n  const [assetToEdit, setAssetToEdit] = React.useState<FileWithType | undefined>(undefined);\n  const [folderToEdit, setFolderToEdit] = React.useState<FolderRow | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const {\n    canRead,\n    canCreate,\n    isLoading: isLoadingPermissions,\n    canUpdate,\n    canCopyLink,\n    canDownload,\n  } = useMediaLibraryPermissions();\n\n  const [\n    { queryObject },\n    {\n      onChangeFilters,\n      onChangePage,\n      onChangePageSize,\n      onChangeSort,\n      onChangeSearch,\n      onChangeFolder: onChangeFolderParam,\n    },\n  ] = useModalQueryParams({ folder: folderId });\n\n  const {\n    data: { pagination, results: assets } = {},\n    isLoading: isLoadingAssets,\n    error: errorAssets,\n  } = useAssets({ skipWhen: !canRead, query: queryObject });\n\n  const {\n    data: folders,\n    isLoading: isLoadingFolders,\n    error: errorFolders,\n  } = useFolders({\n    enabled: canRead && !containsAssetFilter(queryObject!) && pagination?.page === 1,\n    query: queryObject,\n  });\n\n  const [\n    selectedAssets,\n    { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple },\n  ] = useSelectionState(['id'], initiallySelectedAssets);\n\n  const handleSelectAllAssets = () => {\n    const allowedAssets = getAllowedFiles(allowedTypes, assets as AllowedFiles[]);\n\n    if (!multiple) {\n      return undefined;\n    }\n\n    // selected files in current folder\n    const alreadySelected = allowedAssets.filter(\n      (asset) => selectedAssets.findIndex((selectedAsset) => selectedAsset.id === asset.id) !== -1\n    );\n\n    if (alreadySelected.length > 0) {\n      deselectMultiple(alreadySelected);\n    } else {\n      selectMultiple(allowedAssets);\n    }\n  };\n\n  const handleSelectAsset = (asset: Asset | FileRow | FolderRow) => {\n    return multiple ? selectOne(asset as Asset) : selectOnly(asset as Asset);\n  };\n\n  const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;\n  const hasError = errorAssets || errorFolders;\n\n  if (isLoading) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <LoadingBody justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (hasError) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.Error />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.NoPermissions />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (assetToEdit) {\n    return (\n      <EditAssetContent\n        onClose={() => setAssetToEdit(undefined)}\n        asset={assetToEdit as EditAsset}\n        canUpdate={canUpdate}\n        canCopyLink={canCopyLink}\n        canDownload={canDownload}\n        trackedLocation={trackedLocation}\n      />\n    );\n  }\n\n  if (folderToEdit) {\n    return (\n      <EditFolderContent\n        folder={folderToEdit as FolderDefinition}\n        onClose={() => setFolderToEdit(undefined)}\n        location=\"content-manager\"\n        parentFolderId={queryObject?.folder as string | number | null | undefined}\n      />\n    );\n  }\n\n  const handleMoveItem = (hoverIndex: number, destIndex: number) => {\n    const offset = destIndex - hoverIndex;\n    const orderedAssetsClone = selectedAssets.slice();\n    const nextAssets = moveElement<Asset>(orderedAssetsClone, hoverIndex, offset);\n    setSelections(nextAssets);\n  };\n\n  const handleFolderChange = (folderId: number, folderPath?: string) => {\n    onChangeFolder(folderId);\n    if (onChangeFolderParam) {\n      onChangeFolderParam(folderId, folderPath);\n    }\n  };\n\n  return (\n    <>\n      <Modal.Header>\n        <Modal.Title>\n          {formatMessage({\n            id: getTrad('header.actions.add-assets'),\n            defaultMessage: 'Add new assets',\n          })}\n        </Modal.Title>\n      </Modal.Header>\n\n      <TabsRoot variant=\"simple\" defaultValue={selectedAssets.length > 0 ? 'selected' : 'browse'}>\n        <Flex paddingLeft={8} paddingRight={8} paddingTop={6} justifyContent=\"space-between\">\n          <Tabs.List>\n            <Tabs.Trigger value=\"browse\">\n              {formatMessage({\n                id: getTrad('modal.nav.browse'),\n                defaultMessage: 'Browse',\n              })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"selected\">\n              {formatMessage({\n                id: getTrad('modal.header.select-files'),\n                defaultMessage: 'Selected files',\n              })}\n              <Badge marginLeft={2}>{selectedAssets.length}</Badge>\n            </Tabs.Trigger>\n          </Tabs.List>\n          <Flex gap={2}>\n            <Button\n              variant=\"secondary\"\n              onClick={() => onAddFolder({ folderId: queryObject?.folder })}\n            >\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.add-folder'),\n                defaultMessage: 'Add folder',\n              })}\n            </Button>\n            <Button onClick={() => onAddAsset({ folderId: queryObject?.folder })}>\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.button'),\n                defaultMessage: 'Add more assets',\n              })}\n            </Button>\n          </Flex>\n        </Flex>\n        <Divider />\n        <Modal.Body>\n          <Tabs.Content value=\"browse\">\n            <BrowseStep\n              allowedTypes={allowedTypes}\n              assets={assets!}\n              canCreate={canCreate}\n              canRead={canRead}\n              folders={folders as FolderWithType[]}\n              onSelectAsset={handleSelectAsset}\n              selectedAssets={selectedAssets}\n              multiple={multiple}\n              onSelectAllAsset={handleSelectAllAssets}\n              onEditAsset={setAssetToEdit}\n              onEditFolder={setFolderToEdit}\n              pagination={pagination!}\n              queryObject={queryObject!}\n              onAddAsset={onAddAsset}\n              onChangeFilters={(filters: FilterCondition<string>[] | BrowseFilter[]) =>\n                onChangeFilters!(filters as FilterCondition<string>[])\n              }\n              onChangeFolder={handleFolderChange}\n              onChangePage={onChangePage!}\n              onChangePageSize={onChangePageSize!}\n              onChangeSort={(sort: string | undefined) => onChangeSort!(sort as Query['sort'])}\n              onChangeSearch={onChangeSearch!}\n            />\n          </Tabs.Content>\n          <Tabs.Content value=\"selected\">\n            <SelectedStep\n              selectedAssets={selectedAssets}\n              onSelectAsset={handleSelectAsset}\n              onReorderAsset={handleMoveItem}\n            />\n          </Tabs.Content>\n        </Modal.Body>\n      </TabsRoot>\n      <DialogFooter onClose={onClose} onValidate={() => onValidate(selectedAssets)} />\n    </>\n  );\n};\n\ninterface AssetDialogProps extends AssetContentProps {\n  open?: boolean;\n}\n\nexport const AssetDialog = ({ open = false, onClose, ...restProps }: AssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <AssetContent onClose={onClose} {...restProps} />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n\nconst TabsRoot = styled(Tabs.Root)`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n"],"names":["LoadingBody","styled","Flex","AssetContent","allowedTypes","folderId","onClose","onAddAsset","onAddFolder","onChangeFolder","onValidate","multiple","initiallySelectedAssets","trackedLocation","assetToEdit","setAssetToEdit","React","useState","undefined","folderToEdit","setFolderToEdit","formatMessage","useIntl","canRead","canCreate","isLoading","isLoadingPermissions","canUpdate","canCopyLink","canDownload","useMediaLibraryPermissions","queryObject","onChangeFilters","onChangePage","onChangePageSize","onChangeSort","onChangeSearch","onChangeFolderParam","useModalQueryParams","folder","data","pagination","results","assets","isLoadingAssets","error","errorAssets","useAssets","skipWhen","query","folders","isLoadingFolders","errorFolders","useFolders","enabled","containsAssetFilter","page","selectedAssets","selectOne","selectOnly","setSelections","selectMultiple","deselectMultiple","useSelectionState","handleSelectAllAssets","allowedAssets","getAllowedFiles","alreadySelected","filter","asset","findIndex","selectedAsset","id","length","handleSelectAsset","hasError","_jsxs","_Fragment","_jsx","Modal","Header","Title","getTrad","defaultMessage","justifyContent","paddingTop","paddingBottom","Loader","DialogFooter","Page","Error","NoPermissions","EditAssetContent","EditFolderContent","location","parentFolderId","handleMoveItem","hoverIndex","destIndex","offset","orderedAssetsClone","slice","nextAssets","moveElement","handleFolderChange","folderPath","TabsRoot","variant","defaultValue","paddingLeft","paddingRight","Tabs","List","Trigger","value","Badge","marginLeft","gap","Button","onClick","Divider","Body","Content","BrowseStep","onSelectAsset","onSelectAllAsset","onEditAsset","onEditFolder","filters","sort","SelectedStep","onReorderAsset","AssetDialog","open","restProps","Root","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"AssetDialog.js","sources":["../../../../admin/src/components/AssetDialog/AssetDialog.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { Badge, Button, Divider, Flex, Loader, Modal, Tabs } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAssets } from '../../hooks/useAssets';\nimport { useFolders } from '../../hooks/useFolders';\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { useModalQueryParams } from '../../hooks/useModalQueryParams';\nimport { useSelectionState } from '../../hooks/useSelectionState';\nimport {\n  containsAssetFilter,\n  getTrad,\n  getAllowedFiles,\n  moveElement,\n  AllowedFiles,\n} from '../../utils';\nimport { EditAssetContent, Asset as EditAsset } from '../EditAssetDialog/EditAssetContent';\nimport { EditFolderContent } from '../EditFolderDialog/EditFolderDialog';\n\nimport {\n  BrowseStep,\n  FolderWithType,\n  FileWithType,\n  Filter as BrowseFilter,\n} from './BrowseStep/BrowseStep';\nimport { DialogFooter } from './DialogFooter';\nimport { SelectedStep } from './SelectedStep/SelectedStep';\n\nimport type { File as Asset, FilterCondition, Query } from '../../../../shared/contracts/files';\nimport type { Folder, FolderDefinition } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60vh + 8rem)`};\n`;\n\nexport interface FileRow extends Asset {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\ninterface AssetContentProps {\n  allowedTypes?: AllowedTypes[];\n  folderId?: number | null;\n  onClose: () => void;\n  onAddAsset: (arg?: { folderId: number | { id: number } | null | undefined }) => void;\n  onAddFolder: ({ folderId }: { folderId: number | { id: number } | null | undefined }) => void;\n  onChangeFolder: (folderId: number | null) => void;\n  onValidate: (selectedAssets: Asset[]) => void;\n  multiple?: boolean;\n  trackedLocation?: string;\n  initiallySelectedAssets?: Asset[];\n}\n\nexport const AssetContent = ({\n  allowedTypes = [],\n  folderId = null,\n  onClose,\n  onAddAsset,\n  onAddFolder,\n  onChangeFolder,\n  onValidate,\n  multiple = false,\n  initiallySelectedAssets = [],\n  trackedLocation,\n}: AssetContentProps) => {\n  const [assetToEdit, setAssetToEdit] = React.useState<FileWithType | undefined>(undefined);\n  const [folderToEdit, setFolderToEdit] = React.useState<FolderRow | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const {\n    canRead,\n    canCreate,\n    isLoading: isLoadingPermissions,\n    canUpdate,\n    canCopyLink,\n    canDownload,\n  } = useMediaLibraryPermissions();\n\n  const [\n    { queryObject },\n    {\n      onChangeFilters,\n      onChangePage,\n      onChangePageSize,\n      onChangeSort,\n      onChangeSearch,\n      onChangeFolder: onChangeFolderParam,\n    },\n  ] = useModalQueryParams({ folder: folderId });\n\n  const {\n    data: { pagination, results: assets } = {},\n    isLoading: isLoadingAssets,\n    error: errorAssets,\n  } = useAssets({ skipWhen: !canRead, query: queryObject });\n\n  const {\n    data: folders,\n    isLoading: isLoadingFolders,\n    error: errorFolders,\n  } = useFolders({\n    enabled: canRead && !containsAssetFilter(queryObject!) && pagination?.page === 1,\n    query: queryObject,\n  });\n\n  const [\n    selectedAssets,\n    { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple },\n  ] = useSelectionState(['id'], initiallySelectedAssets);\n\n  const handleSelectAllAssets = () => {\n    const allowedAssets = getAllowedFiles(allowedTypes, assets as AllowedFiles[]);\n\n    if (!multiple) {\n      return undefined;\n    }\n\n    // selected files in current folder\n    const alreadySelected = allowedAssets.filter(\n      (asset) => selectedAssets.findIndex((selectedAsset) => selectedAsset.id === asset.id) !== -1\n    );\n\n    if (alreadySelected.length > 0) {\n      deselectMultiple(alreadySelected);\n    } else {\n      selectMultiple(allowedAssets);\n    }\n  };\n\n  const handleSelectAsset = (asset: Asset | FileRow | FolderRow) => {\n    return multiple ? selectOne(asset as Asset) : selectOnly(asset as Asset);\n  };\n\n  const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;\n  const hasError = errorAssets || errorFolders;\n\n  const [activeTab, setActiveTab] = React.useState(\n    selectedAssets.length > 0 ? 'selected' : 'browse'\n  );\n\n  if (isLoading) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <LoadingBody justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (hasError) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.Error />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.NoPermissions />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (assetToEdit) {\n    return (\n      <EditAssetContent\n        onClose={() => setAssetToEdit(undefined)}\n        asset={assetToEdit as EditAsset}\n        canUpdate={canUpdate}\n        canCopyLink={canCopyLink}\n        canDownload={canDownload}\n        trackedLocation={trackedLocation}\n      />\n    );\n  }\n\n  if (folderToEdit) {\n    return (\n      <EditFolderContent\n        folder={folderToEdit as FolderDefinition}\n        onClose={() => setFolderToEdit(undefined)}\n        location=\"content-manager\"\n        parentFolderId={queryObject?.folder as string | number | null | undefined}\n      />\n    );\n  }\n\n  const handleMoveItem = (hoverIndex: number, destIndex: number) => {\n    const offset = destIndex - hoverIndex;\n    const orderedAssetsClone = selectedAssets.slice();\n    const nextAssets = moveElement<Asset>(orderedAssetsClone, hoverIndex, offset);\n    setSelections(nextAssets);\n  };\n\n  const handleFolderChange = (folderId: number, folderPath?: string) => {\n    onChangeFolder(folderId);\n    if (onChangeFolderParam) {\n      onChangeFolderParam(folderId, folderPath);\n    }\n  };\n\n  return (\n    <>\n      <Modal.Header>\n        <Modal.Title>\n          {formatMessage({\n            id: getTrad('header.actions.add-assets'),\n            defaultMessage: 'Add new assets',\n          })}\n        </Modal.Title>\n      </Modal.Header>\n\n      <TabsRoot variant=\"simple\" value={activeTab} onValueChange={setActiveTab}>\n        <Flex paddingLeft={8} paddingRight={8} paddingTop={6} justifyContent=\"space-between\">\n          <Tabs.List>\n            <Tabs.Trigger value=\"browse\">\n              {formatMessage({\n                id: getTrad('modal.nav.browse'),\n                defaultMessage: 'Browse',\n              })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"selected\">\n              {formatMessage({\n                id: getTrad('modal.header.select-files'),\n                defaultMessage: 'Selected files',\n              })}\n              <Badge marginLeft={2}>{selectedAssets.length}</Badge>\n            </Tabs.Trigger>\n          </Tabs.List>\n          <Flex gap={2}>\n            <Button\n              variant=\"secondary\"\n              onClick={() => onAddFolder({ folderId: queryObject?.folder })}\n            >\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.add-folder'),\n                defaultMessage: 'Add folder',\n              })}\n            </Button>\n            <Button onClick={() => onAddAsset({ folderId: queryObject?.folder })}>\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.button'),\n                defaultMessage: 'Add more assets',\n              })}\n            </Button>\n          </Flex>\n        </Flex>\n        <Divider />\n        <Modal.Body>\n          <Tabs.Content value=\"browse\">\n            <BrowseStep\n              allowedTypes={allowedTypes}\n              assets={assets!}\n              canCreate={canCreate}\n              canRead={canRead}\n              folders={folders as FolderWithType[]}\n              onSelectAsset={handleSelectAsset}\n              selectedAssets={selectedAssets}\n              multiple={multiple}\n              onSelectAllAsset={handleSelectAllAssets}\n              onEditAsset={setAssetToEdit}\n              onEditFolder={setFolderToEdit}\n              pagination={pagination!}\n              queryObject={queryObject!}\n              onAddAsset={onAddAsset}\n              onChangeFilters={(filters: FilterCondition<string>[] | BrowseFilter[]) =>\n                onChangeFilters!(filters as FilterCondition<string>[])\n              }\n              onChangeFolder={handleFolderChange}\n              onChangePage={onChangePage!}\n              onChangePageSize={onChangePageSize!}\n              onChangeSort={(sort: string | undefined) => onChangeSort!(sort as Query['sort'])}\n              onChangeSearch={onChangeSearch!}\n            />\n          </Tabs.Content>\n          <Tabs.Content value=\"selected\">\n            <SelectedStep\n              selectedAssets={selectedAssets}\n              onSelectAsset={handleSelectAsset}\n              onReorderAsset={handleMoveItem}\n            />\n          </Tabs.Content>\n        </Modal.Body>\n      </TabsRoot>\n      <DialogFooter onClose={onClose} onValidate={() => onValidate(selectedAssets)} />\n    </>\n  );\n};\n\ninterface AssetDialogProps extends AssetContentProps {\n  open?: boolean;\n}\n\nexport const AssetDialog = ({ open = false, onClose, ...restProps }: AssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <AssetContent onClose={onClose} {...restProps} />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n\nconst TabsRoot = styled(Tabs.Root)`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n"],"names":["LoadingBody","styled","Flex","AssetContent","allowedTypes","folderId","onClose","onAddAsset","onAddFolder","onChangeFolder","onValidate","multiple","initiallySelectedAssets","trackedLocation","assetToEdit","setAssetToEdit","React","useState","undefined","folderToEdit","setFolderToEdit","formatMessage","useIntl","canRead","canCreate","isLoading","isLoadingPermissions","canUpdate","canCopyLink","canDownload","useMediaLibraryPermissions","queryObject","onChangeFilters","onChangePage","onChangePageSize","onChangeSort","onChangeSearch","onChangeFolderParam","useModalQueryParams","folder","data","pagination","results","assets","isLoadingAssets","error","errorAssets","useAssets","skipWhen","query","folders","isLoadingFolders","errorFolders","useFolders","enabled","containsAssetFilter","page","selectedAssets","selectOne","selectOnly","setSelections","selectMultiple","deselectMultiple","useSelectionState","handleSelectAllAssets","allowedAssets","getAllowedFiles","alreadySelected","filter","asset","findIndex","selectedAsset","id","length","handleSelectAsset","hasError","activeTab","setActiveTab","_jsxs","_Fragment","_jsx","Modal","Header","Title","getTrad","defaultMessage","justifyContent","paddingTop","paddingBottom","Loader","DialogFooter","Page","Error","NoPermissions","EditAssetContent","EditFolderContent","location","parentFolderId","handleMoveItem","hoverIndex","destIndex","offset","orderedAssetsClone","slice","nextAssets","moveElement","handleFolderChange","folderPath","TabsRoot","variant","value","onValueChange","paddingLeft","paddingRight","Tabs","List","Trigger","Badge","marginLeft","gap","Button","onClick","Divider","Body","Content","BrowseStep","onSelectAsset","onSelectAllAsset","onEditAsset","onEditFolder","filters","sort","SelectedStep","onReorderAsset","AssetDialog","open","restProps","Root","onOpenChange"],"mappings":"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"}

package/dist/admin/components/AssetDialog/AssetDialog.mjs

@@ -66,6 +66,7 @@ const AssetContent = ({ allowedTypes = [], folderId = null, onClose, onAddAsset,
     };
     const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;
     const hasError = errorAssets || errorFolders;
+    const [activeTab, setActiveTab] = React.useState(selectedAssets.length > 0 ? 'selected' : 'browse');
     if (isLoading) {
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
@@ -172,7 +173,8 @@ const AssetContent = ({ allowedTypes = [], folderId = null, onClose, onAddAsset,
             }),
             /*#__PURE__*/ jsxs(TabsRoot, {
                 variant: "simple",
-                defaultValue: selectedAssets.length > 0 ? 'selected' : 'browse',
+                value: activeTab,
+                onValueChange: setActiveTab,
                 children: [
                     /*#__PURE__*/ jsxs(Flex, {
                         paddingLeft: 8,

package/dist/admin/components/AssetDialog/AssetDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetDialog.mjs","sources":["../../../../admin/src/components/AssetDialog/AssetDialog.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { Badge, Button, Divider, Flex, Loader, Modal, Tabs } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAssets } from '../../hooks/useAssets';\nimport { useFolders } from '../../hooks/useFolders';\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { useModalQueryParams } from '../../hooks/useModalQueryParams';\nimport { useSelectionState } from '../../hooks/useSelectionState';\nimport {\n  containsAssetFilter,\n  getTrad,\n  getAllowedFiles,\n  moveElement,\n  AllowedFiles,\n} from '../../utils';\nimport { EditAssetContent, Asset as EditAsset } from '../EditAssetDialog/EditAssetContent';\nimport { EditFolderContent } from '../EditFolderDialog/EditFolderDialog';\n\nimport {\n  BrowseStep,\n  FolderWithType,\n  FileWithType,\n  Filter as BrowseFilter,\n} from './BrowseStep/BrowseStep';\nimport { DialogFooter } from './DialogFooter';\nimport { SelectedStep } from './SelectedStep/SelectedStep';\n\nimport type { File as Asset, FilterCondition, Query } from '../../../../shared/contracts/files';\nimport type { Folder, FolderDefinition } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60vh + 8rem)`};\n`;\n\nexport interface FileRow extends Asset {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\ninterface AssetContentProps {\n  allowedTypes?: AllowedTypes[];\n  folderId?: number | null;\n  onClose: () => void;\n  onAddAsset: (arg?: { folderId: number | { id: number } | null | undefined }) => void;\n  onAddFolder: ({ folderId }: { folderId: number | { id: number } | null | undefined }) => void;\n  onChangeFolder: (folderId: number | null) => void;\n  onValidate: (selectedAssets: Asset[]) => void;\n  multiple?: boolean;\n  trackedLocation?: string;\n  initiallySelectedAssets?: Asset[];\n}\n\nexport const AssetContent = ({\n  allowedTypes = [],\n  folderId = null,\n  onClose,\n  onAddAsset,\n  onAddFolder,\n  onChangeFolder,\n  onValidate,\n  multiple = false,\n  initiallySelectedAssets = [],\n  trackedLocation,\n}: AssetContentProps) => {\n  const [assetToEdit, setAssetToEdit] = React.useState<FileWithType | undefined>(undefined);\n  const [folderToEdit, setFolderToEdit] = React.useState<FolderRow | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const {\n    canRead,\n    canCreate,\n    isLoading: isLoadingPermissions,\n    canUpdate,\n    canCopyLink,\n    canDownload,\n  } = useMediaLibraryPermissions();\n\n  const [\n    { queryObject },\n    {\n      onChangeFilters,\n      onChangePage,\n      onChangePageSize,\n      onChangeSort,\n      onChangeSearch,\n      onChangeFolder: onChangeFolderParam,\n    },\n  ] = useModalQueryParams({ folder: folderId });\n\n  const {\n    data: { pagination, results: assets } = {},\n    isLoading: isLoadingAssets,\n    error: errorAssets,\n  } = useAssets({ skipWhen: !canRead, query: queryObject });\n\n  const {\n    data: folders,\n    isLoading: isLoadingFolders,\n    error: errorFolders,\n  } = useFolders({\n    enabled: canRead && !containsAssetFilter(queryObject!) && pagination?.page === 1,\n    query: queryObject,\n  });\n\n  const [\n    selectedAssets,\n    { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple },\n  ] = useSelectionState(['id'], initiallySelectedAssets);\n\n  const handleSelectAllAssets = () => {\n    const allowedAssets = getAllowedFiles(allowedTypes, assets as AllowedFiles[]);\n\n    if (!multiple) {\n      return undefined;\n    }\n\n    // selected files in current folder\n    const alreadySelected = allowedAssets.filter(\n      (asset) => selectedAssets.findIndex((selectedAsset) => selectedAsset.id === asset.id) !== -1\n    );\n\n    if (alreadySelected.length > 0) {\n      deselectMultiple(alreadySelected);\n    } else {\n      selectMultiple(allowedAssets);\n    }\n  };\n\n  const handleSelectAsset = (asset: Asset | FileRow | FolderRow) => {\n    return multiple ? selectOne(asset as Asset) : selectOnly(asset as Asset);\n  };\n\n  const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;\n  const hasError = errorAssets || errorFolders;\n\n  if (isLoading) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <LoadingBody justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (hasError) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.Error />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.NoPermissions />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (assetToEdit) {\n    return (\n      <EditAssetContent\n        onClose={() => setAssetToEdit(undefined)}\n        asset={assetToEdit as EditAsset}\n        canUpdate={canUpdate}\n        canCopyLink={canCopyLink}\n        canDownload={canDownload}\n        trackedLocation={trackedLocation}\n      />\n    );\n  }\n\n  if (folderToEdit) {\n    return (\n      <EditFolderContent\n        folder={folderToEdit as FolderDefinition}\n        onClose={() => setFolderToEdit(undefined)}\n        location=\"content-manager\"\n        parentFolderId={queryObject?.folder as string | number | null | undefined}\n      />\n    );\n  }\n\n  const handleMoveItem = (hoverIndex: number, destIndex: number) => {\n    const offset = destIndex - hoverIndex;\n    const orderedAssetsClone = selectedAssets.slice();\n    const nextAssets = moveElement<Asset>(orderedAssetsClone, hoverIndex, offset);\n    setSelections(nextAssets);\n  };\n\n  const handleFolderChange = (folderId: number, folderPath?: string) => {\n    onChangeFolder(folderId);\n    if (onChangeFolderParam) {\n      onChangeFolderParam(folderId, folderPath);\n    }\n  };\n\n  return (\n    <>\n      <Modal.Header>\n        <Modal.Title>\n          {formatMessage({\n            id: getTrad('header.actions.add-assets'),\n            defaultMessage: 'Add new assets',\n          })}\n        </Modal.Title>\n      </Modal.Header>\n\n      <TabsRoot variant=\"simple\" defaultValue={selectedAssets.length > 0 ? 'selected' : 'browse'}>\n        <Flex paddingLeft={8} paddingRight={8} paddingTop={6} justifyContent=\"space-between\">\n          <Tabs.List>\n            <Tabs.Trigger value=\"browse\">\n              {formatMessage({\n                id: getTrad('modal.nav.browse'),\n                defaultMessage: 'Browse',\n              })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"selected\">\n              {formatMessage({\n                id: getTrad('modal.header.select-files'),\n                defaultMessage: 'Selected files',\n              })}\n              <Badge marginLeft={2}>{selectedAssets.length}</Badge>\n            </Tabs.Trigger>\n          </Tabs.List>\n          <Flex gap={2}>\n            <Button\n              variant=\"secondary\"\n              onClick={() => onAddFolder({ folderId: queryObject?.folder })}\n            >\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.add-folder'),\n                defaultMessage: 'Add folder',\n              })}\n            </Button>\n            <Button onClick={() => onAddAsset({ folderId: queryObject?.folder })}>\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.button'),\n                defaultMessage: 'Add more assets',\n              })}\n            </Button>\n          </Flex>\n        </Flex>\n        <Divider />\n        <Modal.Body>\n          <Tabs.Content value=\"browse\">\n            <BrowseStep\n              allowedTypes={allowedTypes}\n              assets={assets!}\n              canCreate={canCreate}\n              canRead={canRead}\n              folders={folders as FolderWithType[]}\n              onSelectAsset={handleSelectAsset}\n              selectedAssets={selectedAssets}\n              multiple={multiple}\n              onSelectAllAsset={handleSelectAllAssets}\n              onEditAsset={setAssetToEdit}\n              onEditFolder={setFolderToEdit}\n              pagination={pagination!}\n              queryObject={queryObject!}\n              onAddAsset={onAddAsset}\n              onChangeFilters={(filters: FilterCondition<string>[] | BrowseFilter[]) =>\n                onChangeFilters!(filters as FilterCondition<string>[])\n              }\n              onChangeFolder={handleFolderChange}\n              onChangePage={onChangePage!}\n              onChangePageSize={onChangePageSize!}\n              onChangeSort={(sort: string | undefined) => onChangeSort!(sort as Query['sort'])}\n              onChangeSearch={onChangeSearch!}\n            />\n          </Tabs.Content>\n          <Tabs.Content value=\"selected\">\n            <SelectedStep\n              selectedAssets={selectedAssets}\n              onSelectAsset={handleSelectAsset}\n              onReorderAsset={handleMoveItem}\n            />\n          </Tabs.Content>\n        </Modal.Body>\n      </TabsRoot>\n      <DialogFooter onClose={onClose} onValidate={() => onValidate(selectedAssets)} />\n    </>\n  );\n};\n\ninterface AssetDialogProps extends AssetContentProps {\n  open?: boolean;\n}\n\nexport const AssetDialog = ({ open = false, onClose, ...restProps }: AssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <AssetContent onClose={onClose} {...restProps} />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n\nconst TabsRoot = styled(Tabs.Root)`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n"],"names":["LoadingBody","styled","Flex","AssetContent","allowedTypes","folderId","onClose","onAddAsset","onAddFolder","onChangeFolder","onValidate","multiple","initiallySelectedAssets","trackedLocation","assetToEdit","setAssetToEdit","React","useState","undefined","folderToEdit","setFolderToEdit","formatMessage","useIntl","canRead","canCreate","isLoading","isLoadingPermissions","canUpdate","canCopyLink","canDownload","useMediaLibraryPermissions","queryObject","onChangeFilters","onChangePage","onChangePageSize","onChangeSort","onChangeSearch","onChangeFolderParam","useModalQueryParams","folder","data","pagination","results","assets","isLoadingAssets","error","errorAssets","useAssets","skipWhen","query","folders","isLoadingFolders","errorFolders","useFolders","enabled","containsAssetFilter","page","selectedAssets","selectOne","selectOnly","setSelections","selectMultiple","deselectMultiple","useSelectionState","handleSelectAllAssets","allowedAssets","getAllowedFiles","alreadySelected","filter","asset","findIndex","selectedAsset","id","length","handleSelectAsset","hasError","_jsxs","_Fragment","_jsx","Modal","Header","Title","getTrad","defaultMessage","justifyContent","paddingTop","paddingBottom","Loader","DialogFooter","Page","Error","NoPermissions","EditAssetContent","EditFolderContent","location","parentFolderId","handleMoveItem","hoverIndex","destIndex","offset","orderedAssetsClone","slice","nextAssets","moveElement","handleFolderChange","folderPath","TabsRoot","variant","defaultValue","paddingLeft","paddingRight","Tabs","List","Trigger","value","Badge","marginLeft","gap","Button","onClick","Divider","Body","Content","BrowseStep","onSelectAsset","onSelectAllAsset","onEditAsset","onEditFolder","filters","sort","SelectedStep","onReorderAsset","AssetDialog","open","restProps","Root","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"AssetDialog.mjs","sources":["../../../../admin/src/components/AssetDialog/AssetDialog.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { Badge, Button, Divider, Flex, Loader, Modal, Tabs } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAssets } from '../../hooks/useAssets';\nimport { useFolders } from '../../hooks/useFolders';\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { useModalQueryParams } from '../../hooks/useModalQueryParams';\nimport { useSelectionState } from '../../hooks/useSelectionState';\nimport {\n  containsAssetFilter,\n  getTrad,\n  getAllowedFiles,\n  moveElement,\n  AllowedFiles,\n} from '../../utils';\nimport { EditAssetContent, Asset as EditAsset } from '../EditAssetDialog/EditAssetContent';\nimport { EditFolderContent } from '../EditFolderDialog/EditFolderDialog';\n\nimport {\n  BrowseStep,\n  FolderWithType,\n  FileWithType,\n  Filter as BrowseFilter,\n} from './BrowseStep/BrowseStep';\nimport { DialogFooter } from './DialogFooter';\nimport { SelectedStep } from './SelectedStep/SelectedStep';\n\nimport type { File as Asset, FilterCondition, Query } from '../../../../shared/contracts/files';\nimport type { Folder, FolderDefinition } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60vh + 8rem)`};\n`;\n\nexport interface FileRow extends Asset {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\ninterface AssetContentProps {\n  allowedTypes?: AllowedTypes[];\n  folderId?: number | null;\n  onClose: () => void;\n  onAddAsset: (arg?: { folderId: number | { id: number } | null | undefined }) => void;\n  onAddFolder: ({ folderId }: { folderId: number | { id: number } | null | undefined }) => void;\n  onChangeFolder: (folderId: number | null) => void;\n  onValidate: (selectedAssets: Asset[]) => void;\n  multiple?: boolean;\n  trackedLocation?: string;\n  initiallySelectedAssets?: Asset[];\n}\n\nexport const AssetContent = ({\n  allowedTypes = [],\n  folderId = null,\n  onClose,\n  onAddAsset,\n  onAddFolder,\n  onChangeFolder,\n  onValidate,\n  multiple = false,\n  initiallySelectedAssets = [],\n  trackedLocation,\n}: AssetContentProps) => {\n  const [assetToEdit, setAssetToEdit] = React.useState<FileWithType | undefined>(undefined);\n  const [folderToEdit, setFolderToEdit] = React.useState<FolderRow | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const {\n    canRead,\n    canCreate,\n    isLoading: isLoadingPermissions,\n    canUpdate,\n    canCopyLink,\n    canDownload,\n  } = useMediaLibraryPermissions();\n\n  const [\n    { queryObject },\n    {\n      onChangeFilters,\n      onChangePage,\n      onChangePageSize,\n      onChangeSort,\n      onChangeSearch,\n      onChangeFolder: onChangeFolderParam,\n    },\n  ] = useModalQueryParams({ folder: folderId });\n\n  const {\n    data: { pagination, results: assets } = {},\n    isLoading: isLoadingAssets,\n    error: errorAssets,\n  } = useAssets({ skipWhen: !canRead, query: queryObject });\n\n  const {\n    data: folders,\n    isLoading: isLoadingFolders,\n    error: errorFolders,\n  } = useFolders({\n    enabled: canRead && !containsAssetFilter(queryObject!) && pagination?.page === 1,\n    query: queryObject,\n  });\n\n  const [\n    selectedAssets,\n    { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple },\n  ] = useSelectionState(['id'], initiallySelectedAssets);\n\n  const handleSelectAllAssets = () => {\n    const allowedAssets = getAllowedFiles(allowedTypes, assets as AllowedFiles[]);\n\n    if (!multiple) {\n      return undefined;\n    }\n\n    // selected files in current folder\n    const alreadySelected = allowedAssets.filter(\n      (asset) => selectedAssets.findIndex((selectedAsset) => selectedAsset.id === asset.id) !== -1\n    );\n\n    if (alreadySelected.length > 0) {\n      deselectMultiple(alreadySelected);\n    } else {\n      selectMultiple(allowedAssets);\n    }\n  };\n\n  const handleSelectAsset = (asset: Asset | FileRow | FolderRow) => {\n    return multiple ? selectOne(asset as Asset) : selectOnly(asset as Asset);\n  };\n\n  const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;\n  const hasError = errorAssets || errorFolders;\n\n  const [activeTab, setActiveTab] = React.useState(\n    selectedAssets.length > 0 ? 'selected' : 'browse'\n  );\n\n  if (isLoading) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <LoadingBody justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (hasError) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.Error />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (!canRead) {\n    return (\n      <>\n        <Modal.Header>\n          <Modal.Title>\n            {formatMessage({\n              id: getTrad('header.actions.add-assets'),\n              defaultMessage: 'Add new assets',\n            })}\n          </Modal.Title>\n        </Modal.Header>\n        <Page.NoPermissions />\n        <DialogFooter onClose={onClose} />\n      </>\n    );\n  }\n\n  if (assetToEdit) {\n    return (\n      <EditAssetContent\n        onClose={() => setAssetToEdit(undefined)}\n        asset={assetToEdit as EditAsset}\n        canUpdate={canUpdate}\n        canCopyLink={canCopyLink}\n        canDownload={canDownload}\n        trackedLocation={trackedLocation}\n      />\n    );\n  }\n\n  if (folderToEdit) {\n    return (\n      <EditFolderContent\n        folder={folderToEdit as FolderDefinition}\n        onClose={() => setFolderToEdit(undefined)}\n        location=\"content-manager\"\n        parentFolderId={queryObject?.folder as string | number | null | undefined}\n      />\n    );\n  }\n\n  const handleMoveItem = (hoverIndex: number, destIndex: number) => {\n    const offset = destIndex - hoverIndex;\n    const orderedAssetsClone = selectedAssets.slice();\n    const nextAssets = moveElement<Asset>(orderedAssetsClone, hoverIndex, offset);\n    setSelections(nextAssets);\n  };\n\n  const handleFolderChange = (folderId: number, folderPath?: string) => {\n    onChangeFolder(folderId);\n    if (onChangeFolderParam) {\n      onChangeFolderParam(folderId, folderPath);\n    }\n  };\n\n  return (\n    <>\n      <Modal.Header>\n        <Modal.Title>\n          {formatMessage({\n            id: getTrad('header.actions.add-assets'),\n            defaultMessage: 'Add new assets',\n          })}\n        </Modal.Title>\n      </Modal.Header>\n\n      <TabsRoot variant=\"simple\" value={activeTab} onValueChange={setActiveTab}>\n        <Flex paddingLeft={8} paddingRight={8} paddingTop={6} justifyContent=\"space-between\">\n          <Tabs.List>\n            <Tabs.Trigger value=\"browse\">\n              {formatMessage({\n                id: getTrad('modal.nav.browse'),\n                defaultMessage: 'Browse',\n              })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"selected\">\n              {formatMessage({\n                id: getTrad('modal.header.select-files'),\n                defaultMessage: 'Selected files',\n              })}\n              <Badge marginLeft={2}>{selectedAssets.length}</Badge>\n            </Tabs.Trigger>\n          </Tabs.List>\n          <Flex gap={2}>\n            <Button\n              variant=\"secondary\"\n              onClick={() => onAddFolder({ folderId: queryObject?.folder })}\n            >\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.add-folder'),\n                defaultMessage: 'Add folder',\n              })}\n            </Button>\n            <Button onClick={() => onAddAsset({ folderId: queryObject?.folder })}>\n              {formatMessage({\n                id: getTrad('modal.upload-list.sub-header.button'),\n                defaultMessage: 'Add more assets',\n              })}\n            </Button>\n          </Flex>\n        </Flex>\n        <Divider />\n        <Modal.Body>\n          <Tabs.Content value=\"browse\">\n            <BrowseStep\n              allowedTypes={allowedTypes}\n              assets={assets!}\n              canCreate={canCreate}\n              canRead={canRead}\n              folders={folders as FolderWithType[]}\n              onSelectAsset={handleSelectAsset}\n              selectedAssets={selectedAssets}\n              multiple={multiple}\n              onSelectAllAsset={handleSelectAllAssets}\n              onEditAsset={setAssetToEdit}\n              onEditFolder={setFolderToEdit}\n              pagination={pagination!}\n              queryObject={queryObject!}\n              onAddAsset={onAddAsset}\n              onChangeFilters={(filters: FilterCondition<string>[] | BrowseFilter[]) =>\n                onChangeFilters!(filters as FilterCondition<string>[])\n              }\n              onChangeFolder={handleFolderChange}\n              onChangePage={onChangePage!}\n              onChangePageSize={onChangePageSize!}\n              onChangeSort={(sort: string | undefined) => onChangeSort!(sort as Query['sort'])}\n              onChangeSearch={onChangeSearch!}\n            />\n          </Tabs.Content>\n          <Tabs.Content value=\"selected\">\n            <SelectedStep\n              selectedAssets={selectedAssets}\n              onSelectAsset={handleSelectAsset}\n              onReorderAsset={handleMoveItem}\n            />\n          </Tabs.Content>\n        </Modal.Body>\n      </TabsRoot>\n      <DialogFooter onClose={onClose} onValidate={() => onValidate(selectedAssets)} />\n    </>\n  );\n};\n\ninterface AssetDialogProps extends AssetContentProps {\n  open?: boolean;\n}\n\nexport const AssetDialog = ({ open = false, onClose, ...restProps }: AssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <AssetContent onClose={onClose} {...restProps} />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n\nconst TabsRoot = styled(Tabs.Root)`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n"],"names":["LoadingBody","styled","Flex","AssetContent","allowedTypes","folderId","onClose","onAddAsset","onAddFolder","onChangeFolder","onValidate","multiple","initiallySelectedAssets","trackedLocation","assetToEdit","setAssetToEdit","React","useState","undefined","folderToEdit","setFolderToEdit","formatMessage","useIntl","canRead","canCreate","isLoading","isLoadingPermissions","canUpdate","canCopyLink","canDownload","useMediaLibraryPermissions","queryObject","onChangeFilters","onChangePage","onChangePageSize","onChangeSort","onChangeSearch","onChangeFolderParam","useModalQueryParams","folder","data","pagination","results","assets","isLoadingAssets","error","errorAssets","useAssets","skipWhen","query","folders","isLoadingFolders","errorFolders","useFolders","enabled","containsAssetFilter","page","selectedAssets","selectOne","selectOnly","setSelections","selectMultiple","deselectMultiple","useSelectionState","handleSelectAllAssets","allowedAssets","getAllowedFiles","alreadySelected","filter","asset","findIndex","selectedAsset","id","length","handleSelectAsset","hasError","activeTab","setActiveTab","_jsxs","_Fragment","_jsx","Modal","Header","Title","getTrad","defaultMessage","justifyContent","paddingTop","paddingBottom","Loader","DialogFooter","Page","Error","NoPermissions","EditAssetContent","EditFolderContent","location","parentFolderId","handleMoveItem","hoverIndex","destIndex","offset","orderedAssetsClone","slice","nextAssets","moveElement","handleFolderChange","folderPath","TabsRoot","variant","value","onValueChange","paddingLeft","paddingRight","Tabs","List","Trigger","Badge","marginLeft","gap","Button","onClick","Divider","Body","Content","BrowseStep","onSelectAsset","onSelectAllAsset","onEditAsset","onEditFolder","filters","sort","SelectedStep","onReorderAsset","AssetDialog","open","restProps","Root","onOpenChange"],"mappings":"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"}

package/dist/admin/components/AssetGridList/AssetGridList.js

@@ -2,10 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
 var AssetCard = require('../AssetCard/AssetCard.js');
 var Draggable = require('./Draggable.js');
 
 // TODO: find a better naming convention for the file that was an index file before
+const DraggableAssetCard = styledComponents.styled(AssetCard.AssetCard)`
+  && {
+    cursor: inherit;
+  }
+`;
 const AssetGridList = ({ allowedTypes = [
     'files',
     'images',
@@ -37,7 +43,7 @@ const AssetGridList = ({ allowedTypes = [
                                 index: index,
                                 moveItem: onReorderAsset,
                                 id: asset.id,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(DraggableAssetCard, {
                                     allowedTypes: allowedTypes,
                                     asset: asset,
                                     isSelected: isSelected,

package/dist/admin/components/AssetGridList/AssetGridList.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetGridList.js","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <AssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","AssetCard","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;;;AAAA;AAqBaA,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,eAACC,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,cAACC,CAAAA,gBAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,cAAA,CAACQ,kBAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,cAAA,CAACQ,kBAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,cAACqB,CAAAA,mBAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,cAACuB,CAAAA,mBAAAA,EAAAA;oCACClC,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,cAAA,CAACQ,kBAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOO,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA5B,cAACuB,CAAAA,mBAAAA,EAAAA;4BAEClC,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}
+{"version":3,"file":"AssetGridList.js","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nconst DraggableAssetCard = styled(AssetCard)`\n  && {\n    cursor: inherit;\n  }\n`;\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <DraggableAssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["DraggableAssetCard","styled","AssetCard","AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;;;;AAAA;AAWA,MAAMA,kBAAAA,GAAqBC,uBAAOC,CAAAA,mBAAAA,CAAU;;;;AAI5C,CAAC;AAaYC,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,eAACC,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,cAACC,CAAAA,gBAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,cAAA,CAACQ,kBAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,cAAA,CAACQ,kBAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,cAACqB,CAAAA,mBAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,cAACf,CAAAA,kBAAAA,EAAAA;oCACCI,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZS,MAAQhC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASY,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMjC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,cAAA,CAACQ,kBAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOM,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA3B,cAACb,CAAAA,mBAAAA,EAAAA;4BAECE,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZS,MAAQhC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASY,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMjC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}