@strapi/content-manager 0.0.0-experimental.6b93a97ac754785f7894c17263d3b4fd5272454a → 0.0.0-experimental.6cc8ff695218d5a391739344d308dfb3683215c1

package/dist/admin/pages/EditView/components/FormInputs/{Relations.mjs → Relations/Relations.mjs}

@@ -1,26 +1,26 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useQueryParams, useForm, useField, useNotification, useFocusInputField } from '@strapi/admin/strapi-admin';
-import { Flex, Box, Link, TextButton, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, useComposedRefs, IconButton, Tooltip } from '@strapi/design-system';
+import { Flex, Box, Link, TextButton, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, useComposedRefs, IconButton } from '@strapi/design-system';
 import { ArrowClockwise, Drag, Cross } from '@strapi/icons';
 import { generateNKeysBetween } from 'fractional-indexing';
 import pipe from 'lodash/fp/pipe';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
 import { styled } from 'styled-components';
-import { COLLECTION_TYPES } from '../../../../constants/collections.mjs';
-import { ItemTypes } from '../../../../constants/dragAndDrop.mjs';
-import { useDebounce } from '../../../../hooks/useDebounce.mjs';
-import { useDoc } from '../../../../hooks/useDocument.mjs';
-import { useDragAndDrop, DROP_SENSITIVITY } from '../../../../hooks/useDragAndDrop.mjs';
-import { useGetRelationsQuery, useLazySearchRelationsQuery } from '../../../../services/relations.mjs';
-import { buildValidParams } from '../../../../utils/api.mjs';
-import { getRelationLabel } from '../../../../utils/relations.mjs';
-import { getTranslation } from '../../../../utils/translations.mjs';
-import { DocumentStatus } from '../DocumentStatus.mjs';
-import { useComponent } from './ComponentContext.mjs';
+import { COLLECTION_TYPES } from '../../../../../constants/collections.mjs';
+import { ItemTypes } from '../../../../../constants/dragAndDrop.mjs';
+import { useDocumentContext } from '../../../../../features/DocumentContext.mjs';
+import { useDebounce } from '../../../../../hooks/useDebounce.mjs';
+import { useDragAndDrop, DROP_SENSITIVITY } from '../../../../../hooks/useDragAndDrop.mjs';
+import { useGetRelationsQuery, useLazySearchRelationsQuery } from '../../../../../services/relations.mjs';
+import { buildValidParams } from '../../../../../utils/api.mjs';
+import { getRelationLabel } from '../../../../../utils/relations.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { DocumentStatus } from '../../DocumentStatus.mjs';
+import { useComponent } from '../ComponentContext.mjs';
+import { RelationModalForm, getCollectionType } from './RelationModal.mjs';
 
 /**
  * Remove a relation, whether it's been already saved or not.
@@ -75,12 +75,17 @@ const ONE_WAY_RELATIONS = [
  * At present we do not expose this to plugin developers, however, they are able to overwrite it themselves should
  * they wish to do so.
  */ const RelationsField = /*#__PURE__*/ React.forwardRef(({ disabled, label, ...props }, ref)=>{
+    const currentDocumentMeta = useDocumentContext('RelationsField', (state)=>state.meta);
+    const currentDocument = useDocumentContext('RelationsField', (state)=>state.document);
+    const rootDocumentMeta = useDocumentContext('RelationsField', (state)=>state.rootDocumentMeta);
     const [currentPage, setCurrentPage] = React.useState(1);
-    const { document, model: documentModel } = useDoc();
-    const documentId = document?.documentId;
+    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
+    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
+    // Use the documentId from the actual document, not the params (meta)
+    const documentId = currentDocument.document?.documentId;
     const { formatMessage } = useIntl();
     const [{ query }] = useQueryParams();
-    const params = buildValidParams(query);
+    const params = documentMeta.params ?? buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes('morph');
     const isDisabled = isMorph || disabled;
     const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
@@ -93,22 +98,29 @@ const ONE_WAY_RELATIONS = [
     }, [
         isSubmitting
     ]);
+    const component = componentUID && currentDocument.components[componentUID];
     /**
      * We'll always have a documentId in a created entry, so we look for a componentId first.
      * Same with `uid` and `documentModel`.
-     */ const id = componentId ? componentId.toString() : documentId;
-    const model = componentUID ?? documentModel;
+     */ const model = component ? component.uid : documentMeta.model;
+    const id = component && componentId ? componentId.toString() : documentId;
     /**
      * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
      * Where the above example would a nested field within two components, however
      * we only require the field on the component not the complete path since we query
      * individual components. Therefore we split the string and take the last item.
      */ const [targetField] = props.name.split('.').slice(-1);
+    const schemaAttributes = component ? component.attributes ?? {} : currentDocument.schema?.attributes ?? {};
+    /**
+     * Confirm the target field is related to the current document.
+     * Since relations can exist in a modal on top of the root document,
+     * we need to ensure we are fetching relations for the correct document (root document vs related document),
+     */ const isRelatedToCurrentDocument = Object.values(schemaAttributes).filter((attribute)=>attribute.type === 'relation' && 'target' in attribute && 'target' in props.attribute && attribute.target === props.attribute.target).length > 0;
     const { data, isLoading, isFetching } = useGetRelationsQuery({
         model,
         targetField,
         // below we don't run the query if there is no id.
-        id: id,
+        id,
         params: {
             ...params,
             pageSize: RELATIONS_TO_DISPLAY,
@@ -116,7 +128,7 @@ const ONE_WAY_RELATIONS = [
         }
     }, {
         refetchOnMountOrArgChange: true,
-        skip: !id,
+        skip: !id || !isRelatedToCurrentDocument,
         selectFromResult: (result)=>{
             return {
                 ...result,
@@ -225,10 +237,11 @@ const ONE_WAY_RELATIONS = [
                     /*#__PURE__*/ jsx(RelationsInput, {
                         disabled: isDisabled,
                         // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)
-                        id: componentUID ? componentId ? `${componentId}` : '' : documentId,
+                        id: componentUID && component ? componentId ? `${componentId}` : '' : documentId,
                         label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`,
                         model: model,
                         onChange: handleConnect,
+                        isRelatedToCurrentDocument: isRelatedToCurrentDocument,
                         ...props
                     }),
                     'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsx(TextButton, {
@@ -251,7 +264,9 @@ const ONE_WAY_RELATIONS = [
                 disabled: isDisabled,
                 name: props.name,
                 isLoading: isFetchingMoreRelations,
-                relationType: props.attribute.relation
+                relationType: props.attribute.relation,
+                // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+                targetModel: props.attribute.targetModel
             })
         ]
     });
@@ -294,7 +309,7 @@ const ONE_WAY_RELATIONS = [
 /**
  * @description Contains all the logic for the combobox that can search
  * for relations and then add them to the field's connect array.
- */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, ...props })=>{
+ */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, isRelatedToCurrentDocument, ...props })=>{
     const [textValue, setTextValue] = React.useState('');
     const [searchParams, setSearchParams] = React.useState({
         _q: '',
@@ -302,6 +317,10 @@ const ONE_WAY_RELATIONS = [
     });
     const { toggleNotification } = useNotification();
     const [{ query }] = useQueryParams();
+    const currentDocumentMeta = useDocumentContext('RelationsInput', (state)=>state.meta);
+    const rootDocumentMeta = useDocumentContext('RelationsInput', (state)=>state.rootDocumentMeta);
+    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
+    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
     const { formatMessage } = useIntl();
     const fieldRef = useFocusInputField(name);
     const field = useField(name);
@@ -319,11 +338,14 @@ const ONE_WAY_RELATIONS = [
      * we only require the field on the component not the complete path since we query
      * individual components. Therefore we split the string and take the last item.
      */ const [targetField] = name.split('.').slice(-1);
+        // Return early if there is no relation to the document
+        if (!isRelatedToCurrentDocument) return;
+        const params = documentMeta.params ?? buildValidParams(query);
         searchForTrigger({
             model,
             targetField,
             params: {
-                ...buildValidParams(query),
+                ...params,
                 id: id ?? '',
                 pageSize: 10,
                 idsToInclude: field.value?.disconnect?.map((rel)=>rel.id.toString()) ?? [],
@@ -339,7 +361,9 @@ const ONE_WAY_RELATIONS = [
         name,
         query,
         searchForTrigger,
-        searchParamsDebounced
+        searchParamsDebounced,
+        isRelatedToCurrentDocument,
+        documentMeta
     ]);
     const handleSearch = async (search)=>{
         setSearchParams((s)=>({
@@ -461,7 +485,7 @@ const ONE_WAY_RELATIONS = [
  * RelationsList
  * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
 const RELATION_GUTTER = 4;
-const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType })=>{
+const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel })=>{
     const ariaDescriptionId = React.useId();
     const { formatMessage } = useIntl();
     const listRef = React.useRef(null);
@@ -545,8 +569,8 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                     ...{
                         apiData: {
                             id: relation.id,
-                            documentId: relation.documentId,
-                            locale: relation.locale,
+                            documentId: relation.documentId ?? relation.apiData?.documentId ?? '',
+                            locale: relation.locale || relation.apiData?.locale,
                             position
                         }
                     }
@@ -625,7 +649,8 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                     handleMoveItem,
                     name,
                     handleDisconnect,
-                    relations: data
+                    relations: data,
+                    targetModel
                 },
                 itemKey: (index)=>data[index].id,
                 innerElementType: "ol",
@@ -666,9 +691,9 @@ const ShadowBox = styled(Box)`
   }
 `;
 const ListItem = ({ data, index, style })=>{
-    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations } = data;
+    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel } = data;
     const { formatMessage } = useIntl();
-    const { href, id, label, status } = relations[index];
+    const { href, id, label, status, documentId, apiData, locale } = relations[index];
     const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(canDrag && !disabled, {
         type: `${ItemTypes.RELATION}_${name}`,
         index,
@@ -735,18 +760,16 @@ const ListItem = ({ data, index, style })=>{
                                     paddingTop: 1,
                                     paddingBottom: 1,
                                     paddingRight: 4,
-                                    children: /*#__PURE__*/ jsx(Tooltip, {
-                                        description: label,
-                                        children: href ? /*#__PURE__*/ jsx(LinkEllipsis, {
-                                            tag: NavLink,
-                                            to: href,
-                                            isExternal: false,
-                                            children: label
-                                        }) : /*#__PURE__*/ jsx(Typography, {
-                                            textColor: disabled ? 'neutral600' : 'primary600',
-                                            ellipsis: true,
-                                            children: label
-                                        })
+                                    children: /*#__PURE__*/ jsx(RelationModalForm, {
+                                        triggerButtonLabel: label,
+                                        relation: {
+                                            documentId: documentId ?? apiData?.documentId,
+                                            model: targetModel,
+                                            collectionType: getCollectionType(href),
+                                            params: {
+                                                locale: locale || apiData?.locale || null
+                                            }
+                                        }
                                     })
                                 }),
                                 status ? /*#__PURE__*/ jsx(DocumentStatus, {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Relations.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Relations/Relations.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type InputProps,\n  useField,\n  useForm,\n  useNotification,\n  useFocusInputField,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Combobox,\n  ComboboxOption,\n  Flex,\n  IconButton,\n  TextButton,\n  Typography,\n  VisuallyHidden,\n  useComposedRefs,\n  Link,\n  Field,\n  FlexComponent,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Cross, Drag, ArrowClockwise } from '@strapi/icons';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { FixedSizeList, ListChildComponentProps } from 'react-window';\nimport { styled } from 'styled-components';\n\nimport { RelationDragPreviewProps } from '../../../../../components/DragPreviews/RelationDragPreview';\nimport { COLLECTION_TYPES } from '../../../../../constants/collections';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../features/DocumentContext';\nimport { useDebounce } from '../../../../../hooks/useDebounce';\nimport { type EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport {\n  DROP_SENSITIVITY,\n  UseDragAndDropOptions,\n  useDragAndDrop,\n} from '../../../../../hooks/useDragAndDrop';\nimport {\n  useGetRelationsQuery,\n  useLazySearchRelationsQuery,\n  RelationResult,\n} from '../../../../../services/relations';\nimport { buildValidParams } from '../../../../../utils/api';\nimport { getRelationLabel } from '../../../../../utils/relations';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { DocumentStatus } from '../../DocumentStatus';\nimport { useComponent } from '../ComponentContext';\nimport { RelationModalForm, getCollectionType } from '../Relations/RelationModal';\n\nimport type { Schema } from '@strapi/types';\n\n/**\n * Remove a relation, whether it's been already saved or not.\n * It's used both in RelationsList, where the \"remove relation\" button is, and in the input,\n * because we sometimes need to remove a previous relation when selecting a new one.\n */\nfunction useHandleDisconnect(fieldName: string, consumerName: string) {\n  const field = useField(fieldName);\n  const removeFieldRow = useForm(consumerName, (state) => state.removeFieldRow);\n  const addFieldRow = useForm(consumerName, (state) => state.addFieldRow);\n\n  const handleDisconnect: ListItemProps['data']['handleDisconnect'] = (relation) => {\n    if (field.value && field.value.connect) {\n      /**\n       * A relation will exist in the `connect` array _if_ it has\n       * been added without saving. In this case, we just remove it\n       * from the connect array\n       */\n      const indexOfRelationInConnectArray = field.value.connect.findIndex(\n        (rel: NonNullable<RelationsFormValue['connect']>[number]) => rel.id === relation.id\n      );\n\n      if (indexOfRelationInConnectArray >= 0) {\n        removeFieldRow(`${fieldName}.connect`, indexOfRelationInConnectArray);\n        return;\n      }\n    }\n\n    addFieldRow(`${fieldName}.disconnect`, {\n      id: relation.id,\n      apiData: {\n        id: relation.id,\n        documentId: relation.documentId,\n        locale: relation.locale,\n      },\n    });\n  };\n\n  return handleDisconnect;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * RelationsField\n * -----------------------------------------------------------------------------------------------*/\n\nconst RELATIONS_TO_DISPLAY = 5;\nconst ONE_WAY_RELATIONS = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'];\n\ntype RelationPosition =\n  | (Pick<RelationResult, 'status' | 'locale'> & {\n      before: string;\n      end?: never;\n    })\n  | { end: boolean; before?: never; status?: never; locale?: never };\n\ninterface Relation extends Pick<RelationResult, 'documentId' | 'id' | 'locale' | 'status'> {\n  href: string;\n  label: string;\n  position?: RelationPosition;\n  __temp_key__: string;\n  apiData?: {\n    documentId: RelationResult['documentId'];\n    id: RelationResult['id'];\n    locale?: RelationResult['locale'];\n    position: RelationPosition;\n  };\n}\n\ninterface RelationsFieldProps\n  extends Omit<Extract<EditFieldLayout, { type: 'relation' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'> {}\n\nexport interface RelationsFormValue {\n  connect?: Relation[];\n  disconnect?: Pick<Relation, 'id'>[];\n}\n\n/**\n * TODO: we get a rather ugly flash when we remove a single relation from the list leaving\n * no other relations when we press save. The initial relation re-renders, probably because\n * of the lag in the Form cleaning it's \"disconnect\" array, whilst our data has not been invalidated.\n *\n * Could we invalidate relation data on the document actions? Should we?\n */\n\n/**\n * @internal\n * @description The relations field holds a lot of domain logic for handling relations which is rather complicated\n * At present we do not expose this to plugin developers, however, they are able to overwrite it themselves should\n * they wish to do so.\n */\nconst RelationsField = React.forwardRef<HTMLDivElement, RelationsFieldProps>(\n  ({ disabled, label, ...props }, ref) => {\n    const currentDocumentMeta = useDocumentContext('RelationsField', (state) => state.meta);\n    const currentDocument = useDocumentContext('RelationsField', (state) => state.document);\n    const rootDocumentMeta = useDocumentContext(\n      'RelationsField',\n      (state) => state.rootDocumentMeta\n    );\n\n    const [currentPage, setCurrentPage] = React.useState(1);\n    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;\n    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;\n\n    // Use the documentId from the actual document, not the params (meta)\n    const documentId = currentDocument.document?.documentId;\n\n    const { formatMessage } = useIntl();\n\n    const [{ query }] = useQueryParams();\n    const params = documentMeta.params ?? buildValidParams(query);\n\n    const isMorph = props.attribute.relation.toLowerCase().includes('morph');\n    const isDisabled = isMorph || disabled;\n\n    const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id }) => ({\n      componentId: id,\n      componentUID: uid,\n    }));\n\n    const isSubmitting = useForm('RelationsList', (state) => state.isSubmitting);\n\n    React.useEffect(() => {\n      setCurrentPage(1);\n    }, [isSubmitting]);\n\n    const component = componentUID && currentDocument.components[componentUID];\n    /**\n     * We'll always have a documentId in a created entry, so we look for a componentId first.\n     * Same with `uid` and `documentModel`.\n     */\n    const model = component ? component.uid : documentMeta.model;\n    const id = component && componentId ? componentId.toString() : documentId;\n\n    /**\n     * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.\n     * Where the above example would a nested field within two components, however\n     * we only require the field on the component not the complete path since we query\n     * individual components. Therefore we split the string and take the last item.\n     */\n    const [targetField] = props.name.split('.').slice(-1);\n\n    const schemaAttributes = component\n      ? (component.attributes ?? {})\n      : (currentDocument.schema?.attributes ?? {});\n\n    /**\n     * Confirm the target field is related to the current document.\n     * Since relations can exist in a modal on top of the root document,\n     * we need to ensure we are fetching relations for the correct document (root document vs related document),\n     */\n    const isRelatedToCurrentDocument =\n      Object.values(schemaAttributes).filter(\n        (attribute) =>\n          attribute.type === 'relation' &&\n          'target' in attribute &&\n          'target' in props.attribute &&\n          attribute.target === props.attribute.target\n      ).length > 0;\n\n    const { data, isLoading, isFetching } = useGetRelationsQuery(\n      {\n        model,\n        targetField,\n        // below we don't run the query if there is no id.\n        id,\n        params: {\n          ...params,\n          pageSize: RELATIONS_TO_DISPLAY,\n          page: currentPage,\n        },\n      },\n      {\n        refetchOnMountOrArgChange: true,\n        skip: !id || !isRelatedToCurrentDocument,\n        selectFromResult: (result) => {\n          return {\n            ...result,\n            data: {\n              ...result.data,\n              results: result.data?.results ? result.data.results : [],\n            },\n          };\n        },\n      }\n    );\n\n    const handleLoadMore = () => {\n      setCurrentPage((prev) => prev + 1);\n    };\n\n    const field = useField(props.name);\n\n    const isFetchingMoreRelations = isLoading || isFetching;\n\n    const realServerRelationsCount =\n      'pagination' in data && data.pagination ? data.pagination.total : 0;\n\n    /**\n     * Items that are already connected, but reordered would be in\n     * this list, so to get an accurate figure, we remove them.\n     */\n    const relationsConnected =\n      (field.value?.connect ?? []).filter(\n        (rel: Relation) => data.results.findIndex((relation) => relation.id === rel.id) === -1\n      ).length ?? 0;\n    const relationsDisconnected = field.value?.disconnect?.length ?? 0;\n\n    const relationsCount = realServerRelationsCount + relationsConnected - relationsDisconnected;\n\n    /**\n     * This is it, the source of truth for reordering in conjunction with partial loading & updating\n     * of relations. Relations on load are given __temp_key__ when fetched, because we don't want to\n     * create brand new keys everytime the data updates, just keep adding them onto the newly loaded ones.\n     */\n    const relations = React.useMemo(() => {\n      const ctx = {\n        field: field.value,\n        // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.\n        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}`,\n        mainField: props.mainField,\n      };\n\n      /**\n       * Tidy up our data.\n       */\n      const transformations = pipe(\n        removeConnected(ctx),\n        removeDisconnected(ctx),\n        addLabelAndHref(ctx)\n      );\n\n      const transformedRels = transformations([...data.results]);\n\n      /**\n       * THIS IS CRUCIAL. If you don't sort by the __temp_key__ which comes from fractional indexing\n       * then the list will be in the wrong order.\n       */\n      return [...transformedRels, ...(field.value?.connect ?? [])].sort((a, b) => {\n        if (a.__temp_key__ < b.__temp_key__) return -1;\n        if (a.__temp_key__ > b.__temp_key__) return 1;\n        return 0;\n      });\n    }, [\n      data.results,\n      field.value,\n      // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.\n      props.attribute.targetModel,\n      props.mainField,\n    ]);\n\n    const handleDisconnect = useHandleDisconnect(props.name, 'RelationsField');\n\n    const handleConnect: RelationsInputProps['onChange'] = (relation) => {\n      const [lastItemInList] = relations.slice(-1);\n\n      const item = {\n        id: relation.id,\n        apiData: {\n          id: relation.id,\n          documentId: relation.documentId,\n          locale: relation.locale,\n        },\n        status: relation.status,\n        /**\n         * If there's a last item, that's the first key we use to generate out next one.\n         */\n        __temp_key__: generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],\n        // Fallback to `id` if there is no `mainField` value, which will overwrite the above `id` property with the exact same data.\n        [props.mainField?.name ?? 'documentId']: relation[props.mainField?.name ?? 'documentId'],\n        label: getRelationLabel(relation, props.mainField),\n        // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.\n        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`,\n      };\n\n      if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {\n        // Remove any existing relation so they can be replaced with the new one\n        field.value?.connect?.forEach(handleDisconnect);\n        relations.forEach(handleDisconnect);\n\n        field.onChange(`${props.name}.connect`, [item]);\n      } else {\n        field.onChange(`${props.name}.connect`, [...(field.value?.connect ?? []), item]);\n      }\n    };\n\n    return (\n      <Flex\n        ref={ref}\n        direction=\"column\"\n        gap={3}\n        justifyContent=\"space-between\"\n        alignItems=\"stretch\"\n        wrap=\"wrap\"\n      >\n        <StyledFlex direction=\"column\" alignItems=\"start\" gap={2} width=\"100%\">\n          <RelationsInput\n            disabled={isDisabled}\n            // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)\n            id={componentUID && component ? (componentId ? `${componentId}` : '') : documentId}\n            label={`${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`}\n            model={model}\n            onChange={handleConnect}\n            isRelatedToCurrentDocument={isRelatedToCurrentDocument}\n            {...props}\n          />\n          {'pagination' in data &&\n          data.pagination &&\n          data.pagination.pageCount > data.pagination.page ? (\n            <TextButton\n              disabled={isFetchingMoreRelations}\n              onClick={handleLoadMore}\n              loading={isFetchingMoreRelations}\n              startIcon={<ArrowClockwise />}\n              // prevent the label from line-wrapping\n              shrink={0}\n            >\n              {formatMessage({\n                id: getTranslation('relation.loadMore'),\n                defaultMessage: 'Load More',\n              })}\n            </TextButton>\n          ) : null}\n        </StyledFlex>\n        <RelationsList\n          data={relations}\n          serverData={data.results}\n          disabled={isDisabled}\n          name={props.name}\n          isLoading={isFetchingMoreRelations}\n          relationType={props.attribute.relation}\n          // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.\n          targetModel={props.attribute.targetModel}\n        />\n      </Flex>\n    );\n  }\n);\n\n/**\n * TODO: this can be removed once we stop shipping Inputs with\n * labels wrapped round in DS@2.\n */\nconst StyledFlex = styled<FlexComponent>(Flex)`\n  & > div {\n    width: 100%;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Relation Transformations\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TransformationContext extends Pick<RelationsFieldProps, 'mainField'> {\n  field?: RelationsFormValue;\n  href: string;\n}\n\n/**\n * If it's in the connected array, it can get out of our data array,\n * we'll be putting it back in later and sorting it anyway.\n */\nconst removeConnected =\n  ({ field }: TransformationContext) =>\n  (relations: RelationResult[]) => {\n    return relations.filter((relation) => {\n      const connectedRelations = field?.connect ?? [];\n\n      return connectedRelations.findIndex((rel) => rel.id === relation.id) === -1;\n    });\n  };\n\n/**\n * @description Removes relations that are in the `disconnect` array of the field\n */\nconst removeDisconnected =\n  ({ field }: TransformationContext) =>\n  (relations: RelationResult[]): RelationResult[] =>\n    relations.filter((relation) => {\n      const disconnectedRelations = field?.disconnect ?? [];\n\n      return disconnectedRelations.findIndex((rel) => rel.id === relation.id) === -1;\n    });\n\n/**\n * @description Adds a label and href to the relation object we use this to render\n * a better UI where we can link to the relation and display a human-readable label.\n */\nconst addLabelAndHref =\n  ({ mainField, href }: TransformationContext) =>\n  (relations: RelationResult[]): Relation[] =>\n    relations.map((relation) => {\n      return {\n        ...relation,\n        // Fallback to `id` if there is no `mainField` value, which will overwrite the above `documentId` property with the exact same data.\n        [mainField?.name ?? 'documentId']: relation[mainField?.name ?? 'documentId'],\n        label: getRelationLabel(relation, mainField),\n        href: `${href}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`,\n      };\n    });\n\n/* -------------------------------------------------------------------------------------------------\n * RelationsInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationsInputProps extends Omit<RelationsFieldProps, 'type'> {\n  id?: string;\n  model: string;\n  isRelatedToCurrentDocument: boolean;\n  onChange: (\n    relation: Pick<RelationResult, 'documentId' | 'id' | 'locale' | 'status'> & {\n      [key: string]: any;\n    }\n  ) => void;\n}\n\n/**\n * @description Contains all the logic for the combobox that can search\n * for relations and then add them to the field's connect array.\n */\nconst RelationsInput = ({\n  hint,\n  id,\n  model,\n  label,\n  labelAction,\n  name,\n  mainField,\n  placeholder,\n  required,\n  unique: _unique,\n  'aria-label': _ariaLabel,\n  onChange,\n  isRelatedToCurrentDocument,\n  ...props\n}: RelationsInputProps) => {\n  const [textValue, setTextValue] = React.useState<string | undefined>('');\n  const [searchParams, setSearchParams] = React.useState({\n    _q: '',\n    page: 1,\n  });\n  const { toggleNotification } = useNotification();\n  const [{ query }] = useQueryParams();\n  const currentDocumentMeta = useDocumentContext('RelationsInput', (state) => state.meta);\n  const rootDocumentMeta = useDocumentContext('RelationsInput', (state) => state.rootDocumentMeta);\n  const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;\n  const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;\n\n  const { formatMessage } = useIntl();\n  const fieldRef = useFocusInputField<HTMLInputElement>(name);\n  const field = useField<RelationsFormValue>(name);\n\n  const searchParamsDebounced = useDebounce(searchParams, 300);\n  const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();\n\n  /**\n   * Because we're using a lazy query, we need to trigger the search\n   * when the component mounts and when the search params change.\n   * We also need to trigger the search when the field value changes\n   * so that we can filter out the relations that are already connected.\n   */\n  React.useEffect(() => {\n    /**\n     * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.\n     * Where the above example would a nested field within two components, however\n     * we only require the field on the component not the complete path since we query\n     * individual components. Therefore we split the string and take the last item.\n     */\n    const [targetField] = name.split('.').slice(-1);\n\n    // Return early if there is no relation to the document\n    if (!isRelatedToCurrentDocument) return;\n\n    const params = documentMeta.params ?? buildValidParams(query);\n\n    searchForTrigger({\n      model,\n      targetField,\n      params: {\n        ...params,\n        id: id ?? '',\n        pageSize: 10,\n        idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [],\n        idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [],\n        ...searchParamsDebounced,\n      },\n    });\n  }, [\n    field.value?.connect,\n    field.value?.disconnect,\n    id,\n    model,\n    name,\n    query,\n    searchForTrigger,\n    searchParamsDebounced,\n    isRelatedToCurrentDocument,\n    documentMeta,\n  ]);\n\n  const handleSearch = async (search: string) => {\n    setSearchParams((s) => ({ ...s, _q: search, page: 1 }));\n  };\n\n  const hasNextPage = data?.pagination ? data.pagination.page < data.pagination.pageCount : false;\n\n  const options = data?.results ?? [];\n\n  const handleChange = (relationId?: string) => {\n    if (!relationId) {\n      return;\n    }\n\n    const relation = options.find((opt) => opt.id.toString() === relationId);\n\n    if (!relation) {\n      // This is very unlikely to happen, but it ensures we don't have any data for.\n      console.error(\n        \"You've tried to add a relation with an id that does not exist in the options you can see, this is likely a bug with Strapi. Please open an issue.\"\n      );\n\n      toggleNotification({\n        message: formatMessage({\n          id: getTranslation('relation.error-adding-relation'),\n          defaultMessage: 'An error occurred while trying to add the relation.',\n        }),\n        type: 'danger',\n      });\n\n      return;\n    }\n\n    /**\n     * You need to give this relation a correct _temp_key_ but\n     * this component doesn't know about those ones, you can't rely\n     * on the connect array because that doesn't hold items that haven't\n     * moved. So use a callback to fill in the gaps when connecting.\n     *\n     */\n    onChange(relation);\n  };\n\n  const handleLoadMore = () => {\n    if (!data || !data.pagination) {\n      return;\n    } else if (data.pagination.page < data.pagination.pageCount) {\n      setSearchParams((s) => ({ ...s, page: s.page + 1 }));\n    }\n  };\n\n  React.useLayoutEffect(() => {\n    setTextValue('');\n  }, [field.value]);\n\n  return (\n    <Field.Root error={field.error} hint={hint} name={name} required={required}>\n      <Field.Label action={labelAction}>{label}</Field.Label>\n      <Combobox\n        ref={fieldRef}\n        name={name}\n        autocomplete=\"list\"\n        placeholder={\n          placeholder ||\n          formatMessage({\n            id: getTranslation('relation.add'),\n            defaultMessage: 'Add relation',\n          })\n        }\n        hasMoreItems={hasNextPage}\n        loading={isLoading}\n        onOpenChange={() => {\n          handleSearch(textValue ?? '');\n        }}\n        noOptionsMessage={() =>\n          formatMessage({\n            id: getTranslation('relation.notAvailable'),\n            defaultMessage: 'No relations available',\n          })\n        }\n        loadingMessage={formatMessage({\n          id: getTranslation('relation.isLoading'),\n          defaultMessage: 'Relations are loading',\n        })}\n        onLoadMore={handleLoadMore}\n        textValue={textValue}\n        onChange={handleChange}\n        onTextValueChange={(text) => {\n          setTextValue(text);\n        }}\n        onInputChange={(event) => {\n          handleSearch(event.currentTarget.value);\n        }}\n        {...props}\n      >\n        {options.map((opt) => {\n          const textValue = getRelationLabel(opt, mainField);\n\n          return (\n            <ComboboxOption key={opt.id} value={opt.id.toString()} textValue={textValue}>\n              <Flex gap={2} justifyContent=\"space-between\">\n                <Typography ellipsis>{textValue}</Typography>\n                {opt.status ? <DocumentStatus status={opt.status} /> : null}\n              </Flex>\n            </ComboboxOption>\n          );\n        })}\n      </Combobox>\n      <Field.Error />\n      <Field.Hint />\n    </Field.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationsList\n * -----------------------------------------------------------------------------------------------*/\nconst RELATION_ITEM_HEIGHT = 50;\nconst RELATION_GUTTER = 4;\n\ninterface RelationsListProps extends Pick<RelationsFieldProps, 'disabled' | 'name'> {\n  data: Relation[];\n  isLoading?: boolean;\n  relationType: Schema.Attribute.RelationKind.Any;\n  /**\n   * The existing relations connected on the server. We need these to diff against.\n   */\n  serverData: RelationResult[];\n  targetModel: string;\n}\n\nconst RelationsList = ({\n  data,\n  serverData,\n  disabled,\n  name,\n  isLoading,\n  relationType,\n  targetModel,\n}: RelationsListProps) => {\n  const ariaDescriptionId = React.useId();\n  const { formatMessage } = useIntl();\n  const listRef = React.useRef<FixedSizeList>(null);\n  const outerListRef = React.useRef<HTMLUListElement>(null);\n  const [overflow, setOverflow] = React.useState<'top' | 'bottom' | 'top-bottom'>();\n  const [liveText, setLiveText] = React.useState('');\n  const field = useField(name);\n\n  React.useEffect(() => {\n    if (data.length <= RELATIONS_TO_DISPLAY) {\n      return setOverflow(undefined);\n    }\n\n    const handleNativeScroll = (e: Event) => {\n      const el = e.target as HTMLUListElement;\n      const parentScrollContainerHeight = (el.parentNode as HTMLDivElement).scrollHeight;\n      const maxScrollBottom = el.scrollHeight - el.scrollTop;\n\n      if (el.scrollTop === 0) {\n        return setOverflow('bottom');\n      }\n\n      if (maxScrollBottom === parentScrollContainerHeight) {\n        return setOverflow('top');\n      }\n\n      return setOverflow('top-bottom');\n    };\n\n    const outerListRefCurrent = outerListRef?.current;\n\n    if (!isLoading && data.length > 0 && outerListRefCurrent) {\n      outerListRef.current.addEventListener('scroll', handleNativeScroll);\n    }\n\n    return () => {\n      if (outerListRefCurrent) {\n        outerListRefCurrent.removeEventListener('scroll', handleNativeScroll);\n      }\n    };\n  }, [isLoading, data.length]);\n\n  const getItemPos = (index: number) => `${index + 1} of ${data.length}`;\n\n  const handleMoveItem: UseDragAndDropOptions['onMoveItem'] = (newIndex, oldIndex) => {\n    const item = data[oldIndex];\n\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.reorder'),\n          defaultMessage: '{item}, moved. New position in list: {position}.',\n        },\n        {\n          item: item.label ?? item.documentId,\n          position: getItemPos(newIndex),\n        }\n      )\n    );\n\n    /**\n     * Splicing mutates the array, so we need to create a new array\n     */\n    const newData = [...data];\n    const currentRow = data[oldIndex];\n\n    const startKey =\n      oldIndex > newIndex ? newData[newIndex - 1]?.__temp_key__ : newData[newIndex]?.__temp_key__;\n    const endKey =\n      oldIndex > newIndex ? newData[newIndex]?.__temp_key__ : newData[newIndex + 1]?.__temp_key__;\n\n    /**\n     * We're moving the relation between two other relations, so\n     * we need to generate a new key that keeps the order\n     */\n    const [newKey] = generateNKeysBetween(startKey, endKey, 1);\n\n    newData.splice(oldIndex, 1);\n    newData.splice(newIndex, 0, { ...currentRow, __temp_key__: newKey });\n\n    /**\n     * Now we diff against the server to understand what's different so we\n     * can keep the connect array nice and tidy. It also needs reversing because\n     * we reverse the relations from the server in the first place.\n     */\n    const connectedRelations = newData\n      .reduce<Relation[]>((acc, relation, currentIndex, array) => {\n        const relationOnServer = serverData.find((oldRelation) => oldRelation.id === relation.id);\n\n        const relationInFront = array[currentIndex + 1];\n\n        if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {\n          const position = relationInFront\n            ? {\n                before: relationInFront.documentId,\n                locale: relationInFront.locale,\n                status:\n                  'publishedAt' in relationInFront && relationInFront.publishedAt\n                    ? ('published' as Relation['status'])\n                    : ('draft' as Relation['status']),\n              }\n            : { end: true };\n\n          const relationWithPosition: Relation = {\n            ...relation,\n            ...{\n              apiData: {\n                id: relation.id,\n                documentId: relation.documentId ?? relation.apiData?.documentId ?? '',\n                locale: relation.locale || relation.apiData?.locale,\n                position,\n              },\n            },\n          };\n\n          return [...acc, relationWithPosition];\n        }\n\n        return acc;\n      }, [])\n      .toReversed();\n\n    field.onChange(`${name}.connect`, connectedRelations);\n  };\n\n  const handleGrabItem: UseDragAndDropOptions['onGrabItem'] = (index) => {\n    const item = data[index];\n\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.grab-item'),\n          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n        },\n        {\n          item: item.label ?? item.documentId,\n          position: getItemPos(index),\n        }\n      )\n    );\n  };\n\n  const handleDropItem: UseDragAndDropOptions['onDropItem'] = (index) => {\n    const { href: _href, label, ...item } = data[index];\n\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.drop-item'),\n          defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n        },\n        {\n          item: label ?? item.documentId,\n          position: getItemPos(index),\n        }\n      )\n    );\n  };\n\n  const handleCancel: UseDragAndDropOptions['onCancel'] = (index) => {\n    const item = data[index];\n\n    setLiveText(\n      formatMessage(\n        {\n          id: getTranslation('dnd.cancel-item'),\n          defaultMessage: '{item}, dropped. Re-order cancelled.',\n        },\n        {\n          item: item.label ?? item.documentId,\n        }\n      )\n    );\n  };\n\n  const handleDisconnect = useHandleDisconnect(name, 'RelationsList');\n\n  /**\n   * These relation types will only ever have one item\n   * in their list, so you can't reorder a single item!\n   */\n  const canReorder = !ONE_WAY_RELATIONS.includes(relationType);\n\n  const dynamicListHeight =\n    data.length > RELATIONS_TO_DISPLAY\n      ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) +\n        RELATION_ITEM_HEIGHT / 2\n      : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);\n\n  return (\n    <ShadowBox $overflowDirection={overflow}>\n      <VisuallyHidden id={ariaDescriptionId}>\n        {formatMessage({\n          id: getTranslation('dnd.instructions'),\n          defaultMessage: `Press spacebar to grab and re-order`,\n        })}\n      </VisuallyHidden>\n      <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n      {/* @ts-expect-error – width is expected, but we've not needed to pass it before. */}\n      <FixedSizeList\n        height={dynamicListHeight}\n        ref={listRef}\n        outerRef={outerListRef}\n        itemCount={data.length}\n        itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}\n        itemData={{\n          ariaDescribedBy: ariaDescriptionId,\n          canDrag: canReorder,\n          disabled,\n          handleCancel,\n          handleDropItem,\n          handleGrabItem,\n          handleMoveItem,\n          name,\n          handleDisconnect,\n          relations: data,\n          targetModel,\n        }}\n        itemKey={(index) => data[index].id}\n        innerElementType=\"ol\"\n      >\n        {ListItem}\n      </FixedSizeList>\n    </ShadowBox>\n  );\n};\n\nconst ShadowBox = styled<BoxComponent>(Box)<{\n  $overflowDirection?: 'top-bottom' | 'top' | 'bottom';\n}>`\n  position: relative;\n  overflow: hidden;\n  flex: 1;\n\n  &:before,\n  &:after {\n    position: absolute;\n    width: 100%;\n    height: 4px;\n    z-index: 1;\n  }\n\n  &:before {\n    /* TODO: as for DS Table component we would need this to be handled by the DS theme */\n    content: '';\n    background: linear-gradient(rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);\n    top: 0;\n    opacity: ${({ $overflowDirection }) =>\n      $overflowDirection === 'top-bottom' || $overflowDirection === 'top' ? 1 : 0};\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:after {\n    /* TODO: as for DS Table component we would need this to be handled by the DS theme */\n    content: '';\n    background: linear-gradient(0deg, rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);\n    bottom: 0;\n    opacity: ${({ $overflowDirection }) =>\n      $overflowDirection === 'top-bottom' || $overflowDirection === 'bottom' ? 1 : 0};\n    transition: opacity 0.2s ease-in-out;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * ListItem\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ListItemProps extends Pick<ListChildComponentProps, 'style' | 'index'> {\n  data: {\n    ariaDescribedBy: string;\n    canDrag?: boolean;\n    disabled?: boolean;\n    handleCancel: UseDragAndDropOptions['onCancel'];\n    handleDropItem: UseDragAndDropOptions['onDropItem'];\n    handleGrabItem: UseDragAndDropOptions['onGrabItem'];\n    handleMoveItem: UseDragAndDropOptions['onMoveItem'];\n    handleDisconnect: (relation: Relation) => void;\n    name: string;\n    relations: Relation[];\n    targetModel: string;\n  };\n}\n\nconst ListItem = ({ data, index, style }: ListItemProps) => {\n  const {\n    ariaDescribedBy,\n    canDrag = false,\n    disabled = false,\n    handleCancel,\n    handleDisconnect,\n    handleDropItem,\n    handleGrabItem,\n    handleMoveItem,\n    name,\n    relations,\n    targetModel,\n  } = data;\n\n  const { formatMessage } = useIntl();\n\n  const { href, id, label, status, documentId, apiData, locale } = relations[index];\n\n  const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop<number, Omit<RelationDragPreviewProps, 'width'>, HTMLDivElement>(\n      canDrag && !disabled,\n      {\n        type: `${ItemTypes.RELATION}_${name}`,\n        index,\n        item: {\n          displayedValue: label,\n          status,\n          id: id,\n          index,\n        },\n        onMoveItem: handleMoveItem,\n        onDropItem: handleDropItem,\n        onGrabItem: handleGrabItem,\n        onCancel: handleCancel,\n        dropSensitivity: DROP_SENSITIVITY.REGULAR,\n      }\n    );\n\n  const composedRefs = useComposedRefs<HTMLDivElement>(relationRef, dragRef);\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage());\n  }, [dragPreviewRef]);\n\n  return (\n    <Box\n      style={style}\n      tag=\"li\"\n      ref={dropRef}\n      aria-describedby={ariaDescribedBy}\n      cursor={canDrag ? 'all-scroll' : 'default'}\n    >\n      {isDragging ? (\n        <RelationItemPlaceholder />\n      ) : (\n        <Flex\n          paddingTop={2}\n          paddingBottom={2}\n          paddingLeft={canDrag ? 2 : 4}\n          paddingRight={4}\n          hasRadius\n          borderColor=\"neutral200\"\n          background={disabled ? 'neutral150' : 'neutral0'}\n          justifyContent=\"space-between\"\n          ref={composedRefs}\n          data-handler-id={handlerId}\n        >\n          <FlexWrapper gap={1}>\n            {canDrag ? (\n              <IconButton\n                tag=\"div\"\n                role=\"button\"\n                tabIndex={0}\n                withTooltip={false}\n                label={formatMessage({\n                  id: getTranslation('components.RelationInput.icon-button-aria-label'),\n                  defaultMessage: 'Drag',\n                })}\n                variant=\"ghost\"\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n              >\n                <Drag />\n              </IconButton>\n            ) : null}\n            <Flex width=\"100%\" minWidth={0} justifyContent=\"space-between\">\n              <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>\n                <RelationModalForm\n                  triggerButtonLabel={label}\n                  relation={{\n                    documentId: documentId ?? apiData?.documentId,\n                    model: targetModel,\n                    collectionType: getCollectionType(href)!,\n                    params: {\n                      locale: locale || apiData?.locale || null,\n                    },\n                  }}\n                />\n              </Box>\n              {status ? <DocumentStatus status={status} /> : null}\n            </Flex>\n          </FlexWrapper>\n          <Box paddingLeft={4}>\n            <IconButton\n              onClick={() => handleDisconnect(relations[index])}\n              disabled={disabled}\n              label={formatMessage({\n                id: getTranslation('relation.disconnect'),\n                defaultMessage: 'Remove',\n              })}\n              variant=\"ghost\"\n              size=\"S\"\n            >\n              <Cross />\n            </IconButton>\n          </Box>\n        </Flex>\n      )}\n    </Box>\n  );\n};\n\nconst FlexWrapper = styled<FlexComponent>(Flex)`\n  width: 100%;\n  /* Used to prevent endAction to be pushed out of container */\n  min-width: 0;\n\n  & > div[role='button'] {\n    cursor: all-scroll;\n  }\n`;\n\nconst DisconnectButton = styled.button`\n  svg path {\n    fill: ${({ theme, disabled }) =>\n      disabled ? theme.colors.neutral600 : theme.colors.neutral500};\n  }\n\n  &:hover svg path,\n  &:focus svg path {\n    fill: ${({ theme, disabled }) => !disabled && theme.colors.neutral600};\n  }\n`;\n\nconst LinkEllipsis = styled(Link)`\n  display: block;\n\n  & > span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n  }\n`;\n\nconst RelationItemPlaceholder = () => (\n  <Box\n    paddingTop={2}\n    paddingBottom={2}\n    paddingLeft={4}\n    paddingRight={4}\n    hasRadius\n    borderStyle=\"dashed\"\n    borderColor=\"primary600\"\n    borderWidth=\"1px\"\n    background=\"primary100\"\n    height={`calc(100% - ${RELATION_GUTTER}px)`}\n  />\n);\n\nconst MemoizedRelationsField = React.memo(RelationsField);\n\nexport { MemoizedRelationsField as RelationsInput, FlexWrapper, DisconnectButton, LinkEllipsis };\nexport type { RelationsFieldProps };\n"],"names":["useHandleDisconnect","fieldName","consumerName","field","useField","removeFieldRow","useForm","state","addFieldRow","handleDisconnect","relation","value","connect","indexOfRelationInConnectArray","findIndex","rel","id","apiData","documentId","locale","RELATIONS_TO_DISPLAY","ONE_WAY_RELATIONS","RelationsField","React","forwardRef","disabled","label","props","ref","currentDocumentMeta","useDocumentContext","meta","currentDocument","document","rootDocumentMeta","currentPage","setCurrentPage","useState","isRootDocument","documentMeta","formatMessage","useIntl","query","useQueryParams","params","buildValidParams","isMorph","attribute","toLowerCase","includes","isDisabled","componentId","componentUID","useComponent","uid","isSubmitting","useEffect","component","components","model","toString","targetField","name","split","slice","schemaAttributes","attributes","schema","isRelatedToCurrentDocument","Object","values","filter","type","target","length","data","isLoading","isFetching","useGetRelationsQuery","pageSize","page","refetchOnMountOrArgChange","skip","selectFromResult","result","results","handleLoadMore","prev","isFetchingMoreRelations","realServerRelationsCount","pagination","total","relationsConnected","relationsDisconnected","disconnect","relationsCount","relations","useMemo","ctx","href","COLLECTION_TYPES","targetModel","mainField","transformations","pipe","removeConnected","removeDisconnected","addLabelAndHref","transformedRels","sort","a","b","__temp_key__","handleConnect","lastItemInList","item","status","generateNKeysBetween","getRelationLabel","forEach","onChange","_jsxs","Flex","direction","gap","justifyContent","alignItems","wrap","StyledFlex","width","_jsx","RelationsInput","pageCount","TextButton","onClick","loading","startIcon","ArrowClockwise","shrink","getTranslation","defaultMessage","RelationsList","serverData","relationType","styled","connectedRelations","disconnectedRelations","map","hint","labelAction","placeholder","required","unique","_unique","_ariaLabel","textValue","setTextValue","searchParams","setSearchParams","_q","toggleNotification","useNotification","fieldRef","useFocusInputField","searchParamsDebounced","useDebounce","searchForTrigger","useLazySearchRelationsQuery","idsToInclude","idsToOmit","handleSearch","search","s","hasNextPage","options","handleChange","relationId","find","opt","console","error","message","useLayoutEffect","Field","Root","Label","action","Combobox","autocomplete","hasMoreItems","onOpenChange","noOptionsMessage","loadingMessage","onLoadMore","onTextValueChange","text","onInputChange","event","currentTarget","ComboboxOption","Typography","ellipsis","DocumentStatus","Error","Hint","RELATION_ITEM_HEIGHT","RELATION_GUTTER","ariaDescriptionId","useId","listRef","useRef","outerListRef","overflow","setOverflow","liveText","setLiveText","undefined","handleNativeScroll","e","el","parentScrollContainerHeight","parentNode","scrollHeight","maxScrollBottom","scrollTop","outerListRefCurrent","current","addEventListener","removeEventListener","getItemPos","index","handleMoveItem","newIndex","oldIndex","position","newData","currentRow","startKey","endKey","newKey","splice","reduce","acc","currentIndex","array","relationOnServer","oldRelation","relationInFront","before","publishedAt","end","relationWithPosition","toReversed","handleGrabItem","handleDropItem","_href","handleCancel","canReorder","dynamicListHeight","Math","min","ShadowBox","$overflowDirection","VisuallyHidden","aria-live","FixedSizeList","height","outerRef","itemCount","itemSize","itemData","ariaDescribedBy","canDrag","itemKey","innerElementType","ListItem","Box","style","handlerId","isDragging","handleKeyDown","relationRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","ItemTypes","RELATION","displayedValue","onMoveItem","onDropItem","onGrabItem","onCancel","dropSensitivity","DROP_SENSITIVITY","REGULAR","composedRefs","useComposedRefs","getEmptyImage","tag","aria-describedby","cursor","RelationItemPlaceholder","paddingTop","paddingBottom","paddingLeft","paddingRight","hasRadius","borderColor","background","data-handler-id","FlexWrapper","IconButton","role","tabIndex","withTooltip","variant","onKeyDown","Drag","minWidth","RelationModalForm","triggerButtonLabel","collectionType","getCollectionType","size","Cross","DisconnectButton","button","theme","colors","neutral600","neutral500","LinkEllipsis","Link","borderStyle","borderWidth","MemoizedRelationsField","memo"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormLayout.js

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
-var useDocument = require('../../../hooks/useDocument.js');
 var InputRenderer = require('./InputRenderer.js');
 
 const RESPONSIVE_CONTAINER_BREAKPOINTS = {
@@ -13,16 +12,22 @@ const RESPONSIVE_CONTAINER_BREAKPOINTS = {
 const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
   container-type: inline-size;
 `;
-const ResponsiveGridItem = styledComponents.styled(designSystem.Grid.Item)`
-  grid-column: span 12;
-
-  @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
-    ${({ col })=>col && `grid-column: span ${col};`}
-  }
-`;
-const FormLayout = ({ layout, hasBackground = false })=>{
+const ResponsiveGridItem = /**
+   * TODO:
+   * JSDOM cannot handle container queries.
+   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+   * for failing to parse the stylesheet.
+   */ process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Grid.Item)`
+        grid-column: span 12;
+        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+          ${({ col })=>col && `grid-column: span ${col};`}
+        }
+      ` : styledComponents.styled(designSystem.Grid.Item)`
+        grid-column: span 12;
+      `;
+const FormLayout = ({ layout, document, hasBackground = true })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const { model } = useDocument.useDoc();
+    const model = document.schema?.modelName;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
         direction: "column",
         alignItems: "stretch",
@@ -47,13 +52,14 @@ const FormLayout = ({ layout, hasBackground = false })=>{
                         direction: "column",
                         alignItems: "stretch",
                         children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
-                            ...fieldWithTranslatedLabel
+                            ...fieldWithTranslatedLabel,
+                            document: document
                         })
                     })
                 }, field.name);
             }
             return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                ...!hasBackground && {
+                ...hasBackground && {
                     padding: 6,
                     borderColor: 'neutral150',
                     background: 'neutral0',
@@ -81,7 +87,8 @@ const FormLayout = ({ layout, hasBackground = false })=>{
                                     direction: "column",
                                     alignItems: "stretch",
                                     children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
-                                        ...fieldWithTranslatedLabel
+                                        ...fieldWithTranslatedLabel,
+                                        document: document
                                     })
                                 }, field.name);
                             })

package/dist/admin/pages/EditView/components/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import { Box, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nexport const RESPONSIVE_CONTAINER_BREAKPOINTS = {\n  sm: '27.5rem', // 440px\n};\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem = styled(Grid.Item)`\n  grid-column: span 12;\n\n  @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {\n    ${({ col }) => col && `grid-column: span ${col};`}\n  }\n`;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n}\n\nconst FormLayout = ({ layout, hasBackground = false }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const { model } = useDoc();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n      {layout.map((panel, index) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n\n          const fieldWithTranslatedLabel = {\n            ...field,\n            label: formatMessage({\n              id: `content-manager.content-types.${model}.${field.name}`,\n              defaultMessage: field.label,\n            }),\n          };\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer {...fieldWithTranslatedLabel} />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box\n            key={index}\n            {...(!hasBackground && {\n              padding: 6,\n              borderColor: 'neutral150',\n              background: 'neutral0',\n              hasRadius: true,\n              shadow: 'tableShadow',\n            })}\n          >\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n              {panel.map((row, gridRowIndex) => (\n                <ResponsiveGridRoot key={gridRowIndex} gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.content-types.${model}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={field.name}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        <InputRenderer {...fieldWithTranslatedLabel} />\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              ))}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["RESPONSIVE_CONTAINER_BREAKPOINTS","sm","ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","Item","col","FormLayout","layout","hasBackground","formatMessage","useIntl","model","useDoc","_jsx","Flex","direction","alignItems","gap","map","panel","index","some","row","field","type","fieldWithTranslatedLabel","label","id","name","defaultMessage","s","xs","InputRenderer","Box","padding","borderColor","background","hasRadius","shadow","gridRowIndex","size"],"mappings":"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"}
+{"version":3,"file":"FormLayout.js","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import { Box, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\nexport const RESPONSIVE_CONTAINER_BREAKPOINTS = {\n  sm: '27.5rem', // 440px\n};\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  model?: string;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = ({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const model = document.schema?.modelName;\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n      {layout.map((panel, index) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n\n          const fieldWithTranslatedLabel = {\n            ...field,\n            label: formatMessage({\n              id: `content-manager.content-types.${model}.${field.name}`,\n              defaultMessage: field.label,\n            }),\n          };\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer {...fieldWithTranslatedLabel} document={document} />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box\n            key={index}\n            {...(hasBackground && {\n              padding: 6,\n              borderColor: 'neutral150',\n              background: 'neutral0',\n              hasRadius: true,\n              shadow: 'tableShadow',\n            })}\n          >\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n              {panel.map((row, gridRowIndex) => (\n                <ResponsiveGridRoot key={gridRowIndex} gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.content-types.${model}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={field.name}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        <InputRenderer {...fieldWithTranslatedLabel} document={document} />\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              ))}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["RESPONSIVE_CONTAINER_BREAKPOINTS","sm","ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","col","FormLayout","layout","document","hasBackground","formatMessage","useIntl","model","schema","modelName","_jsx","Flex","direction","alignItems","gap","map","panel","index","some","row","field","type","fieldWithTranslatedLabel","label","id","name","defaultMessage","s","xs","InputRenderer","Box","padding","borderColor","background","hasRadius","shadow","gridRowIndex","size"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormLayout.mjs

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import { Grid, Flex, Box } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
-import { useDoc } from '../../../hooks/useDocument.mjs';
 import { InputRenderer as MemoizedInputRenderer } from './InputRenderer.mjs';
 
 const RESPONSIVE_CONTAINER_BREAKPOINTS = {
@@ -11,16 +10,22 @@ const RESPONSIVE_CONTAINER_BREAKPOINTS = {
 const ResponsiveGridRoot = styled(Grid.Root)`
   container-type: inline-size;
 `;
-const ResponsiveGridItem = styled(Grid.Item)`
-  grid-column: span 12;
-
-  @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
-    ${({ col })=>col && `grid-column: span ${col};`}
-  }
-`;
-const FormLayout = ({ layout, hasBackground = false })=>{
+const ResponsiveGridItem = /**
+   * TODO:
+   * JSDOM cannot handle container queries.
+   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+   * for failing to parse the stylesheet.
+   */ process.env.NODE_ENV !== 'test' ? styled(Grid.Item)`
+        grid-column: span 12;
+        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+          ${({ col })=>col && `grid-column: span ${col};`}
+        }
+      ` : styled(Grid.Item)`
+        grid-column: span 12;
+      `;
+const FormLayout = ({ layout, document, hasBackground = true })=>{
     const { formatMessage } = useIntl();
-    const { model } = useDoc();
+    const model = document.schema?.modelName;
     return /*#__PURE__*/ jsx(Flex, {
         direction: "column",
         alignItems: "stretch",
@@ -45,13 +50,14 @@ const FormLayout = ({ layout, hasBackground = false })=>{
                         direction: "column",
                         alignItems: "stretch",
                         children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
-                            ...fieldWithTranslatedLabel
+                            ...fieldWithTranslatedLabel,
+                            document: document
                         })
                     })
                 }, field.name);
             }
             return /*#__PURE__*/ jsx(Box, {
-                ...!hasBackground && {
+                ...hasBackground && {
                     padding: 6,
                     borderColor: 'neutral150',
                     background: 'neutral0',
@@ -79,7 +85,8 @@ const FormLayout = ({ layout, hasBackground = false })=>{
                                     direction: "column",
                                     alignItems: "stretch",
                                     children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
-                                        ...fieldWithTranslatedLabel
+                                        ...fieldWithTranslatedLabel,
+                                        document: document
                                     })
                                 }, field.name);
                             })