@strapi/content-manager 5.37.1 → 5.38.1

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

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useForm, useField, useNotification, useRBAC, useFocusInputField, useIsDesktop } from '@strapi/admin/strapi-admin';
-import { Flex, Box, Link, TextButton, EmptyStateLayout, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, useComposedRefs, IconButton } from '@strapi/design-system';
-import { ArrowClockwise, WarningCircle, Plus, Link as Link$1, Drag, Cross } from '@strapi/icons';
+import { useForm, useField, useNotification, useRBAC, useIsDesktop, useFocusInputField } from '@strapi/admin/strapi-admin';
+import { Flex, Box, Link, TextButton, EmptyStateLayout, Field, VisuallyHidden, useComposedRefs, IconButton, Combobox, ComboboxOption, Typography } from '@strapi/design-system';
+import { ArrowClockwise, WarningCircle, Drag, Cross, Link as Link$1, Plus } from '@strapi/icons';
 import { generateNKeysBetween } from 'fractional-indexing';
 import pipe from 'lodash/fp/pipe';
 import { getEmptyImage } from 'react-dnd-html5-backend';
@@ -22,7 +22,7 @@ import { getRelationLabel } from '../../../../../utils/relations.mjs';
 import { getTranslation } from '../../../../../utils/translations.mjs';
 import { DocumentStatus } from '../../DocumentStatus.mjs';
 import { useComponent } from '../ComponentContext.mjs';
-import { RelationModalRenderer, getCollectionType } from './RelationModal.mjs';
+import { getCollectionType, RelationModalRenderer } from './RelationModal.mjs';
 
 /**
  * Remove a relation, whether it's been already saved or not.
@@ -32,13 +32,13 @@ import { RelationModalRenderer, getCollectionType } from './RelationModal.mjs';
     const field = useField(fieldName);
     const removeFieldRow = useForm(consumerName, (state)=>state.removeFieldRow);
     const addFieldRow = useForm(consumerName, (state)=>state.addFieldRow);
-    const handleDisconnect = (relation)=>{
+    const handleDisconnect = React.useCallback((relation)=>{
         if (field.value && field.value.connect) {
             /**
-       * A relation will exist in the `connect` array _if_ it has
-       * been added without saving. In this case, we just remove it
-       * from the connect array
-       */ const indexOfRelationInConnectArray = field.value.connect.findIndex((rel)=>rel.id === relation.id);
+         * A relation will exist in the `connect` array _if_ it has
+         * been added without saving. In this case, we just remove it
+         * from the connect array
+         */ const indexOfRelationInConnectArray = field.value.connect.findIndex((rel)=>rel.id === relation.id);
             if (indexOfRelationInConnectArray >= 0) {
                 removeFieldRow(`${fieldName}.connect`, indexOfRelationInConnectArray);
                 return;
@@ -52,7 +52,12 @@ import { RelationModalRenderer, getCollectionType } from './RelationModal.mjs';
                 locale: relation.locale
             }
         });
