@contentful/field-editor-reference 2.21.2 → 4.0.2

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

@@ -1,8 +1,9 @@
-import React__default, { useEffect, useState, useRef, useCallback, createElement, Fragment, useMemo, useReducer } from 'react';
-import { Dropdown, DropdownList, TextInput, Icon, DropdownListItem, Spinner, Button, Paragraph, Card, SectionHeading, IconButton, Tag, Tooltip, EntryCard, CardDragHandle, AssetCard } from '@contentful/forma-36-react-components';
-import { css, cx } from 'emotion';
-import tokens from '@contentful/forma-36-tokens';
+import React__default, { useState, useRef, useEffect, createElement, Fragment, useMemo, useCallback, useReducer } from 'react';
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
 import get from 'lodash-es/get';
+import { SearchIcon, PlusIcon, ChevronDownIcon, LinkIcon, CloseIcon, ClockIcon } from '@contentful/f36-icons';
+import { Menu, TextInput, Button, Paragraph, Card, SectionHeading, IconButton, Tooltip, EntryCard, MenuItem, MenuDivider, Text, AssetCard } from '@contentful/f36-components';
 import moment from 'moment';
 import deepEqual from 'deep-equal';
 import { FieldConnector, isValidImage, entityHelpers, shortenStorageUnit } from '@contentful/field-editor-shared';
@@ -93,21 +94,20 @@ var action = /*#__PURE__*/css({
   fontWeight: 'bold'
 });
 
