Replace ReactDOM.render with createRoot from wp.element, #1506

modules/calendar/calendar.php

@@ -652,6 +652,7 @@ public function enqueue_admin_scripts()
                         true
                     );
 
+                    // TODO: Replace react and react-dom with the wp.element dependency
                     wp_enqueue_script(
                         'publishpress-async-calendar-js',
                         $this->module_url . 'lib/async-calendar/js/index.min.js',
@@ -665,6 +666,7 @@ public function enqueue_admin_scripts()
                             'jquery-ui-droppable',
                             'jquery-inputmask',
                             'wp-i18n',
+                            'wp-element',
                             'date_i18n',
                         ],
                         PUBLISHPRESS_VERSION,

modules/calendar/lib/async-calendar/js/index.jsx

@@ -1,8 +1,12 @@
 import AsyncCalendar from "./AsyncCalendar";
-import {getDateWithNoTimezoneOffset, getDateInstanceFromString} from "./Functions";
+import { getDateWithNoTimezoneOffset, getDateInstanceFromString } from "./Functions";
+import { createRoot } from "@wp.element";
 
 jQuery(() => {
-    ReactDOM.render(
+    const container = document.getElementById('publishpress-calendar-wrap');
+    const root = createRoot(container);
+
+    root.render(
         <AsyncCalendar
             firstDateToDisplay={getDateWithNoTimezoneOffset(publishpressCalendarParams.firstDateToDisplay)}
             weekStartsOnSunday={parseInt(publishpressCalendarParams.weekStartsOnSunday) === 1}
@@ -25,7 +29,6 @@ jQuery(() => {
             items={publishpressCalendarParams.items}
             allowAddingMultipleAuthors={publishpressCalendarParams.allowAddingMultipleAuthors}
             requestFilter={publishpressCalendarParams.requestFilter}
-            strings={publishpressCalendarParams.strings}/>,
-        document.getElementById('publishpress-calendar-wrap')
+            strings={publishpressCalendarParams.strings} />
     );
 });