@contentful/field-editor-reference 5.18.0 → 5.20.0

package/dist/cjs/common/useEditorPermissions.js

@@ -13,17 +13,17 @@ const _fromFieldValidations = require("../utils/fromFieldValidations");
 const _useAccessApi = require("./useAccessApi");
 const _useContentTypePermissions = require("./useContentTypePermissions");
 function useEditorPermissions(props) {
-    const { sdk , entityType , parameters  } = props;
+    const { sdk, entityType, parameters } = props;
     const validations = (0, _react.useMemo)(()=>(0, _fromFieldValidations.fromFieldValidations)(props.sdk.field), [
         props.sdk.field
     ]);
     const [canCreateEntity, setCanCreateEntity] = (0, _react.useState)(true);
     const [canLinkEntity, setCanLinkEntity] = (0, _react.useState)(true);
-    const { creatableContentTypes , readableContentTypes , availableContentTypes  } = (0, _useContentTypePermissions.useContentTypePermissions)({
+    const { creatableContentTypes, readableContentTypes, availableContentTypes } = (0, _useContentTypePermissions.useContentTypePermissions)({
         ...props,
         validations
     });
-    const { canPerformAction  } = (0, _useAccessApi.useAccessApi)(sdk.access);
+    const { canPerformAction } = (0, _useAccessApi.useAccessApi)(sdk.access);
     (0, _react.useEffect)(()=>{
         if (parameters.instance.showCreateEntityAction === false) {
             setCanCreateEntity(false);
@@ -31,15 +31,20 @@ function useEditorPermissions(props) {
         }
         async function checkCreateAccess() {
             if (entityType === 'Asset') {
+                // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
+                // TODO: refine permissions check in order to account for tags in rules
                 const canCreate = await canPerformAction('create', 'Asset') || true;
                 setCanCreateEntity(canCreate);
             }
             if (entityType === 'Entry') {
+                // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
+                // TODO: refine permissions check in order to account for tags in rules
                 const canCreate = creatableContentTypes.length > 0 || true;
                 setCanCreateEntity(canCreate);
             }
         }
         void checkCreateAccess();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
     }, [
         entityType,
         parameters.instance,
@@ -52,15 +57,22 @@ function useEditorPermissions(props) {
         }
         async function checkLinkAccess() {
             if (entityType === 'Asset') {
+                // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
+                // TODO: refine permissions check in order to account for tags in rules
                 const canRead = await canPerformAction('read', 'Asset') || true;
                 setCanLinkEntity(canRead);
             }
             if (entityType === 'Entry') {
+                // Hardcoded `true` value following https://contentful.atlassian.net/browse/DANTE-486
+                // TODO: refine permissions check in order to account for tags in rules
+                // TODO: always show every content type (it's just a filter) to avoid people not seeing
+                // their (partly limited) content types
                 const canRead = true;
                 setCanLinkEntity(canRead);
             }
         }
         void checkLinkAccess();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
     }, [
         entityType,
         parameters.instance,

package/dist/cjs/common/useEditorPermissions.spec.js

@@ -18,7 +18,7 @@ describe('useEditorPermissions', ()=>{
                 id
             }
         });
-    const renderEditorPermissions = async ({ entityType , params ={} , allContentTypes =[] , customizeMock , customizeSdk  })=>{
+    const renderEditorPermissions = async ({ entityType, params = {}, allContentTypes = [], customizeMock, customizeSdk })=>{
         const sdk = makeFieldAppSDK(customizeMock);
         customizeSdk?.(sdk);
         const renderResult = (0, _reacthooks.renderHook)(()=>(0, _useEditorPermissions.useEditorPermissions)({
@@ -37,7 +37,7 @@ describe('useEditorPermissions', ()=>{
     };
     describe(`behaviour on Asset`, ()=>{
         it(`wont check access when turned off via instance params`, async ()=>{
-            const { result , sdk  } = await renderEditorPermissions({
+            const { result, sdk } = await renderEditorPermissions({
                 entityType: 'Asset',
                 params: {
                     showCreateEntityAction: false,
@@ -49,20 +49,20 @@ describe('useEditorPermissions', ()=>{
             expect(sdk.access.can).not.toHaveBeenCalledWith();
         });
         it(`checks basic access`, async ()=>{
-            const { sdk  } = await renderEditorPermissions({
+            const { sdk } = await renderEditorPermissions({
                 entityType: 'Asset'
             });
             expect(sdk.access.can).toHaveBeenCalledWith('create', 'Asset');
             expect(sdk.access.can).toHaveBeenCalledWith('read', 'Asset');
         });
         it(`defaults link asset action visibility to true`, async ()=>{
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Asset'
             });
             expect(result.current.canLinkEntity).toBeTruthy();
         });
         it(`returns empty contentTypes`, async ()=>{
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Asset',
                 allContentTypes: [
                     makeContentType('one')
@@ -82,7 +82,7 @@ describe('useEditorPermissions', ()=>{
             });
         };
         it(`wont check access when turned off via instance params`, async ()=>{
-            const { result , sdk  } = await renderEditorPermissions({
+            const { result, sdk } = await renderEditorPermissions({
                 entityType: 'Entry',
                 params: {
                     showCreateEntityAction: false,
@@ -98,7 +98,7 @@ describe('useEditorPermissions', ()=>{
                 makeContentType('one'),
                 makeContentType('two')
             ];
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Entry',
                 allContentTypes,
                 customizeSdk: (sdk)=>{
@@ -112,7 +112,7 @@ describe('useEditorPermissions', ()=>{
                 makeContentType('one'),
                 makeContentType('two')
             ];
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Entry',
                 allContentTypes,
                 customizeSdk: (sdk)=>{
@@ -126,7 +126,7 @@ describe('useEditorPermissions', ()=>{
                 makeContentType('one'),
                 makeContentType('two')
             ];
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Entry',
                 allContentTypes,
                 customizeSdk: (sdk)=>{
@@ -135,12 +135,13 @@ describe('useEditorPermissions', ()=>{
             });
             expect(result.current.canLinkEntity).toBe(true);
         });
+        // eslint-disable-next-line -- TODO: describe this disable  jest/no-test-prefixes
         it.skip(`denies creation when no content-type can be read`, async ()=>{
             const allContentTypes = [
                 makeContentType('one'),
                 makeContentType('two')
             ];
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Entry',
                 allContentTypes,
                 customizeSdk: (sdk)=>{
@@ -154,7 +155,7 @@ describe('useEditorPermissions', ()=>{
                 makeContentType('one'),
                 makeContentType('two')
             ];
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Entry',
                 allContentTypes,
                 customizeMock: (field)=>{
@@ -180,7 +181,7 @@ describe('useEditorPermissions', ()=>{
                 makeContentType('one'),
                 makeContentType('two')
             ];
-            const { result  } = await renderEditorPermissions({
+            const { result } = await renderEditorPermissions({
                 entityType: 'Entry',
                 allContentTypes,
                 customizeMock: (field)=>{

package/dist/cjs/components/AssetThumbnail/AssetThumbnail.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "AssetThumbnail", {
         return AssetThumbnail;
     }
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -30,7 +30,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -53,7 +55,7 @@ const dimensions = {
     height: 70
 };
 function AssetThumbnail(props) {
-    return _react.createElement("img", {
+    return /*#__PURE__*/ _react.createElement("img", {
         alt: props.file.fileName,
         src: `${props.file.url}?w=${dimensions.width}&h=${dimensions.height}&fit=thumb`,
         height: dimensions.height,

package/dist/cjs/components/CreateEntryLinkButton/CreateEntryLinkButton.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "CreateEntryLinkButton", {
         return CreateEntryLinkButton;
     }
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
-const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _emotion = require("emotion");
-const _get = _interop_require_default(require("lodash/get"));
+const _get = /*#__PURE__*/ _interop_require_default(require("lodash/get"));
 const _CreateEntryMenuTrigger = require("./CreateEntryMenuTrigger");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -41,7 +41,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -73,15 +75,17 @@ const redesignStyles = {
         maxWidth: '300px'
     })
 };
-const CreateEntryLinkButton = ({ contentTypes , onSelect , customDropdownItems , text , testId , hasPlusIcon =false , useExperimentalStyles , suggestedContentTypeId , dropdownSettings , disabled =false  })=>{
+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 ${(0, _get.default)(suggestedContentType || (contentTypes.length === 1 ? contentTypes[0] : {}), 'name', 'entry')}`;
     const hasDropdown = contentTypes.length > 1 || customDropdownItems;
-    const plusIcon = hasPlusIcon ? _react.createElement(_f36icons.PlusIcon, null) : undefined;
+    // TODO: Introduce `icon: string` and remove `hasPlusIcon` or remove "Plus" if we keep new layout.
+    const plusIcon = hasPlusIcon ? /*#__PURE__*/ _react.createElement(_f36icons.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.CreateEntryMenuTrigger, {
+    return /*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
         contentTypes: contentTypes,
         suggestedContentTypeId: suggestedContentTypeId,
         contentTypesLabel: contentTypesLabel,
@@ -89,8 +93,8 @@ const CreateEntryLinkButton = ({ contentTypes , onSelect , customDropdownItems ,
         testId: testId,
         dropdownSettings: dropdownSettings,
         customDropdownItems: customDropdownItems
-    }, ({ isSelecting  })=>_react.createElement(_f36components.Button, {
-            endIcon: hasDropdown ? _react.createElement(_f36icons.ChevronDownIcon, null) : undefined,
+    }, ({ isSelecting })=>/*#__PURE__*/ _react.createElement(_f36components.Button, {
+            endIcon: hasDropdown ? /*#__PURE__*/ _react.createElement(_f36icons.ChevronDownIcon, null) : undefined,
             variant: "secondary",
             className: styles.action,
             isDisabled: disabled || isSelecting,

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 require("@testing-library/jest-dom");
 const _react1 = require("@testing-library/react");
-const _noop = _interop_require_default(require("lodash/noop"));
+const _noop = /*#__PURE__*/ _interop_require_default(require("lodash/noop"));
 const _CreateEntryLinkButton = require("./CreateEntryLinkButton");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -33,7 +33,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -85,14 +87,14 @@ describe('CreateEntryLinkButton general', ()=>{
         }
     };
     it('renders with multiple content types as list', ()=>{
-        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.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  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
         _react1.fireEvent.click(findButton(getByTestId));
         const menu = getByTestId('add-entry-menu');
         expect(menu).toBeDefined();
@@ -102,7 +104,7 @@ describe('CreateEntryLinkButton general', ()=>{
     });
     it('renders suggestedContentType as text when given', ()=>{
         const suggestedContentTypeId = 'ID_2';
-        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             ...props,
             suggestedContentTypeId: suggestedContentTypeId
         }));
@@ -112,7 +114,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  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             onSelect: props.onSelect,
             contentTypes: [
                 CONTENT_TYPE_1
@@ -128,7 +130,7 @@ describe('CreateEntryLinkButton general', ()=>{
             text: 'CUSTOM_TEXT',
             hasPlusIcon: true
         };
-        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             ...props,
             ...propsOverrides
         }));
@@ -149,13 +151,13 @@ describe('CreateEntryLinkButton with multiple entries', ()=>{
         }
     };
     it('should render dropdown items for each content type', ()=>{
-        const { getByTestId , getAllByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
+        const { getByTestId, getAllByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
         _react1.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  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId, getAllByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             ...props,
             onSelect: selectSpy
         }));
@@ -175,7 +177,7 @@ describe('CreateEntryLinkButton with a single entry', ()=>{
     };
     it('should fire the onSelect function when clicked', ()=>{
         const onSelectStub = jest.fn();
-        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             ...props,
             onSelect: onSelectStub
         }));
@@ -187,7 +189,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  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId, container } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],
@@ -203,7 +205,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  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId, container } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],
@@ -220,7 +222,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  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],
@@ -236,7 +238,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  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
             contentTypes: [
                 CONTENT_TYPE_1
             ],

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

@@ -1,4 +1,4 @@
-"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -8,12 +8,12 @@ Object.defineProperty(exports, "CreateEntryMenuTrigger", {
         return CreateEntryMenuTrigger;
     }
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
-const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _emotion = require("emotion");
-const _get = _interop_require_default(require("lodash/get"));
+const _get = /*#__PURE__*/ _interop_require_default(require("lodash/get"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -40,7 +40,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -90,16 +92,23 @@ const styles = {
         borderColor: _f36tokens.default.gray200
     })
 };
-const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId , contentTypesLabel , onSelect , testId , dropdownSettings ={
+const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentTypesLabel, onSelect, testId, dropdownSettings = {
     position: 'bottom-left'
-} , customDropdownItems , children , menuProps  })=>{
+}, customDropdownItems, children, menuProps })=>{
     const [isOpen, setOpen] = (0, _react.useState)(false);
     const [isSelecting, setSelecting] = (0, _react.useState)(false);
     const [searchInput, setSearchInput] = (0, _react.useState)('');
     const wrapper = (0, _react.useRef)(null);
     const textField = (0, _react.useRef)(null);
     const menuListRef = (0, _react.useRef)(null);
-    const [dropdownWidth, setDropdownWidth] = (0, _react.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] = (0, _react.useState)();
     const hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
     const closeMenu = ()=>setOpen(false);
     (0, _react.useEffect)(()=>{
@@ -124,6 +133,7 @@ const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId , conten
     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));
@@ -143,28 +153,28 @@ const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId , conten
     }, [
         isOpen
     ]);
-    const renderSearchResultsCount = (resultsLength)=>resultsLength ? _react.default.createElement(_f36components.Menu.SectionTitle, {
+    const renderSearchResultsCount = (resultsLength)=>resultsLength ? /*#__PURE__*/ _react.default.createElement(_f36components.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 || (0, _get.default)(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
-    return _react.default.createElement("span", {
+    return /*#__PURE__*/ _react.default.createElement("span", {
         className: styles.wrapper,
         ref: wrapper,
         "data-test-id": testId
-    }, _react.default.createElement(_f36components.Menu, {
+    }, /*#__PURE__*/ _react.default.createElement(_f36components.Menu, {
         placement: menuPlacementMap[dropdownSettings.position],
         isAutoalignmentEnabled: dropdownSettings.isAutoalignmentEnabled,
         isOpen: isOpen,
         onClose: closeMenu,
         onOpen: handleMenuOpen,
         ...menuProps
-    }, _react.default.createElement(_f36components.Menu.Trigger, null, children({
+    }, /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Trigger, null, children({
         isOpen,
         isSelecting
-    })), isOpen && _react.default.createElement(_f36components.Menu.List, {
+    })), isOpen && /*#__PURE__*/ _react.default.createElement(_f36components.Menu.List, {
         className: styles.dropdownList,
         style: {
             width: dropdownWidth != undefined ? `${dropdownWidth}px` : undefined,
@@ -172,25 +182,25 @@ const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId , conten
         },
         ref: menuListRef,
         testId: "add-entry-menu"
-    }, Boolean(customDropdownItems) && _react.default.createElement(_react.default.Fragment, null, customDropdownItems, _react.default.createElement(_f36components.Menu.Divider, null)), isSearchable && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
+    }, Boolean(customDropdownItems) && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, customDropdownItems, /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Divider, null)), isSearchable && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
         ref: textField,
         className: styles.inputWrapper
-    }, _react.default.createElement(_f36components.TextInput, {
+    }, /*#__PURE__*/ _react.default.createElement(_f36components.TextInput, {
         className: styles.searchInput,
         placeholder: "Search all content types",
         testId: "add-entry-menu-search",
         value: searchInput,
         onChange: (e)=>setSearchInput(e.target.value)
-    }), _react.default.createElement(_f36icons.SearchIcon, {
+    }), /*#__PURE__*/ _react.default.createElement(_f36icons.SearchIcon, {
         className: styles.searchIcon
-    })), _react.default.createElement(_f36components.Menu.Divider, null)), searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_f36components.Menu.SectionTitle, null, "Suggested Content Type"), _react.default.createElement(_f36components.Menu.Item, {
+    })), /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Divider, null)), searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_f36components.Menu.SectionTitle, null, "Suggested Content Type"), /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
         testId: "suggested",
         onClick: ()=>handleSelect(suggestedContentType)
-    }, (0, _get.default)(suggestedContentType, 'name')), _react.default.createElement(_f36components.Menu.Divider, null)), !searchInput && _react.default.createElement(_f36components.Menu.SectionTitle, null, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map((contentType, i)=>_react.default.createElement(_f36components.Menu.Item, {
+    }, (0, _get.default)(suggestedContentType, 'name')), /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Divider, null)), !searchInput && /*#__PURE__*/ _react.default.createElement(_f36components.Menu.SectionTitle, null, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map((contentType, i)=>/*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
             testId: "contentType",
             key: `${(0, _get.default)(contentType, 'name')}-${i}`,
             onClick: ()=>handleSelect(contentType)
-        }, (0, _get.default)(contentType, 'name', 'Untitled'))) : _react.default.createElement(_f36components.Menu.Item, {
+        }, (0, _get.default)(contentType, 'name', 'Untitled'))) : /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
         testId: "add-entru-menu-search-results"
     }, "No results found"))));
 };

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 require("@testing-library/jest-dom/extend-expect");
 const _react1 = require("@testing-library/react");
-const _noop = _interop_require_default(require("lodash/noop"));
-const _fill = _interop_require_default(require("lodash/fill"));
+const _noop = /*#__PURE__*/ _interop_require_default(require("lodash/noop"));
+const _fill = /*#__PURE__*/ _interop_require_default(require("lodash/fill"));
 const _CreateEntryMenuTrigger = require("./CreateEntryMenuTrigger");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -35,7 +35,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -87,7 +89,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
     };
     let stub = jest.fn();
     beforeEach(()=>{
-        stub = jest.fn().mockImplementation(()=>_react.createElement(_f36components.Button, {
+        stub = jest.fn().mockImplementation(()=>/*#__PURE__*/ _react.createElement(_f36components.Button, {
                 testId: "menu-trigger"
             }));
     });
@@ -95,13 +97,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);
         };
-        (0, _react1.render)(_react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, props, stub));
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.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  } = (0, _react1.render)(_react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
+        const { getAllByTestId, getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
             ...props,
             onSelect: selectStub
         }, stub));
@@ -115,7 +117,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
     });
     it('should not set isSelecting to true in case onSelect is sync', async ()=>{
         const selectStub = jest.fn();
-        const { getAllByTestId , getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
+        const { getAllByTestId, getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
             ...props,
             onSelect: selectStub
         }, stub));
@@ -132,7 +134,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
         expect(selectStub).toHaveBeenCalled();
     });
     it('renders text input if contentTypes.length > 20', ()=>{
-        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
             ...props,
             contentTypes: (0, _fill.default)(Array(21), CONTENT_TYPE_3)
         }, stub));
@@ -143,7 +145,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
     });
     it('shows the search results if typed in input', ()=>{
         const contentTypes = (0, _fill.default)((0, _fill.default)((0, _fill.default)(Array(21), CONTENT_TYPE_1, 0, 10), CONTENT_TYPE_2, 10, 20), CONTENT_TYPE_3, 20);
-        const { getByTestId , getAllByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
+        const { getByTestId, getAllByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
             ...props,
             contentTypes: contentTypes
         }, stub));
@@ -176,7 +178,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
         expect(getByTestId('add-entru-menu-search-results').textContent).toBe('No results found');
     });
     it('shows suggestedContentType in the list', ()=>{
-        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
+        const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
             ...props,
             suggestedContentTypeId: props.contentTypes[0].sys.id
         }, stub));