build!: Update supported React ranges

BREAKING CHANGE: drop react 16 & 17 support

Author: jquense

package.json

@@ -109,8 +109,8 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@4c/cli": "^4.0.4",
@@ -121,47 +121,42 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@eslint/js": "^9.17.0",
-    "@react-bootstrap/eslint-config": "^2.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@testing-library/dom": "^10.3.1",
-    "@testing-library/react": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/classnames": "^2.3.1",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-transition-group": "^4.4.4",
+    "@types/classnames": "^2.3.4",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-transition-group": "^4.4.12",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
-    "@vitejs/plugin-react": "^4.3.2",
-    "@vitest/browser": "^2.1.3",
-    "@vitest/coverage-istanbul": "2.1.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^2.1.8",
+    "@vitest/coverage-istanbul": "2.1.8",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-istanbul": "^6.1.1",
     "babel-preset-env-modules": "^1.0.1",
-    "cherry-pick": "^0.5.0",
     "cross-env": "^7.0.3",
     "eslint": "^9.17.0",
     "eslint-config-4catalyzer-typescript": "^3.3.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "gh-pages": "^3.1.0",
     "globals": "^15.14.0",
-    "hookem": "^1.0.9",
-    "lint-staged": "^10.5.4",
-    "playwright": "^1.48.0",
+    "hookem": "^3.0.4",
+    "lint-staged": "^15.3.0",
+    "playwright": "^1.49.1",
     "prettier": "^3.4.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-transition-group": "^4.4.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^4.18.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-transition-group": "^4.4.5",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.30.1",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.19.1",
-    "vitest": "^2.1.3"
+    "vitest": "^2.1.8"
   },
   "bugs": {
     "url": "https://github.com/react-restart/ui/issues"

src/ImperativeTransition.tsx

@@ -5,6 +5,7 @@ import { useRef, cloneElement, useState } from 'react';
 import { TransitionComponent, TransitionProps } from './types';
 import NoopTransition from './NoopTransition';
 import RTGTransition from './RTGTransition';
+import { getChildRef } from './utils';
 
 export interface TransitionFunctionOptions {
   in: boolean;
@@ -108,7 +109,7 @@ export default function ImperativeTransition({
     },
   });
 
-  const combinedRef = useMergedRefs(ref, (children as any).ref);
+  const combinedRef = useMergedRefs(ref, getChildRef(children));
 
   return exited && !inProp
     ? null

src/Modal.tsx

@@ -57,7 +57,7 @@ export interface RenderModalBackdropProps {
   This is due to Typescript not playing well with index signatures e.g. when using Omit
 */
 export interface BaseModalProps extends TransitionCallbacks {
-  children?: React.ReactElement;
+  children?: React.ReactElement<any>;
   role?: string;
   style?: React.CSSProperties;
   className?: string;
@@ -407,8 +407,12 @@ const Modal: React.ForwardRefExoticComponent<
       }
     });
 
-    const removeFocusListenerRef = useRef<ReturnType<typeof listen> | null>();
-    const removeKeydownListenerRef = useRef<ReturnType<typeof listen> | null>();
+    const removeFocusListenerRef = useRef<ReturnType<typeof listen> | null>(
+      null,
+    );
+    const removeKeydownListenerRef = useRef<ReturnType<typeof listen> | null>(
+      null,
+    );
 
     const handleHidden: TransitionCallbacks['onExited'] = (...args) => {
       setExited(true);

src/NoopTransition.tsx

@@ -2,6 +2,7 @@ import useEventCallback from '@restart/hooks/useEventCallback';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import { cloneElement, useEffect, useRef } from 'react';
 import { TransitionProps } from './types';
+import { getChildRef } from './utils';
 
 function NoopTransition({
   children,
@@ -21,7 +22,7 @@ function NoopTransition({
     }
   }, [inProp, handleExited]);
 
-  const combinedRef = useMergedRefs(ref, (children as any).ref);
+  const combinedRef = useMergedRefs(ref, getChildRef(children));
 
   const child = cloneElement(children, { ref: combinedRef });
 

src/RTGTransition.tsx

@@ -10,7 +10,7 @@ export type RTGTransitionProps = TransitionProps & {
 // Normalizes Transition callbacks when nodeRef is used.
 const RTGTransition = React.forwardRef<any, RTGTransitionProps>(
   ({ component: Component, ...props }, ref) => {
-    const transitionProps = useRTGTransitionProps(props);
+    const transitionProps = useRTGTransitionProps(props as any);
 
     return <Component ref={ref} {...transitionProps} />;
   },

src/types.ts

@@ -100,7 +100,7 @@ export interface TransitionCallbacks {
 export interface TransitionProps extends TransitionCallbacks {
   in?: boolean;
   appear?: boolean;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   mountOnEnter?: boolean;
   unmountOnExit?: boolean;
 }

src/usePopper.ts

@@ -125,7 +125,7 @@ function usePopper(
   }: UsePopperOptions = {},
 ): UsePopperState {
   const prevModifiers = useRef<UsePopperOptions['modifiers']>(modifiers);
-  const popperInstanceRef = useRef<Instance>();
+  const popperInstanceRef = useRef<Instance>(undefined);
 
   const update = useCallback(() => {
     popperInstanceRef.current?.update();

src/useRTGTransitionProps.ts

@@ -71,7 +71,7 @@ export default function useRTGTransitionProps({
               ...innerProps,
               ref: mergedRef,
             })) as any)
-        : cloneElement(children as React.ReactElement, {
+        : cloneElement(children as React.ReactElement<any>, {
             ref: mergedRef,
           }),
   };

src/utils.ts

@@ -15,11 +15,12 @@ export function getReactVersion() {
 
 export function getChildRef(
   element?: React.ReactElement | ((...args: any[]) => React.ReactNode) | null,
-) {
+): React.Ref<any> | null {
   if (!element || typeof element === 'function') {
     return null;
   }
   const { major } = getReactVersion();
-  const childRef = major >= 19 ? element.props.ref : (element as any).ref;
+  const childRef =
+    major >= 19 ? (element.props as any).ref : (element as any).ref;
   return childRef;
 }

test/TabPanelSpec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { expect, vi, describe, it } from 'vitest';
 import Transition from 'react-transition-group/Transition';
@@ -78,16 +78,21 @@ describe('<TabPanel>', () => {
       entered: 'show',
     };
 
-    const Fade = ({ children, ...props }: any) => (
-      <Transition {...props} timeout={FADE_DURATION}>
-        {(status: keyof typeof fadeStyles, innerProps: any) =>
-          React.cloneElement(children, {
-            ...innerProps,
-            className: `fade ${fadeStyles[status]} ${children.props.className}`,
-          })
-        }
-      </Transition>
-    );
+    function Fade({ children, ...props }: any) {
+      const ref = useRef(null);
+      return (
+        <Transition {...props} nodeRef={ref} timeout={FADE_DURATION}>
+          {(status: keyof typeof fadeStyles, innerProps: any) =>
+            React.cloneElement(children, {
+              ...innerProps,
+              ref: ref,
+              className: `fade ${fadeStyles[status]} ${children.props.className}`,
+            })
+          }
+        </Transition>
+      );
+    }
+
     function Tab({ eventKey, ...props }: any) {
       const [navItemProps, _] = useNavItem({
         key: eventKey,