Skip to content

Commit 4af9c50

Browse files
jquensejquense
committed
build!: Update supported React ranges
BREAKING CHANGE: drop react 16 & 17 support
1 parent 66a41bb commit 4af9c50

File tree

11 files changed

+756
-1006
lines changed

11 files changed

+756
-1006
lines changed

‎package.json‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@
109109
"warning": "^4.0.3"
110110
},
111111
"peerDependencies": {
112-
"react": ">=16.14.0",
113-
"react-dom": ">=16.14.0"
112+
"react": ">=18.0.0",
113+
"react-dom": ">=18.0.0"
114114
},
115115
"devDependencies": {
116116
"@4c/cli": "^4.0.4",
@@ -121,47 +121,42 @@
121121
"@babel/preset-react": "^7.26.3",
122122
"@babel/preset-typescript": "^7.26.0",
123123
"@eslint/js": "^9.17.0",
124-
"@react-bootstrap/eslint-config": "^2.0.0",
125-
"@rollup/plugin-node-resolve": "^15.2.3",
126-
"@testing-library/dom": "^10.3.1",
127-
"@testing-library/react": "^16.0.0",
124+
"@rollup/plugin-node-resolve": "^16.0.0",
125+
"@testing-library/dom": "^10.4.0",
126+
"@testing-library/react": "^16.1.0",
128127
"@testing-library/user-event": "^14.5.2",
129-
"@types/classnames": "^2.3.1",
130-
"@types/react": "^18.3.3",
131-
"@types/react-dom": "^18.3.0",
132-
"@types/react-transition-group": "^4.4.4",
128+
"@types/classnames": "^2.3.4",
129+
"@types/react": "^19.0.4",
130+
"@types/react-dom": "^19.0.2",
131+
"@types/react-transition-group": "^4.4.12",
133132
"@typescript-eslint/eslint-plugin": "^8.19.1",
134133
"@typescript-eslint/parser": "^8.19.1",
135-
"@vitejs/plugin-react": "^4.3.2",
136-
"@vitest/browser": "^2.1.3",
137-
"@vitest/coverage-istanbul": "2.1.3",
134+
"@vitejs/plugin-react": "^4.3.4",
135+
"@vitest/browser": "^2.1.8",
136+
"@vitest/coverage-istanbul": "2.1.8",
138137
"babel-eslint": "^10.1.0",
139-
"babel-plugin-istanbul": "^6.1.1",
140138
"babel-preset-env-modules": "^1.0.1",
141-
"cherry-pick": "^0.5.0",
142139
"cross-env": "^7.0.3",
143140
"eslint": "^9.17.0",
144141
"eslint-config-4catalyzer-typescript": "^3.3.0",
145142
"eslint-config-prettier": "^9.1.0",
146-
"eslint-plugin-import": "^2.31.0",
147-
"eslint-plugin-jsx-a11y": "^6.10.2",
148143
"eslint-plugin-prettier": "^5.2.1",
149144
"eslint-plugin-react": "^7.37.3",
150145
"eslint-plugin-react-hooks": "^5.1.0",
151146
"gh-pages": "^3.1.0",
152147
"globals": "^15.14.0",
153-
"hookem": "^1.0.9",
154-
"lint-staged": "^10.5.4",
155-
"playwright": "^1.48.0",
148+
"hookem": "^3.0.4",
149+
"lint-staged": "^15.3.0",
150+
"playwright": "^1.49.1",
156151
"prettier": "^3.4.2",
157-
"react": "^18.3.1",
158-
"react-dom": "^18.3.1",
159-
"react-transition-group": "^4.4.1",
160-
"rimraf": "^3.0.2",
161-
"rollup": "^4.18.1",
152+
"react": "^19.0.0",
153+
"react-dom": "^19.0.0",
154+
"react-transition-group": "^4.4.5",
155+
"rimraf": "^6.0.1",
156+
"rollup": "^4.30.1",
162157
"typescript": "^5.7.3",
163158
"typescript-eslint": "^8.19.1",
164-
"vitest": "^2.1.3"
159+
"vitest": "^2.1.8"
165160
},
166161
"bugs": {
167162
"url": "https://github.com/react-restart/ui/issues"

‎src/ImperativeTransition.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useRef, cloneElement, useState } from 'react';
55
import { TransitionComponent, TransitionProps } from './types';
66
import NoopTransition from './NoopTransition';
77
import RTGTransition from './RTGTransition';
8+
import { getChildRef } from './utils';
89

910
export interface TransitionFunctionOptions {
1011
in: boolean;
@@ -108,7 +109,7 @@ export default function ImperativeTransition({
108109
},
109110
});
110111

111-
const combinedRef = useMergedRefs(ref, (children as any).ref);
112+
const combinedRef = useMergedRefs(ref, getChildRef(children));
112113

113114
return exited && !inProp
114115
? null

‎src/Modal.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export interface RenderModalBackdropProps {
5757
This is due to Typescript not playing well with index signatures e.g. when using Omit
5858
*/
5959
export interface BaseModalProps extends TransitionCallbacks {
60-
children?: React.ReactElement;
60+
children?: React.ReactElement<any>;
6161
role?: string;
6262
style?: React.CSSProperties;
6363
className?: string;
@@ -407,8 +407,12 @@ const Modal: React.ForwardRefExoticComponent<
407407
}
408408
});
409409