-var useGlobalMouseUp = function useGlobalMouseUp(handler) {
-  useEffect(function () {
-    document.addEventListener('mouseup', handler);
-    return function () {
-      return document.removeEventListener('mouseup', handler);
-    };
-  }, [handler]);
-};
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var MAX_ITEMS_WITHOUT_SEARCH = 20;
+var menuPlacementMap = {
+  'bottom-left': 'bottom-start',
+  'bottom-right': 'bottom-end'
+};
 var styles = {
   wrapper: /*#__PURE__*/css({
     position: 'relative'
   }),
+  inputWrapper: /*#__PURE__*/css({
+    position: 'relative',
+    padding: "0 " + tokens.spacing2Xs
+  }),
   searchInput: function searchInput(parentHasDropdown) {
     return css({
       '& > input': {
@@ -147,7 +147,7 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
       dropdownSettings = _ref$dropdownSettings === void 0 ? {
     position: 'bottom-left'
   } : _ref$dropdownSettings,
-      renderCustomDropdownItems = _ref.renderCustomDropdownItems,
+      customDropdownItems = _ref.customDropdownItems,
       children = _ref.children;
 
   var _useState = useState(false),
@@ -164,7 +164,7 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
 
   var wrapper = useRef(null);
   var textField = useRef(null);
-  var dropdownRef = useRef(null);
+  var menuListRef = useRef(null);
   /*
     By default, dropdown wraps it's content, so it's width = the width of the widest item
     During search, menu items change, and so the widest menu item can change
@@ -174,11 +174,11 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
     That it had on initial mount and that fits any menu item in has
   */
 
-  var _useState4 = useState(0),
+  var _useState4 = useState(),
       dropdownWidth = _useState4[0],
       setDropdownWidth = _useState4[1];
 
-  var hasDropdown = contentTypes.length > 1 || !!renderCustomDropdownItems;
+  var hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
 
   var closeMenu = function closeMenu() {
     return setOpen(false);
@@ -189,10 +189,19 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
       setTimeout(function () {
         var _textField$current, _textField$current$qu;
 
-        textField == null ? void 0 : (_textField$current = textField.current) == null ? void 0 : (_textField$current$qu = _textField$current.querySelector('input')) == null ? void 0 : _textField$current$qu.focus();
+        (_textField$current = textField.current) == null ? void 0 : (_textField$current$qu = _textField$current.querySelector('input')) == null ? void 0 : _textField$current$qu.focus({
+          preventScroll: true
+        });
       }, 200);
     }
   }, [isOpen]);
+  useEffect(function () {
+    if (isOpen && !dropdownWidth) {
+      var _menuListRef$current;
+
+      setDropdownWidth((_menuListRef$current = menuListRef.current) == null ? void 0 : _menuListRef$current.clientWidth);
+    }
+  }, [isOpen, dropdownWidth]);
 
   var handleSelect = function handleSelect(item) {
     closeMenu();
@@ -208,20 +217,14 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
     }
   };
 
-  var toggleMenu = function toggleMenu() {
+  var handleMenuOpen = function handleMenuOpen() {
     if (hasDropdown) {
-      setOpen(!isOpen);
+      setOpen(true);
     } else {
       handleSelect(contentTypes[0]);
     }
   };
 
-  var mouseUpHandler = useCallback(function (event) {
-    if (wrapper && wrapper.current && dropdownRef && dropdownRef.current && !wrapper.current.contains(event.target) && !dropdownRef.current.contains(event.target)) {
-      closeMenu();
-    }
-  }, [wrapper]);
-  useGlobalMouseUp(mouseUpHandler);
   useEffect(function () {
     if (!isOpen) {
       setSearchInput('');
@@ -229,8 +232,7 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
   }, [isOpen]);
 
   var renderSearchResultsCount = function renderSearchResultsCount(resultsLength) {
-    return resultsLength ? React__default.createElement(DropdownListItem, {
-      isTitle: true,
+    return resultsLength ? React__default.createElement(Menu.SectionTitle, {
       testId: "add-entru-menu-search-results"
     }, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
   };
@@ -247,32 +249,26 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
     className: styles.wrapper,
     ref: wrapper,
     "data-test-id": testId
-  }, React__default.createElement(Dropdown, {
-    focusContainerOnOpen: false,
-    position: dropdownSettings.position,
+  }, React__default.createElement(Menu, {
+    placement: menuPlacementMap[dropdownSettings.position],
     isAutoalignmentEnabled: dropdownSettings.isAutoalignmentEnabled,
-    isOpen: isOpen && hasDropdown,
-    toggleElement: children({
-      isOpen: isOpen,
-      isSelecting: isSelecting,
-      openMenu: toggleMenu
-    }),
-    testId: "add-entry-menu",
-    getContainerRef: function getContainerRef(ref) {
-      dropdownRef.current = ref;
-
-      if (!dropdownWidth && ref) {
-        setDropdownWidth(ref.clientWidth);
-      }
-    }
-  }, renderCustomDropdownItems && React__default.createElement(DropdownList, {
+    isOpen: isOpen,
+    onClose: closeMenu,
+    onOpen: handleMenuOpen
+  }, React__default.createElement(Menu.Trigger, null, children({
+    isOpen: isOpen,
+    isSelecting: isSelecting
+  })), isOpen && React__default.createElement(Menu.List, {
     className: styles.dropdownList,
-    border: "top"
-  }, renderCustomDropdownItems({
-    closeMenu: closeMenu
-  })), isSearchable && React__default.createElement("div", {
+    style: {
+      width: dropdownWidth != undefined ? dropdownWidth + "px" : undefined,
+      maxHeight: maxDropdownHeight + "px"
+    },
+    ref: menuListRef,
+    testId: "add-entry-menu"
+  }, Boolean(customDropdownItems) && React__default.createElement(React__default.Fragment, null, customDropdownItems, React__default.createElement(Menu.Divider, null)), isSearchable && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     ref: textField,
-    className: styles.wrapper
+    className: styles.inputWrapper
   }, React__default.createElement(TextInput, {
     className: styles.searchInput(hasDropdown),
     placeholder: "Search all content types",
@@ -281,37 +277,22 @@ var CreateEntryMenuTrigger = function CreateEntryMenuTrigger(_ref) {
     onChange: function onChange(e) {
       return setSearchInput(e.target.value);
     }
-  }), React__default.createElement(Icon, {
-    icon: "Search",
+  }), React__default.createElement(SearchIcon, {
     className: styles.searchIcon
-  })), React__default.createElement(DropdownList, {
-    className: styles.dropdownList,
-    border: "top",
-    styles: {
-      width: dropdownWidth || '',
-      maxHeight: maxDropdownHeight
-    },
-    maxHeight: maxDropdownHeight
-  }, searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && React__default.createElement(React__default.Fragment, null, React__default.createElement(DropdownListItem, {
-    isTitle: true
-  }, "Suggested Content Type"), React__default.createElement(DropdownListItem, {
+  })), React__default.createElement(Menu.Divider, null)), searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && React__default.createElement(React__default.Fragment, null, React__default.createElement(Menu.SectionTitle, null, "Suggested Content Type"), React__default.createElement(Menu.Item, {
     testId: "suggested",
     onClick: function onClick() {
       return handleSelect(suggestedContentType);
     }
-  }, get(suggestedContentType, 'name')), React__default.createElement("hr", {
-    className: styles.separator
-  })), !searchInput && React__default.createElement(DropdownListItem, {
-    isTitle: true
-  }, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map(function (contentType, i) {
-    return React__default.createElement(DropdownListItem, {
+  }, get(suggestedContentType, 'name')), React__default.createElement(Menu.Divider, null)), !searchInput && React__default.createElement(Menu.SectionTitle, null, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map(function (contentType, i) {
+    return React__default.createElement(Menu.Item, {
       testId: "contentType",
       key: get(contentType, 'name') + "-" + i,
       onClick: function onClick() {
         return handleSelect(contentType);
       }
     }, get(contentType, 'name', 'Untitled'));
-  }) : React__default.createElement(DropdownListItem, {
+  }) : React__default.createElement(Menu.Item, {
     testId: "add-entru-menu-search-results"
   }, "No results found"))));
 };
@@ -337,7 +318,7 @@ var redesignStyles = /*#__PURE__*/_extends({}, standardStyles, {
 var CreateEntryLinkButton = function CreateEntryLinkButton(_ref) {
   var contentTypes = _ref.contentTypes,
       onSelect = _ref.onSelect,
-      renderCustomDropdownItems = _ref.renderCustomDropdownItems,
+      customDropdownItems = _ref.customDropdownItems,
       text = _ref.text,
       testId = _ref.testId,
       _ref$hasPlusIcon = _ref.hasPlusIcon,
@@ -351,9 +332,9 @@ var CreateEntryLinkButton = function CreateEntryLinkButton(_ref) {
     return ct.sys.id === suggestedContentTypeId;
   });
   var buttonText = text || "Add " + get(suggestedContentType || (contentTypes.length === 1 ? contentTypes[0] : {}), 'name', 'entry');
-  var hasDropdown = contentTypes.length > 1 || renderCustomDropdownItems; // TODO: Introduce `icon: string` and remove `hasPlusIcon` or remove "Plus" if we keep new layout.
+  var hasDropdown = contentTypes.length > 1 || customDropdownItems; // TODO: Introduce `icon: string` and remove `hasPlusIcon` or remove "Plus" if we keep new layout.
 
-  var plusIcon = hasPlusIcon ? 'Plus' : undefined; // TODO: Always use "New content" here if we fully switch to new layout.
+  var plusIcon = hasPlusIcon ? React__default.createElement(PlusIcon, null) : undefined; // TODO: Always use "New content" here if we fully switch to new layout.
 
   var contentTypesLabel = useExperimentalStyles ? 'New content' : undefined;
   var styles = useExperimentalStyles ? redesignStyles : standardStyles;
@@ -364,26 +345,19 @@ var CreateEntryLinkButton = function CreateEntryLinkButton(_ref) {
     onSelect: onSelect,
     testId: testId,
     dropdownSettings: dropdownSettings,
-    renderCustomDropdownItems: renderCustomDropdownItems
+    customDropdownItems: customDropdownItems
   }, function (_ref2) {
-    var openMenu = _ref2.openMenu,
-        isSelecting = _ref2.isSelecting;
-    return React__default.createElement(React__default.Fragment, null, isSelecting && React__default.createElement(Spinner, {
-      size: "small",
-      key: "spinner",
-      className: styles.spinnerMargin
-    }), React__default.createElement(Button, {
-      buttonType: "muted",
-      onClick: function onClick() {
-        openMenu();
-      },
+    var isSelecting = _ref2.isSelecting;
+    return React__default.createElement(Button, {
+      endIcon: hasDropdown ? React__default.createElement(ChevronDownIcon, null) : undefined,
+      variant: "secondary",
       className: styles.action,
-      disabled: disabled || isSelecting || contentTypes && contentTypes.length === 0,
-      icon: isSelecting ? undefined : plusIcon,
-      indicateDropdown: Boolean(hasDropdown),
+      isDisabled: disabled || isSelecting || contentTypes && contentTypes.length === 0,
+      startIcon: isSelecting ? undefined : plusIcon,
       size: "small",
-      testId: "create-entry-link-button"
-    }, buttonText));
+      testId: "create-entry-link-button",
+      isLoading: isSelecting
+    }, buttonText);
   });
 };
 
@@ -445,24 +419,24 @@ function LinkActions(props) {
       return contentTypeId ? props.onCreate(contentTypeId, props.itemsLength) : Promise.resolve();
     }
   }), props.entityType === 'Asset' && createElement(Button, {
-    disabled: props.isDisabled,
+    isDisabled: props.isDisabled,
     testId: testIds.createAndLink,
     onClick: function onClick() {
       props.onCreate(undefined, props.itemsLength);
     },
-    buttonType: "muted",
-    icon: "Plus",
+    variant: "secondary",
+    startIcon: createElement(PlusIcon, null),
     size: "small"
   }, labels.createNew()), createElement("span", {
     className: separator
   })), props.canLinkEntity && createElement(Button, {
-    disabled: props.isDisabled,
+    isDisabled: props.isDisabled,
     testId: testIds.linkExisting,
     onClick: function onClick() {
       props.onLinkExisting();
     },
-    buttonType: "muted",
-    icon: "Link",
+    variant: "secondary",
+    startIcon: createElement(LinkIcon, null),
     size: "small"
   }, labels.linkExisting({
     canLinkMultiple: props.canLinkMultiple
@@ -510,27 +484,23 @@ function CombinedEntryLinkActions(props) {
       onSelect: function onSelect(contentTypeId) {
         return contentTypeId ? props.onCreate(contentTypeId) : Promise.resolve();
       },
-      renderCustomDropdownItems: props.canLinkEntity ? function (_ref) {
-        var closeMenu = _ref.closeMenu;
-        return createElement(DropdownListItem, {
-          testId: testIds$1.linkExisting,
-          onClick: function onClick() {
-            closeMenu();
-            props.onLinkExisting();
-          }
-        }, "Add existing content");
-      } : undefined
+      customDropdownItems: props.canLinkEntity ? createElement(Menu.Item, {
+        testId: testIds$1.linkExisting,
+        onClick: function onClick() {
+          props.onLinkExisting();
+        }
+      }, "Add existing content") : undefined
     });
   } else if (props.canLinkEntity) {
     return createElement(Button, {
-      disabled: props.isDisabled,
+      isDisabled: props.isDisabled,
       testId: testIds$1.linkExisting,
       className: action,
       onClick: function onClick() {
         props.onLinkExisting();
       },
-      buttonType: "muted",
-      icon: "Link",
+      variant: "secondary",
+      startIcon: createElement(LinkIcon, null),
       size: "small"
     }, "Add existing content");
   }
@@ -546,28 +516,28 @@ function CombinedAssetLinkActions(props) {
   if (!props.canLinkEntity || !props.canCreateEntity) {
     if (props.canLinkEntity) {
       return createElement(Button, {
-        disabled: props.isDisabled,
+        isDisabled: props.isDisabled,
         testId: testIds$1.linkExisting,
         className: action,
         onClick: function onClick() {
           props.onLinkExisting();
         },
-        buttonType: "muted",
-        icon: "Plus",
+        variant: "secondary",
+        startIcon: createElement(PlusIcon, null),
         size: "small"
       }, "Add existing media");
     }
 
     if (props.canCreateEntity) {
       return createElement(Button, {
-        disabled: props.isDisabled,
+        isDisabled: props.isDisabled,
         testId: testIds$1.createAndLink,
         className: action,
         onClick: function onClick() {
           props.onCreate();
         },
-        buttonType: "muted",
-        icon: "Plus",
+        variant: "secondary",
+        startIcon: createElement(PlusIcon, null),
         size: "small"
       }, "Add media");
     }
@@ -577,35 +547,32 @@ function CombinedAssetLinkActions(props) {
   //  that works without content types to cover asset use-case.
 
 
-  return createElement(Dropdown, {
+  return createElement(Menu, {
     isOpen: isOpen,
     onClose: function onClose() {
-      return setOpen(false);
+      setOpen(false);
     },
-    toggleElement: createElement(Fragment, null, createElement(Button, {
-      disabled: props.isDisabled,
-      testId: testIds$1.actionsWrapper,
-      className: action,
-      onClick: function onClick() {
-        setOpen(!isOpen);
-      },
-      buttonType: "muted",
-      icon: "Plus",
-      indicateDropdown: true,
-      size: "small"
-    }, "Add media"))
-  }, createElement(DropdownList, {
+    onOpen: function onOpen() {
+      setOpen(true);
+    }
+  }, createElement(Menu.Trigger, null, createElement(Button, {
+    endIcon: createElement(ChevronDownIcon, null),
+    isDisabled: props.isDisabled,
+    testId: testIds$1.actionsWrapper,
+    className: action,
+    variant: "secondary",
+    startIcon: createElement(PlusIcon, null),
+    size: "small"
+  }, "Add media")), isOpen && createElement(Menu.List, {
     testId: testIds$1.dropdown
-  }, createElement(DropdownListItem, {
+  }, createElement(Menu.Item, {
     testId: testIds$1.linkExisting,
     onClick: function onClick() {
-      setOpen(false);
       props.onLinkExisting();
     }
-  }, "Add existing media"), createElement(DropdownListItem, {
+  }, "Add existing media"), createElement(Menu.Item, {
     testId: testIds$1.createAndLink,
     onClick: function onClick() {
-      setOpen(false);
       props.onCreate();
     }
   }, "Add new media")));
@@ -632,13 +599,15 @@ function MissingEntityCard(props) {
     className: card
   }, React__default.createElement("div", {
     className: props.asSquare ? squareCard : ''
-  }, React__default.createElement(SectionHeading, null, props.entityType === 'Entry' && 'Entry is missing or inaccessible', props.entityType === 'Asset' && 'Asset is missing or inaccessible')), !props.isDisabled && props.onRemove && React__default.createElement(IconButton, {
+  }, React__default.createElement(SectionHeading, {
+    marginBottom: "none"
+  }, props.entityType === 'Entry' && 'Entry is missing or inaccessible', props.entityType === 'Asset' && 'Asset is missing or inaccessible')), !props.isDisabled && props.onRemove && React__default.createElement(IconButton, {
+    variant: "transparent",
+    icon: React__default.createElement(CloseIcon, {
+      variant: "muted"
+    }),
     className: close,
-    buttonType: "muted",
-    label: "Delete",
-    iconProps: {
-      icon: 'Close'
-    },
+    "aria-label": "Delete",
     onClick: function onClick() {
       props.onRemove && props.onRemove();
     }
@@ -1773,67 +1742,20 @@ var formatDateAndTime = function formatDateAndTime(date, _short2) {
   return formatDate(date, _short2) + " at " + formatTime(date);
 };
 
-var styles$1 = {
-  // @ts-expect-error
-  statusTag: /*#__PURE__*/css({
-    marginLeft: tokens.spacingM,
-    zIndex: '0 !important'
-  }),
-  positiveColor: /*#__PURE__*/css({
-    color: tokens.colorPositive
-  }),
-  secondaryColor: /*#__PURE__*/css({
-    color: tokens.gray500
-  }),
-  marginRightXS: /*#__PURE__*/css({
-    marginRight: tokens.spacing2Xs
-  }),
-  paragraph: /*#__PURE__*/css({
-    textAlign: 'center',
-    color: tokens.gray500
-  }),
-  time: /*#__PURE__*/css({
-    color: tokens.gray200
-  })
-};
-var ScheduleTooltipContent = function ScheduleTooltipContent(_ref) {
+var getScheduleTooltipContent = function getScheduleTooltipContent(_ref) {
   var job = _ref.job,
       jobsCount = _ref.jobsCount;
-  var colorPalette = '';
-
-  switch (job.action.toLowerCase()) {
-    case 'publish':
-      colorPalette = styles$1.positiveColor;
-      break;
-
-    case 'unpublish':
-      colorPalette = styles$1.secondaryColor;
-      break;
-
-    default:
-      colorPalette = styles$1.secondaryColor;
-  }
-
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
-    className: styles$1.time,
-    "data-test-id": "cf-scheduled-time-tootlip-content"
-  }, formatDateAndTime(job.scheduledFor.datetime)), React__default.createElement(Tag, {
-    tagType: job.action === 'publish' ? 'positive' : 'secondary',
-    testId: "scheduled-publish-trigger",
-    className: cx(styles$1.statusTag, colorPalette)
-  }, job.action.toUpperCase()), jobsCount > 1 && React__default.createElement(Paragraph, {
-    className: styles$1.paragraph
-  }, "+ ", jobsCount - 1, " more"));
+  return "Will " + job.action.toLowerCase() + " " + formatDateAndTime(job.scheduledFor.datetime).toLowerCase() + "\n  " + (jobsCount > 1 && "+ " + (jobsCount - 1) + " more");
 };
 var ScheduleTooltip = function ScheduleTooltip(_ref2) {
   var job = _ref2.job,
       jobsCount = _ref2.jobsCount,
       children = _ref2.children;
   return React__default.createElement(Tooltip, {
-    place: "top",
+    placement: "top",
     testId: job.sys.id,
-    containerElement: "div",
-    content: React__default.createElement(ScheduleTooltipContent, {
+    as: "div",
+    content: getScheduleTooltipContent({
       job: job,
       jobsCount: jobsCount
     })
@@ -2489,7 +2411,7 @@ var getEntryTitle = entityHelpers.getEntryTitle,
     getEntityDescription = entityHelpers.getEntityDescription,
     getEntryStatus = entityHelpers.getEntryStatus,
     getEntryImage = entityHelpers.getEntryImage;
-var styles$2 = {
+var styles$1 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -2544,75 +2466,61 @@ function WrappedEntryCard(props) {
     localeCode: props.localeCode,
     defaultLocaleCode: props.defaultLocaleCode
   });
-  return (// TODO: There should be dedicated components for each `size` with a different
-    //  set of params (e.g. `file` should only be relevant for the "small" size card.
-    createElement(EntryCard, {
-      href: props.entryUrl,
-      title: title,
-      description: description,
-      contentType: contentType == null ? void 0 : contentType.name,
-      size: props.size,
-      selected: props.isSelected,
-      status: status,
-      statusIcon: createElement(ScheduledIconWithTooltip, {
-        getEntityScheduledActions: props.getEntityScheduledActions,
-        entityType: "Entry",
-        entityId: props.entry.sys.id
-      }, createElement(Icon, {
-        className: styles$2.scheduleIcon,
-        icon: "Clock",
-        size: "small",
-        color: "muted",
-        testId: "schedule-icon"
-      })),
-      thumbnailElement: file && isValidImage(file) ? createElement(AssetThumbnail, {
-        file: file
-      }) : null,
-      cardDragHandleComponent: props.cardDragHandle,
-      withDragHandle: !!props.cardDragHandle,
-      dropdownListElements: props.onEdit || props.onRemove ? createElement(Fragment, null, createElement(DropdownList // @ts-expect-error
-      , {
-        // @ts-expect-error
-        onClick: function onClick(e) {
-          e.stopPropagation();
-        }
-      }, props.hasCardEditActions && props.onEdit && createElement(DropdownListItem, {
-        onClick: function onClick() {
-          props.onEdit && props.onEdit();
-        },
-        testId: "edit"
-      }, "Edit"), props.onRemove && createElement(DropdownListItem, {
-        onClick: function onClick() {
-          props.onRemove && props.onRemove();
-        },
-        isDisabled: props.isDisabled,
-        testId: "delete"
-      }, "Remove")), props.hasMoveOptions ? createElement(DropdownList, {
-        border: "top",
-        // @ts-expect-error
-        onClick: function onClick(e) {
-          e.stopPropagation();
-        }
-      }, createElement(DropdownListItem, {
-        onClick: function onClick() {
-          return props.onMoveTop && props.onMoveTop();
-        },
-        isDisabled: !props.onMoveTop,
-        testId: "move-top"
-      }, "Move to top"), createElement(DropdownListItem, {
-        onClick: function onClick() {
-          return props.onMoveBottom && props.onMoveBottom();
-        },
-        isDisabled: !props.onMoveBottom,
-        testId: "move-bottom"
-      }, "Move to bottom")) : createElement(Fragment, null)) : undefined,
-      onClick: function onClick(e) {
-        e.preventDefault();
-        if (!props.isClickable) return;
+  return createElement(EntryCard, {
+    as: props.entryUrl ? 'a' : 'article',
+    href: props.entryUrl,
+    title: title,
+    description: description,
+    contentType: contentType == null ? void 0 : contentType.name,
+    size: props.size,
+    isSelected: props.isSelected,
+    status: status,
+    icon: createElement(ScheduledIconWithTooltip, {
+      getEntityScheduledActions: props.getEntityScheduledActions,
+      entityType: "Entry",
+      entityId: props.entry.sys.id
+    }, createElement(ClockIcon, {
+      className: styles$1.scheduleIcon,
+      size: "small",
+      variant: "muted",
+      testId: "schedule-icon"
+    })),
+    thumbnailElement: file && isValidImage(file) ? createElement(AssetThumbnail, {
+      file: file
+    }) : undefined,
+    dragHandleRender: props.renderDragHandle,
+    withDragHandle: !!props.renderDragHandle,
+    actions: props.onEdit || props.onRemove ? [props.hasCardEditActions && props.onEdit ? createElement(MenuItem, {
+      key: "edit",
+      testId: "edit",
+      onClick: function onClick() {
         props.onEdit && props.onEdit();
       }
-    })
-  );
+    }, "Edit") : null, props.onRemove ? createElement(MenuItem, {
+      key: "delete",
+      testId: "delete",
+      onClick: function onClick() {
+        props.onRemove && props.onRemove();
+      }
+    }, "Remove") : null, props.hasMoveOptions && (props.onMoveTop || props.onMoveBottom) ? createElement(MenuDivider, null) : null, props.hasMoveOptions && props.onMoveTop ? createElement(MenuItem, {
+      onClick: function onClick() {
+        return props.onMoveTop && props.onMoveTop();
+      },
+      testId: "move-top"
+    }, "Move to top") : null, props.hasMoveOptions && props.onMoveBottom ? createElement(MenuItem, {
+      onClick: function onClick() {
+        return props.onMoveBottom && props.onMoveBottom();
+      },
+      testId: "move-bottom"
+    }, "Move to bottom") : null].filter(function (item) {
+      return item;
+    }) : [],
+    onClick: function onClick(e) {
+      e.preventDefault();
+      if (!props.isClickable) return;
+      props.onEdit && props.onEdit();
+    }
+  });
 }
 WrappedEntryCard.defaultProps = defaultProps;
 
@@ -2763,7 +2671,7 @@ function FetchingWrappedEntryCard(props) {
     if (entry === undefined) {
       return createElement(EntryCard, {
         size: size,
-        loading: true
+        isLoading: true
       });
     }
 
@@ -2778,7 +2686,7 @@ function FetchingWrappedEntryCard(props) {
       size: size,
       localeCode: props.sdk.field.locale,
       defaultLocaleCode: props.sdk.locales["default"],
-      cardDragHandle: props.cardDragHandle,
+      renderDragHandle: props.renderDragHandle,
       onEdit: onEdit,
       onRemove: onRemoveEntry,
       onMoveTop: props.onMoveTop,
@@ -2935,7 +2843,7 @@ MultipleReferenceEditor.defaultProps = {
   hasCardEditActions: true
 };
 
-var styles$3 = {
+var styles$2 = {
   containter: /*#__PURE__*/css({
     position: 'relative'
   }),
@@ -2943,18 +2851,23 @@ var styles$3 = {
     marginBottom: tokens.spacingM
   })
 };
-var DragHandle = /*#__PURE__*/SortableHandle(function () {
-  return React__default.createElement(CardDragHandle, null, "Reorder item");
-});
+
+var DragHandle = function DragHandle(props) {
+  var SortableDragHandle = SortableHandle(function () {
+    return props.drag;
+  });
+  return React__default.createElement(SortableDragHandle, null);
+};
+
 var SortableLink = /*#__PURE__*/SortableElement(function (props) {
   return React__default.createElement("div", {
-    className: styles$3.item
+    className: styles$2.item
   }, props.children);
 });
 var SortableLinkList = /*#__PURE__*/SortableContainer(function (props) {
   var lastIndex = props.items.length - 1;
   return React__default.createElement("div", {
-    className: styles$3.containter
+    className: styles$2.containter
   }, props.items.map(function (item, index) {
     return React__default.createElement(SortableLink, {
       disabled: props.isDisabled,
@@ -2977,7 +2890,7 @@ var SortableLinkList = /*#__PURE__*/SortableContainer(function (props) {
       onMoveBottom: index !== lastIndex ? function () {
         return props.onMove(index, lastIndex);
       } : undefined,
-      cardDragHandle: props.isDisabled ? undefined : React__default.createElement(DragHandle, null)
+      renderDragHandle: props.isDisabled ? undefined : DragHandle
     })));
   }));
 });
@@ -2993,17 +2906,6 @@ function MultipleEntryReferenceEditor(props) {
   });
 }
 
-var styles$4 = {
-  cardDropdown: /*#__PURE__*/css({
-    width: '300px'
-  }),
-  truncated: /*#__PURE__*/css({
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  })
-};
-
 function downloadAsset(url) {
   window.open(url, '_blank', 'noopener,noreferrer');
 }
@@ -3014,47 +2916,51 @@ function renderAssetInfo(props) {
   var mimeType = get(entityFile, 'contentType');
   var fileSize = get(entityFile, 'details.size');
   var image = get(entityFile, 'details.image');
-  return React__default.createElement(DropdownList, {
-    border: "top",
-    className: styles$4.cardDropdown,
-    // @ts-expect-error
-    onClick: function onClick(e) {
-      e.stopPropagation();
-    }
-  }, React__default.createElement(DropdownListItem, {
-    isTitle: true
-  }, "File info"), fileName && React__default.createElement(DropdownListItem, null, React__default.createElement("div", {
-    className: styles$4.truncated
-  }, fileName)), mimeType && React__default.createElement(DropdownListItem, null, React__default.createElement("div", null, mimeType)), fileSize && React__default.createElement(DropdownListItem, null, shortenStorageUnit(fileSize, 'B')), image && React__default.createElement(DropdownListItem, null, image.width + " \xD7 " + image.height));
+  return [React__default.createElement(Menu.SectionTitle, {
+    key: "file-section"
+  }, "File info"), fileName && React__default.createElement(Menu.Item, {
+    key: "file-name"
+  }, React__default.createElement(Text, {
+    isTruncated: true
+  }, fileName)), mimeType && React__default.createElement(Menu.Item, {
+    key: "file-type"
+  }, React__default.createElement(Text, {
+    isTruncated: true
+  }, mimeType)), fileSize && React__default.createElement(Menu.Item, {
+    key: "file-size"
+  }, shortenStorageUnit(fileSize, 'B')), image && React__default.createElement(Menu.Item, {
+    key: "file-dimentions"
+  }, image.width + " \xD7 " + image.height)].filter(function (item) {
+    return item;
+  });
 }
 function renderActions(props) {
   var entityFile = props.entityFile,
       isDisabled = props.isDisabled,
       onEdit = props.onEdit,
       onRemove = props.onRemove;
-  return React__default.createElement(DropdownList, {
-    className: styles$4.cardDropdown,
-    // @ts-expect-error
-    onClick: function onClick(e) {
-      e.stopPropagation();
-    }
-  }, React__default.createElement(DropdownListItem, {
-    isTitle: true
-  }, "Actions"), onEdit && React__default.createElement(DropdownListItem, {
+  return [React__default.createElement(Menu.SectionTitle, {
+    key: "section-title"
+  }, "Actions"), onEdit ? React__default.createElement(Menu.Item, {
+    key: "edit",
     onClick: onEdit,
     testId: "card-action-edit"
-  }, "Edit"), entityFile && React__default.createElement(DropdownListItem, {
+  }, "Edit") : null, entityFile ? React__default.createElement(Menu.Item, {
+    key: "download",
     onClick: function onClick() {
       if (typeof entityFile.url === 'string') {
         downloadAsset(entityFile.url);
       }
     },
     testId: "card-action-download"
-  }, "Download"), onRemove && React__default.createElement(DropdownListItem, {
-    isDisabled: isDisabled,
+  }, "Download") : null, onRemove ? React__default.createElement(Menu.Item, {
+    key: "remove",
+    disabled: isDisabled,
     onClick: onRemove,
     testId: "card-action-remove"
-  }, "Remove"));
+  }, "Remove") : null].filter(function (item) {
+    return item;
+  });
 }
 
 var groupToIconMap = {
@@ -3070,7 +2976,7 @@ var groupToIconMap = {
   code: 'code',
   markup: 'markup'
 };
-var styles$5 = {
+var styles$3 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -3118,47 +3024,49 @@ var WrappedAssetCard = function WrappedAssetCard(props) {
     defaultTitle: 'Untitled'
   });
   var entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
+  var href = getAssetUrl ? getAssetUrl(props.asset.sys.id) : undefined;
   return React__default.createElement(AssetCard, {
+    as: href ? 'a' : 'article',
     type: getFileType(entityFile),
     title: entityTitle,
     className: className,
-    selected: isSelected,
-    href: getAssetUrl ? getAssetUrl(props.asset.sys.id) : undefined,
+    isSelected: isSelected,
+    href: href,
     status: status,
-    statusIcon: React__default.createElement(ScheduledIconWithTooltip, {
+    icon: React__default.createElement(ScheduledIconWithTooltip, {
       getEntityScheduledActions: props.getEntityScheduledActions,
       entityType: "Asset",
       entityId: props.asset.sys.id
-    }, React__default.createElement(Icon, {
-      className: styles$5.scheduleIcon,
-      icon: "Clock",
+    }, React__default.createElement(ClockIcon, {
+      className: styles$3.scheduleIcon,
       size: "small",
-      color: "muted",
+      variant: "muted",
       testId: "schedule-icon"
     })),
     src: entityFile && entityFile.url ? size === 'small' ? entityFile.url + "?w=150&h=150&fit=thumb" : entityFile.url + "?h=300" : '',
-    // @ts-expect-error
     onClick: function onClick(e) {
       e.preventDefault();
       if (!isClickable) return;
       onEdit && onEdit();
     },
-    cardDragHandleComponent: props.cardDragHandle,
-    withDragHandle: !!props.cardDragHandle,
-    dropdownListElements: React__default.createElement(React__default.Fragment, null, renderActions({
+    dragHandleRender: props.renderDragHandle,
+    withDragHandle: !!props.renderDragHandle,
+    actions: [].concat(renderActions({
       entityFile: entityFile,
       isDisabled: isDisabled,
       onEdit: onEdit,
       onRemove: onRemove
     }), entityFile ? renderAssetInfo({
       entityFile: entityFile
-    }) : React__default.createElement("span", null)),
+    }) : []).filter(function (item) {
+      return item;
+    }),
     size: size
   });
 };
 WrappedAssetCard.defaultProps = defaultProps$1;
 
-var styles$6 = {
+var styles$4 = {
   scheduleIcon: /*#__PURE__*/css({
     marginRight: tokens.spacing2Xs
   })
@@ -3187,37 +3095,42 @@ var WrappedAssetLink = function WrappedAssetLink(props) {
   });
   var entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
   return React__default.createElement(EntryCard, {
+    as: href ? 'a' : 'article',
     contentType: "Asset",
     title: entityTitle,
     className: className,
     href: href,
     size: "small",
     status: status,
-    statusIcon: React__default.createElement(ScheduledIconWithTooltip, {
+    thumbnailElement: entityFile && isValidImage(entityFile) ? React__default.createElement(AssetThumbnail, {
+      file: entityFile
+    }) : undefined,
+    icon: React__default.createElement(ScheduledIconWithTooltip, {
       getEntityScheduledActions: props.getEntityScheduledActions,
       entityType: "Asset",
       entityId: props.asset.sys.id
-    }, React__default.createElement(Icon, {
-      className: styles$6.scheduleIcon,
-      icon: "Clock",
+    }, React__default.createElement(ClockIcon, {
+      className: styles$4.scheduleIcon,
       size: "small",
-      color: "muted",
+      variant: "muted",
       testId: "schedule-icon"
     })),
     onClick: function onClick(e) {
       e.preventDefault();
       onEdit();
     },
-    cardDragHandleComponent: props.cardDragHandle,
-    withDragHandle: !!props.cardDragHandle,
-    dropdownListElements: React__default.createElement(React__default.Fragment, null, renderActions({
+    dragHandleRender: props.renderDragHandle,
+    withDragHandle: !!props.renderDragHandle,
+    actions: [renderActions({
       entityFile: entityFile,
       isDisabled: isDisabled,
       onEdit: onEdit,
       onRemove: onRemove
     }), entityFile ? renderAssetInfo({
       entityFile: entityFile
-    }) : React__default.createElement("span", null))
+    }) : null].filter(function (item) {
+      return item;
+    })
   });
 };
 
@@ -3320,7 +3233,7 @@ function FetchingWrappedAssetCard(props) {
       isDisabled: props.isDisabled,
       localeCode: props.sdk.field.locale,
       defaultLocaleCode: props.sdk.locales["default"],
-      cardDragHandle: props.cardDragHandle,
+      renderDragHandle: props.renderDragHandle,
       onEdit: onEdit,
       onRemove: onRemove
     };
@@ -3329,7 +3242,7 @@ function FetchingWrappedAssetCard(props) {
       if (asset === undefined) {
         return createElement(EntryCard, {
           size: "small",
-          loading: true
+          isLoading: true
         });
       }
 
@@ -3342,10 +3255,7 @@ function FetchingWrappedAssetCard(props) {
     if (asset === undefined) {
       return createElement(AssetCard, {
         size: size,
-        isLoading: true,
-        title: "",
-        src: "",
-        href: ""
+        isLoading: true
       });
     }
 
@@ -3398,7 +3308,7 @@ SingleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
-var styles$7 = {
+var styles$5 = {
   gridContainter: /*#__PURE__*/css({
     position: 'relative',
     display: 'flex',
@@ -3412,17 +3322,22 @@ var styles$7 = {
     marginRight: tokens.spacingM
   })
 };
-var DragHandle$1 = /*#__PURE__*/SortableHandle(function () {
-  return React__default.createElement(CardDragHandle, null, "Reorder item");
-});
+
+var DragHandle$1 = function DragHandle(props) {
+  var SortableDragHandle = SortableHandle(function () {
+    return props.drag;
+  });
+  return React__default.createElement(SortableDragHandle, null);
+};
+
 var SortableLink$1 = /*#__PURE__*/SortableElement(function (props) {
   return React__default.createElement("div", {
-    className: styles$7.item
+    className: styles$5.item
   }, props.children);
 });
 var SortableLinkList$1 = /*#__PURE__*/SortableContainer(function (props) {
   return React__default.createElement("div", {
-    className: props.viewType === 'card' ? styles$7.gridContainter : styles$7.container
+    className: props.viewType === 'card' ? styles$5.gridContainter : styles$5.container
   }, props.items.map(function (item, index) {
     return React__default.createElement(SortableLink$1, {
       disabled: props.isDisabled,
@@ -3437,7 +3352,7 @@ var SortableLinkList$1 = /*#__PURE__*/SortableContainer(function (props) {
           return i !== index;
         }));
       },
-      cardDragHandle: props.isDisabled ? undefined : React__default.createElement(DragHandle$1, null)
+      renderDragHandle: props.isDisabled ? undefined : DragHandle$1
     })));
   }));
 });
@@ -3456,5 +3371,5 @@ MultipleMediaEditor.defaultProps = {
   isInitiallyDisabled: true
 };
 
-export { AssetThumbnail, CombinedLinkActions, CreateEntryLinkButton, CreateEntryMenuTrigger, EntityProvider, MissingEntityCard, MultipleEntryReferenceEditor, MultipleMediaEditor, ScheduleTooltipContent, ScheduledIconWithTooltip, SingleEntryReferenceEditor, SingleMediaEditor, WrappedAssetCard, WrappedEntryCard, useEntities };
+export { AssetThumbnail, CombinedLinkActions, CreateEntryLinkButton, CreateEntryMenuTrigger, EntityProvider, MissingEntityCard, MultipleEntryReferenceEditor, MultipleMediaEditor, ScheduledIconWithTooltip, SingleEntryReferenceEditor, SingleMediaEditor, WrappedAssetCard, WrappedEntryCard, getScheduleTooltipContent, useEntities };
 //# sourceMappingURL=field-editor-reference.esm.js.map