@strapi/upload 5.47.0 → 5.48.0

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.mjs

@@ -1,20 +1,40 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useQueryParams, getDisplayName } from '@strapi/admin/strapi-admin';
-import { VisuallyHidden, Flex, Loader, Alert, Typography, Box, Field, TextInput } from '@strapi/design-system';
-import { FileError, ArrowLineRight, WarningCircle } from '@strapi/icons';
+import { useQueryParams, useNotification, Form, Blocker, getDisplayName, useField, useForm, useClipboard } from '@strapi/admin/strapi-admin';
+import { VisuallyHidden, Flex, Loader, Alert, Typography, Box, Button, IconButton, Dialog, Field, TextInput, Tooltip, SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { FileError, ArrowLineRight, ArrowsCounterClockwise, Trash, WarningCircle, Link, Download } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
-import { DRAWER_CLOSE_ANIMATION_MS, Drawer } from '../../../../components/Drawer.mjs';
+import { Drawer } from '../../../../components/Drawer.mjs';
 import { AssetType } from '../../../../enums.mjs';
-import { useGetAssetQuery } from '../../../../services/assets.mjs';
-import { formatBytes, getFileExtension } from '../../../../utils/files.mjs';
+import { useGetAssetQuery, useUpdateAssetMutation, useReplaceAssetMutation, useDeleteAssetMutation } from '../../../../services/assets.mjs';
+import { useGetAllFoldersQuery } from '../../../../services/folders.mjs';
+import { useGetSettingsQuery } from '../../../../services/settings.mjs';
+import { downloadFile } from '../../../../utils/downloadFile.mjs';
+import { formatBytes, getFileExtension, prefixFileUrlWithBackendUrl } from '../../../../utils/files.mjs';
 import { getAssetIcon } from '../../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../../utils/translations.mjs';
+import { useFolderInfo } from '../../hooks/useFolderInfo.mjs';
 import { AssetPreview } from './AssetPreview.mjs';
 
 // Name of the parameter to look for in the URL to open the drawer
 const URL_PARAM = 'assetId';
+const DrawerNotifyContext = /*#__PURE__*/ React.createContext(null);
+const useDrawerNotify = ()=>{
+    const ctx = React.useContext(DrawerNotifyContext);
+    if (!ctx) {
+        throw new Error('useDrawerNotify must be used within AssetDetails');
+    }
+    return ctx;
+};
+const AssetOperationsContext = /*#__PURE__*/ React.createContext(null);
+const useAssetOperation = ()=>{
+    const ctx = React.useContext(AssetOperationsContext);
+    if (!ctx) {
+        throw new Error('useAssetOperation must be used within AssetDetails');
+    }
+    return ctx;
+};
 /* -------------------------------------------------------------------------------------------------
  * useAssetDetailsParam - sync drawer visibility with URL ?{URL_PARAM}={id}
  * -----------------------------------------------------------------------------------------------*/ const useAssetDetailsParam = ()=>{
@@ -22,51 +42,49 @@ const URL_PARAM = 'assetId';
     const detailsId = query?.[URL_PARAM];
     const assetId = detailsId ? parseInt(detailsId, 10) : null;
     const hasValidId = assetId !== null && !Number.isNaN(assetId);
-    const [isClosing, setIsClosing] = React.useState(false);
+    // 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.useState(hasValidId);
     const displayAssetId = React.useRef(null);
-    const isVisible = hasValidId && !isClosing;
     React.useEffect(()=>{
         if (hasValidId) {
             displayAssetId.current = assetId;
+            setIsMounted(true);
         }
     }, [
         hasValidId,
         assetId
     ]);
+    const onCloseAnimationEnd = React.useCallback((event)=>{
+        // Ignore animations bubbling up from descendants, and the slide-in.
+        if (event.target === event.currentTarget && !hasValidId) {
+            setIsMounted(false);
+        }
+    }, [
+        hasValidId
+    ]);
     const openDetails = React.useCallback((id)=>{
-        setIsClosing(false);
         setQuery({
             [URL_PARAM]: String(id)
-        });
+        }, 'push', true);
     }, [
         setQuery
     ]);
     const closeDetails = React.useCallback(()=>{
-        if (!hasValidId) return;
-        setIsClosing(true);
-    }, [
-        hasValidId
-    ]);
-    React.useEffect(()=>{
-        if (!isClosing) return;
-        const timer = window.setTimeout(()=>{
-            setQuery({
-                [URL_PARAM]: undefined
-            }, 'remove');
-            setIsClosing(false);
-            displayAssetId.current = null;
-        }, DRAWER_CLOSE_ANIMATION_MS);
-        return ()=>window.clearTimeout(timer);
+        setQuery({
+            [URL_PARAM]: undefined
+        }, 'remove', true);
     }, [
-        isClosing,
         setQuery
     ]);