410-
const removeFocusListenerRef = useRef<ReturnType<typeof listen> | null>();
411-
const removeKeydownListenerRef = useRef<ReturnType<typeof listen> | null>();
410+
const removeFocusListenerRef = useRef<ReturnType<typeof listen> | null>(
411+
null,
412+
);
413+
const removeKeydownListenerRef = useRef<ReturnType<typeof listen> | null>(
414+
null,
415+
);
412416

413417
const handleHidden: TransitionCallbacks['onExited'] = (...args) => {
414418
setExited(true);

‎src/NoopTransition.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import useEventCallback from '@restart/hooks/useEventCallback';
22
import useMergedRefs from '@restart/hooks/useMergedRefs';
33
import { cloneElement, useEffect, useRef } from 'react';
44
import { TransitionProps } from './types';
5+
import { getChildRef } from './utils';
56

67
function NoopTransition({
78
children,
@@ -21,7 +22,7 @@ function NoopTransition({
2122
}
2223
}, [inProp, handleExited]);
2324

24-
const combinedRef = useMergedRefs(ref, (children as any).ref);
25+
const combinedRef = useMergedRefs(ref, getChildRef(children));
2526

2627
const child = cloneElement(children, { ref: combinedRef });
2728

‎src/RTGTransition.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export type RTGTransitionProps = TransitionProps & {
1010
// Normalizes Transition callbacks when nodeRef is used.
1111
const RTGTransition = React.forwardRef<any, RTGTransitionProps>(
1212
({ component: Component, ...props }, ref) => {
13-
const transitionProps = useRTGTransitionProps(props);
13+
const transitionProps = useRTGTransitionProps(props as any);
1414

1515
return <Component ref={ref} {...transitionProps} />;
1616
},

‎src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export interface TransitionCallbacks {
100100
export interface TransitionProps extends TransitionCallbacks {
101101
in?: boolean;
102102
appear?: boolean;
103-
children: React.ReactElement;
103+
children: React.ReactElement<any>;
104104
mountOnEnter?: boolean;
105105
unmountOnExit?: boolean;
106106
}

‎src/usePopper.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ function usePopper(
125125
}: UsePopperOptions = {},
126126
): UsePopperState {
127127
const prevModifiers = useRef<UsePopperOptions['modifiers']>(modifiers);
128-
const popperInstanceRef = useRef<Instance>();
128+
const popperInstanceRef = useRef<Instance>(undefined);
129129

130130
const update = useCallback(() => {
131131
popperInstanceRef.current?.update();

‎src/useRTGTransitionProps.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default function useRTGTransitionProps({
7171
...innerProps,
7272
ref: mergedRef,
7373
})) as any)
74-
: cloneElement(children as React.ReactElement, {
74+
: cloneElement(children as React.ReactElement<any>, {
7575
ref: mergedRef,
7676
}),
7777
};

‎src/utils.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@ export function getReactVersion() {
1515

1616
export function getChildRef(
1717
element?: React.ReactElement | ((...args: any[]) => React.ReactNode) | null,
18-
) {
18+
): React.Ref<any> | null {
1919
if (!element || typeof element === 'function') {
2020
return null;
2121
}
2222
const { major } = getReactVersion();
23-
const childRef = major >= 19 ? element.props.ref : (element as any).ref;
23+
const childRef =
24+
major >= 19 ? (element.props as any).ref : (element as any).ref;
2425
return childRef;
2526
}

‎test/TabPanelSpec.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useRef } from 'react';
22
import { fireEvent, render, waitFor } from '@testing-library/react';
33
import { expect, vi, describe, it } from 'vitest';
44
import Transition from 'react-transition-group/Transition';
@@ -78,16 +78,21 @@ describe('<TabPanel>', () => {
7878
entered: 'show',
7979
};
8080

81-
const Fade = ({ children, ...props }: any) => (
82-
<Transition {...props} timeout={FADE_DURATION}>
83-
{(status: keyof typeof fadeStyles, innerProps: any) =>
84-
React.cloneElement(children, {
85-
...innerProps,
86-
className: `fade ${fadeStyles[status]} ${children.props.className}`,
87-
})
88-
}
89-
</Transition>
90-
);
81+
function Fade({ children, ...props }: any) {
82+
const ref = useRef(null);
83+
return (
84+
<Transition {...props} nodeRef={ref} timeout={FADE_DURATION}>
85+
{(status: keyof typeof fadeStyles, innerProps: any) =>
86+
React.cloneElement(children, {
87+
...innerProps,
88+
ref: ref,
89+
className: `fade ${fadeStyles[status]} ${children.props.className}`,
90+
})
91+
}
92+
</Transition>
93+
);
94+
}
95+
9196
function Tab({ eventKey, ...props }: any) {
9297
const [navItemProps, _] = useNavItem({
9398
key: eventKey,

0 commit comments

Comments
 (0)