@contentful/field-editor-reference 4.6.0 → 4.6.3

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.6.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.6.2...@contentful/field-editor-reference@4.6.3) (2022-07-19)
+
+### Bug Fixes
+
+- drill props correctly ([#1190](https://github.com/contentful/field-editors/issues/1190)) ([f17742a](https://github.com/contentful/field-editors/commit/f17742a80f1d41f15a494fd84436deb745e4431d))
+
+## [4.6.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.6.1...@contentful/field-editor-reference@4.6.2) (2022-07-18)
+
+### Bug Fixes
+
+- click handler on children of sortable list ([#1188](https://github.com/contentful/field-editors/issues/1188)) ([7ebab54](https://github.com/contentful/field-editors/commit/7ebab54b2ecd301b3cf066615b124da72b46856a))
+
+## [4.6.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.6.0...@contentful/field-editor-reference@4.6.1) (2022-07-18)
+
+### Bug Fixes
+
+- correctly pass props to children of SortableLinkList ([#1187](https://github.com/contentful/field-editors/issues/1187)) ([5f574b9](https://github.com/contentful/field-editors/commit/5f574b938670290e8e2bb8c0b9bcb67720a83da9))
+
 # [4.6.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.5.1...@contentful/field-editor-reference@4.6.0) (2022-07-15)
 
 ### Features

package/dist/common/SortableLinkList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SortableContainerProps } from 'react-sortable-hoc';
 import { ReferenceEditorProps } from './ReferenceEditor';
-declare type SortableContainerChildProps<IType> = SortableLinkListProps<IType> & {
+declare type SortableContainerChildProps<IType> = Pick<SortableLinkListProps<IType>, 'items' | 'isDisabled'> & {
     item: IType;
     index: number;
     DragHandle?: typeof DragHandle;

package/dist/field-editor-reference.cjs.development.js

@@ -3302,8 +3302,7 @@ var styles$3 = {
     position: 'relative'
   }),
   item: /*#__PURE__*/emotion.css({
-    marginBottom: tokens.spacingM,
-    marginRight: tokens.spacingM
+    marginBottom: tokens.spacingM
   })
 };
 
@@ -3323,50 +3322,62 @@ var SortableLinkListInternal = /*#__PURE__*/reactSortableHoc.SortableContainer(f
   return React__default.createElement("div", {
     className: emotion.cx(styles$3.container, props.className)
   }, props.items.map(function (item, index) {
-    var _item$sys$id;
+    var _item$sys$urn;
 
     return React__default.createElement(SortableLink, {
       disabled: props.isDisabled,
-      key: ((_item$sys$id = item.sys.id) != null ? _item$sys$id : item.sys.urn) + "-" + index,
+      key: ((_item$sys$urn = item.sys.urn) != null ? _item$sys$urn : item.sys.id) + "-" + index,
       index: index
-    }, props.children(_extends({}, props, {
+    }, props.children({
+      items: props.items,
+      isDisabled: props.isDisabled,
       item: item,
       index: index,
       DragHandle: props.isDisabled ? undefined : DragHandle
-    })));
+    }));
   }));
 }); // HOC does not support generics, so we mimic it via additional component
 
 function SortableLinkList(props) {
-  return React__default.createElement(SortableLinkListInternal, Object.assign({}, props, {
-    children: props.children
-  }));
+  // with the default distance of 0 the drag start event is "confused" with the click event,
+  // so the latter one isn't fired and click handlers on child elements don't work
+  return React__default.createElement(SortableLinkListInternal, Object.assign({
+    distance: 1
+  }, props), props.children);
 }
 
 function MultipleEntryReferenceEditor(props) {
   return React.createElement(MultipleReferenceEditor, Object.assign({}, props, {
     entityType: "Entry"
   }), function (childrenProps) {
-    return React.createElement(SortableLinkList, Object.assign({}, childrenProps), function (props) {
-      var lastIndex = props.items.length - 1;
-      return React.createElement(FetchingWrappedEntryCard, Object.assign({}, props, {
-        key: props.item.sys.id + "-" + props.index,
-        index: props.index,
+    return React.createElement(SortableLinkList, Object.assign({}, childrenProps, {
+      axis: "y",
+      useDragHandle: true
+    }), function (_ref) {
+      var items = _ref.items,
+          item = _ref.item,
+          index = _ref.index,
+          isDisabled = _ref.isDisabled,
+          DragHandle = _ref.DragHandle;
+      var lastIndex = items.length - 1;
+      return React.createElement(FetchingWrappedEntryCard, Object.assign({}, childrenProps, {
+        key: item.sys.id + "-" + index,
+        index: index,
         allContentTypes: childrenProps.allContentTypes,
-        isDisabled: props.isDisabled,
-        entryId: props.item.sys.id,
+        isDisabled: isDisabled,
+        entryId: item.sys.id,
         onRemove: function onRemove() {
-          childrenProps.setValue(props.items.filter(function (_value, i) {
-            return i !== props.index;
+          childrenProps.setValue(items.filter(function (_value, i) {
+            return i !== index;
           }));
         },
-        onMoveTop: props.index !== 0 ? function () {
-          return childrenProps.onMove(props.index, 0);
+        onMoveTop: index !== 0 ? function () {
+          return childrenProps.onMove(index, 0);
         } : undefined,
-        onMoveBottom: props.index !== lastIndex ? function () {
-          return childrenProps.onMove(props.index, lastIndex);
+        onMoveBottom: index !== lastIndex ? function () {
+          return childrenProps.onMove(index, lastIndex);
         } : undefined,
-        renderDragHandle: props.DragHandle
+        renderDragHandle: DragHandle
       }));
     });
   });
@@ -3793,17 +3804,24 @@ function MultipleMediaEditor(props) {
 
     return React.createElement(SortableLinkList, Object.assign({}, childrenProps, {
       className: emotion.cx((_cx = {}, _cx[styles$6.gridContainer] = childrenProps.viewType === 'card', _cx)),
-      axis: childrenProps.viewType === 'card' ? 'xy' : 'y'
-    }), function (props) {
-      return React.createElement(FetchingWrappedAssetCard, Object.assign({}, props, {
-        key: props.item.sys.id + "-" + props.index,
-        assetId: props.item.sys.id,
+      axis: childrenProps.viewType === 'card' ? 'xy' : 'y',
+      useDragHandle: true
+    }), function (_ref) {
+      var items = _ref.items,
+          item = _ref.item,
+          index = _ref.index,
+          isDisabled = _ref.isDisabled,
+          DragHandle = _ref.DragHandle;
+      return React.createElement(FetchingWrappedAssetCard, Object.assign({}, childrenProps, {
+        isDisabled: isDisabled,
+        key: item.sys.id + "-" + index,
+        assetId: item.sys.id,
         onRemove: function onRemove() {
-          childrenProps.setValue(props.items.filter(function (_value, i) {
-            return i !== props.index;
+          childrenProps.setValue(items.filter(function (_value, i) {
+            return i !== index;
           }));
         },
-        renderDragHandle: props.DragHandle
+        renderDragHandle: DragHandle
       }));
     });
   });