@strapi/upload 5.12.1 → 5.12.2

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewBox.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport {\n  ActionRow,\n  BadgeOverride,\n  RelativeBox,\n  UploadProgressWrapper,\n  Wrapper,\n} from './PreviewComponents';\n\nimport type { File as FileDefinition, RawFile } from '../../../../../shared/contracts/files';\n\nimport 'cropperjs/dist/cropper.css';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n  asset: Asset;\n  canUpdate: boolean;\n  canCopyLink: boolean;\n  canDownload: boolean;\n  replacementFile?: File;\n  onDelete: (asset?: Asset | null) => void;\n  onCropFinish: () => void;\n  onCropStart: () => void;\n  onCropCancel: () => void;\n  trackedLocation?: string;\n}\n\nexport const PreviewBox = ({\n  asset,\n  canUpdate,\n  canCopyLink,\n  canDownload,\n  onDelete,\n  onCropFinish,\n  onCropStart,\n  onCropCancel,\n  replacementFile,\n  trackedLocation,\n}: PreviewBoxProps) => {\n  const { trackUsage } = useTracking();\n  const previewRef = React.useRef(null);\n  const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n  const [hasCropIntent, setHasCropIntent] = React.useState<boolean | null>(null);\n  const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n  const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n  const { formatMessage } = useIntl();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n    useCropImg();\n  const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n\n  const {\n    upload,\n    isLoading: isLoadingUpload,\n    cancel: cancelUpload,\n    error: uploadError,\n    progress: progressUpload,\n  } = useUpload();\n\n  React.useEffect(() => {\n    // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n    // the locally generated one\n    if (replacementFile) {\n      const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n      if (asset.isLocal) {\n        asset.url = fileLocalUrl;\n      }\n\n      setAssetUrl(fileLocalUrl);\n      setThumbnailUrl(fileLocalUrl);\n    }\n  }, [replacementFile, asset]);\n\n  React.useEffect(() => {\n    if (hasCropIntent === false) {\n      stopCropping();\n      onCropCancel();\n    }\n  }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n  React.useEffect(() => {\n    if (hasCropIntent && isCropImageReady) {\n      crop(previewRef.current!);\n      onCropStart();\n    }\n  }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n  const handleCropping = async () => {\n    const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n    const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n    // Making sure that when persisting the new asset, the URL changes with width and height\n    // So that the browser makes a request and handle the image caching correctly at the good size\n    let optimizedCachingImage;\n    let optimizedCachingThumbnailImage;\n\n    if (asset.isLocal) {\n      optimizedCachingImage = URL.createObjectURL(file);\n      optimizedCachingThumbnailImage = optimizedCachingImage;\n      asset.url = optimizedCachingImage;\n      asset.rawFile = file;\n\n      trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n    } else {\n      const updatedAsset = await editAsset(nextAsset, file);\n      optimizedCachingImage = createAssetUrl(updatedAsset, false);\n      optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n      trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n    }\n\n    setAssetUrl(optimizedCachingImage);\n    setThumbnailUrl(optimizedCachingThumbnailImage);\n    setHasCropIntent(false);\n  };\n\n  const isInCroppingMode = isCropping && !isLoading;\n\n  const handleDuplication = async () => {\n    const nextAsset = { ...asset, width, height };\n    const file = (await produceFile(\n      nextAsset.name,\n      nextAsset.mime!,\n      nextAsset.updatedAt!\n    )) as RawFile;\n\n    await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n    trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n    setHasCropIntent(false);\n    onCropFinish();\n  };\n\n  const handleCropCancel = () => {\n    setHasCropIntent(false);\n  };\n\n  const handleCropStart = () => {\n    setHasCropIntent(true);\n  };\n\n  return (\n    <>\n      <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n        {isCropperReady && isInCroppingMode && (\n          <CroppingActions\n            onValidate={handleCropping}\n            onDuplicate={asset.isLocal ? undefined : handleDuplication}\n            onCancel={handleCropCancel}\n          />\n        )}\n\n        <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n          <Flex gap={1}>\n            {canUpdate && !asset.isLocal && (\n              <IconButton\n                label={formatMessage({\n                  id: 'global.delete',\n                  defaultMessage: 'Delete',\n                })}\n                onClick={() => setShowConfirmDialog(true)}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {canDownload && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.download'),\n                  defaultMessage: 'Download',\n                })}\n                onClick={() => downloadFile(assetUrl!, asset.name)}\n              >\n                <DownloadIcon />\n              </IconButton>\n            )}\n\n            {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n            {canUpdate && asset.mime?.includes(AssetType.Image) && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n                onClick={handleCropStart}\n              >\n                <Resize />\n              </IconButton>\n            )}\n          </Flex>\n        </ActionRow>\n\n        <Wrapper>\n          {/* This one is for editting an asset */}\n          {isLoading && (\n            <UploadProgressWrapper>\n              <UploadProgress error={error} onCancel={cancel} progress={progress} />\n            </UploadProgressWrapper>\n          )}\n\n          {/* This one is for duplicating an asset after cropping */}\n          {isLoadingUpload && (\n            <UploadProgressWrapper>\n              <UploadProgress\n                error={uploadError}\n                onCancel={cancelUpload}\n                progress={progressUpload}\n              />\n            </UploadProgressWrapper>\n          )}\n\n          <AssetPreview\n            ref={previewRef}\n            mime={asset.mime!}\n            name={asset.name}\n            url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n            onLoad={() => {\n              if (asset.isLocal || hasCropIntent) {\n                setIsCropImageReady(true);\n              }\n            }}\n          />\n        </Wrapper>\n\n        <ActionRow\n          paddingLeft={2}\n          paddingRight={2}\n          justifyContent=\"flex-end\"\n          $blurry={isInCroppingMode}\n        >\n          {isInCroppingMode && width && height && (\n            <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n              {width && height ? `${height}✕${width}` : 'N/A'}\n            </BadgeOverride>\n          )}\n        </ActionRow>\n      </RelativeBox>\n\n      <RemoveAssetDialog\n        open={showConfirmDialog}\n        onClose={() => {\n          setShowConfirmDialog(false);\n          onDelete(null);\n        }}\n        asset={asset}\n      />\n    </>\n  );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","_jsxs","_Fragment","RelativeBox","hasRadius","background","borderColor","_jsx","CroppingActions","onValidate","onDuplicate","undefined","onCancel","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","Wrapper","UploadProgressWrapper","UploadProgress","AssetPreview","ref","onLoad","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose"],"mappings":"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"}

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.mjs

@@ -0,0 +1,239 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { Flex, IconButton } from '@strapi/design-system';
+import { Trash, Download, Crop } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { AssetType } from '../../../constants.mjs';
+import { useCropImg } from '../../../hooks/useCropImg.mjs';
+import { useEditAsset } from '../../../hooks/useEditAsset.mjs';
+import { useUpload } from '../../../hooks/useUpload.mjs';
+import { createAssetUrl } from '../../../utils/createAssetUrl.mjs';
+import { downloadFile } from '../../../utils/downloadFile.mjs';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../../utils/getTrad.mjs';
+import 'qs';
+import '../../../utils/urlYupSchema.mjs';
+import { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton.mjs';
+import { UploadProgress } from '../../UploadProgress/UploadProgress.mjs';
+import { RemoveAssetDialog } from '../RemoveAssetDialog.mjs';
+import { AssetPreview } from './AssetPreview.mjs';
+import { CroppingActions } from './CroppingActions.mjs';
+import { RelativeBox, ActionRow, Wrapper, UploadProgressWrapper, BadgeOverride } from './PreviewComponents.mjs';
+import 'cropperjs/dist/cropper.css';
+
+// TODO: find a better naming convention for the file that was an index file before
+const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCropFinish, onCropStart, onCropCancel, replacementFile, trackedLocation })=>{
+    const { trackUsage } = useTracking();
+    const previewRef = React.useRef(null);
+    const [isCropImageReady, setIsCropImageReady] = React.useState(false);
+    const [hasCropIntent, setHasCropIntent] = React.useState(null);
+    const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));
+    const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));
+    const { formatMessage } = useIntl();
+    const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+    const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg();
+    const { editAsset, error, isLoading, progress, cancel } = useEditAsset();
+    const { upload, isLoading: isLoadingUpload, cancel: cancelUpload, error: uploadError, progress: progressUpload } = useUpload();
+    React.useEffect(()=>{
+        // Whenever a replacementUrl is set, make sure to permutate the real asset.url by
+        // the locally generated one
+        if (replacementFile) {
+            const fileLocalUrl = URL.createObjectURL(replacementFile);
+            if (asset.isLocal) {
+                asset.url = fileLocalUrl;
+            }
+            setAssetUrl(fileLocalUrl);
+            setThumbnailUrl(fileLocalUrl);
+        }
+    }, [
+        replacementFile,
+        asset
+    ]);
+    React.useEffect(()=>{
+        if (hasCropIntent === false) {
+            stopCropping();
+            onCropCancel();
+        }
+    }, [
+        hasCropIntent,
+        stopCropping,
+        onCropCancel,
+        onCropFinish
+    ]);
+    React.useEffect(()=>{
+        if (hasCropIntent && isCropImageReady) {
+            crop(previewRef.current);
+            onCropStart();
+        }
+    }, [
+        isCropImageReady,
+        hasCropIntent,
+        onCropStart,
+        crop
+    ]);
+    const handleCropping = async ()=>{
+        const nextAsset = {
+            ...asset,
+            width,
+            height,
+            folder: asset.folder?.id
+        };
+        const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
+        // Making sure that when persisting the new asset, the URL changes with width and height
+        // So that the browser makes a request and handle the image caching correctly at the good size
+        let optimizedCachingImage;
+        let optimizedCachingThumbnailImage;
+        if (asset.isLocal) {
+            optimizedCachingImage = URL.createObjectURL(file);
+            optimizedCachingThumbnailImage = optimizedCachingImage;
+            asset.url = optimizedCachingImage;
+            asset.rawFile = file;
+            trackUsage('didCropFile', {
+                duplicatedFile: null,
+                location: trackedLocation
+            });
+        } else {
+            const updatedAsset = await editAsset(nextAsset, file);
+            optimizedCachingImage = createAssetUrl(updatedAsset, false);
+            optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);
+            trackUsage('didCropFile', {
+                duplicatedFile: false,
+                location: trackedLocation
+            });
+        }
+        setAssetUrl(optimizedCachingImage);
+        setThumbnailUrl(optimizedCachingThumbnailImage);
+        setHasCropIntent(false);
+    };
+    const isInCroppingMode = isCropping && !isLoading;
+    const handleDuplication = async ()=>{
+        const nextAsset = {
+            ...asset,
+            width,
+            height
+        };
+        const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
+        await upload({
+            name: file.name,
+            rawFile: file
+        }, asset.folder?.id ? asset.folder.id : null);
+        trackUsage('didCropFile', {
+            duplicatedFile: true,
+            location: trackedLocation
+        });
+        setHasCropIntent(false);
+        onCropFinish();
+    };
+    const handleCropCancel = ()=>{
+        setHasCropIntent(false);
+    };
+    const handleCropStart = ()=>{
+        setHasCropIntent(true);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(RelativeBox, {
+                hasRadius: true,
+                background: "neutral150",
+                borderColor: "neutral200",
+                children: [
+                    isCropperReady && isInCroppingMode && /*#__PURE__*/ jsx(CroppingActions, {
+                        onValidate: handleCropping,
+                        onDuplicate: asset.isLocal ? undefined : handleDuplication,
+                        onCancel: handleCropCancel
+                    }),
+                    /*#__PURE__*/ jsx(ActionRow, {
+                        paddingLeft: 3,
+                        paddingRight: 3,
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            gap: 1,
+                            children: [
+                                canUpdate && !asset.isLocal && /*#__PURE__*/ jsx(IconButton, {
+                                    label: formatMessage({
+                                        id: 'global.delete',
+                                        defaultMessage: 'Delete'
+                                    }),
+                                    onClick: ()=>setShowConfirmDialog(true),
+                                    children: /*#__PURE__*/ jsx(Trash, {})
+                                }),
+                                canDownload && /*#__PURE__*/ jsx(IconButton, {
+                                    label: formatMessage({
+                                        id: getTrad('control-card.download'),
+                                        defaultMessage: 'Download'
+                                    }),
+                                    onClick: ()=>downloadFile(assetUrl, asset.name),
+                                    children: /*#__PURE__*/ jsx(Download, {})
+                                }),
+                                canCopyLink && /*#__PURE__*/ jsx(CopyLinkButton, {
+                                    url: assetUrl
+                                }),
+                                canUpdate && asset.mime?.includes(AssetType.Image) && /*#__PURE__*/ jsx(IconButton, {
+                                    label: formatMessage({
+                                        id: getTrad('control-card.crop'),
+                                        defaultMessage: 'Crop'
+                                    }),
+                                    onClick: handleCropStart,
+                                    children: /*#__PURE__*/ jsx(Crop, {})
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Wrapper, {
+                        children: [
+                            isLoading && /*#__PURE__*/ jsx(UploadProgressWrapper, {
+                                children: /*#__PURE__*/ jsx(UploadProgress, {
+                                    error: error,
+                                    onCancel: cancel,
+                                    progress: progress
+                                })
+                            }),
+                            isLoadingUpload && /*#__PURE__*/ jsx(UploadProgressWrapper, {
+                                children: /*#__PURE__*/ jsx(UploadProgress, {
+                                    error: uploadError,
+                                    onCancel: cancelUpload,
+                                    progress: progressUpload
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(AssetPreview, {
+                                ref: previewRef,
+                                mime: asset.mime,
+                                name: asset.name,
+                                url: hasCropIntent ? assetUrl : thumbnailUrl,
+                                onLoad: ()=>{
+                                    if (asset.isLocal || hasCropIntent) {
+                                        setIsCropImageReady(true);
+                                    }
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ActionRow, {
+                        paddingLeft: 2,
+                        paddingRight: 2,
+                        justifyContent: "flex-end",
+                        $blurry: isInCroppingMode,
+                        children: isInCroppingMode && width && height && /*#__PURE__*/ jsx(BadgeOverride, {
+                            background: "neutral900",
+                            color: "neutral0",
+                            children: width && height ? `${height}✕${width}` : 'N/A'
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(RemoveAssetDialog, {
+                open: showConfirmDialog,
+                onClose: ()=>{
+                    setShowConfirmDialog(false);
+                    onDelete(null);
+                },
+                asset: asset
+            })
+        ]
+    });
+};
+
+export { PreviewBox };
+//# sourceMappingURL=PreviewBox.mjs.map

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewBox.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewBox.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Flex, IconButton } from '@strapi/design-system';\nimport { Crop as Resize, Download as DownloadIcon, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { useCropImg } from '../../../hooks/useCropImg';\nimport { useEditAsset } from '../../../hooks/useEditAsset';\nimport { useUpload } from '../../../hooks/useUpload';\nimport { createAssetUrl, getTrad, downloadFile } from '../../../utils';\nimport { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton';\nimport { UploadProgress } from '../../UploadProgress/UploadProgress';\nimport { RemoveAssetDialog } from '../RemoveAssetDialog';\n\nimport { AssetPreview } from './AssetPreview';\nimport { CroppingActions } from './CroppingActions';\nimport {\n  ActionRow,\n  BadgeOverride,\n  RelativeBox,\n  UploadProgressWrapper,\n  Wrapper,\n} from './PreviewComponents';\n\nimport type { File as FileDefinition, RawFile } from '../../../../../shared/contracts/files';\n\nimport 'cropperjs/dist/cropper.css';\n\ninterface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface PreviewBoxProps {\n  asset: Asset;\n  canUpdate: boolean;\n  canCopyLink: boolean;\n  canDownload: boolean;\n  replacementFile?: File;\n  onDelete: (asset?: Asset | null) => void;\n  onCropFinish: () => void;\n  onCropStart: () => void;\n  onCropCancel: () => void;\n  trackedLocation?: string;\n}\n\nexport const PreviewBox = ({\n  asset,\n  canUpdate,\n  canCopyLink,\n  canDownload,\n  onDelete,\n  onCropFinish,\n  onCropStart,\n  onCropCancel,\n  replacementFile,\n  trackedLocation,\n}: PreviewBoxProps) => {\n  const { trackUsage } = useTracking();\n  const previewRef = React.useRef(null);\n  const [isCropImageReady, setIsCropImageReady] = React.useState(false);\n  const [hasCropIntent, setHasCropIntent] = React.useState<boolean | null>(null);\n  const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));\n  const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));\n  const { formatMessage } = useIntl();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } =\n    useCropImg();\n  const { editAsset, error, isLoading, progress, cancel } = useEditAsset();\n\n  const {\n    upload,\n    isLoading: isLoadingUpload,\n    cancel: cancelUpload,\n    error: uploadError,\n    progress: progressUpload,\n  } = useUpload();\n\n  React.useEffect(() => {\n    // Whenever a replacementUrl is set, make sure to permutate the real asset.url by\n    // the locally generated one\n    if (replacementFile) {\n      const fileLocalUrl = URL.createObjectURL(replacementFile);\n\n      if (asset.isLocal) {\n        asset.url = fileLocalUrl;\n      }\n\n      setAssetUrl(fileLocalUrl);\n      setThumbnailUrl(fileLocalUrl);\n    }\n  }, [replacementFile, asset]);\n\n  React.useEffect(() => {\n    if (hasCropIntent === false) {\n      stopCropping();\n      onCropCancel();\n    }\n  }, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);\n\n  React.useEffect(() => {\n    if (hasCropIntent && isCropImageReady) {\n      crop(previewRef.current!);\n      onCropStart();\n    }\n  }, [isCropImageReady, hasCropIntent, onCropStart, crop]);\n\n  const handleCropping = async () => {\n    const nextAsset = { ...asset, width, height, folder: asset.folder?.id };\n    const file = (await produceFile(nextAsset.name, nextAsset.mime!, nextAsset.updatedAt!)) as File;\n\n    // Making sure that when persisting the new asset, the URL changes with width and height\n    // So that the browser makes a request and handle the image caching correctly at the good size\n    let optimizedCachingImage;\n    let optimizedCachingThumbnailImage;\n\n    if (asset.isLocal) {\n      optimizedCachingImage = URL.createObjectURL(file);\n      optimizedCachingThumbnailImage = optimizedCachingImage;\n      asset.url = optimizedCachingImage;\n      asset.rawFile = file;\n\n      trackUsage('didCropFile', { duplicatedFile: null, location: trackedLocation! });\n    } else {\n      const updatedAsset = await editAsset(nextAsset, file);\n      optimizedCachingImage = createAssetUrl(updatedAsset, false);\n      optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);\n\n      trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation! });\n    }\n\n    setAssetUrl(optimizedCachingImage);\n    setThumbnailUrl(optimizedCachingThumbnailImage);\n    setHasCropIntent(false);\n  };\n\n  const isInCroppingMode = isCropping && !isLoading;\n\n  const handleDuplication = async () => {\n    const nextAsset = { ...asset, width, height };\n    const file = (await produceFile(\n      nextAsset.name,\n      nextAsset.mime!,\n      nextAsset.updatedAt!\n    )) as RawFile;\n\n    await upload({ name: file.name, rawFile: file }, asset.folder?.id ? asset.folder.id : null);\n\n    trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation! });\n\n    setHasCropIntent(false);\n    onCropFinish();\n  };\n\n  const handleCropCancel = () => {\n    setHasCropIntent(false);\n  };\n\n  const handleCropStart = () => {\n    setHasCropIntent(true);\n  };\n\n  return (\n    <>\n      <RelativeBox hasRadius background=\"neutral150\" borderColor=\"neutral200\">\n        {isCropperReady && isInCroppingMode && (\n          <CroppingActions\n            onValidate={handleCropping}\n            onDuplicate={asset.isLocal ? undefined : handleDuplication}\n            onCancel={handleCropCancel}\n          />\n        )}\n\n        <ActionRow paddingLeft={3} paddingRight={3} justifyContent=\"flex-end\">\n          <Flex gap={1}>\n            {canUpdate && !asset.isLocal && (\n              <IconButton\n                label={formatMessage({\n                  id: 'global.delete',\n                  defaultMessage: 'Delete',\n                })}\n                onClick={() => setShowConfirmDialog(true)}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {canDownload && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.download'),\n                  defaultMessage: 'Download',\n                })}\n                onClick={() => downloadFile(assetUrl!, asset.name)}\n              >\n                <DownloadIcon />\n              </IconButton>\n            )}\n\n            {canCopyLink && <CopyLinkButton url={assetUrl!} />}\n\n            {canUpdate && asset.mime?.includes(AssetType.Image) && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.crop'), defaultMessage: 'Crop' })}\n                onClick={handleCropStart}\n              >\n                <Resize />\n              </IconButton>\n            )}\n          </Flex>\n        </ActionRow>\n\n        <Wrapper>\n          {/* This one is for editting an asset */}\n          {isLoading && (\n            <UploadProgressWrapper>\n              <UploadProgress error={error} onCancel={cancel} progress={progress} />\n            </UploadProgressWrapper>\n          )}\n\n          {/* This one is for duplicating an asset after cropping */}\n          {isLoadingUpload && (\n            <UploadProgressWrapper>\n              <UploadProgress\n                error={uploadError}\n                onCancel={cancelUpload}\n                progress={progressUpload}\n              />\n            </UploadProgressWrapper>\n          )}\n\n          <AssetPreview\n            ref={previewRef}\n            mime={asset.mime!}\n            name={asset.name}\n            url={hasCropIntent ? assetUrl! : thumbnailUrl!}\n            onLoad={() => {\n              if (asset.isLocal || hasCropIntent) {\n                setIsCropImageReady(true);\n              }\n            }}\n          />\n        </Wrapper>\n\n        <ActionRow\n          paddingLeft={2}\n          paddingRight={2}\n          justifyContent=\"flex-end\"\n          $blurry={isInCroppingMode}\n        >\n          {isInCroppingMode && width && height && (\n            <BadgeOverride background=\"neutral900\" color=\"neutral0\">\n              {width && height ? `${height}✕${width}` : 'N/A'}\n            </BadgeOverride>\n          )}\n        </ActionRow>\n      </RelativeBox>\n\n      <RemoveAssetDialog\n        open={showConfirmDialog}\n        onClose={() => {\n          setShowConfirmDialog(false);\n          onDelete(null);\n        }}\n        asset={asset}\n      />\n    </>\n  );\n};\n"],"names":["PreviewBox","asset","canUpdate","canCopyLink","canDownload","onDelete","onCropFinish","onCropStart","onCropCancel","replacementFile","trackedLocation","trackUsage","useTracking","previewRef","React","useRef","isCropImageReady","setIsCropImageReady","useState","hasCropIntent","setHasCropIntent","assetUrl","setAssetUrl","createAssetUrl","thumbnailUrl","setThumbnailUrl","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","crop","produceFile","stopCropping","isCropping","isCropperReady","width","height","useCropImg","editAsset","error","isLoading","progress","cancel","useEditAsset","upload","isLoadingUpload","cancelUpload","uploadError","progressUpload","useUpload","useEffect","fileLocalUrl","URL","createObjectURL","isLocal","url","current","handleCropping","nextAsset","folder","id","file","name","mime","updatedAt","optimizedCachingImage","optimizedCachingThumbnailImage","rawFile","duplicatedFile","location","updatedAsset","isInCroppingMode","handleDuplication","handleCropCancel","handleCropStart","_jsxs","_Fragment","RelativeBox","hasRadius","background","borderColor","_jsx","CroppingActions","onValidate","onDuplicate","undefined","onCancel","ActionRow","paddingLeft","paddingRight","justifyContent","Flex","gap","IconButton","label","defaultMessage","onClick","Trash","getTrad","downloadFile","DownloadIcon","CopyLinkButton","includes","AssetType","Image","Resize","Wrapper","UploadProgressWrapper","UploadProgress","AssetPreview","ref","onLoad","$blurry","BadgeOverride","color","RemoveAssetDialog","open","onClose"],"mappings":"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"}

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewComponents.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+// TODO: find a better naming convention for the file that was an index file before
+const RelativeBox = styledComponents.styled(designSystem.Box)`
+  position: relative;
+`;
+const Wrapper = styledComponents.styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: repeating-conic-gradient(
+      ${({ theme })=>theme.colors.neutral100} 0% 25%,
+      transparent 0% 50%
+    )
+    50% / 20px 20px;
+
+  svg {
+    height: 26px;
+  }
+
+  img,
+  mux-player {
+    margin: 0;
+    padding: 0;
+    max-height: 26.4rem;
+    max-width: 100%;
+  }
+
+  mux-player {
+    --play-button: inline-flex;
+    --mute-button: inline-flex;
+    --pip-button: inline-flex;
+    --fullscreen-button: inline-flex;
+    --playback-rate-button: inline-flex;
+    --volume-range: inline-flex;
+    --time-range: inline-flex;
+    --time-display: inline-flex;
+    --duration-display: inline-flex;
+  }
+`;
+const ActionRow = styledComponents.styled(designSystem.Flex)`
+  height: 5.2rem;
+  background-color: ${({ $blurry })=>$blurry ? `rgba(33, 33, 52, 0.4)` : undefined};
+`;
+const CroppingActionRow = styledComponents.styled(designSystem.Flex)`
+  z-index: 1;
+  height: 5.2rem;
+  position: absolute;
+  background-color: rgba(33, 33, 52, 0.4);
+  width: 100%;
+`;
+// TODO: fix in parts, this shouldn't happen
+const BadgeOverride = styledComponents.styled(designSystem.Badge)`
+  span {
+    color: inherit;
+    font-weight: ${({ theme })=>theme.fontWeights.regular};
+  }
+`;
+const UploadProgressWrapper = styledComponents.styled.div`
+  position: absolute;
+  z-index: 2;
+  height: 100%;
+  width: 100%;
+`;
+
+exports.ActionRow = ActionRow;
+exports.BadgeOverride = BadgeOverride;
+exports.CroppingActionRow = CroppingActionRow;
+exports.RelativeBox = RelativeBox;
+exports.UploadProgressWrapper = UploadProgressWrapper;
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=PreviewComponents.js.map

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewComponents.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n  position: relative;\n`;\n\nexport const Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n\n  svg {\n    height: 26px;\n  }\n\n  img,\n  mux-player {\n    margin: 0;\n    padding: 0;\n    max-height: 26.4rem;\n    max-width: 100%;\n  }\n\n  mux-player {\n    --play-button: inline-flex;\n    --mute-button: inline-flex;\n    --pip-button: inline-flex;\n    --fullscreen-button: inline-flex;\n    --playback-rate-button: inline-flex;\n    --volume-range: inline-flex;\n    --time-range: inline-flex;\n    --time-display: inline-flex;\n    --duration-display: inline-flex;\n  }\n`;\n\nexport const ActionRow = styled(Flex)`\n  height: 5.2rem;\n  background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n  span {\n    color: inherit;\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n  position: absolute;\n  z-index: 2;\n  height: 100%;\n  width: 100%;\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper"],"mappings":";;;;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,uBAAOC,CAAAA,gBAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,uBAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,uBAAOQ,CAAAA,iBAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,uBAAOQ,CAAAA,iBAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,uBAAOa,CAAAA,kBAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,uBAAOG,CAAAA,GAAG;;;;;AAK/C;;;;;;;;;"}

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewComponents.mjs

@@ -0,0 +1,68 @@
+import { Box, Flex, Badge } from '@strapi/design-system';
+import { styled } from 'styled-components';
+
+// TODO: find a better naming convention for the file that was an index file before
+const RelativeBox = styled(Box)`
+  position: relative;
+`;
+const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: repeating-conic-gradient(
+      ${({ theme })=>theme.colors.neutral100} 0% 25%,
+      transparent 0% 50%
+    )
+    50% / 20px 20px;
+
+  svg {
+    height: 26px;
+  }
+
+  img,
+  mux-player {
+    margin: 0;
+    padding: 0;
+    max-height: 26.4rem;
+    max-width: 100%;
+  }
+
+  mux-player {
+    --play-button: inline-flex;
+    --mute-button: inline-flex;
+    --pip-button: inline-flex;
+    --fullscreen-button: inline-flex;
+    --playback-rate-button: inline-flex;
+    --volume-range: inline-flex;
+    --time-range: inline-flex;
+    --time-display: inline-flex;
+    --duration-display: inline-flex;
+  }
+`;
+const ActionRow = styled(Flex)`
+  height: 5.2rem;
+  background-color: ${({ $blurry })=>$blurry ? `rgba(33, 33, 52, 0.4)` : undefined};
+`;
+const CroppingActionRow = styled(Flex)`
+  z-index: 1;
+  height: 5.2rem;
+  position: absolute;
+  background-color: rgba(33, 33, 52, 0.4);
+  width: 100%;
+`;
+// TODO: fix in parts, this shouldn't happen
+const BadgeOverride = styled(Badge)`
+  span {
+    color: inherit;
+    font-weight: ${({ theme })=>theme.fontWeights.regular};
+  }
+`;
+const UploadProgressWrapper = styled.div`
+  position: absolute;
+  z-index: 2;
+  height: 100%;
+  width: 100%;
+`;
+
+export { ActionRow, BadgeOverride, CroppingActionRow, RelativeBox, UploadProgressWrapper, Wrapper };
+//# sourceMappingURL=PreviewComponents.mjs.map

package/dist/admin/components/EditAssetDialog/PreviewBox/PreviewComponents.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewComponents.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n  position: relative;\n`;\n\nexport const Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n\n  svg {\n    height: 26px;\n  }\n\n  img,\n  mux-player {\n    margin: 0;\n    padding: 0;\n    max-height: 26.4rem;\n    max-width: 100%;\n  }\n\n  mux-player {\n    --play-button: inline-flex;\n    --mute-button: inline-flex;\n    --pip-button: inline-flex;\n    --fullscreen-button: inline-flex;\n    --playback-rate-button: inline-flex;\n    --volume-range: inline-flex;\n    --time-range: inline-flex;\n    --time-display: inline-flex;\n    --duration-display: inline-flex;\n  }\n`;\n\nexport const ActionRow = styled(Flex)`\n  height: 5.2rem;\n  background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n  z-index: 1;\n  height: 5.2rem;\n  position: absolute;\n  background-color: rgba(33, 33, 52, 0.4);\n  width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n  span {\n    color: inherit;\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n  position: absolute;\n  z-index: 2;\n  height: 100%;\n  width: 100%;\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper"],"mappings":";;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,MAAOC,CAAAA,GAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,MAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,MAAOQ,CAAAA,IAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,MAAOQ,CAAAA,IAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,MAAOa,CAAAA,KAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,MAAOG,CAAAA,GAAG;;;;;AAK/C;;;;"}

package/dist/admin/components/EditAssetDialog/RemoveAssetDialog.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var useRemoveAsset = require('../../hooks/useRemoveAsset.js');
+
+const RemoveAssetDialog = ({ open, onClose, asset })=>{
+    // `null` means asset is deleted
+    const { removeAsset } = useRemoveAsset.useRemoveAsset(()=>{
+        onClose(null);
+    });
+    const handleConfirm = async (event)=>{
+        event?.preventDefault();
+        await removeAsset(asset.id);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+        open: open,
+        onOpenChange: onClose,
+        children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
+            onConfirm: handleConfirm
+        })
+    });
+};
+
+exports.RemoveAssetDialog = RemoveAssetDialog;
+//# sourceMappingURL=RemoveAssetDialog.js.map

package/dist/admin/components/EditAssetDialog/RemoveAssetDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveAssetDialog.js","sources":["../../../../admin/src/components/EditAssetDialog/RemoveAssetDialog.tsx"],"sourcesContent":["import { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Dialog } from '@strapi/design-system';\n\nimport { useRemoveAsset } from '../../hooks/useRemoveAsset';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ninterface RemoveAssetDialogProps {\n  open: boolean;\n  onClose: (open: boolean | null) => void;\n  asset: File;\n}\n\nexport const RemoveAssetDialog = ({ open, onClose, asset }: RemoveAssetDialogProps) => {\n  // `null` means asset is deleted\n  const { removeAsset } = useRemoveAsset(() => {\n    onClose(null);\n  });\n\n  const handleConfirm = async (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event?.preventDefault();\n    await removeAsset(asset.id);\n  };\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onClose}>\n      <ConfirmDialog onConfirm={handleConfirm} />\n    </Dialog.Root>\n  );\n};\n"],"names":["RemoveAssetDialog","open","onClose","asset","removeAsset","useRemoveAsset","handleConfirm","event","preventDefault","id","_jsx","Dialog","Root","onOpenChange","ConfirmDialog","onConfirm"],"mappings":";;;;;;;AAaO,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAA0B,GAAA;;AAEhF,IAAA,MAAM,EAAEC,WAAW,EAAE,GAAGC,6BAAe,CAAA,IAAA;QACrCH,OAAQ,CAAA,IAAA,CAAA;AACV,KAAA,CAAA;AAEA,IAAA,MAAMI,gBAAgB,OAAOC,KAAAA,GAAAA;QAC3BA,KAAOC,EAAAA,cAAAA,EAAAA;QACP,MAAMJ,WAAAA,CAAYD,MAAMM,EAAE,CAAA;AAC5B,KAAA;IAEA,qBACEC,cAAA,CAACC,oBAAOC,IAAI,EAAA;QAACX,IAAMA,EAAAA,IAAAA;QAAMY,YAAcX,EAAAA,OAAAA;AACrC,QAAA,QAAA,gBAAAQ,cAACI,CAAAA,yBAAAA,EAAAA;YAAcC,SAAWT,EAAAA;;;AAGhC;;;;"}

package/dist/admin/components/EditAssetDialog/RemoveAssetDialog.mjs

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { ConfirmDialog } from '@strapi/admin/strapi-admin';
+import { Dialog } from '@strapi/design-system';
+import { useRemoveAsset } from '../../hooks/useRemoveAsset.mjs';
+
+const RemoveAssetDialog = ({ open, onClose, asset })=>{
+    // `null` means asset is deleted
+    const { removeAsset } = useRemoveAsset(()=>{
+        onClose(null);
+    });
+    const handleConfirm = async (event)=>{
+        event?.preventDefault();
+        await removeAsset(asset.id);
+    };
+    return /*#__PURE__*/ jsx(Dialog.Root, {
+        open: open,
+        onOpenChange: onClose,
+        children: /*#__PURE__*/ jsx(ConfirmDialog, {
+            onConfirm: handleConfirm
+        })
+    });
+};
+
+export { RemoveAssetDialog };
+//# sourceMappingURL=RemoveAssetDialog.mjs.map

package/dist/admin/components/EditAssetDialog/RemoveAssetDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveAssetDialog.mjs","sources":["../../../../admin/src/components/EditAssetDialog/RemoveAssetDialog.tsx"],"sourcesContent":["import { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Dialog } from '@strapi/design-system';\n\nimport { useRemoveAsset } from '../../hooks/useRemoveAsset';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ninterface RemoveAssetDialogProps {\n  open: boolean;\n  onClose: (open: boolean | null) => void;\n  asset: File;\n}\n\nexport const RemoveAssetDialog = ({ open, onClose, asset }: RemoveAssetDialogProps) => {\n  // `null` means asset is deleted\n  const { removeAsset } = useRemoveAsset(() => {\n    onClose(null);\n  });\n\n  const handleConfirm = async (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event?.preventDefault();\n    await removeAsset(asset.id);\n  };\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onClose}>\n      <ConfirmDialog onConfirm={handleConfirm} />\n    </Dialog.Root>\n  );\n};\n"],"names":["RemoveAssetDialog","open","onClose","asset","removeAsset","useRemoveAsset","handleConfirm","event","preventDefault","id","_jsx","Dialog","Root","onOpenChange","ConfirmDialog","onConfirm"],"mappings":";;;;;AAaO,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAA0B,GAAA;;AAEhF,IAAA,MAAM,EAAEC,WAAW,EAAE,GAAGC,cAAe,CAAA,IAAA;QACrCH,OAAQ,CAAA,IAAA,CAAA;AACV,KAAA,CAAA;AAEA,IAAA,MAAMI,gBAAgB,OAAOC,KAAAA,GAAAA;QAC3BA,KAAOC,EAAAA,cAAAA,EAAAA;QACP,MAAMJ,WAAAA,CAAYD,MAAMM,EAAE,CAAA;AAC5B,KAAA;IAEA,qBACEC,GAAA,CAACC,OAAOC,IAAI,EAAA;QAACX,IAAMA,EAAAA,IAAAA;QAAMY,YAAcX,EAAAA,OAAAA;AACrC,QAAA,QAAA,gBAAAQ,GAACI,CAAAA,aAAAA,EAAAA;YAAcC,SAAWT,EAAAA;;;AAGhC;;;;"}

package/dist/admin/components/EditAssetDialog/ReplaceMediaButton.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../utils/getTrad.js');
+require('qs');
+require('../../constants.js');
+require('../../utils/urlYupSchema.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...props })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const inputRef = React__namespace.useRef(null);
+    const { trackUsage } = strapiAdmin.useTracking();
+    const handleClick = (e)=>{
+        e.preventDefault();
+        if (trackedLocation) {
+            trackUsage('didReplaceMedia', {
+                location: trackedLocation
+            });
+        }
+        inputRef.current?.click();
+    };
+    const handleChange = ()=>{
+        const file = inputRef.current?.files?.[0];
+        onSelectMedia(file);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                variant: "secondary",
+                onClick: handleClick,
+                ...props,
+                children: formatMessage({
+                    id: getTrad.getTrad('control-card.replace-media'),
+                    defaultMessage: 'Replace media'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+                    accept: acceptedMime,
+                    type: "file",
+                    name: "file",
+                    "data-testid": "file-input",
+                    tabIndex: -1,
+                    ref: inputRef,
+                    onChange: handleChange,
+                    "aria-hidden": true
+                })
+            })
+        ]
+    });
+};
+
+exports.ReplaceMediaButton = ReplaceMediaButton;
+//# sourceMappingURL=ReplaceMediaButton.js.map

package/dist/admin/components/EditAssetDialog/ReplaceMediaButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplaceMediaButton.js","sources":["../../../../admin/src/components/EditAssetDialog/ReplaceMediaButton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Button, VisuallyHidden, ButtonProps } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\ninterface ReplaceMediaButtonProps extends ButtonProps {\n  acceptedMime: string;\n  onSelectMedia: (file?: File) => void;\n  trackedLocation?: string;\n}\n\nexport const ReplaceMediaButton = ({\n  onSelectMedia,\n  acceptedMime,\n  trackedLocation,\n  ...props\n}: ReplaceMediaButtonProps) => {\n  const { formatMessage } = useIntl();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const { trackUsage } = useTracking();\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n\n    if (trackedLocation) {\n      trackUsage('didReplaceMedia', { location: trackedLocation });\n    }\n\n    inputRef.current?.click();\n  };\n\n  const handleChange = () => {\n    const file = inputRef.current?.files?.[0];\n\n    onSelectMedia(file);\n  };\n\n  return (\n    <>\n      <Button variant=\"secondary\" onClick={handleClick} {...props}>\n        {formatMessage({\n          id: getTrad('control-card.replace-media'),\n          defaultMessage: 'Replace media',\n        })}\n      </Button>\n      <VisuallyHidden>\n        <input\n          accept={acceptedMime}\n          type=\"file\"\n          name=\"file\"\n          data-testid=\"file-input\"\n          tabIndex={-1}\n          ref={inputRef}\n          onChange={handleChange}\n          aria-hidden\n        />\n      </VisuallyHidden>\n    </>\n  );\n};\n"],"names":["ReplaceMediaButton","onSelectMedia","acceptedMime","trackedLocation","props","formatMessage","useIntl","inputRef","React","useRef","trackUsage","useTracking","handleClick","e","preventDefault","location","current","click","handleChange","file","files","_jsxs","_Fragment","_jsx","Button","variant","onClick","id","getTrad","defaultMessage","VisuallyHidden","input","accept","type","name","data-testid","tabIndex","ref","onChange","aria-hidden"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,kBAAqB,GAAA,CAAC,EACjCC,aAAa,EACbC,YAAY,EACZC,eAAe,EACf,GAAGC,KACqB,EAAA,GAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,QAAAA,GAAWC,gBAAMC,CAAAA,MAAM,CAAmB,IAAA,CAAA;IAChD,MAAM,EAAEC,UAAU,EAAE,GAAGC,uBAAAA,EAAAA;AAEvB,IAAA,MAAMC,cAAc,CAACC,CAAAA,GAAAA;AACnBA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;AAEhB,QAAA,IAAIX,eAAiB,EAAA;AACnBO,YAAAA,UAAAA,CAAW,iBAAmB,EAAA;gBAAEK,QAAUZ,EAAAA;AAAgB,aAAA,CAAA;AAC5D;AAEAI,QAAAA,QAAAA,CAASS,OAAO,EAAEC,KAAAA,EAAAA;AACpB,KAAA;AAEA,IAAA,MAAMC,YAAe,GAAA,IAAA;AACnB,QAAA,MAAMC,OAAOZ,QAASS,CAAAA,OAAO,EAAEI,KAAAA,GAAQ,CAAE,CAAA;QAEzCnB,aAAckB,CAAAA,IAAAA,CAAAA;AAChB,KAAA;IAEA,qBACEE,eAAA,CAAAC,mBAAA,EAAA;;0BACEC,cAACC,CAAAA,mBAAAA,EAAAA;gBAAOC,OAAQ,EAAA,WAAA;gBAAYC,OAASd,EAAAA,WAAAA;AAAc,gBAAA,GAAGR,KAAK;0BACxDC,aAAc,CAAA;AACbsB,oBAAAA,EAAAA,EAAIC,eAAQ,CAAA,4BAAA,CAAA;oBACZC,cAAgB,EAAA;AAClB,iBAAA;;0BAEFN,cAACO,CAAAA,2BAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAP,cAACQ,CAAAA,OAAAA,EAAAA;oBACCC,MAAQ9B,EAAAA,YAAAA;oBACR+B,IAAK,EAAA,MAAA;oBACLC,IAAK,EAAA,MAAA;oBACLC,aAAY,EAAA,YAAA;AACZC,oBAAAA,QAAAA,EAAU,CAAC,CAAA;oBACXC,GAAK9B,EAAAA,QAAAA;oBACL+B,QAAUpB,EAAAA,YAAAA;oBACVqB,aAAW,EAAA;;;;;AAKrB;;;;"}