@strapi/content-manager 5.61.0 → 5.62.0

package/dist/admin/pages/EditView/components/FormInputs/Component/ComponentCopyModal.mjs

@@ -0,0 +1,1077 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useNotification, useAPIErrorHandler, useForm } from '@strapi/admin/strapi-admin';
+import { Modal, Flex, Box, Button, Searchbar, Typography, Loader, Checkbox, Badge, Radio } from '@strapi/design-system';
+import { Duplicate, WarningCircle } from '@strapi/icons';
+import toPath from 'lodash/toPath';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { COLLECTION_TYPES } from '../../../../../constants/collections.mjs';
+import { useDebounce } from '../../../../../hooks/useDebounce.mjs';
+import { useDocumentContext } from '../../../../../hooks/useDocumentContext.mjs';
+import { useDocumentLayout } from '../../../../../hooks/useDocumentLayout.mjs';
+import { useLazyGetAllDocumentsQuery, useLazyGetDocumentQuery } from '../../../../../services/documents.mjs';
+import { useLazyGetAllRelationsQuery } from '../../../../../services/relations.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { CellValue } from '../../../../ListView/components/TableCells/CellValue.mjs';
+import { getComponentInstances, getComponentPreview, getRelationsToCopy, connectRelations, cloneComponentData } from './utils/componentCopy.mjs';
+
+const ENTRIES_PAGE_SIZE = '10';
+const getDocumentTitle = (document1, mainField, fallback, untitled)=>{
+    if (mainField !== 'id') {
+        const value = document1?.[mainField];
+        if (value !== undefined && value !== null && String(value).trim().length > 0) {
+            return String(value);
+        }
+    }
+    return fallback || untitled;
+};
+/**
+ * The line of text shown under the title of an entry in the list.
+ */ const getEntryMeta = ({ count, fieldLabel, firstInstanceLabel, formatMessage, isCurrent, isFormModified, selection })=>{
+    if (isCurrent && isFormModified) {
+        return formatMessage({
+            id: getTranslation('components.ComponentCopyModal.entries.unsaved'),
+            defaultMessage: 'Save your changes to copy from this entry'
+        });
+    }
+    if (count === undefined) {
+        return undefined;
+    }
+    if (count === 0) {
+        return isCurrent && selection === 'single' ? formatMessage({
+            id: getTranslation('components.ComponentCopyModal.entries.noneOther'),
+            defaultMessage: 'No other {label} in this entry'
+        }, {
+            label: fieldLabel
+        }) : formatMessage({
+            id: getTranslation('components.ComponentCopyModal.entries.none'),
+            defaultMessage: 'No {label} yet'
+        }, {
+            label: fieldLabel
+        });
+    }
+    if (isCurrent) {
+        return formatMessage({
+            id: getTranslation('components.ComponentCopyModal.entries.count.saved'),
+            defaultMessage: '{count, plural, one {# item} other {# items}} · last saved version'
+        }, {
+            count
+        });
+    }
+    if (selection === 'single' && count === 1 && firstInstanceLabel) {
+        return firstInstanceLabel;
+    }
+    return formatMessage({
+        id: getTranslation('components.ComponentCopyModal.entries.count'),
+        defaultMessage: '{count, plural, one {# item} other {# items}}'
+    }, {
+        count
+    });
+};
+/**
+ * The modal is mounted while it's open and unmounted when it's closed.
+ */ const ComponentCopyModal = ({ componentUid, fieldLabel, maxSelection = Infinity, mode, onClose, onInsert, replacesContent = false, selection, sourceFieldName })=>{
+    const { formatMessage } = useIntl();
+    const { toggleNotification } = useNotification();
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler(getTranslation);
+    const { currentDocument, currentDocumentMeta } = useDocumentContext('ComponentCopyModal');
+    const { edit: { components: componentLayouts, settings } } = useDocumentLayout(currentDocumentMeta.model);
+    const targetValues = useForm('ComponentCopyModal', (state)=>state.values);
+    const isFormModified = useForm('ComponentCopyModal', (state)=>state.modified);
+    const [search, setSearch] = React.useState('');
+    const debouncedSearch = useDebounce(search, 300);
+    const searchRef = React.useRef(null);
+    const [selectedEntry, setSelectedEntry] = React.useState(null);
+    const [sourceDocument, setSourceDocument] = React.useState(null);
+    const [selectedPaths, setSelectedPaths] = React.useState([]);
+    const [isCopying, setIsCopying] = React.useState(false);
+    // Read while rendering: once mounted, the modal holds the focus
+    const [returnFocusTarget] = React.useState(getReturnFocusTarget);
+    /**
+   * Loading an entry and copying components are asynchronous, the modal can be closed in the
+   * meantime and the user can pick another entry while one loads.
+   */ const isMountedRef = React.useRef(true);
+    const selectedDocumentIdRef = React.useRef(null);
+    React.useEffect(()=>{
+        isMountedRef.current = true;
+        return ()=>{
+            isMountedRef.current = false;
+        };
+    }, []);
+    const [getDocuments, { data: documentsData, error: documentsError, isFetching: isFetchingDocuments, isUninitialized: isDocumentsQueryUninitialized }] = useLazyGetAllDocumentsQuery();
+    const [getDocument, { isFetching: isFetchingDocument }] = useLazyGetDocumentQuery();
+    const [getAllRelations] = useLazyGetAllRelationsQuery();
+    const { components } = currentDocument;
+    const componentDisplayName = components[componentUid]?.info?.displayName ?? componentUid;
+    const currentDocumentId = currentDocumentMeta.documentId;
+    /**
+   * The last saved version of the entry being edited: what the API holds for it.
+   */ const savedDocument = currentDocument.document;
+    /**
+   * The list of entries only loads the first level of components: for a field nested in another
+   * component, how many components an entry holds is only known once the entry is loaded.
+   */ const isNestedField = toPath(sourceFieldName).length > 1;
+    React.useEffect(()=>{
+        if (currentDocumentMeta.collectionType !== COLLECTION_TYPES) {
+            return;
+        }
+        void getDocuments({
+            model: currentDocumentMeta.model,
+            params: {
+                ...currentDocumentMeta.params,
+                _q: debouncedSearch || undefined,
+                page: '1',
+                pageSize: ENTRIES_PAGE_SIZE,
+                sort: 'updatedAt:DESC'
+            }
+        });
+    }, [
+        currentDocumentMeta.collectionType,
+        currentDocumentMeta.model,
+        currentDocumentMeta.params,
+        debouncedSearch,
+        getDocuments
+    ]);
+    React.useEffect(()=>{
+        if (documentsError) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(documentsError)
+            });
+        }
+    }, [
+        documentsError,
+        formatAPIError,
+        toggleNotification
+    ]);
+    const findInstances = React.useCallback((document1)=>getComponentInstances({
+            componentUid,
+            components,
+            getMainField: (uid)=>componentLayouts[uid]?.settings?.mainField,
+            mode,
+            schema: currentDocument.schema,
+            sourceDocument: document1,
+            sourceFieldName,
+            targetValues
+        }), [
+        componentLayouts,
+        componentUid,
+        components,
+        currentDocument.schema,
+        mode,
+        sourceFieldName,
+        targetValues
+    ]);
+    /**
+   * In a field holding one component, the saved version of that very component is not something
+   * to copy: the field already holds it.
+   */ const filterOwnInstance = React.useCallback((instances)=>selection === 'single' ? instances.filter((instance)=>instance.sourcePath !== sourceFieldName) : instances, [
+        selection,
+        sourceFieldName
+    ]);
+    const currentEntryInstances = React.useMemo(()=>savedDocument ? filterOwnInstance(findInstances(savedDocument)) : [], [
+        filterOwnInstance,
+        findInstances,
+        savedDocument
+    ]);
+    const untitled = formatMessage({
+        id: 'content-manager.containers.untitled',
+        defaultMessage: 'Untitled'
+    });
+    const getTitle = (document1)=>getDocumentTitle(document1, settings.mainField, document1.documentId, untitled);
+    const currentEntryTitle = savedDocument ? getTitle(savedDocument) : '';
+    const normalizedSearch = debouncedSearch.trim().toLowerCase();
+    // A locale that isn't saved yet has a document id but nothing stored (no `id`)
+    const showCurrentEntry = !!savedDocument?.id && !!currentDocumentId && (!normalizedSearch || currentEntryTitle.toLowerCase().includes(normalizedSearch));
+    const currentEntryRow = showCurrentEntry ? {
+        documentId: currentDocumentId,
+        title: currentEntryTitle,
+        isCurrent: true,
+        disabled: isFormModified || currentEntryInstances.length === 0,
+        meta: getEntryMeta({
+            count: currentEntryInstances.length,
+            fieldLabel,
+            formatMessage,
+            isCurrent: true,
+            isFormModified,
+            selection
+        })
+    } : null;
+    const entryRows = [
+        ...currentEntryRow ? [
+            currentEntryRow
+        ] : [],
+        ...(documentsData?.results ?? []).filter((document1)=>document1.documentId !== currentDocumentId).map((document1)=>{
+            const instances = isNestedField ? undefined : findInstances(document1);
+            return {
+                documentId: document1.documentId,
+                title: getTitle(document1),
+                isCurrent: false,
+                disabled: instances?.length === 0,
+                meta: getEntryMeta({
+                    count: instances?.length,
+                    fieldLabel,
+                    firstInstanceLabel: instances?.[0]?.label,
+                    formatMessage,
+                    isCurrent: false,
+                    isFormModified,
+                    selection
+                })
+            };
+        })
+    ];
+    /**
+   * Loads the entry components are copied from.
+   */ const handleSelectEntry = async (row)=>{
+        // Picking the entry that's already selected keeps the components ticked in it.
+        if (selectedDocumentIdRef.current === row.documentId) {
+            return;
+        }
+        selectedDocumentIdRef.current = row.documentId;
+        setSelectedEntry({
+            documentId: row.documentId,
+            title: row.title,
+            isCurrent: row.isCurrent
+        });
+        setSelectedPaths([]);
+        if (row.isCurrent) {
+            setSourceDocument(savedDocument ?? null);
+            return;
+        }
+        setSourceDocument(null);
+        const result = await getDocument({
+            collectionType: currentDocumentMeta.collectionType,
+            documentId: row.documentId,
+            model: currentDocumentMeta.model,
+            params: currentDocumentMeta.params
+        });
+        // Another entry was picked in the meantime, or the modal was closed.
+        if (!isMountedRef.current || selectedDocumentIdRef.current !== row.documentId) {
+            return;
+        }
+        if (result.error) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(result.error)
+            });
+            selectedDocumentIdRef.current = null;
+            setSelectedEntry(null);
+            return;
+        }
+        // Without its data the entry can't be previewed: unselect it, so it can be picked again.
+        if (!result.data?.data) {
+            selectedDocumentIdRef.current = null;
+            setSelectedEntry(null);
+            return;
+        }
+        setSourceDocument(result.data.data);
+    };
+    const isCurrentEntrySelected = selectedEntry?.isCurrent ?? false;
+    const instances = React.useMemo(()=>{
+        if (isCurrentEntrySelected) {
+            return currentEntryInstances;
+        }
+        return sourceDocument ? findInstances(sourceDocument) : [];
+    }, [
+        currentEntryInstances,
+        findInstances,
+        isCurrentEntrySelected,
+        sourceDocument
+    ]);
+    // An entry holding a single component is selected right away: there's nothing else to pick.
+    React.useEffect(()=>{
+        if (instances.length === 1) {
+            const [{ sourcePath }] = instances;
+            setSelectedPaths((paths)=>paths.length === 1 && paths[0] === sourcePath ? paths : [
+                    sourcePath
+                ]);
+        }
+    }, [
+        instances
+    ]);
+    const selectedInstances = instances.filter((instance)=>selectedPaths.includes(instance.sourcePath));
+    const areAllSelected = instances.length > 0 && selectedInstances.length === instances.length;
+    const isSelectionTooLarge = selectedInstances.length > maxSelection;
+    const mainField = componentLayouts[componentUid]?.settings?.mainField;
+    const previewFields = React.useMemo(()=>componentLayouts[componentUid]?.layout.flat().filter((field)=>field.name !== mainField).map((field)=>({
+                name: field.name,
+                label: field.label
+            })), [
+        componentLayouts,
+        componentUid,
+        mainField
+    ]);
+    /**
+   * The copy is a snapshot of the component, its relations are connected to the same entries.
+   * A relation that can't be loaded is left empty rather than failing the whole copy.
+   */ const copyInstance = async (instance)=>{
+        const relations = getRelationsToCopy(instance.source, componentUid, components);
+        const loadedRelations = await Promise.allSettled(relations.map(({ model, id, targetField })=>getAllRelations({
+                model,
+                id,
+                targetField,
+                params: currentDocumentMeta.params
+            }).unwrap()));
+        const data = loadedRelations.reduce((acc, result, index)=>result.status === 'fulfilled' ? connectRelations(acc, relations[index].path, result.value) : acc, cloneComponentData(instance.source, componentUid, components));
+        return {
+            data: mode === 'dynamiczone' ? {
+                ...data,
+                __component: componentUid
+            } : data,
+            hasMissingRelations: loadedRelations.some((result)=>result.status === 'rejected')
+        };
+    };
+    /**
+   * The current entry gets its own messages: "this entry" can't be injected in place of an
+   * entry title without breaking the sentence in other languages.
+   */ const getSuccessMessage = (count)=>{
+        const entry = selectedEntry?.title ?? '';
+        if (selection === 'single' && replacesContent) {
+            return isCurrentEntrySelected ? formatMessage({
+                id: getTranslation('components.ComponentCopyModal.success.replaced.currentEntry'),
+                defaultMessage: '{label} replaced with content from this entry'
+            }, {
+                label: fieldLabel
+            }) : formatMessage({
+                id: getTranslation('components.ComponentCopyModal.success.replaced'),
+                defaultMessage: '{label} replaced with content from {entry}'
+            }, {
+                label: fieldLabel,
+                entry
+            });
+        }
+        if (selection === 'single') {
+            return isCurrentEntrySelected ? formatMessage({
+                id: getTranslation('components.ComponentCopyModal.success.single.currentEntry'),
+                defaultMessage: '{label} copied from this entry'
+            }, {
+                label: fieldLabel
+            }) : formatMessage({
+                id: getTranslation('components.ComponentCopyModal.success.single'),
+                defaultMessage: '{label} copied from {entry}'
+            }, {
+                label: fieldLabel,
+                entry
+            });
+        }
+        if (mode === 'dynamiczone') {
+            return isCurrentEntrySelected ? formatMessage({
+                id: getTranslation('components.ComponentCopyModal.success.components.currentEntry'),
+                defaultMessage: '{count, plural, one {# {component} component} other {# {component} components}} copied from this entry'
+            }, {
+                count,
+                component: componentDisplayName
+            }) : formatMessage({
+                id: getTranslation('components.ComponentCopyModal.success.components'),
+                defaultMessage: '{count, plural, one {# {component} component} other {# {component} components}} copied from {entry}'
+            }, {
+                count,
+                component: componentDisplayName,
+                entry
+            });
+        }
+        return isCurrentEntrySelected ? formatMessage({
+            id: getTranslation('components.ComponentCopyModal.success.entries.currentEntry'),
+            defaultMessage: '{count, plural, one {# entry} other {# entries}} copied from this entry'
+        }, {
+            count
+        }) : formatMessage({
+            id: getTranslation('components.ComponentCopyModal.success.entries'),
+            defaultMessage: '{count, plural, one {# entry} other {# entries}} copied from {entry}'
+        }, {
+            count,
+            entry
+        });
+    };
+    const handleConfirm = async ()=>{
+        if (selectedInstances.length === 0 || isSelectionTooLarge) {
+            return;
+        }
+        setIsCopying(true);
+        const copies = await Promise.all(selectedInstances.map(copyInstance));
+        if (!isMountedRef.current) {
+            return;
+        }
+        // The field tells the user why it turns the copies down, e.g. it's full.
+        if (!onInsert(copies.map(({ data })=>data))) {
+            onClose();
+            return;
+        }
+        onClose();
+        toggleNotification(copies.some(({ hasMissingRelations })=>hasMissingRelations) ? {
+            type: 'warning',
+            message: formatMessage({
+                id: getTranslation('components.ComponentCopyModal.relations-warning'),
+                defaultMessage: 'Content copied, but some of its relations could not be loaded.'
+            })
+        } : {
+            type: 'success',
+            message: getSuccessMessage(copies.length)
+        });
+    };
+    const title = selection === 'single' ? formatMessage({
+        id: getTranslation('components.ComponentCopyModal.title.single'),
+        defaultMessage: 'Copy an existing {label}'
+    }, {
+        label: fieldLabel
+    }) : formatMessage({
+        id: getTranslation('components.ComponentCopyModal.title.multiple'),
+        defaultMessage: 'Copy existing {label}'
+    }, {
+        label: fieldLabel
+    });
+    const getConfirmLabel = ()=>{
+        if (selection === 'single' && replacesContent) {
+            return formatMessage({
+                id: getTranslation('components.ComponentCopyModal.confirm.replace'),
+                defaultMessage: 'Replace content'
+            });
+        }
+        if (selectedInstances.length > 1) {
+            return formatMessage({
+                id: getTranslation('components.ComponentCopyModal.confirm.multiple'),
+                defaultMessage: 'Use content from {count} items'
+            }, {
+                count: selectedInstances.length
+            });
+        }
+        return formatMessage({
+            id: getTranslation('components.ComponentCopyModal.confirm'),
+            defaultMessage: 'Use content'
+        });
+    };
+    const renderFooterNote = ()=>{
+        if (isSelectionTooLarge) {
+            return /*#__PURE__*/ jsx(FooterWarning, {
+                children: formatMessage({
+                    id: getTranslation('components.ComponentCopyModal.footer.tooMany'),
+                    defaultMessage: 'You can add {remaining, plural, one {# more item} other {# more items}} to {label}. Unselect {excess, plural, one {# item} other {# items}}.'
+                }, {
+                    label: fieldLabel,
+                    remaining: maxSelection,
+                    excess: selectedInstances.length - maxSelection
+                })
+            });
+        }
+        if (selection === 'single' && replacesContent) {
+            return /*#__PURE__*/ jsx(FooterWarning, {
+                children: formatMessage({
+                    id: getTranslation('components.ComponentCopyModal.footer.replace'),
+                    defaultMessage: 'This will replace the current content of {label}.'
+                }, {
+                    label: fieldLabel
+                })
+            });
+        }
+        return /*#__PURE__*/ jsx(Typography, {
+            variant: "pi",
+            textColor: "neutral600",
+            children: formatMessage({
+                id: getTranslation('components.ComponentCopyModal.footer.note'),
+                defaultMessage: 'The content is copied: editing it here won’t change the original entry.'
+            })
+        });
+    };
+    const isLoadingEntries = isFetchingDocuments || isDocumentsQueryUninitialized;
+    const isLoadingSource = selectedEntry !== null && !selectedEntry.isCurrent && !sourceDocument;
+    const loadingLabel = formatMessage({
+        id: getTranslation('components.ComponentCopyModal.loading'),
+        defaultMessage: 'Loading'
+    });
+    const renderInstanceSummary = (instance, titleId)=>/*#__PURE__*/ jsx(InstanceSummary, {
+            instance: instance,
+            preview: getComponentPreview(instance.source, componentUid, components, previewFields),
+            titleId: titleId
+        });
+    const renderPreview = ()=>{
+        if (selectedEntry === null) {
+            return /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 2,
+                padding: 6,
+                grow: 1,
+                children: [
+                    /*#__PURE__*/ jsx(Flex, {
+                        color: "neutral400",
+                        children: /*#__PURE__*/ jsx(Duplicate, {
+                            width: "2.4rem",
+                            height: "2.4rem"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        variant: "omega",
+                        textColor: "neutral600",
+                        textAlign: "center",
+                        children: selection === 'single' ? formatMessage({
+                            id: getTranslation('components.ComponentCopyModal.preview.empty.single'),
+                            defaultMessage: 'Pick an entry to preview its {label}.'
+                        }, {
+                            label: fieldLabel
+                        }) : formatMessage({
+                            id: getTranslation('components.ComponentCopyModal.preview.empty'),
+                            defaultMessage: 'Pick an entry to see its {label}.'
+                        }, {
+                            label: fieldLabel
+                        })
+                    })
+                ]
+            });
+        }
+        if (isLoadingSource) {
+            return /*#__PURE__*/ jsx(Flex, {
+                justifyContent: "center",
+                alignItems: "center",
+                grow: 1,
+                padding: 6,
+                children: /*#__PURE__*/ jsx(Loader, {
+                    small: true,
+                    children: loadingLabel
+                })
+            });
+        }
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsxs(PreviewHeader, {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    gap: 4,
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                    paddingLeft: 5,
+                    paddingRight: 5,
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            fontWeight: "bold",
+                            textColor: "neutral800",
+                            ellipsis: true,
+                            children: formatMessage({
+                                id: getTranslation('components.ComponentCopyModal.preview.title'),
+                                defaultMessage: '{entry} · {label}'
+                            }, {
+                                entry: selectedEntry.title,
+                                label: fieldLabel
+                            })
+                        }),
+                        selection === 'multiple' && instances.length > 1 && /*#__PURE__*/ jsx(Checkbox, {
+                            checked: areAllSelected,
+                            onCheckedChange: (checked)=>setSelectedPaths(checked === true ? instances.map((instance)=>instance.sourcePath) : []),
+                            children: formatMessage({
+                                id: getTranslation('components.ComponentCopyModal.selectAll'),
+                                defaultMessage: 'Select all'
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Scrollable, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 3,
+                    padding: 5,
+                    children: /*#__PURE__*/ jsx(InstancePicker, {
+                        fieldLabel: fieldLabel,
+                        instances: instances,
+                        onSelectedPathsChange: setSelectedPaths,
+                        renderSummary: renderInstanceSummary,
+                        selectedPaths: selectedPaths,
+                        selection: selection
+                    })
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ jsx(Modal.Root, {
+        open: true,
+        onOpenChange: (isOpen)=>!isOpen && onClose(),
+        children: /*#__PURE__*/ jsxs(ModalContent, {
+            onCloseAutoFocus: (event)=>{
+                // The modal has no trigger of its own to give the focus back to
+                if (returnFocusTarget?.isConnected) {
+                    event.preventDefault();
+                    returnFocusTarget.focus();
+                }
+            },
+            onEscapeKeyDown: (event)=>{
+                // Escape in a filled search only clears it, which the searchbar does itself
+                if (search !== '' && event.target === searchRef.current) {
+                    event.preventDefault();
+                }
+            },
+            children: [
+                /*#__PURE__*/ jsx(Modal.Header, {
+                    children: /*#__PURE__*/ jsx(Modal.Title, {
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Panes, {
+                    children: [
+                        /*#__PURE__*/ jsx(EntriesPane, {
+                            appliedSearch: debouncedSearch,
+                            isLoading: isLoadingEntries,
+                            // Picking a second entry while one loads would start a race between the two.
+                            isSelectionLocked: isFetchingDocument || isCopying,
+                            onSearchChange: setSearch,
+                            onSelect: handleSelectEntry,
+                            rows: entryRows,
+                            search: search,
+                            searchRef: searchRef,
+                            selectedDocumentId: selectedEntry?.documentId ?? null
+                        }),
+                        /*#__PURE__*/ jsx(PreviewPane, {
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: renderPreview()
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(ModalFooter, {
+                    gap: 4,
+                    children: [
+                        renderFooterNote(),
+                        /*#__PURE__*/ jsxs(Flex, {
+                            gap: 2,
+                            shrink: 0,
+                            children: [
+                                /*#__PURE__*/ jsx(Modal.Close, {
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        variant: "tertiary",
+                                        children: formatMessage({
+                                            id: 'app.components.Button.cancel',
+                                            defaultMessage: 'Cancel'
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    onClick: handleConfirm,
+                                    disabled: selectedInstances.length === 0 || isSelectionTooLarge,
+                                    loading: isCopying,
+                                    children: getConfirmLabel()
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * getReturnFocusTarget
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * @description The element to focus once the modal is closed: the button that opened it, or when
+ * it was opened from a menu item, the button of the menu (the menu is gone by then).
+ */ const getReturnFocusTarget = ()=>{
+    const active = document.activeElement;
+    if (!(active instanceof HTMLElement) || active === document.body) {
+        return null;
+    }
+    const menu = active.closest('[role="menu"]');
+    if (!menu) {
+        return active;
+    }
+    return menu.id ? document.querySelector(`[aria-controls="${CSS.escape(menu.id)}"]`) : null;
+};
+/**
+ * The left pane of the modal: the search and the list of entries to copy from.
+ */ const EntriesPane = ({ appliedSearch, isLoading, isSelectionLocked, onSearchChange, onSelect, rows, search, searchRef, selectedDocumentId })=>{
+    const { formatMessage } = useIntl();
+    const normalizedSearch = appliedSearch.trim();
+    const searchLabel = formatMessage({
+        id: getTranslation('components.ComponentCopyModal.search'),
+        defaultMessage: 'Search all entries'
+    });
+    const renderRows = ()=>{
+        if (isLoading) {
+            return /*#__PURE__*/ jsx(Flex, {
+                justifyContent: "center",
+                padding: 4,
+                children: /*#__PURE__*/ jsx(Loader, {
+                    small: true,
+                    children: formatMessage({
+                        id: getTranslation('components.ComponentCopyModal.loading'),
+                        defaultMessage: 'Loading'
+                    })
+                })
+            });
+        }
+        if (rows.length === 0) {
+            return /*#__PURE__*/ jsx(Box, {
+                padding: 2,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    variant: "omega",
+                    textColor: "neutral600",
+                    children: normalizedSearch ? formatMessage({
+                        id: getTranslation('components.ComponentCopyModal.entries.noMatch'),
+                        defaultMessage: 'No entry matches “{search}”'
+                    }, {
+                        search: normalizedSearch
+                    }) : formatMessage({
+                        id: getTranslation('components.ComponentCopyModal.noEntries'),
+                        defaultMessage: 'No entries found'
+                    })
+                })
+            });
+        }
+        // While locked, the entries aren't `disabled`: the picked one keeps the focus while it loads.
+        return rows.map((row)=>/*#__PURE__*/ jsxs(EntryButton, {
+                type: "button",
+                "aria-pressed": row.documentId === selectedDocumentId,
+                "aria-disabled": isSelectionLocked || undefined,
+                disabled: row.disabled,
+                onClick: ()=>{
+                    if (!isSelectionLocked) {
+                        onSelect(row);
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        gap: 2,
+                        alignItems: "center",
+                        wrap: "wrap",
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                fontWeight: "bold",
+                                textColor: "inherit",
+                                children: row.title
+                            }),
+                            row.isCurrent && /*#__PURE__*/ jsx(Badge, {
+                                size: "S",
+                                active: true,
+                                children: formatMessage({
+                                    id: getTranslation('components.ComponentCopyModal.entries.current'),
+                                    defaultMessage: 'This entry'
+                                })
+                            })
+                        ]
+                    }),
+                    row.meta && /*#__PURE__*/ jsx(Typography, {
+                        variant: "pi",
+                        textColor: "neutral600",
+                        children: row.meta
+                    })
+                ]
+            }, row.documentId));
+    };
+    return /*#__PURE__*/ jsxs(EntriesPaneRoot, {
+        direction: "column",
+        alignItems: "stretch",
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                paddingTop: 4,
+                paddingBottom: 2,
+                paddingLeft: 4,
+                paddingRight: 4,
+                children: /*#__PURE__*/ jsx(Searchbar, {
+                    ref: searchRef,
+                    name: "component-copy-search",
+                    value: search,
+                    onChange: (event)=>onSearchChange(event.target.value),
+                    onClear: ()=>onSearchChange(''),
+                    clearLabel: formatMessage({
+                        id: 'clearLabel',
+                        defaultMessage: 'Clear'
+                    }),
+                    placeholder: searchLabel,
+                    size: "S",
+                    children: searchLabel
+                })
+            }),
+            !normalizedSearch && /*#__PURE__*/ jsx(Box, {
+                paddingLeft: 4,
+                paddingRight: 4,
+                paddingBottom: 1,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    variant: "sigma",
+                    textColor: "neutral600",
+                    children: formatMessage({
+                        id: getTranslation('components.ComponentCopyModal.entries.title'),
+                        defaultMessage: 'Recently updated entries'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Scrollable, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 1,
+                padding: 2,
+                children: renderRows()
+            })
+        ]
+    });
+};
+/**
+ * The components of the picked entry: a read-only card when there's one to take, radios when one
+ * of several is taken, checkboxes when several can be taken.
+ */ const InstancePicker = ({ fieldLabel, instances, onSelectedPathsChange, renderSummary, selectedPaths, selection })=>{
+    const { formatMessage } = useIntl();
+    const radioTitleId = React.useId();
+    if (instances.length === 0) {
+        return /*#__PURE__*/ jsx(Typography, {
+            variant: "omega",
+            textColor: "neutral600",
+            children: formatMessage({
+                id: getTranslation('components.ComponentCopyModal.preview.noComponents'),
+                defaultMessage: 'No {label} in this entry'
+            }, {
+                label: fieldLabel
+            })
+        });
+    }
+    if (selection === 'single' && instances.length === 1) {
+        return /*#__PURE__*/ jsx(InstanceCard, {
+            $selected: true,
+            children: renderSummary(instances[0], `${radioTitleId}-0`)
+        });
+    }
+    if (selection === 'single') {
+        return /*#__PURE__*/ jsx(Radio.Group, {
+            value: selectedPaths[0] ?? '',
+            onValueChange: (value)=>onSelectedPathsChange([
+                    value
+                ]),
+            children: instances.map((instance, index)=>{
+                const titleId = `${radioTitleId}-${index}`;
+                return /*#__PURE__*/ jsx(InstanceCard, {
+                    $selected: selectedPaths.includes(instance.sourcePath),
+                    children: /*#__PURE__*/ jsx(Radio.Item, {
+                        value: instance.sourcePath,
+                        "aria-labelledby": titleId,
+                        children: renderSummary(instance, titleId)
+                    })
+                }, instance.sourcePath);
+            })
+        });
+    }
+    const togglePath = (sourcePath, checked)=>{
+        onSelectedPathsChange(checked ? [
+            ...selectedPaths.filter((path)=>path !== sourcePath),
+            sourcePath
+        ] : selectedPaths.filter((path)=>path !== sourcePath));
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: instances.map((instance)=>/*#__PURE__*/ jsx(SelectableInstanceCard, {
+                checked: selectedPaths.includes(instance.sourcePath),
+                onCheckedChange: (checked)=>togglePath(instance.sourcePath, checked),
+                renderSummary: (titleId)=>renderSummary(instance, titleId)
+            }, instance.sourcePath))
+    });
+};
+const InstanceSummary = ({ instance, preview, titleId })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Flex, {
+        tag: "span",
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        grow: 1,
+        minWidth: 0,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                tag: "span",
+                gap: 2,
+                alignItems: "baseline",
+                wrap: "wrap",
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        tag: "span",
+                        id: titleId,
+                        fontWeight: "bold",
+                        textColor: "neutral800",
+                        children: instance.label
+                    }),
+                    instance.parentLabel && /*#__PURE__*/ jsx(Typography, {
+                        tag: "span",
+                        variant: "pi",
+                        textColor: "neutral600",
+                        children: formatMessage({
+                            id: getTranslation('components.ComponentCopyModal.instance.nested'),
+                            defaultMessage: 'In {parent}'
+                        }, {
+                            parent: instance.parentLabel
+                        })
+                    })
+                ]
+            }),
+            preview.length > 0 && /*#__PURE__*/ jsx(PreviewGrid, {
+                tag: "span",
+                children: preview.map((field)=>/*#__PURE__*/ jsxs(Flex, {
+                        tag: "span",
+                        direction: "column",
+                        alignItems: "stretch",
+                        minWidth: 0,
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                tag: "span",
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: field.label
+                            }),
+                            /*#__PURE__*/ jsx(Typography, {
+                                tag: "span",
+                                variant: "omega",
+                                textColor: "neutral800",
+                                ellipsis: true,
+                                children: /*#__PURE__*/ jsx(CellValue, {
+                                    type: field.type,
+                                    value: field.value
+                                })
+                            })
+                        ]
+                    }, field.name))
+            })
+        ]
+    });
+};
+/**
+ * The whole card toggles its checkbox. The checkbox is named after the title of the component
+ * only, not after the whole preview.
+ */ const SelectableInstanceCard = ({ checked, onCheckedChange, renderSummary })=>{
+    const id = React.useId();
+    const titleId = `${id}-title`;
+    return /*#__PURE__*/ jsx(InstanceCard, {
+        tag: "label",
+        htmlFor: id,
+        $selected: checked,
+        $interactive: true,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            tag: "span",
+            gap: 3,
+            alignItems: "flex-start",
+            children: [
+                /*#__PURE__*/ jsx(Checkbox, {
+                    id: id,
+                    "aria-labelledby": titleId,
+                    checked: checked,
+                    onCheckedChange: (value)=>onCheckedChange(value === true)
+                }),
+                renderSummary(titleId)
+            ]
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Styles
+ * -----------------------------------------------------------------------------------------------*/ const FooterWarning = ({ children })=>/*#__PURE__*/ jsxs(Flex, {
+        gap: 2,
+        alignItems: "center",
+        color: "warning600",
+        children: [
+            /*#__PURE__*/ jsx(WarningCircle, {
+                width: "1.6rem",
+                height: "1.6rem",
+                "aria-hidden": true
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "pi",
+                textColor: "warning600",
+                children: children
+            })
+        ]
+    });
+const ModalContent = styled(Modal.Content)`
+  width: 92rem;
+  max-width: calc(100% - ${({ theme })=>theme.spaces[8]});
+  height: 60rem;
+`;
+const ModalFooter = styled(Modal.Footer)`
+  flex: 0 0 auto;
+`;
+const Panes = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    flex-direction: row;
+  }
+`;
+const EntriesPaneRoot = styled(Flex)`
+  flex: 0 0 auto;
+  max-height: 40%;
+  min-height: 0;
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    width: 30rem;
+    max-height: none;
+    border-bottom: 0;
+    border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
+  }
+`;
+const PreviewPane = styled(Flex)`
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+`;
+const Scrollable = styled(Flex)`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+`;
+const PreviewHeader = styled(Flex)`
+  border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const EntryButton = styled.button`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${({ theme })=>theme.spaces[1]};
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: transparent;
+  color: ${({ theme })=>theme.colors.neutral800};
+  padding: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[3]};
+  text-align: left;
+  cursor: pointer;
+
+  &:not(:disabled):not([aria-disabled='true']):hover {
+    background: ${({ theme })=>theme.colors.neutral100};
+  }
+
+  &:not(:disabled):focus-visible {
+    outline: 2px solid ${({ theme })=>theme.colors.primary600};
+    outline-offset: -2px;
+  }
+
+  &[aria-pressed='true'] {
+    border-color: ${({ theme })=>theme.colors.primary200};
+    background: ${({ theme })=>theme.colors.primary100};
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+`;
+const InstanceCard = styled(Box)`
+  display: block;
+  border: 1px solid
+    ${({ theme, $selected })=>$selected ? theme.colors.primary600 : theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme, $selected })=>$selected ? theme.colors.primary100 : theme.colors.neutral100};
+  padding: ${({ theme })=>theme.spaces[4]};
+  cursor: ${({ $interactive })=>$interactive ? 'pointer' : 'default'};
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      border-color 120ms ${({ theme })=>theme.motion.easings.easeOutQuad},
+      background-color 120ms ${({ theme })=>theme.motion.easings.easeOutQuad};
+  }
+
+  &:hover {
+    border-color: ${({ theme, $interactive, $selected })=>$interactive && !$selected ? theme.colors.primary200 : undefined};
+  }
+`;
+const PreviewGrid = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  gap: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[4]};
+`;
+
+export { ComponentCopyModal, getEntryMeta };
+//# sourceMappingURL=ComponentCopyModal.mjs.map