-    };
+    }, [
+        addFieldRow,
+        field.value,
+        fieldName,
+        removeFieldRow
+    ]);
     return handleDisconnect;
 }
 /* -------------------------------------------------------------------------------------------------
@@ -65,6 +70,7 @@ const ONE_WAY_RELATIONS = [
     'oneToManyMorph',
     'oneToOneMorph'
 ];
+const EMPTY_RELATION_RESULTS = [];
 /**
  * TODO: we get a rather ugly flash when we remove a single relation from the list leaving
  * no other relations when we press save. The initial relation re-renders, probably because
@@ -84,10 +90,10 @@ const ONE_WAY_RELATIONS = [
     const { formatMessage } = useIntl();
     const isMorph = props.attribute.relation.toLowerCase().includes('morph');
     const isDisabled = isMorph || disabled;
-    const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
-            componentId: id,
-            componentUID: uid
-        }));
+    // @ts-expect-error – `targetModel` exists on supported non-morph relations (morph is disabled).
+    const targetModel = props.attribute.targetModel;
+    const componentId = useComponent('RelationsField', (state)=>state.id);
+    const componentUID = useComponent('RelationsField', (state)=>state.uid);
     const isSubmitting = useForm('RelationsList', (state)=>state.isSubmitting);
     React.useEffect(()=>{
         setCurrentPage(1);
@@ -125,27 +131,19 @@ const ONE_WAY_RELATIONS = [
         }
     }, {
         refetchOnMountOrArgChange: true,
-        skip: !id || !isRelatedToCurrentDocument,
-        selectFromResult: (result)=>{
-            return {
-                ...result,
-                data: {
-                    ...result.data,
-                    results: result.data?.results ? result.data.results : []
-                }
-            };
-        }
+        skip: !id || !isRelatedToCurrentDocument
     });
     const handleLoadMore = ()=>{
         setCurrentPage((prev)=>prev + 1);
     };
     const field = useField(props.name);
+    const serverData = data?.results ?? EMPTY_RELATION_RESULTS;
     const isFetchingMoreRelations = isLoading || isFetching;
-    const realServerRelationsCount = 'pagination' in data && data.pagination ? data.pagination.total : 0;
+    const realServerRelationsCount = data?.pagination ? data.pagination.total : 0;
     /**
      * Items that are already connected, but reordered would be in
      * this list, so to get an accurate figure, we remove them.
-     */ const relationsConnected = (field.value?.connect ?? []).filter((rel)=>data.results.findIndex((relation)=>relation.id === rel.id) === -1).length ?? 0;
+     */ const relationsConnected = (field.value?.connect ?? []).filter((rel)=>serverData.findIndex((relation)=>relation.id === rel.id) === -1).length ?? 0;
     const relationsDisconnected = field.value?.disconnect?.length ?? 0;
     const relationsCount = realServerRelationsCount + relationsConnected - relationsDisconnected;
     /**
@@ -155,15 +153,14 @@ const ONE_WAY_RELATIONS = [
      */ const relations = React.useMemo(()=>{
         const ctx = {
             field: field.value,
-            // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-            href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}`,
+            href: `../${COLLECTION_TYPES}/${targetModel}`,
             mainField: props.mainField
         };
         /**
        * Tidy up our data.
        */ const transformations = pipe(removeConnected(ctx), removeDisconnected(ctx), addLabelAndHref(ctx));
         const transformedRels = transformations([
-            ...data.results
+            ...serverData
         ]);
         /**
        * THIS IS CRUCIAL. If you don't sort by the __temp_key__ which comes from fractional indexing
@@ -177,14 +174,13 @@ const ONE_WAY_RELATIONS = [
             return 0;
         });
     }, [
-        data.results,
+        serverData,
         field.value,
-        // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-        props.attribute.targetModel,
+        targetModel,
         props.mainField
     ]);
     const handleDisconnect = useHandleDisconnect(props.name, 'RelationsField');
-    const handleConnect = (relation)=>{
+    const handleConnect = React.useCallback((relation)=>{
         const [lastItemInList] = relations.slice(-1);
         const item = {
             id: relation.id,
@@ -196,13 +192,12 @@ const ONE_WAY_RELATIONS = [
             },
             status: relation.status,
             /**
-         * If there's a last item, that's the first key we use to generate out next one.
-         */ __temp_key__: generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],
+           * If there's a last item, that's the first key we use to generate out next one.
+           */ __temp_key__: generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],
             // Fallback to `id` if there is no `mainField` value, which will overwrite the above `id` property with the exact same data.
             [props.mainField?.name ?? 'documentId']: relation[props.mainField?.name ?? 'documentId'],
             label: getRelationLabel(relation, props.mainField),
