@coreui/react 4.10.0 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "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/popover/CPopover.tsx

@@ -1,10 +1,11 @@
-import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
+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 { usePopper } from '../../hooks'
+import { CConditionalPortal } from '../conditional-portal'
+import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
 import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
@@ -20,6 +21,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.
    */
@@ -68,94 +75,100 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   visible?: boolean
 }
 
-export const CPopover: FC<CPopoverProps> = ({
-  children,
-  animation = true,
-  className,
-  content,
-  delay = 0,
-  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
-  offset = [0, 8],
-  onHide,
-  onShow,
-  placement = 'top',
-  title,
-  trigger = 'click',
-  visible,
-  ...rest
-}) => {
-  const popoverRef = useRef(null)
-  const togglerRef = useRef(null)
-  const { initPopper, destroyPopper } = usePopper()
-  const [_visible, setVisible] = useState(visible)
+export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
+  (
+    {
+      children,
+      animation = true,
+      className,
+      container,
+      content,
+      delay = 0,
+      fallbackPlacements = ['top', 'right', 'bottom', 'left'],
+      offset = [0, 8],
+      onHide,
+      onShow,
+      placement = 'top',
+      title,
+      trigger = 'click',
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const popoverRef = useRef(null)
+    const togglerRef = useRef(null)
+    const forkedRef = useForkedRef(ref, popoverRef)
 
-  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const { initPopper, destroyPopper } = usePopper()
+    const [_visible, setVisible] = useState(visible)
 
-  const popperConfig = {
-    modifiers: [
-      {
-        name: 'arrow',
-        options: {
-          element: '.popover-arrow',
+    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'arrow',
+          options: {
+            element: '.popover-arrow',
+          },
         },
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: fallbackPlacements,
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: fallbackPlacements,
+          },
         },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: offset,
+        {
+          name: 'offset',
+          options: {
+            offset: offset,
+          },
         },
-      },
-    ],
-    placement: getRTLPlacement(placement, togglerRef.current),
-  }
+      ],
+      placement: getRTLPlacement(placement, togglerRef.current),
+    }
 
-  useEffect(() => {
-    setVisible(visible)
-  }, [visible])
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
 
-  useEffect(() => {
-    if (_visible && togglerRef.current && popoverRef.current) {
-      initPopper(togglerRef.current, popoverRef.current, popperConfig)
-    }
+    useEffect(() => {
+      if (_visible && togglerRef.current && popoverRef.current) {
+        initPopper(togglerRef.current, popoverRef.current, popperConfig)
+      }
 
-    return () => {
-      destroyPopper()
-    }
-  }, [_visible])
+      return () => {
+        destroyPopper()
+      }
+    }, [_visible])
 
-  const toggleVisible = (visible: boolean) => {
-    if (visible) {
-      setTimeout(() => setVisible(true), _delay.show)
-      return
-    }
+    const toggleVisible = (visible: boolean) => {
+      if (visible) {
+        setTimeout(() => setVisible(true), _delay.show)
+        return
+      }
 
-    setTimeout(() => setVisible(false), _delay.hide)
-  }
+      setTimeout(() => setVisible(false), _delay.hide)
+    }
 
-  return (
-    <>
-      {React.cloneElement(children as React.ReactElement<any>, {
-        ref: togglerRef,
-        ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => toggleVisible(!_visible),
-        }),
-        ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => toggleVisible(true),
-          onBlur: () => toggleVisible(false),
-        }),
-        ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => toggleVisible(true),
-          onMouseLeave: () => toggleVisible(false),
-        }),
-      })}
-      {typeof window !== 'undefined' &&
-        createPortal(
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          ref: togglerRef,
+          ...((trigger === 'click' || trigger.includes('click')) && {
+            onClick: () => toggleVisible(!_visible),
+          }),
+          ...((trigger === 'focus' || trigger.includes('focus')) && {
+            onFocus: () => toggleVisible(true),
+            onBlur: () => toggleVisible(false),
+          }),
+          ...((trigger === 'hover' || trigger.includes('hover')) && {
+            onMouseEnter: () => toggleVisible(true),
+            onMouseLeave: () => toggleVisible(false),
+          }),
+        })}
+        <CConditionalPortal container={container} portal={true}>
           <Transition
             in={_visible}
             mountOnEnter
@@ -164,7 +177,9 @@ export const CPopover: FC<CPopoverProps> = ({
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
+              exit: popoverRef.current
+                ? getTransitionDurationFromElement(popoverRef.current) + 50
+                : 200,
             }}
             unmountOnExit
           >
@@ -179,7 +194,7 @@ export const CPopover: FC<CPopoverProps> = ({
                   },
                   className,
                 )}
-                ref={popoverRef}
+                ref={forkedRef}
                 role="tooltip"
                 {...rest}
               >
@@ -188,17 +203,18 @@ export const CPopover: FC<CPopoverProps> = ({
                 <div className="popover-body">{content}</div>
               </div>
             )}
-          </Transition>,
-          document.body,
-        )}
-    </>
-  )
-}
+          </Transition>
+        </CConditionalPortal>
+      </>
+    )
+  },
+)
 
 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,10 +1,10 @@
