@strapi/content-manager 0.0.0-experimental.dd3311938ac827f1fa8560c8840a9a394f5896c0 → 0.0.0-experimental.de2b94258659463e5ddc5992e9a9490d66d950dd

package/dist/_chunks/{NoPermissionsPage-CO2MK200.js → NoPermissionsPage-BoI2rU68.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const strapiAdmin = require("@strapi/admin/strapi-admin");
 const reactIntl = require("react-intl");
-const index = require("./index-BZoNZMXL.js");
+const index = require("./index-BsMu2oVP.js");
 const NoPermissions = () => {
   const { formatMessage } = reactIntl.useIntl();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -20,4 +20,4 @@ const NoPermissions = () => {
   ] });
 };
 exports.NoPermissions = NoPermissions;
-//# sourceMappingURL=NoPermissionsPage-CO2MK200.js.map
+//# sourceMappingURL=NoPermissionsPage-BoI2rU68.js.map

package/dist/_chunks/{NoPermissionsPage-CO2MK200.js.map → NoPermissionsPage-BoI2rU68.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NoPermissionsPage-CO2MK200.js","sources":["../../admin/src/pages/NoPermissionsPage.tsx"],"sourcesContent":["import { Page, Layouts } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../utils/translations';\n\nconst NoPermissions = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <Layouts.Header\n        title={formatMessage({\n          id: getTranslation('header.name'),\n          defaultMessage: 'Content',\n        })}\n      />\n      <Layouts.Content>\n        <Page.NoPermissions />\n      </Layouts.Content>\n    </>\n  );\n};\n\nexport { NoPermissions };\n"],"names":["useIntl","jsxs","Fragment","jsx","Layouts","getTranslation","Page"],"mappings":";;;;;;AAKA,MAAM,gBAAgB,MAAM;AACpB,QAAA,EAAE,kBAAkBA,UAAAA;AAE1B,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,YAAAA,QAAQ;AAAA,MAAR;AAAA,QACC,OAAO,cAAc;AAAA,UACnB,IAAIC,qBAAe,aAAa;AAAA,UAChC,gBAAgB;AAAA,QAAA,CACjB;AAAA,MAAA;AAAA,IACH;AAAA,IACAF,+BAACC,YAAAA,QAAQ,SAAR,EACC,yCAACE,iBAAK,eAAL,CAAmB,CAAA,GACtB;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"NoPermissionsPage-BoI2rU68.js","sources":["../../admin/src/pages/NoPermissionsPage.tsx"],"sourcesContent":["import { Page, Layouts } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../utils/translations';\n\nconst NoPermissions = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <Layouts.Header\n        title={formatMessage({\n          id: getTranslation('header.name'),\n          defaultMessage: 'Content',\n        })}\n      />\n      <Layouts.Content>\n        <Page.NoPermissions />\n      </Layouts.Content>\n    </>\n  );\n};\n\nexport { NoPermissions };\n"],"names":["useIntl","jsxs","Fragment","jsx","Layouts","getTranslation","Page"],"mappings":";;;;;;AAKA,MAAM,gBAAgB,MAAM;AACpB,QAAA,EAAE,kBAAkBA,UAAAA;AAE1B,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,YAAAA,QAAQ;AAAA,MAAR;AAAA,QACC,OAAO,cAAc;AAAA,UACnB,IAAIC,qBAAe,aAAa;AAAA,UAChC,gBAAgB;AAAA,QAAA,CACjB;AAAA,MAAA;AAAA,IACH;AAAA,IACAF,+BAACC,YAAAA,QAAQ,SAAR,EACC,yCAACE,iBAAK,eAAL,CAAmB,CAAA,GACtB;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

package/dist/_chunks/{NoPermissionsPage-fOIkQM0v.mjs → NoPermissionsPage-Km0Vk5Wp.mjs}

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Layouts, Page } from "@strapi/admin/strapi-admin";
 import { useIntl } from "react-intl";
