@strapi/upload 5.54.0 → 5.55.1

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

@@ -1,1202 +0,0 @@
-'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 enums = require('../../../../../enums.js');
-var Drawer = require('../../../../components/Drawer.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