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

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/time-picker/CTimePicker.tsx

@@ -183,7 +183,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     })
 
     useEffect(() => {
-      setDate(convertTimeToDate(time))
+      setDate(time ? convertTimeToDate(time) : null)
     }, [time])
 
     useEffect(() => {
@@ -373,38 +373,6 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       )
     }
 
-    const TimePickerRoll = () => (
-      <>
-        <CTimePickerRollCol
-          elements={localizedTimePartials && localizedTimePartials.listOfHours}
-          onClick={(index: number) => handleTimeChange('hours', index.toString())}
-          selected={getSelectedHour(date, locale, ampm)}
-        />
-        <CTimePickerRollCol
-          elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
-          onClick={(index: number) => handleTimeChange('minutes', index.toString())}
-          selected={getSelectedMinutes(date)}
-        />
-        {seconds && (
-          <CTimePickerRollCol
-            elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
-            onClick={(index: number) => handleTimeChange('seconds', index.toString())}
-            selected={getSelectedSeconds(date)}
-          />
-        )}
-        {localizedTimePartials && localizedTimePartials.hour12 && (
-          <CTimePickerRollCol
-            elements={[
-              { value: 'am', label: 'AM' },
-              { value: 'pm', label: 'PM' },
-            ]}
-            onClick={(value: string) => handleTimeChange('toggle', value)}
-            selected={_ampm}
-          />
-        )}
-      </>
-    )
-
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -482,7 +450,39 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               ['time-picker-roll']: variant === 'roll',
             })}
           >
-            {variant === 'select' ? <TimePickerSelect /> : TimePickerRoll()}
+            {variant === 'select' ? (
+              <TimePickerSelect />
+            ) : (
+              <>
+                <CTimePickerRollCol
+                  elements={localizedTimePartials && localizedTimePartials.listOfHours}
+                  onClick={(index: number) => handleTimeChange('hours', index.toString())}
+                  selected={getSelectedHour(date, locale, ampm)}
+                />
+                <CTimePickerRollCol
+                  elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
+                  onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+                  selected={getSelectedMinutes(date)}
+                />
+                {seconds && (
+                  <CTimePickerRollCol
+                    elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
+                    onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+                    selected={getSelectedSeconds(date)}
+                  />
+                )}
+                {localizedTimePartials && localizedTimePartials.hour12 && (
+                  <CTimePickerRollCol
+                    elements={[
+                      { value: 'am', label: 'AM' },
+                      { value: 'pm', label: 'PM' },
+                    ]}
+                    onClick={(value: string) => handleTimeChange('toggle', value)}
+                    selected={_ampm}
+                  />
+                )}
+              </>
+            )}
           </div>
         </CPicker>
       </CFormControlWrapper>

package/src/components/time-picker/CTimePickerRollCol.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../hooks'
+import { useForkedRef, useIsVisible } from '../../hooks'
 
 export interface Element {
   value: number | string
@@ -20,18 +20,21 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
     const init = useRef(true)
     const colRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, colRef)
+    const isVisible = useIsVisible(colRef)
 
     useEffect(() => {
       const nodeEl = colRef.current?.querySelector('.selected')
-      if (nodeEl && nodeEl instanceof HTMLElement) {
+      if (isVisible && nodeEl && nodeEl instanceof HTMLElement) {
         colRef.current?.scrollTo({
           top: nodeEl.offsetTop,
           behavior: init.current ? 'auto' : 'smooth',
         })
       }
 
-      init.current = false
-    }, [selected])
+      if (isVisible) {
+        init.current = false
+      }
+    }, [isVisible, selected])
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
       if (event.code === 'Space' || event.key === 'Enter') {

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 () => {

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,

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
 import { fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTooltip, CLink } from '../../../index'
 
 let container: HTMLDivElement | null

package/src/components/widgets/__tests__/CWidgetStatsA.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 { CWidgetStatsA } from '../../../index'
 
 test('loads and displays CWidgetStatsA component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsB.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 { CWidgetStatsB } from '../../../index'
 
 test('loads and displays CWidgetStatsB component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsC.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 { CWidgetStatsC } from '../../../index'
 
 test('loads and displays CWidgetStatsC component', async () => {
@@ -25,11 +25,11 @@ test('CWidgetStatsC customize', async () => {
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('card')
+  expect(container.firstChild).toHaveClass('text-white')
   if (container.firstChild === null || container.firstChild.firstChild === null) {
     expect(true).toBe(false)
   } else {
     expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-white')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('text-end')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('mb-4')
     expect(container.firstChild.firstChild.firstChild).toHaveTextContent('icon')

package/src/components/widgets/__tests__/CWidgetStatsD.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 { CWidgetStatsD } from '../../../index'
 
 test('loads and displays CWidgetStatsD component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsE.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 { CWidgetStatsE } from '../../../index'
 
 test('loads and displays CWidgetStatsE component', async () => {

package/src/components/widgets/__tests__/CWidgetStatsF.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 { CWidgetStatsF } from '../../../index'
 
 test('loads and displays CWidgetStatsF component', async () => {

package/src/hooks/index.ts

@@ -1,6 +1,17 @@
 import { useColorModes } from './useColorModes'
+import { useDebounce } from './useDebounce'
+import { useDebouncedCallback } from './useDebouncedCallback'
 import { useForkedRef } from './useForkedRef'
+import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
 import { useStateWithCallback } from './useStateWithCallback'
 
-export { useColorModes, useForkedRef, usePopper, useStateWithCallback }
+export {
+  useColorModes,
+  useDebounce,
+  useDebouncedCallback,
+  useForkedRef,
+  useIsVisible,
+  usePopper,
+  useStateWithCallback,
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

package/src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,18 @@
+import { useRef, useCallback,  } from 'react'
+
+export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
+  const timeout = useRef<ReturnType<typeof setTimeout>>()
+
+  return useCallback(
+    (...args: any[]) => {
+      const handler = () => {
+        clearTimeout(timeout.current)
+        callback(...args)
+      }
+
+      clearTimeout(timeout.current)
+      timeout.current = setTimeout(handler, delay)
+    },
+    [callback, delay],
+  )
+}

package/src/hooks/useIsVisible.ts

@@ -0,0 +1,14 @@
+import { RefObject, useEffect, useState } from 'react'
+
+export const useIsVisible = (ref: RefObject<HTMLElement>) => {
+  const [isIntersecting, setIntersecting] = useState(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting))
+
+    ref.current && observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return isIntersecting
+}