@strapi/upload 5.54.0 → 5.55.0

package/dist/admin/pages/Assets/components/AssetDetails/AssetDetailsDrawer.js

@@ -0,0 +1,1202 @@
+'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 styledComponents = require('styled-components');
+var Drawer = require('../../../../components/Drawer.js');
+var enums = require('../../../../enums.js');
+var useAIMetadataEnabled = require('../../../../hooks/useAIMetadataEnabled.js');
+var useApiErrorMessage = require('../../../../hooks/useApiErrorMessage.js');
+var useMediaLibraryPermissions = require('../../../../hooks/useMediaLibraryPermissions.js');
+var useTracking = require('../../../../hooks/useTracking.js');
+var api = require('../../../../services/api.js');
+var assets = require('../../../../services/assets.js');
+var folders = require('../../../../services/folders.js');
+var downloadFile = require('../../../../utils/downloadFile.js');
+var files = require('../../../../utils/files.js');
+var getAssetIcon = require('../../../../utils/getAssetIcon.js');
+var translations = require('../../../../utils/translations.js');
+var constants = require('../../constants.js');
+var useFolderInfo = require('../../hooks/useFolderInfo.js');
+var useIsAssetDetailsOpen = require('../../hooks/useIsAssetDetailsOpen.js');
+var BusyOverlay = require('../BusyOverlay.js');
+var AssetCropEditor = require('./AssetCropEditor.js');
+var AssetPreview = require('./AssetPreview.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return 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__*/_interopNamespace(React);
+
+const DrawerNotifyContext = /*#__PURE__*/ React__namespace.createContext(null);
+const useDrawerNotify = ()=>{
+    const ctx = React__namespace.useContext(DrawerNotifyContext);
+    if (!ctx) {
+        throw new Error('useDrawerNotify must be used within AssetDetails');
+    }
+    return ctx;
+};
+const AssetOperationsContext = /*#__PURE__*/ React__namespace.createContext(null);
+const useAssetOperation = ()=>{
+    const ctx = React__namespace.useContext(AssetOperationsContext);
+    if (!ctx) {
+        throw new Error('useAssetOperation must be used within AssetDetails');
+    }
+    return ctx;
+};
+/* -------------------------------------------------------------------------------------------------
+ * useAssetDetailsParam - sync drawer visibility with URL ?{ASSET_DETAILS_URL_PARAM}={id}
+ * -----------------------------------------------------------------------------------------------*/ const useAssetDetailsParam = ()=>{
+    const [{ query }, setQuery] = strapiAdmin.useQueryParams();
+    const assetId = useIsAssetDetailsOpen.parseAssetDetailsId(query?.[useIsAssetDetailsOpen.ASSET_DETAILS_URL_PARAM]);
+    const hasValidId = assetId !== null;
+    // Closing is driven by removing the URL param (a navigation), so navigation
+    // guards like <Blocker> can intercept it. `isMounted` keeps the drawer in the
+    // tree through the slide-out: it stays true once opened and only flips false
+    // when the close animation actually ends (see onCloseAnimationEnd), so the
+    // close duration lives entirely in CSS — no JS timer.
+    const [isMounted, setIsMounted] = React__namespace.useState(hasValidId);
+    const displayAssetId = React__namespace.useRef(null);
+    React__namespace.useEffect(()=>{
+        if (hasValidId) {
+            displayAssetId.current = assetId;
+            setIsMounted(true);
+        }
+    }, [
+        hasValidId,
+        assetId
+    ]);
+    const onCloseAnimationEnd = React__namespace.useCallback((event)=>{
+        // Ignore animations bubbling up from descendants, and the slide-in.
+        if (event.target === event.currentTarget && !hasValidId) {
+            setIsMounted(false);
+        }
+    }, [
+        hasValidId
+    ]);
+    const openDetails = React__namespace.useCallback((id)=>{
+        setQuery(strapiAdmin.withEncodedUserParams(query, {
+            [useIsAssetDetailsOpen.ASSET_DETAILS_URL_PARAM]: String(id)
+        }), 'push', true);
+    }, [
+        query,
+        setQuery
+    ]);
+    const closeDetails = React__namespace.useCallback(()=>{
+        setQuery(strapiAdmin.withEncodedUserParams(query, {
+            [useIsAssetDetailsOpen.ASSET_DETAILS_URL_PARAM]: undefined
+        }), 'push', true);
+    }, [
+        query,
+        setQuery
+    ]);
+    return {
+        assetId: hasValidId ? assetId : displayAssetId.current,
+        isVisible: hasValidId,
+        shouldRenderDrawer: isMounted,
+        onCloseAnimationEnd,
+        openDetails,
+        closeDetails
+    };
+};
+const DetailItemContainer = styledComponents.styled(designSystem.Flex)`
+  flex: 0 0 calc(50% - ${({ theme })=>theme.spaces[2]});
+`;
+const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxRuntime.jsxs(DetailItemContainer, {
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        gap: 1,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "sigma",
+                textColor: "neutral600",
+                fontWeight: "semiBold",
+                textTransform: "uppercase",
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral700",
+                children: value ?? '-'
+            })
+        ]
+    });
+/* -------------------------------------------------------------------------------------------------
+ * DetailField
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * Make the asset details Form behave as a flex column inside Drawer.Body so
+ * the scrollable area can grow while the footer stays pinned at the bottom.
+ * The Form component from `@strapi/admin/strapi-admin` only forwards `width`
+ * + `height` to its Box, so we target the rendered `<form>` element via a
+ * styled-components descendant rule.
+ */ const FormShell = styledComponents.styled(designSystem.Box)`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  > form {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    position: relative;
+  }
+`;
+/**
+ * In-drawer toast container
+ */ const DrawerToastSlot = styledComponents.styled(designSystem.Box)`
+  position: absolute;
+  top: ${({ theme })=>theme.spaces[2]};
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  width: calc(100% - ${({ theme })=>theme.spaces[2]});
+`;
+/**
+ * Map the drawer-scoped mutation flags to a single i18n message for the busy
+ * overlay loader. Returns `null` when nothing is in flight.
+ *
+ * Exported for the unit test: the branch order only matters when two flags are
+ * true at once, which the UI makes hard to stage through the rendered drawer
+ * (each trigger disables itself while its own mutation runs).
+ */ const getBusyMessage = (state)=>{
+    if (state.isDeleting) {
+        return {
+            id: translations.getTranslationKey('asset-details.delete.loading'),
+            defaultMessage: 'Deleting the file…'
+        };
+    }
+    if (state.isCropCopying) {
+        return {
+            id: translations.getTranslationKey('asset-details.crop.loading'),
+            defaultMessage: 'Saving the cropped copy…'
+        };
+    }
+    if (state.isReplacing) {
+        return {
+            id: translations.getTranslationKey('asset-details.replace.loading'),
+            defaultMessage: 'Replacing the file…'
+        };
+    }
+    return null;
+};
+const StyledWarning = styledComponents.styled(icons.WarningCircle)`
+  width: 1.6rem;
+  height: 1.6rem;
+
+  path {
+    fill: ${({ theme })=>theme.colors.warning500};
+  }
+`;
+const DetailField = ({ name, label, required, disabled })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const field = strapiAdmin.useField(name);
+    const isSubmitting = strapiAdmin.useForm('DetailField', (state)=>state.isSubmitting);
+    // The form context (use-context-selector) echoes changes back
+    // asynchronously — driving the input straight from `field.value` makes
+    // React rewrite the DOM value after the keystroke, which throws the cursor
+    // to the end of the field. The input is therefore controlled by local state
+    // (synchronous, cursor-safe) and the form follows; the effect below only
+    // matters for EXTERNAL value changes (discard/reset), where a cursor jump
+    // is fine because the user isn't typing.
+    const fieldValue = field.value ?? '';
+    const [value, setValue] = React__namespace.useState(fieldValue);
+    React__namespace.useEffect(()=>{
+        setValue(fieldValue);
+    }, [
+        fieldValue
+    ]);
+    const emptyTooltipLabel = formatMessage({
+        id: translations.getTranslationKey('asset-details.field.empty'),
+        defaultMessage: '{label} is currently empty.'
+    }, {
+        label
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        name: name,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                value: value,
+                onChange: (event)=>{
+                    setValue(event.target.value);
+                    field.onChange(name, event.target.value);
+                },
+                endAction: !value ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                    label: emptyTooltipLabel,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(StyledWarning, {
+                        "aria-label": emptyTooltipLabel,
+                        role: "img"
+                    })
+                }) : undefined,
+                type: "text",
+                disabled: isSubmitting || disabled
+            })
+        ]
+    });
+};
+const LocationField = ({ label, rootLabel, folders, disabled })=>{
+    const field = strapiAdmin.useField('folder');
+    const isSubmitting = strapiAdmin.useForm('LocationField', (state)=>state.isSubmitting);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        name: "folder",
+        required: true,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
+                value: field.value == null ? '' : String(field.value),
+                onChange: (value)=>{
+                    const next = value === '' ? null : Number(value);
+                    field.onChange('folder', next);
+                },
+                disabled: isSubmitting || disabled,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                        value: "",
+                        children: rootLabel
+                    }),
+                    folders.map((folder)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: String(folder.id),
+                            children: folder.name
+                        }, folder.id))
+                ]
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * DeleteAssetButton
+ * -----------------------------------------------------------------------------------------------*/ const DeleteAssetButton = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { deleteAsset, isDeleting } = useAssetOperation();
+    const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const handleConfirm = async ()=>{
+        await deleteAsset();
+        setIsOpen(false);
+    };
+    const triggerLabel = formatMessage({
+        id: translations.getTranslationKey('asset-details.delete.trigger'),
+        defaultMessage: 'Delete this file'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Root, {
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Trigger, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                    label: triggerLabel,
+                    variant: "danger-light",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Content, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Header, {
+                        children: formatMessage({
+                            id: translations.getTranslationKey('asset-details.delete.title'),
+                            defaultMessage: 'Delete this media file?'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Body, {
+                        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.WarningCircle, {
+                            width: "24px",
+                            height: "24px",
+                            fill: "danger600"
+                        }),
+                        textAlign: "center",
+                        children: formatMessage({
+                            id: translations.getTranslationKey('asset-details.delete.description'),
+                            defaultMessage: 'This file cannot be recovered once deleted. If it is currently in use, linked content will break and image containers will be empty.'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Footer, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Cancel, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                    variant: "tertiary",
+                                    disabled: isDeleting,
+                                    fullWidth: true,
+                                    children: formatMessage({
+                                        id: 'app.components.Button.cancel',
+                                        defaultMessage: 'Cancel'
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Action, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                    variant: "danger-light",
+                                    loading: isDeleting,
+                                    onClick: handleConfirm,
+                                    fullWidth: true,
+                                    children: formatMessage({
+                                        id: 'app.components.Button.confirm',
+                                        defaultMessage: 'Confirm'
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const CopyLinkButton = ({ asset })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { copy } = strapiAdmin.useClipboard();
+    const notify = useDrawerNotify();
+    const handleCopy = async ()=>{
+        const url = files.prefixFileUrlWithBackendUrl(asset.url);
+        if (!url) return;
+        const didCopy = await copy(url);
+        notify({
+            type: didCopy ? 'success' : 'danger',
+            message: didCopy ? formatMessage({
+                id: translations.getTranslationKey('asset-details.copy-link.success'),
+                defaultMessage: 'Link copied.'
+            }) : formatMessage({
+                id: translations.getTranslationKey('asset-details.copy-link.error'),
+                defaultMessage: 'Failed to copy the link.'
+            })
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+        label: formatMessage({
+            id: translations.getTranslationKey('asset-details.copy-link.trigger'),
+            defaultMessage: 'Copy link'
+        }),
+        variant: "tertiary",
+        onClick: handleCopy,
+        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {})
+    });
+};
+const DownloadAssetButton = ({ asset })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const notify = useDrawerNotify();
+    const [isDownloading, setIsDownloading] = React__namespace.useState(false);
+    const handleDownload = async ()=>{
+        const url = files.prefixFileUrlWithBackendUrl(asset.url);
+        if (!url) return;
+        setIsDownloading(true);
+        try {
+            await downloadFile.downloadFile(url, asset.name);
+        } catch  {
+            notify({
+                type: 'danger',
+                message: formatMessage({
+                    id: translations.getTranslationKey('asset-details.download.error'),
+                    defaultMessage: 'Failed to download the file.'
+                })
+            });
+        } finally{
+            setIsDownloading(false);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+        label: formatMessage({
+            id: translations.getTranslationKey('asset-details.download.trigger'),
+            defaultMessage: 'Download'
+        }),
+        variant: "tertiary",
+        onClick: handleDownload,
+        disabled: isDownloading,
+        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Download, {})
+    });
+};
+const ReplaceAssetButton = ({ mime })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { replaceAsset, isReplacing } = useAssetOperation();
+    const fileInputRef = React__namespace.useRef(null);
+    const [isDialogOpen, setIsDialogOpen] = React__namespace.useState(false);
+    const aiEnabled = useAIMetadataEnabled.useAIMetadataEnabled({
+        mime
+    });
+    const handleTriggerClick = ()=>{
+        setIsDialogOpen(true);
+    };
+    const handleContinue = ()=>{
+        // Confirm first, then open the native picker so the user only commits to
+        // replacing after acknowledging the warning. The actual POST is delegated
+        // to the parent (which owns the mutation + loading state).
+        setIsDialogOpen(false);
+        fileInputRef.current?.click();
+    };
+    const handleFileChange = async (event)=>{
+        const file = event.target.files?.[0];
+        // Reset the native input so the same file can be picked again later.
+        event.target.value = '';
+        if (!file) {
+            return;
+        }
+        await replaceAsset(file);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+                    ref: fileInputRef,
+                    type: "file",
+                    accept: mime ?? '',
+                    multiple: false,
+                    onChange: handleFileChange,
+                    "aria-hidden": true,
+                    tabIndex: -1
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                label: formatMessage({
+                    id: translations.getTranslationKey('asset-details.replace.trigger'),
+                    defaultMessage: 'Replace this file'
+                }),
+                variant: "tertiary",
+                onClick: handleTriggerClick,
+                disabled: isReplacing,
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowsCounterClockwise, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+                open: isDialogOpen,
+                onOpenChange: setIsDialogOpen,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Content, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Header, {
+                            children: formatMessage({
+                                id: translations.getTranslationKey('asset-details.replace.title'),
+                                defaultMessage: 'Replace this media file?'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Body, {
+                            textAlign: "center",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                direction: "column",
+                                textAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "omega",
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('asset-details.replace.description'),
+                                            defaultMessage: 'Current content will be permanently replaced.'
+                                        })
+                                    }),
+                                    aiEnabled ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        variant: "omega",
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('asset-details.replace.description.ai'),
+                                            defaultMessage: 'AI will generate new metadata after upload.'
+                                        })
+                                    }) : null
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Footer, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Cancel, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        variant: "tertiary",
+                                        fullWidth: true,
+                                        children: formatMessage({
+                                            id: 'app.components.Button.cancel',
+                                            defaultMessage: 'Cancel'
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Action, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        variant: "secondary",
+                                        onClick: handleContinue,
+                                        fullWidth: true,
+                                        children: formatMessage({
+                                            id: translations.getTranslationKey('asset-details.replace.continue'),
+                                            defaultMessage: 'Continue'
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const AssetImageActions = ({ onCrop })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isSubmitting = strapiAdmin.useForm('AssetImageActions', (state)=>state.isSubmitting);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        direction: "column",
+        gap: 2,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+            label: formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.trigger'),
+                defaultMessage: 'Crop'
+            }),
+            variant: "tertiary",
+            onClick: onCrop,
+            disabled: isSubmitting || !onCrop,
+            children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
+        })
+    });
+};
+const AssetDetails = ({ asset, closeDetails })=>{
+    const { formatMessage, formatDate } = reactIntl.useIntl();
+    const getErrorMessage = useApiErrorMessage.useApiErrorMessage();
+    const { canCreate, canUpdate, canDownload, canCopyLink } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { data: folders$1 = [] } = folders.useGetAllFoldersQuery();
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const [updateAsset] = assets.useUpdateAssetMutation();
+    const { trackUsage } = useTracking.useTracking();
+    const [replaceMutation, { isLoading: isReplacing }] = assets.useReplaceAssetMutation();
+    const [deleteMutation, { isLoading: isDeleting }] = assets.useDeleteAssetMutation();
+    const [uploadCroppedCopy, { isLoading: isCropCopying }] = api.useUploadFileSilentlyMutation();
+    const [isCropOpen, setIsCropOpen] = React__namespace.useState(false);
+    // In-drawer toast slot
+    const [drawerToast, setDrawerToast] = React__namespace.useState(null);
+    React__namespace.useEffect(()=>{
+        if (!drawerToast) return;
+        const timer = window.setTimeout(()=>setDrawerToast(null), 5000);
+        return ()=>window.clearTimeout(timer);
+    }, [
+        drawerToast
+    ]);
+    // Local alias matching the DrawerNotifyContext signature, so the drawer's
+    // own handlers (replace, update) read like the consumers do.
+    const notify = React__namespace.useCallback((toast)=>setDrawerToast(toast), []);
+    const isImage = asset.mime?.includes(enums.ASSET_TYPES.Image);
+    const initialValues = {
+        name: asset.name ?? '',
+        caption: asset.caption ?? '',
+        alternativeText: asset.alternativeText ?? '',
+        folder: typeof asset.folder === 'object' && asset.folder !== null ? asset.folder.id ?? null : asset.folder ?? null
+    };
+    const handleSubmit = async (values)=>{
+        const fileInfo = {
+            name: values.name,
+            caption: values.caption,
+            alternativeText: values.alternativeText,
+            folder: values.folder
+        };
+        const res = await updateAsset({
+            id: asset.id,
+            fileInfo
+        });
+        if ('error' in res) {
+            notify({
+                type: 'danger',
+                message: getErrorMessage(res.error, formatMessage({
+                    id: translations.getTranslationKey('asset-details.update.error'),
+                    defaultMessage: 'Failed to update the file.'
+                }))
+            });
+            return;
+        }
+        trackUsage('didEditMediaLibraryElements', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION,
+            // Legacy sends the mime top-level type (image/video/audio/application…).
+            type: asset.mime?.split('/')[0],
+            changeLocation: values.folder !== initialValues.folder
+        });
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.update.success'),
+                defaultMessage: 'File updated'
+            })
+        });
+    };
+    const { title: folderName } = useFolderInfo.useFolderInfo(typeof asset.folder === 'object' && asset.folder !== null ? asset.folder.id ?? null : asset.folder ?? null);
+    // Owns the replace upload so isReplacing can drive the busy overlay.
+    const handleReplace = React__namespace.useCallback(async (file)=>{
+        const res = await replaceMutation({
+            id: asset.id,
+            file,
+            fileInfo: {
+                name: asset.name
+            }
+        });
+        if ('error' in res) {
+            notify({
+                type: 'danger',
+                message: getErrorMessage(res.error, formatMessage({
+                    id: translations.getTranslationKey('asset-details.replace.error'),
+                    defaultMessage: 'Failed to replace the file.'
+                }))
+            });
+            return;
+        }
+        trackUsage('didReplaceMedia', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION
+        });
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.replace.success'),
+                defaultMessage: 'File replaced.'
+            })
+        });
+    }, [
+        asset.id,
+        asset.name,
+        formatMessage,
+        getErrorMessage,
+        notify,
+        replaceMutation,
+        trackUsage
+    ]);
+    // Owns the delete: on error notify in-drawer (drawer stays), on success fire
+    // a persistent global notification then close the drawer.
+    const handleDelete = React__namespace.useCallback(async ()=>{
+        const res = await deleteMutation(asset.id);
+        if ('error' in res) {
+            notify({
+                type: 'danger',
+                message: getErrorMessage(res.error, formatMessage({
+                    id: translations.getTranslationKey('asset-details.delete.error'),
+                    defaultMessage: 'Failed to delete the asset.'
+                }))
+            });
+            return;
+        }
+        toggleNotification({
+            type: 'success',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.delete.success'),
+                defaultMessage: '1 element have been deleted from {folderName}'
+            }, {
+                folderName
+            })
+        });
+        closeDetails();
+    }, [
+        asset.id,
+        closeDetails,
+        deleteMutation,
+        folderName,
+        formatMessage,
+        getErrorMessage,
+        notify,
+        toggleNotification
+    ]);
+    const notifyCropError = (error)=>{
+        notify({
+            type: 'danger',
+            message: getErrorMessage(error, formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.error'),
+                defaultMessage: 'Failed to crop the file.'
+            }))
+        });
+    };
+    // Apply: replace the original binary with the cropped file + focal point.
+    // Close the editor first so the drawer's busy overlay is visible while the
+    // mutation runs (the editor renders in a Portal above the drawer).
+    const handleCropApply = async (file, focalPoint)=>{
+        setIsCropOpen(false);
+        const res = await replaceMutation({
+            id: asset.id,
+            file,
+            fileInfo: {
+                focalPoint
+            }
+        });
+        if ('error' in res) {
+            notifyCropError(res.error);
+            return;
+        }
+        trackUsage('didCropFile', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: false
+        });
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.success'),
+                defaultMessage: 'File cropped.'
+            })
+        });
+    };
+    // Save as copy: upload the cropped file as a new asset in the same folder.
+    const handleCropSaveAsCopy = async (file, focalPoint)=>{
+        setIsCropOpen(false);
+        // Silent single-file upload (no global progress dialog). Carry over the
+        // source asset's caption/alt so the copy keeps its metadata.
+        const res = await uploadCroppedCopy({
+            file,
+            fileInfo: {
+                name: asset.name,
+                caption: asset.caption ?? '',
+                alternativeText: asset.alternativeText ?? '',
+                folder: initialValues.folder,
+                focalPoint
+            }
+        });
+        if ('error' in res) {
+            notifyCropError(res.error);
+            return;
+        }
+        trackUsage('didCropFile', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: true
+        });
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.copy-success'),
+                defaultMessage: 'Copy created.'
+            })
+        });
+    };
+    const operations = React__namespace.useMemo(()=>({
+            replaceAsset: handleReplace,
+            deleteAsset: handleDelete,
+            isReplacing,
+            isDeleting
+        }), [
+        handleReplace,
+        handleDelete,
+        isReplacing,
+        isDeleting
+    ]);
+    return(// `key={asset.id}` resets the form when the drawer switches to a different
+    // asset so cached values from the previous asset don't bleed in.
+    /*#__PURE__*/ jsxRuntime.jsx(DrawerNotifyContext.Provider, {
+        value: notify,
+        children: /*#__PURE__*/ jsxRuntime.jsx(AssetOperationsContext.Provider, {
+            value: operations,
+            children: /*#__PURE__*/ jsxRuntime.jsx(FormShell, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Form, {
+                    method: "POST",
+                    initialValues: initialValues,
+                    onSubmit: handleSubmit,
+                    children: ({ modified, isSubmitting, values, resetForm })=>{
+                        const nameIsEmpty = (values.name ?? '').trim() === '';
+                        const busyMessage = getBusyMessage({
+                            isDeleting,
+                            isReplacing,
+                            isCropCopying
+                        });
+                        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Blocker, {
+                                    onProceed: resetForm
+                                }),
+                                isCropOpen && isImage ? /*#__PURE__*/ jsxRuntime.jsx(AssetCropEditor.AssetCropEditor, {
+                                    asset: asset,
+                                    onClose: ()=>setIsCropOpen(false),
+                                    onApply: handleCropApply,
+                                    onSaveAsCopy: handleCropSaveAsCopy,
+                                    canSaveAsCopy: canCreate
+                                }) : null,
+                                busyMessage ? /*#__PURE__*/ jsxRuntime.jsx(BusyOverlay.BusyOverlay, {
+                                    children: formatMessage(busyMessage)
+                                }) : null,
+                                drawerToast ? /*#__PURE__*/ jsxRuntime.jsx(DrawerToastSlot, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Alert, {
+                                        variant: drawerToast.type === 'success' ? 'success' : 'danger',
+                                        closeLabel: formatMessage({
+                                            id: 'global.close',
+                                            defaultMessage: 'Close'
+                                        }),
+                                        onClose: ()=>setDrawerToast(null),
+                                        children: drawerToast.message
+                                    })
+                                }) : null,
+                                /*#__PURE__*/ jsxRuntime.jsxs(Drawer.Drawer.ScrollableContent, {
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
+                                            asset: asset,
+                                            actions: isImage && canUpdate ? /*#__PURE__*/ jsxRuntime.jsx(AssetImageActions, {
+                                                onCrop: ()=>setIsCropOpen(true)
+                                            }) : null
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            gap: 4,
+                                            paddingTop: 4,
+                                            paddingBottom: 4,
+                                            paddingLeft: 5,
+                                            paddingRight: 5,
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                    variant: "beta",
+                                                    fontWeight: "semiBold",
+                                                    tag: "h3",
+                                                    children: formatMessage({
+                                                        id: translations.getTranslationKey('asset-details.fileInfo'),
+                                                        defaultMessage: 'File info'
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                    wrap: "wrap",
+                                                    gap: 4,
+                                                    background: "neutral100",
+                                                    paddingTop: 4,
+                                                    paddingBottom: 4,
+                                                    paddingLeft: 6,
+                                                    paddingRight: 6,
+                                                    alignItems: "flex-start",
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: translations.getTranslationKey('asset-details.creationDate'),
+                                                                defaultMessage: 'Creation date'
+                                                            }),
+                                                            value: asset.createdAt ? formatDate(new Date(asset.createdAt), {
+                                                                dateStyle: 'long',
+                                                                timeStyle: 'short'
+                                                            }) : null
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: translations.getTranslationKey('asset-details.lastUpdated'),
+                                                                defaultMessage: 'Last updated'
+                                                            }),
+                                                            value: asset.updatedAt ? formatDate(new Date(asset.updatedAt), {
+                                                                dateStyle: 'long',
+                                                                timeStyle: 'short'
+                                                            }) : null
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: translations.getTranslationKey('asset-details.createdBy'),
+                                                                defaultMessage: 'Created by'
+                                                            }),
+                                                            value: asset.createdBy ? strapiAdmin.getDisplayName({
+                                                                firstname: asset.createdBy.firstname ?? undefined,
+                                                                lastname: asset.createdBy.lastname ?? undefined,
+                                                                username: asset.createdBy.username ?? undefined,
+                                                                email: asset.createdBy.email ?? undefined
+                                                            }) ?? '-' : null
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: translations.getTranslationKey('asset-details.size'),
+                                                                defaultMessage: 'Size'
+                                                            }),
+                                                            value: asset.size ? files.formatBytes(asset.size, 1) : null
+                                                        }),
+                                                        isImage && (asset.width != null || asset.height != null) && /*#__PURE__*/ jsxRuntime.jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: translations.getTranslationKey('asset-details.dimensions'),
+                                                                defaultMessage: 'Dimensions'
+                                                            }),
+                                                            value: asset.width != null && asset.height != null ? `${asset.width} × ${asset.height}` : null
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: translations.getTranslationKey('asset-details.extension'),
+                                                                defaultMessage: 'Extension'
+                                                            }),
+                                                            value: files.getFileExtension(asset.ext)
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: translations.getTranslationKey('asset-details.assetId'),
+                                                                defaultMessage: 'Asset ID'
+                                                            }),
+                                                            value: String(asset.id)
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
+                                                    name: "name",
+                                                    label: formatMessage({
+                                                        id: translations.getTranslationKey('asset-details.fileName'),
+                                                        defaultMessage: 'File name'
+                                                    }),
+                                                    required: true,
+                                                    disabled: !canUpdate
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(LocationField, {
+                                                    label: formatMessage({
+                                                        id: translations.getTranslationKey('asset-details.location'),
+                                                        defaultMessage: 'Location'
+                                                    }),
+                                                    rootLabel: formatMessage({
+                                                        id: translations.getTranslationKey('plugin.home'),
+                                                        defaultMessage: 'Home'
+                                                    }),
+                                                    folders: folders$1,
+                                                    disabled: !canUpdate
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
+                                                    name: "caption",
+                                                    label: formatMessage({
+                                                        id: translations.getTranslationKey('asset-details.caption'),
+                                                        defaultMessage: 'Caption'
+                                                    }),
+                                                    disabled: !canUpdate
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
+                                                    name: "alternativeText",
+                                                    label: formatMessage({
+                                                        id: translations.getTranslationKey('asset-details.alternativeText'),
+                                                        defaultMessage: 'Alternative text'
+                                                    }),
+                                                    disabled: !canUpdate
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                (canUpdate || canCopyLink || canDownload) && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    gap: 2,
+                                    padding: 3,
+                                    borderColor: "neutral150",
+                                    borderStyle: "solid",
+                                    borderWidth: "1px 0 0 0",
+                                    background: "neutral0",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            gap: 2,
+                                            children: [
+                                                canUpdate && /*#__PURE__*/ jsxRuntime.jsx(DeleteAssetButton, {}),
+                                                canCopyLink && /*#__PURE__*/ jsxRuntime.jsx(CopyLinkButton, {
+                                                    asset: asset
+                                                }),
+                                                canDownload && /*#__PURE__*/ jsxRuntime.jsx(DownloadAssetButton, {
+                                                    asset: asset
+                                                }),
+                                                canUpdate && /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {
+                                                    mime: asset.mime
+                                                })
+                                            ]
+                                        }),
+                                        canUpdate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                            type: "submit",
+                                            variant: "default",
+                                            loading: isSubmitting,
+                                            // File name is required; block submit when it's empty or whitespace so the API can't 400 on a blank value.
+                                            disabled: !modified || isSubmitting || nameIsEmpty,
+                                            children: formatMessage({
+                                                id: translations.getTranslationKey('asset-details.save'),
+                                                defaultMessage: 'Save changes'
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        });
+                    }
+                }, asset.id)
+            })
+        })
+    }));
+};
+/* -------------------------------------------------------------------------------------------------
+ * DrawerHeader
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * The icon's size lives in SVG attributes, which flex is free to override, so a
+ * long asset name would squash it. Matches the grid and table rows, where the
+ * file-type icon is shrink-proof and the name is what truncates.
+ */ const HeaderIcon = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+`;
+const HeaderTitle = styledComponents.styled(designSystem.Typography)`
+  min-width: 0;
+`;
+const DrawerHeader = ({ asset, closeDetails })=>{
+    const DocIcon = asset ? getAssetIcon.getAssetIcon(asset.mime, asset.ext) : icons.FileError;
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        gap: 2,
+        paddingLeft: 5,
+        paddingTop: 3,
+        paddingBottom: 3,
+        paddingRight: 3,
+        borderColor: "neutral150",
+        borderStyle: "solid",
+        borderWidth: "0 0 1px 0",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(HeaderIcon, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(DocIcon, {
+                    width: 20,
+                    height: 20
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Title, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxRuntime.jsx(HeaderTitle, {
+                    variant: "omega",
+                    fontWeight: "semiBold",
+                    overflow: "hidden",
+                    ellipsis: true,
+                    tag: "h2",
+                    children: asset.name
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                marginLeft: "auto",
+                children: /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.CloseButton, {
+                    onClose: closeDetails,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowLineRight, {})
+                })
+            })
+        ]
+    });
+};
+const DrawerContent = ({ assetId, closeDetails })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { data: asset, isLoading, error } = assets.useGetAssetQuery(assetId, {
+        refetchOnMountOrArgChange: false,
+        refetchOnReconnect: false,
+        refetchOnFocus: false
+    });
+    if (isLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            justifyContent: "center",
+            padding: 8,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+                children: formatMessage({
+                    id: 'app.loading',
+                    defaultMessage: 'Loading...'
+                })
+            })
+        });
+    }
+    if (error || !asset) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 4,
+            padding: 4,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Alert, {
+                variant: "danger",
+                closeLabel: formatMessage({
+                    id: 'global.close',
+                    defaultMessage: 'Close'
+                }),
+                onClose: closeDetails,
+                children: formatMessage({
+                    id: translations.getTranslationKey('asset-details.error'),
+                    defaultMessage: 'Failed to load file details.'
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(DrawerHeader, {
+                asset: asset,
+                closeDetails: closeDetails
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(AssetDetails, {
+                asset: asset,
+                closeDetails: closeDetails
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * AssetDetailsDrawer
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * Whether a pointer press outside the panel should leave the drawer open.
+ *
+ * Anywhere on the page behind dismisses it, controls included. Two exceptions,
+ * neither of which is "the user meant to stay": the part of an asset's card or
+ * row whose `click` switches the drawer rather than closing it — not its own
+ * checkbox or actions menu, which act on the item; and a panel already closing,
+ * which `forceMount` keeps listening through its animation, where dismissing
+ * again would re-trigger the unsaved-changes guard for nothing.
+ */ const shouldKeepDrawerOpen = (event, isVisible)=>{
+    if (!isVisible) {
+        return true;
+    }
+    // Radix's dismisser fires on any `pointerdown`, secondary buttons included. A
+    // right-click is contextual, and with the create menu on the background one
+    // press would otherwise both close this and open that.
+    if (event.detail.originalEvent.button !== 0) {
+        return true;
+    }
+    if (!(event.target instanceof Element)) {
+        return false;
+    }
+    // The card's own controls — its checkbox, its actions menu — act on the item
+    // and stop the card's click, so no switch follows and the press dismisses.
+    return event.target.closest(constants.ASSET_DETAILS_TRIGGER_SELECTOR) !== null && event.target.closest(constants.ASSET_ITEM_CONTROL_SELECTOR) === null;
+};
+const AssetDetailsDrawer = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { assetId, isVisible, shouldRenderDrawer, onCloseAnimationEnd, closeDetails } = useAssetDetailsParam();
+    if (!shouldRenderDrawer || assetId === null) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(Drawer.Drawer.Root, {
+        isVisible: isVisible,
+        onClose: closeDetails,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.VisuallyHidden, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Title, {
+                            children: formatMessage({
+                                id: translations.getTranslationKey('asset-details.title'),
+                                defaultMessage: 'File details'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Description, {
+                            children: formatMessage({
+                                id: translations.getTranslationKey('asset-details.description'),
+                                defaultMessage: 'Displays file information and metadata'
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Body, {
+                animationDirection: "left",
+                width: "41.6rem",
+                // dvh, not vh: the drawer is anchored to the bottom, so with 100vh on
+                // mobile (where the URL bar shrinks the visual viewport below 100vh)
+                // the top of the drawer — header, title, close button — is pushed
+                // off-screen. dvh tracks the actual visible height.
+                height: "100dvh",
+                onAnimationEnd: onCloseAnimationEnd,
+                // Opt in to dismiss-on-outside-click; `closeDetails` is the same path
+                // as the header's close button, so unsaved edits are still guarded.
+                onPointerDownOutside: (event)=>{
+                    if (shouldKeepDrawerOpen(event, isVisible)) {
+                        event.preventDefault();
+                    }
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
+                    assetId: assetId,
+                    closeDetails: closeDetails
+                })
+            })
+        ]
+    });
+};
+
+exports.AssetDetails = AssetDetails;
+exports.AssetDetailsDrawer = AssetDetailsDrawer;
+exports.AssetOperationsContext = AssetOperationsContext;
+exports.DrawerNotifyContext = DrawerNotifyContext;
+exports.getBusyMessage = getBusyMessage;
+exports.useAssetDetailsParam = useAssetDetailsParam;
+//# sourceMappingURL=AssetDetailsDrawer.js.map