@strapi/content-manager 5.37.1 → 5.38.1

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

@@ -53,13 +53,13 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
     const field = strapiAdmin.useField(fieldName);
     const removeFieldRow = strapiAdmin.useForm(consumerName, (state)=>state.removeFieldRow);
     const addFieldRow = strapiAdmin.useForm(consumerName, (state)=>state.addFieldRow);
-    const handleDisconnect = (relation)=>{
+    const handleDisconnect = React__namespace.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;
@@ -73,7 +73,12 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
                 locale: relation.locale
             }
         });
-    };
+    }, [
+        addFieldRow,
+        field.value,
+        fieldName,
+        removeFieldRow
+    ]);
     return handleDisconnect;
 }
 /* -------------------------------------------------------------------------------------------------
@@ -86,6 +91,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
@@ -105,10 +111,10 @@ const ONE_WAY_RELATIONS = [
     const { formatMessage } = reactIntl.useIntl();
     const isMorph = props.attribute.relation.toLowerCase().includes('morph');
     const isDisabled = isMorph || disabled;
-    const { componentId, componentUID } = ComponentContext.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 = ComponentContext.useComponent('RelationsField', (state)=>state.id);
+    const componentUID = ComponentContext.useComponent('RelationsField', (state)=>state.uid);
     const isSubmitting = strapiAdmin.useForm('RelationsList', (state)=>state.isSubmitting);
     React__namespace.useEffect(()=>{
         setCurrentPage(1);
@@ -146,27 +152,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 = strapiAdmin.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;
     /**
@@ -176,15 +174,14 @@ const ONE_WAY_RELATIONS = [
      */ const relations$2 = React__namespace.useMemo(()=>{
         const ctx = {
             field: field.value,
-            // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-            href: `../${collections.COLLECTION_TYPES}/${props.attribute.targetModel}`,
+            href: `../${collections.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
@@ -198,14 +195,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__namespace.useCallback((relation)=>{
         const [lastItemInList] = relations$2.slice(-1);
         const item = {
             id: relation.id,
@@ -217,13 +213,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__: fractionalIndexing.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__: fractionalIndexing.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: relations$1.getRelationLabel(relation, props.mainField),
-            // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
-            href: `../${collections.COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
+            href: `../${collections.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
@@ -238,7 +233,15 @@ const ONE_WAY_RELATIONS = [
                 item
             ]);
         }
-    };
+    }, [
+        field,
+        handleDisconnect,
+        props.attribute.relation,
+        props.mainField,
+        props.name,
+        relations$2,
+        targetModel
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         ref: ref,
         direction: "column",
@@ -253,7 +256,7 @@ const ONE_WAY_RELATIONS = [
                 gap: 2,
                 width: "100%",
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(RelationsInput, {
+                    /*#__PURE__*/ jsxRuntime.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,
@@ -263,7 +266,7 @@ const ONE_WAY_RELATIONS = [
                         isRelatedToCurrentDocument: isRelatedToCurrentDocument,
                         ...props
                     }),
-                    'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                    data?.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
                         disabled: isFetchingMoreRelations,
                         onClick: handleLoadMore,
                         loading: isFetchingMoreRelations,
@@ -277,15 +280,15 @@ const ONE_WAY_RELATIONS = [
                     }) : null
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(RelationsList, {
+            /*#__PURE__*/ jsxRuntime.jsx(MemoizedRelationsList, {
                 data: relations$2,
-                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
             })
         ]
@@ -338,6 +341,8 @@ const ONE_WAY_RELATIONS = [
     const { currentDocumentMeta } = useDocumentContext.useDocumentContext('RelationsInput');
     const { formatMessage } = reactIntl.useIntl();
     const field = strapiAdmin.useField(name);
+    // @ts-expect-error – `targetModel` exists on supported non-morph relations (morph is disabled).
+    const targetModel = props.attribute.targetModel;
     const searchParamsDebounced = useDebounce.useDebounce(searchParams, 300);
     const [searchForTrigger, { data, isLoading }] = relations.useLazySearchRelationsQuery();
     /**
@@ -379,7 +384,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__namespace.useCallback((relationId)=>{
         if (!relationId) {
             return;
         }
@@ -397,20 +402,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: collections.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__namespace.useMemo(()=>({
+            collectionType: collections.COLLECTION_TYPES,
+            model: targetModel,
+            documentId: '',
+            params: currentDocumentMeta.params
+        }), [
+        currentDocumentMeta.params,
+        targetModel
+    ]);
     const { permissions = [], isLoading: isLoadingPermissions, error } = strapiAdmin.useRBAC(plugin.PERMISSIONS.map((action)=>({
             action,
             subject: relation.model
@@ -444,7 +456,7 @@ const ONE_WAY_RELATIONS = [
             /*#__PURE__*/ jsxRuntime.jsx(DocumentRBAC.DocumentRBAC, {
                 permissions: permissions,
                 model: relation.model,
-                children: /*#__PURE__*/ jsxRuntime.jsx(RelationModalWithContext, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(MemoizedRelationModalWithContext, {
                     relation: relation,
                     name: name,
                     placeholder: placeholder,
@@ -464,14 +476,13 @@ const ONE_WAY_RELATIONS = [
         ]
     });
 };
+const MemoizedRelationsComboboxInput = /*#__PURE__*/ React__namespace.memo(RelationsInput);
 const RelationModalWithContext = ({ relation, name, placeholder, hasNextPage, isLoadingSearchRelations, isLoadingPermissions, handleChange, mainField, setSearchParams, fieldValue, data, ...props })=>{
     const [textValue, setTextValue] = React__namespace.useState('');
     const { formatMessage } = reactIntl.useIntl();
     const canCreate = DocumentRBAC.useDocumentRBAC('RelationModalWrapper', (state)=>state.canCreate);
     const fieldRef = strapiAdmin.useFocusInputField(name);
-    const { componentUID } = ComponentContext.useComponent('RelationsField', ({ uid })=>({
-            componentUID: uid
-        }));
+    const componentUID = ComponentContext.useComponent('RelationsField', (state)=>state.uid);
     const handleLoadMore = ()=>{
         if (!data || !data.pagination) {
             return;
@@ -583,11 +594,12 @@ const RelationModalWithContext = ({ relation, name, placeholder, hasNextPage, is
             })
     });
 };
+const MemoizedRelationModalWithContext = /*#__PURE__*/ React__namespace.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__namespace.useId();
     const { formatMessage } = reactIntl.useIntl();
     const listRef = React__namespace.useRef(null);
@@ -624,38 +636,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__namespace.useCallback((newIndex, oldIndex)=>{
         const item = data[oldIndex];
         setLiveText(formatMessage({
             id: translations.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] = fractionalIndexing.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] = fractionalIndexing.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__) {
@@ -686,28 +697,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__namespace.useCallback((index)=>{
         const item = data[index];
         setLiveText(formatMessage({
             id: translations.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__namespace.useCallback((index)=>{
         const { href: _href, label, ...item } = data[index];
         setLiveText(formatMessage({
             id: translations.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__namespace.useCallback((index)=>{
         const item = data[index];
         setLiveText(formatMessage({
             id: translations.getTranslation('dnd.cancel-item'),
@@ -715,13 +738,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__namespace.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__*/ jsxRuntime.jsxs(ShadowBox, {
         $overflowDirection: overflow,
         children: [
@@ -742,20 +797,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
@@ -763,6 +805,7 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
         ]
     });
 };
+const MemoizedRelationsList = /*#__PURE__*/ React__namespace.memo(RelationsList);
 const ShadowBox = styledComponents.styled(designSystem.Box)`
   position: relative;
   overflow: hidden;
@@ -804,9 +847,8 @@ const RelationRow = styledComponents.styled(designSystem.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 = strapiAdmin.useIsDesktop();
-    const { currentDocumentMeta } = useDocumentContext.useDocumentContext('RelationsField');
     const { formatMessage } = reactIntl.useIntl();
     const { href, id, label: originalLabel, status: originalStatus, documentId, apiData, locale } = relations[index];
     /**
@@ -819,7 +861,7 @@ const ListItem = ({ data, index, style })=>{
         collectionType,
         model: targetModel,
         documentId: documentId ?? apiData?.documentId,
-        params: currentDocumentMeta.params
+        params: documentParams
     }, {
         skip: !isTemporary
     });
@@ -848,19 +890,14 @@ const ListItem = ({ data, index, style })=>{
     ]);
     const safeDocumentId = documentId ?? apiData?.documentId;
     const safeLocale = locale ?? apiData?.locale ?? null;
-    const documentMeta = React__namespace.useMemo(()=>({
-            documentId: safeDocumentId,
-            model: targetModel,
-            collectionType: RelationModal.getCollectionType(href),
-            params: {
-                locale: safeLocale
-            }
-        }), [
-        safeDocumentId,
-        href,
-        safeLocale,
-        targetModel
-    ]);
+    const documentMeta = {
+        documentId: safeDocumentId,
+        model: targetModel,
+        collectionType: RelationModal.getCollectionType(href),
+        params: {
+            locale: safeLocale
+        }
+    };
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
         style: style,
         tag: "li",