@strapi/content-manager 0.0.0-experimental.f6c00790e260ea5a9b6b86abac5fea02b05d569c → 0.0.0-experimental.f736daceb203b33d9ed36a1149e21f2814d1935c

package/dist/_chunks/Preview-vfWOtPG5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview-vfWOtPG5.mjs","sources":["../../admin/src/preview/components/PreviewContent.tsx","../../admin/src/preview/components/PreviewHeader.tsx","../../admin/src/preview/pages/Preview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { usePreviewContext } from '../pages/Preview';\n\nconst PreviewContent = () => {\n  const previewUrl = usePreviewContext('PreviewContent', (state) => state.url);\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <Box\n      src={previewUrl}\n      /**\n       * For some reason, changing an iframe's src tag causes the browser to add a new item in the\n       * history stack. This is an issue for us as it means clicking the back button will not let us\n       * go back to the edit view. To fix it, we need to trick the browser into thinking this is a\n       * different iframe when the preview URL changes. So we set a key prop to force React\n       * to mount a different node when the src changes.\n       */\n      key={previewUrl}\n      title={formatMessage({\n        id: 'content-manager.preview.panel.title',\n        defaultMessage: 'Preview',\n      })}\n      width=\"100%\"\n      height=\"100%\"\n      borderWidth={0}\n      tag=\"iframe\"\n    />\n  );\n};\n\nexport { PreviewContent };\n","import * as React from 'react';\n\nimport {\n  useClipboard,\n  useHistory,\n  useNotification,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport { IconButton, Tabs, Typography, Grid } from '@strapi/design-system';\nimport { Cross, Link as LinkIcon } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';\nimport { getDocumentStatus } from '../../pages/EditView/EditViewPage';\nimport { usePreviewContext } from '../pages/Preview';\n\n/* -------------------------------------------------------------------------------------------------\n * ClosePreviewButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst ClosePreviewButton = () => {\n  const [{ query }] = useQueryParams<{\n    plugins?: Record<string, unknown>;\n  }>();\n  const { formatMessage } = useIntl();\n\n  const canGoBack = useHistory('BackButton', (state) => state.canGoBack);\n  const goBack = useHistory('BackButton', (state) => state.goBack);\n  const history = useHistory('BackButton', (state) => state.history);\n  const locationIndex = useHistory('BackButton', (state) => state.currentLocationIndex);\n\n  /**\n   * Get the link destination from the history.\n   * Rely on a fallback (the parent edit view page) if there's no page to go back .\n   */\n  const historyTo = canGoBack ? history.at(locationIndex - 2) : undefined;\n  const fallback = {\n    pathname: '..',\n    search: stringify(query, { encode: false }),\n  } satisfies To;\n  const toWithFallback = historyTo ?? fallback;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (canGoBack) {\n      // Prevent normal link behavior, go back in the history stack instead\n      e.preventDefault();\n      goBack();\n      return;\n    }\n\n    // Otherwise rely on native link behavior to go back to the edit view. We don't use navigate()\n    // here in order to get the relative=\"path\" functionality from the Link component.\n  };\n\n  return (\n    <IconButton\n      tag={Link}\n      relative=\"path\"\n      to={toWithFallback}\n      onClick={handleClick}\n      label={formatMessage({\n        id: 'content-manager.preview.header.close',\n        defaultMessage: 'Close preview',\n      })}\n    >\n      <Cross />\n    </IconButton>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Status\n * -----------------------------------------------------------------------------------------------*/\n\nconst Status = () => {\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublished = schema?.options?.draftAndPublish ?? false;\n\n  if (!hasDraftAndPublished) {\n    return null;\n  }\n\n  const status = getDocumentStatus(document, meta);\n\n  return <DocumentStatus status={status} size=\"XS\" />;\n};\n\nconst PreviewTabs = () => {\n  const { formatMessage } = useIntl();\n\n  // URL query params\n  const [{ query }, setQuery] = useQueryParams<{ status: 'draft' | 'published' }>();\n\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublish = schema?.options?.draftAndPublish ?? false;\n  const documentStatus = getDocumentStatus(document, meta);\n\n  const handleTabChange = (status: string) => {\n    if (status === 'published' || status === 'draft') {\n      setQuery({ status }, 'push', true);\n    }\n  };\n\n  if (!hasDraftAndPublish) {\n    return null;\n  }\n\n  return (\n    <>\n      <Tabs.Root variant=\"simple\" value={query.status || 'draft'} onValueChange={handleTabChange}>\n        <Tabs.List\n          aria-label={formatMessage({\n            id: 'preview.tabs.label',\n            defaultMessage: 'Document status',\n          })}\n        >\n          <StatusTab value=\"draft\">\n            {formatMessage({\n              id: 'content-manager.containers.List.draft',\n              defaultMessage: 'draft',\n            })}\n          </StatusTab>\n          <StatusTab value=\"published\" disabled={documentStatus === 'draft'}>\n            {formatMessage({\n              id: 'content-manager.containers.List.published',\n              defaultMessage: 'published',\n            })}\n          </StatusTab>\n        </Tabs.List>\n      </Tabs.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewHeader = () => {\n  // Get the document title\n  const title = usePreviewContext('PreviewHeader', (state) => state.title);\n\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { copy } = useClipboard();\n\n  const handleCopyLink = () => {\n    copy(window.location.href);\n    toggleNotification({\n      message: formatMessage({\n        id: 'content-manager.preview.copy.success',\n        defaultMessage: 'Copied preview link',\n      }),\n      type: 'success',\n    });\n  };\n\n  return (\n    <Grid.Root\n      gap={3}\n      gridCols={3}\n      paddingLeft={2}\n      paddingRight={2}\n      background=\"neutral0\"\n      borderColor=\"neutral150\"\n      tag=\"header\"\n    >\n      {/* Title and status */}\n      <Grid.Item xs={1} paddingTop={2} paddingBottom={2} gap={3}>\n        <ClosePreviewButton />\n        <PreviewTitle tag=\"h1\" fontWeight={600} fontSize={2} maxWidth=\"200px\" title={title}>\n          {title}\n        </PreviewTitle>\n        <Status />\n      </Grid.Item>\n      {/* Tabs */}\n      <Grid.Item xs={1} marginBottom=\"-1px\" alignItems=\"end\" margin=\"auto\">\n        <PreviewTabs />\n      </Grid.Item>\n      {/* Copy link */}\n      <Grid.Item xs={1} justifyContent=\"end\" paddingTop={2} paddingBottom={2}>\n        <IconButton\n          type=\"button\"\n          label={formatMessage({\n            id: 'preview.copy.label',\n            defaultMessage: 'Copy preview link',\n          })}\n          onClick={handleCopyLink}\n        >\n          <LinkIcon />\n        </IconButton>\n      </Grid.Item>\n    </Grid.Root>\n  );\n};\n\nconst PreviewTitle = styled(Typography)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst StatusTab = styled(Tabs.Trigger)`\n  text-transform: uppercase;\n`;\n\nexport { PreviewHeader };\n","import * as React from 'react';\n\nimport { Page, useQueryParams, useRBAC, createContext } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FocusTrap, Portal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useParams } from 'react-router-dom';\n\nimport { GetPreviewUrl } from '../../../../shared/contracts/preview';\nimport { COLLECTION_TYPES } from '../../constants/collections';\nimport { DocumentRBAC } from '../../features/DocumentRBAC';\nimport { type UseDocument, useDocument } from '../../hooks/useDocument';\nimport { useDocumentLayout } from '../../hooks/useDocumentLayout';\nimport { buildValidParams } from '../../utils/api';\nimport { PreviewContent } from '../components/PreviewContent';\nimport { PreviewHeader } from '../components/PreviewHeader';\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { UID } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface PreviewContextValue {\n  url: string;\n  title: string;\n  document: NonNullable<ReturnType<UseDocument>['document']>;\n  meta: NonNullable<ReturnType<UseDocument>['meta']>;\n  schema: NonNullable<ReturnType<UseDocument>['schema']>;\n}\n\nconst [PreviewProvider, usePreviewContext] = createContext<PreviewContextValue>('PreviewPage');\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewPage = () => {\n  const { formatMessage } = useIntl();\n\n  // Read all the necessary data from the URL to find the right preview URL\n  const {\n    slug: model,\n    id: documentId,\n    collectionType,\n  } = useParams<{\n    slug: UID.ContentType;\n    id: string;\n    collectionType: string;\n  }>();\n  const [{ query }] = useQueryParams<{\n    plugins?: Record<string, unknown>;\n  }>();\n\n  const params = React.useMemo(() => buildValidParams(query), [query]);\n\n  if (!collectionType) {\n    throw new Error('Could not find collectionType in url params');\n  }\n\n  if (!model) {\n    throw new Error('Could not find model in url params');\n  }\n\n  // Only collection types must have a documentId\n  if (collectionType === COLLECTION_TYPES && !documentId) {\n    throw new Error('Could not find documentId in url params');\n  }\n\n  const previewUrlResponse = useGetPreviewUrlQuery({\n    params: {\n      contentType: model,\n    },\n    query: {\n      documentId,\n      locale: params.locale,\n      status: params.status as GetPreviewUrl.Request['query']['status'],\n    },\n  });\n\n  const documentResponse = useDocument({\n    model,\n    collectionType,\n    documentId,\n    params,\n  });\n\n  const documentLayoutResponse = useDocumentLayout(model);\n\n  if (\n    documentResponse.isLoading ||\n    previewUrlResponse.isLoading ||\n    documentLayoutResponse.isLoading\n  ) {\n    return <Page.Loading />;\n  }\n\n  if (\n    previewUrlResponse.error ||\n    documentLayoutResponse.error ||\n    !documentResponse.document ||\n    !documentResponse.meta ||\n    !documentResponse.schema\n  ) {\n    return <Page.Error />;\n  }\n\n  if (!previewUrlResponse.data?.data?.url) {\n    return <Page.NoData />;\n  }\n\n  const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);\n\n  return (\n    <>\n      <Page.Title>\n        {formatMessage(\n          {\n            id: 'content-manager.preview.page-title',\n            defaultMessage: '{contentType} preview',\n          },\n          {\n            contentType: documentTitle,\n          }\n        )}\n      </Page.Title>\n      <PreviewProvider\n        url={previewUrlResponse.data.data.url}\n        document={documentResponse.document}\n        title={documentTitle}\n        meta={documentResponse.meta}\n        schema={documentResponse.schema}\n      >\n        <Flex direction=\"column\" height=\"100%\" alignItems=\"stretch\">\n          <PreviewHeader />\n          <PreviewContent />\n        </Flex>\n      </PreviewProvider>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ProtectedPreviewPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst ProtectedPreviewPageImpl = () => {\n  const { slug: model } = useParams<{\n    slug: string;\n  }>();\n  const {\n    permissions = [],\n    isLoading,\n    error,\n  } = useRBAC([{ action: 'plugin::content-manager.explorer.read', subject: model }]);\n\n  if (isLoading) {\n    return <Page.Loading />;\n  }\n\n  if (error || !model) {\n    return (\n      <Box\n        height=\"100vh\"\n        width=\"100vw\"\n        position=\"fixed\"\n        top={0}\n        left={0}\n        zIndex={2}\n        background=\"neutral0\"\n      >\n        <Page.Error />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      height=\"100vh\"\n      width=\"100vw\"\n      position=\"fixed\"\n      top={0}\n      left={0}\n      zIndex={2}\n      background=\"neutral0\"\n    >\n      <Page.Protect permissions={permissions}>\n        {({ permissions }) => (\n          <DocumentRBAC permissions={permissions}>\n            <PreviewPage />\n          </DocumentRBAC>\n        )}\n      </Page.Protect>\n    </Box>\n  );\n};\n\nconst ProtectedPreviewPage = () => {\n  return (\n    <Portal>\n      <FocusTrap>\n        <ProtectedPreviewPageImpl />\n      </FocusTrap>\n    </Portal>\n  );\n};\n\nexport { ProtectedPreviewPage, usePreviewContext };\n"],"names":["Link","LinkIcon","permissions"],"mappings":"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"}

