@contentful/field-editor-reference 6.22.3 → 6.22.4-canary.21

package/dist/cjs/assets/WrappedAssetCard/AssetCardActions.js

@@ -21,7 +21,7 @@ const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _fieldeditorshared = require("@contentful/field-editor-shared");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _get = /*#__PURE__*/ _interop_require_default(require("lodash/get"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -70,16 +70,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    dragHandle: (0, _emotion.css)({
+    dragHandle: (0, _css.css)({
         alignSelf: 'stretch'
     }),
     fileInformation: {
-        menuItem: (0, _emotion.css)({
+        menuItem: (0, _css.css)({
             '&:disabled': {
                 opacity: 1
             }
         }),
-        dl: (0, _emotion.css)({
+        dl: (0, _css.css)({
             backgroundColor: _f36tokens.default.gray100,
             borderRadius: _f36tokens.default.borderRadiusMedium,
             padding: _f36tokens.default.spacingXs,

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

@@ -12,7 +12,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _get = /*#__PURE__*/ _interop_require_default(require("lodash/get"));
 const _CreateEntryMenuTrigger = require("./CreateEntryMenuTrigger");
 function _interop_require_default(obj) {
@@ -62,14 +62,14 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const standardStyles = {
-    spinnerMargin: (0, _emotion.css)({
+    spinnerMargin: (0, _css.css)({
         marginRight: _f36tokens.default.spacingXs
     }),
     action: undefined
 };
 const redesignStyles = {
     ...standardStyles,
-    action: (0, _emotion.css)({
+    action: (0, _css.css)({
         textDecoration: 'none',
         fontWeight: 'bold',
         maxWidth: '300px'

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

@@ -12,8 +12,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _css = require("@emotion/css");
 const _core = require("@lingui/core");
-const _emotion = require("emotion");
 const _get = /*#__PURE__*/ _interop_require_default(require("lodash/get"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -67,24 +67,24 @@ const menuPlacementMap = {
     'bottom-right': 'bottom-end'
 };
 const styles = {
-    wrapper: (0, _emotion.css)({
+    wrapper: (0, _css.css)({
         position: 'relative'
     }),
-    inputWrapper: (0, _emotion.css)({
+    inputWrapper: (0, _css.css)({
         position: 'relative',
         padding: `${_f36tokens.default.spacing2Xs} ${_f36tokens.default.spacingXs}`
     }),
-    title: (0, _emotion.css)({
+    title: (0, _css.css)({
         paddingTop: _f36tokens.default.spacing2Xs,
         fontWeight: _f36tokens.default.fontWeightMedium
     }),
-    searchInput: (0, _emotion.css)({
+    searchInput: (0, _css.css)({
         paddingRight: _f36tokens.default.spacingXl,
         textOverflow: 'ellipsis',
         minHeight: '32px',
         maxHeight: '32px'
     }),
-    searchIcon: (0, _emotion.css)({
+    searchIcon: (0, _css.css)({
         position: 'absolute',
         right: _f36tokens.default.spacingM,
         top: '50%',
@@ -92,11 +92,11 @@ const styles = {
         zIndex: Number(_f36tokens.default.zIndexDefault),
         fill: _f36tokens.default.gray600
     }),
-    separator: (0, _emotion.css)({
+    separator: (0, _css.css)({
         background: _f36tokens.default.gray200,
         margin: '10px 0'
     }),
-    dropdownList: (0, _emotion.css)({
+    dropdownList: (0, _css.css)({
         minWidth: '230px',
         borderColor: _f36tokens.default.gray200
     })

package/dist/cjs/components/LinkActions/redesignStyles.js

@@ -20,24 +20,24 @@ _export(exports, {
     }
 });
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const container = (0, _emotion.css)({
+const container = (0, _css.css)({
     display: 'flex',
     border: `1px dashed ${_f36tokens.default.gray500}`,
     borderRadius: _f36tokens.default.borderRadiusMedium,
     justifyContent: 'center',
     padding: _f36tokens.default.spacingXl
 });
-const action = (0, _emotion.css)({
+const action = (0, _css.css)({
     textDecoration: 'none',
     fontWeight: 'bold'
 });
-const chevronIcon = (0, _emotion.css)({
+const chevronIcon = (0, _css.css)({
     float: 'right',
     marginLeft: _f36tokens.default.spacingXs,
     marginRight: -_f36tokens.default.spacing2Xs

package/dist/cjs/components/LinkActions/styles.js

@@ -17,17 +17,17 @@ _export(exports, {
     }
 });
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const container = (0, _emotion.css)({
+const container = (0, _css.css)({
     display: 'flex',
     width: '100%',
     marginTop: _f36tokens.default.spacingS
 });
-const separator = (0, _emotion.css)({
+const separator = (0, _css.css)({
     marginRight: _f36tokens.default.spacingXl
 });

package/dist/cjs/components/MissingAssetCard/styles.js

@@ -16,11 +16,11 @@ _export(exports, {
         return squareCard;
     }
 });
-const _emotion = require("emotion");
-const card = (0, _emotion.css)({
+const _css = require("@emotion/css");
+const card = (0, _css.css)({
     position: 'relative'
 });
-const squareCard = (0, _emotion.css)({
+const squareCard = (0, _css.css)({
     display: 'flex',
     alignItems: 'center',
     width: '135px',

package/dist/cjs/components/SpaceName/SpaceName.js

@@ -12,7 +12,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -60,11 +60,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    spaceIcon: (0, _emotion.css)({
+    spaceIcon: (0, _css.css)({
         flexShrink: 0,
         fill: _f36tokens.default.gray600
     }),
-    spaceName: (0, _emotion.css)({
+    spaceName: (0, _css.css)({
         color: _f36tokens.default.gray600,
         fontSize: _f36tokens.default.fontSizeS,
         fontWeight: _f36tokens.default.fontWeightMedium,

package/dist/cjs/resources/Cards/ResourceCard.spec.js

@@ -7,6 +7,7 @@ require("@testing-library/jest-dom");
 const _reactquery = require("@contentful/field-editor-shared/react-query");
 const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
 const _react1 = require("@testing-library/react");
+const _userevent = /*#__PURE__*/ _interop_require_default(require("@testing-library/user-event"));
 const _published_content_typejson = /*#__PURE__*/ _interop_require_default(require("../../__fixtures__/content-type/published_content_type.json"));
 const _published_entry_non_masterjson = /*#__PURE__*/ _interop_require_default(require("../../__fixtures__/entry/published_entry_non_master.json"));
 const _published_entryjson = /*#__PURE__*/ _interop_require_default(require("../../__fixtures__/entry/published_entry.json"));
@@ -194,8 +195,10 @@ describe('ResourceCard', ()=>{
         await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         expect(getByText(_published_entryjson.default.fields.exField['en-US'])).toBeDefined();
         expect(getByText(_indifferent_spacejson.default.name)).toBeDefined();
-        _react1.fireEvent.mouseEnter(getByText(_indifferent_spacejson.default.name));
-        await (0, _react1.waitFor)(()=>expect(getByText(tooltipContent)).toBeDefined());
+        _userevent.default.hover(getByText(_indifferent_spacejson.default.name));
+        await (0, _react1.waitFor)(()=>{
+            expect(getByText(tooltipContent)).toBeVisible();
+        });
     });
     it('renders entry card with explicit master crn', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
@@ -205,8 +208,10 @@ describe('ResourceCard', ()=>{
         await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         expect(getByText(_published_entryjson.default.fields.exField['en-US'])).toBeDefined();
         expect(getByText(_indifferent_spacejson.default.name)).toBeDefined();
-        _react1.fireEvent.mouseEnter(getByText(_indifferent_spacejson.default.name));
-        await (0, _react1.waitFor)(()=>expect(getByText(tooltipContent)).toBeDefined());
+        _userevent.default.hover(getByText(_indifferent_spacejson.default.name));
+        await (0, _react1.waitFor)(()=>{
+            expect(getByText(tooltipContent)).toBeVisible();
+        });
     });
     it('renders entry card with a non master environment', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
@@ -216,8 +221,10 @@ describe('ResourceCard', ()=>{
         const tooltipContent = `Space: ${_indifferent_spacejson.default.name} (Env.: ${_published_entry_non_masterjson.default.sys.environment.sys.id})`;
         expect(getByText(_published_entry_non_masterjson.default.fields.exField['en-US'])).toBeDefined();
         expect(getByText(_indifferent_spacejson.default.name)).toBeDefined();
-        _react1.fireEvent.mouseEnter(getByText(_indifferent_spacejson.default.name));
-        await (0, _react1.waitFor)(()=>expect(getByText(tooltipContent)).toBeDefined());
+        _userevent.default.hover(getByText(_indifferent_spacejson.default.name));
+        await (0, _react1.waitFor)(()=>{
+            expect(getByText(tooltipContent)).toBeVisible();
+        });
     });
     it('renders skeleton while data is loading', async ()=>{
         const queryClient = (0, _fieldeditortestutils.createTestQueryClient)();

package/dist/cjs/resources/ExternalResourceCard/ExternalResourceCard.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "ExternalResourceCard", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _truncate = /*#__PURE__*/ _interop_require_default(require("truncate"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -60,10 +60,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    subtitle: (0, _emotion.css)({
+    subtitle: (0, _css.css)({
         color: _f36tokens.default.gray600
     }),
-    description: (0, _emotion.css)({
+    description: (0, _css.css)({
         color: _f36tokens.default.gray900
     })
 };

package/dist/cjs/resources/MultipleResourceReferenceEditor.spec.js

@@ -2,13 +2,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 require("@testing-library/jest-dom/extend-expect");
-const _react = require("@testing-library/react");
-const _react1 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react1 = require("@testing-library/react");
+const _userevent = /*#__PURE__*/ _interop_require_default(require("@testing-library/user-event"));
 const _EntityStore = require("../common/EntityStore");
 const _useEditorPermissions = require("../common/useEditorPermissions");
 const _MultipleResourceReferenceEditor = require("./MultipleResourceReferenceEditor");
 const _resourceEditorHelpers = require("./testHelpers/resourceEditorHelpers");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -103,16 +109,16 @@ beforeEach(()=>{
 describe('Multiple resource editor', ()=>{
     it('renders the action button when no value is set', async ()=>{
         const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
-        (0, _react.render)(/*#__PURE__*/ _react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
             parameters: {}
         }));
-        const button = await _react.screen.findByText('Add existing content');
+        const button = await _react1.screen.findByText('Add existing content');
         expect(button).toBeDefined();
-        _react.fireEvent.click(button);
+        _userevent.default.click(button);
         const dialogFn = sdk.dialogs.selectMultipleResourceEntities;
         expect(dialogFn).toHaveBeenCalledTimes(1);
         const options = dialogFn.mock.calls[0][0];
@@ -127,7 +133,7 @@ describe('Multiple resource editor', ()=>{
                 canLinkEntity: false
             }));
         const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
-        (0, _react.render)(/*#__PURE__*/ _react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
             getEntryRouteHref: ()=>'',
             isInitiallyDisabled: false,
             sdk: sdk,
@@ -135,22 +141,22 @@ describe('Multiple resource editor', ()=>{
             viewType: "card",
             parameters: {}
         }));
-        const noPermission = await _react.screen.findByText(/You don't have permission to view this content/);
+        const noPermission = await _react1.screen.findByText(/You don't have permission to view this content/);
         expect(noPermission).toBeDefined();
     });
     it('renders custom actions when passed', async ()=>{
         const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
-        (0, _react.render)(/*#__PURE__*/ _react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
             parameters: {},
-            renderCustomActions: ()=>/*#__PURE__*/ _react1.createElement("div", {
+            renderCustomActions: ()=>/*#__PURE__*/ _react.createElement("div", {
                     "data-testid": "custom-actions"
                 })
         }));
-        const customActions = await _react.screen.findByTestId('custom-actions');
+        const customActions = await _react1.screen.findByTestId('custom-actions');
         expect(customActions).toBeDefined();
     });
     describe('with value', ()=>{
@@ -161,7 +167,7 @@ describe('Multiple resource editor', ()=>{
                 mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
             }
             const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-            (0, _react.render)(/*#__PURE__*/ _react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+            (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                 isInitiallyDisabled: false,
                 sdk: sdk,
                 hasCardEditActions: true,
@@ -188,7 +194,7 @@ describe('Multiple resource editor', ()=>{
                     mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
                 }
                 const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-                (0, _react.render)(/*#__PURE__*/ _react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+                (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
@@ -197,7 +203,7 @@ describe('Multiple resource editor', ()=>{
                     getEntryRouteHref: ()=>'',
                     parameters: {}
                 }));
-                const linkExistingBtn = _react.screen.queryByText('Add existing content');
+                const linkExistingBtn = _react1.screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
                 const entriesArray = Object.values(entryInfos);
                 const firstItem = entriesArray[0];
@@ -214,7 +220,7 @@ describe('Multiple resource editor', ()=>{
                     mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
                 }
                 const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-                (0, _react.render)(/*#__PURE__*/ _react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+                (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
@@ -223,7 +229,7 @@ describe('Multiple resource editor', ()=>{
                     getEntryRouteHref: ()=>'',
                     parameters: {}
                 }));
-                const linkExistingBtn = _react.screen.queryByText('Add existing content');
+                const linkExistingBtn = _react1.screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
                 const entriesArray = Object.values(entryInfos);
                 const lastItem = entriesArray[entriesArray.length - 1];
@@ -240,7 +246,7 @@ describe('Multiple resource editor', ()=>{
                     mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
                 }
                 const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-                (0, _react.render)(/*#__PURE__*/ _react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+                (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
@@ -249,15 +255,15 @@ describe('Multiple resource editor', ()=>{
                     getEntryRouteHref: ()=>'',
                     parameters: {}
                 }));
-                const linkExistingBtn = _react.screen.queryByText('Add existing content');
+                const linkExistingBtn = _react1.screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
                 const entriesArray = Object.values(entryInfos);
                 for (const info of entriesArray){
                     await clickCardActionsButton(info);
-                    const removeBtn = await _react.screen.findByText('Remove', {
+                    const removeBtn = await _react1.screen.findByText('Remove', {
                         selector: '[role="menuitem"]'
                     });
-                    _react.fireEvent.click(removeBtn);
+                    _userevent.default.click(removeBtn);
                 }
                 expect(sdk.field.setValue).toHaveBeenCalledTimes(3);
                 expect(sdk.field.setValue).toHaveBeenCalledWith([]);
@@ -267,28 +273,28 @@ describe('Multiple resource editor', ()=>{
 });
 async function expectToHaveMoveButton(info, buttonString) {
     await clickCardActionsButton(info);
-    await _react.screen.findByText(buttonString, {
+    await _react1.screen.findByText(buttonString, {
         selector: '[role="menuitem"]'
     });
 }
 async function expectToNotHaveMoveButton(info, buttonString) {
     await clickCardActionsButton(info);
-    expect(_react.screen.queryByText(buttonString, {
+    expect(_react1.screen.queryByText(buttonString, {
         selector: '[role="menuitem"]'
     })).toBeNull();
 }
 async function clickCardActionsButton(info) {
-    _react.fireEvent.click(document.body);
+    _userevent.default.click(document.body);
     const entryTitle = info.resource.fields.title[info.defaultLocaleCode];
     const spaceName = info.space.name;
     const card = await expectEntryCard(entryTitle, spaceName);
     const actionsBtn = card.querySelector('[data-test-id="cf-ui-card-actions"]');
     expect(actionsBtn).toBeInTheDocument();
-    _react.fireEvent.click(actionsBtn);
+    _userevent.default.click(actionsBtn);
 }
 async function expectEntryCard(entryTitle, spaceName) {
-    const title = await _react.screen.findByText(entryTitle);
-    await _react.screen.findByText(spaceName);
+    const title = await _react1.screen.findByText(entryTitle);
+    await _react1.screen.findByText(spaceName);
     const theCard = title.closest('[data-test-id="cf-ui-entry-card"]');
     expect(theCard).toBeDefined();
     const actionsBtn = theCard?.querySelector('[data-test-id="cf-ui-card-actions"]');

package/dist/esm/assets/WrappedAssetCard/AssetCardActions.js

@@ -3,7 +3,7 @@ import { MenuItem, Text, MenuSectionTitle } from '@contentful/f36-components';
 import { PlusIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { shortenStorageUnit } from '@contentful/field-editor-shared';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import get from 'lodash/get';
 const styles = {
     dragHandle: css({

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button } from '@contentful/f36-components';
 import { CaretDownIcon, PlusIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import get from 'lodash/get';
 import { CreateEntryMenuTrigger } from './CreateEntryMenuTrigger';
 const standardStyles = {

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

@@ -2,8 +2,8 @@ import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { TextInput, Menu } from '@contentful/f36-components';
 import { MagnifyingGlassIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
+import { css } from '@emotion/css';
 import { i18n as $_i18n } from "@lingui/core";
-import { css } from 'emotion';
 import get from 'lodash/get';
 const MAX_ITEMS_WITHOUT_SEARCH = 5;
 const menuPlacementMap = {

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

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 export const container = css({
     display: 'flex',
     border: `1px dashed ${tokens.gray500}`,

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

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 export const container = css({
     display: 'flex',
     width: '100%',

package/dist/esm/components/MissingAssetCard/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 export const card = css({
     position: 'relative'
 });

package/dist/esm/components/SpaceName/SpaceName.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Flex, Text, Tooltip } from '@contentful/f36-components';
 import { FolderOpenIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const styles = {
     spaceIcon: css({
         flexShrink: 0,

package/dist/esm/resources/Cards/ResourceCard.spec.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import '@testing-library/jest-dom';
 import { SharedQueryClientProvider } from '@contentful/field-editor-shared/react-query';
 import { createTestQueryClient } from '@contentful/field-editor-test-utils';
-import { configure, fireEvent, render, waitFor } from '@testing-library/react';
+import { configure, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import publishedCT from '../../__fixtures__/content-type/published_content_type.json';
 import publishedEntryNonMasterEnvironment from '../../__fixtures__/entry/published_entry_non_master.json';
 import publishedEntry from '../../__fixtures__/entry/published_entry.json';
@@ -144,8 +145,10 @@ describe('ResourceCard', ()=>{
         await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         expect(getByText(publishedEntry.fields.exField['en-US'])).toBeDefined();
         expect(getByText(space.name)).toBeDefined();
-        fireEvent.mouseEnter(getByText(space.name));
-        await waitFor(()=>expect(getByText(tooltipContent)).toBeDefined());
+        userEvent.hover(getByText(space.name));
+        await waitFor(()=>{
+            expect(getByText(tooltipContent)).toBeVisible();
+        });
     });
     it('renders entry card with explicit master crn', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
@@ -155,8 +158,10 @@ describe('ResourceCard', ()=>{
         await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         expect(getByText(publishedEntry.fields.exField['en-US'])).toBeDefined();
         expect(getByText(space.name)).toBeDefined();
-        fireEvent.mouseEnter(getByText(space.name));
-        await waitFor(()=>expect(getByText(tooltipContent)).toBeDefined());
+        userEvent.hover(getByText(space.name));
+        await waitFor(()=>{
+            expect(getByText(tooltipContent)).toBeVisible();
+        });
     });
     it('renders entry card with a non master environment', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
@@ -166,8 +171,10 @@ describe('ResourceCard', ()=>{
         const tooltipContent = `Space: ${space.name} (Env.: ${publishedEntryNonMasterEnvironment.sys.environment.sys.id})`;
         expect(getByText(publishedEntryNonMasterEnvironment.fields.exField['en-US'])).toBeDefined();
         expect(getByText(space.name)).toBeDefined();
-        fireEvent.mouseEnter(getByText(space.name));
-        await waitFor(()=>expect(getByText(tooltipContent)).toBeDefined());
+        userEvent.hover(getByText(space.name));
+        await waitFor(()=>{
+            expect(getByText(tooltipContent)).toBeVisible();
+        });
     });
     it('renders skeleton while data is loading', async ()=>{
         const queryClient = createTestQueryClient();

package/dist/esm/resources/ExternalResourceCard/ExternalResourceCard.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Badge, EntryCard, MenuItem, MenuDivider, Paragraph, Caption } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import truncate from 'truncate';
 const styles = {
     subtitle: css({

package/dist/esm/resources/MultipleResourceReferenceEditor.spec.js

@@ -1,6 +1,7 @@
-import '@testing-library/jest-dom/extend-expect';
-import { fireEvent, render, screen } from '@testing-library/react';
 import * as React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { useResource } from '../common/EntityStore';
 import { useEditorPermissions } from '../common/useEditorPermissions';
 import { MultipleResourceReferenceEditor } from './MultipleResourceReferenceEditor';
@@ -67,7 +68,7 @@ describe('Multiple resource editor', ()=>{
         }));
         const button = await screen.findByText('Add existing content');
         expect(button).toBeDefined();
-        fireEvent.click(button);
+        userEvent.click(button);
         const dialogFn = sdk.dialogs.selectMultipleResourceEntities;
         expect(dialogFn).toHaveBeenCalledTimes(1);
         const options = dialogFn.mock.calls[0][0];
@@ -212,7 +213,7 @@ describe('Multiple resource editor', ()=>{
                     const removeBtn = await screen.findByText('Remove', {
                         selector: '[role="menuitem"]'
                     });
-                    fireEvent.click(removeBtn);
+                    userEvent.click(removeBtn);
                 }
                 expect(sdk.field.setValue).toHaveBeenCalledTimes(3);
                 expect(sdk.field.setValue).toHaveBeenCalledWith([]);
@@ -233,13 +234,13 @@ async function expectToNotHaveMoveButton(info, buttonString) {
     })).toBeNull();
 }
 async function clickCardActionsButton(info) {
-    fireEvent.click(document.body);
+    userEvent.click(document.body);
     const entryTitle = info.resource.fields.title[info.defaultLocaleCode];
     const spaceName = info.space.name;
     const card = await expectEntryCard(entryTitle, spaceName);
     const actionsBtn = card.querySelector('[data-test-id="cf-ui-card-actions"]');
     expect(actionsBtn).toBeInTheDocument();
-    fireEvent.click(actionsBtn);
+    userEvent.click(actionsBtn);
 }
 async function expectEntryCard(entryTitle, spaceName) {
     const title = await screen.findByText(entryTitle);

package/dist/types/components/CreateEntryLinkButton/CreateEntryLinkButton.d.ts

@@ -15,5 +15,5 @@ interface CreateEntryLinkButtonProps {
         position: 'bottom-left' | 'bottom-right';
     };
 }
-export declare const CreateEntryLinkButton: ({ contentTypes, onSelect, customDropdownItems, text, testId, hasPlusIcon, useExperimentalStyles, suggestedContentTypeId, dropdownSettings, disabled }: CreateEntryLinkButtonProps) => React.JSX.Element;
+export declare const CreateEntryLinkButton: ({ contentTypes, onSelect, customDropdownItems, text, testId, hasPlusIcon, useExperimentalStyles, suggestedContentTypeId, dropdownSettings, disabled, }: CreateEntryLinkButtonProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "6.22.3",
+  "version": "6.22.4-canary.21+dabb1a7b",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -36,18 +36,18 @@
     "tsc": "tsc -p ./ --noEmit"
   },
   "dependencies": {
-    "@contentful/f36-components": "^5.8.1",
-    "@contentful/f36-icons": "^5.8.1",
-    "@contentful/f36-tokens": "^5.1.0",
+    "@contentful/f36-components": "^6.7.1",
+    "@contentful/f36-icons": "^6.7.1",
+    "@contentful/f36-tokens": "^6.1.2",
     "@contentful/field-editor-shared": "^3.0.0",
     "@contentful/mimetype": "^2.2.29",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/css": "^11.13.5",
     "@tanstack/react-query": "^4.3.9",
     "constate": "^3.3.2",
     "contentful-management": "^11.66.0",
-    "emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "moment": "^2.20.0",
     "p-queue": "^4.0.0",
@@ -58,15 +58,16 @@
     "@contentful/app-sdk": "^4.42.0",
     "@contentful/field-editor-test-utils": "^1.8.0",
     "@lingui/core": "5.3.0",
-    "@testing-library/react-hooks": "^8.0.1"
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.1.9"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.41.2",
     "@lingui/core": "^5.3.0",
-    "react": ">=16.8.0"
+    "react": ">=18.3.1"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "0e85d7a4b5b6f779c01bda0c10de03b13a2cfdc0"
+  "gitHead": "dabb1a7b240f576a01f589a34c05bf41edb2cda2"
 }