@trtc/calls-uikit-react 4.5.1 → 4.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.es.js",
   "types": "./types/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@tencentcloud/tui-core-lite": "~1.0.1",
-    "@trtc/call-engine-lite-js": "~4.0.1",
+    "@trtc/call-engine-lite-js": "~4.0.3",
     "@tencentcloud/lite-chat": "^1.6.3",
     "@trtc/call-engine-lite-wx": "~4.0.0"
 },

package/src/Components/components/base/Message/Message.tsx

@@ -46,7 +46,8 @@ export function Message(props: IMessageProps) {
     plaintext = false,
     onClose = () => null,
   } = props;
-  const timer = useRef<any>();
+  // React 19's useRef removed the no-argument overload; pass undefined explicitly.
+  const timer = useRef<any>(undefined);
   const classnames = classNames([
     className,
     `${classPrefix}-message-container`,

package/src/Components/components/base/Message/MessagePlugin.tsx

@@ -1,4 +1,4 @@
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
 import React, { CSSProperties, useEffect } from 'react';
 import { IMessageProps, Message } from './Message';
 import { noop } from '../../../../TUICallService/utils/common-utils';
@@ -46,7 +46,9 @@ function createContainer(): Promise<Element> {
     const container = Array.from(mountedDom.querySelectorAll(`#${containerId}`));
     if (container.length < 1) {
       const div = document.createElement('div');
-      render(
+      // Use React 18+ createRoot API; legacy ReactDOM.render was removed in React 19.
+      const root = createRoot(div);
+      root.render(
         <MessageContainer
           id={containerId}
           zIndex={1}
@@ -56,7 +58,6 @@ function createContainer(): Promise<Element> {
             resolve(containers[0]);
           }}
         />,
-        div,
       );
     } else {
       resolve(container[0]);
@@ -73,9 +74,18 @@ async function createMessage(theme, config): Promise<any> {
 
   keyIndex += 1;
 
+  // Persist the React root so it can be unmounted explicitly in close().
+  let root: Root | null = null;
   const message = {
     close: () => {
-      unmountComponentAtNode(div);
+      if (root) {
+        // Defer unmount to the next tick to avoid React's "synchronously unmount
+        // a root while React is already rendering" warning when the close is
+        // triggered from inside a render-phase callback.
+        const targetRoot = root;
+        root = null;
+        Promise.resolve().then(() => targetRoot.unmount());
+      }
       div.remove();
       message.closed = true;
     },
@@ -95,10 +105,9 @@ async function createMessage(theme, config): Promise<any> {
   }
 
   return new Promise((resolve) => {
-    // TODO
-    // ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
-    // Renders the component.
-    render(
+    // Use React 18+ createRoot API; legacy ReactDOM.render was removed in React 19.
+    root = createRoot(div);
+    root.render(
       <Message
         key={keyIndex}
         {...config}
@@ -111,7 +120,6 @@ async function createMessage(theme, config): Promise<any> {
       >
         {content}
       </Message>,
-      div,
     );
 
     // Mounts the current rendered message to the specified container.

package/src/Components/components/base/Popup/Popup.tsx

@@ -29,7 +29,8 @@ const Popup = forwardRef((props: IPopupProps, ref: any) => {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const contentRef = useRef(null); // The content section.
-  const updateTimeRef = useRef<any>();
+  // React 19's useRef removed the no-argument overload; pass undefined explicitly.
+  const updateTimeRef = useRef<any>(undefined);
   const popupRef = useRef(null);
   const { styles } = usePopper(referenceElement, popperElement, {
     modifiers: [{ name: 'arrow', options: { element: arrowElement } }],

package/src/Components/components/common/FloatingWindow/FloatingWindow.tsx

@@ -14,7 +14,8 @@ interface IFloatingWindowProps {
 
 export default function FloatingWindow(props: IFloatingWindowProps) {
   const { isGroupCall } = useContext(CallInfoContext);
-  const nodeRef = useRef<any>();
+  // React 19's useRef removed the no-argument overload; pass undefined explicitly.
+  const nodeRef = useRef<any>(undefined);
   const [clickable, setClickable] = useState(true);
   const visibility: any = props.show ? '' : 'hidden';
 

package/src/Components/components/common/UIKitModal/UIKitModal.tsx

@@ -50,7 +50,9 @@ function processAnchorTags(content: string): string {
   return doc.body.innerHTML;
 }
 
-const TypeIcons: Record<string, () => JSX.Element> = {
+// React 19 narrows component return types; use ReactNode instead of JSX.Element
+// so each entry can be rendered as <TypeIcon />.
+const TypeIcons: Record<string, () => ReactNode> = {
   success: () => <span style={{ color: 'green', marginRight: '6px' }}>✓</span>,
   info: () => <span style={{ color: '#1890ff', marginRight: '6px' }}>ℹ</span>,
   error: () => <span style={{ color: 'red', marginRight: '6px' }}>✕</span>,

package/src/TUICallService/CallService/index.ts

@@ -27,7 +27,7 @@ const TUIGlobal: ITUIGlobal = TuiGlobal.getInstance();
 const TUIStore: ITUIStore = TuiStore.getInstance();
 const uiDesign = UIDesign.getInstance();
 uiDesign.setTUIStore(TUIStore);
-const version = '4.5.1';
+const version = '4.5.2';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'react';
 export { TUIGlobal, TUIStore, uiDesign };

package/src/index.ts

@@ -35,7 +35,7 @@ const TUICallType = {
   AUDIO_CALL: 1,
   VIDEO_CALL: 2,
 };
-const Version = '4.5.1'; // basic-demo 原来上报使用
+const Version = '4.5.2'; // basic-demo 原来上报使用
 
 // 输出产物
 export {