@strapi/upload 5.59.0 → 5.61.0

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

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useQueryParams, withEncodedUserParams, useNotification, Form, Blocker, getDisplayName, useForm, useField, useClipboard } from '@strapi/admin/strapi-admin';
-import { VisuallyHidden, Flex, Loader, Alert, Box, Typography, Button, IconButton, Field, TextInput, Tooltip, SingleSelect, SingleSelectOption, Dialog } from '@strapi/design-system';
-import { FileError, ArrowLineRight, Crop, Trash, WarningCircle, Link, Download, ArrowsCounterClockwise } from '@strapi/icons';
+import { ConfirmDialog, useQueryParams, withEncodedUserParams, useNotification, Form, Blocker, getDisplayName, useForm, useField, useClipboard } from '@strapi/admin/strapi-admin';
+import { Flex, Box, Typography, VisuallyHidden, Dialog, Loader, Alert, Button, IconButton, Field, TextInput, Tooltip, SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { WarningCircle, FileError, ArrowLineRight, Crop, Trash, Link, Download, ArrowsCounterClockwise } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { Drawer } from '../../../../components/Drawer.mjs';
@@ -42,35 +42,12 @@ const useAssetOperation = ()=>{
     return ctx;
 };
 /* -------------------------------------------------------------------------------------------------
- * useAssetDetailsParam - sync drawer visibility with URL ?{ASSET_DETAILS_URL_PARAM}={id}
+ * useAssetDetailsParam - read and write the open asset in URL ?{ASSET_DETAILS_URL_PARAM}={id}
  * -----------------------------------------------------------------------------------------------*/ const useAssetDetailsParam = ()=>{
     const [{ query }, setQuery] = useQueryParams();
     const assetId = parseAssetDetailsId(query?.[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.useState(hasValidId);
-    const displayAssetId = React.useRef(null);
-    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
-    ]);
+    // guards like <Blocker> can intercept it.
     const openDetails = React.useCallback((id)=>{
         setQuery(withEncodedUserParams(query, {
             [ASSET_DETAILS_URL_PARAM]: String(id)
@@ -88,14 +65,44 @@ const useAssetOperation = ()=>{
         setQuery
     ]);
     return {
-        assetId: hasValidId ? assetId : displayAssetId.current,
-        isVisible: hasValidId,
-        shouldRenderDrawer: isMounted,
-        onCloseAnimationEnd,
+        assetId,
         openDetails,
         closeDetails
     };
 };
+/* -------------------------------------------------------------------------------------------------
+ * useDrawerPresence - keep the drawer mounted through its slide-out
+ * -----------------------------------------------------------------------------------------------*/ const useDrawerPresence = (assetId)=>{
+    const isVisible = assetId !== null;
+    // `isMounted` 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. The last id is kept so the content
+    // doesn't go blank mid-slide.
+    const [isMounted, setIsMounted] = React.useState(isVisible);
+    const displayAssetId = React.useRef(assetId);
+    React.useEffect(()=>{
+        if (assetId !== null) {
+            displayAssetId.current = assetId;
+            setIsMounted(true);
+        }
+    }, [
+        assetId
+    ]);
+    const onCloseAnimationEnd = React.useCallback((event)=>{
+        // Ignore animations bubbling up from descendants, and the slide-in.
+        if (event.target === event.currentTarget && !isVisible) {
+            setIsMounted(false);
+        }
+    }, [
+        isVisible
+    ]);
+    return {
+        displayAssetId: isVisible ? assetId : displayAssetId.current,
+        isVisible,
+        shouldRender: isMounted,
+        onCloseAnimationEnd
+    };
+};
 const DetailItemContainer = styled(Flex)`
   flex: 0 0 calc(50% - ${({ theme })=>theme.spaces[2]});
 `;
@@ -191,13 +198,14 @@ const DetailField = ({ name, label, required, disabled })=>{
     const { formatMessage } = useIntl();
     const field = useField(name);
     const isSubmitting = 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.
+    // The input is controlled by local state (synchronous, cursor-safe) and the
+    // form follows. This was needed when the form context echoed changes back
+    // asynchronously: driving the input straight from `field.value` made React
+    // rewrite the DOM value after the keystroke, which threw the cursor to the
+    // end of the field. The form context now updates synchronously, but the
+    // local state is kept as a safe default. 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.useState(fieldValue);
     React.useEffect(()=>{
@@ -540,7 +548,26 @@ const AssetImageActions = ({ onCrop })=>{
         })
     });
 };
-const AssetDetails = ({ asset, closeDetails })=>{
+/* -------------------------------------------------------------------------------------------------
+ * AssetDetails
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * Writes whether the form has unsaved edits into the drawer's ref. Only the
+ * drawer's close handlers read it, so a ref rather than state: toggling dirty
+ * doesn't re-render the drawer. A component, not a hook, because the form state
+ * is only reachable inside <Form>'s render prop.
+ */ const ReportUnsavedEdits = ({ target, hasUnsavedEdits })=>{
+    React.useLayoutEffect(()=>{
+        target.current = hasUnsavedEdits;
+        return ()=>{
+            target.current = false;
+        };
+    }, [
+        target,
+        hasUnsavedEdits
+    ]);
+    return null;
+};
+const AssetDetails = ({ asset, closeDetails, hasUnsavedEditsRef, guardNavigation = false, onAssetChange, onAssetDelete, trackedLocation = MEDIA_LIBRARY_LOCATION })=>{
     const { formatMessage, formatDate } = useIntl();
     const getErrorMessage = useApiErrorMessage();
     const { canCreate, canUpdate, canDownload, canCopyLink } = useMediaLibraryPermissions();
@@ -565,13 +592,21 @@ const AssetDetails = ({ asset, closeDetails })=>{
     // own handlers (replace, update) read like the consumers do.
     const notify = React.useCallback((toast)=>setDrawerToast(toast), []);
     const isImage = asset.mime?.includes(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)=>{
+    // Stable until the asset changes: <Form> resets its values whenever this
+    // object does, which on every render would throw away the baseline a save
+    // sets and show the pre-save values until the refetch lands.
+    const initialValues = React.useMemo(()=>({
+            name: asset.name ?? '',
+            caption: asset.caption ?? '',
+            alternativeText: asset.alternativeText ?? '',
+            folder: typeof asset.folder === 'object' && asset.folder !== null ? asset.folder.id ?? null : asset.folder ?? null
+        }), [
+        asset.name,
+        asset.caption,
+        asset.alternativeText,
+        asset.folder
+    ]);
+    const handleSubmit = async (values, { resetForm })=>{
         const fileInfo = {
             name: values.name,
             caption: values.caption,
@@ -592,8 +627,13 @@ const AssetDetails = ({ asset, closeDetails })=>{
             });
             return;
         }
+        // What was saved is the new baseline. Otherwise the form stays "modified"
+        // until the refetched asset resets it, and closing in that gap asks about
+        // edits that are already saved.
+        resetForm(values);
+        onAssetChange?.(res.data);
         trackUsage('didEditMediaLibraryElements', {
-            location: MEDIA_LIBRARY_LOCATION,
+            location: trackedLocation,
             // Legacy sends the mime top-level type (image/video/audio/application…).
             type: asset.mime?.split('/')[0],
             changeLocation: values.folder !== initialValues.folder
@@ -626,8 +666,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
             });
             return;
         }
+        onAssetChange?.(res.data);
         trackUsage('didReplaceMedia', {
-            location: MEDIA_LIBRARY_LOCATION
+            location: trackedLocation
         });
         notify({
             type: 'success',
@@ -642,7 +683,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
         formatMessage,
         getErrorMessage,
         notify,
+        onAssetChange,
         replaceMutation,
+        trackedLocation,
         trackUsage
     ]);
     // Owns the delete: on error notify in-drawer (drawer stays), on success fire
@@ -668,6 +711,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
                 folderName
             })
         });
+        onAssetDelete?.(asset.id);
         closeDetails();
     }, [
         asset.id,
@@ -677,6 +721,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
         formatMessage,
         getErrorMessage,
         notify,
+        onAssetDelete,
         toggleNotification
     ]);
     const notifyCropError = (error)=>{
@@ -704,8 +749,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
             notifyCropError(res.error);
             return;
         }
+        onAssetChange?.(res.data);
         trackUsage('didCropFile', {
-            location: MEDIA_LIBRARY_LOCATION,
+            location: trackedLocation,
             duplicatedFile: false
         });
         notify({
@@ -717,6 +763,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
         });
     };
     // Save as copy: upload the cropped file as a new asset in the same folder.