-    const shouldRenderDrawer = hasValidId || isClosing;
-    const drawerAssetId = isClosing ? displayAssetId.current ?? assetId : assetId;
     return {
-        assetId: drawerAssetId,
-        isVisible,
-        shouldRenderDrawer,
+        assetId: hasValidId ? assetId : displayAssetId.current,
+        isVisible: hasValidId,
+        shouldRenderDrawer: isMounted,
+        onCloseAnimationEnd,
         openDetails,
         closeDetails
     };
@@ -96,7 +114,50 @@ const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxs(DetailItemContainer, {
     });
 /* -------------------------------------------------------------------------------------------------
  * DetailField
- * -----------------------------------------------------------------------------------------------*/ const StyledWarning = styled(WarningCircle)`
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * 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 = styled(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 = styled(Box)`
+  position: absolute;
+  top: ${({ theme })=>theme.spaces[2]};
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  width: calc(100% - ${({ theme })=>theme.spaces[2]});
+`;
+/**
+ * Full-form overlay rendered during long-running drawer-scoped mutations
+ * (e.g. replacing the binary). Sits above the toast slot (z-index 10) and
+ * the in-drawer Alert so the user can't interact with the form mid-flight.
+ */ const DrawerBusyOverlay = styled(Flex)`
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme })=>theme.colors.neutral0};
+  opacity: 0.7;
+`;
+const StyledWarning = styled(WarningCircle)`
   width: 1.6rem;
   height: 1.6rem;
 