-            // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
-            href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
+            href: `../${COLLECTION_TYPES}/${targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
         };
         if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
             // Remove any existing relation so they can be replaced with the new one
@@ -217,7 +212,15 @@ const ONE_WAY_RELATIONS = [
                 item
             ]);
         }
-    };
+    }, [
+        field,
+        handleDisconnect,
+        props.attribute.relation,
+        props.mainField,
+        props.name,
+        relations,
+        targetModel
+    ]);
     return /*#__PURE__*/ jsxs(Flex, {
         ref: ref,
         direction: "column",
@@ -232,7 +235,7 @@ const ONE_WAY_RELATIONS = [
                 gap: 2,
                 width: "100%",
                 children: [
-                    /*#__PURE__*/ jsx(RelationsInput, {
+                    /*#__PURE__*/ jsx(MemoizedRelationsComboboxInput, {
                         disabled: isDisabled,
                         // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)
                         id: componentUID && component ? componentId ? `${componentId}` : '' : documentId,
@@ -242,7 +245,7 @@ const ONE_WAY_RELATIONS = [
                         isRelatedToCurrentDocument: isRelatedToCurrentDocument,
                         ...props
                     }),
-                    'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsx(TextButton, {
+                    data?.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsx(TextButton, {
                         disabled: isFetchingMoreRelations,
                         onClick: handleLoadMore,
                         loading: isFetchingMoreRelations,
@@ -256,15 +259,15 @@ const ONE_WAY_RELATIONS = [
                     }) : null
                 ]
             }),
-            /*#__PURE__*/ jsx(RelationsList, {
+            /*#__PURE__*/ jsx(MemoizedRelationsList, {
                 data: relations,
-                serverData: data.results,
+                serverData: serverData,
                 disabled: isDisabled,
                 name: props.name,
                 isLoading: isFetchingMoreRelations,
                 relationType: props.attribute.relation,
-                // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-                targetModel: props.attribute.targetModel,
+                targetModel: targetModel,
+                documentParams: currentDocumentMeta.params,
                 mainField: props.mainField
             })
         ]
@@ -317,6 +320,8 @@ const ONE_WAY_RELATIONS = [
     const { currentDocumentMeta } = useDocumentContext('RelationsInput');
     const { formatMessage } = useIntl();
     const field = useField(name);
+    // @ts-expect-error – `targetModel` exists on supported non-morph relations (morph is disabled).
+    const targetModel = props.attribute.targetModel;
     const searchParamsDebounced = useDebounce(searchParams, 300);
     const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();
     /**
@@ -358,7 +363,7 @@ const ONE_WAY_RELATIONS = [
     ]);
     const hasNextPage = data?.pagination ? data.pagination.page < data.pagination.pageCount : false;
     const options = data?.results ?? [];
-    const handleChange = (relationId)=>{
+    const handleChange = React.useCallback((relationId)=>{
         if (!relationId) {
             return;
         }
@@ -376,20 +381,27 @@ const ONE_WAY_RELATIONS = [
             return;
         }
         /**
-     * You need to give this relation a correct _temp_key_ but
-     * this component doesn't know about those ones, you can't rely
-     * on the connect array because that doesn't hold items that haven't
-     * moved. So use a callback to fill in the gaps when connecting.
-     *
-     */ onChange(relation);
-    };
-    const relation = {
-        collectionType: COLLECTION_TYPES,
-        // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-        model: props.attribute.targetModel,
-        documentId: '',
-        params: currentDocumentMeta.params
-    };
+       * You need to give this relation a correct _temp_key_ but
+       * this component doesn't know about those ones, you can't rely
+       * on the connect array because that doesn't hold items that haven't
+       * moved. So use a callback to fill in the gaps when connecting.
+       *
+       */ onChange(relation);
+    }, [
+        formatMessage,
+        onChange,
+        options,
+        toggleNotification
+    ]);
+    const relation = React.useMemo(()=>({
+            collectionType: COLLECTION_TYPES,
+            model: targetModel,
+            documentId: '',
+            params: currentDocumentMeta.params
+        }), [
+        currentDocumentMeta.params,
+        targetModel
+    ]);
     const { permissions = [], isLoading: isLoadingPermissions, error } = useRBAC(PERMISSIONS.map((action)=>({
             action,
             subject: relation.model
@@ -423,7 +435,7 @@ const ONE_WAY_RELATIONS = [
             /*#__PURE__*/ jsx(DocumentRBAC, {
                 permissions: permissions,
                 model: relation.model,
-                children: /*#__PURE__*/ jsx(RelationModalWithContext, {
+                children: /*#__PURE__*/ jsx(MemoizedRelationModalWithContext, {
                     relation: relation,
                     name: name,
                     placeholder: placeholder,
@@ -443,14 +455,13 @@ const ONE_WAY_RELATIONS = [
         ]
     });
 };
+const MemoizedRelationsComboboxInput = /*#__PURE__*/ React.memo(RelationsInput);
 const RelationModalWithContext = ({ relation, name, placeholder, hasNextPage, isLoadingSearchRelations, isLoadingPermissions, handleChange, mainField, setSearchParams, fieldValue, data, ...props })=>{
     const [textValue, setTextValue] = React.useState('');
     const { formatMessage } = useIntl();
     const canCreate = useDocumentRBAC('RelationModalWrapper', (state)=>state.canCreate);
     const fieldRef = useFocusInputField(name);
-    const { componentUID } = useComponent('RelationsField', ({ uid })=>({
-            componentUID: uid
-        }));
+    const componentUID = useComponent('RelationsField', (state)=>state.uid);
     const handleLoadMore = ()=>{
         if (!data || !data.pagination) {
             return;
@@ -562,11 +573,12 @@ const RelationModalWithContext = ({ relation, name, placeholder, hasNextPage, is
             })
     });
 };
+const MemoizedRelationModalWithContext = /*#__PURE__*/ React.memo(RelationModalWithContext);
 /* -------------------------------------------------------------------------------------------------
  * RelationsList
  * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
 const RELATION_GUTTER = 4;
-const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel, mainField })=>{
+const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel, documentParams, mainField })=>{
     const ariaDescriptionId = React.useId();
     const { formatMessage } = useIntl();
     const listRef = React.useRef(null);
@@ -603,38 +615,37 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
         isLoading,
         data.length
     ]);
-    const getItemPos = (index)=>`${index + 1} of ${data.length}`;
-    const handleMoveItem = (newIndex, oldIndex)=>{
+    const handleMoveItem = React.useCallback((newIndex, oldIndex)=>{
         const item = data[oldIndex];
         setLiveText(formatMessage({
             id: getTranslation('dnd.reorder'),
             defaultMessage: '{item}, moved. New position in list: {position}.'
         }, {
             item: item.label ?? item.documentId,
-            position: getItemPos(newIndex)
+            position: `${newIndex + 1} of ${data.length}`
         }));
         /**
-     * Splicing mutates the array, so we need to create a new array
-     */ const newData = [
+       * Splicing mutates the array, so we need to create a new array
+       */ const newData = [
             ...data
         ];
         const currentRow = data[oldIndex];
         const startKey = oldIndex > newIndex ? newData[newIndex - 1]?.__temp_key__ : newData[newIndex]?.__temp_key__;
         const endKey = oldIndex > newIndex ? newData[newIndex]?.__temp_key__ : newData[newIndex + 1]?.__temp_key__;
         /**
-     * We're moving the relation between two other relations, so
-     * we need to generate a new key that keeps the order
-     */ const [newKey] = generateNKeysBetween(startKey, endKey, 1);
+       * We're moving the relation between two other relations, so
+       * we need to generate a new key that keeps the order
+       */ const [newKey] = generateNKeysBetween(startKey, endKey, 1);
         newData.splice(oldIndex, 1);
         newData.splice(newIndex, 0, {
             ...currentRow,
             __temp_key__: newKey
         });
         /**
-     * Now we diff against the server to understand what's different so we
-     * can keep the connect array nice and tidy. It also needs reversing because
-     * we reverse the relations from the server in the first place.
-     */ const connectedRelations = newData.reduce((acc, relation, currentIndex, array)=>{
+       * Now we diff against the server to understand what's different so we
+       * can keep the connect array nice and tidy. It also needs reversing because
+       * we reverse the relations from the server in the first place.
+       */ const connectedRelations = newData.reduce((acc, relation, currentIndex, array)=>{
             const relationOnServer = serverData.find((oldRelation)=>oldRelation.id === relation.id);
             const relationInFront = array[currentIndex + 1];
             if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
@@ -665,28 +676,40 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
             return acc;
         }, []).toReversed();
         field.onChange(`${name}.connect`, connectedRelations);
-    };
-    const handleGrabItem = (index)=>{
+    }, [
+        data,
+        field,
+        formatMessage,
+        name,
+        serverData
+    ]);
+    const handleGrabItem = React.useCallback((index)=>{
         const item = data[index];
         setLiveText(formatMessage({
             id: getTranslation('dnd.grab-item'),
             defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
         }, {
             item: item.label ?? item.documentId,
-            position: getItemPos(index)
+            position: `${index + 1} of ${data.length}`
         }));
-    };
-    const handleDropItem = (index)=>{
+    }, [
+        data,
+        formatMessage
+    ]);
+    const handleDropItem = React.useCallback((index)=>{
         const { href: _href, label, ...item } = data[index];
         setLiveText(formatMessage({
             id: getTranslation('dnd.drop-item'),
             defaultMessage: `{item}, dropped. Final position in list: {position}.`
         }, {
             item: label ?? item.documentId,
-            position: getItemPos(index)
+            position: `${index + 1} of ${data.length}`
         }));
-    };
-    const handleCancel = (index)=>{
+    }, [
+        data,
+        formatMessage
+    ]);
+    const handleCancel = React.useCallback((index)=>{
         const item = data[index];
         setLiveText(formatMessage({
             id: getTranslation('dnd.cancel-item'),
@@ -694,13 +717,45 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
         }, {
             item: item.label ?? item.documentId
         }));
-    };
+    }, [
+        data,
+        formatMessage
+    ]);
     const handleDisconnect = useHandleDisconnect(name, 'RelationsList');
     /**
    * These relation types will only ever have one item
    * in their list, so you can't reorder a single item!
    */ const canReorder = !ONE_WAY_RELATIONS.includes(relationType);
     const dynamicListHeight = data.length > RELATIONS_TO_DISPLAY ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) + RELATION_ITEM_HEIGHT / 2 : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);
+    const itemData = React.useMemo(()=>({
+            ariaDescribedBy: ariaDescriptionId,
+            canDrag: canReorder,
+            disabled,
+            documentParams,
+            handleCancel,
+            handleDropItem,
+            handleGrabItem,
+            handleMoveItem,
+            name,
+            handleDisconnect,
+            relations: data,
+            targetModel,
+            mainField
+        }), [
+        ariaDescriptionId,
+        canReorder,
+        disabled,
+        documentParams,
+        handleCancel,
+        handleDisconnect,
+        handleDropItem,
+        handleGrabItem,
+        handleMoveItem,
+        name,
+        data,
+        targetModel,
+        mainField
+    ]);
     return /*#__PURE__*/ jsxs(ShadowBox, {
         $overflowDirection: overflow,
         children: [
@@ -721,20 +776,7 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                 outerRef: outerListRef,
                 itemCount: data.length,
                 itemSize: RELATION_ITEM_HEIGHT + RELATION_GUTTER,
-                itemData: {
-                    ariaDescribedBy: ariaDescriptionId,
-                    canDrag: canReorder,
-                    disabled,
-                    handleCancel,
-                    handleDropItem,
-                    handleGrabItem,
-                    handleMoveItem,
-                    name,
-                    handleDisconnect,
-                    relations: data,
-                    targetModel,
-                    mainField
-                },
+                itemData: itemData,
                 itemKey: (index)=>data[index].id,
                 innerElementType: "ol",
                 children: ListItem
@@ -742,6 +784,7 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
         ]
     });
 };
+const MemoizedRelationsList = /*#__PURE__*/ React.memo(RelationsList);
 const ShadowBox = styled(Box)`
   position: relative;
   overflow: hidden;
