Update dependencies, use createRoot

Author: labkey-alan

reactExamples/package-lock.json

@@ -12,16 +12,16 @@
     "test": "cross-env NODE_ENV=test jest"
   },
   "dependencies": {
-    "@labkey/components": "4.0.0"
+    "@labkey/components": "7.24.2-fb-build-deps.0"
   },
   "devDependencies": {
-    "@labkey/build": "7.3.0",
-    "@types/jest": "29.2.0",
-    "@types/react": "16.14.34",
-    "jest": "29.2.2",
-    "jest-environment-jsdom": "29.2.2",
+    "@labkey/build": "9.0.1-fb-build-deps.0",
+    "@types/jest": "30.0.0",
+    "@types/react": "18.3.27",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
     "jest-teamcity-reporter": "0.9.0",
-    "ts-jest": "29.0.3"
+    "ts-jest": "29.4.6"
   },
   "jest": {
     "globals": {

reactExamples/package.json

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './FileAttachmentForm';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<App/>, document.getElementById('app'));
+    createRoot(document.getElementById('app')).render(<App/>);
 });

reactExamples/src/client/FileAttachmentPage/app.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './FileAttachmentForm';
 
 const render = () => {
-    ReactDOM.render(<App />, document.getElementById('app'));
+    createRoot(document.getElementById('app')).render(<App/>);
 };
 
 render();

reactExamples/src/client/FileAttachmentPage/dev.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './HelloWorld';
 import './helloWorld.scss';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<App/>, document.getElementById('app'));
+    createRoot(document.getElementById('app')).render(<App/>);
 });

reactExamples/src/client/HelloWorldPage/app.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './HelloWorld';
 import './helloWorld.scss';
 
 const render = () => {
-    ReactDOM.render(<App />, document.getElementById('app'));
+    createRoot(document.getElementById('app')).render(<App/>);
 };
 
 render();

reactExamples/src/client/HelloWorldPage/dev.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './QueryModelExample';
 import './queryModelExample.scss';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<App/>, document.getElementById('app'));
+    createRoot(document.getElementById('app')).render(<App/>);
 });

reactExamples/src/client/QueryModelPage/app.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './QueryModelExample';
 import './queryModelExample.scss';
 
 const render = () => {
-    ReactDOM.render(<App />, document.getElementById('app'));
+    createRoot(document.getElementById('app')).render(<App/>);
 };
 
 render();

reactExamples/src/client/QueryModelPage/dev.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { ToDoListPage } from './ToDoListPage'
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<ToDoListPage />, document.getElementById('app'));
+    createRoot(document.getElementById('app')).render(<ToDoListPage />);
 });

reactExamples/src/client/ToDoListPage/app.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { ToDoListPage } from './ToDoListPage';
 
 const render = () => {
-    ReactDOM.render(<ToDoListPage />, document.getElementById('app'))
+    createRoot(document.getElementById('app')).render(<ToDoListPage />);
 };
 
 render();