@contentful/field-editor-reference 5.19.0 → 5.20.0

package/dist/esm/components/CreateEntryLinkButton/CreateEntryLinkButton.js

@@ -19,15 +19,17 @@ const redesignStyles = {
         maxWidth: '300px'
     })
 };
-export const CreateEntryLinkButton = ({ contentTypes , onSelect , customDropdownItems , text , testId , hasPlusIcon =false , useExperimentalStyles , suggestedContentTypeId , dropdownSettings , disabled =false  })=>{
+export const CreateEntryLinkButton = ({ contentTypes, onSelect, customDropdownItems, text, testId, hasPlusIcon = false, useExperimentalStyles, suggestedContentTypeId, dropdownSettings, disabled = false })=>{
     contentTypes = contentTypes.sort((a, b)=>a.name.localeCompare(b.name));
     const suggestedContentType = contentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
     const buttonText = text || `Add ${get(suggestedContentType || (contentTypes.length === 1 ? contentTypes[0] : {}), 'name', 'entry')}`;
     const hasDropdown = contentTypes.length > 1 || customDropdownItems;
-    const plusIcon = hasPlusIcon ? React.createElement(PlusIcon, null) : undefined;
+    // TODO: Introduce `icon: string` and remove `hasPlusIcon` or remove "Plus" if we keep new layout.
+    const plusIcon = hasPlusIcon ? /*#__PURE__*/ React.createElement(PlusIcon, null) : undefined;
+    // TODO: Always use "New content" here if we fully switch to new layout.
     const contentTypesLabel = useExperimentalStyles ? 'New content' : undefined;
     const styles = useExperimentalStyles ? redesignStyles : standardStyles;
-    return React.createElement(CreateEntryMenuTrigger, {
+    return /*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, {
         contentTypes: contentTypes,
         suggestedContentTypeId: suggestedContentTypeId,
         contentTypesLabel: contentTypesLabel,
@@ -35,8 +37,8 @@ export const CreateEntryLinkButton = ({ contentTypes , onSelect , customDropdown
         testId: testId,
         dropdownSettings: dropdownSettings,
         customDropdownItems: customDropdownItems
-    }, ({ isSelecting  })=>React.createElement(Button, {
-            endIcon: hasDropdown ? React.createElement(ChevronDownIcon, null) : undefined,
+    }, ({ isSelecting })=>/*#__PURE__*/ React.createElement(Button, {
+            endIcon: hasDropdown ? /*#__PURE__*/ React.createElement(ChevronDownIcon, null) : undefined,
             variant: "secondary",
             className: styles.action,
             isDisabled: disabled || isSelecting,

package/dist/esm/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.js

@@ -37,14 +37,14 @@ describe('CreateEntryLinkButton general', ()=>{
         }
     };
     it('renders with multiple content types as list', ()=>{
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, props));
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, props));
         expect(getByTestId('create-entry-button-menu-trigger')).toBeDefined();
         const link = findButton(getByTestId);
         expect(link).toBeDefined();
         expect(link.textContent).toBe('Add entry');
     });
     it('renders dropdown menu on click when with multiple content types', ()=>{
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, props));
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, props));
         fireEvent.click(findButton(getByTestId));
         const menu = getByTestId('add-entry-menu');
         expect(menu).toBeDefined();
@@ -54,7 +54,7 @@ describe('CreateEntryLinkButton general', ()=>{
     });
     it('renders suggestedContentType as text when given', ()=>{
         const suggestedContentTypeId = 'ID_2';
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             ...props,
             suggestedContentTypeId: suggestedContentTypeId
         }));
@@ -64,7 +64,7 @@ describe('CreateEntryLinkButton general', ()=>{
         expect(button.textContent).toBe(`Add ${CONTENT_TYPE_2.name}`);
     });
     it('renders the name of the content type as part of the text if only 1 content type is given', ()=>{
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             onSelect: props.onSelect,
             contentTypes: [
                 CONTENT_TYPE_1
@@ -80,7 +80,7 @@ describe('CreateEntryLinkButton general', ()=>{
             text: 'CUSTOM_TEXT',
             hasPlusIcon: true
         };
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             ...props,
             ...propsOverrides
         }));
@@ -101,13 +101,13 @@ describe('CreateEntryLinkButton with multiple entries', ()=>{
         }
     };
     it('should render dropdown items for each content type', ()=>{
-        const { getByTestId , getAllByTestId  } = render(React.createElement(CreateEntryLinkButton, props));
+        const { getByTestId, getAllByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, props));
         fireEvent.click(findButton(getByTestId));
         expect(getAllByTestId('contentType')).toHaveLength(props.contentTypes.length);
     });
     it('calls onSelect after click on menu item', ()=>{
         const selectSpy = jest.fn();
-        const { getByTestId , getAllByTestId  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId, getAllByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             ...props,
             onSelect: selectSpy
         }));
