refactor: add CBackdrop smooth transition

Author: mrholek

src/components/backdrop/CBackdrop.tsx

@@ -1,5 +1,3 @@
-// TODO: add smooth transition.
-
 import React, { forwardRef, HTMLAttributes } from 'react'
 import { CSSTransition } from 'react-transition-group'
 import PropTypes from 'prop-types'
@@ -18,17 +16,18 @@ export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
   ({ className, visible, ...rest }, ref) => {
-    const _className = classNames(
-      'modal-backdrop fade',
-      {
-        show: visible,
-      },
-      className,
-    )
+    const _className = classNames('modal-backdrop fade', className)
+
+    const getTransitionClass = (state: string) => {
+      return state === 'entered' && 'show'
+    }
 
     return (
       <CSSTransition in={visible} timeout={150} mountOnEnter unmountOnExit>
-        <div className={_className} {...rest} ref={ref} />
+        {(state) => {
+          const transitionClass = getTransitionClass(state)
+          return <div className={classNames(_className, transitionClass)} {...rest} ref={ref} />
+        }}
       </CSSTransition>
     )
   },

src/components/modal/CModal.tsx

@@ -36,8 +36,7 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * @ignore
    */
-  // TODO: check if it possible to remove this property
-  duration?: number
+  duration?: number // TODO: check if it possible to remove this property.
   /**
    * Set modal to covers the entire user viewport. [docs]
    */
@@ -170,28 +169,33 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
               <CModalContent>{children}</CModalContent>
             </CModalDialog>
           </div>
-          {backdrop && <CBackdrop visible={visible} />}
+          {/* {backdrop && <CBackdrop visible={visible} />} */}
         </>
       )
     }
 
     return (
-      <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
-        <CSSTransition
-          in={visible}
-          timeout={!transition ? 0 : duration}
-          onExit={onDismiss}
-          mountOnEnter
-          unmountOnExit
-        >
-          {(state) => {
-            const transitionClass = getTransitionClass(state)
-            return typeof window !== 'undefined' && portal
-              ? createPortal(modal(forkedRef, transitionClass), document.body)
-              : modal(forkedRef, transitionClass)
-          }}
-        </CSSTransition>
-      </div>
+      <>
+        <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
+          <CSSTransition
+            in={visible}
+            timeout={!transition ? 0 : duration}
+            onExit={onDismiss}
+            mountOnEnter
+            unmountOnExit
+          >
+            {(state) => {
+              const transitionClass = getTransitionClass(state)
+              return typeof window !== 'undefined' && portal
+                ? createPortal(modal(forkedRef, transitionClass), document.body)
+                : modal(forkedRef, transitionClass)
+            }}
+          </CSSTransition>
+        </div>
+        {typeof window !== 'undefined' && portal
+          ? backdrop && createPortal(<CBackdrop visible={visible} />, document.body)
+          : backdrop && <CBackdrop visible={visible} />}
+      </>
     )
   },
 )

src/components/offcanvas/COffcanvas.tsx

@@ -107,19 +107,24 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
           >
             {children}
           </div>
-          {backdrop && <CBackdrop visible={_visible} onClick={handleDismiss} />}
         </>
       )
     }
 
     return (
-      <Transition in={_visible} timeout={300} onEntered={() => offcanvasRef.current?.focus()}>
-        {(state) => {
-          return typeof window !== 'undefined' && portal
-            ? createPortal(offcanvas(forkedRef, state), document.body)
-            : offcanvas(forkedRef, state)
-        }}
-      </Transition>
+      <>
+        <Transition in={_visible} timeout={300} onEntered={() => offcanvasRef.current?.focus()}>
+          {(state) => {
+            return typeof window !== 'undefined' && portal
+              ? createPortal(offcanvas(forkedRef, state), document.body)
+              : offcanvas(forkedRef, state)
+          }}
+        </Transition>
+        {typeof window !== 'undefined' && portal
+          ? backdrop &&
+            createPortal(<CBackdrop visible={visible} onClick={handleDismiss} />, document.body)
+          : backdrop && <CBackdrop visible={visible} onClick={handleDismiss} />}
+      </>
     )
   },
 )