@contentful/field-editor-reference 4.3.9 → 4.4.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.4.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.3.11...@contentful/field-editor-reference@4.4.0) (2022-07-06)
+
+### Features
+
+- add optional space name to entry card ([#1176](https://github.com/contentful/field-editors/issues/1176)) ([62fae44](https://github.com/contentful/field-editors/commit/62fae44a63ad29597acf6ae0ba7f15373b1045c0))
+
+## [4.3.11](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.3.10...@contentful/field-editor-reference@4.3.11) (2022-06-30)
+
+### Bug Fixes
+
+- search input styles [HOMER-1048] ([#1170](https://github.com/contentful/field-editors/issues/1170)) ([bc96fb9](https://github.com/contentful/field-editors/commit/bc96fb93bcca5508bdca38eafc8377878e97fb4b))
+
+## [4.3.10](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.3.9...@contentful/field-editor-reference@4.3.10) (2022-06-22)
+
+**Note:** Version bump only for package @contentful/field-editor-reference
+
 ## [4.3.9](https://github.com/contentful/field-editors/compare/@contentful/field-editor-reference@4.3.8...@contentful/field-editor-reference@4.3.9) (2022-06-21)
 
 **Note:** Version bump only for package @contentful/field-editor-reference

package/dist/components/SpaceName/SpaceName.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface SpaceNameProps {
+    spaceName: string;
+}
+export declare function SpaceName(props: SpaceNameProps): JSX.Element;
+export {};

package/dist/entries/WrappedEntryCard/WrappedEntryCard.d.ts

@@ -14,6 +14,7 @@ export interface WrappedEntryCardProps {
     localeCode: string;
     defaultLocaleCode: string;
     contentType?: ContentType;
+    spaceName?: string;
     entry: Entry;
     renderDragHandle?: RenderDragFn;
     isClickable?: boolean;

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

@@ -9,8 +9,8 @@ var React__default = _interopDefault(React);
 var emotion = require('emotion');
 var tokens = _interopDefault(require('@contentful/f36-tokens'));
 var get = _interopDefault(require('lodash/get'));
-var f36Icons = require('@contentful/f36-icons');
 var f36Components = require('@contentful/f36-components');
+var f36Icons = require('@contentful/f36-icons');
 var moment = _interopDefault(require('moment'));
 var deepEqual = _interopDefault(require('deep-equal'));
 var fieldEditorShared = require('@contentful/field-editor-shared');
@@ -115,20 +115,10 @@ var styles = {
     position: 'relative',
     padding: "0 " + tokens.spacing2Xs
   }),
-  searchInput: function searchInput(parentHasDropdown) {
-    return emotion.css({
-      '& > input': {
-        borderColor: 'transparent',
-        borderRadius: parentHasDropdown ? 0 : undefined,
-        borderLeft: parentHasDropdown ? 'none' : undefined,
-        borderRight: parentHasDropdown ? 'none' : undefined,
-        paddingRight: tokens.spacing2Xl,
-        '::placeholder': {
-          color: tokens.gray600
-        }
-      }
-    });
-  },
+  searchInput: /*#__PURE__*/emotion.css({
+    paddingRight: tokens.spacingXl,
+    textOverflow: 'ellipsis'
+  }),
   searchIcon: /*#__PURE__*/emotion.css({
     position: 'absolute',
     right: tokens.spacingM,
@@ -277,7 +267,7 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
     ref: textField,
     className: styles.inputWrapper
   }, React__default.createElement(f36Components.TextInput, {
-    className: styles.searchInput(hasDropdown),
+    className: styles.searchInput,
     placeholder: "Search all content types",
     testId: "add-entry-menu-search",
     value: searchInput,
@@ -1548,7 +1538,8 @@ function useLinkActionsProps(props) {
       slide: slide,
       index: index
     });
-  }, [entityType, props.onCreate, props.onAction]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  [entityType, props.onCreate, props.onAction]);
   var onLinkedExisting = React.useCallback(function (entities, index) {
     if (index === void 0) {
       index = itemsLength;
@@ -1565,7 +1556,8 @@ function useLinkActionsProps(props) {
         index: index === undefined ? undefined : index + i
       });
     });
-  }, [entityType, props.onLink, props.onAction]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  [entityType, props.onLink, props.onAction]);
   var onCreate = React.useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(contentTypeId, index) {
       var _yield$createEntity, entity, slide;
@@ -1687,7 +1679,7 @@ function useLinkActionsProps(props) {
     return function onLinkSeveralExisting(_x4) {
       return _ref3.apply(this, arguments);
     };
-  }(); // FIXME: The memoization might rerun every time due to the always changing callback identities above 
+  }(); // FIXME: The memoization might rerun every time due to the always changing callback identities above
 
 
   return React.useMemo(function () {
@@ -1707,7 +1699,9 @@ function useLinkActionsProps(props) {
       onLinkedExisting: onLinkedExisting,
       itemsLength: itemsLength
     };
-  }, [entityType, canLinkMultiple, isDisabled, isEmpty, isFull, editorPermissions.canCreateEntity, editorPermissions.canLinkEntity, actionLabels, editorPermissions.creatableContentTypes.map(function (ct) {
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  [entityType, canLinkMultiple, isDisabled, isEmpty, isFull, editorPermissions.canCreateEntity, editorPermissions.canLinkEntity, actionLabels, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  editorPermissions.creatableContentTypes.map(function (ct) {
     return ct.sys.id;
   }).join(':'), onCreate, onLinkExisting, onLinkSeveralExisting, onCreated, onLinkedExisting, itemsLength]);
 }
@@ -1721,7 +1715,7 @@ function LinkEntityActions(_ref4) {
   return renderLinkActions(props);
 }
 
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line -- TODO: describe this disable  no-restricted-imports
 /**
  * @param {Date|string} date A valid constructor argument for moment()
  * @param {boolean=} short Render only Today/Tomorrow/Yesterday if valid. Defaults to false
@@ -1801,7 +1795,7 @@ var ScheduledIconWithTooltip = function ScheduledIconWithTooltip(_ref) {
       });
     }); // This should only be ever called once. Following the eslint hint to add used
     // dependencies will cause page freeze (infinite loop)
-    // eslint-disable-next-line
+    // eslint-disable-next-line -- TODO: describe this disable
   }, []);
 
   if (status.type === 'loading' || status.type === 'error') {
@@ -1997,7 +1991,7 @@ function useEntitiesStore(props) {
           }
         });
       }
-    });
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props.sdk, state.assets, state.entries]);
   return _extends({
     getOrLoadEntry: getOrLoadEntry,
@@ -2179,7 +2173,7 @@ function useContentTypePermissions(props) {
       return _checkContentTypeAccess.apply(this, arguments);
     }
 
-    void checkContentTypeAccess();
+    void checkContentTypeAccess(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [availableContentTypes]);
   return {
     creatableContentTypes: creatableContentTypes,
@@ -2191,7 +2185,7 @@ function useContentTypePermissions(props) {
 function fromFieldValidations(field) {
   var _field$items$validati, _field$items, _linkContentTypeValid, _linkMimetypeGroupVal;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
   var validations = [].concat(field.validations, (_field$items$validati = (_field$items = field.items) == null ? void 0 : _field$items.validations) != null ? _field$items$validati : []);
   var linkContentTypeValidations = validations.find(function (v) {
     return 'linkContentType' in v;
@@ -2319,7 +2313,7 @@ function useEditorPermissions(props) {
       return _checkCreateAccess.apply(this, arguments);
     }
 
-    void checkCreateAccess();
+    void checkCreateAccess(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [entityType, parameters.instance, creatableContentTypes]);
   React.useEffect(function () {
     if (parameters.instance.showLinkEntityAction === false) {
@@ -2381,7 +2375,7 @@ function useEditorPermissions(props) {
       return _checkLinkAccess.apply(this, arguments);
     }
 
-    void checkLinkAccess();
+    void checkLinkAccess(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [entityType, parameters.instance, readableContentTypes]);
   return {
     canCreateEntity: canCreateEntity,
@@ -2425,7 +2419,8 @@ function Editor(props) {
 
   var customCardRenderer = React.useCallback(function (cardProps, _, renderDefaultCard) {
     return props.renderCustomCard ? props.renderCustomCard(cardProps, linkActionsProps, renderDefaultCard) : false;
-  }, [linkActionsProps]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  [linkActionsProps]);
 
   if (!props.entityId) {
     return React.createElement(LinkEntityActions, Object.assign({
@@ -2459,11 +2454,40 @@ SingleReferenceEditor.defaultProps = {
   hasCardRemoveActions: true
 };
 
+var styles$1 = {
+  spaceIcon: /*#__PURE__*/emotion.css({
+    flexShrink: 0,
+    fill: tokens.purple600
+  }),
+  spaceName: /*#__PURE__*/emotion.css({
+    color: tokens.gray700,
+    fontSize: tokens.fontSizeS,
+    fontWeight: tokens.fontWeightDemiBold
+  })
+};
+function SpaceName(props) {
+  return React.createElement(f36Components.Tooltip, {
+    placement: "top",
+    as: "div",
+    content: "Space"
+  }, React.createElement(f36Components.Flex, {
+    alignItems: "center",
+    gap: "spacingXs",
+    marginRight: "spacingS"
+  }, React.createElement(f36Icons.FolderOpenTrimmedIcon, {
+    className: styles$1.spaceIcon,
+    size: "tiny",
+    "aria-label": "Source space"
+  }), React.createElement(f36Components.Text, {
+    className: styles$1.spaceName
+  }, props.spaceName)));
+}
+
 var getEntryTitle = fieldEditorShared.entityHelpers.getEntryTitle,
     getEntityDescription = fieldEditorShared.entityHelpers.getEntityDescription,
     getEntryStatus = fieldEditorShared.entityHelpers.getEntryStatus,
     getEntryImage = fieldEditorShared.entityHelpers.getEntryImage;
-var styles$1 = {
+var styles$2 = {
   scheduleIcon: /*#__PURE__*/emotion.css({
     marginRight: tokens.spacing2Xs
   })
@@ -2528,12 +2552,17 @@ function WrappedEntryCard(props) {
     size: props.size,
     isSelected: props.isSelected,
     status: status,
-    icon: React.createElement(ScheduledIconWithTooltip, {
+    style: props.spaceName ? {
+      backgroundColor: tokens.gray100
+    } : undefined,
+    icon: props.spaceName ? React.createElement(SpaceName, {
+      spaceName: props.spaceName
+    }) : React.createElement(ScheduledIconWithTooltip, {
       getEntityScheduledActions: props.getEntityScheduledActions,
       entityType: "Entry",
       entityId: props.entry.sys.id
     }, React.createElement(f36Icons.ClockIcon, {
-      className: styles$1.scheduleIcon,
+      className: styles$2.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -2644,7 +2673,7 @@ function FetchingWrappedEntryCard(props) {
       entries = _useEntities.entries;
 
   React.useEffect(function () {
-    getOrLoadEntry(props.entryId);
+    getOrLoadEntry(props.entryId); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props.entryId]);
   var size = props.viewType === 'link' ? 'small' : 'default';
   var entry = entries[props.entryId];
@@ -2702,7 +2731,8 @@ function FetchingWrappedEntryCard(props) {
         type: 'rendered',
         entity: 'Entry'
       });
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+
   }, [entry]);
   return React.useMemo(function () {
     if (entry === 'failed') {
@@ -2776,7 +2806,7 @@ function FetchingWrappedEntryCard(props) {
       }
     }
 
-    return renderDefaultCard();
+    return renderDefaultCard(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props, entityKey]);
 }
 
@@ -2875,7 +2905,8 @@ function Editor$1(props) {
   }));
   var customCardRenderer = React.useCallback(function (cardProps, _, renderDefaultCard) {
     return props.renderCustomCard ? props.renderCustomCard(cardProps, linkActionsProps, renderDefaultCard) : false;
-  }, [linkActionsProps]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+  [linkActionsProps]);
   return React.createElement(React.Fragment, null, props.children(_extends({}, props, {
     onSortStart: onSortStart,
     onSortEnd: onSortEnd,
@@ -2906,7 +2937,7 @@ MultipleReferenceEditor.defaultProps = {
   hasCardEditActions: true
 };
 
-var styles$2 = {
+var styles$3 = {
   containter: /*#__PURE__*/emotion.css({
     position: 'relative'
   }),
@@ -2924,13 +2955,13 @@ var DragHandle = function DragHandle(props) {
 
 var SortableLink = /*#__PURE__*/reactSortableHoc.SortableElement(function (props) {
   return React__default.createElement("div", {
-    className: styles$2.item
+    className: styles$3.item
   }, props.children);
 });
 var SortableLinkList = /*#__PURE__*/reactSortableHoc.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,
@@ -3039,14 +3070,14 @@ var groupToIconMap = {
   code: 'code',
   markup: 'markup'
 };
-var styles$3 = {
+var styles$4 = {
   scheduleIcon: /*#__PURE__*/emotion.css({
     marginRight: tokens.spacing2Xs
   })
 };
 var defaultProps$1 = {
   isClickable: true
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}; // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
 
 function getFileType(file) {
   if (!file) {
@@ -3101,7 +3132,7 @@ var WrappedAssetCard = function WrappedAssetCard(props) {
       entityType: "Asset",
       entityId: props.asset.sys.id
     }, React__default.createElement(f36Icons.ClockIcon, {
-      className: styles$3.scheduleIcon,
+      className: styles$4.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -3132,7 +3163,7 @@ var WrappedAssetCard = function WrappedAssetCard(props) {
 };
 WrappedAssetCard.defaultProps = defaultProps$1;
 
-var styles$4 = {
+var styles$5 = {
   scheduleIcon: /*#__PURE__*/emotion.css({
     marginRight: tokens.spacing2Xs
   })
@@ -3176,7 +3207,7 @@ var WrappedAssetLink = function WrappedAssetLink(props) {
       entityType: "Asset",
       entityId: props.asset.sys.id
     }, React__default.createElement(f36Icons.ClockIcon, {
-      className: styles$4.scheduleIcon,
+      className: styles$5.scheduleIcon,
       size: "small",
       variant: "muted",
       testId: "schedule-icon"
@@ -3207,7 +3238,7 @@ function FetchingWrappedAssetCard(props) {
       assets = _useEntities.assets;
 
   React.useEffect(function () {
-    getOrLoadAsset(props.assetId);
+    getOrLoadAsset(props.assetId); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props.assetId]);
   var asset = assets[props.assetId];
   var entityKey = asset === 'failed' ? 'failed' : asset === undefined ? 'undefined' : ":" + asset.sys.id + ":" + asset.sys.version;
@@ -3217,7 +3248,8 @@ function FetchingWrappedAssetCard(props) {
         type: 'rendered',
         entity: 'Asset'
       });
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+
   }, [asset]);
 
   var onEdit = /*#__PURE__*/function () {
@@ -3349,7 +3381,7 @@ function FetchingWrappedAssetCard(props) {
       }
     }
 
-    return renderDefaultCard();
+    return renderDefaultCard(); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props, entityKey]);
 }
 
@@ -3374,7 +3406,7 @@ SingleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
-var styles$5 = {
+var styles$6 = {
   gridContainter: /*#__PURE__*/emotion.css({
     position: 'relative',
     display: 'flex',
@@ -3398,12 +3430,12 @@ var DragHandle$1 = function DragHandle(props) {
 
 var SortableLink$1 = /*#__PURE__*/reactSortableHoc.SortableElement(function (props) {
   return React__default.createElement("div", {
-    className: styles$5.item
+    className: styles$6.item
   }, props.children);
 });
 var SortableLinkList$1 = /*#__PURE__*/reactSortableHoc.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,