From 6b9c6921b191add8c9bd8a656a0db6c5adf6826e Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 4 May 2026 23:14:40 +0000 Subject: [PATCH 1/7] fix: add nodeRef to CSSTransition for React 19 compatibility - Upgrade react-transition-group to ^4.4.5 - Add nodeRef to CSSTransition in Alert.jsx - Add transitionRef to CSSTransition in Modal.jsx Co-Authored-By: shahmir.masood --- package-lock.json | 15 ++++++++------- package.json | 2 +- src/components/Alert/Alert.jsx | 7 ++++++- src/components/Modal/Modal.jsx | 11 +++++++++-- 4 files changed, 24 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5328ef0..e804ec8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "react-dom": "^17.0.2", "react-icons": "^4.3.1", "react-scripts": "5.0.0", - "react-transition-group": "^4.4.2", + "react-transition-group": "^4.4.5", "sass": "^1.49.9", "web-vitals": "^2.1.4" }, @@ -13716,9 +13716,10 @@ } }, "node_modules/react-transition-group": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", - "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "license": "BSD-3-Clause", "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -26295,9 +26296,9 @@ } }, "react-transition-group": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", - "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "requires": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", diff --git a/package.json b/package.json index af71f6d..d57be35 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "react-dom": "^17.0.2", "react-icons": "^4.3.1", "react-scripts": "5.0.0", - "react-transition-group": "^4.4.2", + "react-transition-group": "^4.4.5", "sass": "^1.49.9", "web-vitals": "^2.1.4" }, diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx index 8f378ab..f269be5 100644 --- a/src/components/Alert/Alert.jsx +++ b/src/components/Alert/Alert.jsx @@ -1,3 +1,4 @@ +import { useRef } from 'react'; import useAlert from 'hooks/useAlert'; import classNames from 'classnames'; import { CSSTransition } from 'react-transition-group'; @@ -5,6 +6,7 @@ import styles from './Alert.module.scss'; const Alert = () => { const { message, status, isVisible } = useAlert(); + const nodeRef = useRef(null); const classes = classNames({ [styles.alert]: true, @@ -19,8 +21,11 @@ const Alert = () => { timeout={300} classNames={'fadeIn'} unmountOnExit + nodeRef={nodeRef} > - {message} + + {message} + ); diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx index c8dfc06..70cc073 100644 --- a/src/components/Modal/Modal.jsx +++ b/src/components/Modal/Modal.jsx @@ -6,12 +6,19 @@ import styles from './Modal.module.scss'; const Modal = ({ isOpen, onClose, title, children }) => { const ref = useRef(); + const transitionRef = useRef(null); useOnClickOutside(ref, onClose); return ( - -
+ +