-import { g as getTranslation } from "./index-Drt2DN7v.mjs";
+import { g as getTranslation } from "./index-DcQ6xogO.mjs";
 const NoPermissions = () => {
   const { formatMessage } = useIntl();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -20,4 +20,4 @@ const NoPermissions = () => {
 export {
   NoPermissions
 };
-//# sourceMappingURL=NoPermissionsPage-fOIkQM0v.mjs.map
+//# sourceMappingURL=NoPermissionsPage-Km0Vk5Wp.mjs.map

package/dist/_chunks/{NoPermissionsPage-fOIkQM0v.mjs.map → NoPermissionsPage-Km0Vk5Wp.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NoPermissionsPage-fOIkQM0v.mjs","sources":["../../admin/src/pages/NoPermissionsPage.tsx"],"sourcesContent":["import { Page, Layouts } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../utils/translations';\n\nconst NoPermissions = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <Layouts.Header\n        title={formatMessage({\n          id: getTranslation('header.name'),\n          defaultMessage: 'Content',\n        })}\n      />\n      <Layouts.Content>\n        <Page.NoPermissions />\n      </Layouts.Content>\n    </>\n  );\n};\n\nexport { NoPermissions };\n"],"names":[],"mappings":";;;;AAKA,MAAM,gBAAgB,MAAM;AACpB,QAAA,EAAE,kBAAkB;AAE1B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,OAAO,cAAc;AAAA,UACnB,IAAI,eAAe,aAAa;AAAA,UAChC,gBAAgB;AAAA,QAAA,CACjB;AAAA,MAAA;AAAA,IACH;AAAA,IACA,oBAAC,QAAQ,SAAR,EACC,8BAAC,KAAK,eAAL,CAAmB,CAAA,GACtB;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"NoPermissionsPage-Km0Vk5Wp.mjs","sources":["../../admin/src/pages/NoPermissionsPage.tsx"],"sourcesContent":["import { Page, Layouts } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../utils/translations';\n\nconst NoPermissions = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <Layouts.Header\n        title={formatMessage({\n          id: getTranslation('header.name'),\n          defaultMessage: 'Content',\n        })}\n      />\n      <Layouts.Content>\n        <Page.NoPermissions />\n      </Layouts.Content>\n    </>\n  );\n};\n\nexport { NoPermissions };\n"],"names":[],"mappings":";;;;AAKA,MAAM,gBAAgB,MAAM;AACpB,QAAA,EAAE,kBAAkB;AAE1B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,OAAO,cAAc;AAAA,UACnB,IAAI,eAAe,aAAa;AAAA,UAChC,gBAAgB;AAAA,QAAA,CACjB;AAAA,MAAA;AAAA,IACH;AAAA,IACA,oBAAC,QAAQ,SAAR,EACC,8BAAC,KAAK,eAAL,CAAmB,CAAA,GACtB;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/_chunks/{Relations-BDRl99Ux.mjs → Relations-C_bpmSuQ.mjs}

@@ -10,15 +10,39 @@ import { useIntl } from "react-intl";
 import { NavLink } from "react-router-dom";
 import { FixedSizeList } from "react-window";
 import { styled } from "styled-components";
-import { c as useDoc, d as buildValidParams, C as COLLECTION_TYPES, g as getTranslation, D as DocumentStatus } from "./index-Drt2DN7v.mjs";
+import { c as useDoc, d as buildValidParams, C as COLLECTION_TYPES, g as getTranslation, D as DocumentStatus } from "./index-DcQ6xogO.mjs";
 import { u as useDragAndDrop, I as ItemTypes, D as DROP_SENSITIVITY } from "./useDragAndDrop-DdHgKsqq.mjs";
-import { u as useGetRelationsQuery, g as getRelationLabel, a as useLazySearchRelationsQuery } from "./relations-D26zVRdi.mjs";
+import { u as useGetRelationsQuery, g as getRelationLabel, a as useLazySearchRelationsQuery } from "./relations-DMG453Od.mjs";
 const [ComponentProvider, useComponent] = createContext("ComponentContext", {
   id: void 0,
   level: -1,
   uid: void 0,
   type: void 0
 });
+function useHandleDisconnect(fieldName, consumerName) {
+  const field = useField(fieldName);
+  const removeFieldRow = useForm(consumerName, (state) => state.removeFieldRow);
+  const addFieldRow = useForm(consumerName, (state) => state.addFieldRow);
+  const handleDisconnect = (relation) => {
+    if (field.value && field.value.connect) {
+      const indexOfRelationInConnectArray = field.value.connect.findIndex(
+        (rel) => rel.id === relation.id
+      );
+      if (indexOfRelationInConnectArray >= 0) {
+        removeFieldRow(`${fieldName}.connect`, indexOfRelationInConnectArray);
+        return;
+      }
+    }
+    addFieldRow(`${fieldName}.disconnect`, {
+      id: relation.id,
+      apiData: {
+        documentId: relation.documentId,
+        locale: relation.locale
+      }
+    });
+  };
+  return handleDisconnect;
+}
 const RELATIONS_TO_DISPLAY = 5;
 const ONE_WAY_RELATIONS = ["oneWay", "oneToOne", "manyToOne", "oneToManyMorph", "oneToOneMorph"];
 const RelationsField = React.forwardRef(
@@ -31,9 +55,12 @@ const RelationsField = React.forwardRef(
     const params = buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes("morph");
     const isDisabled = isMorph || disabled;
-    const { id: componentId, uid } = useComponent("RelationsField", ({ uid: uid2, id: id2 }) => ({ id: id2, uid: uid2 }));
+    const { componentId, componentUID } = useComponent("RelationsField", ({ uid, id: id2 }) => ({
+      componentId: id2,
+      componentUID: uid
+    }));
     const id = componentId ? componentId.toString() : documentId;
-    const model = uid ?? documentModel;
+    const model = componentUID ?? documentModel;
     const [targetField] = props.name.split(".").slice(-1);
     const { data, isLoading, isFetching } = useGetRelationsQuery(
       {
@@ -99,10 +126,15 @@ const RelationsField = React.forwardRef(
       props.attribute.targetModel,
       props.mainField
     ]);
+    const handleDisconnect = useHandleDisconnect(props.name, "RelationsField");
     const handleConnect = (relation) => {
       const [lastItemInList] = relations.slice(-1);
       const item = {
         id: relation.id,
+        apiData: {
+          documentId: relation.documentId,
+          locale: relation.locale
+        },
         status: relation.status,
         /**
          * If there's a last item, that's the first key we use to generate out next one.
@@ -112,9 +144,11 @@ const RelationsField = React.forwardRef(
         [props.mainField?.name ?? "documentId"]: relation[props.mainField?.name ?? "documentId"],
         label: getRelationLabel(relation, props.mainField),
         // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
-        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}`
+        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ""}`
       };
       if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
+        field.value?.connect?.forEach(handleDisconnect);
+        relations.forEach(handleDisconnect);
         field.onChange(`${props.name}.connect`, [item]);
       } else {
         field.onChange(`${props.name}.connect`, [...field.value?.connect ?? [], item]);
@@ -135,7 +169,7 @@ const RelationsField = React.forwardRef(
               RelationsInput,
               {
                 disabled: isDisabled,
-                id,
+                id: componentUID ? componentId ? `${componentId}` : "" : documentId,
                 label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ""}`,
                 model,
                 onChange: handleConnect,
@@ -194,7 +228,7 @@ const addLabelAndHref = ({ mainField, href }) => (relations) => relations.map((r
     // Fallback to `id` if there is no `mainField` value, which will overwrite the above `documentId` property with the exact same data.
     [mainField?.name ?? "documentId"]: relation[mainField?.name ?? "documentId"],
     label: getRelationLabel(relation, mainField),
-    href: `${href}/${relation.documentId}`
+    href: `${href}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ""}`
   };
 });
 const RelationsInput = ({
@@ -289,7 +323,7 @@ const RelationsInput = ({
       {
         ref: fieldRef,
         name,
-        autocomplete: "none",
+        autocomplete: "list",
         placeholder: placeholder || formatMessage({
           id: getTranslation("relation.add"),
           defaultMessage: "Add relation"
@@ -347,8 +381,6 @@ const RelationsList = ({
   const [overflow, setOverflow] = React.useState();
   const [liveText, setLiveText] = React.useState("");
   const field = useField(name);
-  const removeFieldRow = useForm("RelationsList", (state) => state.removeFieldRow);
-  const addFieldRow = useForm("RelationsList", (state) => state.addFieldRow);
   React.useEffect(() => {
     if (data.length <= RELATIONS_TO_DISPLAY) {
       return setOverflow(void 0);
@@ -459,18 +491,7 @@ const RelationsList = ({
       )
     );
   };
-  const handleDisconnect = (relation) => {
-    if (field.value && field.value.connect) {
-      const indexOfRelationInConnectArray = field.value.connect.findIndex(
-        (rel) => rel.id === relation.id
-      );
-      if (indexOfRelationInConnectArray >= 0) {
-        removeFieldRow(`${name}.connect`, indexOfRelationInConnectArray);
-        return;
-      }
-    }
-    addFieldRow(`${name}.disconnect`, { id: relation.id });
-  };
+  const handleDisconnect = useHandleDisconnect(name, "RelationsList");
   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);
   return /* @__PURE__ */ jsxs(ShadowBox, { $overflowDirection: overflow, children: [
@@ -608,7 +629,7 @@ const ListItem = ({ data, index, style }) => {
                     id: getTranslation("components.RelationInput.icon-button-aria-label"),
                     defaultMessage: "Drag"
                   }),
-                  borderWidth: 0,
+                  variant: "ghost",
                   onKeyDown: handleKeyDown,
                   disabled,
                   children: /* @__PURE__ */ jsx(Drag, {})
@@ -620,16 +641,17 @@ const ListItem = ({ data, index, style }) => {
               ] })
             ] }),
             /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(
-              DisconnectButton,
+              IconButton,
               {
-                disabled,
-                type: "button",
                 onClick: () => handleDisconnect(relations[index]),
-                "aria-label": formatMessage({
+                disabled,
+                label: formatMessage({
                   id: getTranslation("relation.disconnect"),
                   defaultMessage: "Remove"
                 }),
-                children: /* @__PURE__ */ jsx(Cross, { width: "12px" })
+                variant: "ghost",
+                size: "S",
+                children: /* @__PURE__ */ jsx(Cross, {})
               }
             ) })
           ]
@@ -691,4 +713,4 @@ export {
   MemoizedRelationsField as M,
   useComponent as u
 };
-//# sourceMappingURL=Relations-BDRl99Ux.mjs.map
+//# sourceMappingURL=Relations-C_bpmSuQ.mjs.map

package/dist/_chunks/Relations-C_bpmSuQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Relations-C_bpmSuQ.mjs","sources":["../../admin/src/pages/EditView/components/FormInputs/ComponentContext.tsx","../../admin/src/pages/EditView/components/FormInputs/Relations.tsx"],"sourcesContent":["import { createContext } from '@strapi/admin/strapi-admin';\n\ninterface ComponentContextValue {\n  /**\n   * The id of the component. It will be undefined if the component\n   * has not been created in the database yet. This could be on a new\n   * or existing entry.\n   */\n  id?: number;\n  /**\n   * The level of the component. This is used to determine the nesting\n   * of the component. The default is set to -1 so that the base level is 0\n   * for the top level component, and increases by 1 for each level of nesting.\n   */\n  level: number;\n  /**\n   * The uid of the component. This is used to determine the type of the\n   * component. Within an attribute, it is normally the `component` value.\n   * It will be undefined if the hook is not called within the confines\n   * of a provider.\n   */\n  uid?: string;\n  /**\n   * The type of component parent. It will be undefined if the hook\n   * is not called within the confines of a provider.\n   */\n  type?: 'dynamiczone' | 'repeatable' | 'component';\n}\n\n/**\n * We use this component to wrap any individual component field in the Edit View,\n * this could be a component field in a dynamic zone, a component within a repeatable space,\n * or even nested components.\n *\n * We primarily need this to provide the component id to the components so that they can\n * correctly fetch their relations.\n */\nconst [ComponentProvider, useComponent] = createContext<ComponentContextValue>('ComponentContext', {\n  id: undefined,\n  level: -1,\n  uid: undefined,\n  type: undefined,\n});\n\nexport { ComponentProvider, useComponent };\n","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  Tooltip,\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 { NavLink } from 'react-router-dom';\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 { useDoc } from '../../../../hooks/useDocument';\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';\n\nimport { useComponent } from './ComponentContext';\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        documentId: relation.documentId,\n        locale: relation.locale,\n      },\n    });\n  };\n\n  return handleDisconnect;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * RelationsField\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}\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 [currentPage, setCurrentPage] = React.useState(1);\n    const { document, model: documentModel } = useDoc();\n    const documentId = document?.documentId;\n    const { formatMessage } = useIntl();\n    const [{ query }] = useQueryParams();\n    const 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    /**\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 id = componentId ? componentId.toString() : documentId;\n    const model = componentUID ?? documentModel;\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 { data, isLoading, isFetching } = useGetRelationsQuery(\n      {\n        model,\n        targetField,\n        // below we don't run the query if there is no id.\n        id: id!,\n        params: {\n          ...params,\n          pageSize: RELATIONS_TO_DISPLAY,\n          page: currentPage,\n        },\n      },\n      {\n        refetchOnMountOrArgChange: true,\n        skip: !id,\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          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 ? (componentId ? `${componentId}` : '') : documentId}\n            label={`${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`}\n            model={model}\n            onChange={handleConnect}\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        />\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  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  ...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\n  const { formatMessage } = useIntl();\n  const fieldRef = useFocusInputField<HTMLInputElement>(name);\n  const field = useField<RelationsFormValue>(name);\n\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    searchForTrigger({\n      model,\n      targetField,\n      params: {\n        ...buildValidParams(query),\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        ...searchParams,\n      },\n    });\n  }, [\n    field.value?.connect,\n    field.value?.disconnect,\n    id,\n    model,\n    name,\n    query,\n    searchForTrigger,\n    searchParams,\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}\n\nconst RelationsList = ({\n  data,\n  serverData,\n  disabled,\n  name,\n  isLoading,\n  relationType,\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(\n          (oldRelation) => oldRelation.documentId === relation.documentId\n        );\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: relationInFront.status,\n              }\n            : { end: true };\n\n          const relationWithPosition: Relation = { ...relation, position };\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        }}\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  };\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  } = data;\n  const { formatMessage } = useIntl();\n\n  const { href, documentId, label, status } = 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: documentId,\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                <Tooltip description={label}>\n                  {href ? (\n                    <LinkEllipsis tag={NavLink} to={href} isExternal={false}>\n                      {label}\n                    </LinkEllipsis>\n                  ) : (\n                    <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>\n                      {label}\n                    </Typography>\n                  )}\n                </Tooltip>\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":["id","textValue"],"mappings":"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"}

