fix: react 19 compatibility (#1916)

package.json

@@ -204,8 +204,8 @@
         "typescript": "^5.3.3"
     },
     "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "nano-staged": {
         "*.{scss}": [

src/components/ActionTooltip/ActionTooltip.tsx

@@ -11,6 +11,7 @@ import {Popup} from '../Popup';
 import type {PopupPlacement} from '../Popup';
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
+import {getElementRef} from '../utils/getElementRef';
 
 import './ActionTooltip.scss';
 
@@ -77,7 +78,7 @@ export function ActionTooltip(props: ActionTooltipProps) {
     };
 
     const child = React.Children.only(children);
-    const childRef = (child as any).ref;
+    const childRef = getElementRef(child);
 
     const ref = useForkRef(setAnchorElement, childRef);
 

src/components/Tooltip/Tooltip.tsx

@@ -10,6 +10,7 @@ import type {PopupPlacement} from '../Popup';
 import {Text} from '../Text';
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
+import {getElementRef} from '../utils/getElementRef';
 
 import './Tooltip.scss';
 
@@ -75,7 +76,7 @@ export const Tooltip = (props: TooltipProps) => {
     };
 
     const child = React.Children.only(children);
-    const childRef = (child as any).ref;
+    const childRef = getElementRef(child);
 
     const ref = useForkRef(setAnchorElement, childRef);
 

src/components/index.ts

@@ -66,3 +66,4 @@ export * from './utils/layer-manager';
 export {Lang, configure, getConfig} from './utils/configure';
 export * from './utils/xpath';
 export {getUniqId} from './utils/common';
+export {getElementRef} from './utils/getElementRef';

src/components/utils/FocusTrap.tsx

@@ -7,6 +7,8 @@ import type {FocusTrap as FocusTrapInstance} from 'focus-trap';
 
 import {useForkRef, useUniqId} from '../../hooks';
 
+import {getElementRef} from './getElementRef';
+
 interface FocusTrapContext {
     addNode: (id: string, node: HTMLElement) => void;
     removeNode: (id: string) => void;
@@ -90,7 +92,7 @@ export function FocusTrap({
     if (!React.isValidElement<any>(child)) {
         throw new Error('Children must contain only one valid element');
     }
-    const childRef = (child as any).ref;
+    const childRef = getElementRef(child);
 
     const ref = useForkRef(handleNodeRef, childRef);
 

src/components/utils/getElementRef.ts

@@ -0,0 +1,11 @@
+// Access the element's ref using a method that doesn't produce a warning.
+export function getElementRef(element: React.ReactElement) {
+    if (process.env.NODE_ENV !== 'production') {
+        // Before React 19, there is an access check for ReactElement's props.ref in dev builds.
+        const getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;
+        if (getter && 'isReactWarning' in getter && getter.isReactWarning) {
+            return (element as any).ref;
+        }
+    }
+    return element.props.ref ?? (element as any).ref;
+}