@contentful/field-editor-shared 4.3.0 → 4.4.0

package/dist/cjs/ModalDialogLauncher.js

@@ -20,7 +20,8 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _reactdom = /*#__PURE__*/ _interop_require_default(require("react-dom"));
+const _reactdom = require("react-dom");
+const _client = require("react-dom/client");
 const _f36components = require("@contentful/f36-components");
 const _isNumber = /*#__PURE__*/ _interop_require_default(require("lodash/isNumber"));
 function _interop_require_default(obj) {
@@ -69,15 +70,18 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const CLOSE_DELAY = 300;
 function open(componentRenderer) {
     let rootDom = null;
+    let reactRoot = null;
     const getRoot = ()=>{
         if (rootDom === null) {
             rootDom = document.createElement('div');
             rootDom.setAttribute('id', 'field-editor-modal-root');
             document.body.appendChild(rootDom);
+            reactRoot = (0, _client.createRoot)(rootDom);
         }
-        return rootDom;
+        return reactRoot;
     };
     return new Promise((resolve)=>{
         let currentConfig = {
@@ -85,19 +89,23 @@ function open(componentRenderer) {
             isShown: true
         };
         function render({ onClose, isShown }) {
-            _reactdom.default.render(componentRenderer({
-                onClose,
-                isShown
-            }), getRoot());
+            (0, _reactdom.flushSync)(()=>{
+                getRoot().render(componentRenderer({
+                    onClose,
+                    isShown
+                }));
+            });
         }
-        function onClose(...args) {
+        async function onClose(...args) {
             currentConfig = {
                 ...currentConfig,
                 isShown: false
             };
             render(currentConfig);
             resolve(...args);
-            getRoot().remove();
+            await new Promise((r)=>setTimeout(r, CLOSE_DELAY));
+            reactRoot?.unmount();
+            rootDom?.remove();
         }
         render(currentConfig);
     });

package/dist/esm/ModalDialogLauncher.js

@@ -1,16 +1,20 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Modal, ModalHeader } from '@contentful/f36-components';
 import isNumber from 'lodash/isNumber';
+const CLOSE_DELAY = 300;
 export function open(componentRenderer) {
     let rootDom = null;
+    let reactRoot = null;
     const getRoot = ()=>{
         if (rootDom === null) {
             rootDom = document.createElement('div');
             rootDom.setAttribute('id', 'field-editor-modal-root');
             document.body.appendChild(rootDom);
+            reactRoot = createRoot(rootDom);
         }
-        return rootDom;
+        return reactRoot;
     };
     return new Promise((resolve)=>{
         let currentConfig = {
@@ -18,19 +22,23 @@ export function open(componentRenderer) {
             isShown: true
         };
         function render({ onClose, isShown }) {
-            ReactDOM.render(componentRenderer({
-                onClose,
-                isShown
-            }), getRoot());
+            flushSync(()=>{
+                getRoot().render(componentRenderer({
+                    onClose,
+                    isShown
+                }));
+            });
         }
-        function onClose(...args) {
+        async function onClose(...args) {
             currentConfig = {
                 ...currentConfig,
                 isShown: false
             };
             render(currentConfig);
             resolve(...args);
-            getRoot().remove();
+            await new Promise((r)=>setTimeout(r, CLOSE_DELAY));
+            reactRoot?.unmount();
+            rootDom?.remove();
         }
         render(currentConfig);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-shared",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@contentful/app-sdk": "^4.42.0",
-    "@contentful/field-editor-test-utils": "^3.0.0",
+    "@contentful/field-editor-test-utils": "^3.1.0",
     "@lingui/core": "5.3.0",
     "@tanstack/react-query": "^4.3.9",
     "@testing-library/react": "16.3.0"
@@ -73,5 +73,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "733a70780b8117fd54a6578c4653307cb1910ad8"
+  "gitHead": "b3a1d791df55536d6de78bb138b97224d6c0c70e"
 }