fix(react): fix dev-only validation to work in React 19 (#723)

* fix(react): fix dev-only validation to work in React 19

* Change files

Author: layershifter

change/@griffel-react-f7f36580-1fc9-43a0-94e9-6563f26778c2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: fix dev-only validation to work in React 19",
+  "packageName": "@griffel/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/createDOMRenderer.test.tsx

@@ -2,7 +2,6 @@ import { createDOMRenderer, mergeClasses } from '@griffel/core';
 import * as React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { act } from 'react-dom/test-utils';
 
 import { makeStyles } from './makeStyles';
 import { makeResetStyles } from './makeResetStyles';
@@ -100,7 +99,7 @@ describe('createDOMRenderer', () => {
       jest.spyOn(styleEl.sheet!, 'insertRule'),
     );
 
-    act(() => {
+    React.act(() => {
       hydrateRoot(
         container,
         // "RendererProvider" is not required there, we need it only for Jest spies

packages/react/src/renderToStyleElements.test.tsx

@@ -4,7 +4,6 @@ import * as prettier from 'prettier';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { act } from 'react-dom/test-utils';
 
 import { makeStyles } from './makeStyles';
 import { makeResetStyles } from './makeResetStyles';
@@ -48,7 +47,7 @@ describe('renderToStyleElements (DOM)', () => {
     };
     const root = createRoot(document.createElement('div'));
 
-    act(() => {
+    React.act(() => {
       root.render(
         <RendererProvider renderer={renderer}>
           <ExampleComponent />
@@ -87,7 +86,7 @@ describe('renderToStyleElements (DOM)', () => {
     };
     const root = createRoot(document.createElement('div'));
 
-    act(() => {
+    React.act(() => {
       root.render(
         <RendererProvider renderer={renderer}>
           <ExampleComponent />

packages/react/src/utils/isInsideComponent.ts

@@ -2,12 +2,26 @@
 
 import * as React from 'react';
 
+function getDispatcher() {
+  try {
+    return (React as any)[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
+  } catch {
+    // React 19+
+  }
+
+  try {
+    return (React as any)[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher
+      .current;
+  } catch {
+    // React 18 and below
+  }
+}
+
 export function isInsideComponent() {
   // React 18 always logs errors if a dispatcher is not present:
   // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
   try {
-    // @ts-expect-error "SECRET_INTERNALS" are not typed
-    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+    const dispatcher = getDispatcher();
 
     // Before any React component was rendered "dispatcher" will be "null"
     if (dispatcher === null || dispatcher === undefined) {