Merge pull request #406 from TykTechnologies/TUI-97/css-transitions-workaround

TUI-97: workaround for making CSSTransition used by the Collapsible and Modal components work with react 19

Author: ifrim

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.19",
+  "version": "4.4.20",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

package.json

@@ -62,6 +62,7 @@ function Collapsible({
       in={!collapsed}
       timeout={0}
       classNames="collapse"
+      nodeRef={collapseWrapper}
     >
       <div
         className="collapse-wrapper"

src/components/Collapsible/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { CSSTransition } from 'react-transition-group';
@@ -25,6 +25,8 @@ function Modal({
   showBackdrop = true,
   ...restProps
 }) {
+  const modalRef = useRef();
+  const backdropRef = useRef();
   const theme = ['success', 'warning', 'danger', 'info'].includes(themeProp) ? themeProp : 'default';
   const modalClasses = [
     'tyk-modal',
@@ -52,8 +54,9 @@ function Modal({
             in={opened}
             timeout={100}
             classNames="appear"
+            nodeRef={modalRef}
           >
-            <div className={modalClasses} {...restProps}>
+            <div className={modalClasses} {...restProps} ref={modalRef}>
               <div className={`tyk-modal__dialog tyk-modal--${size}`}>
                 <div className="tyk-modal__content">
                   {themeIcon && (
@@ -75,8 +78,10 @@ function Modal({
           in={opened}
           timeout={100}
           classNames="fade"
+          nodeRef={backdropRef}
         >
           <button
+            ref={backdropRef}
             className={backdropClasses}
             onClick={() => !disableCloseCommands && onClose?.()}
             onKeyDown={() => {}}