@contentful/field-editor-reference 5.3.2 → 5.4.0

package/dist/field-editor-reference.esm.js

@@ -2946,9 +2946,6 @@ function WrappedEntryCard(props) {
     size: props.size,
     isSelected: props.isSelected,
     status: status,
-    style: props.spaceName ? {
-      backgroundColor: tokens.gray100
-    } : undefined,
     icon: props.spaceName ? createElement(SpaceName, {
       spaceName: props.spaceName
     }) : createElement(ScheduledIconWithTooltip, {
@@ -3181,7 +3178,8 @@ function FetchingWrappedEntryCard(props) {
       onEdit: onEdit,
       onRemove: onRemoveEntry,
       onMoveTop: props.onMoveTop,
-      onMoveBottom: props.onMoveBottom
+      onMoveBottom: props.onMoveBottom,
+      isBeingDragged: props.isBeingDragged
     };
     var hasCardEditActions = props.hasCardEditActions,
         hasCardMoveActions = props.hasCardMoveActions,
@@ -3270,7 +3268,8 @@ var nullableValue = {
 
 function Editor$1(props) {
   var setValue = props.setValue,
-      entityType = props.entityType;
+      entityType = props.entityType,
+      setIndexToUpdate = props.setIndexToUpdate;
   var editorPermissions = useEditorPermissions(props);
   var items = useMemo(function () {
     return (props.items || []). // If null values have found their way into the persisted
@@ -3282,14 +3281,20 @@ function Editor$1(props) {
     });
   }, [props.items]);
   var onSortStart = useCallback(function (_, event) {
-    return event.preventDefault();
+    if (event instanceof MouseEvent) {
+      document.body.classList.add('grabbing');
+    }
+
+    event.preventDefault();
   }, []);
   var onSortEnd = useCallback(function (_ref) {
     var oldIndex = _ref.oldIndex,
         newIndex = _ref.newIndex;
     var newItems = arrayMove(items, oldIndex, newIndex);
     setValue(newItems);
-  }, [items, setValue]);
+    setIndexToUpdate && setIndexToUpdate(undefined);
+    document.body.classList.remove('grabbing');
+  }, [items, setIndexToUpdate, setValue]);
   var onMove = useCallback(function (oldIndex, newIndex) {
     var newItems = arrayMove(items, oldIndex, newIndex);
     setValue(newItems);
@@ -3391,18 +3396,29 @@ function SortableLinkList(props) {
 }
 
 function MultipleEntryReferenceEditor(props) {
+  var _React$useState = useState(undefined),
+      indexToUpdate = _React$useState[0],
+      setIndexToUpdate = _React$useState[1];
+
+  var updateBeforeSortStart = function updateBeforeSortStart(_ref) {
+    var index = _ref.index;
+    setIndexToUpdate(index);
+  };
+
   return createElement(MultipleReferenceEditor, _extends({}, props, {
-    entityType: "Entry"
+    entityType: "Entry",
+    setIndexToUpdate: setIndexToUpdate
   }), function (childrenProps) {
     return createElement(SortableLinkList, _extends({}, childrenProps, {
       axis: "y",
-      useDragHandle: true
-    }), function (_ref) {
-      var items = _ref.items,
-          item = _ref.item,
-          index = _ref.index,
-          isDisabled = _ref.isDisabled,
-          DragHandle = _ref.DragHandle;
+      useDragHandle: true,
+      updateBeforeSortStart: updateBeforeSortStart
+    }), function (_ref2) {
+      var items = _ref2.items,
+          item = _ref2.item,
+          index = _ref2.index,
+          isDisabled = _ref2.isDisabled,
+          DragHandle = _ref2.DragHandle;
       var lastIndex = items.length - 1;
       return createElement(FetchingWrappedEntryCard, _extends({}, childrenProps, {
         key: item.sys.id + "-" + index,
@@ -3421,7 +3437,8 @@ function MultipleEntryReferenceEditor(props) {
         onMoveBottom: index !== lastIndex ? function () {
           return childrenProps.onMove(index, lastIndex);
         } : undefined,
-        renderDragHandle: DragHandle
+        renderDragHandle: DragHandle,
+        isBeingDragged: index === indexToUpdate
       }));
     });
   });