@@ -783,9 +826,8 @@ const RelationRow = styled(Flex)`
   }
 `;
 const ListItem = ({ data, index, style })=>{
-    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel, mainField } = data;
+    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel, documentParams, mainField } = data;
     const isDesktop = useIsDesktop();
-    const { currentDocumentMeta } = useDocumentContext('RelationsField');
     const { formatMessage } = useIntl();
     const { href, id, label: originalLabel, status: originalStatus, documentId, apiData, locale } = relations[index];
     /**
@@ -798,7 +840,7 @@ const ListItem = ({ data, index, style })=>{
         collectionType,
         model: targetModel,
         documentId: documentId ?? apiData?.documentId,
-        params: currentDocumentMeta.params
+        params: documentParams
     }, {
         skip: !isTemporary
     });
@@ -827,19 +869,14 @@ const ListItem = ({ data, index, style })=>{
     ]);
     const safeDocumentId = documentId ?? apiData?.documentId;
     const safeLocale = locale ?? apiData?.locale ?? null;
-    const documentMeta = React.useMemo(()=>({
-            documentId: safeDocumentId,
-            model: targetModel,
-            collectionType: getCollectionType(href),
-            params: {
-                locale: safeLocale
-            }
-        }), [
-        safeDocumentId,
-        href,
-        safeLocale,
-        targetModel
-    ]);
+    const documentMeta = {
+        documentId: safeDocumentId,
+        model: targetModel,
+        collectionType: getCollectionType(href),
+        params: {
+            locale: safeLocale
+        }
+    };
     return /*#__PURE__*/ jsx(Box, {
         style: style,
         tag: "li",