@strapi/upload 5.59.0 → 5.61.0

package/dist/admin/components/MediaLibraryInput/AddAssetMenu.mjs

@@ -1,4 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { Menu } from '@strapi/design-system';
 import { ChevronDown, Images, Upload, Link } from '@strapi/icons';
 import { useIntl } from 'react-intl';
@@ -6,6 +7,7 @@ import { styled } from 'styled-components';
 import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
 import { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent.mjs';
 import { getTranslationKey } from '../../utils/translations.mjs';
+import { FieldMenuItem } from './FieldControls.mjs';
 
 // The trigger reads as a link on the label row, not as a button: no padding, no
 // ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the
@@ -69,9 +71,10 @@ const AddAssetTrigger = styled(Menu.Trigger)`
  *
  * The drop zone below keeps working whatever this shows — it is a second way
  * in, not the only one.
- */ const AddAssetMenu = ({ disabled = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
+ */ const AddAssetMenu = ({ disabled = false, preventOpen = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
     const { formatMessage } = useIntl();
     const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();
+    const [isOpen, setIsOpen] = useState(false);
     // `useRBAC` starts every instance at `isLoading: true` with the flags false.
     // Until it settles, every entry shows but none can be picked: hiding them
     // would flash a smaller menu, enabling them would lead to a 403.
@@ -81,6 +84,8 @@ const AddAssetTrigger = styled(Menu.Trigger)`
         return null;
     }
     return /*#__PURE__*/ jsxs(Menu.Root, {
+        open: isOpen,
+        onOpenChange: (open)=>setIsOpen(open && !preventOpen),
         children: [
             /*#__PURE__*/ jsx(AddAssetTrigger, {
                 variant: "ghost",
@@ -98,7 +103,7 @@ const AddAssetTrigger = styled(Menu.Trigger)`
                 zIndex: 2,
                 minWidth: "22rem",
                 children: [
-                    canBrowse && /*#__PURE__*/ jsx(Menu.Item, {
+                    canBrowse && /*#__PURE__*/ jsx(FieldMenuItem, {
                         startIcon: /*#__PURE__*/ jsx(Images, {}),
                         disabled: isLoading,
                         onSelect: onBrowseLibrary,
@@ -109,7 +114,7 @@ const AddAssetTrigger = styled(Menu.Trigger)`
                     }),
                     canUpload && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
-                            /*#__PURE__*/ jsx(Menu.Item, {
+                            /*#__PURE__*/ jsx(FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsx(Upload, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromDevice,
@@ -118,7 +123,7 @@ const AddAssetTrigger = styled(Menu.Trigger)`
                                     defaultMessage: 'Upload from device'
                                 })
                             }),
-                            /*#__PURE__*/ jsx(Menu.Item, {
+                            /*#__PURE__*/ jsx(FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsx(Link, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromUrl,

package/dist/admin/components/MediaLibraryInput/AddAssetMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AddAssetMenu.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <Menu.Item startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </Menu.Item>\n        )}\n\n        {canUpload && (\n          <>\n            <Menu.Item startIcon={<Upload />} disabled={isLoading} onSelect={onUploadFromDevice}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </Menu.Item>\n\n            <Menu.Item startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </Menu.Item>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","canBrowse","canUpload","_jsxs","Root","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","Item","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}
+{"version":3,"file":"AddAssetMenu.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { FieldMenuItem } from './FieldControls';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  /**\n   * Ignore requests to open, without looking disabled. The press still reaches\n   * whatever listens for presses outside it, so an open drawer closes — or asks\n   * about unsaved edits — instead of having the menu stacked over it.\n   */\n  preventOpen?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  preventOpen = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n  const [isOpen, setIsOpen] = useState(false);\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root open={isOpen} onOpenChange={(open) => setIsOpen(open && !preventOpen)}>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <FieldMenuItem startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </FieldMenuItem>\n        )}\n\n        {canUpload && (\n          <>\n            <FieldMenuItem\n              startIcon={<Upload />}\n              disabled={isLoading}\n              onSelect={onUploadFromDevice}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </FieldMenuItem>\n\n            <FieldMenuItem startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </FieldMenuItem>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","preventOpen","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","isOpen","setIsOpen","useState","canBrowse","canUpload","_jsxs","Root","open","onOpenChange","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","FieldMenuItem","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}

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

@@ -0,0 +1,240 @@
+'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');
+var translations = require('../../utils/translations.js');
+var AssetPreview = require('./AssetPreview.js');
+var FieldControls = require('./FieldControls.js');
+var UploadProgressBar = require('./UploadProgressBar.js');
+
+const CARD_COLORS = {
+    neutral: {
+        background: 'neutral0',
+        border: 'neutral200'
+    },
+    primary: {
+        background: 'primary100',
+        border: 'primary200'
+    },
+    danger: {
+        background: 'danger100',
+        border: 'danger200'
+    }
+};
+const Card = styledComponents.styled(designSystem.Flex)`
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background: ${({ theme, $tone })=>theme.colors[CARD_COLORS[$tone].background]};
+  border: 1px solid ${({ theme, $tone })=>theme.colors[CARD_COLORS[$tone].border]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Name = styledComponents.styled(designSystem.Typography)`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const PreviewOverlay = styledComponents.styled(designSystem.Box)`
+  position: absolute;
+  inset: auto 0 0 0;
+`;
+const DangerIconButton = styledComponents.styled(designSystem.IconButton)`
+  color: ${({ theme })=>theme.colors.danger600};
+  background: ${({ theme })=>theme.colors.danger100};
+  border-color: ${({ theme })=>theme.colors.danger200};
+
+  svg path {
+    fill: currentColor;
+  }
+`;
+const CardFrame = ({ tone, preview, overlay, name, actions })=>/*#__PURE__*/ jsxRuntime.jsxs(Card, {
+        $tone: tone,
+        direction: "column",
+        alignItems: "stretch",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                position: "relative",
+                children: [
+                    preview,
+                    overlay
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 3,
+                paddingLeft: 3,
+                paddingRight: 2,
+                paddingTop: 2,
+                paddingBottom: 2,
+                minHeight: "4.8rem",
+                children: [
+                    name,
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        gap: 1,
+                        shrink: 0,
+                        marginLeft: "auto",
+                        children: actions
+                    })
+                ]
+            })
+        ]
+    });
+/**
+ * An asset a multiple-value field holds.
+ */ const AssetCard = ({ asset, disabled = false, onCopyLink, onEdit, onRemove })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(CardFrame, {
+        tone: "neutral",
+        preview: /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
+            asset: asset,
+            size: "L"
+        }),
+        name: /*#__PURE__*/ jsxRuntime.jsx(Name, {
+            textColor: "neutral800",
+            children: asset.name
+        }),
+        actions: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+            modal: false,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
+                    tag: designSystem.IconButton,
+                    icon: /*#__PURE__*/ jsxRuntime.jsx(icons.More, {}),
+                    variant: "ghost",
+                    label: formatMessage({
+                        id: translations.getTranslationKey('content-manager.input.actions.more'),
+                        defaultMessage: 'More actions for {name}'
+                    }, {
+                        name: asset.name
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Content, {
+                    popoverPlacement: "bottom-end",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
+                            onSelect: ()=>onCopyLink(asset),
+                            children: formatMessage({
+                                id: translations.getTranslationKey('asset-details.copy-link.trigger'),
+                                defaultMessage: 'Copy link'
+                            })
+                        }),
+                        onEdit && /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {}),
+                            disabled: disabled,
+                            onSelect: ()=>onEdit(asset),
+                            children: formatMessage({
+                                id: translations.getTranslationKey('control-card.edit'),
+                                defaultMessage: 'Edit'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
+                            variant: "danger",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {}),
+                            disabled: disabled,
+                            onSelect: ()=>onRemove(asset),
+                            children: formatMessage({
+                                id: translations.getTranslationKey('content-manager.input.actions.remove-failed'),
+                                defaultMessage: 'Remove'
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+/**
+ * A file a multiple-value field is uploading, or failed to upload.
+ */ const UploadCard = ({ upload, disabled = false, onCancel, onRetry, onRemove })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const preview = /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.UploadPreview, {
+        file: upload.sourceFile,
+        size: "L"
+    });
+    if (upload.status === 'failed') {
+        const canRetry = upload.isInStore || upload.sourceFile !== undefined;
+        return /*#__PURE__*/ jsxRuntime.jsx(CardFrame, {
+            tone: "danger",
+            preview: preview,
+            name: /*#__PURE__*/ jsxRuntime.jsx(Name, {
+                textColor: "danger600",
+                children: upload.name
+            }),
+            actions: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    canRetry && /*#__PURE__*/ jsxRuntime.jsx(FieldControls.GhostIconButton, {
+                        disabled: disabled,
+                        onClick: ()=>onRetry(upload),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.retry'),
+                            defaultMessage: 'Retry uploading {name}'
+                        }, {
+                            name: upload.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowClockwise, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(DangerIconButton, {
+                        disabled: disabled,
+                        onClick: ()=>onRemove(upload),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.remove'),
+                            defaultMessage: 'Remove {name}'
+                        }, {
+                            name: upload.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                    })
+                ]
+            })
+        });
+    }
+    const uploadingLabel = formatMessage({
+        id: translations.getTranslationKey('content-manager.input.status.uploading'),
+        defaultMessage: 'Uploading'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(CardFrame, {
+        tone: "primary",
+        preview: preview,
+        overlay: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    position: "absolute",
+                    top: 2,
+                    left: 2,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Badge, {
+                        backgroundColor: "primary100",
+                        textColor: "primary600",
+                        children: uploadingLabel
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(PreviewOverlay, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgressBar.UploadProgressBar, {
+                        progress: upload.progress,
+                        label: uploadingLabel
+                    })
+                })
+            ]
+        }),
+        name: /*#__PURE__*/ jsxRuntime.jsx(Name, {
+            textColor: "neutral800",
+            children: upload.name
+        }),
+        actions: /*#__PURE__*/ jsxRuntime.jsx(FieldControls.GhostIconButton, {
+            onClick: ()=>onCancel(upload),
+            label: formatMessage({
+                id: translations.getTranslationKey('content-manager.input.actions.cancel'),
+                defaultMessage: 'Cancel upload of {name}'
+            }, {
+                name: upload.name
+            }),
+            children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+        })
+    });
+};
+
+exports.AssetCard = AssetCard;
+exports.UploadCard = UploadCard;
+//# sourceMappingURL=AssetCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetCard.tsx"],"sourcesContent":["import { Badge, Box, Flex, IconButton, Menu, Typography } from '@strapi/design-system';\nimport { ArrowClockwise, Cross, Link, More, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetPreview, UploadPreview } from './AssetPreview';\nimport { FieldMenuItem, GhostIconButton } from './FieldControls';\nimport { UploadProgressBar } from './UploadProgressBar';\n\nimport type { FieldUpload } from './useFieldUploads';\nimport type { File } from '../../../../shared/contracts/files';\n\ntype CardTone = 'neutral' | 'primary' | 'danger';\n\nconst CARD_COLORS = {\n  neutral: { background: 'neutral0', border: 'neutral200' },\n  primary: { background: 'primary100', border: 'primary200' },\n  danger: { background: 'danger100', border: 'danger200' },\n} as const;\n\nconst Card = styled(Flex)<{ $tone: CardTone }>`\n  position: relative;\n  min-width: 0;\n  overflow: hidden;\n  background: ${({ theme, $tone }) => theme.colors[CARD_COLORS[$tone].background]};\n  border: 1px solid ${({ theme, $tone }) => theme.colors[CARD_COLORS[$tone].border]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst PreviewOverlay = styled(Box)`\n  position: absolute;\n  inset: auto 0 0 0;\n`;\n\nconst DangerIconButton = styled(IconButton)`\n  color: ${({ theme }) => theme.colors.danger600};\n  background: ${({ theme }) => theme.colors.danger100};\n  border-color: ${({ theme }) => theme.colors.danger200};\n\n  svg path {\n    fill: currentColor;\n  }\n`;\n\ninterface CardFrameProps {\n  tone: CardTone;\n  preview: React.ReactNode;\n  overlay?: React.ReactNode;\n  name: React.ReactNode;\n  actions: React.ReactNode;\n}\n\nconst CardFrame = ({ tone, preview, overlay, name, actions }: CardFrameProps) => (\n  <Card $tone={tone} direction=\"column\" alignItems=\"stretch\">\n    <Box position=\"relative\">\n      {preview}\n      {overlay}\n    </Box>\n    <Flex\n      gap={3}\n      paddingLeft={3}\n      paddingRight={2}\n      paddingTop={2}\n      paddingBottom={2}\n      minHeight=\"4.8rem\"\n    >\n      {name}\n      <Flex gap={1} shrink={0} marginLeft=\"auto\">\n        {actions}\n      </Flex>\n    </Flex>\n  </Card>\n);\n\ninterface AssetCardProps {\n  asset: File;\n  disabled?: boolean;\n  onCopyLink: (asset: File) => void;\n  onEdit?: (asset: File) => void;\n  onRemove: (asset: File) => void;\n}\n\n/**\n * An asset a multiple-value field holds.\n */\nexport const AssetCard = ({\n  asset,\n  disabled = false,\n  onCopyLink,\n  onEdit,\n  onRemove,\n}: AssetCardProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <CardFrame\n      tone=\"neutral\"\n      preview={<AssetPreview asset={asset} size=\"L\" />}\n      name={<Name textColor=\"neutral800\">{asset.name}</Name>}\n      actions={\n        <Menu.Root modal={false}>\n          <Menu.Trigger\n            tag={IconButton}\n            icon={<More />}\n            variant=\"ghost\"\n            label={formatMessage(\n              {\n                id: getTranslationKey('content-manager.input.actions.more'),\n                defaultMessage: 'More actions for {name}',\n              },\n              { name: asset.name }\n            )}\n          />\n          <Menu.Content popoverPlacement=\"bottom-end\">\n            <FieldMenuItem startIcon={<Link />} onSelect={() => onCopyLink(asset)}>\n              {formatMessage({\n                id: getTranslationKey('asset-details.copy-link.trigger'),\n                defaultMessage: 'Copy link',\n              })}\n            </FieldMenuItem>\n            {onEdit && (\n              <FieldMenuItem\n                startIcon={<Pencil />}\n                disabled={disabled}\n                onSelect={() => onEdit(asset)}\n              >\n                {formatMessage({\n                  id: getTranslationKey('control-card.edit'),\n                  defaultMessage: 'Edit',\n                })}\n              </FieldMenuItem>\n            )}\n            <FieldMenuItem\n              variant=\"danger\"\n              startIcon={<Trash />}\n              disabled={disabled}\n              onSelect={() => onRemove(asset)}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.actions.remove-failed'),\n                defaultMessage: 'Remove',\n              })}\n            </FieldMenuItem>\n          </Menu.Content>\n        </Menu.Root>\n      }\n    />\n  );\n};\n\ninterface UploadCardProps {\n  upload: FieldUpload;\n  disabled?: boolean;\n  onCancel: (upload: FieldUpload) => void;\n  onRetry: (upload: FieldUpload) => void;\n  onRemove: (upload: FieldUpload) => void;\n}\n\n/**\n * A file a multiple-value field is uploading, or failed to upload.\n */\nexport const UploadCard = ({\n  upload,\n  disabled = false,\n  onCancel,\n  onRetry,\n  onRemove,\n}: UploadCardProps) => {\n  const { formatMessage } = useIntl();\n  const preview = <UploadPreview file={upload.sourceFile} size=\"L\" />;\n\n  if (upload.status === 'failed') {\n    const canRetry = upload.isInStore || upload.sourceFile !== undefined;\n\n    return (\n      <CardFrame\n        tone=\"danger\"\n        preview={preview}\n        name={<Name textColor=\"danger600\">{upload.name}</Name>}\n        actions={\n          <>\n            {canRetry && (\n              <GhostIconButton\n                disabled={disabled}\n                onClick={() => onRetry(upload)}\n                label={formatMessage(\n                  {\n                    id: getTranslationKey('content-manager.input.actions.retry'),\n                    defaultMessage: 'Retry uploading {name}',\n                  },\n                  { name: upload.name }\n                )}\n              >\n                <ArrowClockwise />\n              </GhostIconButton>\n            )}\n            <DangerIconButton\n              disabled={disabled}\n              onClick={() => onRemove(upload)}\n              label={formatMessage(\n                {\n                  id: getTranslationKey('content-manager.input.actions.remove'),\n                  defaultMessage: 'Remove {name}',\n                },\n                { name: upload.name }\n              )}\n            >\n              <Trash />\n            </DangerIconButton>\n          </>\n        }\n      />\n    );\n  }\n\n  const uploadingLabel = formatMessage({\n    id: getTranslationKey('content-manager.input.status.uploading'),\n    defaultMessage: 'Uploading',\n  });\n\n  return (\n    <CardFrame\n      tone=\"primary\"\n      preview={preview}\n      overlay={\n        <>\n          <Box position=\"absolute\" top={2} left={2}>\n            <Badge backgroundColor=\"primary100\" textColor=\"primary600\">\n              {uploadingLabel}\n            </Badge>\n          </Box>\n          <PreviewOverlay>\n            <UploadProgressBar progress={upload.progress} label={uploadingLabel} />\n          </PreviewOverlay>\n        </>\n      }\n      name={<Name textColor=\"neutral800\">{upload.name}</Name>}\n      actions={\n        <GhostIconButton\n          onClick={() => onCancel(upload)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.cancel'),\n              defaultMessage: 'Cancel upload of {name}',\n            },\n            { name: upload.name }\n          )}\n        >\n          <Cross />\n        </GhostIconButton>\n      }\n    />\n  );\n};\n"],"names":["CARD_COLORS","neutral","background","border","primary","danger","Card","styled","Flex","theme","$tone","colors","borderRadius","Name","Typography","PreviewOverlay","Box","DangerIconButton","IconButton","danger600","danger100","danger200","CardFrame","tone","preview","overlay","name","actions","_jsxs","direction","alignItems","position","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","minHeight","_jsx","shrink","marginLeft","AssetCard","asset","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","AssetPreview","size","textColor","Menu","Root","modal","Trigger","tag","icon","More","variant","label","id","getTranslationKey","defaultMessage","Content","popoverPlacement","FieldMenuItem","startIcon","Link","onSelect","Pencil","Trash","UploadCard","upload","onCancel","onRetry","UploadPreview","file","sourceFile","status","canRetry","isInStore","undefined","_Fragment","GhostIconButton","onClick","ArrowClockwise","uploadingLabel","top","left","Badge","backgroundColor","UploadProgressBar","progress","Cross"],"mappings":"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"}

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

@@ -0,0 +1,237 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Flex, Typography, Box, IconButton, Menu, Badge } from '@strapi/design-system';
+import { More, Link, Pencil, Trash, ArrowClockwise, Cross } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey } from '../../utils/translations.mjs';
+import { AssetPreview, UploadPreview } from './AssetPreview.mjs';
+import { FieldMenuItem, GhostIconButton } from './FieldControls.mjs';
+import { UploadProgressBar } from './UploadProgressBar.mjs';
+
+const CARD_COLORS = {
+    neutral: {
+        background: 'neutral0',
+        border: 'neutral200'
+    },
+    primary: {
+        background: 'primary100',
+        border: 'primary200'
+    },
+    danger: {
+        background: 'danger100',
+        border: 'danger200'
+    }
+};
+const Card = styled(Flex)`
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background: ${({ theme, $tone })=>theme.colors[CARD_COLORS[$tone].background]};
+  border: 1px solid ${({ theme, $tone })=>theme.colors[CARD_COLORS[$tone].border]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Name = styled(Typography)`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const PreviewOverlay = styled(Box)`
+  position: absolute;
+  inset: auto 0 0 0;
+`;
+const DangerIconButton = styled(IconButton)`
+  color: ${({ theme })=>theme.colors.danger600};
+  background: ${({ theme })=>theme.colors.danger100};
+  border-color: ${({ theme })=>theme.colors.danger200};
+
+  svg path {
+    fill: currentColor;
+  }
+`;
+const CardFrame = ({ tone, preview, overlay, name, actions })=>/*#__PURE__*/ jsxs(Card, {
+        $tone: tone,
+        direction: "column",
+        alignItems: "stretch",
+        children: [
+            /*#__PURE__*/ jsxs(Box, {
+                position: "relative",
+                children: [
+                    preview,
+                    overlay
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 3,
+                paddingLeft: 3,
+                paddingRight: 2,
+                paddingTop: 2,
+                paddingBottom: 2,
+                minHeight: "4.8rem",
+                children: [
+                    name,
+                    /*#__PURE__*/ jsx(Flex, {
+                        gap: 1,
+                        shrink: 0,
+                        marginLeft: "auto",
+                        children: actions
+                    })
+                ]
+            })
+        ]
+    });
+/**
+ * An asset a multiple-value field holds.
+ */ const AssetCard = ({ asset, disabled = false, onCopyLink, onEdit, onRemove })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(CardFrame, {
+        tone: "neutral",
+        preview: /*#__PURE__*/ jsx(AssetPreview, {
+            asset: asset,
+            size: "L"
+        }),
+        name: /*#__PURE__*/ jsx(Name, {
+            textColor: "neutral800",
+            children: asset.name
+        }),
+        actions: /*#__PURE__*/ jsxs(Menu.Root, {
+            modal: false,
+            children: [
+                /*#__PURE__*/ jsx(Menu.Trigger, {
+                    tag: IconButton,
+                    icon: /*#__PURE__*/ jsx(More, {}),
+                    variant: "ghost",
+                    label: formatMessage({
+                        id: getTranslationKey('content-manager.input.actions.more'),
+                        defaultMessage: 'More actions for {name}'
+                    }, {
+                        name: asset.name
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Menu.Content, {
+                    popoverPlacement: "bottom-end",
+                    children: [
+                        /*#__PURE__*/ jsx(FieldMenuItem, {
+                            startIcon: /*#__PURE__*/ jsx(Link, {}),
+                            onSelect: ()=>onCopyLink(asset),
+                            children: formatMessage({
+                                id: getTranslationKey('asset-details.copy-link.trigger'),
+                                defaultMessage: 'Copy link'
+                            })
+                        }),
+                        onEdit && /*#__PURE__*/ jsx(FieldMenuItem, {
+                            startIcon: /*#__PURE__*/ jsx(Pencil, {}),
+                            disabled: disabled,
+                            onSelect: ()=>onEdit(asset),
+                            children: formatMessage({
+                                id: getTranslationKey('control-card.edit'),
+                                defaultMessage: 'Edit'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(FieldMenuItem, {
+                            variant: "danger",
+                            startIcon: /*#__PURE__*/ jsx(Trash, {}),
+                            disabled: disabled,
+                            onSelect: ()=>onRemove(asset),
+                            children: formatMessage({
+                                id: getTranslationKey('content-manager.input.actions.remove-failed'),
+                                defaultMessage: 'Remove'
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+/**
+ * A file a multiple-value field is uploading, or failed to upload.
+ */ const UploadCard = ({ upload, disabled = false, onCancel, onRetry, onRemove })=>{
+    const { formatMessage } = useIntl();
+    const preview = /*#__PURE__*/ jsx(UploadPreview, {
+        file: upload.sourceFile,
+        size: "L"
+    });
+    if (upload.status === 'failed') {
+        const canRetry = upload.isInStore || upload.sourceFile !== undefined;
+        return /*#__PURE__*/ jsx(CardFrame, {
+            tone: "danger",
+            preview: preview,
+            name: /*#__PURE__*/ jsx(Name, {
+                textColor: "danger600",
+                children: upload.name
+            }),
+            actions: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    canRetry && /*#__PURE__*/ jsx(GhostIconButton, {
+                        disabled: disabled,
+                        onClick: ()=>onRetry(upload),
+                        label: formatMessage({
+                            id: getTranslationKey('content-manager.input.actions.retry'),
+                            defaultMessage: 'Retry uploading {name}'
+                        }, {
+                            name: upload.name
+                        }),
+                        children: /*#__PURE__*/ jsx(ArrowClockwise, {})
+                    }),
+                    /*#__PURE__*/ jsx(DangerIconButton, {
+                        disabled: disabled,
+                        onClick: ()=>onRemove(upload),
+                        label: formatMessage({
+                            id: getTranslationKey('content-manager.input.actions.remove'),
+                            defaultMessage: 'Remove {name}'
+                        }, {
+                            name: upload.name
+                        }),
+                        children: /*#__PURE__*/ jsx(Trash, {})
+                    })
+                ]
+            })
+        });
+    }
+    const uploadingLabel = formatMessage({
+        id: getTranslationKey('content-manager.input.status.uploading'),
+        defaultMessage: 'Uploading'
+    });
+    return /*#__PURE__*/ jsx(CardFrame, {
+        tone: "primary",
+        preview: preview,
+        overlay: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Box, {
+                    position: "absolute",
+                    top: 2,
+                    left: 2,
+                    children: /*#__PURE__*/ jsx(Badge, {
+                        backgroundColor: "primary100",
+                        textColor: "primary600",
+                        children: uploadingLabel
+                    })
+                }),
+                /*#__PURE__*/ jsx(PreviewOverlay, {
+                    children: /*#__PURE__*/ jsx(UploadProgressBar, {
+                        progress: upload.progress,
+                        label: uploadingLabel
+                    })
+                })
+            ]
+        }),
+        name: /*#__PURE__*/ jsx(Name, {
+            textColor: "neutral800",
+            children: upload.name
+        }),
+        actions: /*#__PURE__*/ jsx(GhostIconButton, {
+            onClick: ()=>onCancel(upload),
+            label: formatMessage({
+                id: getTranslationKey('content-manager.input.actions.cancel'),
+                defaultMessage: 'Cancel upload of {name}'
+            }, {
+                name: upload.name
+            }),
+            children: /*#__PURE__*/ jsx(Cross, {})
+        })
+    });
+};
+
+export { AssetCard, UploadCard };
+//# sourceMappingURL=AssetCard.mjs.map