refactor: use props check instead of version check (#593)

* refactor: use props check instead of version check

* chore: update peer

* chore: clean up

* chore: update build

Author: zombieJ

now.json

@@ -67,6 +67,8 @@
     "rc-test": "^7.0.14",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-19": "npm:react@19.0.0-rc-de68d2f4-20241204",
+    "react-dom-19": "npm:react-dom@19.0.0-rc-de68d2f4-20241204",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

package.json

@@ -81,19 +81,13 @@ export const supportNodeRef = <T = any>(
  */
 export const getNodeRef: <T = any>(
   node: React.ReactNode,
-) => React.Ref<T> | null =
-  Number(version.split('.')[0]) >= 19
-    ? // >= React 19
-      node => {
-        if (isReactElement(node)) {
-          return (node as any).props.ref;
-        }
-        return null;
-      }
-    : // < React 19
-      node => {
-        if (isReactElement(node)) {
-          return (node as any).ref;
-        }
-        return null;
-      };
+) => React.Ref<T> | null = node => {
+  if (node && isReactElement(node)) {
+    const ele = node as any;
+
+    // Source from:
+    // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts
+    return ele.props.propertyIsEnumerable('ref') ? ele.props.ref : ele.ref;
+  }
+  return null;
+};

src/ref.ts

@@ -0,0 +1,30 @@
+/* eslint-disable no-eval */
+import React from 'react';
+import { getNodeRef } from '../src/ref';
+
+jest.mock('react', () => {
+  const react19 = jest.requireActual('react-19');
+  return react19;
+});
+
+jest.mock('react-dom', () => {
+  const reactDom19 = jest.requireActual('react-dom-19');
+  return reactDom19;
+});
+
+describe('ref: React 19', () => {
+  const errSpy = jest.spyOn(console, 'error');
+
+  beforeEach(() => {
+    errSpy.mockReset();
+  });
+
+  it('getNodeRef', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const node = <div ref={ref} />;
+
+    expect(getNodeRef(node)).toBe(ref);
+
+    expect(errSpy).not.toHaveBeenCalled();
+  });
+});

tests/ref-19.test.tsx

@@ -12,6 +12,12 @@ import {
 } from '../src/ref';
 
 describe('ref', () => {
+  const errSpy = jest.spyOn(console, 'error');
+
+  beforeEach(() => {
+    errSpy.mockReset();
+  });
+
   describe('composeRef', () => {
     it('basic', () => {
       const refFunc1 = jest.fn();
@@ -207,5 +213,7 @@ describe('ref', () => {
     const node = <div ref={ref} />;
 
     expect(getNodeRef(node)).toBe(ref);
+
+    expect(errSpy).not.toHaveBeenCalled();
   });
 });