feat(): update React 19

.github/workflows/ci.yml

@@ -206,22 +206,6 @@ jobs:
         name: brick-artifacts
         path: ci-bricks
 
-    - name: Download artifact from next-advanced-bricks
-      id: download-artifact-from-next-advanced-bricks
-      uses: dawidd6/action-download-artifact@v7
-      with:
-        name: brick-artifacts
-        path: ci-advanced-bricks
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        repo: easyops-cn/next-advanced-bricks
-        branch: master
-        event: push
-        workflow: ci.yml
-        workflow_conclusion: ""
-
-    - name: Merge bricks
-      run: cp -r ci-advanced-bricks/* ci-bricks/bricks/
-
     - name: Get yarn cache directory path
       id: yarn-cache-dir-path
       run: echo "::set-output name=dir::$(yarn cache dir)"

bricks/basic/package.json

@@ -44,18 +44,20 @@
     "@next-core/element": "^1.2.16",
     "@next-core/http": "^1.2.11",
     "@next-core/i18n": "^1.0.73",
-    "@next-core/react-element": "^1.0.35",
-    "@next-core/react-runtime": "^1.7.9",
+    "@next-core/pipes": "^2.0.30",
+    "@next-core/react-element": "^2.0.0",
+    "@next-core/react-runtime": "^2.0.0",
     "@next-core/runtime": "^1.59.2",
     "@next-core/theme": "^1.5.4",
     "@next-core/types": "^1.14.0",
+    "@next-core/utils": "^1.7.31",
     "@next-shared/general": "^0.10.7",
     "@next-shared/story": "^0.0.4",
     "broadcast-channel": "^7.0.0",
     "classnames": "^2.3.2",
     "dompurify": "^3.1.6",
     "lodash": "^4.17.21",
-    "react": "0.0.0-experimental-ee8509801-20230117",
+    "react": "^19.0.0",
     "react-i18next": "^12.3.1"
   },
   "devDependencies": {

bricks/basic/src/actions/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { fireEvent, createEvent } from "@testing-library/dom";
 import "./";
 import type { EoActions } from "./index.js";

bricks/basic/src/app-bar-wrapper/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import { EoAppBarWrapper } from "./index.js";
 

bricks/basic/src/avatar-group/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import { EoAvatarGroup } from "./index.js";
 import { EoAvatar } from "../avatar";

bricks/basic/src/avatar/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import { EoAvatar } from "./index.js";
 

bricks/basic/src/breadcrumb-item/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import { EoBreadcrumbItem } from "./index.js";
 

bricks/basic/src/breadcrumb/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import "../breadcrumb-item/index.js";
 import { EoBreadcrumb } from "./index.js";

bricks/basic/src/broadcast-channel/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import type { EoBroadcastChannel } from "./index.js";
 

bricks/basic/src/broadcast-channel/index.tsx

@@ -75,8 +75,8 @@ export function LegacyBroadcastChannelComponent(
   { channel, onMessage }: BroadcastChannelComponentProps,
   ref: Ref<Pick<BroadcastChannel, "postMessage">>
 ) {
-  const channelRef = useRef<BroadcastChannel>();
-  const polyfillRef = useRef<typeof BroadcastChannel>();
+  const channelRef = useRef<BroadcastChannel>(undefined);
+  const polyfillRef = useRef<typeof BroadcastChannel>(undefined);
 
   useImperativeHandle(ref, () => ({
     postMessage(message: unknown) {

bricks/basic/src/button/index.spec.ts

@@ -1,5 +1,5 @@
 import { describe, test, expect } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import { Button } from "./index.js";
 

bricks/basic/src/context-menu/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { fireEvent } from "@testing-library/react";
 import "./";
 import type { EoContextMenu } from "./index.js";

bricks/basic/src/counter-badge/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import { EoCounterBadge } from "./index.jsx";
 

bricks/basic/src/data-providers/show-notification/show-notification.spec.tsx

@@ -1,6 +1,6 @@
 import { describe, test, expect } from "@jest/globals";
 import { showNotification } from "./show-notification.jsx";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { fireEvent } from "@testing-library/react";
 
 customElements.define("sl-alert", class extends HTMLElement {});

bricks/basic/src/data-providers/show-watermark/show-watermark.spec.tsx

@@ -1,7 +1,7 @@
-// import { act } from "react-dom/test-utils";
+// import { act } from "react";
 import { showWaterMark } from "./show-watermark.js";
 import "jest-canvas-mock";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 
 describe("showWaterMark", () => {
   test("general", async () => {

bricks/basic/src/dropdown-actions/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { fireEvent } from "@testing-library/react";
 import "./";
 import { EoDropdownActions } from "./index.js";

bricks/basic/src/dropdown-button/index.spec.ts

@@ -1,5 +1,5 @@
 import { describe, test, expect } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./index.js";
 import { DropdownButton } from "./index.js";
 

bricks/basic/src/dropdown-select/i18n.ts

@@ -1,3 +1,5 @@
+import { i18n } from "@next-core/i18n";
+
 export enum K {
   PLEASE_SELECT = "PLEASE_SELECT",
 }
@@ -14,4 +16,6 @@ export const NS = "bricks/basic/eo-dropdown-select";
 
 export const locales = { en, zh };
 
+export const t = i18n.getFixedT(null, NS);
+
 type Locale = { [key in K]: string };

bricks/basic/src/dropdown-select/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { fireEvent } from "@testing-library/dom";
 import "./";
 import type { DropdownSelect } from "./index.js";
@@ -133,45 +133,45 @@ describe("eo-dropdown-select", () => {
       document.body.appendChild(element);
     });
     expect(element.shadowRoot?.childNodes).toMatchInlineSnapshot(`
-      NodeList [
-        <style>
-          styles.shadow.css
-        </style>,
-        <eo-popover
-          distance="5"
-          placement="bottom-start"
-          trigger="click"
-        >
-          <span
-            class="trigger"
-            slot="anchor"
-          >
-            <span
-              class="label"
-            >
-              PLEASE_SELECT
-            </span>
-            <eo-icon
-              icon="caret-down"
-              lib="antd"
-            />
-          </span>
-          <div
-            class="dropdown"
-          >
-            <slot
-              name="prefix"
-            />
-            <eo-loading-container
-              delay="500"
-              style="width: 100%;"
-            >
-              <eo-menu />
-            </eo-loading-container>
-          </div>
-        </eo-popover>,
-      ]
-    `);
+NodeList [
+  <style>
+    styles.shadow.css
+  </style>,
+  <eo-popover
+    distance="5"
+    placement="bottom-start"
+    trigger="click"
+  >
+    <span
+      class="trigger"
+      slot="anchor"
+    >
+      <span
+        class="label"
+      >
+        Please select
+      </span>
+      <eo-icon
+        icon="caret-down"
+        lib="antd"
+      />
+    </span>
+    <div
+      class="dropdown"
+    >
+      <slot
+        name="prefix"
+      />
+      <eo-loading-container
+        delay="500"
+        style="width: 100%;"
+      >
+        <eo-menu />
+      </eo-loading-container>
+    </div>
+  </eo-popover>,
+]
+`);
 
     act(() => {
       element.setDefaultOption({

bricks/basic/src/dropdown-select/index.tsx

@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import { createDecorators, type EventEmitter } from "@next-core/element";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
-import { useTranslation, initializeReactI18n } from "@next-core/i18n/react";
+import { initializeI18n } from "@next-core/i18n";
 import "@next-core/theme";
 import type {
   GeneralIcon,
@@ -27,10 +27,10 @@ import type {
   LoadingContainer,
   LoadingContainerProps,
 } from "../loading-container";
-import { K, NS, locales } from "./i18n.js";
+import { K, NS, locales, t } from "./i18n.js";
 import styleText from "./styles.shadow.css";
 
-initializeReactI18n(NS, locales);
+initializeI18n(NS, locales);
 
 const { defineElement, property, event, method } = createDecorators();
 
@@ -159,7 +159,6 @@ export function LegacyDropdownSelectComponent(
   }: DropdownSelectComponentProps,
   ref: React.ForwardedRef<DropdownSelectRef>
 ) {
-  const { t } = useTranslation(NS);
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState(defaultValue);
   const [memoizedOptions, setMemoizedOptions] = useState<

bricks/basic/src/easyops-avatar/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import { useUserInfoByNameOrInstanceId } from "./useUserInfoByNameOrInstanceId.js";
 import { EoEasyopsAvatar } from "./index.js";

bricks/basic/src/easyops-avatar/useUserInfoByNameOrInstanceId.spec.tsx

@@ -1,5 +1,5 @@
 import { jest, describe, afterEach, test, expect } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { renderHook } from "@testing-library/react";
 import { UserAdminApi_searchAllUsersInfo } from "@next-api-sdk/user-service-sdk";
 import { useUserInfoByNameOrInstanceId } from "./useUserInfoByNameOrInstanceId.js";

bricks/basic/src/editors/eo-descriptions/index.tsx

@@ -15,7 +15,7 @@ function EoButtonComponentFactory(React: typeof _React) {
       form,
       effects,
     } = props;
-    const dataListRef = React.useRef<any>();
+    const dataListRef = React.useRef<any>(undefined);
 
     React.useEffect(() => {
       const { onSubmit } = effects;

bricks/basic/src/editors/eo-next-table/index.tsx

@@ -43,7 +43,7 @@ function EoNextTableComponentFactory(React: typeof _React) {
     } = props;
 
     const isInitRef = React.useRef<boolean>(false);
-    const dataListRef = React.useRef<any>();
+    const dataListRef = React.useRef<any>(undefined);
 
     React.useEffect(() => {
       const {

bricks/basic/src/event-agent/index.spec.ts

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import type { EoEventAgent } from "./index.js";
 

bricks/basic/src/formatter-number/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import "./";
 import type { EoFormatterNumber } from "./index.js";
 

bricks/basic/src/frame-breadcrumb/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { getRuntime } from "@next-core/runtime";
 import { useCurrentApp } from "@next-core/react-runtime";
 import "./";

bricks/basic/src/iframe/index.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect, jest } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import { fireEvent } from "@testing-library/dom";
 import "./";
 import type { Iframe } from "./index.js";

bricks/basic/src/image/ImageList.spec.tsx

@@ -1,8 +1,8 @@
 import React, { Ref, createRef } from "react";
 import { describe, test, expect } from "@jest/globals";
-import { screen, render, fireEvent } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import { ImageList, ImageListRef } from "./ImageList.jsx";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 
 describe("ImageList", () => {
   test("should work", () => {
@@ -35,7 +35,7 @@ describe("ImageList", () => {
       },
     ];
 
-    const { container, rerender, unmount } = render(
+    const { container } = render(
       <ImageList
         ref={ref}
         imgList={imgList}

bricks/basic/src/image/Preview.spec.tsx

@@ -3,7 +3,7 @@ import { describe, test, expect } from "@jest/globals";
 import { screen, render, fireEvent } from "@testing-library/react";
 import { Preview } from "./Preview.jsx";
 import { ImageListContext } from "./ImageListContext.js";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 
 const { Provider } = ImageListContext;
 

bricks/basic/src/image/hooks/useTransform.spec.ts

@@ -1,7 +1,7 @@
 import { renderHook, waitFor } from "@testing-library/react";
-import { describe, test, expect } from "@jest/globals";
+import { describe, expect } from "@jest/globals";
 import useTransform from "./useTransform.js";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 
 describe("useTransform", () => {
   it("should work", async (): Promise<void> => {