@@ -104,7 +165,18 @@ const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxs(DetailItemContainer, {
     fill: ${({ theme })=>theme.colors.warning500};
   }
 `;
-const DetailField = ({ name, label, value, required })=>/*#__PURE__*/ jsxs(Field.Root, {
+const DetailField = ({ name, label, required })=>{
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const isSubmitting = useForm('DetailField', (state)=>state.isSubmitting);
+    const value = field.value ?? '';
+    const emptyTooltipLabel = formatMessage({
+        id: getTranslationKey('asset-details.field.empty'),
+        defaultMessage: '{label} is currently empty.'
+    }, {
+        label
+    });
+    return /*#__PURE__*/ jsxs(Field.Root, {
         name: name,
         required: required,
         children: [
@@ -112,139 +184,651 @@ const DetailField = ({ name, label, value, required })=>/*#__PURE__*/ jsxs(Field
                 children: label
             }),
             /*#__PURE__*/ jsx(TextInput, {
-                value: value ?? '',
-                // TODO: handle onChange
-                onChange: ()=>{},
-                endAction: !value ? /*#__PURE__*/ jsx(StyledWarning, {}) : undefined,
-                type: "text"
+                value: value,
+                onChange: (event)=>field.onChange(name, event.target.value),
+                endAction: !value ? /*#__PURE__*/ jsx(Tooltip, {
+                    label: emptyTooltipLabel,
+                    children: /*#__PURE__*/ jsx(StyledWarning, {
+                        "aria-label": emptyTooltipLabel,
+                        role: "img"
+                    })
+                }) : undefined,
+                type: "text",
+                disabled: isSubmitting
             })
         ]
     });
-const AssetDetails = ({ asset })=>{
-    const { formatMessage, formatDate } = useIntl();
-    const isImage = asset.mime?.includes(AssetType.Image);
-    return /*#__PURE__*/ jsxs(Flex, {
-        direction: "column",
-        alignItems: "stretch",
-        gap: 4,
-        paddingTop: 4,
-        paddingBottom: 4,
-        paddingLeft: 5,
-        paddingRight: 5,
+};
+const LocationField = ({ label, rootLabel, folders })=>{
+    const field = useField('folder');
+    const isSubmitting = useForm('LocationField', (state)=>state.isSubmitting);
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        name: "folder",
+        required: true,
         children: [
-            /*#__PURE__*/ jsx(Typography, {
-                variant: "beta",
-                fontWeight: "semiBold",
-                tag: "h3",
-                children: formatMessage({
-                    id: getTranslationKey('asset-details.fileInfo'),
-                    defaultMessage: 'File info'
-                })
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
             }),
-            /*#__PURE__*/ jsxs(Flex, {
-                wrap: "wrap",
-                gap: 4,
-                background: "neutral100",
-                paddingTop: 4,
-                paddingBottom: 4,
-                paddingLeft: 6,
-                paddingRight: 6,
-                alignItems: "flex-start",
+            /*#__PURE__*/ jsxs(SingleSelect, {
+                value: field.value == null ? '' : String(field.value),
+                onChange: (value)=>{
+                    const next = value === '' ? null : Number(value);
+                    field.onChange('folder', next);
+                },
+                disabled: isSubmitting,
                 children: [
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.creationDate'),
-                            defaultMessage: 'Creation date'
-                        }),
-                        value: asset.createdAt ? formatDate(new Date(asset.createdAt), {
-                            dateStyle: 'long',
-                            timeStyle: 'short'
-                        }) : null
-                    }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.lastUpdated'),
-                            defaultMessage: 'Last updated'
-                        }),
-                        value: asset.updatedAt ? formatDate(new Date(asset.updatedAt), {
-                            dateStyle: 'long',
-                            timeStyle: 'short'
-                        }) : null
-                    }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.createdBy'),
-                            defaultMessage: 'Created by'
-                        }),
-                        value: asset.createdBy ? getDisplayName({
-                            firstname: asset.createdBy.firstname ?? undefined,
-                            lastname: asset.createdBy.lastname ?? undefined,
-                            username: asset.createdBy.username ?? undefined,
-                            email: asset.createdBy.email ?? undefined
-                        }) ?? '-' : null
+                    /*#__PURE__*/ jsx(SingleSelectOption, {
+                        value: "",
+                        children: rootLabel
                     }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.size'),
-                            defaultMessage: 'Size'
-                        }),
-                        value: asset.size ? formatBytes(asset.size, 1) : null
-                    }),
-                    isImage && (asset.width != null || asset.height != null) && /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.dimensions'),
-                            defaultMessage: 'Dimensions'
-                        }),
-                        value: asset.width != null && asset.height != null ? `${asset.width} × ${asset.height}` : null
+                    folders.map((folder)=>/*#__PURE__*/ jsx(SingleSelectOption, {
+                            value: String(folder.id),
+                            children: folder.name
+                        }, folder.id))
+                ]
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * DeleteAssetButton
+ * -----------------------------------------------------------------------------------------------*/ const DeleteAssetButton = ()=>{
+    const { formatMessage } = useIntl();
+    const { deleteAsset, isDeleting } = useAssetOperation();
+    const [isOpen, setIsOpen] = React.useState(false);
+    const handleConfirm = async ()=>{
+        await deleteAsset();
+        setIsOpen(false);
+    };
+    const triggerLabel = formatMessage({
+        id: getTranslationKey('asset-details.delete.trigger'),
+        defaultMessage: 'Delete this file'
+    });
+    return /*#__PURE__*/ jsxs(Dialog.Root, {
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        children: [
+            /*#__PURE__*/ jsx(Dialog.Trigger, {
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    withTooltip: false,
+                    label: triggerLabel,
+                    variant: "danger-light",
+                    children: /*#__PURE__*/ jsx(Trash, {})
+                })
+            }),
+            /*#__PURE__*/ jsxs(Dialog.Content, {
+                children: [
+                    /*#__PURE__*/ jsx(Dialog.Header, {
+                        children: formatMessage({
+                            id: getTranslationKey('asset-details.delete.title'),
+                            defaultMessage: 'Delete this media file?'
+                        })
                     }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.extension'),
-                            defaultMessage: 'Extension'
+                    /*#__PURE__*/ jsx(Dialog.Body, {
+                        icon: /*#__PURE__*/ jsx(WarningCircle, {
+                            width: "24px",
+                            height: "24px",
+                            fill: "danger600"
                         }),
-                        value: getFileExtension(asset.ext)
+                        textAlign: "center",
+                        children: formatMessage({
+                            id: 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__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.assetId'),
-                            defaultMessage: 'Asset ID'
-                        }),
-                        value: String(asset.id)
+                    /*#__PURE__*/ jsxs(Dialog.Footer, {
+                        children: [
+                            /*#__PURE__*/ jsx(Dialog.Cancel, {
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "tertiary",
+                                    disabled: isDeleting,
+                                    fullWidth: true,
+                                    children: formatMessage({
+                                        id: 'app.components.Button.cancel',
+                                        defaultMessage: 'Cancel'
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Dialog.Action, {
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "danger-light",
+                                    loading: isDeleting,
+                                    onClick: handleConfirm,
+                                    fullWidth: true,
+                                    children: formatMessage({
+                                        id: 'app.components.Button.confirm',
+                                        defaultMessage: 'Confirm'
+                                    })
+                                })
+                            })
+                        ]
                     })
                 ]
+            })
+        ]
+    });
+};
+const CopyLinkButton = ({ asset })=>{
+    const { formatMessage } = useIntl();
+    const { copy } = useClipboard();
+    const notify = useDrawerNotify();
+    const handleCopy = async ()=>{
+        const url = prefixFileUrlWithBackendUrl(asset.url);
+        if (!url) return;
+        const didCopy = await copy(url);
+        notify({
+            type: didCopy ? 'success' : 'danger',
+            message: didCopy ? formatMessage({
+                id: getTranslationKey('asset-details.copy-link.success'),
+                defaultMessage: 'Link copied.'
+            }) : formatMessage({
+                id: getTranslationKey('asset-details.copy-link.error'),
+                defaultMessage: 'Failed to copy the link.'
+            })
+        });
+    };
+    return /*#__PURE__*/ jsx(IconButton, {
+        withTooltip: false,
+        label: formatMessage({
+            id: getTranslationKey('asset-details.copy-link.trigger'),
+            defaultMessage: 'Copy link'
+        }),
+        variant: "tertiary",
+        onClick: handleCopy,
+        children: /*#__PURE__*/ jsx(Link, {})
+    });
+};
+const DownloadAssetButton = ({ asset })=>{
+    const { formatMessage } = useIntl();
+    const notify = useDrawerNotify();
+    const [isDownloading, setIsDownloading] = React.useState(false);
+    const handleDownload = async ()=>{
+        const url = prefixFileUrlWithBackendUrl(asset.url);
+        if (!url) return;
+        setIsDownloading(true);
+        try {
+            await downloadFile(url, asset.name);
+        } catch  {
+            notify({
+                type: 'danger',
+                message: formatMessage({
+                    id: getTranslationKey('asset-details.download.error'),
+                    defaultMessage: 'Failed to download the file.'
+                })
+            });
+        } finally{
+            setIsDownloading(false);
+        }
+    };
+    return /*#__PURE__*/ jsx(IconButton, {
+        withTooltip: false,
+        label: formatMessage({
+            id: getTranslationKey('asset-details.download.trigger'),
+            defaultMessage: 'Download'
+        }),
+        variant: "tertiary",
+        onClick: handleDownload,
+        disabled: isDownloading,
+        children: /*#__PURE__*/ jsx(Download, {})
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * ReplaceAssetButton
+ * -----------------------------------------------------------------------------------------------*/ const ReplaceAssetButton = ()=>{
+    const { formatMessage } = useIntl();
+    const { replaceAsset, isReplacing } = useAssetOperation();
+    const fileInputRef = React.useRef(null);
+    const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+    const { data: settings } = useGetSettingsQuery();
+    const aiEnabled = settings?.data?.aiMetadata ?? false;
+    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__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(VisuallyHidden, {
+                children: /*#__PURE__*/ jsx("input", {
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: false,
+                    onChange: handleFileChange,
+                    "aria-hidden": true,
+                    tabIndex: -1
+                })
             }),
-            /*#__PURE__*/ jsx(DetailField, {
-                name: "fileName",
+            /*#__PURE__*/ jsx(IconButton, {
+                withTooltip: false,
                 label: formatMessage({
-                    id: getTranslationKey('asset-details.fileName'),
-                    defaultMessage: 'File name'
+                    id: getTranslationKey('asset-details.replace.trigger'),
+                    defaultMessage: 'Replace this file'
                 }),
-                value: asset.name,
-                required: true
+                variant: "tertiary",
+                onClick: handleTriggerClick,
+                disabled: isReplacing,
+                children: /*#__PURE__*/ jsx(ArrowsCounterClockwise, {})
             }),
-            isImage && /*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(DetailField, {
-                        name: "caption",
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.caption'),
-                            defaultMessage: 'Caption'
+            /*#__PURE__*/ jsx(Dialog.Root, {
+                open: isDialogOpen,
+                onOpenChange: setIsDialogOpen,
+                children: /*#__PURE__*/ jsxs(Dialog.Content, {
+                    children: [
+                        /*#__PURE__*/ jsx(Dialog.Header, {
+                            children: formatMessage({
+                                id: getTranslationKey('asset-details.replace.title'),
+                                defaultMessage: 'Replace this media file?'
+                            })
                         }),
-                        value: asset.caption
-                    }),
-                    /*#__PURE__*/ jsx(DetailField, {
-                        name: "alternativeText",
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.alternativeText'),
-                            defaultMessage: 'Alternative text'
+                        /*#__PURE__*/ jsx(Dialog.Body, {
+                            textAlign: "center",
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                direction: "column",
+                                textAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "omega",
+                                        children: formatMessage({
+                                            id: getTranslationKey('asset-details.replace.description'),
+                                            defaultMessage: 'Current content will be permanently replaced.'
+                                        })
+                                    }),
+                                    aiEnabled ? /*#__PURE__*/ jsx(Typography, {
+                                        variant: "omega",
+                                        children: formatMessage({
+                                            id: getTranslationKey('asset-details.replace.description.ai'),
+                                            defaultMessage: 'AI will generate new metadata after upload.'
+                                        })
+                                    }) : null
+                                ]
+                            })
                         }),
-                        value: asset.alternativeText
-                    })
-                ]
+                        /*#__PURE__*/ jsxs(Dialog.Footer, {
+                            children: [
+                                /*#__PURE__*/ jsx(Dialog.Cancel, {
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        variant: "tertiary",
+                                        fullWidth: true,
+                                        children: formatMessage({
+                                            id: 'app.components.Button.cancel',
+                                            defaultMessage: 'Cancel'
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Dialog.Action, {
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        variant: "secondary",
+                                        onClick: handleContinue,
+                                        fullWidth: true,
+                                        children: formatMessage({
+                                            id: getTranslationKey('asset-details.replace.continue'),
+                                            defaultMessage: 'Continue'
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
             })
         ]
     });
 };
+const AssetDetails = ({ asset, closeDetails })=>{
+    const { formatMessage, formatDate } = useIntl();
+    const { data: folders = [] } = useGetAllFoldersQuery();
+    const { toggleNotification } = useNotification();
+    const [updateAsset] = useUpdateAssetMutation();
+    const [replaceMutation, { isLoading: isReplacing }] = useReplaceAssetMutation();
+    const [deleteMutation, { isLoading: isDeleting }] = useDeleteAssetMutation();
+    // In-drawer toast slot
+    const [drawerToast, setDrawerToast] = React.useState(null);
+    React.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.useCallback((toast)=>setDrawerToast(toast), []);
+    const isImage = asset.mime?.includes(AssetType.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 res = await updateAsset({
+            id: asset.id,
+            fileInfo: {
+                name: values.name,
+                caption: values.caption,
+                alternativeText: values.alternativeText,
+                folder: values.folder
+            }
+        });
+        if ('error' in res) {
+            notify({
+                type: 'danger',
+                message: formatMessage({
+                    id: getTranslationKey('asset-details.update.error'),
+                    defaultMessage: 'Failed to update the file.'
+                })
+            });
+            return;
+        }
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: getTranslationKey('asset-details.update.success'),
+                defaultMessage: 'File updated'
+            })
+        });
+    };
+    const { title: folderName } = 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 = async (file)=>{
+        const res = await replaceMutation({
+            id: asset.id,
+            file
+        });
+        if ('error' in res) {
+            const error = res.error;
+            const message = error?.data?.error?.message ?? error?.data?.message ?? formatMessage({
+                id: getTranslationKey('asset-details.replace.error'),
+                defaultMessage: 'Failed to replace the file.'
+            });
+            notify({
+                type: 'danger',
+                message
+            });
+            return;
+        }
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: getTranslationKey('asset-details.replace.success'),
+                defaultMessage: 'File replaced.'
+            })
+        });
+    };
+    // Owns the delete: on error notify in-drawer (drawer stays), on success fire
+    // a persistent global notification then close the drawer.
+    const handleDelete = async ()=>{
+        const res = await deleteMutation(asset.id);
+        if ('error' in res) {
+            const error = res.error;
+            const message = error?.data?.error?.message ?? error?.data?.message ?? formatMessage({
+                id: getTranslationKey('asset-details.delete.error'),
+                defaultMessage: 'Failed to delete the asset.'
+            });
+            notify({
+                type: 'danger',
+                message
+            });
+            return;
+        }
+        toggleNotification({
+            type: 'success',
+            message: formatMessage({
+                id: getTranslationKey('asset-details.delete.success'),
+                defaultMessage: '1 element have been deleted from {folderName}'
+            }, {
+                folderName
+            })
+        });
+        closeDetails();
+    };
+    const operations = React.useMemo(()=>({
+            replaceAsset: handleReplace,
+            deleteAsset: handleDelete,
+            isReplacing,
+            isDeleting
+        }), // handleReplace / handleDelete close over asset+mutations and don't need a
+    // stable identity here; the consumers re-render with the new context value.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        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__*/ jsx(DrawerNotifyContext.Provider, {
+        value: notify,
+        children: /*#__PURE__*/ jsx(AssetOperationsContext.Provider, {
+            value: operations,
+            children: /*#__PURE__*/ jsx(FormShell, {
+                children: /*#__PURE__*/ jsx(Form, {
+                    method: "POST",
+                    initialValues: initialValues,
+                    onSubmit: handleSubmit,
+                    children: ({ modified, isSubmitting, values, resetForm })=>{
+                        const nameIsEmpty = (values.name ?? '').trim() === '';
+                        return /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx(Blocker, {
+                                    onProceed: resetForm
+                                }),
+                                isReplacing || isDeleting ? /*#__PURE__*/ jsx(DrawerBusyOverlay, {
+                                    children: /*#__PURE__*/ jsx(Loader, {
+                                        children: formatMessage({
+                                            id: getTranslationKey(isDeleting ? 'asset-details.delete.loading' : 'asset-details.replace.loading'),
+                                            defaultMessage: isDeleting ? 'Deleting the file…' : 'Replacing the file…'
+                                        })
+                                    })
+                                }) : null,
+                                drawerToast ? /*#__PURE__*/ jsx(DrawerToastSlot, {
+                                    children: /*#__PURE__*/ jsx(Alert, {
+                                        variant: drawerToast.type === 'success' ? 'success' : 'danger',
+                                        closeLabel: formatMessage({
+                                            id: 'global.close',
+                                            defaultMessage: 'Close'
+                                        }),
+                                        onClose: ()=>setDrawerToast(null),
+                                        children: drawerToast.message
+                                    })
+                                }) : null,
+                                /*#__PURE__*/ jsxs(Drawer.ScrollableContent, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(AssetPreview, {
+                                            asset: asset,
+                                            actions: isImage ? /*#__PURE__*/ jsx(Flex, {
+                                                direction: "column",
+                                                gap: 2,
+                                                children: /*#__PURE__*/ jsx(ReplaceAssetButton, {})
+                                            }) : null
+                                        }),
+                                        /*#__PURE__*/ jsxs(Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            gap: 4,
+                                            paddingTop: 4,
+                                            paddingBottom: 4,
+                                            paddingLeft: 5,
+                                            paddingRight: 5,
+                                            children: [
+                                                /*#__PURE__*/ jsx(Typography, {
+                                                    variant: "beta",
+                                                    fontWeight: "semiBold",
+                                                    tag: "h3",
+                                                    children: formatMessage({
+                                                        id: getTranslationKey('asset-details.fileInfo'),
+                                                        defaultMessage: 'File info'
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxs(Flex, {
+                                                    wrap: "wrap",
+                                                    gap: 4,
+                                                    background: "neutral100",
+                                                    paddingTop: 4,
+                                                    paddingBottom: 4,
+                                                    paddingLeft: 6,
+                                                    paddingRight: 6,
+                                                    alignItems: "flex-start",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.creationDate'),
+                                                                defaultMessage: 'Creation date'
+                                                            }),
+                                                            value: asset.createdAt ? formatDate(new Date(asset.createdAt), {
+                                                                dateStyle: 'long',
+                                                                timeStyle: 'short'
+                                                            }) : null
+                                                        }),
+                                                        /*#__PURE__*/ jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.lastUpdated'),
+                                                                defaultMessage: 'Last updated'
+                                                            }),
+                                                            value: asset.updatedAt ? formatDate(new Date(asset.updatedAt), {
+                                                                dateStyle: 'long',
+                                                                timeStyle: 'short'
+                                                            }) : null
+                                                        }),
+                                                        /*#__PURE__*/ jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.createdBy'),
+                                                                defaultMessage: 'Created by'
+                                                            }),
+                                                            value: asset.createdBy ? getDisplayName({
+                                                                firstname: asset.createdBy.firstname ?? undefined,
+                                                                lastname: asset.createdBy.lastname ?? undefined,
+                                                                username: asset.createdBy.username ?? undefined,
+                                                                email: asset.createdBy.email ?? undefined
+                                                            }) ?? '-' : null
+                                                        }),
+                                                        /*#__PURE__*/ jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.size'),
+                                                                defaultMessage: 'Size'
+                                                            }),
+                                                            value: asset.size ? formatBytes(asset.size, 1) : null
+                                                        }),
+                                                        isImage && (asset.width != null || asset.height != null) && /*#__PURE__*/ jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.dimensions'),
+                                                                defaultMessage: 'Dimensions'
+                                                            }),
+                                                            value: asset.width != null && asset.height != null ? `${asset.width} × ${asset.height}` : null
+                                                        }),
+                                                        /*#__PURE__*/ jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.extension'),
+                                                                defaultMessage: 'Extension'
+                                                            }),
+                                                            value: getFileExtension(asset.ext)
+                                                        }),
+                                                        /*#__PURE__*/ jsx(DetailItem, {
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.assetId'),
+                                                                defaultMessage: 'Asset ID'
+                                                            }),
+                                                            value: String(asset.id)
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx(DetailField, {
+                                                    name: "name",
+                                                    label: formatMessage({
+                                                        id: getTranslationKey('asset-details.fileName'),
+                                                        defaultMessage: 'File name'
+                                                    }),
+                                                    required: true
+                                                }),
+                                                /*#__PURE__*/ jsx(LocationField, {
+                                                    label: formatMessage({
+                                                        id: getTranslationKey('asset-details.location'),
+                                                        defaultMessage: 'Location'
+                                                    }),
+                                                    rootLabel: formatMessage({
+                                                        id: getTranslationKey('plugin.home'),
+                                                        defaultMessage: 'Home'
+                                                    }),
+                                                    folders: folders
+                                                }),
+                                                isImage && /*#__PURE__*/ jsxs(Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(DetailField, {
+                                                            name: "caption",
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.caption'),
+                                                                defaultMessage: 'Caption'
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx(DetailField, {
+                                                            name: "alternativeText",
+                                                            label: formatMessage({
+                                                                id: getTranslationKey('asset-details.alternativeText'),
+                                                                defaultMessage: 'Alternative text'
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    gap: 2,
+                                    padding: 3,
+                                    borderColor: "neutral150",
+                                    borderStyle: "solid",
+                                    borderWidth: "1px 0 0 0",
+                                    background: "neutral0",
+                                    children: [
+                                        /*#__PURE__*/ jsxs(Flex, {
+                                            gap: 2,
+                                            children: [
+                                                /*#__PURE__*/ jsx(DeleteAssetButton, {}),
+                                                /*#__PURE__*/ jsx(CopyLinkButton, {
+                                                    asset: asset
+                                                }),
+                                                /*#__PURE__*/ jsx(DownloadAssetButton, {
+                                                    asset: asset
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(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: getTranslationKey('asset-details.save'),
+                                                defaultMessage: 'Save changes'
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        });
+                    }
+                }, asset.id)
+            })
+        })
+    }));
+};
 const DrawerHeader = ({ asset, closeDetails })=>{
     const DocIcon = asset ? getAssetIcon(asset.mime, asset.ext) : FileError;
     return /*#__PURE__*/ jsxs(Flex, {
@@ -253,6 +837,9 @@ const DrawerHeader = ({ asset, closeDetails })=>{
         paddingTop: 3,
         paddingBottom: 3,
         paddingRight: 3,
+        borderColor: "neutral150",
+        borderStyle: "solid",
+        borderWidth: "0 0 1px 0",
         children: [
             /*#__PURE__*/ jsx(DocIcon, {
                 width: 20,
@@ -324,15 +911,9 @@ const DrawerContent = ({ assetId, closeDetails })=>{
                 asset: asset,
                 closeDetails: closeDetails
             }),
-            /*#__PURE__*/ jsxs(Drawer.ScrollableContent, {
-                children: [
-                    /*#__PURE__*/ jsx(AssetPreview, {
-                        asset: asset
-                    }),
-                    /*#__PURE__*/ jsx(AssetDetails, {
-                        asset: asset
-                    })
-                ]
+            /*#__PURE__*/ jsx(AssetDetails, {
+                asset: asset,
+                closeDetails: closeDetails
             })
         ]
     });
@@ -341,7 +922,7 @@ const DrawerContent = ({ assetId, closeDetails })=>{
  * AssetDetailsDrawer
  * -----------------------------------------------------------------------------------------------*/ const AssetDetailsDrawer = ()=>{
     const { formatMessage } = useIntl();
-    const { assetId, isVisible, shouldRenderDrawer, closeDetails } = useAssetDetailsParam();
+    const { assetId, isVisible, shouldRenderDrawer, onCloseAnimationEnd, closeDetails } = useAssetDetailsParam();
     if (!shouldRenderDrawer || assetId === null) {
         return null;
     }
@@ -371,6 +952,7 @@ const DrawerContent = ({ assetId, closeDetails })=>{
                 animationDirection: "left",
                 width: "41.6rem",
                 height: "100vh",
+                onAnimationEnd: onCloseAnimationEnd,
                 children: /*#__PURE__*/ jsx(DrawerContent, {
                     assetId: assetId,
                     closeDetails: closeDetails
@@ -380,5 +962,5 @@ const DrawerContent = ({ assetId, closeDetails })=>{
     });
 };
 
-export { AssetDetailsDrawer, useAssetDetailsParam };
+export { AssetDetails, AssetDetailsDrawer, AssetOperationsContext, DrawerNotifyContext, useAssetDetailsParam };
 //# sourceMappingURL=AssetDetailsDrawer.mjs.map