+    // The original is untouched, so `onAssetChange` stays silent.
     const handleCropSaveAsCopy = async (file, focalPoint)=>{
         setIsCropOpen(false);
         // Silent single-file upload (no global progress dialog). Carry over the
@@ -736,7 +783,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
             return;
         }
         trackUsage('didCropFile', {
-            location: MEDIA_LIBRARY_LOCATION,
+            location: trackedLocation,
             duplicatedFile: true
         });
         notify({
@@ -778,9 +825,12 @@ const AssetDetails = ({ asset, closeDetails })=>{
                         });
                         return /*#__PURE__*/ jsxs(Fragment, {
                             children: [
-                                /*#__PURE__*/ jsx(Blocker, {
+                                guardNavigation ? /*#__PURE__*/ jsx(Blocker, {
                                     onProceed: resetForm
-                                }),
+                                }) : hasUnsavedEditsRef ? /*#__PURE__*/ jsx(ReportUnsavedEdits, {
+                                    target: hasUnsavedEditsRef,
+                                    hasUnsavedEdits: modified && !isSubmitting
+                                }) : null,
                                 isCropOpen && isImage ? /*#__PURE__*/ jsx(AssetCropEditor, {
                                     asset: asset,
                                     onClose: ()=>setIsCropOpen(false),
@@ -1038,7 +1088,7 @@ const DrawerHeader = ({ asset, closeDetails })=>{
         ]
     });
 };
-const DrawerContent = ({ assetId, closeDetails })=>{
+const DrawerContent = ({ assetId, requestClose, closeDetails, hasUnsavedEditsRef, guardNavigation, onAssetChange, onAssetDelete, trackedLocation })=>{
     const { formatMessage } = useIntl();
     const { data: asset, isLoading, error } = useGetAssetQuery(assetId, {
         refetchOnMountOrArgChange: false,
@@ -1069,7 +1119,7 @@ const DrawerContent = ({ assetId, closeDetails })=>{
                     id: 'global.close',
                     defaultMessage: 'Close'
                 }),
-                onClose: closeDetails,
+                onClose: requestClose,
                 children: formatMessage({
                     id: getTranslationKey('asset-details.error'),
                     defaultMessage: 'Failed to load file details.'
@@ -1081,11 +1131,16 @@ const DrawerContent = ({ assetId, closeDetails })=>{
         children: [
             /*#__PURE__*/ jsx(DrawerHeader, {
                 asset: asset,
-                closeDetails: closeDetails
+                closeDetails: requestClose
             }),
             /*#__PURE__*/ jsx(AssetDetails, {
                 asset: asset,
-                closeDetails: closeDetails
+                closeDetails: closeDetails,
+                hasUnsavedEditsRef: hasUnsavedEditsRef,
+                guardNavigation: guardNavigation,
+                onAssetChange: onAssetChange,
+                onAssetDelete: onAssetDelete,
+                trackedLocation: trackedLocation
             })
         ]
     });
@@ -1118,15 +1173,29 @@ const DrawerContent = ({ assetId, closeDetails })=>{
     // and stop the card's click, so no switch follows and the press dismisses.
     return event.target.closest(ASSET_DETAILS_TRIGGER_SELECTOR) !== null && event.target.closest(ASSET_ITEM_CONTROL_SELECTOR) === null;
 };
-const AssetDetailsDrawer = ()=>{
+const AssetDetailsDrawer = ({ assetId, onClose, guardNavigation = false, onAssetChange, onAssetDelete, trackedLocation })=>{
     const { formatMessage } = useIntl();
-    const { assetId, isVisible, shouldRenderDrawer, onCloseAnimationEnd, closeDetails } = useAssetDetailsParam();
-    if (!shouldRenderDrawer || assetId === null) {
+    const { displayAssetId, isVisible, shouldRender, onCloseAnimationEnd } = useDrawerPresence(assetId);
+    const hasUnsavedEditsRef = React.useRef(false);
+    const [isConfirmingClose, setIsConfirmingClose] = React.useState(false);
+    // Where focus was when the drawer opened — the card or the field's edit
+    // button — so closing can hand it back instead of dropping it on <body>.
+    const returnFocusRef = React.useRef(null);
+    const requestClose = React.useCallback(()=>{
+        if (hasUnsavedEditsRef.current) {
+            setIsConfirmingClose(true);
+            return;
+        }
+        onClose();
+    }, [
+        onClose
+    ]);
+    if (!shouldRender || displayAssetId === null) {
         return null;
     }
     return /*#__PURE__*/ jsxs(Drawer.Root, {
         isVisible: isVisible,
-        onClose: closeDetails,
+        onClose: requestClose,
         children: [
             /*#__PURE__*/ jsx("div", {
                 children: /*#__PURE__*/ jsxs(VisuallyHidden, {
@@ -1146,7 +1215,7 @@ const AssetDetailsDrawer = ()=>{
                     ]
                 })
             }),
-            /*#__PURE__*/ jsx(Drawer.Body, {
+            /*#__PURE__*/ jsxs(Drawer.Body, {
                 animationDirection: "left",
                 width: "41.6rem",
                 // dvh, not vh: the drawer is anchored to the bottom, so with 100vh on
@@ -1155,21 +1224,67 @@ const AssetDetailsDrawer = ()=>{
                 // 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.
+                // Runs before focus moves in, so this is still the element that opened it.
+                onOpenAutoFocus: ()=>{
+                    returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                },
+                // By now the panel is gone: focus is on <body> unless the user moved it
+                // somewhere — a press on another control dismissed the drawer — and that
+                // choice wins.
+                onCloseAutoFocus: (event)=>{
+                    const target = returnFocusRef.current;
+                    const active = document.activeElement;
+                    if (target?.isConnected && (active === null || active === document.body)) {
+                        event.preventDefault();
+                        target.focus();
+                    }
+                },
+                // Opt in to dismiss-on-outside-click; it goes through `requestClose`,
+                // like the header's close button, so unsaved edits are still guarded.
                 onPointerDownOutside: (event)=>{
                     if (shouldKeepDrawerOpen(event, isVisible)) {
                         event.preventDefault();
                     }
                 },
-                children: /*#__PURE__*/ jsx(DrawerContent, {
-                    assetId: assetId,
-                    closeDetails: closeDetails
-                })
+                children: [
+                    /*#__PURE__*/ jsx(DrawerContent, {
+                        assetId: displayAssetId,
+                        requestClose: requestClose,
+                        closeDetails: onClose,
+                        hasUnsavedEditsRef: hasUnsavedEditsRef,
+                        guardNavigation: guardNavigation,
+                        onAssetChange: onAssetChange,
+                        onAssetDelete: onAssetDelete,
+                        trackedLocation: trackedLocation
+                    }),
+                    /*#__PURE__*/ jsx(Dialog.Root, {
+                        open: isConfirmingClose,
+                        onOpenChange: setIsConfirmingClose,
+                        children: /*#__PURE__*/ jsx(ConfirmDialog, {
+                            onConfirm: onClose,
+                            variant: "danger",
+                            children: formatMessage({
+                                id: getTranslationKey('asset-details.unsaved.confirm'),
+                                defaultMessage: "You have unsaved changes, are you sure you want to close this file's details? Your changes will be lost."
+                            })
+                        })
+                    })
+                ]
             })
         ]
     });
 };
+/**
+ * The drawer bound to the URL's `?assetId=`, as the Media Library page uses it:
+ * linkable, survives a refresh, and closing is a navigation.
+ */ const AssetDetailsDrawerFromUrl = ()=>{
+    const { assetId, closeDetails } = useAssetDetailsParam();
+    return /*#__PURE__*/ jsx(AssetDetailsDrawer, {
+        assetId: assetId,
+        onClose: closeDetails,
+        guardNavigation: true
+    });
+};
 
-export { AssetDetails, AssetDetailsDrawer, AssetOperationsContext, DrawerNotifyContext, getBusyMessage, useAssetDetailsParam };
+export { AssetDetails, AssetDetailsDrawer, AssetDetailsDrawerFromUrl, AssetOperationsContext, DrawerNotifyContext, getBusyMessage, useAssetDetailsParam };
 //# sourceMappingURL=AssetDetailsDrawer.mjs.map