-import React, { FC, 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 { usePopper } from '../../hooks'
+import { CConditionalPortal } from '../conditional-portal'
+import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
 import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
@@ -20,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.
    */
@@ -64,101 +70,110 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   visible?: boolean
 }
 
-export const CTooltip: FC<CTooltipProps> = ({
-  children,
-  animation = true,
-  className,
-  content,
-  delay = 0,
-  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
-  offset = [0, 6],
-  onHide,
-  onShow,
-  placement = 'top',
-  trigger = ['hover', 'focus'],
-  visible,
-  ...rest
-}) => {
-  const tooltipRef = useRef(null)
-  const togglerRef = useRef(null)
-  const { initPopper, destroyPopper } = usePopper()
-  const [_visible, setVisible] = useState(visible)
+export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
+  (
+    {
+      children,
+      animation = true,
+      className,
+      container,
+      content,
+      delay = 0,
+      fallbackPlacements = ['top', 'right', 'bottom', 'left'],
+      offset = [0, 6],
+      onHide,
+      onShow,
+      placement = 'top',
+      trigger = ['hover', 'focus'],
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const tooltipRef = useRef(null)
+    const togglerRef = useRef(null)
+    const forkedRef = useForkedRef(ref, tooltipRef)
 
-  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const { initPopper, destroyPopper } = usePopper()
+    const [_visible, setVisible] = useState(visible)
 
-  const popperConfig = {
-    modifiers: [
-      {
-        name: 'arrow',
-        options: {
-          element: '.tooltip-arrow',
+    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'arrow',
+          options: {
+            element: '.tooltip-arrow',
+          },
         },
-      },
-      {
-        name: 'flip',
-        options: {
-          fallbackPlacements: fallbackPlacements,
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: fallbackPlacements,
+          },
         },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: offset,
+        {
+          name: 'offset',
+          options: {
+            offset: offset,
+          },
         },
-      },
-    ],
-    placement: getRTLPlacement(placement, togglerRef.current),
-  }
+      ],
+      placement: getRTLPlacement(placement, togglerRef.current),
+    }
 
-  useEffect(() => {
-    setVisible(visible)
-  }, [visible])
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
 
-  useEffect(() => {
-    if (_visible && togglerRef.current && tooltipRef.current) {
-      initPopper(togglerRef.current, tooltipRef.current, popperConfig)
-    }
+    useEffect(() => {
+      if (_visible && togglerRef.current && tooltipRef.current) {
+        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+      }
 
-    return () => {
-      destroyPopper()
-    }
-  }, [_visible])
+      return () => {
+        destroyPopper()
+      }
+    }, [_visible])
 
-  const toggleVisible = (visible: boolean) => {
-    if (visible) {
-      setTimeout(() => setVisible(true), _delay.show)
-      return
-    }
+    const toggleVisible = (visible: boolean) => {
+      if (visible) {
+        setTimeout(() => setVisible(true), _delay.show)
+        return
+      }
 
-    setTimeout(() => setVisible(false), _delay.hide)
-  }
+      setTimeout(() => setVisible(false), _delay.hide)
+    }
 
-  return (
-    <>
-      {React.cloneElement(children as React.ReactElement<any>, {
-        ref: togglerRef,
-        ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => toggleVisible(!_visible),
-        }),
-        ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => toggleVisible(true),
-          onBlur: () => toggleVisible(false),
-        }),
-        ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => toggleVisible(true),
-          onMouseLeave: () => toggleVisible(false),
-        }),
-      })}
-      {typeof window !== 'undefined' &&
-        createPortal(
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          ref: togglerRef,
+          ...((trigger === 'click' || trigger.includes('click')) && {
+            onClick: () => toggleVisible(!_visible),
+          }),
+          ...((trigger === 'focus' || trigger.includes('focus')) && {
+            onFocus: () => toggleVisible(true),
+            onBlur: () => toggleVisible(false),
+          }),
+          ...((trigger === 'hover' || trigger.includes('hover')) && {
+            onMouseEnter: () => toggleVisible(true),
+            onMouseLeave: () => toggleVisible(false),
+          }),
+        })}
+        <CConditionalPortal container={container} portal={true}>
           <Transition
             in={_visible}
             mountOnEnter
+            nodeRef={tooltipRef}
             onEnter={onShow}
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
+              exit: tooltipRef.current
+                ? getTransitionDurationFromElement(tooltipRef.current) + 50
+                : 200,
             }}
             unmountOnExit
           >
@@ -173,7 +188,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                   },
                   className,
                 )}
-                ref={tooltipRef}
+                ref={forkedRef}
                 role="tooltip"
                 {...rest}
               >
@@ -181,16 +196,17 @@ export const CTooltip: FC<CTooltipProps> = ({
                 <div className="tooltip-inner">{content}</div>
               </div>
             )}
-          </Transition>,
-          document.body,
-        )}
-    </>
-  )
-}
+          </Transition>
+        </CConditionalPortal>
+      </>
+    )
+  },
+)
 
 CTooltip.propTypes = {
   animation: PropTypes.bool,
   children: PropTypes.node,
+  container: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   delay: PropTypes.oneOfType([
     PropTypes.number,