@contentful/field-editor-reference 4.3.11 → 4.4.0

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

@@ -2,8 +2,8 @@ import React__default, { useState, useRef, useEffect, createElement, Fragment, u
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 import get from 'lodash-es/get';
-import { Menu, TextInput, Button, Paragraph, Card, SectionHeading, IconButton, Tooltip, EntryCard, MenuItem, MenuDivider, Text, AssetCard } from '@contentful/f36-components';
-import { SearchIcon, PlusIcon, ChevronDownIcon, LinkIcon, CloseIcon, ClockIcon } from '@contentful/f36-icons';
+import { Menu, TextInput, Button, Paragraph, Card, SectionHeading, IconButton, Tooltip, Flex, Text, EntryCard, MenuItem, MenuDivider, AssetCard } from '@contentful/f36-components';
+import { SearchIcon, PlusIcon, ChevronDownIcon, LinkIcon, CloseIcon, FolderOpenTrimmedIcon, ClockIcon } from '@contentful/f36-icons';
 import moment from 'moment';
 import deepEqual from 'deep-equal';
 import { FieldConnector, isValidImage, entityHelpers, shortenStorageUnit } from '@contentful/field-editor-shared';
@@ -2447,11 +2447,40 @@ SingleReferenceEditor.defaultProps = {
   hasCardRemoveActions: true
 };
 
+var styles$1 = {
+  spaceIcon: /*#__PURE__*/css({
+    flexShrink: 0,
+    fill: tokens.purple600
+  }),
+  spaceName: /*#__PURE__*/css({
+    color: tokens.gray700,
+    fontSize: tokens.fontSizeS,
+    fontWeight: tokens.fontWeightDemiBold
+  })
+};
+function SpaceName(props) {
+  return createElement(Tooltip, {
+    placement: "top",
+    as: "div",
+    content: "Space"
+  }, createElement(Flex, {
+    alignItems: "center",
+    gap: "spacingXs",
+    marginRight: "spacingS"
+  }, createElement(FolderOpenTrimmedIcon, {
+    className: styles$1.spaceIcon,
+    size: "tiny",
+    "aria-label": "Source space"
+  }), createElement(Text, {
+    className: styles$1.spaceName
+  }, props.spaceName)));
+}
+
 var getEntryTitle = entityHelpers.getEntryTitle,
     getEntityDescription = entityHelpers.getEntityDescription,
     getEntryStatus = entityHelpers.getEntryStatus,
     getEntryImage = entityHelpers.getEntryImage;
-var styles$1 = {
+var styles$2 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -2516,12 +2545,17 @@ function WrappedEntryCard(props) {
     size: props.size,
     isSelected: props.isSelected,
     status: status,
-    icon: createElement(ScheduledIconWithTooltip, {
+    style: props.spaceName ? {
+      backgroundColor: tokens.gray100
+    } : undefined,
+    icon: props.spaceName ? createElement(SpaceName, {
+      spaceName: props.spaceName
+    }) : createElement(ScheduledIconWithTooltip, {
       getEntityScheduledActions: props.getEntityScheduledActions,
       entityType: "Entry",
       entityId: props.entry.sys.id
     }, createElement(ClockIcon, {
-      className: styles$1.scheduleIcon,
+      className: styles$2.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -2896,7 +2930,7 @@ MultipleReferenceEditor.defaultProps = {
   hasCardEditActions: true
 };
 
-var styles$2 = {
+var styles$3 = {
   containter: /*#__PURE__*/css({
     position: 'relative'
   }),
@@ -2914,13 +2948,13 @@ var DragHandle = function DragHandle(props) {
 
 var SortableLink = /*#__PURE__*/SortableElement(function (props) {
   return React__default.createElement("div", {
-    className: styles$2.item
+    className: styles$3.item
   }, props.children);
 });
 var SortableLinkList = /*#__PURE__*/SortableContainer(function (props) {
   var lastIndex = props.items.length - 1;
   return React__default.createElement("div", {
-    className: styles$2.containter
+    className: styles$3.containter
   }, props.items.map(function (item, index) {
     return React__default.createElement(SortableLink, {
       disabled: props.isDisabled,
@@ -3029,7 +3063,7 @@ var groupToIconMap = {
   code: 'code',
   markup: 'markup'
 };
-var styles$3 = {
+var styles$4 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -3091,7 +3125,7 @@ var WrappedAssetCard = function WrappedAssetCard(props) {
       entityType: "Asset",
       entityId: props.asset.sys.id
     }, React__default.createElement(ClockIcon, {
-      className: styles$3.scheduleIcon,
+      className: styles$4.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -3122,7 +3156,7 @@ var WrappedAssetCard = function WrappedAssetCard(props) {
 };
 WrappedAssetCard.defaultProps = defaultProps$1;
 
-var styles$4 = {
+var styles$5 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -3166,7 +3200,7 @@ var WrappedAssetLink = function WrappedAssetLink(props) {
       entityType: "Asset",
       entityId: props.asset.sys.id
     }, React__default.createElement(ClockIcon, {
-      className: styles$4.scheduleIcon,
+      className: styles$5.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -3365,7 +3399,7 @@ SingleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
-var styles$5 = {
+var styles$6 = {
   gridContainter: /*#__PURE__*/css({
     position: 'relative',
     display: 'flex',
@@ -3389,12 +3423,12 @@ var DragHandle$1 = function DragHandle(props) {
 
 var SortableLink$1 = /*#__PURE__*/SortableElement(function (props) {
   return React__default.createElement("div", {
-    className: styles$5.item
+    className: styles$6.item
   }, props.children);
 });
 var SortableLinkList$1 = /*#__PURE__*/SortableContainer(function (props) {
   return React__default.createElement("div", {
-    className: props.viewType === 'card' ? styles$5.gridContainter : styles$5.container
+    className: props.viewType === 'card' ? styles$6.gridContainter : styles$6.container
   }, props.items.map(function (item, index) {
     return React__default.createElement(SortableLink$1, {
       disabled: props.isDisabled,