package/dist/_chunks/{Relations-QP5yn9_z.mjs → Relations-B7_hbF0w.mjs}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useQueryParams, useField, useNotification, useFocusInputField, useForm } from "@strapi/admin/strapi-admin";
+import { createContext, useQueryParams, useForm, useField, useNotification, useFocusInputField } from "@strapi/admin/strapi-admin";
 import { Flex, TextButton, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, Box, useComposedRefs, IconButton, Tooltip, Link } from "@strapi/design-system";
 import { ArrowClockwise, Drag, Cross } from "@strapi/icons";
 import { generateNKeysBetween } from "fractional-indexing";
@@ -10,15 +10,40 @@ 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-BHfS6_D5.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-SCVAL_aJ.mjs";
+import { c as useDoc, d as buildValidParams, C as COLLECTION_TYPES, g as getTranslation, D as DocumentStatus } from "./index-EH8ZtHd5.mjs";
+import { u as useDragAndDrop, I as ItemTypes, D as DROP_SENSITIVITY } from "./useDragAndDrop-DJ6jqvZN.mjs";
+import { u as useGetRelationsQuery, g as getRelationLabel, a as useDebounce, b as useLazySearchRelationsQuery } from "./relations-B8_Uu38Q.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: {
+        id: relation.id,
+        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 +56,16 @@ 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 isSubmitting = useForm("RelationsList", (state) => state.isSubmitting);
+    React.useEffect(() => {
+      setCurrentPage(1);
+    }, [isSubmitting]);
     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(
       {
@@ -86,10 +118,8 @@ const RelationsField = React.forwardRef(
       );
       const transformedRels = transformations([...data.results]);
       return [...transformedRels, ...field.value?.connect ?? []].sort((a, b) => {
-        if (a.__temp_key__ < b.__temp_key__)
-          return -1;
-        if (a.__temp_key__ > b.__temp_key__)
-          return 1;
+        if (a.__temp_key__ < b.__temp_key__) return -1;
+        if (a.__temp_key__ > b.__temp_key__) return 1;
         return 0;
       });
     }, [
@@ -99,10 +129,16 @@ 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: {
+          id: relation.id,
+          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 +148,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 +173,7 @@ const RelationsField = React.forwardRef(
               RelationsInput,
               {
                 disabled: isDisabled,
-                id,
+                id: componentUID ? componentId ? `${componentId}` : "" : documentId,
                 label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ""}`,
                 model,
                 onChange: handleConnect,
@@ -194,7 +232,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 = ({
@@ -222,6 +260,7 @@ const RelationsInput = ({
   const { formatMessage } = useIntl();
   const fieldRef = useFocusInputField(name);
   const field = useField(name);
+  const searchParamsDebounced = useDebounce(searchParams, 300);
   const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();
   React.useEffect(() => {
     const [targetField] = name.split(".").slice(-1);
@@ -234,7 +273,7 @@ const RelationsInput = ({
         pageSize: 10,
         idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [],
         idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [],
-        ...searchParams
+        ...searchParamsDebounced
       }
     });
   }, [
@@ -245,7 +284,7 @@ const RelationsInput = ({
     name,
     query,
     searchForTrigger,
-    searchParams
+    searchParamsDebounced
   ]);
   const handleSearch = async (search) => {
     setSearchParams((s) => ({ ...s, _q: search, page: 1 }));
@@ -289,7 +328,7 @@ const RelationsInput = ({
       {
         ref: fieldRef,
         name,
-        autocomplete: "none",
+        autocomplete: "list",
         placeholder: placeholder || formatMessage({
           id: getTranslation("relation.add"),
           defaultMessage: "Add relation"
@@ -347,8 +386,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);
@@ -398,17 +435,25 @@ const RelationsList = ({
     newData.splice(oldIndex, 1);
     newData.splice(newIndex, 0, { ...currentRow, __temp_key__: newKey });
     const connectedRelations = newData.reduce((acc, relation, currentIndex, array) => {
-      const relationOnServer = serverData.find(
-        (oldRelation) => oldRelation.documentId === relation.documentId
-      );
+      const relationOnServer = serverData.find((oldRelation) => oldRelation.id === relation.id);
       const relationInFront = array[currentIndex + 1];
       if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
         const position = relationInFront ? {
           before: relationInFront.documentId,
           locale: relationInFront.locale,
-          status: relationInFront.status
+          status: "publishedAt" in relationInFront && relationInFront.publishedAt ? "published" : "draft"
         } : { end: true };
-        const relationWithPosition = { ...relation, position };
+        const relationWithPosition = {
+          ...relation,
+          ...{
+            apiData: {
+              id: relation.id,
+              documentId: relation.documentId,
+              locale: relation.locale,
+              position
+            }
+          }
+        };
         return [...acc, relationWithPosition];
       }
       return acc;
@@ -459,18 +504,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: [
@@ -551,7 +585,7 @@ const ListItem = ({ data, index, style }) => {
     relations
   } = data;
   const { formatMessage } = useIntl();
-  const { href, documentId, label, status } = relations[index];
+  const { href, id, label, status } = relations[index];
   const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(
     canDrag && !disabled,
     {
@@ -560,7 +594,7 @@ const ListItem = ({ data, index, style }) => {
       item: {
         displayedValue: label,
         status,
-        id: documentId,
+        id,
         index
       },
       onMoveItem: handleMoveItem,
@@ -620,16 +654,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 +726,4 @@ export {
   MemoizedRelationsField as M,
   useComponent as u
 };
-//# sourceMappingURL=Relations-QP5yn9_z.mjs.map
+//# sourceMappingURL=Relations-B7_hbF0w.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Relations-B7_hbF0w.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 { useDebounce } from '../../../../hooks/useDebounce';\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        id: relation.id,\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    const isSubmitting = useForm('RelationsList', (state) => state.isSubmitting);\n\n    React.useEffect(() => {\n      setCurrentPage(1);\n    }, [isSubmitting]);\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          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 ? (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 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    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        ...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  ]);\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((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'\n                    : 'draft',\n              }\n            : { end: true };\n\n          const relationWithPosition: Relation = {\n            ...relation,\n            ...{\n              apiData: {\n                id: relation.id,\n                documentId: relation.documentId,\n                locale: relation.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        }}\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, id, 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: 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                <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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"}