chore: Update way to check react version to switch to use react-dom/client

.changeset/late-foxes-remain.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Adding check react version by using major number instead string

lib/makeWebpackConfig.js

@@ -30,7 +30,8 @@ module.exports = async (playroomConfig, options) => {
       }
     );
     const { version } = JSON.parse(pkgContents);
-    isLegacyReact = !(version.startsWith('18') || version.startsWith('0.0.0'));
+    const majorVersion = Number(version.split('.')[0]);
+    isLegacyReact = !(majorVersion >= 18 || version.startsWith('0.0.0'));
   } catch (e) {
     throw new Error('Unable to read `react-dom` package json');
   }

src/Playroom/Toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState, useCallback, useEffect } from 'react';
+import { useRef, useContext, useState, useCallback, useEffect } from 'react';
 import { useTimeoutFn } from 'react-use';
 import classnames from 'classnames';
 import type { PlayroomProps } from '../Playroom';
@@ -40,6 +40,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
   ] = useContext(StoreContext);
   const [copying, setCopying] = useState(false);
   const [isReady, cancel, reset] = useTimeoutFn(() => setCopying(false), 3000);
+  const nodeRef = useRef(null);
 
   const copyHandler = useCallback(() => {
     dispatch({
@@ -157,13 +158,14 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
         </div>
         <CSSTransition
           in={isOpen}
+          nodeRef={nodeRef}
           timeout={ANIMATION_TIMEOUT}
           classNames={styles.transitionStyles}
           mountOnEnter
           unmountOnExit
           onExited={() => setLastActivePanel(undefined)}
         >
-          <div className={styles.panel} id="custom-id">
+          <div ref={nodeRef} className={styles.panel} id="custom-id">
             {lastActivePanel === 'snippets' && (
               <Snippets
                 isOpen={isOpen}

src/render.js

@@ -3,9 +3,11 @@ import ReactDOM, { version as reactDomVersion } from 'react-dom';
 // Uses the correct render API based on the available version of
 // `react-dom`. This hack can be removed when support for older
 // versions of React is removed.
+
+const mainVersion = Number(reactDomVersion.split('.')[0]);
 const canUseNewReactRootApi =
   reactDomVersion &&
-  (reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0'));
+  (mainVersion >= 18 || reactDomVersion.startsWith('0.0.0'));
 
 export const renderElement = (node, outlet) => {
   if (canUseNewReactRootApi) {