w: upgrade deps

packages/ui-default/components/autocomplete/DomainSelectAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete from '.';
@@ -33,15 +33,12 @@ export default class DomainSelectAutoComplete extends AutoComplete {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
-      <Component
-        ref={(ref) => { this.ref = ref; }}
-        value={value}
-        onChange={this.onChange}
-        multi={this.options.multi}
-      />,
-      this.container,
-    );
+    ReactDOM.createRoot(this.container).render(<Component
+      ref={(ref) => { this.ref = ref; }}
+      value={value}
+      onChange={this.onChange}
+      multi={this.options.multi}
+    />);
   }
 }
 

packages/ui-default/components/autocomplete/ProblemSelectAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete from '.';
@@ -33,14 +33,13 @@ export default class ProblemSelectAutoComplete extends AutoComplete {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
+    ReactDOM.createRoot(this.container).render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         value={value}
         multi={this.options.multi}
         onChange={this.onChange}
       />,
-      this.container,
     );
   }
 }

packages/ui-default/components/autocomplete/UserSelectAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoComplete, { AutoCompleteOptions } from '.';
@@ -38,14 +38,13 @@ export default class UserSelectAutoComplete<Multi extends boolean> extends AutoC
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
+    ReactDOM.createRoot(this.container).render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         value={value}
         multi={this.options.multi}
         onChange={this.onChange}
       />,
-      this.container,
     );
   }
 }

packages/ui-default/components/autocomplete/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoCompleteFC from './components/AutoComplete';
@@ -64,7 +64,7 @@ export default class AutoComplete extends DOMAttachedObject {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.render(
+    ReactDOM.createRoot(this.container).render(
       <AutoCompleteFC
         ref={(ref) => { this.ref = ref; }}
         height="34px"
@@ -76,7 +76,6 @@ export default class AutoComplete extends DOMAttachedObject {
         multi={this.options.multi}
         freeSolo={this.options.multi}
       />,
-      this.container,
     );
   }
 

packages/ui-default/components/discussion/comments.page.tsx

@@ -1,7 +1,7 @@
 import 'jquery.easing';
 
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { Popover } from '@blueprintjs/core';
 import { AutoloadPage } from 'vj/misc/Page';
 import CommentBox from 'vj/components/discussion/CommentBox';
@@ -256,7 +256,7 @@ const commentsPage = new AutoloadPage('commentsPage', () => {
 
   const canUseReaction = $('[data-op="react"]').length > 0;
   $('[data-op="react"]').each((i, e) => {
-    ReactDOM.render(<Reaction payload={$(e).data('form')} ele={$(e).closest('.media__body').find('.reactions')} />, e);
+    ReactDOM.createRoot(e).render(<Reaction payload={$(e).data('form')} ele={$(e).closest('.media__body').find('.reactions')} />);
   });
   $(document).on('click', '.reaction', async (e) => {
     if (!canUseReaction) {

packages/ui-default/components/monaco/languages/yaml.ts

@@ -1,4 +1,4 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { setDiagnosticsOptions } from 'monaco-yaml';
 
 /** @type {Record<string, import('json-schema').JSONSchema7Definition>} */
 const problemConfigSchemaDef = {
@@ -78,8 +78,7 @@ const problemConfigSchema = {
   additionalProperties: false,
 };
 
-// @ts-ignore
-monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
+setDiagnosticsOptions({
   validate: true,
   enableSchemaRequest: true,
   hover: true,
@@ -89,7 +88,7 @@ monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
     {
       uri: 'https://hydro.js.org/schema/problemConfig.json',
       fileMatch: ['hydro://problem/file/config.yaml'],
-      schema: problemConfigSchema,
+      schema: problemConfigSchema as any,
     },
     {
       uri: `${UiContext.cdn_prefix}manage/setting/schema.json`,