@coreui/react 4.10.1 → 4.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.10.1",
+  "version": "4.11.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",

package/src/components/conditional-portal/CConditionalPortal.tsx

@@ -1,21 +1,45 @@
-import React, { FC, ReactNode } from 'react'
+import React, { FC, ReactNode, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 
+const getContainer = (container?: Element | (() => Element | null) | null) => {
+  if (container) {
+    return typeof container === 'function' ? container() : container
+  }
+
+  return document.body
+}
+
 export interface CConditionalPortalProps {
   /**
    * @ignore
    */
   children: ReactNode
+  /**
+   * An HTML element or function that returns a single element, with `document.body` as the default.
+   * 
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Render some children into a different part of the DOM
    */
-  portal: boolean
+  portal: boolean | any
 }
 
-export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, portal }) => {
-  return typeof window !== 'undefined' && portal ? (
-    createPortal(children, document.body)
+export const CConditionalPortal: FC<CConditionalPortalProps> = ({
+  children,
+  container,
+  portal,
+}) => {
+  const [_container, setContainer] = useState<ReturnType<typeof getContainer>>(null)
+
+  useEffect(() => {
+    portal && setContainer(getContainer(container) || document.body)
+  }, [container, portal])
+
+  return typeof window !== 'undefined' && portal && _container ? (
+    createPortal(children, _container)
   ) : (
     <>{children}</>
   )
@@ -23,7 +47,8 @@ export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, port
 
 CConditionalPortal.propTypes = {
   children: PropTypes.node,
-  portal: PropTypes.bool.isRequired,
+  container: PropTypes.any, // HTMLElement
+  portal: PropTypes.bool,
 }
 
 CConditionalPortal.displayName = 'CConditionalPortal'

package/src/components/dropdown/CDropdown.tsx

@@ -51,6 +51,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   component?: string | ElementType
+  /**
+   * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Sets a darker color scheme to match a dark navbar.
    */
@@ -147,6 +153,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       alignment,
       autoClose = true,
       className,
+      container,
       dark,
       direction,
       offset = [0, 2],
@@ -179,6 +186,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      container,
       dark,
       dropdownToggleRef,
       dropdownMenuRef,

package/src/components/dropdown/CDropdownMenu.tsx

@@ -35,13 +35,13 @@ const alignmentClassNames = (alignment: Alignments) => {
 
 export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDropdownMenuProps>(
   ({ children, className, component: Component = 'ul', ...rest }, ref) => {
-    const { alignment, dark, dropdownMenuRef, popper, portal, visible } =
+    const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
       useContext(CDropdownContext)
 
     const forkedRef = useForkedRef(ref, dropdownMenuRef)
 
     return (
-      <CConditionalPortal portal={portal ?? false}>
+      <CConditionalPortal container={container} portal={portal ?? false}>
         <Component
           className={classNames(
             'dropdown-menu',

package/src/components/modal/CModal.tsx

@@ -200,10 +200,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }, [_visible])
 
     const handleClickOutside = (event: Event) => {
-      if (
-        modalContentRef.current &&
-        !modalContentRef.current.contains(event.target as HTMLElement)
-      ) {
+      if (modalRef.current && modalRef.current == event.target) {
         handleDismiss()
       }
     }

package/src/components/popover/CPopover.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
 
+import { CConditionalPortal } from '../conditional-portal'
 import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
@@ -20,6 +20,12 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Content node for your component.
    */
@@ -74,6 +80,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       children,
       animation = true,
       className,
+      container,
       content,
       delay = 0,
       fallbackPlacements = ['top', 'right', 'bottom', 'left'],
@@ -88,9 +95,10 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     },
     ref,
   ) => {
-    const popoverRef = useRef(null)
+    const popoverRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, popoverRef)
+    const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`)
 
     const { initPopper, destroyPopper } = usePopper()
     const [_visible, setVisible] = useState(visible)
@@ -125,16 +133,6 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       setVisible(visible)
     }, [visible])
 
-    useEffect(() => {
-      if (_visible && togglerRef.current && popoverRef.current) {
-        initPopper(togglerRef.current, popoverRef.current, popperConfig)
-      }
-
-      return () => {
-        destroyPopper()
-      }
-    }, [_visible])
-
     const toggleVisible = (visible: boolean) => {
       if (visible) {
         setTimeout(() => setVisible(true), _delay.show)
@@ -147,6 +145,9 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
+          ...(_visible && {
+            'aria-describedby': uID.current,
+          }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
             onClick: () => toggleVisible(!_visible),
@@ -160,45 +161,61 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
             onMouseLeave: () => toggleVisible(false),
           }),
         })}
-        {typeof window !== 'undefined' &&
-          createPortal(
-            <Transition
-              in={_visible}
-              mountOnEnter
-              nodeRef={popoverRef}
-              onEnter={onShow}
-              onExit={onHide}
-              timeout={{
-                enter: 0,
-                exit: popoverRef.current
-                  ? getTransitionDurationFromElement(popoverRef.current) + 50
-                  : 200,
-              }}
-              unmountOnExit
-            >
-              {(state) => (
-                <div
-                  className={classNames(
-                    'popover',
-                    'bs-popover-auto',
-                    {
-                      fade: animation,
-                      show: state === 'entered',
-                    },
-                    className,
-                  )}
-                  ref={forkedRef}
-                  role="tooltip"
-                  {...rest}
-                >
-                  <div className="popover-arrow"></div>
-                  <div className="popover-header">{title}</div>
-                  <div className="popover-body">{content}</div>
-                </div>
-              )}
-            </Transition>,
-            document.body,
-          )}
+        <CConditionalPortal container={container} portal={true}>
+          <Transition
+            in={_visible}
+            mountOnEnter
+            nodeRef={popoverRef}
+            onEnter={() => {
+              if (togglerRef.current && popoverRef.current) {
+                initPopper(togglerRef.current, popoverRef.current, popperConfig)
+              }
+
+              onShow
+            }}
+            onEntering={() => {
+              if (togglerRef.current && popoverRef.current) {
+                popoverRef.current.style.display = 'initial'
+              }
+            }}
+            onExit={onHide}
+            onExited={() => {
+              destroyPopper()
+            }}
+            timeout={{
+              enter: 0,
+              exit: popoverRef.current
+                ? getTransitionDurationFromElement(popoverRef.current) + 50
+                : 200,
+            }}
+            unmountOnExit
+          >
+            {(state) => (
+              <div
+                className={classNames(
+                  'popover',
+                  'bs-popover-auto',
+                  {
+                    fade: animation,
+                    show: state === 'entered',
+                  },
+                  className,
+                )}
+                id={uID.current}
+                ref={forkedRef}
+                role="tooltip"
+                style={{
+                  display: 'none',
+                }}
+                {...rest}
+              >
+                <div className="popover-arrow"></div>
+                <div className="popover-header">{title}</div>
+                <div className="popover-body">{content}</div>
+              </div>
+            )}
+          </Transition>
+        </CConditionalPortal>
       </>
     )
   },
@@ -208,6 +225,7 @@ CPopover.propTypes = {
   animation: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  container: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   delay: PropTypes.oneOfType([
     PropTypes.number,

package/src/components/tooltip/CTooltip.tsx

@@ -1,16 +1,9 @@
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  useRef,
-  useEffect,
-  useState,
-} from 'react'
-import { createPortal } from 'react-dom'
+import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
 
+import { CConditionalPortal } from '../conditional-portal'
 import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
@@ -27,6 +20,12 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Content node for your component.
    */
@@ -77,6 +76,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       children,
       animation = true,
       className,
+      container,
       content,
       delay = 0,
       fallbackPlacements = ['top', 'right', 'bottom', 'left'],
@@ -90,9 +90,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     },
     ref,
   ) => {
-    const tooltipRef = useRef(null)
+    const tooltipRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, tooltipRef)
+    const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`)
 
     const { initPopper, destroyPopper } = usePopper()
     const [_visible, setVisible] = useState(visible)
@@ -127,16 +128,6 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       setVisible(visible)
     }, [visible])
 
-    useEffect(() => {
-      if (_visible && togglerRef.current && tooltipRef.current) {
-        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
-      }
-
-      return () => {
-        destroyPopper()
-      }
-    }, [_visible])
-
     const toggleVisible = (visible: boolean) => {
       if (visible) {
         setTimeout(() => setVisible(true), _delay.show)
@@ -149,6 +140,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
+          ...(_visible && {
+            'aria-describedby': uID.current,
+          }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
             onClick: () => toggleVisible(!_visible),
@@ -162,44 +156,60 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             onMouseLeave: () => toggleVisible(false),
           }),
         })}
-        {typeof window !== 'undefined' &&
-          createPortal(
-            <Transition
-              in={_visible}
-              mountOnEnter
-              nodeRef={tooltipRef}
-              onEnter={onShow}
-              onExit={onHide}
-              timeout={{
-                enter: 0,
-                exit: tooltipRef.current
-                  ? getTransitionDurationFromElement(tooltipRef.current) + 50
-                  : 200,
-              }}
-              unmountOnExit
-            >
-              {(state) => (
-                <div
-                  className={classNames(
-                    'tooltip',
-                    'bs-tooltip-auto',
-                    {
-                      fade: animation,
-                      show: state === 'entered',
-                    },
-                    className,
-                  )}
-                  ref={forkedRef}
-                  role="tooltip"
-                  {...rest}
-                >
-                  <div className="tooltip-arrow"></div>
-                  <div className="tooltip-inner">{content}</div>
-                </div>
-              )}
-            </Transition>,
-            document.body,
-          )}
+        <CConditionalPortal container={container} portal={true}>
+          <Transition
+            in={_visible}
+            mountOnEnter
+            nodeRef={tooltipRef}
+            onEnter={() => {
+              if (togglerRef.current && tooltipRef.current) {
+                initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+              }
+
+              onShow
+            }}
+            onEntering={() => {
+              if (togglerRef.current && tooltipRef.current) {
+                tooltipRef.current.style.display = 'initial'
+              }
+            }}
+            onExit={onHide}
+            onExited={() => {
+              destroyPopper()
+            }}
+            timeout={{
+              enter: 0,
+              exit: tooltipRef.current
+                ? getTransitionDurationFromElement(tooltipRef.current) + 50
+                : 200,
+            }}
+            unmountOnExit
+          >
+            {(state) => (
+              <div
+                className={classNames(
+                  'tooltip',
+                  'bs-tooltip-auto',
+                  {
+                    fade: animation,
+                    show: state === 'entered',
+                  },
+                  className,
+                )}
+                id={uID.current}
+                ref={forkedRef}
+                role="tooltip"
+                style={{
+                  display: 'none',
+                }}
+                {...rest}
+              >
+                <div className="tooltip-arrow"></div>
+                <div className="tooltip-inner">{content}</div>
+              </div>
+            )}
+          </Transition>
+        </CConditionalPortal>
       </>
     )
   },
@@ -208,6 +218,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
 CTooltip.propTypes = {
   animation: PropTypes.bool,
   children: PropTypes.node,
+  container: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   delay: PropTypes.oneOfType([
     PropTypes.number,