fix: findDOMNode is deprecated in StrictMode

Author: mrholek

packages/coreui-react/src/components/alert/CAlert.tsx

@@ -1,11 +1,13 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
 import { Colors, colorPropType } from '../Types'
 import { CCloseButton } from '../close-button/CCloseButton'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -49,6 +51,8 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
     },
     ref,
   ) => {
+    const alertRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, alertRef)
     const [_visible, setVisible] = useState(visible)
 
     useEffect(() => {
@@ -69,15 +73,22 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
     }
 
     return (
-      <Transition in={_visible} mountOnEnter onExit={onClose} timeout={150} unmountOnExit>
+      <Transition
+        in={_visible}
+        mountOnEnter
+        nodeRef={alertRef}
+        onExit={onClose}
+        timeout={150}
+        unmountOnExit
+      >
         {(state) => {
           const transitionClass = getTransitionClass(state)
           return (
             <div
               className={classNames(_className, transitionClass)}
               role="alert"
               {...rest}
-              ref={ref}
+              ref={forkedRef}
             >
               {children}
               {dismissible && <CCloseButton onClick={() => setVisible(false)} />}

packages/coreui-react/src/components/backdrop/CBackdrop.tsx

@@ -1,8 +1,10 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, useRef } from 'react'
 import { Transition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -16,17 +18,22 @@ export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
   ({ className = 'modal-backdrop', visible, ...rest }, ref) => {
+    const backdropRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, backdropRef)
+
     const _className = classNames(className, 'fade')
 
     const getTransitionClass = (state: string) => {
       return state === 'entered' && 'show'
     }
 
     return (
-      <Transition in={visible} mountOnEnter timeout={150} unmountOnExit>
+      <Transition in={visible} mountOnEnter nodeRef={backdropRef} timeout={150} unmountOnExit>
         {(state) => {
           const transitionClass = getTransitionClass(state)
-          return <div className={classNames(_className, transitionClass)} {...rest} ref={ref} />
+          return (
+            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef} />
+          )
         }}
       </Transition>
     )

packages/coreui-react/src/components/collapse/CCollapse.tsx

@@ -98,6 +98,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
     return (
       <CSSTransition
         in={visible}
+        nodeRef={collapseRef}
         onEntering={onEntering}
         onEntered={onEntered}
         onExit={onExit}

packages/coreui-react/src/components/modal/CModal.tsx

@@ -228,6 +228,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         <Transition
           in={_visible}
           mountOnEnter
+          nodeRef={modalRef}
           onEnter={onShow}
           onExit={onClose}
           unmountOnExit={unmountOnClose}

packages/coreui-react/src/components/nav/CNavGroup.tsx

@@ -106,6 +106,7 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
         )}
         <Transition
           in={_visible}
+          nodeRef={navItemsRef}
           onEntering={onEntering}
           onEntered={onEntered}
           onExit={onExit}

packages/coreui-react/src/components/offcanvas/COffcanvas.tsx

@@ -137,6 +137,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       <>
         <Transition
           in={_visible}
+          nodeRef={offcanvasRef}
           onEnter={onShow}
           onEntered={() => offcanvasRef.current?.focus()}
           onExit={onHide}

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import React, { FC, ReactElement, ReactNode, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -59,6 +59,7 @@ export const CPopover: FC<CPopoverProps> = ({
   ...rest
 }) => {
   const [_visible, setVisible] = useState(visible)
+  const popoverRef = useRef()
 
   const getTransitionClass = (state: string) => {
     return state === 'entering'
@@ -94,9 +95,10 @@ export const CPopover: FC<CPopoverProps> = ({
         createPortal(
           <Transition
             in={_visible}
+            mountOnEnter
+            nodeRef={popoverRef}
             onEnter={onShow}
             onExit={onHide}
-            mountOnEnter
             timeout={{
               enter: 0,
               exit: 200,

packages/coreui-react/src/components/tabs/CTabPane.tsx

@@ -1,8 +1,9 @@
-import React, { HTMLAttributes, forwardRef } from 'react'
+import React, { HTMLAttributes, forwardRef, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
+import { useForkedRef } from '../../utils/hooks'
 export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -24,6 +25,9 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
   ({ children, className, onHide, onShow, visible, ...rest }, ref) => {
+    const tabPaneRef = useRef()
+    const forkedRef = useForkedRef(ref, tabPaneRef)
+
     const getTransitionClass = (state: string) => {
       return state === 'entered' && 'show'
     }
@@ -37,11 +41,11 @@ export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
       className,
     )
     return (
-      <Transition in={visible} onEnter={onShow} onExit={onHide} timeout={150}>
+      <Transition in={visible} nodeRef={tabPaneRef} onEnter={onShow} onExit={onHide} timeout={150}>
         {(state) => {
           const transitionClass = getTransitionClass(state)
           return (
-            <div className={classNames(_className, transitionClass)} {...rest} ref={ref}>
+            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef}>
               {children}
             </div>
           )

packages/coreui-react/src/components/toast/CToast.tsx

@@ -12,6 +12,8 @@ import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * Apply a CSS fade transition to the toast.
@@ -82,6 +84,8 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     },
     ref,
   ) => {
+    const toastRef = useRef()
+    const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
     const timeout = useRef<number>()
 
@@ -133,6 +137,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
     return (
       <Transition
         in={_visible}
+        nodeRef={toastRef}
         onEnter={() => onShow && onShow(index ? index : null)}
         onExited={() => onClose && onClose(index ? index : null)}
         timeout={250}
@@ -151,7 +156,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                 onMouseLeave={() => _autohide}
                 {...rest}
                 key={key}
-                ref={ref}
+                ref={forkedRef}
               >
                 {children}
               </div>

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import React, { FC, ReactElement, ReactNode, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -48,6 +48,7 @@ export const CTooltip: FC<CTooltipProps> = ({
   visible,
   ...rest
 }) => {
+  const tooltipRef = useRef()
   const [_visible, setVisible] = useState(visible)
 
   const getTransitionClass = (state: string) => {
@@ -85,6 +86,7 @@ export const CTooltip: FC<CTooltipProps> = ({
           <Transition
             in={_visible}
             mountOnEnter
+            nodeRef={tooltipRef}
             onEnter={onShow}
             onExit={onHide}
             timeout={{