@contentful/field-editor-reference 5.16.3 → 5.18.0

package/dist/cjs/assets/MultipleMediaEditor.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "MultipleMediaEditor", {
     }
 });
 const _react = _interop_require_wildcard(require("react"));
+const _sortable = require("@dnd-kit/sortable");
 const _emotion = require("emotion");
 const _MultipleReferenceEditor = require("../common/MultipleReferenceEditor");
 const _SortableLinkList = require("../common/SortableLinkList");
@@ -65,11 +66,10 @@ function MultipleMediaEditor(props) {
         entityType: "Asset"
     }, (childrenProps)=>_react.createElement(_SortableLinkList.SortableLinkList, {
             ...childrenProps,
+            sortingStrategy: childrenProps.viewType === 'card' ? _sortable.rectSortingStrategy : _sortable.verticalListSortingStrategy,
             className: (0, _emotion.cx)({
                 [styles.gridContainer]: childrenProps.viewType === 'card'
-            }),
-            axis: childrenProps.viewType === 'card' ? 'xy' : 'y',
-            useDragHandle: true
+            })
         }, ({ items , item , index , isDisabled , DragHandle  })=>_react.createElement(_FetchingWrappedAssetCard.FetchingWrappedAssetCard, {
                 ...childrenProps,
                 isDisabled: isDisabled,

package/dist/cjs/assets/WrappedAssetCard/AssetCardActions.js

@@ -18,7 +18,9 @@ _export(exports, {
 });
 const _react = _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
 const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _emotion = require("emotion");
 const _get = _interop_require_default(require("lodash/get"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -64,6 +66,40 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const styles = {
+    dragHandle: (0, _emotion.css)({
+        alignSelf: 'stretch'
+    }),
+    fileInformation: {
+        menuItem: (0, _emotion.css)({
+            opacity: 1
+        }),
+        dl: (0, _emotion.css)({
+            backgroundColor: _f36tokens.default.gray100,
+            borderRadius: _f36tokens.default.borderRadiusMedium,
+            padding: _f36tokens.default.spacingXs,
+            width: '200px',
+            lineHeight: _f36tokens.default.lineHeightS,
+            fontSize: _f36tokens.default.fontSizeS,
+            dt: {
+                font: 'inherit',
+                color: _f36tokens.default.gray700,
+                marginRight: _f36tokens.default.spacingXs,
+                paddingTop: _f36tokens.default.spacing2Xs,
+                paddingBottom: _f36tokens.default.spacing2Xs,
+                float: 'left',
+                clear: 'left'
+            },
+            dd: {
+                font: 'inherit',
+                marginLeft: 0,
+                color: _f36tokens.default.gray900,
+                paddingTop: _f36tokens.default.spacing2Xs,
+                paddingBottom: _f36tokens.default.spacing2Xs
+            }
+        })
+    }
+};
 function downloadAsset(url) {
     window.open(url, '_blank', 'noopener,noreferrer');
 }
@@ -77,23 +113,20 @@ function renderAssetInfo(props) {
         _react.createElement(_f36components.Menu.SectionTitle, {
             key: "file-section"
         }, "File info"),
-        fileName && _react.createElement(_f36components.Menu.Item, {
-            key: "file-name"
-        }, _react.createElement(_f36components.Text, {
+        _react.createElement(_f36components.Menu.Item, {
+            key: "file-information",
+            className: styles.fileInformation.menuItem,
+            isDisabled: true
+        }, _react.createElement("dl", {
+            className: styles.fileInformation.dl
+        }, fileName && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "File Name:"), _react.createElement(_f36components.Text, {
+            as: "dd",
             isTruncated: true
-        }, fileName)),
-        mimeType && _react.createElement(_f36components.Menu.Item, {
-            key: "file-type"
-        }, _react.createElement(_f36components.Text, {
+        }, fileName)), mimeType && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "File Type:"), _react.createElement(_f36components.Text, {
+            as: "dd",
             isTruncated: true
-        }, mimeType)),
-        fileSize && _react.createElement(_f36components.Menu.Item, {
-            key: "file-size"
-        }, (0, _fieldeditorshared.shortenStorageUnit)(fileSize, 'B')),
-        image && _react.createElement(_f36components.Menu.Item, {
-            key: "file-dimentions"
-        }, `${image.width} × ${image.height}`)
-    ].filter((item)=>item);
+        }, mimeType)), fileSize && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "Size:"), _react.createElement("dd", null, (0, _fieldeditorshared.shortenStorageUnit)(fileSize, 'B'))), image && _react.createElement(_react.Fragment, null, _react.createElement("dt", null, "Dimensions:"), _react.createElement("dd", null, `${image.width} × ${image.height}`))))
+    ];
 }
 function renderActions(props) {
     const { entityFile , isDisabled , onEdit , onRemove  } = props;

package/dist/cjs/common/MultipleReferenceEditor.js

@@ -9,16 +9,12 @@ Object.defineProperty(exports, "MultipleReferenceEditor", {
     }
 });
 const _react = _interop_require_wildcard(require("react"));