@@ -127,7 +127,7 @@ describe('CreateEntryLinkButton with a single entry', ()=>{
     };
     it('should fire the onSelect function when clicked', ()=>{
         const onSelectStub = jest.fn();
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             ...props,
             onSelect: onSelectStub
         }));
@@ -139,7 +139,7 @@ describe('CreateEntryLinkButton with a single entry', ()=>{
 describe('CreateEntryLinkButton common', ()=>{
     it('should render a spinner if onSelect returns a promise', async ()=>{
         const onSelect = jest.fn(()=>new Promise((resolve)=>setTimeout(resolve, 1000)));
-        const { getByTestId , container  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId, container } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],
@@ -155,7 +155,7 @@ describe('CreateEntryLinkButton common', ()=>{
     });
     it('should hide a spinner after the promise from onSelect resolves', async ()=>{
         const onSelect = jest.fn(()=>new Promise((resolve)=>setTimeout(resolve, 500)));
-        const { getByTestId , container  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId, container } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],
@@ -172,7 +172,7 @@ describe('CreateEntryLinkButton common', ()=>{
     });
     it('does not emit onSelect on subsequent click before the promise from onSelect resolves', async ()=>{
         const onSelect = jest.fn(()=>new Promise((resolve)=>setTimeout(()=>resolve(undefined), 200)));
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],
@@ -188,7 +188,7 @@ describe('CreateEntryLinkButton common', ()=>{
     });
     it('emits onSelect on subsequent click after the promise from onSelect resolves', async ()=>{
         const onSelect = jest.fn(()=>Promise.resolve());
-        const { getByTestId  } = render(React.createElement(CreateEntryLinkButton, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],

package/dist/esm/components/CreateEntryLinkButton/CreateEntryMenuTrigger.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */ import React, { useState, useRef, useEffect } from 'react';
 import { TextInput, Menu } from '@contentful/f36-components';
 import { SearchIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
@@ -36,16 +36,23 @@ const styles = {
         borderColor: tokens.gray200
     })
 };
-export const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId , contentTypesLabel , onSelect , testId , dropdownSettings ={
+export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentTypesLabel, onSelect, testId, dropdownSettings = {
     position: 'bottom-left'
-} , customDropdownItems , children , menuProps  })=>{
+}, customDropdownItems, children, menuProps })=>{
     const [isOpen, setOpen] = useState(false);
     const [isSelecting, setSelecting] = useState(false);
     const [searchInput, setSearchInput] = useState('');
     const wrapper = useRef(null);
     const textField = useRef(null);
     const menuListRef = useRef(null);
-    const [dropdownWidth, setDropdownWidth] = useState();
+    /*
+    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
+    This leads to menu always changing it's width
+    To prevent this, we get the width of the menu item after the first mount of a dropdown (when all the content is displayed)
+    And hardcode it through the class name. This way we ensure that even during search the menu will keep that max width
+    That it had on initial mount and that fits any menu item in has
+  */ const [dropdownWidth, setDropdownWidth] = useState();
     const hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
     const closeMenu = ()=>setOpen(false);
     useEffect(()=>{
@@ -70,6 +77,7 @@ export const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId ,
     const handleSelect = (item)=>{
         closeMenu();
         const res = onSelect(item.sys.id);
+        // TODO: Convert to controllable component.
         if (res && typeof res.then === 'function') {
             setSelecting(true);
             res.then(()=>setSelecting(false), ()=>setSelecting(false));
@@ -89,28 +97,28 @@ export const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId ,
     }, [
         isOpen
     ]);
-    const renderSearchResultsCount = (resultsLength)=>resultsLength ? React.createElement(Menu.SectionTitle, {
+    const renderSearchResultsCount = (resultsLength)=>resultsLength ? /*#__PURE__*/ React.createElement(Menu.SectionTitle, {
             testId: "add-entru-menu-search-results"
         }, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
     const isSearchable = contentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
     const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
     const suggestedContentType = contentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
     const filteredContentTypes = contentTypes.filter((ct)=>!searchInput || get(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
-    return React.createElement("span", {
+    return /*#__PURE__*/ React.createElement("span", {
         className: styles.wrapper,
         ref: wrapper,
         "data-test-id": testId
-    }, React.createElement(Menu, {
+    }, /*#__PURE__*/ React.createElement(Menu, {
         placement: menuPlacementMap[dropdownSettings.position],
         isAutoalignmentEnabled: dropdownSettings.isAutoalignmentEnabled,
         isOpen: isOpen,
         onClose: closeMenu,
         onOpen: handleMenuOpen,
         ...menuProps
-    }, React.createElement(Menu.Trigger, null, children({
+    }, /*#__PURE__*/ React.createElement(Menu.Trigger, null, children({
         isOpen,
         isSelecting
-    })), isOpen && React.createElement(Menu.List, {
+    })), isOpen && /*#__PURE__*/ React.createElement(Menu.List, {
         className: styles.dropdownList,
         style: {
             width: dropdownWidth != undefined ? `${dropdownWidth}px` : undefined,
@@ -118,25 +126,25 @@ export const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId ,
         },
         ref: menuListRef,
         testId: "add-entry-menu"
-    }, Boolean(customDropdownItems) && React.createElement(React.Fragment, null, customDropdownItems, React.createElement(Menu.Divider, null)), isSearchable && React.createElement(React.Fragment, null, React.createElement("div", {
+    }, Boolean(customDropdownItems) && /*#__PURE__*/ React.createElement(React.Fragment, null, customDropdownItems, /*#__PURE__*/ React.createElement(Menu.Divider, null)), isSearchable && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
         ref: textField,
         className: styles.inputWrapper
-    }, React.createElement(TextInput, {
+    }, /*#__PURE__*/ React.createElement(TextInput, {
         className: styles.searchInput,
         placeholder: "Search all content types",
         testId: "add-entry-menu-search",
         value: searchInput,
         onChange: (e)=>setSearchInput(e.target.value)
-    }), React.createElement(SearchIcon, {
+    }), /*#__PURE__*/ React.createElement(SearchIcon, {
         className: styles.searchIcon
-    })), React.createElement(Menu.Divider, null)), searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && React.createElement(React.Fragment, null, React.createElement(Menu.SectionTitle, null, "Suggested Content Type"), React.createElement(Menu.Item, {
+    })), /*#__PURE__*/ React.createElement(Menu.Divider, null)), searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Menu.SectionTitle, null, "Suggested Content Type"), /*#__PURE__*/ React.createElement(Menu.Item, {
         testId: "suggested",
         onClick: ()=>handleSelect(suggestedContentType)
-    }, get(suggestedContentType, 'name')), React.createElement(Menu.Divider, null)), !searchInput && React.createElement(Menu.SectionTitle, null, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map((contentType, i)=>React.createElement(Menu.Item, {
+    }, get(suggestedContentType, 'name')), /*#__PURE__*/ React.createElement(Menu.Divider, null)), !searchInput && /*#__PURE__*/ React.createElement(Menu.SectionTitle, null, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map((contentType, i)=>/*#__PURE__*/ React.createElement(Menu.Item, {
             testId: "contentType",
             key: `${get(contentType, 'name')}-${i}`,
             onClick: ()=>handleSelect(contentType)
-        }, get(contentType, 'name', 'Untitled'))) : React.createElement(Menu.Item, {
+        }, get(contentType, 'name', 'Untitled'))) : /*#__PURE__*/ React.createElement(Menu.Item, {
         testId: "add-entru-menu-search-results"
     }, "No results found"))));
 };

package/dist/esm/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.js

@@ -3,6 +3,7 @@ import { Button } from '@contentful/f36-components';
 import '@testing-library/jest-dom/extend-expect';
 import { act, configure, fireEvent, render } from '@testing-library/react';
 import noop from 'lodash/noop';
+// eslint-disable-next-line -- TODO: describe this disable  you-dont-need-lodash-underscore/fill
 import fill from 'lodash/fill';
 import { CreateEntryMenuTrigger } from './CreateEntryMenuTrigger';
 configure({
@@ -39,7 +40,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
     };
     let stub = jest.fn();
     beforeEach(()=>{
-        stub = jest.fn().mockImplementation(()=>React.createElement(Button, {
+        stub = jest.fn().mockImplementation(()=>/*#__PURE__*/ React.createElement(Button, {
                 testId: "menu-trigger"
             }));
     });
@@ -47,13 +48,13 @@ describe('CreateEntryMenuTrigger general', ()=>{
         const stub = (api)=>{
             expect(api.isOpen).toBe(false);
             expect(api.isSelecting).toBe(false);
-            return React.createElement("span", null);
+            return /*#__PURE__*/ React.createElement("span", null);
         };
-        render(React.createElement(CreateEntryMenuTrigger, props, stub));
+        render(/*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, props, stub));
     });
     it('should set isSelecting to true in case onSelect returns a promise', async ()=>{
         const selectStub = jest.fn(()=>new Promise((resolve)=>setTimeout(resolve, 1000)));
-        const { getAllByTestId , getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+        const { getAllByTestId, getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, {
             ...props,
             onSelect: selectStub
         }, stub));
@@ -67,7 +68,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
     });
     it('should not set isSelecting to true in case onSelect is sync', async ()=>{
         const selectStub = jest.fn();
-        const { getAllByTestId , getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+        const { getAllByTestId, getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, {
             ...props,
             onSelect: selectStub
         }, stub));
@@ -84,7 +85,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
         expect(selectStub).toHaveBeenCalled();
     });
     it('renders text input if contentTypes.length > 20', ()=>{
-        const { getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, {
             ...props,
             contentTypes: fill(Array(21), CONTENT_TYPE_3)
         }, stub));
@@ -95,7 +96,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
     });
     it('shows the search results if typed in input', ()=>{
         const contentTypes = fill(fill(fill(Array(21), CONTENT_TYPE_1, 0, 10), CONTENT_TYPE_2, 10, 20), CONTENT_TYPE_3, 20);
-        const { getByTestId , getAllByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+        const { getByTestId, getAllByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, {
             ...props,
             contentTypes: contentTypes
         }, stub));
@@ -128,7 +129,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
         expect(getByTestId('add-entru-menu-search-results').textContent).toBe('No results found');
     });
     it('shows suggestedContentType in the list', ()=>{
-        const { getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, {
             ...props,
             suggestedContentTypeId: props.contentTypes[0].sys.id
         }, stub));

package/dist/esm/components/LinkActions/CombinedLinkActions.js

@@ -9,18 +9,27 @@ const testIds = {
     ...sharedTextIds,
     actionsWrapper: 'link-actions-menu-trigger'
 };
-export function CombinedLinkActions(props) {
+/**
+ * Alternative, experimental alternative to <LinkActions /> that is planned to
+ * replace the current default LinkActions in reference and media editors.
+ *
+ * Places both actions to create and link new, as well as link existing, behind
+ * one action dropdown and introduces new copy for action labels.
+ */ export function CombinedLinkActions(props) {
     if (props.isFull) {
-        return null;
+        return null; // Don't render link actions if we reached max allowed links.
     }
+    // We don't want to render a spacious container in case there are are already
+    // assets linked (in case of entries, always show it) as the border wouldn't be
+    // nicely aligned with asset cards.
     const hideEmptyCard = props.entityType === 'Asset' && !props.isEmpty;
-    return React.createElement("div", {
+    return /*#__PURE__*/ React.createElement("div", {
         className: hideEmptyCard ? '' : styles.container
-    }, !props.canCreateEntity && !props.canLinkEntity && React.createElement(NoLinkPermissionsInfo, null), props.entityType === 'Entry' && React.createElement(CombinedEntryLinkActions, props), props.entityType === 'Asset' && React.createElement(CombinedAssetLinkActions, props));
+    }, !props.canCreateEntity && !props.canLinkEntity && /*#__PURE__*/ React.createElement(NoLinkPermissionsInfo, null), props.entityType === 'Entry' && /*#__PURE__*/ React.createElement(CombinedEntryLinkActions, props), props.entityType === 'Asset' && /*#__PURE__*/ React.createElement(CombinedAssetLinkActions, props));
 }
 function CombinedEntryLinkActions(props) {
     if (props.canCreateEntity) {
-        return React.createElement(CreateEntryLinkButton, {
+        return /*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
             testId: testIds.actionsWrapper,
             disabled: props.isDisabled,
             text: props.combinedActionsLabel || 'Add content',
@@ -33,7 +42,7 @@ function CombinedEntryLinkActions(props) {
             onSelect: (contentTypeId)=>{
                 return contentTypeId ? props.onCreate(contentTypeId) : Promise.resolve();
             },
-            customDropdownItems: props.canLinkEntity ? React.createElement(Menu.Item, {
+            customDropdownItems: props.canLinkEntity ? /*#__PURE__*/ React.createElement(Menu.Item, {
                 testId: testIds.linkExisting,
                 onClick: ()=>{
                     props.onLinkExisting();
@@ -41,7 +50,7 @@ function CombinedEntryLinkActions(props) {
             }, "Add existing content") : undefined
         });
     } else if (props.canLinkEntity) {
-        return React.createElement(Button, {
+        return /*#__PURE__*/ React.createElement(Button, {
             isDisabled: props.isDisabled,
             testId: testIds.linkExisting,
             className: styles.action,
@@ -49,7 +58,7 @@ function CombinedEntryLinkActions(props) {
                 props.onLinkExisting();
             },
             variant: "secondary",
-            startIcon: React.createElement(LinkIcon, null),
+            startIcon: /*#__PURE__*/ React.createElement(LinkIcon, null),
             size: "small"
         }, "Add existing content");
     }
@@ -59,7 +68,7 @@ function CombinedAssetLinkActions(props) {
     const [isOpen, setOpen] = React.useState(false);
     if (!props.canLinkEntity || !props.canCreateEntity) {
         if (props.canLinkEntity) {
-            return React.createElement(Button, {
+            return /*#__PURE__*/ React.createElement(Button, {
                 isDisabled: props.isDisabled,
                 testId: testIds.linkExisting,
                 className: styles.action,
@@ -67,12 +76,12 @@ function CombinedAssetLinkActions(props) {
                     props.onLinkExisting();
                 },
                 variant: "secondary",
-                startIcon: React.createElement(PlusIcon, null),
+                startIcon: /*#__PURE__*/ React.createElement(PlusIcon, null),
                 size: "small"
             }, "Add existing media");
         }
         if (props.canCreateEntity) {
-            return React.createElement(Button, {
+            return /*#__PURE__*/ React.createElement(Button, {
                 isDisabled: props.isDisabled,
                 testId: testIds.createAndLink,
                 className: styles.action,
@@ -80,13 +89,15 @@ function CombinedAssetLinkActions(props) {
                     props.onCreate();
                 },
                 variant: "secondary",
-                startIcon: React.createElement(PlusIcon, null),
+                startIcon: /*#__PURE__*/ React.createElement(PlusIcon, null),
                 size: "small"
             }, "Add media");
         }
         return null;
     }
-    return React.createElement(Menu, {
+    // TODO: If we fully switch to this new layout, make a more generic `CreateEntityLinkButton`
+    //  that works without content types to cover asset use-case.
+    return /*#__PURE__*/ React.createElement(Menu, {
         isOpen: isOpen,
         onClose: ()=>{
             setOpen(false);
@@ -94,22 +105,22 @@ function CombinedAssetLinkActions(props) {
         onOpen: ()=>{
             setOpen(true);
         }
-    }, React.createElement(Menu.Trigger, null, React.createElement(Button, {
-        endIcon: React.createElement(ChevronDownIcon, null),
+    }, /*#__PURE__*/ React.createElement(Menu.Trigger, null, /*#__PURE__*/ React.createElement(Button, {
+        endIcon: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
         isDisabled: props.isDisabled,
         testId: testIds.actionsWrapper,
         className: styles.action,
         variant: "secondary",
-        startIcon: React.createElement(PlusIcon, null),
+        startIcon: /*#__PURE__*/ React.createElement(PlusIcon, null),
         size: "small"
-    }, "Add media")), isOpen && React.createElement(Menu.List, {
+    }, "Add media")), isOpen && /*#__PURE__*/ React.createElement(Menu.List, {
         testId: testIds.dropdown
-    }, React.createElement(Menu.Item, {
+    }, /*#__PURE__*/ React.createElement(Menu.Item, {
         testId: testIds.linkExisting,
         onClick: ()=>{
             props.onLinkExisting();
         }
-    }, "Add existing media"), React.createElement(Menu.Item, {
+    }, "Add existing media"), /*#__PURE__*/ React.createElement(Menu.Item, {
         testId: testIds.createAndLink,
         onClick: ()=>{
             props.onCreate();

package/dist/esm/components/LinkActions/LinkActions.js

@@ -20,16 +20,16 @@ export const testIds = {
 };
 export function LinkActions(props) {
     if (props.isFull) {
-        return null;
+        return null; // Don't render link actions if we reached max allowed links.
     }
     const defaultLabels = props.entityType === 'Entry' ? defaultEntryLabels : defaultAssetLabels;
     const labels = {
         ...defaultLabels,
         ...props.actionLabels
     };
-    return React.createElement("div", {
+    return /*#__PURE__*/ React.createElement("div", {
         className: styles.container
-    }, props.canCreateEntity && React.createElement(React.Fragment, null, props.entityType === 'Entry' && React.createElement(CreateEntryLinkButton, {
+    }, props.canCreateEntity && /*#__PURE__*/ React.createElement(React.Fragment, null, props.entityType === 'Entry' && /*#__PURE__*/ React.createElement(CreateEntryLinkButton, {
         testId: testIds.createAndLink,
         disabled: props.isDisabled,
         text: labels.createNew({
@@ -40,27 +40,27 @@ export function LinkActions(props) {
         onSelect: (contentTypeId)=>{
             return contentTypeId ? props.onCreate(contentTypeId, props.itemsLength) : Promise.resolve();
         }
-    }), props.entityType === 'Asset' && React.createElement(Button, {
+    }), props.entityType === 'Asset' && /*#__PURE__*/ React.createElement(Button, {
         isDisabled: props.isDisabled,
         testId: testIds.createAndLink,
         onClick: ()=>{
             props.onCreate(undefined, props.itemsLength);
         },
         variant: "secondary",
-        startIcon: React.createElement(PlusIcon, null),
+        startIcon: /*#__PURE__*/ React.createElement(PlusIcon, null),
         size: "small"
-    }, labels.createNew()), React.createElement("span", {
+    }, labels.createNew()), /*#__PURE__*/ React.createElement("span", {
         className: styles.separator
-    })), props.canLinkEntity && React.createElement(Button, {
+    })), props.canLinkEntity && /*#__PURE__*/ React.createElement(Button, {
         isDisabled: props.isDisabled,
         testId: testIds.linkExisting,
         onClick: ()=>{
             props.onLinkExisting();
         },
         variant: "secondary",
-        startIcon: React.createElement(LinkIcon, null),
+        startIcon: /*#__PURE__*/ React.createElement(LinkIcon, null),
         size: "small"
     }, labels.linkExisting({
         canLinkMultiple: props.canLinkMultiple
-    })), !props.canCreateEntity && !props.canLinkEntity && React.createElement(NoLinkPermissionsInfo, null));
+    })), !props.canCreateEntity && !props.canLinkEntity && /*#__PURE__*/ React.createElement(NoLinkPermissionsInfo, null));
 }

package/dist/esm/components/LinkActions/LinkEntityActions.js

@@ -4,7 +4,7 @@ import { CombinedLinkActions } from './CombinedLinkActions';
 import { createEntity, selectMultipleEntities, selectSingleEntity } from './helpers';
 import { LinkActions } from './LinkActions';
 export function useLinkActionsProps(props) {
-    const { sdk , editorPermissions , entityType , canLinkMultiple , isDisabled , actionLabels , itemsLength  } = props;
+    const { sdk, editorPermissions, entityType, canLinkMultiple, isDisabled, actionLabels, itemsLength } = props;
     const maxLinksCount = editorPermissions.validations.numberOfLinks?.max;
     const value = sdk.field.getValue();
     const linkCount = Array.isArray(value) ? value.length : value ? 1 : 0;
@@ -19,7 +19,8 @@ export function useLinkActionsProps(props) {
             slide,
             index
         });
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+    [
         entityType,
         props.onCreate,
         props.onAction
@@ -34,13 +35,14 @@ export function useLinkActionsProps(props) {
                 index: index === undefined ? undefined : index + i
             });
         });
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+    [
         entityType,
         props.onLink,
         props.onAction
     ]);
     const onCreate = React.useCallback(async (contentTypeId, index)=>{
-        const { entity , slide  } = await createEntity({
+        const { entity, slide } = await createEntity({
             sdk,
             entityType,
             contentTypeId
@@ -66,7 +68,8 @@ export function useLinkActionsProps(props) {
         onLinkedExisting([
             entity
         ], index);
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+    [
         sdk,
         entityType,
         onLinkedExisting
@@ -81,11 +84,13 @@ export function useLinkActionsProps(props) {
             return;
         }
         onLinkedExisting(entities, index);
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+    [
         sdk,
         entityType,
         onLinkedExisting
     ]);
+    // FIXME: The memoization might rerun every time due to the always changing callback identities above
     return useMemo(()=>({
             entityType,
             canLinkMultiple,
@@ -101,7 +106,8 @@ export function useLinkActionsProps(props) {
             onCreated,
             onLinkedExisting,
             itemsLength
-        }), [
+        }), // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
+    [
         entityType,
         canLinkMultiple,
         isDisabled,
@@ -110,6 +116,7 @@ export function useLinkActionsProps(props) {
         editorPermissions.canCreateEntity,
         editorPermissions.canLinkEntity,
         actionLabels,
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
         editorPermissions.creatableContentTypes.map((ct)=>ct.sys.id).join(':'),
         onCreate,
         onLinkExisting,
@@ -119,9 +126,9 @@ export function useLinkActionsProps(props) {
         itemsLength
     ]);
 }
-export function LinkEntityActions({ renderCustomActions , ...props }) {
-    return renderCustomActions ? renderCustomActions(props) : React.createElement(LinkActions, props);
+export function LinkEntityActions({ renderCustomActions, ...props }) {
+    return renderCustomActions ? renderCustomActions(props) : /*#__PURE__*/ React.createElement(LinkActions, props);
 }
-export function CombinedLinkEntityActions({ renderCustomActions , ...props }) {
-    return renderCustomActions ? renderCustomActions(props) : React.createElement(CombinedLinkActions, props);
+export function CombinedLinkEntityActions({ renderCustomActions, ...props }) {
+    return renderCustomActions ? renderCustomActions(props) : /*#__PURE__*/ React.createElement(CombinedLinkActions, props);
 }

package/dist/esm/components/LinkActions/NoLinkPermissionsInfo.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { Paragraph } from '@contentful/f36-components';
 export function NoLinkPermissionsInfo() {
-    return React.createElement(Paragraph, null, "You don't have permission to view this content or this field is not correctly configured. Contact your administrator for help.");
+    return /*#__PURE__*/ React.createElement(Paragraph, null, "You don't have permission to view this content or this field is not correctly configured. Contact your administrator for help.");
 }

package/dist/esm/components/LinkActions/helpers.js

@@ -4,7 +4,7 @@ export async function createEntity(props) {
         if (!props.contentTypeId) {
             return {};
         }
-        const { entity , slide  } = await props.sdk.navigator.openNewEntry(props.contentTypeId, {
+        const { entity, slide } = await props.sdk.navigator.openNewEntry(props.contentTypeId, {
             slideIn: true
         });
         return {
@@ -12,7 +12,7 @@ export async function createEntity(props) {
             slide
         };
     } else {
-        const { entity , slide  } = await props.sdk.navigator.openNewAsset({
+        const { entity, slide } = await props.sdk.navigator.openNewAsset({
             slideIn: true
         });
         return {
@@ -37,7 +37,12 @@ export async function selectSingleEntity(props) {
 export async function selectMultipleEntities(props) {
     const value = props.sdk.field.getValue();
     const linkCount = Array.isArray(value) ? value.length : value ? 1 : 0;
+    // TODO: Why not always set `min: 1` by default? Does it make sense to enforce
+    //  user to select as many entities as the field's "min" requires? What if e.g.
+    // "min" is 4 and the user wants to insert 2 entities first, then create 2 new ones?
     const min = Math.max((props.editorPermissions.validations.numberOfLinks?.min || 1) - linkCount, 1);
+    // TODO: Consider same for max. If e.g. "max" is 4, we disable the button if the
+    //  user wants to select 5 but we show no information why the button is disabled.
     const max = (props.editorPermissions.validations.numberOfLinks?.max || +Infinity) - linkCount;
     if (props.entityType === 'Entry') {
         return await props.sdk.dialogs.selectMultipleEntries({