package/dist/_chunks/{Relations-DG2jnOcr.js → Relations-D6Nz5ksc.js}

@@ -11,9 +11,9 @@ const reactIntl = require("react-intl");
 const reactRouterDom = require("react-router-dom");
 const reactWindow = require("react-window");
 const styledComponents = require("styled-components");
-const index = require("./index-BZoNZMXL.js");
+const index = require("./index-BsMu2oVP.js");
 const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
-const relations = require("./relations-D0eZ4VWw.js");
+const relations = require("./relations-Lrm9nz_m.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
   if (e && e.__esModule)
@@ -41,6 +41,30 @@ const [ComponentProvider, useComponent] = strapiAdmin.createContext("ComponentCo
   uid: void 0,
   type: void 0
 });
+function useHandleDisconnect(fieldName, consumerName) {
+  const field = strapiAdmin.useField(fieldName);
+  const removeFieldRow = strapiAdmin.useForm(consumerName, (state) => state.removeFieldRow);
+  const addFieldRow = strapiAdmin.useForm(consumerName, (state) => state.addFieldRow);
+  const handleDisconnect = (relation) => {
+    if (field.value && field.value.connect) {
+      const indexOfRelationInConnectArray = field.value.connect.findIndex(
+        (rel) => rel.id === relation.id
+      );
+      if (indexOfRelationInConnectArray >= 0) {
+        removeFieldRow(`${fieldName}.connect`, indexOfRelationInConnectArray);
+        return;
+      }
+    }
+    addFieldRow(`${fieldName}.disconnect`, {
+      id: relation.id,
+      apiData: {
+        documentId: relation.documentId,
+        locale: relation.locale
+      }
+    });
+  };
+  return handleDisconnect;
+}
 const RELATIONS_TO_DISPLAY = 5;
 const ONE_WAY_RELATIONS = ["oneWay", "oneToOne", "manyToOne", "oneToManyMorph", "oneToOneMorph"];
 const RelationsField = React__namespace.forwardRef(
@@ -53,9 +77,12 @@ const RelationsField = React__namespace.forwardRef(
     const params = index.buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes("morph");
     const isDisabled = isMorph || disabled;
-    const { id: componentId, uid } = useComponent("RelationsField", ({ uid: uid2, id: id2 }) => ({ id: id2, uid: uid2 }));
+    const { componentId, componentUID } = useComponent("RelationsField", ({ uid, id: id2 }) => ({
+      componentId: id2,
+      componentUID: uid
+    }));
     const id = componentId ? componentId.toString() : documentId;
-    const model = uid ?? documentModel;
+    const model = componentUID ?? documentModel;
     const [targetField] = props.name.split(".").slice(-1);
     const { data, isLoading, isFetching } = relations.useGetRelationsQuery(
       {
@@ -121,10 +148,15 @@ const RelationsField = React__namespace.forwardRef(
       props.attribute.targetModel,
       props.mainField
     ]);
+    const handleDisconnect = useHandleDisconnect(props.name, "RelationsField");
     const handleConnect = (relation) => {
       const [lastItemInList] = relations$1.slice(-1);
       const item = {
         id: relation.id,
+        apiData: {
+          documentId: relation.documentId,
+          locale: relation.locale
+        },
         status: relation.status,
         /**
          * If there's a last item, that's the first key we use to generate out next one.
@@ -134,9 +166,11 @@ const RelationsField = React__namespace.forwardRef(
         [props.mainField?.name ?? "documentId"]: relation[props.mainField?.name ?? "documentId"],
         label: relations.getRelationLabel(relation, props.mainField),
         // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
-        href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}`
+        href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ""}`
       };
       if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
+        field.value?.connect?.forEach(handleDisconnect);
+        relations$1.forEach(handleDisconnect);
         field.onChange(`${props.name}.connect`, [item]);
       } else {
         field.onChange(`${props.name}.connect`, [...field.value?.connect ?? [], item]);
@@ -157,7 +191,7 @@ const RelationsField = React__namespace.forwardRef(
               RelationsInput,
               {
                 disabled: isDisabled,
-                id,
+                id: componentUID ? componentId ? `${componentId}` : "" : documentId,
                 label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ""}`,
                 model,
                 onChange: handleConnect,
@@ -216,7 +250,7 @@ const addLabelAndHref = ({ mainField, href }) => (relations$1) => relations$1.ma
     // Fallback to `id` if there is no `mainField` value, which will overwrite the above `documentId` property with the exact same data.
     [mainField?.name ?? "documentId"]: relation[mainField?.name ?? "documentId"],
     label: relations.getRelationLabel(relation, mainField),
-    href: `${href}/${relation.documentId}`
+    href: `${href}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ""}`
   };
 });
 const RelationsInput = ({
@@ -311,7 +345,7 @@ const RelationsInput = ({
       {
         ref: fieldRef,
         name,
-        autocomplete: "none",
+        autocomplete: "list",
         placeholder: placeholder || formatMessage({
           id: index.getTranslation("relation.add"),
           defaultMessage: "Add relation"
@@ -369,8 +403,6 @@ const RelationsList = ({
   const [overflow, setOverflow] = React__namespace.useState();
   const [liveText, setLiveText] = React__namespace.useState("");
   const field = strapiAdmin.useField(name);
-  const removeFieldRow = strapiAdmin.useForm("RelationsList", (state) => state.removeFieldRow);
-  const addFieldRow = strapiAdmin.useForm("RelationsList", (state) => state.addFieldRow);
   React__namespace.useEffect(() => {
     if (data.length <= RELATIONS_TO_DISPLAY) {
       return setOverflow(void 0);
@@ -481,18 +513,7 @@ const RelationsList = ({
       )
     );
   };
-  const handleDisconnect = (relation) => {
-    if (field.value && field.value.connect) {
-      const indexOfRelationInConnectArray = field.value.connect.findIndex(
-        (rel) => rel.id === relation.id
-      );
-      if (indexOfRelationInConnectArray >= 0) {
-        removeFieldRow(`${name}.connect`, indexOfRelationInConnectArray);
-        return;
-      }
-    }
-    addFieldRow(`${name}.disconnect`, { id: relation.id });
-  };
+  const handleDisconnect = useHandleDisconnect(name, "RelationsList");
   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);
   return /* @__PURE__ */ jsxRuntime.jsxs(ShadowBox, { $overflowDirection: overflow, children: [
@@ -630,7 +651,7 @@ const ListItem = ({ data, index: index$1, style }) => {
                     id: index.getTranslation("components.RelationInput.icon-button-aria-label"),
                     defaultMessage: "Drag"
                   }),
-                  borderWidth: 0,
+                  variant: "ghost",
                   onKeyDown: handleKeyDown,
                   disabled,
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
@@ -642,16 +663,17 @@ const ListItem = ({ data, index: index$1, style }) => {
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
-              DisconnectButton,
+              designSystem.IconButton,
               {
-                disabled,
-                type: "button",
                 onClick: () => handleDisconnect(relations2[index$1]),
-                "aria-label": formatMessage({
+                disabled,
+                label: formatMessage({
                   id: index.getTranslation("relation.disconnect"),
                   defaultMessage: "Remove"
                 }),
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Cross, { width: "12px" })
+                variant: "ghost",
+                size: "S",
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Cross, {})
               }
             ) })
           ]
@@ -711,4 +733,4 @@ exports.FlexWrapper = FlexWrapper;
 exports.LinkEllipsis = LinkEllipsis;
 exports.MemoizedRelationsField = MemoizedRelationsField;
 exports.useComponent = useComponent;
-//# sourceMappingURL=Relations-DG2jnOcr.js.map
+//# sourceMappingURL=Relations-D6Nz5ksc.js.map