@strapi/upload 5.12.1 → 5.12.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport * as React from 'react';\n\nimport MuxPlayer from '@mux/mux-player-react';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\n\nconst CardAsset = styled(Flex)`\n  min-height: 26.4rem;\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface AssetPreviewProps {\n  mime: string;\n  name: string;\n  url: string;\n  onLoad?: () => void;\n}\n\nexport const AssetPreview = React.forwardRef<\n  HTMLImageElement | HTMLVideoElement | HTMLAudioElement,\n  AssetPreviewProps\n>(({ mime, url, name, ...props }, ref) => {\n  const theme = useTheme();\n\n  const { formatMessage } = useIntl();\n\n  if (mime.includes(AssetType.Image)) {\n    return (\n      <img ref={ref as React.ForwardedRef<HTMLImageElement>} src={url} alt={name} {...props} />\n    );\n  }\n\n  if (mime.includes(AssetType.Video)) {\n    return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;\n  }\n\n  if (mime.includes(AssetType.Audio)) {\n    return (\n      <Box margin=\"5\">\n        <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>\n          {name}\n        </audio>\n      </Box>\n    );\n  }\n\n  if (mime.includes('pdf')) {\n    return (\n      <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n        <Flex gap={2} direction=\"column\" alignItems=\"center\">\n          <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          <Typography textColor=\"neutral500\" variant=\"pi\">\n            {formatMessage({\n              id: 'noPreview',\n              defaultMessage: 'No preview available',\n            })}\n          </Typography>\n        </Flex>\n      </CardAsset>\n    );\n  }\n\n  return (\n    <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n      <Flex gap={2} direction=\"column\" alignItems=\"center\">\n        <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n\n        <Typography textColor=\"neutral500\" variant=\"pi\">\n          {formatMessage({\n            id: 'noPreview',\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </Flex>\n    </CardAsset>\n  );\n});\n\nAssetPreview.displayName = 'AssetPreview';\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","AssetPreview","React","forwardRef","mime","url","name","props","ref","useTheme","formatMessage","useIntl","includes","AssetType","Image","_jsx","img","src","alt","Video","MuxPlayer","accentColor","primary500","Audio","Box","margin","audio","controls","width","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","height","Typography","textColor","variant","id","defaultMessage","File","displayName"],"mappings":"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"}

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

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import MuxPlayer from '@mux/mux-player-react';
+import { Flex, Box, Typography } from '@strapi/design-system';
+import { FilePdf, File } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled, useTheme } from 'styled-components';
+import { AssetType } from '../../../constants.mjs';
+
+const CardAsset = styled(Flex)`
+  min-height: 26.4rem;
+  border-radius: ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius} 0 0;
+  background: linear-gradient(
+    180deg,
+    ${({ theme })=>theme.colors.neutral0} 0%,
+    ${({ theme })=>theme.colors.neutral100} 121.48%
+  );
+`;
+const AssetPreview = /*#__PURE__*/ React.forwardRef(({ mime, url, name, ...props }, ref)=>{
+    const theme = useTheme();
+    const { formatMessage } = useIntl();
+    if (mime.includes(AssetType.Image)) {
+        return /*#__PURE__*/ jsx("img", {
+            ref: ref,
+            src: url,
+            alt: name,
+            ...props
+        });
+    }
+    if (mime.includes(AssetType.Video)) {
+        return /*#__PURE__*/ jsx(MuxPlayer, {
+            src: url,
+            accentColor: theme.colors.primary500
+        });
+    }
+    if (mime.includes(AssetType.Audio)) {
+        return /*#__PURE__*/ jsx(Box, {
+            margin: "5",
+            children: /*#__PURE__*/ jsx("audio", {
+                controls: true,
+                src: url,
+                ref: ref,
+                ...props,
+                children: name
+            })
+        });
+    }
+    if (mime.includes('pdf')) {
+        return /*#__PURE__*/ jsx(CardAsset, {
+            width: "100%",
+            justifyContent: "center",
+            ...props,
+            children: /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                direction: "column",
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsx(FilePdf, {
+                        "aria-label": name,
+                        fill: "neutral500",
+                        width: 24,
+                        height: 24
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral500",
+                        variant: "pi",
+                        children: formatMessage({
+                            id: 'noPreview',
+                            defaultMessage: 'No preview available'
+                        })
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(CardAsset, {
+        width: "100%",
+        justifyContent: "center",
+        ...props,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            gap: 2,
+            direction: "column",
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ jsx(File, {
+                    "aria-label": name,
+                    fill: "neutral500",
+                    width: 24,
+                    height: 24
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    textColor: "neutral500",
+                    variant: "pi",
+                    children: formatMessage({
+                        id: 'noPreview',
+                        defaultMessage: 'No preview available'
+                    })
+                })
+            ]
+        })
+    });
+});
+AssetPreview.displayName = 'AssetPreview';
+
+export { AssetPreview };
+//# sourceMappingURL=AssetPreview.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport * as React from 'react';\n\nimport MuxPlayer from '@mux/mux-player-react';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { AssetType } from '../../../constants';\n\nconst CardAsset = styled(Flex)`\n  min-height: 26.4rem;\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface AssetPreviewProps {\n  mime: string;\n  name: string;\n  url: string;\n  onLoad?: () => void;\n}\n\nexport const AssetPreview = React.forwardRef<\n  HTMLImageElement | HTMLVideoElement | HTMLAudioElement,\n  AssetPreviewProps\n>(({ mime, url, name, ...props }, ref) => {\n  const theme = useTheme();\n\n  const { formatMessage } = useIntl();\n\n  if (mime.includes(AssetType.Image)) {\n    return (\n      <img ref={ref as React.ForwardedRef<HTMLImageElement>} src={url} alt={name} {...props} />\n    );\n  }\n\n  if (mime.includes(AssetType.Video)) {\n    return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;\n  }\n\n  if (mime.includes(AssetType.Audio)) {\n    return (\n      <Box margin=\"5\">\n        <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>\n          {name}\n        </audio>\n      </Box>\n    );\n  }\n\n  if (mime.includes('pdf')) {\n    return (\n      <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n        <Flex gap={2} direction=\"column\" alignItems=\"center\">\n          <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n          <Typography textColor=\"neutral500\" variant=\"pi\">\n            {formatMessage({\n              id: 'noPreview',\n              defaultMessage: 'No preview available',\n            })}\n          </Typography>\n        </Flex>\n      </CardAsset>\n    );\n  }\n\n  return (\n    <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n      <Flex gap={2} direction=\"column\" alignItems=\"center\">\n        <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n\n        <Typography textColor=\"neutral500\" variant=\"pi\">\n          {formatMessage({\n            id: 'noPreview',\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </Flex>\n    </CardAsset>\n  );\n});\n\nAssetPreview.displayName = 'AssetPreview';\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","AssetPreview","React","forwardRef","mime","url","name","props","ref","useTheme","formatMessage","useIntl","includes","AssetType","Image","_jsx","img","src","alt","Video","MuxPlayer","accentColor","primary500","Audio","Box","margin","audio","controls","width","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","height","Typography","textColor","variant","id","defaultMessage","File","displayName"],"mappings":"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"}

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

@@ -0,0 +1,111 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../../utils/getTrad.js');
+require('qs');
+require('../../../constants.js');
+require('../../../utils/urlYupSchema.js');
+var PreviewComponents = require('./PreviewComponents.js');
+
+const CroppingActions = ({ onCancel, onValidate, onDuplicate })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const theme = styledComponents.useTheme();
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.FocusTrap, {
+        onEscape: onCancel,
+        children: /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.CroppingActionRow, {
+            justifyContent: "flex-end",
+            paddingLeft: 3,
+            paddingRight: 3,
+            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        label: formatMessage({
+                            id: getTrad.getTrad('control-card.stop-crop'),
+                            defaultMessage: 'Stop cropping'
+                        }),
+                        onClick: onCancel,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Trigger, {
+                                "aria-label": formatMessage({
+                                    id: getTrad.getTrad('control-card.crop'),
+                                    defaultMessage: 'Crop'
+                                }),
+                                variant: "tertiary",
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                endIcon: null,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {
+                                    "aria-hidden": true,
+                                    focusable: false,
+                                    style: {
+                                        position: 'relative',
+                                        top: 2
+                                    },
+                                    fill: "#C0C0D0"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Content, {
+                                zIndex: theme.zIndices.dialog,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                        onSelect: onValidate,
+                                        children: formatMessage({
+                                            id: getTrad.getTrad('checkControl.crop-original'),
+                                            defaultMessage: 'Crop the original asset'
+                                        })
+                                    }),
+                                    onDuplicate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                        onSelect: onDuplicate,
+                                        children: formatMessage({
+                                            id: getTrad.getTrad('checkControl.crop-duplicate'),
+                                            defaultMessage: 'Duplicate & crop the asset'
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+const Trigger = styledComponents.styled(designSystem.Menu.Trigger)`
+  svg {
+    > g,
+    path {
+      fill: ${({ theme })=>theme.colors.neutral500};
+    }
+  }
+
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme })=>theme.colors.neutral600};
+      }
+    }
+  }
+
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme })=>theme.colors.neutral400};
+      }
+    }
+  }
+`;
+
+exports.CroppingActions = CroppingActions;
+//# sourceMappingURL=CroppingActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CroppingActions.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/CroppingActions.tsx"],"sourcesContent":["import { Flex, FocusTrap, IconButton, Menu } from '@strapi/design-system';\nimport { Check, Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { getTrad } from '../../../utils';\n\nimport { CroppingActionRow } from './PreviewComponents';\n\ninterface CroppingActionsProps {\n  onCancel: () => void;\n  onValidate: () => void;\n  onDuplicate?: () => void;\n}\n\nexport const CroppingActions = ({ onCancel, onValidate, onDuplicate }: CroppingActionsProps) => {\n  const { formatMessage } = useIntl();\n  const theme = useTheme();\n\n  return (\n    <FocusTrap onEscape={onCancel}>\n      <CroppingActionRow justifyContent=\"flex-end\" paddingLeft={3} paddingRight={3}>\n        <Flex gap={1}>\n          <IconButton\n            label={formatMessage({\n              id: getTrad('control-card.stop-crop'),\n              defaultMessage: 'Stop cropping',\n            })}\n            onClick={onCancel}\n          >\n            <Cross />\n          </IconButton>\n\n          <Menu.Root>\n            <Trigger\n              aria-label={formatMessage({\n                id: getTrad('control-card.crop'),\n                defaultMessage: 'Crop',\n              })}\n              variant=\"tertiary\"\n              paddingLeft={2}\n              paddingRight={2}\n              endIcon={null}\n            >\n              <Check\n                aria-hidden\n                focusable={false}\n                style={{ position: 'relative', top: 2 }}\n                fill=\"#C0C0D0\"\n              />\n            </Trigger>\n            <Menu.Content zIndex={theme.zIndices.dialog}>\n              <Menu.Item onSelect={onValidate}>\n                {formatMessage({\n                  id: getTrad('checkControl.crop-original'),\n                  defaultMessage: 'Crop the original asset',\n                })}\n              </Menu.Item>\n\n              {onDuplicate && (\n                <Menu.Item onSelect={onDuplicate}>\n                  {formatMessage({\n                    id: getTrad('checkControl.crop-duplicate'),\n                    defaultMessage: 'Duplicate & crop the asset',\n                  })}\n                </Menu.Item>\n              )}\n            </Menu.Content>\n          </Menu.Root>\n        </Flex>\n      </CroppingActionRow>\n    </FocusTrap>\n  );\n};\n\nconst Trigger = styled(Menu.Trigger)`\n  svg {\n    > g,\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n\n  &:hover {\n    svg {\n      > g,\n      path {\n        fill: ${({ theme }) => theme.colors.neutral600};\n      }\n    }\n  }\n\n  &:active {\n    svg {\n      > g,\n      path {\n        fill: ${({ theme }) => theme.colors.neutral400};\n      }\n    }\n  }\n`;\n"],"names":["CroppingActions","onCancel","onValidate","onDuplicate","formatMessage","useIntl","theme","useTheme","_jsx","FocusTrap","onEscape","CroppingActionRow","justifyContent","paddingLeft","paddingRight","_jsxs","Flex","gap","IconButton","label","id","getTrad","defaultMessage","onClick","Cross","Menu","Root","Trigger","aria-label","variant","endIcon","Check","aria-hidden","focusable","style","position","top","fill","Content","zIndex","zIndices","dialog","Item","onSelect","styled","colors","neutral500","neutral600","neutral400"],"mappings":";;;;;;;;;;;;;;;AAeO,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAwB,GAAA;IACzF,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,KAAQC,GAAAA,yBAAAA,EAAAA;AAEd,IAAA,qBACEC,cAACC,CAAAA,sBAAAA,EAAAA;QAAUC,QAAUT,EAAAA,QAAAA;AACnB,QAAA,QAAA,gBAAAO,cAACG,CAAAA,mCAAAA,EAAAA;YAAkBC,cAAe,EAAA,UAAA;YAAWC,WAAa,EAAA,CAAA;YAAGC,YAAc,EAAA,CAAA;AACzE,YAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;gBAAKC,GAAK,EAAA,CAAA;;kCACTT,cAACU,CAAAA,uBAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOf,aAAc,CAAA;AACnBgB,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,wBAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA,CAAA;wBACAC,OAAStB,EAAAA,QAAAA;AAET,wBAAA,QAAA,gBAAAO,cAACgB,CAAAA,WAAAA,EAAAA,EAAAA;;AAGH,kCAAAT,eAAA,CAACU,kBAAKC,IAAI,EAAA;;0CACRlB,cAACmB,CAAAA,OAAAA,EAAAA;AACCC,gCAAAA,YAAAA,EAAYxB,aAAc,CAAA;AACxBgB,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,mBAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAO,OAAQ,EAAA,UAAA;gCACRhB,WAAa,EAAA,CAAA;gCACbC,YAAc,EAAA,CAAA;gCACdgB,OAAS,EAAA,IAAA;AAET,gCAAA,QAAA,gBAAAtB,cAACuB,CAAAA,WAAAA,EAAAA;oCACCC,aAAW,EAAA,IAAA;oCACXC,SAAW,EAAA,KAAA;oCACXC,KAAO,EAAA;wCAAEC,QAAU,EAAA,UAAA;wCAAYC,GAAK,EAAA;AAAE,qCAAA;oCACtCC,IAAK,EAAA;;;AAGT,0CAAAtB,eAAA,CAACU,kBAAKa,OAAO,EAAA;gCAACC,MAAQjC,EAAAA,KAAAA,CAAMkC,QAAQ,CAACC,MAAM;;AACzC,kDAAAjC,cAAA,CAACiB,kBAAKiB,IAAI,EAAA;wCAACC,QAAUzC,EAAAA,UAAAA;kDAClBE,aAAc,CAAA;AACbgB,4CAAAA,EAAAA,EAAIC,eAAQ,CAAA,4BAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;oCAGDnB,WACC,kBAAAK,cAAA,CAACiB,kBAAKiB,IAAI,EAAA;wCAACC,QAAUxC,EAAAA,WAAAA;kDAClBC,aAAc,CAAA;AACbgB,4CAAAA,EAAAA,EAAIC,eAAQ,CAAA,6BAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;;;;;;;;;AASlB;AAEA,MAAMK,OAAUiB,GAAAA,uBAAAA,CAAOnB,iBAAKE,CAAAA,OAAO,CAAC;;;;YAIxB,EAAE,CAAC,EAAErB,KAAK,EAAE,GAAKA,KAAMuC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;cAQvC,EAAE,CAAC,EAAExC,KAAK,EAAE,GAAKA,KAAMuC,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;;cASzC,EAAE,CAAC,EAAEzC,KAAK,EAAE,GAAKA,KAAMuC,CAAAA,MAAM,CAACG,UAAU,CAAC;;;;AAIvD,CAAC;;;;"}

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

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Menu, FocusTrap, Flex, IconButton } from '@strapi/design-system';
+import { Cross, Check } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled, useTheme } from 'styled-components';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../../utils/getTrad.mjs';
+import 'qs';
+import '../../../constants.mjs';
+import '../../../utils/urlYupSchema.mjs';
+import { CroppingActionRow } from './PreviewComponents.mjs';
+
+const CroppingActions = ({ onCancel, onValidate, onDuplicate })=>{
+    const { formatMessage } = useIntl();
+    const theme = useTheme();
+    return /*#__PURE__*/ jsx(FocusTrap, {
+        onEscape: onCancel,
+        children: /*#__PURE__*/ jsx(CroppingActionRow, {
+            justifyContent: "flex-end",
+            paddingLeft: 3,
+            paddingRight: 3,
+            children: /*#__PURE__*/ jsxs(Flex, {
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsx(IconButton, {
+                        label: formatMessage({
+                            id: getTrad('control-card.stop-crop'),
+                            defaultMessage: 'Stop cropping'
+                        }),
+                        onClick: onCancel,
+                        children: /*#__PURE__*/ jsx(Cross, {})
+                    }),
+                    /*#__PURE__*/ jsxs(Menu.Root, {
+                        children: [
+                            /*#__PURE__*/ jsx(Trigger, {
+                                "aria-label": formatMessage({
+                                    id: getTrad('control-card.crop'),
+                                    defaultMessage: 'Crop'
+                                }),
+                                variant: "tertiary",
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                endIcon: null,
+                                children: /*#__PURE__*/ jsx(Check, {
+                                    "aria-hidden": true,
+                                    focusable: false,
+                                    style: {
+                                        position: 'relative',
+                                        top: 2
+                                    },
+                                    fill: "#C0C0D0"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(Menu.Content, {
+                                zIndex: theme.zIndices.dialog,
+                                children: [
+                                    /*#__PURE__*/ jsx(Menu.Item, {
+                                        onSelect: onValidate,
+                                        children: formatMessage({
+                                            id: getTrad('checkControl.crop-original'),
+                                            defaultMessage: 'Crop the original asset'
+                                        })
+                                    }),
+                                    onDuplicate && /*#__PURE__*/ jsx(Menu.Item, {
+                                        onSelect: onDuplicate,
+                                        children: formatMessage({
+                                            id: getTrad('checkControl.crop-duplicate'),
+                                            defaultMessage: 'Duplicate & crop the asset'
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+const Trigger = styled(Menu.Trigger)`
+  svg {
+    > g,
+    path {
+      fill: ${({ theme })=>theme.colors.neutral500};
+    }
+  }
+
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme })=>theme.colors.neutral600};
+      }
+    }
+  }
+
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme })=>theme.colors.neutral400};
+      }
+    }
+  }
+`;
+
+export { CroppingActions };
+//# sourceMappingURL=CroppingActions.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CroppingActions.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/CroppingActions.tsx"],"sourcesContent":["import { Flex, FocusTrap, IconButton, Menu } from '@strapi/design-system';\nimport { Check, Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { getTrad } from '../../../utils';\n\nimport { CroppingActionRow } from './PreviewComponents';\n\ninterface CroppingActionsProps {\n  onCancel: () => void;\n  onValidate: () => void;\n  onDuplicate?: () => void;\n}\n\nexport const CroppingActions = ({ onCancel, onValidate, onDuplicate }: CroppingActionsProps) => {\n  const { formatMessage } = useIntl();\n  const theme = useTheme();\n\n  return (\n    <FocusTrap onEscape={onCancel}>\n      <CroppingActionRow justifyContent=\"flex-end\" paddingLeft={3} paddingRight={3}>\n        <Flex gap={1}>\n          <IconButton\n            label={formatMessage({\n              id: getTrad('control-card.stop-crop'),\n              defaultMessage: 'Stop cropping',\n            })}\n            onClick={onCancel}\n          >\n            <Cross />\n          </IconButton>\n\n          <Menu.Root>\n            <Trigger\n              aria-label={formatMessage({\n                id: getTrad('control-card.crop'),\n                defaultMessage: 'Crop',\n              })}\n              variant=\"tertiary\"\n              paddingLeft={2}\n              paddingRight={2}\n              endIcon={null}\n            >\n              <Check\n                aria-hidden\n                focusable={false}\n                style={{ position: 'relative', top: 2 }}\n                fill=\"#C0C0D0\"\n              />\n            </Trigger>\n            <Menu.Content zIndex={theme.zIndices.dialog}>\n              <Menu.Item onSelect={onValidate}>\n                {formatMessage({\n                  id: getTrad('checkControl.crop-original'),\n                  defaultMessage: 'Crop the original asset',\n                })}\n              </Menu.Item>\n\n              {onDuplicate && (\n                <Menu.Item onSelect={onDuplicate}>\n                  {formatMessage({\n                    id: getTrad('checkControl.crop-duplicate'),\n                    defaultMessage: 'Duplicate & crop the asset',\n                  })}\n                </Menu.Item>\n              )}\n            </Menu.Content>\n          </Menu.Root>\n        </Flex>\n      </CroppingActionRow>\n    </FocusTrap>\n  );\n};\n\nconst Trigger = styled(Menu.Trigger)`\n  svg {\n    > g,\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n\n  &:hover {\n    svg {\n      > g,\n      path {\n        fill: ${({ theme }) => theme.colors.neutral600};\n      }\n    }\n  }\n\n  &:active {\n    svg {\n      > g,\n      path {\n        fill: ${({ theme }) => theme.colors.neutral400};\n      }\n    }\n  }\n`;\n"],"names":["CroppingActions","onCancel","onValidate","onDuplicate","formatMessage","useIntl","theme","useTheme","_jsx","FocusTrap","onEscape","CroppingActionRow","justifyContent","paddingLeft","paddingRight","_jsxs","Flex","gap","IconButton","label","id","getTrad","defaultMessage","onClick","Cross","Menu","Root","Trigger","aria-label","variant","endIcon","Check","aria-hidden","focusable","style","position","top","fill","Content","zIndex","zIndices","dialog","Item","onSelect","styled","colors","neutral500","neutral600","neutral400"],"mappings":";;;;;;;;;;;;;AAeO,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAwB,GAAA;IACzF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,KAAQC,GAAAA,QAAAA,EAAAA;AAEd,IAAA,qBACEC,GAACC,CAAAA,SAAAA,EAAAA;QAAUC,QAAUT,EAAAA,QAAAA;AACnB,QAAA,QAAA,gBAAAO,GAACG,CAAAA,iBAAAA,EAAAA;YAAkBC,cAAe,EAAA,UAAA;YAAWC,WAAa,EAAA,CAAA;YAAGC,YAAc,EAAA,CAAA;AACzE,YAAA,QAAA,gBAAAC,IAACC,CAAAA,IAAAA,EAAAA;gBAAKC,GAAK,EAAA,CAAA;;kCACTT,GAACU,CAAAA,UAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOf,aAAc,CAAA;AACnBgB,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,wBAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA,CAAA;wBACAC,OAAStB,EAAAA,QAAAA;AAET,wBAAA,QAAA,gBAAAO,GAACgB,CAAAA,KAAAA,EAAAA,EAAAA;;AAGH,kCAAAT,IAAA,CAACU,KAAKC,IAAI,EAAA;;0CACRlB,GAACmB,CAAAA,OAAAA,EAAAA;AACCC,gCAAAA,YAAAA,EAAYxB,aAAc,CAAA;AACxBgB,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,mBAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAO,OAAQ,EAAA,UAAA;gCACRhB,WAAa,EAAA,CAAA;gCACbC,YAAc,EAAA,CAAA;gCACdgB,OAAS,EAAA,IAAA;AAET,gCAAA,QAAA,gBAAAtB,GAACuB,CAAAA,KAAAA,EAAAA;oCACCC,aAAW,EAAA,IAAA;oCACXC,SAAW,EAAA,KAAA;oCACXC,KAAO,EAAA;wCAAEC,QAAU,EAAA,UAAA;wCAAYC,GAAK,EAAA;AAAE,qCAAA;oCACtCC,IAAK,EAAA;;;AAGT,0CAAAtB,IAAA,CAACU,KAAKa,OAAO,EAAA;gCAACC,MAAQjC,EAAAA,KAAAA,CAAMkC,QAAQ,CAACC,MAAM;;AACzC,kDAAAjC,GAAA,CAACiB,KAAKiB,IAAI,EAAA;wCAACC,QAAUzC,EAAAA,UAAAA;kDAClBE,aAAc,CAAA;AACbgB,4CAAAA,EAAAA,EAAIC,OAAQ,CAAA,4BAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;oCAGDnB,WACC,kBAAAK,GAAA,CAACiB,KAAKiB,IAAI,EAAA;wCAACC,QAAUxC,EAAAA,WAAAA;kDAClBC,aAAc,CAAA;AACbgB,4CAAAA,EAAAA,EAAIC,OAAQ,CAAA,6BAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;;;;;;;;;AASlB;AAEA,MAAMK,OAAUiB,GAAAA,MAAAA,CAAOnB,IAAKE,CAAAA,OAAO,CAAC;;;;YAIxB,EAAE,CAAC,EAAErB,KAAK,EAAE,GAAKA,KAAMuC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;cAQvC,EAAE,CAAC,EAAExC,KAAK,EAAE,GAAKA,KAAMuC,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;;cASzC,EAAE,CAAC,EAAEzC,KAAK,EAAE,GAAKA,KAAMuC,CAAAA,MAAM,CAACG,UAAU,CAAC;;;;AAIvD,CAAC;;;;"}

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

@@ -0,0 +1,260 @@
+'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 icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var constants = require('../../../constants.js');
+var useCropImg = require('../../../hooks/useCropImg.js');
+var useEditAsset = require('../../../hooks/useEditAsset.js');
+var useUpload = require('../../../hooks/useUpload.js');
+var createAssetUrl = require('../../../utils/createAssetUrl.js');
+var downloadFile = require('../../../utils/downloadFile.js');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../../utils/getTrad.js');
+require('qs');
+require('../../../utils/urlYupSchema.js');
+var CopyLinkButton = require('../../CopyLinkButton/CopyLinkButton.js');
+var UploadProgress = require('../../UploadProgress/UploadProgress.js');
+var RemoveAssetDialog = require('../RemoveAssetDialog.js');
+var AssetPreview = require('./AssetPreview.js');
+var CroppingActions = require('./CroppingActions.js');
+var PreviewComponents = require('./PreviewComponents.js');
+require('cropperjs/dist/cropper.css');
+
+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);
+
+// 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 } = strapiAdmin.useTracking();
+    const previewRef = React__namespace.useRef(null);
+    const [isCropImageReady, setIsCropImageReady] = React__namespace.useState(false);
+    const [hasCropIntent, setHasCropIntent] = React__namespace.useState(null);
+    const [assetUrl, setAssetUrl] = React__namespace.useState(createAssetUrl.createAssetUrl(asset, false));
+    const [thumbnailUrl, setThumbnailUrl] = React__namespace.useState(createAssetUrl.createAssetUrl(asset, true));
+    const { formatMessage } = reactIntl.useIntl();
+    const [showConfirmDialog, setShowConfirmDialog] = React__namespace.useState(false);
+    const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg.useCropImg();
+    const { editAsset, error, isLoading, progress, cancel } = useEditAsset.useEditAsset();
+    const { upload, isLoading: isLoadingUpload, cancel: cancelUpload, error: uploadError, progress: progressUpload } = useUpload.useUpload();
+    React__namespace.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__namespace.useEffect(()=>{
+        if (hasCropIntent === false) {
+            stopCropping();
+            onCropCancel();
+        }
+    }, [
+        hasCropIntent,
+        stopCropping,
+        onCropCancel,
+        onCropFinish
+    ]);
+    React__namespace.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.createAssetUrl(updatedAsset, false);
+            optimizedCachingThumbnailImage = createAssetUrl.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__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(PreviewComponents.RelativeBox, {
+                hasRadius: true,
+                background: "neutral150",
+                borderColor: "neutral200",
+                children: [
+                    isCropperReady && isInCroppingMode && /*#__PURE__*/ jsxRuntime.jsx(CroppingActions.CroppingActions, {
+                        onValidate: handleCropping,
+                        onDuplicate: asset.isLocal ? undefined : handleDuplication,
+                        onCancel: handleCropCancel
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.ActionRow, {
+                        paddingLeft: 3,
+                        paddingRight: 3,
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 1,
+                            children: [
+                                canUpdate && !asset.isLocal && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    label: formatMessage({
+                                        id: 'global.delete',
+                                        defaultMessage: 'Delete'
+                                    }),
+                                    onClick: ()=>setShowConfirmDialog(true),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                                }),
+                                canDownload && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    label: formatMessage({
+                                        id: getTrad.getTrad('control-card.download'),
+                                        defaultMessage: 'Download'
+                                    }),
+                                    onClick: ()=>downloadFile.downloadFile(assetUrl, asset.name),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Download, {})
+                                }),
+                                canCopyLink && /*#__PURE__*/ jsxRuntime.jsx(CopyLinkButton.CopyLinkButton, {
+                                    url: assetUrl
+                                }),
+                                canUpdate && asset.mime?.includes(constants.AssetType.Image) && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    label: formatMessage({
+                                        id: getTrad.getTrad('control-card.crop'),
+                                        defaultMessage: 'Crop'
+                                    }),
+                                    onClick: handleCropStart,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(PreviewComponents.Wrapper, {
+                        children: [
+                            isLoading && /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.UploadProgressWrapper, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgress.UploadProgress, {
+                                    error: error,
+                                    onCancel: cancel,
+                                    progress: progress
+                                })
+                            }),
+                            isLoadingUpload && /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.UploadProgressWrapper, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgress.UploadProgress, {
+                                    error: uploadError,
+                                    onCancel: cancelUpload,
+                                    progress: progressUpload
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
+                                ref: previewRef,
+                                mime: asset.mime,
+                                name: asset.name,
+                                url: hasCropIntent ? assetUrl : thumbnailUrl,
+                                onLoad: ()=>{
+                                    if (asset.isLocal || hasCropIntent) {
+                                        setIsCropImageReady(true);
+                                    }
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.ActionRow, {
+                        paddingLeft: 2,
+                        paddingRight: 2,
+                        justifyContent: "flex-end",
+                        $blurry: isInCroppingMode,
+                        children: isInCroppingMode && width && height && /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.BadgeOverride, {
+                            background: "neutral900",
+                            color: "neutral0",
+                            children: width && height ? `${height}✕${width}` : 'N/A'
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(RemoveAssetDialog.RemoveAssetDialog, {
+                open: showConfirmDialog,
+                onClose: ()=>{
+                    setShowConfirmDialog(false);
+                    onDelete(null);
+                },
+                asset: asset
+            })
+        ]
+    });
+};
+
+exports.PreviewBox = PreviewBox;
+//# sourceMappingURL=PreviewBox.js.map