-const _arraymove = _interop_require_default(require("array-move"));
+const _sortable = require("@dnd-kit/sortable");
 const _components = require("../components");
 const _LinkEntityActions = require("../components/LinkActions/LinkEntityActions");
+const _useSortIDs = require("../utils/useSortIDs");
 const _ReferenceEditor = require("./ReferenceEditor");
 const _useEditorPermissions = require("./useEditorPermissions");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -77,39 +73,39 @@ const nullableValue = {
     }
 };
 function Editor(props) {
-    const { setValue , entityType , setIndexToUpdate  } = props;
+    const { setValue , entityType , onSortingEnd , setIndexToUpdate  } = props;
     const editorPermissions = (0, _useEditorPermissions.useEditorPermissions)(props);
     const items = _react.useMemo(()=>{
         return (props.items || []).map((link)=>link || nullableValue);
     }, [
         props.items
     ]);
-    const onSortStart = (0, _react.useCallback)((_, event)=>{
-        if (event instanceof MouseEvent) {
-            document.body.classList.add('grabbing');
-        }
-        event.preventDefault();
+    const { rearrangeSortIDs  } = (0, _useSortIDs.useSortIDs)(items);
+    const onSortStart = (0, _react.useCallback)(()=>{
+        document.body.classList.add('grabbing');
     }, []);
     const onSortEnd = (0, _react.useCallback)(({ oldIndex , newIndex  })=>{
-        props.onSortingEnd && props.onSortingEnd({
+        onSortingEnd && onSortingEnd({
             oldIndex,
             newIndex
         });
-        const newItems = (0, _arraymove.default)(items, oldIndex, newIndex);
+        const newItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
         setValue(newItems);
         setIndexToUpdate && setIndexToUpdate(undefined);
         document.body.classList.remove('grabbing');
     }, [
         items,
-        props,
+        onSortingEnd,
         setIndexToUpdate,
         setValue
     ]);
     const onMove = (0, _react.useCallback)((oldIndex, newIndex)=>{
-        const newItems = (0, _arraymove.default)(items, oldIndex, newIndex);
+        const newItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
+        rearrangeSortIDs(oldIndex, newIndex);
         setValue(newItems);
     }, [
         items,
+        rearrangeSortIDs,
         setValue
     ]);
     const onCreate = (0, _react.useCallback)((id, index)=>onLinkOrCreate(setValue, entityType, items, [
@@ -137,8 +133,8 @@ function Editor(props) {
     ]);
     return _react.createElement(_react.Fragment, null, props.children({
         ...props,
-        onSortStart: onSortStart,
-        onSortEnd: onSortEnd,
+        onSortStart,
+        onSortEnd,
         onMove,
         renderCustomCard: props.renderCustomCard && customCardRenderer
     }), _react.createElement(_components.LinkEntityActions, {

package/dist/cjs/common/SortableLinkList.js

@@ -8,88 +8,116 @@ Object.defineProperty(exports, "SortableLinkList", {
         return SortableLinkList;
     }
 });
-const _react = _interop_require_wildcard(require("react"));
-const _reactsortablehoc = require("react-sortable-hoc");
+const _react = _interop_require_default(require("react"));
 const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _core = require("@dnd-kit/core");
+const _sortable = require("@dnd-kit/sortable");
+const _utilities = require("@dnd-kit/utilities");
 const _emotion = require("emotion");
+const _useSortIDs = require("../utils/useSortIDs");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 const styles = {
     container: (0, _emotion.css)({
         position: 'relative'
     }),
     item: (0, _emotion.css)({
-        marginBottom: _f36tokens.default.spacingM,
+        position: 'relative',
+        marginBottom: _f36tokens.default.spacingM
+    }),
+    isDragging: (0, _emotion.css)({
         zIndex: _f36tokens.default.zIndexModal
+    }),
+    dragHandle: (0, _emotion.css)({
+        display: 'flex'
     })
 };
-const DragHandle = (props)=>{
-    const SortableDragHandle = (0, _reactsortablehoc.SortableHandle)(()=>props.drag);
-    return _react.createElement(SortableDragHandle, null);
+const SortableLink = ({ id , items , item , isDisabled =false , index , children  })=>{
+    const { listeners , setNodeRef , setActivatorNodeRef , transform , transition , isDragging  } = (0, _sortable.useSortable)({
+        id
+    });
+    const style = {
+        transform: transform ? _utilities.CSS.Transform.toString({
+            ...transform,
+            scaleX: 1,
+            scaleY: 1
+        }) : '',
+        transition
+    };
+    const DragHandle = _react.default.useCallback((props)=>{
+        const SortableDragHandle = ()=>props.drag;
+        return _react.default.createElement("div", {
+            ref: setActivatorNodeRef,
+            className: styles.dragHandle,
+            ...listeners
+        }, _react.default.createElement(SortableDragHandle, null));
+    }, [
+        listeners,
+        setActivatorNodeRef
+    ]);
+    return _react.default.createElement("div", {
+        ref: setNodeRef,
+        style: style,
+        className: (0, _emotion.cx)(styles.item, {
+            [styles.isDragging]: isDragging
+        })
+    }, children({
+        items,
+        isDisabled,
+        item,
+        index,
+        DragHandle: isDisabled ? undefined : DragHandle
+    }));
 };
-const SortableLink = (0, _reactsortablehoc.SortableElement)((props)=>_react.createElement("div", {
-        className: styles.item
-    }, props.children));
-const SortableLinkListInternal = (0, _reactsortablehoc.SortableContainer)((props)=>{
-    return _react.createElement("div", {
-        className: (0, _emotion.cx)(styles.container, props.className)
-    }, props.items.map((item, index)=>_react.createElement(SortableLink, {
-            disabled: props.isDisabled,
-            key: `${item.sys.urn ?? item.sys.id}-${index}`,
+const SortableLinkList = ({ items , isDisabled , className , children , onSortStart , onSortEnd , updateBeforeSortStart , sortingStrategy  })=>{
+    const { sortIDs , rearrangeSortIDs  } = (0, _useSortIDs.useSortIDs)(items);
+    const onSortStartHandler = _react.default.useCallback((event)=>{
+        const index = sortIDs.findIndex((item)=>item.id === event.active.id);
+        updateBeforeSortStart?.({
+            index
+        });
+        onSortStart?.(event);
+    }, [
+        updateBeforeSortStart,
+        onSortStart,
+        sortIDs
+    ]);
+    const onSortEndHandler = _react.default.useCallback((event)=>{
+        const { active , over  } = event;
+        if (active && over && active.id !== over.id) {
+            const oldIndex = sortIDs.findIndex((item)=>item.id === active.id);
+            const newIndex = sortIDs.findIndex((item)=>item.id === over.id);
+            rearrangeSortIDs(oldIndex, newIndex);
+            onSortEnd?.({
+                oldIndex,
+                newIndex
+            });
+        }
+    }, [
+        onSortEnd,
+        sortIDs,
+        rearrangeSortIDs
+    ]);
+    return _react.default.createElement(_core.DndContext, {
+        onDragStart: onSortStartHandler,
+        onDragEnd: onSortEndHandler
+    }, _react.default.createElement(_sortable.SortableContext, {
+        items: sortIDs,
+        strategy: sortingStrategy
+    }, _react.default.createElement("div", {
+        className: (0, _emotion.cx)(styles.container, className)
+    }, items.map((item, index)=>{
+        const id = sortIDs[index]?.id;
+        return _react.default.createElement(SortableLink, {
+            key: id,
+            id: id,
+            items: items,
+            item: item,
+            isDisabled: isDisabled,
             index: index
-        }, props.children({
-            items: props.items,
-            isDisabled: props.isDisabled,
-            item,
-            index,
-            DragHandle: props.isDisabled ? undefined : DragHandle
-        }))));
-});
-function SortableLinkList(props) {
-    return _react.createElement(SortableLinkListInternal, {
-        distance: 1,
-        ...props
-    }, props.children);
-}
+        }, children);
+    }))));
+};

package/dist/cjs/entries/MultipleEntryReferenceEditor.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "MultipleEntryReferenceEditor", {
     }
 });
 const _react = _interop_require_wildcard(require("react"));
+const _sortable = require("@dnd-kit/sortable");
 const _MultipleReferenceEditor = require("../common/MultipleReferenceEditor");
 const _SortableLinkList = require("../common/SortableLinkList");
 const _FetchingWrappedEntryCard = require("./WrappedEntryCard/FetchingWrappedEntryCard");
@@ -62,8 +63,7 @@ function MultipleEntryReferenceEditor(props) {
         setIndexToUpdate: setIndexToUpdate
     }, (childrenProps)=>_react.createElement(_SortableLinkList.SortableLinkList, {
             ...childrenProps,
-            axis: "y",
-            useDragHandle: true,
+            sortingStrategy: _sortable.verticalListSortingStrategy,
             updateBeforeSortStart: updateBeforeSortStart
         }, ({ items , item , index , isDisabled , DragHandle  })=>{
             const lastIndex = items.length - 1;

package/dist/cjs/resources/MultipleResourceReferenceEditor.js

@@ -10,8 +10,9 @@ Object.defineProperty(exports, "MultipleResourceReferenceEditor", {
 });
 const _react = _interop_require_wildcard(require("react"));
 const _fieldeditorshared = require("@contentful/field-editor-shared");
-const _arraymove = _interop_require_default(require("array-move"));
+const _sortable = require("@dnd-kit/sortable");
 const _deepequal = _interop_require_default(require("deep-equal"));
+const _noop = _interop_require_default(require("lodash/noop"));
 const _EntityStore = require("../common/EntityStore");
 const _SortableLinkList = require("../common/SortableLinkList");
 const _LinkEntityActions = require("../components/LinkActions/LinkEntityActions");
@@ -63,16 +64,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function ResourceEditor(props) {
     const { setValue , items , apiUrl  } = props;
-    const onSortStart = (0, _react.useCallback)((_, event)=>event.preventDefault(), []);
+    const onSortStart = ()=>(0, _noop.default)();
     const onSortEnd = (0, _react.useCallback)(({ oldIndex , newIndex  })=>{
-        const newItems = (0, _arraymove.default)(items, oldIndex, newIndex);
+        const newItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
         setValue(newItems);
     }, [
         items,
         setValue
     ]);
     const onMove = (0, _react.useCallback)((oldIndex, newIndex)=>{
-        const newItems = (0, _arraymove.default)(items, oldIndex, newIndex);
+        const newItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
         setValue(newItems);
     }, [
         items,
@@ -139,11 +140,13 @@ function MultipleResourceReferenceEditor(props) {
             renderCustomActions: props.renderCustomActions,
             key: `${externalReset}-list`
         }, (editorProps)=>_react.createElement(_SortableLinkList.SortableLinkList, editorProps, ({ item , isDisabled , DragHandle , index  })=>_react.createElement(WithPerItemCallbacks, {
+                    key: index,
                     index: index,
                     onMove: editorProps.onMove,
                     onRemoteItemAtIndex: editorProps.onRemoteItemAtIndex,
                     listLength: value?.length || 0
                 }, ({ onMoveBottom , onMoveTop , onRemove  })=>_react.createElement(_ResourceCard.ResourceCard, {
+                        key: index,
                         index: index,
                         resourceLink: item,
                         isDisabled: isDisabled,

package/dist/cjs/utils/useSortIDs.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSortIDs", {
+    enumerable: true,
+    get: function() {
+        return useSortIDs;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _sortable = require("@dnd-kit/sortable");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const useSortIDs = (items)=>{
+    const ids = (items || []).map((item, index)=>{
+        const { type  } = item.sys;
+        return {
+            id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
+        };
+    });
+    const [sortIDs, setSortIDs] = (0, _react.useState)(ids);
+    _react.default.useEffect(()=>{
+        if (items.length !== sortIDs.length) {
+            const ids = items.map((item, index)=>{
+                const { type  } = item.sys;
+                return {
+                    id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
+                };
+            });
+            setSortIDs(ids);
+        }
+    }, [
+        items,
+        sortIDs.length
+    ]);
+    const rearrangeSortIDs = (0, _react.useCallback)((oldIndex, newIndex)=>{
+        const newSortIDs = (0, _sortable.arrayMove)(sortIDs, oldIndex, newIndex);
+        setSortIDs(newSortIDs);
+    }, [
+        sortIDs
+    ]);
+    return {
+        sortIDs,
+        rearrangeSortIDs
+    };
+};

package/dist/esm/assets/MultipleMediaEditor.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { css, cx } from 'emotion';
 import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor';
 import { SortableLinkList } from '../common/SortableLinkList';
@@ -16,11 +17,10 @@ export function MultipleMediaEditor(props) {
         entityType: "Asset"
     }, (childrenProps)=>React.createElement(SortableLinkList, {
             ...childrenProps,
+            sortingStrategy: childrenProps.viewType === 'card' ? rectSortingStrategy : verticalListSortingStrategy,
             className: cx({
                 [styles.gridContainer]: childrenProps.viewType === 'card'
-            }),
-            axis: childrenProps.viewType === 'card' ? 'xy' : 'y',
-            useDragHandle: true
+            })
         }, ({ items , item , index , isDisabled , DragHandle  })=>React.createElement(FetchingWrappedAssetCard, {
                 ...childrenProps,
                 isDisabled: isDisabled,

package/dist/esm/assets/WrappedAssetCard/AssetCardActions.js

@@ -1,7 +1,43 @@
 import * as React from 'react';
 import { Menu, Text } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
 import { shortenStorageUnit } from '@contentful/field-editor-shared';
+import { css } from 'emotion';
 import get from 'lodash/get';
+const styles = {
+    dragHandle: css({
+        alignSelf: 'stretch'
+    }),
+    fileInformation: {
+        menuItem: css({
+            opacity: 1
+        }),
+        dl: css({
+            backgroundColor: tokens.gray100,
+            borderRadius: tokens.borderRadiusMedium,
+            padding: tokens.spacingXs,
+            width: '200px',
+            lineHeight: tokens.lineHeightS,
+            fontSize: tokens.fontSizeS,
+            dt: {
+                font: 'inherit',
+                color: tokens.gray700,
+                marginRight: tokens.spacingXs,
+                paddingTop: tokens.spacing2Xs,
+                paddingBottom: tokens.spacing2Xs,
+                float: 'left',
+                clear: 'left'
+            },
+            dd: {
+                font: 'inherit',
+                marginLeft: 0,
+                color: tokens.gray900,
+                paddingTop: tokens.spacing2Xs,
+                paddingBottom: tokens.spacing2Xs
+            }
+        })
+    }
+};
 function downloadAsset(url) {
     window.open(url, '_blank', 'noopener,noreferrer');
 }
@@ -15,23 +51,20 @@ export function renderAssetInfo(props) {
         React.createElement(Menu.SectionTitle, {
             key: "file-section"
         }, "File info"),
-        fileName && React.createElement(Menu.Item, {
-            key: "file-name"
-        }, React.createElement(Text, {
+        React.createElement(Menu.Item, {
+            key: "file-information",
+            className: styles.fileInformation.menuItem,
+            isDisabled: true
+        }, React.createElement("dl", {
+            className: styles.fileInformation.dl
+        }, fileName && React.createElement(React.Fragment, null, React.createElement("dt", null, "File Name:"), React.createElement(Text, {
+            as: "dd",
             isTruncated: true
-        }, fileName)),
-        mimeType && React.createElement(Menu.Item, {
-            key: "file-type"
-        }, React.createElement(Text, {
+        }, fileName)), mimeType && React.createElement(React.Fragment, null, React.createElement("dt", null, "File Type:"), React.createElement(Text, {
+            as: "dd",
             isTruncated: true
-        }, mimeType)),
-        fileSize && React.createElement(Menu.Item, {
-            key: "file-size"
-        }, shortenStorageUnit(fileSize, 'B')),
-        image && React.createElement(Menu.Item, {
-            key: "file-dimentions"
-        }, `${image.width} × ${image.height}`)
-    ].filter((item)=>item);
+        }, mimeType)), fileSize && React.createElement(React.Fragment, null, React.createElement("dt", null, "Size:"), React.createElement("dd", null, shortenStorageUnit(fileSize, 'B'))), image && React.createElement(React.Fragment, null, React.createElement("dt", null, "Dimensions:"), React.createElement("dd", null, `${image.width} × ${image.height}`))))
+    ];
 }
 export function renderActions(props) {
     const { entityFile , isDisabled , onEdit , onRemove  } = props;

package/dist/esm/common/MultipleReferenceEditor.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useCallback } from 'react';
-import arrayMove from 'array-move';
+import { arrayMove } from '@dnd-kit/sortable';
 import { LinkEntityActions } from '../components';
 import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions';
+import { useSortIDs } from '../utils/useSortIDs';
 import { ReferenceEditor } from './ReferenceEditor';
 import { useEditorPermissions } from './useEditorPermissions';
 function onLinkOrCreate(setValue, entityType, items, ids, index = items.length) {
@@ -24,21 +25,19 @@ const nullableValue = {
     }
 };
 function Editor(props) {
-    const { setValue , entityType , setIndexToUpdate  } = props;
+    const { setValue , entityType , onSortingEnd , setIndexToUpdate  } = props;
     const editorPermissions = useEditorPermissions(props);
     const items = React.useMemo(()=>{
         return (props.items || []).map((link)=>link || nullableValue);
     }, [
         props.items
     ]);
-    const onSortStart = useCallback((_, event)=>{
-        if (event instanceof MouseEvent) {
-            document.body.classList.add('grabbing');
-        }
-        event.preventDefault();
+    const { rearrangeSortIDs  } = useSortIDs(items);
+    const onSortStart = useCallback(()=>{
+        document.body.classList.add('grabbing');
     }, []);
     const onSortEnd = useCallback(({ oldIndex , newIndex  })=>{
-        props.onSortingEnd && props.onSortingEnd({
+        onSortingEnd && onSortingEnd({
             oldIndex,
             newIndex
         });
@@ -48,15 +47,17 @@ function Editor(props) {
         document.body.classList.remove('grabbing');
     }, [
         items,
-        props,
+        onSortingEnd,
         setIndexToUpdate,
         setValue
     ]);
     const onMove = useCallback((oldIndex, newIndex)=>{
         const newItems = arrayMove(items, oldIndex, newIndex);
+        rearrangeSortIDs(oldIndex, newIndex);
         setValue(newItems);
     }, [
         items,
+        rearrangeSortIDs,
         setValue
     ]);
     const onCreate = useCallback((id, index)=>onLinkOrCreate(setValue, entityType, items, [
@@ -84,8 +85,8 @@ function Editor(props) {
     ]);
     return React.createElement(React.Fragment, null, props.children({
         ...props,
-        onSortStart: onSortStart,
-        onSortEnd: onSortEnd,
+        onSortStart,
+        onSortEnd,
         onMove,
         renderCustomCard: props.renderCustomCard && customCardRenderer
     }), React.createElement(LinkEntityActions, {

package/dist/esm/common/SortableLinkList.js

@@ -1,41 +1,108 @@
-import * as React from 'react';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import React from 'react';
 import tokens from '@contentful/f36-tokens';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { css, cx } from 'emotion';
+import { useSortIDs } from '../utils/useSortIDs';
 const styles = {
     container: css({
         position: 'relative'
     }),
     item: css({
-        marginBottom: tokens.spacingM,
+        position: 'relative',
+        marginBottom: tokens.spacingM
+    }),
+    isDragging: css({
         zIndex: tokens.zIndexModal
+    }),
+    dragHandle: css({
+        display: 'flex'
     })
 };
-const DragHandle = (props)=>{
-    const SortableDragHandle = SortableHandle(()=>props.drag);
-    return React.createElement(SortableDragHandle, null);
-};
-const SortableLink = SortableElement((props)=>React.createElement("div", {
-        className: styles.item
-    }, props.children));
-const SortableLinkListInternal = SortableContainer((props)=>{
+const SortableLink = ({ id , items , item , isDisabled =false , index , children  })=>{
+    const { listeners , setNodeRef , setActivatorNodeRef , transform , transition , isDragging  } = useSortable({
+        id
+    });
+    const style = {
+        transform: transform ? CSS.Transform.toString({
+            ...transform,
+            scaleX: 1,
+            scaleY: 1
+        }) : '',
+        transition
+    };
+    const DragHandle = React.useCallback((props)=>{
+        const SortableDragHandle = ()=>props.drag;
+        return React.createElement("div", {
+            ref: setActivatorNodeRef,
+            className: styles.dragHandle,
+            ...listeners
+        }, React.createElement(SortableDragHandle, null));
+    }, [
+        listeners,
+        setActivatorNodeRef
+    ]);
     return React.createElement("div", {
-        className: cx(styles.container, props.className)
-    }, props.items.map((item, index)=>React.createElement(SortableLink, {
-            disabled: props.isDisabled,
-            key: `${item.sys.urn ?? item.sys.id}-${index}`,
+        ref: setNodeRef,
+        style: style,
+        className: cx(styles.item, {
+            [styles.isDragging]: isDragging
+        })
+    }, children({
+        items,
+        isDisabled,
+        item,
+        index,
+        DragHandle: isDisabled ? undefined : DragHandle
+    }));
+};
+export const SortableLinkList = ({ items , isDisabled , className , children , onSortStart , onSortEnd , updateBeforeSortStart , sortingStrategy  })=>{
+    const { sortIDs , rearrangeSortIDs  } = useSortIDs(items);
+    const onSortStartHandler = React.useCallback((event)=>{
+        const index = sortIDs.findIndex((item)=>item.id === event.active.id);
+        updateBeforeSortStart?.({
+            index
+        });
+        onSortStart?.(event);
+    }, [
+        updateBeforeSortStart,
+        onSortStart,
+        sortIDs
+    ]);
+    const onSortEndHandler = React.useCallback((event)=>{
+        const { active , over  } = event;
+        if (active && over && active.id !== over.id) {
+            const oldIndex = sortIDs.findIndex((item)=>item.id === active.id);
+            const newIndex = sortIDs.findIndex((item)=>item.id === over.id);
+            rearrangeSortIDs(oldIndex, newIndex);
+            onSortEnd?.({
+                oldIndex,
+                newIndex
+            });
+        }
+    }, [
+        onSortEnd,
+        sortIDs,
+        rearrangeSortIDs
+    ]);
+    return React.createElement(DndContext, {
+        onDragStart: onSortStartHandler,
+        onDragEnd: onSortEndHandler
+    }, React.createElement(SortableContext, {
+        items: sortIDs,
+        strategy: sortingStrategy
+    }, React.createElement("div", {
+        className: cx(styles.container, className)
+    }, items.map((item, index)=>{
+        const id = sortIDs[index]?.id;
+        return React.createElement(SortableLink, {
+            key: id,
+            id: id,
+            items: items,
+            item: item,
+            isDisabled: isDisabled,
             index: index
-        }, props.children({
-            items: props.items,
-            isDisabled: props.isDisabled,
-            item,
-            index,
-            DragHandle: props.isDisabled ? undefined : DragHandle
-        }))));
-});
-export function SortableLinkList(props) {
-    return React.createElement(SortableLinkListInternal, {
-        distance: 1,
-        ...props
-    }, props.children);
-}
+        }, children);
+    }))));
+};

package/dist/esm/entries/MultipleEntryReferenceEditor.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor';
 import { SortableLinkList } from '../common/SortableLinkList';
 import { FetchingWrappedEntryCard } from './WrappedEntryCard/FetchingWrappedEntryCard';
@@ -13,8 +14,7 @@ export function MultipleEntryReferenceEditor(props) {
         setIndexToUpdate: setIndexToUpdate
     }, (childrenProps)=>React.createElement(SortableLinkList, {
             ...childrenProps,
-            axis: "y",
-            useDragHandle: true,
+            sortingStrategy: verticalListSortingStrategy,
             updateBeforeSortStart: updateBeforeSortStart
         }, ({ items , item , index , isDisabled , DragHandle  })=>{
             const lastIndex = items.length - 1;

package/dist/esm/resources/MultipleResourceReferenceEditor.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useCallback } from 'react';
 import { FieldConnector } from '@contentful/field-editor-shared';
-import arrayMove from 'array-move';
+import { arrayMove } from '@dnd-kit/sortable';
 import deepEqual from 'deep-equal';
+import noop from 'lodash/noop';
 import { EntityProvider } from '../common/EntityStore';
 import { SortableLinkList } from '../common/SortableLinkList';
 import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityActions';
@@ -10,7 +11,7 @@ import { ResourceCard } from './Cards/ResourceCard';
 import { useResourceLinkActions } from './useResourceLinkActions';
 function ResourceEditor(props) {
     const { setValue , items , apiUrl  } = props;
-    const onSortStart = useCallback((_, event)=>event.preventDefault(), []);
+    const onSortStart = ()=>noop();
     const onSortEnd = useCallback(({ oldIndex , newIndex  })=>{
         const newItems = arrayMove(items, oldIndex, newIndex);
         setValue(newItems);
@@ -86,11 +87,13 @@ export function MultipleResourceReferenceEditor(props) {
             renderCustomActions: props.renderCustomActions,
             key: `${externalReset}-list`
         }, (editorProps)=>React.createElement(SortableLinkList, editorProps, ({ item , isDisabled , DragHandle , index  })=>React.createElement(WithPerItemCallbacks, {
+                    key: index,
                     index: index,
                     onMove: editorProps.onMove,
                     onRemoteItemAtIndex: editorProps.onRemoteItemAtIndex,
                     listLength: value?.length || 0
                 }, ({ onMoveBottom , onMoveTop , onRemove  })=>React.createElement(ResourceCard, {
+                        key: index,
                         index: index,
                         resourceLink: item,
                         isDisabled: isDisabled,

package/dist/esm/utils/useSortIDs.js

@@ -0,0 +1,35 @@
+import React, { useCallback, useState } from 'react';
+import { arrayMove } from '@dnd-kit/sortable';
+export const useSortIDs = (items)=>{
+    const ids = (items || []).map((item, index)=>{
+        const { type  } = item.sys;
+        return {
+            id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
+        };
+    });
+    const [sortIDs, setSortIDs] = useState(ids);
+    React.useEffect(()=>{
+        if (items.length !== sortIDs.length) {
+            const ids = items.map((item, index)=>{
+                const { type  } = item.sys;
+                return {
+                    id: type === 'ResourceLink' ? `${item.sys.urn}-${index}` : `${item.sys.id}-${index}`
+                };
+            });
+            setSortIDs(ids);
+        }
+    }, [
+        items,
+        sortIDs.length
+    ]);
+    const rearrangeSortIDs = useCallback((oldIndex, newIndex)=>{
+        const newSortIDs = arrayMove(sortIDs, oldIndex, newIndex);
+        setSortIDs(newSortIDs);
+    }, [
+        sortIDs
+    ]);
+    return {
+        sortIDs,
+        rearrangeSortIDs
+    };
+};

package/dist/types/assets/WrappedAssetCard/AssetCardActions.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { File } from '../../types';
 export declare function renderAssetInfo(props: {
     entityFile: File;
-}): any[];
+}): React.JSX.Element[];
 export declare function renderActions(props: {
     onEdit?: () => void;
     onRemove?: () => void;

package/dist/types/common/MultipleReferenceEditor.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SortEndHandler, SortStartHandler } from 'react-sortable-hoc';
+import { DragStartEvent } from '@dnd-kit/core';
 import { ReferenceValue, ContentEntityType, ContentType } from '../types';
 import { ReferenceEditorProps } from './ReferenceEditor';
 type ChildProps = {
@@ -8,8 +8,11 @@ type ChildProps = {
     isDisabled: boolean;
     setValue: (value: ReferenceValue[]) => void;
     allContentTypes: ContentType[];
-    onSortStart: SortStartHandler;
-    onSortEnd: SortEndHandler;
+    onSortStart: (event: DragStartEvent) => void;
+    onSortEnd: ({ oldIndex, newIndex }: {
+        oldIndex: number;
+        newIndex: number;
+    }) => void;
     onMove: (oldIndex: number, newIndex: number) => void;
 };
 export declare function MultipleReferenceEditor(props: ReferenceEditorProps & {

package/dist/types/common/SortableLinkList.d.ts

@@ -1,19 +1,27 @@
-import * as React from 'react';
-import { SortableContainerProps } from 'react-sortable-hoc';
+import React from 'react';
+import { DragStartEvent } from '@dnd-kit/core';
+import { SortingStrategy } from '@dnd-kit/sortable';
 import { ReferenceEditorProps } from './ReferenceEditor';
 type SortableContainerChildProps<IType> = Pick<SortableLinkListProps<IType>, 'items' | 'isDisabled'> & {
     item: IType;
     index: number;
-    DragHandle?: typeof DragHandle;
+    DragHandle?: (props: {
+        drag: React.ReactElement;
+    }) => React.ReactElement;
 };
 type SortableLinkListProps<T> = ReferenceEditorProps & {
     items: T[];
     isDisabled: boolean;
     children: (props: SortableContainerChildProps<T>) => React.ReactElement;
+    sortingStrategy?: SortingStrategy;
+    onSortStart?: (event: DragStartEvent) => void;
+    onSortEnd?: ({ oldIndex, newIndex }: {
+        oldIndex: number;
+        newIndex: number;
+    }) => void;
     className?: string;
 };
-declare const DragHandle: (props: {
-    drag: React.ReactElement;
-}) => React.JSX.Element;
-export declare function SortableLinkList<T>(props: SortableLinkListProps<T> & SortableContainerProps): React.JSX.Element;
+export declare const SortableLinkList: <T extends {
+    sys: any;
+}>({ items, isDisabled, className, children, onSortStart, onSortEnd, updateBeforeSortStart, sortingStrategy, }: SortableLinkListProps<T>) => React.JSX.Element;
 export {};

package/dist/types/utils/useSortIDs.d.ts

@@ -0,0 +1,9 @@
+import { ReferenceValue, ResourceLink } from '../types';
+type Items = (ResourceLink | ReferenceValue)[];
+export declare const useSortIDs: (items: Items) => {
+    sortIDs: {
+        id: string;
+    }[];
+    rearrangeSortIDs: (oldIndex: number, newIndex: number) => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "5.16.3",
+  "version": "5.18.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -40,9 +40,11 @@
     "@contentful/f36-tokens": "^4.0.0",
     "@contentful/field-editor-shared": "^1.4.2",
     "@contentful/mimetype": "^1.4.0",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
     "@tanstack/react-query": "^4.3.9",
     "@types/deep-equal": "^1.0.1",
-    "array-move": "^3.0.0",
     "constate": "3.2.0",
     "contentful-management": "^10.14.0",
     "deep-equal": "2.2.2",
@@ -51,7 +53,6 @@
     "moment": "^2.20.0",
     "p-queue": "^4.0.0",
     "react-intersection-observer": "9.4.0",
-    "react-sortable-hoc": "^2.0.0",
     "type-fest": "2.17.0"
   },
   "devDependencies": {
@@ -63,5 +64,5 @@
     "@contentful/app-sdk": "^4.17.1",
     "react": ">=16.8.0"
   },
-  "gitHead": "ef0adb263ad287e6f78888a05727d0f2f4f8968d"
+  "gitHead": "ed5a4c379ae53144fc8b9f68d86d48ff4009a784"
 }