@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

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

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