@strapi/content-manager 0.0.0-experimental.8bf99b7c43ed372264c198d347a2ada9dfed174d → 0.0.0-experimental.8c28a74d1219c09f4ee67402fd3a26f182c4990a

package/dist/admin/pages/EditView/components/FormInputs/Relations/RelationModal.mjs

@@ -1,20 +1,22 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { createContext, Form, ConfirmDialog, useStrapiApp, useRBAC, DescriptionComponentRenderer } from '@strapi/admin/strapi-admin';
-import { Modal, TextButton, Tooltip, Flex, IconButton, Typography, Button, Dialog, Loader, EmptyStateLayout, Box } from '@strapi/design-system';
+import { createContext, useQueryParams, Form, useForm, ConfirmDialog, useStrapiApp, useRBAC, DescriptionComponentRenderer } from '@strapi/admin/strapi-admin';
+import { Modal, TextButton, Flex, IconButton, Typography, Dialog, Loader, EmptyStateLayout, Box } from '@strapi/design-system';
 import { ArrowLeft, ArrowsOut, WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { COLLECTION_TYPES, SINGLE_TYPES } from '../../../../../constants/collections.mjs';
 import { PERMISSIONS } from '../../../../../constants/plugin.mjs';
-import { useDocumentContext } from '../../../../../features/DocumentContext.mjs';
-import { DocumentRBAC } from '../../../../../features/DocumentRBAC.mjs';
-import { useDocumentLayout } from '../../../../../hooks/useDocumentLayout.mjs';
+import { buildValidParams } from '../../../../../utils/api.mjs';
+import { DocumentStatus } from '../../DocumentStatus.mjs';
+import { useDoc, useDocument } from '../../../../../hooks/useDocument.mjs';
+import '../../../../../preview/pages/Preview.mjs';
 import { useLazyGetDocumentQuery } from '../../../../../services/documents.mjs';
+import { useDocumentLayout } from '../../../../../hooks/useDocumentLayout.mjs';
+import { DocumentRBAC } from '../../../../../features/DocumentRBAC.mjs';
 import { createYupSchema } from '../../../../../utils/validation.mjs';
 import { DocumentActionButton } from '../../DocumentActions.mjs';
-import { DocumentStatus } from '../../DocumentStatus.mjs';
 import { FormLayout } from '../../FormLayout.mjs';
 
 function getCollectionType(url) {
@@ -22,271 +24,422 @@ function getCollectionType(url) {
     const match = url.match(regex);
     return match ? match[1] : undefined;
 }
-const CustomModalContent = styled(Modal.Content)`
+const StyledModalContent = styled(Modal.Content)`
   width: 90%;
   max-width: 100%;
   height: 90%;
   max-height: 100%;
 `;
-const [RelationModalProvider, useRelationModal] = createContext('RelationModal', {
-    parentModified: false,
-    depth: 0
-});
-const RelationModalForm = ({ relation, triggerButtonLabel })=>{
-    const navigate = useNavigate();
-    const { pathname, search } = useLocation();
-    const { formatMessage } = useIntl();
-    const [triggerRefetchDocument] = useLazyGetDocumentQuery();
-    const currentDocument = useDocumentContext('RelationModalForm', (state)=>state.document);
-    const rootDocumentMeta = useDocumentContext('RelationModalForm', (state)=>state.rootDocumentMeta);
-    const currentDocumentMeta = useDocumentContext('RelationModalForm', (state)=>state.meta);
-    const changeDocument = useDocumentContext('RelationModalForm', (state)=>state.changeDocument);
-    const documentHistory = useDocumentContext('RelationModalForm', (state)=>state.documentHistory);
-    const setDocumentHistory = useDocumentContext('RelationModalForm', (state)=>state.setDocumentHistory);
-    const [isConfirmationOpen, setIsConfirmationOpen] = React.useState(false);
-    const [actionPosition, setActionPosition] = React.useState('cancel');
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
-    // NOTE: Not sure about this relation modal context, maybe we should move this to DocumentContext?
-    // Get parent modal context if it exists
-    const parentContext = useRelationModal('RelationModalForm', (state)=>state);
-    // Get depth of nested modals
-    const depth = parentContext ? parentContext.depth + 1 : 0;
-    // Check if this is a nested modal
-    const isNested = depth > 0;
-    const addDocumentToHistory = (document)=>setDocumentHistory((prev)=>[
-                ...prev,
-                document
-            ]);
-    const getPreviousDocument = ()=>{
-        if (documentHistory.length === 0) return undefined;
-        const lastDocument = documentHistory[documentHistory.length - 1];
-        return lastDocument;
-    };
-    const removeLastDocumentFromHistory = ()=>{
-        setDocumentHistory((prev)=>[
-                ...prev
-            ].slice(0, prev.length - 1));
-    };
-    const handleToggleModal = ()=>{
-        if (isModalOpen) {
-            setIsModalOpen(false);
-            const document = {
-                collectionType: rootDocumentMeta.collectionType,
-                model: rootDocumentMeta.model,
-                documentId: rootDocumentMeta.documentId
+const getFullPageUrl = (currentDocumentMeta)=>{
+    const isSingleType = currentDocumentMeta.collectionType === SINGLE_TYPES;
+    const queryParams = currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : '';
+    return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}${isSingleType ? '' : '/' + currentDocumentMeta.documentId}${queryParams}`;
+};
+function reducer(state, action) {
+    switch(action.type){
+        case 'GO_TO_RELATION':
+            if (state.hasUnsavedChanges && !action.payload.shouldBypassConfirmation) {
+                return {
+                    ...state,
+                    confirmDialogIntent: action.payload.document,
+                    fieldToConnect: action.payload.fieldToConnect,
+                    fieldToConnectUID: action.payload.fieldToConnectUID
+                };
+            }
+            const lastItemDocumentHistory = state.documentHistory.at(-1);
+            const hasToResetDocumentHistory = lastItemDocumentHistory && !lastItemDocumentHistory.documentId;
+            return {
+                ...state,
+                // Reset document history if the last item has documentId undefined
+                documentHistory: hasToResetDocumentHistory ? [
+                    action.payload.document
+                ] : [
+                    ...state.documentHistory,
+                    action.payload.document
+                ],
+                confirmDialogIntent: null,
+                isModalOpen: true,
+                fieldToConnect: hasToResetDocumentHistory ? undefined : action.payload.fieldToConnect,
+                fieldToConnectUID: hasToResetDocumentHistory ? undefined : action.payload.fieldToConnectUID
             };
-            // Change back to the root document
-            changeDocument(document);
-            // Reset the document history
-            setDocumentHistory([]);
-            // Reset action position
-            setActionPosition('cancel');
-            // Read from cache or refetch root document
-            triggerRefetchDocument(document, // Favor the cache
-            true);
-        } else {
-            changeDocument(relation);
-            setIsModalOpen(true);
-        }
-    };
-    const getFullPageLink = ()=>{
-        const isSingleType = currentDocumentMeta.collectionType === SINGLE_TYPES;
-        const queryParams = currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : '';
-        return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}${isSingleType ? '' : '/' + currentDocumentMeta.documentId}${queryParams}`;
-    };
-    const handleRedirection = ()=>{
-        const editViewUrl = `${pathname}${search}`;
-        const isRootDocumentUrl = editViewUrl.includes(getFullPageLink());
-        if (isRootDocumentUrl) {
-            handleToggleModal();
-        } else {
-            navigate(getFullPageLink());
-        }
-    };
-    const handleConfirm = ()=>{
-        if (actionPosition === 'navigate') {
-            handleRedirection();
-        } else if (actionPosition === 'back') {
-            const previousRelation = getPreviousDocument();
-            if (previousRelation) {
-                removeLastDocumentFromHistory();
-                changeDocument(previousRelation);
+        case 'GO_BACK':
+            if (state.hasUnsavedChanges && !action.payload.shouldBypassConfirmation) {
+                return {
+                    ...state,
+                    confirmDialogIntent: 'back'
+                };
             }
-        } else {
-            // Add current relation to history before opening a new one in case we are opening a new one
-            if (currentDocumentMeta && Object.keys(currentDocumentMeta).length > 0) {
-                addDocumentToHistory(currentDocumentMeta);
+            return {
+                ...state,
+                documentHistory: state.documentHistory.slice(0, -1),
+                confirmDialogIntent: null
+            };
+        case 'GO_FULL_PAGE':
+            if (state.hasUnsavedChanges) {
+                return {
+                    ...state,
+                    confirmDialogIntent: 'navigate'
+                };
             }
-            handleToggleModal();
-        }
+            return {
+                ...state,
+                documentHistory: [],
+                hasUnsavedChanges: false,
+                isModalOpen: false,
+                confirmDialogIntent: null
+            };
+        case 'GO_TO_CREATED_RELATION':
+            return {
+                ...state,
+                // Reset document history if the last item has documentId undefined
+                documentHistory: state.documentHistory ? [
+                    ...state.documentHistory.slice(0, -1),
+                    action.payload.document
+                ] : [
+                    action.payload.document
+                ],
+                confirmDialogIntent: null,
+                isModalOpen: true,
+                fieldToConnect: undefined,
+                fieldToConnectUID: undefined
+            };
+        case 'CANCEL_CONFIRM_DIALOG':
+            return {
+                ...state,
+                confirmDialogIntent: null
+            };
+        case 'CLOSE_MODAL':
+            if (state.hasUnsavedChanges && !action.payload.shouldBypassConfirmation) {
+                return {
+                    ...state,
+                    confirmDialogIntent: 'close'
+                };
+            }
+            return {
+                ...state,
+                documentHistory: [],
+                confirmDialogIntent: null,
+                hasUnsavedChanges: false,
+                isModalOpen: false
+            };
+        case 'SET_HAS_UNSAVED_CHANGES':
+            return {
+                ...state,
+                hasUnsavedChanges: action.payload.hasUnsavedChanges
+            };
+        default:
+            return state;
+    }
+}
+const [RelationModalProvider, useRelationModal] = createContext('RelationModal');
+function isRenderProp(children) {
+    return typeof children === 'function';
+}
+const RootRelationRenderer = (props)=>{
+    const { children } = props;
+    const [state, dispatch] = React.useReducer(reducer, {
+        documentHistory: [],
+        confirmDialogIntent: null,
+        isModalOpen: false,
+        hasUnsavedChanges: false,
+        fieldToConnect: undefined
+    });
+    const rootDocument = useDoc();
+    const [{ query }] = useQueryParams();
+    const params = React.useMemo(()=>buildValidParams(query ?? {}), [
+        query
+    ]);
+    const rootDocumentMeta = {
+        documentId: rootDocument.document?.documentId || '',
+        model: rootDocument.model,
+        collectionType: rootDocument.collectionType,
+        params
     };
-    return /*#__PURE__*/ jsx(Form, {
-        method: "PUT",
-        initialValues: currentDocument.getInitialFormValues(),
-        validate: (values, options)=>{
-            const yupSchema = createYupSchema(currentDocument.schema?.attributes, currentDocument.components, {
-                status: currentDocument.document?.status,
-                ...options
-            });
-            return yupSchema.validate(values, {
-                abortEarly: false
-            });
+    const currentDocumentMeta = state.documentHistory.at(-1) ?? rootDocumentMeta;
+    const currentDocument = useDocument(currentDocumentMeta);
+    // TODO: check if we can remove the single type check
+    const isSingleType = currentDocumentMeta.collectionType === SINGLE_TYPES;
+    const isCreating = !currentDocumentMeta.documentId && !isSingleType;
+    /**
+   * There is no parent relation, so the relation modal doesn't exist. Create it and set up all the
+   * pieces that will be used by potential child relations: the context, header, form, and footer.
+   */ return /*#__PURE__*/ jsx(RelationModalProvider, {
+        state: state,
+        dispatch: dispatch,
+        rootDocumentMeta: rootDocumentMeta,
+        currentDocumentMeta: currentDocumentMeta,
+        currentDocument: currentDocument,
+        isCreating: isCreating,
+        children: /*#__PURE__*/ jsx(RelationModal, {
+            children: isRenderProp(children) ? children({
+                dispatch
+            }) : props.relation && /*#__PURE__*/ jsx(RelationModalTrigger, {
+                relation: props.relation,
+                children: children
+            })
+        })
+    });
+};
+const NestedRelationRenderer = (props)=>{
+    const { children } = props;
+    const dispatch = useRelationModal('NestedRelation', (state)=>state.dispatch);
+    return isRenderProp(children) ? children({
+        dispatch
+    }) : props.relation && /*#__PURE__*/ jsx(RelationModalTrigger, {
+        relation: props.relation,
+        children: children
+    }); /* This is the trigger that will be rendered in the parent relation */ 
+};
+/**
+ * Component responsible for rendering its children wrapped in a modal, form and context if needed
+ */ const RelationModalRenderer = (props)=>{
+    // We're in a nested relation if the relation modal context is not undefined
+    const isNested = useRelationModal('RelationContextWrapper', (state)=>state != undefined, false);
+    return isNested ? /*#__PURE__*/ jsx(NestedRelationRenderer, {
+        ...props
+    }) : /*#__PURE__*/ jsx(RootRelationRenderer, {
+        ...props
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * RelationModal
+ * -----------------------------------------------------------------------------------------------*/ const generateCreateUrl = (currentDocumentMeta)=>{
+    return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}/create${currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : ''}`;
+};
+const RelationModal = ({ children })=>{
+    const { formatMessage } = useIntl();
+    const navigate = useNavigate();
+    const state = useRelationModal('RelationModalForm', (state)=>state.state);
+    const dispatch = useRelationModal('RelationModalForm', (state)=>state.dispatch);
+    const currentDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.currentDocumentMeta);
+    const currentDocument = useRelationModal('RelationModalForm', (state)=>state.currentDocument);
+    const isCreating = useRelationModal('RelationModalForm', (state)=>state.isCreating);
+    return /*#__PURE__*/ jsxs(Modal.Root, {
+        open: state.isModalOpen,
+        onOpenChange: (open)=>{
+            if (!open) {
+                dispatch({
+                    type: 'CLOSE_MODAL',
+                    payload: {
+                        shouldBypassConfirmation: false
+                    }
+                });
+            }
         },
-        children: ({ modified, isSubmitting, resetForm })=>{
-            // We don't count the root document, so history starts after 1
-            const hasHistory = documentHistory.length > 1;
-            return /*#__PURE__*/ jsxs(RelationModalProvider, {
-                parentModified: modified,
-                depth: depth,
+        children: [
+            children,
+            /*#__PURE__*/ jsxs(StyledModalContent, {
                 children: [
-                    /*#__PURE__*/ jsxs(Modal.Root, {
-                        open: isModalOpen,
-                        onOpenChange: ()=>{
-                            if (isModalOpen) {
-                                if (modified && !isSubmitting) {
-                                    setIsConfirmationOpen(true);
-                                } else {
-                                    handleToggleModal();
-                                }
-                            }
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx(Modal.Trigger, {
-                                children: /*#__PURE__*/ jsx(Tooltip, {
-                                    description: triggerButtonLabel,
-                                    children: /*#__PURE__*/ jsx(CustomTextButton, {
-                                        onClick: ()=>{
-                                            // Check if parent modal has unsaved changes
-                                            if (isNested && parentContext.parentModified) {
-                                                setIsConfirmationOpen(true);
-                                                // Return early to avoid opening the modal
-                                                return;
-                                            } else {
-                                                if (modified && !isSubmitting) {
-                                                    setIsConfirmationOpen(true);
-                                                } else {
-                                                    // Add current relation to history before opening a new one
-                                                    if (currentDocumentMeta && Object.keys(currentDocumentMeta).length > 0) {
-                                                        addDocumentToHistory(currentDocumentMeta);
-                                                    }
-                                                    handleToggleModal();
-                                                }
-                                                if (!isModalOpen) {
-                                                    setIsModalOpen(true);
-                                                }
-                                            }
-                                        },
-                                        width: "100%",
-                                        children: triggerButtonLabel
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ jsxs(CustomModalContent, {
-                                children: [
-                                    /*#__PURE__*/ jsx(Modal.Header, {
-                                        gap: 2,
-                                        children: /*#__PURE__*/ jsx(Flex, {
-                                            justifyContent: "space-between",
-                                            alignItems: "center",
-                                            width: "100%",
-                                            children: /*#__PURE__*/ jsxs(Flex, {
-                                                gap: 2,
-                                                children: [
-                                                    /*#__PURE__*/ jsx(IconButton, {
-                                                        withTooltip: false,
-                                                        label: "Back",
-                                                        variant: "ghost",
-                                                        disabled: !hasHistory,
-                                                        onClick: ()=>{
-                                                            setActionPosition('back');
-                                                            if (modified && !isSubmitting) {
-                                                                setIsConfirmationOpen(true);
-                                                            } else {
-                                                                const previousRelation = getPreviousDocument();
-                                                                if (previousRelation) {
-                                                                    removeLastDocumentFromHistory();
-                                                                    changeDocument(previousRelation);
-                                                                }
-                                                            }
-                                                        },
-                                                        marginRight: 1,
-                                                        children: /*#__PURE__*/ jsx(ArrowLeft, {})
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Typography, {
-                                                        tag: "span",
-                                                        fontWeight: 600,
-                                                        children: formatMessage({
-                                                            id: 'content-manager.components.RelationInputModal.modal-title',
-                                                            defaultMessage: 'Edit a relation'
-                                                        })
-                                                    })
-                                                ]
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx(RelationModalBody, {
-                                        children: /*#__PURE__*/ jsx(IconButton, {
-                                            onClick: ()=>{
-                                                setActionPosition('navigate');
-                                                if (modified && !isSubmitting) {
-                                                    setIsConfirmationOpen(true);
-                                                } else {
-                                                    navigate(getFullPageLink());
-                                                }
-                                            },
-                                            variant: "tertiary",
+                    /*#__PURE__*/ jsx(Modal.Header, {
+                        gap: 2,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            width: "100%",
+                            children: [
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    gap: 2,
+                                    children: [
+                                        /*#__PURE__*/ jsx(IconButton, {
+                                            withTooltip: false,
                                             label: formatMessage({
-                                                id: 'content-manager.components.RelationInputModal.button-fullpage',
-                                                defaultMessage: 'Go to entry'
+                                                id: 'global.back',
+                                                defaultMessage: 'Back'
                                             }),
-                                            children: /*#__PURE__*/ jsx(ArrowsOut, {})
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx(Modal.Footer, {
-                                        children: /*#__PURE__*/ jsx(Button, {
+                                            variant: "ghost",
+                                            disabled: state.documentHistory.length < 2,
                                             onClick: ()=>{
-                                                if (modified && !isSubmitting) {
-                                                    setIsConfirmationOpen(true);
-                                                } else {
-                                                    handleToggleModal();
-                                                }
+                                                dispatch({
+                                                    type: 'GO_BACK',
+                                                    payload: {
+                                                        shouldBypassConfirmation: false
+                                                    }
+                                                });
                                             },
-                                            variant: "tertiary",
-                                            children: formatMessage({
-                                                id: 'app.components.Button.cancel',
-                                                defaultMessage: 'Cancel'
+                                            marginRight: 1,
+                                            children: /*#__PURE__*/ jsx(ArrowLeft, {})
+                                        }),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            tag: "span",
+                                            fontWeight: 600,
+                                            children: isCreating ? formatMessage({
+                                                id: 'content-manager.relation.create',
+                                                defaultMessage: 'Create a relation'
+                                            }) : formatMessage({
+                                                id: 'content-manager.components.RelationInputModal.modal-title',
+                                                defaultMessage: 'Edit a relation'
                                             })
                                         })
-                                    })
-                                ]
-                            })
-                        ]
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    onClick: ()=>{
+                                        dispatch({
+                                            type: 'GO_FULL_PAGE'
+                                        });
+                                        if (!state.hasUnsavedChanges) {
+                                            if (isCreating) {
+                                                navigate(generateCreateUrl(currentDocumentMeta));
+                                            } else {
+                                                navigate(getFullPageUrl(currentDocumentMeta));
+                                            }
+                                        }
+                                    },
+                                    variant: "tertiary",
+                                    label: formatMessage({
+                                        id: 'content-manager.components.RelationInputModal.button-fullpage',
+                                        defaultMessage: 'Go to entry'
+                                    }),
+                                    children: /*#__PURE__*/ jsx(ArrowsOut, {})
+                                })
+                            ]
+                        })
                     }),
-                    /*#__PURE__*/ jsx(Dialog.Root, {
-                        open: isConfirmationOpen,
-                        onOpenChange: setIsConfirmationOpen,
-                        children: /*#__PURE__*/ jsx(ConfirmDialog, {
-                            onConfirm: ()=>{
-                                handleConfirm();
-                                setIsConfirmationOpen(false);
-                                resetForm();
+                    /*#__PURE__*/ jsx(Modal.Body, {
+                        children: /*#__PURE__*/ jsx(Form, {
+                            method: isCreating ? 'POST' : 'PUT',
+                            initialValues: currentDocument.getInitialFormValues(isCreating),
+                            validate: (values, options)=>{
+                                const yupSchema = createYupSchema(currentDocument.schema?.attributes, currentDocument.components, {
+                                    status: currentDocument.document?.status,
+                                    ...options
+                                });
+                                return yupSchema.validate(values, {
+                                    abortEarly: false
+                                });
                             },
-                            onCancel: ()=>{
-                                setIsConfirmationOpen(false);
-                            },
-                            variant: "danger",
-                            children: formatMessage({
-                                id: 'content-manager.components.RelationInputModal.confirmation-message',
-                                defaultMessage: 'Some changes were not saved. Are you sure you want to close this relation? All changes that were not saved will be lost.'
-                            })
+                            children: /*#__PURE__*/ jsx(RelationModalBody, {})
                         })
                     })
                 ]
+            })
+        ]
+    });
+};
+/**
+ * All the main content (not header and footer) of the relation modal, plus the confirmation dialog.
+ * Will be wrapped in a Modal.Body by the RelationModal component.
+ * Cannot be moved directly inside RelationModal because it needs access to the context via hooks.
+ */ const RelationModalBody = ()=>{
+    const navigate = useNavigate();
+    const { pathname, search } = useLocation();
+    const { formatMessage } = useIntl();
+    const [triggerRefetchDocument] = useLazyGetDocumentQuery();
+    const state = useRelationModal('RelationModalForm', (state)=>state.state);
+    const dispatch = useRelationModal('RelationModalForm', (state)=>state.dispatch);
+    const rootDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.rootDocumentMeta);
+    const currentDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.currentDocumentMeta);
+    const isCreating = useRelationModal('RelationModalForm', (state)=>state.isCreating);
+    /**
+   * One-way sync the modified state from the form to the modal state.
+   * It is needed because we need to consume state from the form context in order to lift it up
+   * into the modal context. It is not possible otherwise because the modal needs the form state,
+   * but it must be a parent of the form.
+   */ const modified = useForm('FormWatcher', (state)=>state.modified);
+    const isSubmitting = useForm('FormWatcher', (state)=>state.isSubmitting);
+    const hasUnsavedChanges = modified && !isSubmitting;
+    React.useEffect(()=>{
+        dispatch({
+            type: 'SET_HAS_UNSAVED_CHANGES',
+            payload: {
+                hasUnsavedChanges
+            }
+        });
+    }, [
+        hasUnsavedChanges,
+        dispatch
+    ]);
+    const handleCloseModal = (shouldBypassConfirmation)=>{
+        dispatch({
+            type: 'CLOSE_MODAL',
+            payload: {
+                shouldBypassConfirmation
+            }
+        });
+        {
+            // TODO: check if we can avoid this by relying on RTK invalidatesTags.
+            // If so we can delete this function and dispatch the events directly
+            triggerRefetchDocument(// TODO check if params should be removed (as they were before)
+            rootDocumentMeta, // Favor the cache
+            true);
+        }
+    };
+    const handleRedirection = ()=>{
+        const editViewUrl = `${pathname}${search}`;
+        const fullPageUrl = getFullPageUrl(currentDocumentMeta);
+        const isRootDocumentUrl = editViewUrl.includes(fullPageUrl);
+        if (isRootDocumentUrl) {
+            handleCloseModal(true);
+        } else {
+            if (isCreating) {
+                navigate(generateCreateUrl(currentDocumentMeta));
+            } else {
+                navigate(fullPageUrl);
+            }
+        }
+    };
+    const handleConfirm = ()=>{
+        if (state.confirmDialogIntent === null) {
+            return;
+        }
+        if (state.confirmDialogIntent === 'navigate') {
+            handleRedirection();
+        } else if (state.confirmDialogIntent === 'back') {
+            dispatch({
+                type: 'GO_BACK',
+                payload: {
+                    shouldBypassConfirmation: true
+                }
+            });
+        } else if (state.confirmDialogIntent === 'close') {
+            handleCloseModal(true);
+        } else if ('documentId' in state.confirmDialogIntent) {
+            dispatch({
+                type: 'GO_TO_RELATION',
+                payload: {
+                    document: state.confirmDialogIntent,
+                    shouldBypassConfirmation: true
+                }
             });
         }
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(RelationModalForm, {}),
+            /*#__PURE__*/ jsx(Dialog.Root, {
+                open: state.confirmDialogIntent != null,
+                children: /*#__PURE__*/ jsx(ConfirmDialog, {
+                    onConfirm: ()=>handleConfirm(),
+                    onCancel: ()=>dispatch({
+                            type: 'CANCEL_CONFIRM_DIALOG'
+                        }),
+                    variant: "danger",
+                    children: formatMessage({
+                        id: 'content-manager.components.RelationInputModal.confirmation-message',
+                        defaultMessage: 'Some changes were not saved. Are you sure you want to close this relation? All changes that were not saved will be lost.'
+                    })
+                })
+            })
+        ]
+    });
+};
+const RelationModalTrigger = ({ children, relation })=>{
+    const dispatch = useRelationModal('ModalTrigger', (state)=>state.dispatch);
+    return /*#__PURE__*/ jsx(StyledTextButton, {
+        onClick: ()=>{
+            dispatch({
+                type: 'GO_TO_RELATION',
+                payload: {
+                    document: relation,
+                    shouldBypassConfirmation: false
+                }
+            });
+        },
+        children: children
     });
 };
-const CustomTextButton = styled(TextButton)`
+const StyledTextButton = styled(TextButton)`
+  max-width: 100%;
   & > span {
     font-size: ${({ theme })=>theme.fontSizes[2]};
     width: inherit;
@@ -295,20 +448,23 @@ const CustomTextButton = styled(TextButton)`
     text-overflow: ellipsis;
   }
 `;
-const RelationModalBody = ({ children })=>{
+/**
+ * The mini edit view for a relation that is displayed inside a modal.
+ * It's complete with its header, document actions and form layout.
+ */ const RelationModalForm = ()=>{
     const { formatMessage } = useIntl();
-    const documentMeta = useDocumentContext('RelationModalBody', (state)=>state.meta);
-    const documentResponse = useDocumentContext('RelationModalBody', (state)=>state.document);
-    const onPreview = useDocumentContext('RelationModalBody', (state)=>state.onPreview);
-    const documentLayoutResponse = useDocumentLayout(documentMeta.model);
-    const plugins = useStrapiApp('RelationModalBody', (state)=>state.plugins);
-    const initialValues = documentResponse.getInitialFormValues();
+    const currentDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.currentDocumentMeta);
+    const isCreating = useRelationModal('RelationModalForm', (state)=>state.isCreating);
+    const currentDocument = useRelationModal('RelationModalForm', (state)=>state.currentDocument);
+    const documentLayoutResponse = useDocumentLayout(currentDocumentMeta.model);
+    const plugins = useStrapiApp('RelationModalForm', (state)=>state.plugins);
+    const initialValues = isCreating ? currentDocument.getInitialFormValues(isCreating) : currentDocument.getInitialFormValues();
     const { permissions = [], isLoading: isLoadingPermissions, error } = useRBAC(PERMISSIONS.map((action)=>({
             action,
-            subject: documentMeta.model
+            subject: currentDocumentMeta.model
         })));
-    const isLoading = isLoadingPermissions || documentLayoutResponse.isLoading || documentResponse.isLoading;
-    if (isLoading && !documentResponse.document?.documentId) {
+    const isLoading = isLoadingPermissions || documentLayoutResponse.isLoading || currentDocument.isLoading;
+    if (isLoading && !currentDocument.document?.documentId) {
         return /*#__PURE__*/ jsx(Loader, {
             small: true,
             children: formatMessage({
@@ -317,7 +473,7 @@ const RelationModalBody = ({ children })=>{
             })
         });
     }
-    if (error || !documentMeta.model || documentLayoutResponse.error || !documentResponse.document || !documentResponse.meta || !documentResponse.schema || !initialValues) {
+    if (error || !currentDocumentMeta.model || documentLayoutResponse.error || !isCreating && !currentDocument.document || !isCreating && !currentDocument.meta || !currentDocument.schema || !initialValues) {
         return /*#__PURE__*/ jsx(Flex, {
             alignItems: "center",
             height: "100%",
@@ -333,106 +489,98 @@ const RelationModalBody = ({ children })=>{
             })
         });
     }
-    const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);
-    const hasDraftAndPublished = documentResponse.schema?.options?.draftAndPublish ?? false;
+    const documentTitle = currentDocument.getTitle(documentLayoutResponse.edit.settings.mainField);
+    const hasDraftAndPublished = currentDocument.schema?.options?.draftAndPublish ?? false;
     const props = {
         activeTab: 'draft',
-        collectionType: documentMeta.collectionType,
-        model: documentMeta.model,
-        documentId: documentMeta.documentId,
-        document: documentResponse.document,
-        meta: documentResponse.meta,
-        onPreview,
-        fromRelationModal: true,
-        fromPreview: onPreview !== undefined
+        collectionType: currentDocumentMeta.collectionType,
+        model: currentDocumentMeta.model,
+        documentId: currentDocumentMeta.documentId,
+        document: currentDocument.document,
+        meta: currentDocument.meta
     };
-    return /*#__PURE__*/ jsx(Modal.Body, {
-        children: /*#__PURE__*/ jsxs(DocumentRBAC, {
-            permissions: permissions,
-            model: documentMeta.model,
-            children: [
-                /*#__PURE__*/ jsxs(Flex, {
-                    alignItems: "flex-start",
-                    direction: "column",
-                    gap: 2,
-                    children: [
-                        /*#__PURE__*/ jsxs(Flex, {
-                            width: "100%",
-                            justifyContent: "space-between",
-                            gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsx(Typography, {
-                                    tag: "h2",
-                                    variant: "alpha",
-                                    children: documentTitle
-                                }),
-                                /*#__PURE__*/ jsxs(Flex, {
-                                    gap: 2,
-                                    children: [
-                                        children,
-                                        /*#__PURE__*/ jsx(DescriptionComponentRenderer, {
-                                            props: props,
-                                            descriptions: plugins['content-manager'].apis.getDocumentActions('relation-modal'),
-                                            children: (actions)=>{
-                                                const filteredActions = actions.filter((action)=>{
-                                                    return [
-                                                        action.position
-                                                    ].flat().includes('relation-modal');
-                                                });
-                                                const [primaryAction, secondaryAction] = filteredActions;
-                                                if (!primaryAction && !secondaryAction) return null;
-                                                // Both actions are available when draft and publish enabled
-                                                if (primaryAction && secondaryAction) {
-                                                    return /*#__PURE__*/ jsxs(Fragment, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(DocumentActionButton, {
-                                                                ...secondaryAction,
-                                                                variant: secondaryAction.variant || 'secondary'
-                                                            }),
-                                                            /*#__PURE__*/ jsx(DocumentActionButton, {
-                                                                ...primaryAction,
-                                                                variant: primaryAction.variant || 'default'
-                                                            })
-                                                        ]
-                                                    });
-                                                }
-                                                // Otherwise we just have the save action
-                                                return /*#__PURE__*/ jsx(DocumentActionButton, {
-                                                    ...primaryAction,
-                                                    variant: primaryAction.variant || 'secondary'
-                                                });
-                                            }
-                                        })
-                                    ]
+    return /*#__PURE__*/ jsxs(DocumentRBAC, {
+        permissions: permissions,
+        model: currentDocumentMeta.model,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                alignItems: "flex-start",
+                direction: "column",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        width: "100%",
+                        justifyContent: "space-between",
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                tag: "h2",
+                                variant: "alpha",
+                                children: documentTitle
+                            }),
+                            /*#__PURE__*/ jsx(Flex, {
+                                gap: 2,
+                                children: /*#__PURE__*/ jsx(DescriptionComponentRenderer, {
+                                    props: props,
+                                    descriptions: plugins['content-manager'].apis.getDocumentActions('relation-modal'),
+                                    children: (actions)=>{
+                                        const filteredActions = actions.filter((action)=>{
+                                            return [
+                                                action.position
+                                            ].flat().includes('relation-modal');
+                                        });
+                                        const [primaryAction, secondaryAction] = filteredActions;
+                                        if (!primaryAction && !secondaryAction) return null;
+                                        // Both actions are available when draft and publish enabled
+                                        if (primaryAction && secondaryAction) {
+                                            return /*#__PURE__*/ jsxs(Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(DocumentActionButton, {
+                                                        ...secondaryAction,
+                                                        variant: secondaryAction.variant || 'secondary'
+                                                    }),
+                                                    /*#__PURE__*/ jsx(DocumentActionButton, {
+                                                        ...primaryAction,
+                                                        variant: primaryAction.variant || 'default'
+                                                    })
+                                                ]
+                                            });
+                                        }
+                                        // Otherwise we just have the save action
+                                        return /*#__PURE__*/ jsx(DocumentActionButton, {
+                                            ...primaryAction,
+                                            variant: primaryAction.variant || 'secondary'
+                                        });
+                                    }
                                 })
-                            ]
-                        }),
-                        hasDraftAndPublished ? /*#__PURE__*/ jsx(Box, {
-                            children: /*#__PURE__*/ jsx(DocumentStatus, {
-                                status: documentResponse.document?.status
                             })
-                        }) : null
-                    ]
-                }),
-                /*#__PURE__*/ jsx(Flex, {
-                    flex: 1,
-                    overflow: "auto",
-                    alignItems: "stretch",
-                    paddingTop: 7,
-                    children: /*#__PURE__*/ jsx(Box, {
-                        overflow: "auto",
-                        flex: 1,
-                        children: /*#__PURE__*/ jsx(FormLayout, {
-                            layout: documentLayoutResponse.edit.layout,
-                            document: documentResponse,
-                            hasBackground: false
+                        ]
+                    }),
+                    hasDraftAndPublished ? /*#__PURE__*/ jsx(Box, {
+                        children: /*#__PURE__*/ jsx(DocumentStatus, {
+                            status: currentDocument.document?.status
                         })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx(Flex, {
+                flex: 1,
+                overflow: "auto",
+                alignItems: "stretch",
+                paddingTop: 7,
+                children: /*#__PURE__*/ jsx(Box, {
+                    overflow: "auto",
+                    flex: 1,
+                    children: /*#__PURE__*/ jsx(FormLayout, {
+                        layout: documentLayoutResponse.edit.layout,
+                        document: currentDocument,
+                        hasBackground: false
                     })
                 })
-            ]
-        })
+            })
+        ]
     });
 };
 
-export { RelationModalForm, getCollectionType };
+export { RelationModalRenderer, getCollectionType, reducer, useRelationModal };
 //# sourceMappingURL=RelationModal.mjs.map