fix: isFragment not support React 19 (#604)

Author: zombieJ

src/Children/toArray.ts

@@ -1,5 +1,5 @@
+import isFragment from '../React/isFragment';
 import React from 'react';
-import { isFragment } from 'react-is';
 
 export interface Option {
   keepEmpty?: boolean;

src/React/isFragment.ts

@@ -0,0 +1,19 @@
+const REACT_ELEMENT_TYPE_18 = Symbol.for('react.element');
+const REACT_ELEMENT_TYPE_19 = Symbol.for('react.transitional.element');
+const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+
+/**
+ * Compatible with React 18 or 19 to check if node is a Fragment.
+ */
+export default function isFragment(object: any) {
+  return (
+    // Base object type
+    object &&
+    typeof object === 'object' &&
+    // React Element type
+    (object.$$typeof === REACT_ELEMENT_TYPE_18 ||
+      object.$$typeof === REACT_ELEMENT_TYPE_19) &&
+    // React Fragment type
+    object.type === REACT_FRAGMENT_TYPE
+  );
+}

src/ref.ts

@@ -1,7 +1,8 @@
 import type * as React from 'react';
 import { isValidElement } from 'react';
-import { ForwardRef, isFragment, isMemo } from 'react-is';
+import { ForwardRef, isMemo } from 'react-is';
 import useMemo from './hooks/useMemo';
+import isFragment from './React/isFragment';
 
 export const fillRef = <T>(ref: React.Ref<T>, node: T) => {
   if (typeof ref === 'function') {

tests/toArray-19.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import toArray from '../src/Children/toArray';
+
+jest.mock('react', () => {
+  const react19 = jest.requireActual('react-19');
+  return react19;
+});
+
+jest.mock('react-dom', () => {
+  const reactDom19 = jest.requireActual('react-dom-19');
+  return reactDom19;
+});
+
+jest.mock('react-dom/client', () => {
+  const reactDom19Client = jest.requireActual('react-dom-19/client');
+  return reactDom19Client;
+});
+
+jest.mock('react-dom/test-utils', () => {
+  const reactDom19Test = jest.requireActual('react-dom-19/test-utils');
+  return reactDom19Test;
+});
+
+class UL extends React.Component<{
+  children?: React.ReactNode;
+}> {
+  render() {
+    return <ul>{this.props.children}</ul>;
+  }
+}
+
+describe('toArray', () => {
+  it('Fragment', () => {
+    const ulRef = React.createRef<UL>();
+
+    render(
+      <UL ref={ulRef}>
+        <li key="1">1</li>
+        <>
+          <li key="2">2</li>
+          <li key="3">3</li>
+        </>
+        <React.Fragment>
+          <>
+            <li key="4">4</li>
+            <li key="5">5</li>
+          </>
+        </React.Fragment>
+      </UL>,
+    );
+
+    const children = toArray(ulRef.current.props.children);
+    expect(children).toHaveLength(5);
+    expect(children.map(c => c.key)).toEqual(['1', '2', '3', '4', '5']);
+  });
+});