@coreui/react 5.0.0-alpha.3 → 5.0.0-beta.1

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/popover/__tests__/CPopover.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { act, render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CPopover, CButton } from '../../../index'
 
 test('loads and displays CPopover component', async () => {

package/src/components/progress/__tests__/CProgress.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CProgress } from '../../../index'
 
 test('loads and displays CProgress component', async () => {

package/src/components/progress/__tests__/CProgressBar.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CProgressBar } from '../../../index'
 
 test('loads and displays CProgressBar component', async () => {

package/src/components/sidebar/CSidebar.tsx

@@ -13,6 +13,12 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Sets if the color of text should be colored for a light or dark dark background.
+   *
+   * @type 'dark' | 'light'
+   */
+  colorScheme?: 'dark' | 'light'
   /**
    * Make sidebar narrow.
    */
@@ -33,6 +39,11 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
    * Set sidebar to overlaid variant.
    */
   overlaid?: boolean
+  /**
+   * Components placement, there’s no default placement.
+   * @type 'start' | 'end'
+   */
+  placement?: 'start' | 'end'
   /**
    * Place sidebar in non-static positions.
    */
@@ -59,11 +70,13 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
     {
       children,
       className,
+      colorScheme,
       narrow,
       onHide,
       onShow,
       onVisibleChange,
       overlaid,
+      placement,
       position,
       size,
       unfoldable,
@@ -74,14 +87,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
   ) => {
     const sidebarRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, sidebarRef)
-    const [mobile, setMobile] = useState(false)
-    const [_visible, setVisible] = useState(visible)
+
     const [inViewport, setInViewport] = useState<boolean>()
+    const [mobile, setMobile] = useState(false)
+    const [visibleMobile, setVisibleMobile] = useState<boolean>(false)
+    const [visibleDesktop, setVisibleDesktop] = useState<boolean>(
+      visible !== undefined ? visible : overlaid ? false : true,
+    )
 
     useEffect(() => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-
-      setVisible(visible)
+      visible !== undefined && handleVisibleChange(visible)
     }, [visible])
 
     useEffect(() => {
@@ -91,7 +107,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
     }, [inViewport])
 
     useEffect(() => {
-      mobile && visible && setVisible(false)
+      mobile && setVisibleMobile(false)
     }, [mobile])
 
     useEffect(() => {
@@ -119,8 +135,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       }
     })
 
+    const handleVisibleChange = (visible: boolean) => {
+      if (mobile) {
+        setVisibleMobile(visible)
+        return
+      }
+
+      setVisibleDesktop(visible)
+    }
+
     const handleHide = () => {
-      setVisible(false)
+      handleVisibleChange(false)
     }
 
     const handleResize = () => {
@@ -162,13 +187,15 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
           className={classNames(
             'sidebar',
             {
+              [`sidebar-${colorScheme}`]: colorScheme,
               'sidebar-narrow': narrow,
               'sidebar-overlaid': overlaid,
+              [`sidebar-${placement}`]: placement,
               [`sidebar-${position}`]: position,
               [`sidebar-${size}`]: size,
               'sidebar-narrow-unfoldable': unfoldable,
-              show: _visible === true && mobile,
-              hide: _visible === false && !mobile,
+              show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
+              hide: visibleDesktop === false && !mobile && !overlaid,
             },
             className,
           )}
@@ -180,7 +207,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
         {typeof window !== 'undefined' &&
           mobile &&
           createPortal(
-            <CBackdrop className="sidebar-backdrop" visible={_visible} />,
+            <CBackdrop className="sidebar-backdrop" visible={mobile && visibleMobile} />,
             document.body,
           )}
       </>
@@ -191,11 +218,13 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 CSidebar.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  colorScheme: PropTypes.oneOf(['dark', 'light']),
   narrow: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   onVisibleChange: PropTypes.func,
   overlaid: PropTypes.bool,
+  placement: PropTypes.oneOf(['start', 'end']),
   position: PropTypes.oneOf(['fixed', 'sticky']),
   size: PropTypes.oneOf(['sm', 'lg', 'xl']),
   unfoldable: PropTypes.bool,

package/src/components/sidebar/__tests__/CSidebar.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {
   CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
 } from '../../../index'

package/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarBrand } from '../../../index'
 
 test('loads and displays CSidebarBrand component', async () => {

package/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarFooter } from '../../../index'
 
 test('loads and displays CSidebarFooter component', async () => {

package/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarHeader } from '../../../index'
 
 test('loads and displays CSidebarHeader component', async () => {

package/src/components/sidebar/__tests__/CSidebarNav.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarNav } from '../../../index'
 
 test('loads and displays CSidebarNav component', async () => {

package/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSidebarToggler } from '../../../index'
 
 test('loads and displays CSidebarToggler component', async () => {

package/src/components/spinner/__tests__/CSpinner.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CSpinner } from '../../../index'
 
 test('loads and displays CSpinner component', async () => {

package/src/components/table/__tests__/CTable.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {
   CTable,
   CTableCaption,

package/src/components/table/__tests__/CTableBody.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTableBody, CTableDataCell, CTableRow } from '../../../index'
 
 test('loads and displays CTableBody component', async () => {

package/src/components/table/__tests__/CTableCaption.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTableCaption } from '../../../index'
 
 test('loads and displays CTableCaption component', async () => {

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTableDataCell } from '../../../index'
 import { CTableBody } from '../CTableBody'
 import { CTableRow } from '../CTableRow'

package/src/components/table/__tests__/CTableFoot.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTableFoot, CTableHeaderCell, CTableRow } from '../../../index'
 
 test('loads and displays CTableFoot component', async () => {

package/src/components/table/__tests__/CTableHead.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
 
 test('loads and displays CTableHead component', async () => {

package/src/components/table/__tests__/CTableHeaderCell.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
 
 test('loads and displays CTableHeaderCell component', async () => {

package/src/components/table/__tests__/CTableRow.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTableBody, CTableHeaderCell, CTableRow } from '../../../index'
 
 test('loads and displays CTableRow component', async () => {

package/src/components/tabs/__tests__/CTabContent.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTabContent } from '../../../index'
 
 test('loads and displays CTabContent component', async () => {

package/src/components/tabs/__tests__/CTabPane.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTabPane, CTabContent } from '../../../index'
 
 test('loads and displays CTabPane component', async () => {

package/src/components/toast/__tests__/CToast.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, fireEvent, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CToast, CToastBody, CToastHeader } from '../../../index'
 
 test('loads and displays CToast component', async () => {

package/src/components/toast/__tests__/CToastBody.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CToastBody } from '../../../index'
 
 test('loads and displays CToastBody component', async () => {

package/src/components/toast/__tests__/CToastHeader.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CToastHeader } from '../../../index'
 
 test('loads and displays CToastHeader component', async () => {

package/src/components/toast/__tests__/CToaster.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react' //  useState,
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CToast, CToaster, CToastBody, CToastHeader, CButton } from '../../../index'
 
 test('loads and displays CToaster component', async () => {