@coreui/react 5.0.0 → 5.2.0

package/src/components/tabs/CTabPane.tsx

@@ -18,6 +18,12 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
    * Callback fired when the component requests to be shown.
    */
   onShow?: () => void
+  /**
+   * Enable fade in and fade out transition.
+   *
+   * @since 5.1.0
+   */
+  transition?: boolean
   /**
    * Toggle the visibility of component.
    */
@@ -25,7 +31,7 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
-  ({ children, className, onHide, onShow, visible, ...rest }, ref) => {
+  ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => {
     const tabPaneRef = useRef()
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
@@ -35,9 +41,9 @@ export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
           <div
             className={classNames(
               'tab-pane',
-              'fade',
               {
                 active: visible,
+                fade: transition,
                 show: state === 'entered',
               },
               className,
@@ -58,6 +64,7 @@ CTabPane.propTypes = {
   className: PropTypes.string,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
+  transition: PropTypes.bool,
   visible: PropTypes.bool,
 }
 

package/src/components/tabs/CTabPanel.tsx

@@ -0,0 +1,98 @@
+import React, { HTMLAttributes, forwardRef, useContext, useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
+
+import { TabsContext } from './CTabs'
+import { useForkedRef } from '../../hooks'
+import { getTransitionDurationFromElement } from '../../utils'
+
+export interface CTabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Item key.
+   */
+  itemKey: number | string
+  /**
+   * Callback fired when the component requests to be hidden.
+   */
+  onHide?: () => void
+  /**
+   * Callback fired when the component requests to be shown.
+   */
+  onShow?: () => void
+  /**
+   * Enable fade in and fade out transition.
+   */
+  transition?: boolean
+  /**
+   * Toggle the visibility of component.
+   */
+  visible?: boolean
+}
+
+export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
+  ({ children, className, itemKey, onHide, onShow, transition = true, visible, ...rest }, ref) => {
+    const { _activeItemKey, id } = useContext(TabsContext)
+
+    const tabPaneRef = useRef()
+    const forkedRef = useForkedRef(ref, tabPaneRef)
+
+    const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)
+
+    useEffect(() => {
+      visible !== undefined && setVisible(visible)
+    }, [visible])
+
+    useEffect(() => {
+      setVisible(_activeItemKey === itemKey)
+    }, [_activeItemKey])
+
+    return (
+      <Transition
+        in={_visible}
+        nodeRef={tabPaneRef}
+        onEnter={onShow}
+        onExit={onHide}
+        timeout={tabPaneRef.current ? getTransitionDurationFromElement(tabPaneRef.current) : 0}
+      >
+        {(state) => (
+          <div
+            className={classNames(
+              'tab-pane',
+              {
+                active: _visible,
+                fade: transition,
+                show: state === 'entered',
+              },
+              className,
+            )}
+            id={`${id}${itemKey}-tab-pane`}
+            role="tabpanel"
+            aria-labelledby={`${id}${itemKey}-tab`}
+            tabIndex={0}
+            ref={forkedRef}
+            {...rest}
+          >
+            {children}
+          </div>
+        )}
+      </Transition>
+    )
+  },
+)
+
+CTabPanel.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  onHide: PropTypes.func,
+  onShow: PropTypes.func,
+  transition: PropTypes.bool,
+  visible: PropTypes.bool,
+}
+
+CTabPanel.displayName = 'CTabPanel'

package/src/components/tabs/CTabs.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, forwardRef, HTMLAttributes, useEffect, useId, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * The active item key.
+   */
+  activeItemKey: number | string
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * The callback is fired when the active tab changes.
+   */
+  onChange?: (value: number | string) => void
+}
+
+export interface TabsContextProps {
+  _activeItemKey?: number | string
+  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+  id?: string
+}
+
+export const TabsContext = createContext({} as TabsContextProps)
+
+export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
+  ({ children, activeItemKey, className, onChange }, ref) => {
+    const id = useId()
+    const [_activeItemKey, setActiveItemKey] = useState(activeItemKey)
+
+    useEffect(() => {
+      _activeItemKey && onChange && onChange(_activeItemKey)
+    }, [_activeItemKey])
+
+    return (
+      <TabsContext.Provider value={{ _activeItemKey, setActiveItemKey, id }}>
+        <div className={classNames('tabs', className)} ref={ref}>
+          {children}
+        </div>
+      </TabsContext.Provider>
+    )
+  },
+)
+
+CTabs.propTypes = {
+  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+}
+
+CTabs.displayName = 'CTabs'

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

@@ -3,7 +3,7 @@
 exports[`CTabPane customize 1`] = `
 <div>
   <div
-    class="tab-pane fade active show bazinga"
+    class="tab-pane active fade show bazinga"
   >
     Test
   </div>

package/src/components/tabs/index.ts

@@ -1,4 +1,8 @@
+import { CTab } from './CTab'
 import { CTabContent } from './CTabContent'
 import { CTabPane } from './CTabPane'
+import { CTabPanel } from './CTabPanel'
+import { CTabList } from './CTabList'
+import { CTabs } from './CTabs'
 
-export { CTabContent, CTabPane }
+export { CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs }

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

@@ -6,7 +6,7 @@ exports[`CToaster customize 1`] = `
     class="toaster toast-container bazinga"
   />
   <button
-    class="btn btn-primary"
+    class="btn"
     type="button"
   >
     Send a toast

package/src/components/tooltip/CTooltip.tsx

@@ -1,13 +1,12 @@
 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'
-import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
+import { executeAfterTransition, getRTLPlacement } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
@@ -95,7 +94,8 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     const forkedRef = useForkedRef(ref, tooltipRef)
     const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`)
 
-    const { initPopper, destroyPopper } = usePopper()
+    const { initPopper, destroyPopper, updatePopper } = usePopper()
+    const [mounted, setMounted] = useState(false)
     const [_visible, setVisible] = useState(visible)
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
@@ -128,14 +128,48 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       setVisible(visible)
     }, [visible])
 
-    const toggleVisible = (visible: boolean) => {
-      if (visible) {
-        setTimeout(() => setVisible(true), _delay.show)
-        return
+    useEffect(() => {
+      if (_visible) {
+        setMounted(true)
+
+        if (tooltipRef.current) {
+          tooltipRef.current.classList.remove('fade', 'show')
+          destroyPopper()
+        }
+
+        setTimeout(() => {
+          if (togglerRef.current && tooltipRef.current) {
+            if (animation) {
+              tooltipRef.current.classList.add('fade')
+            }
+
+            initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+            tooltipRef.current.style.removeProperty('display')
+            tooltipRef.current.classList.add('show')
+            onShow && onShow()
+          }
+        }, _delay.show)
       }
 
-      setTimeout(() => setVisible(false), _delay.hide)
-    }
+      return () => {
+        if (tooltipRef.current) {
+          tooltipRef.current.classList.remove('show')
+          onHide && onHide()
+          executeAfterTransition(() => {
+            if (tooltipRef.current) {
+              tooltipRef.current.style.display = 'none'
+            }
+
+            destroyPopper()
+            setMounted(false)
+          }, tooltipRef.current)
+        }
+      }
+    }, [_visible])
+
+    useEffect(() => {
+      updatePopper()
+    }, [content])
 
     return (
       <>
@@ -145,70 +179,33 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => toggleVisible(!_visible),
+            onClick: () => setVisible(!_visible),
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => toggleVisible(true),
-            onBlur: () => toggleVisible(false),
+            onFocus: () => setVisible(true),
+            onBlur: () => setVisible(false),
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => toggleVisible(true),
-            onMouseLeave: () => toggleVisible(false),
+            onMouseEnter: () => setVisible(true),
+            onMouseLeave: () => setVisible(false),
           }),
         })}
         <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>
+          {mounted && (
+            <div
+              className={classNames('tooltip', 'bs-tooltip-auto', className)}
+              id={uID.current}
+              ref={forkedRef}
+              role="tooltip"
+              style={{
+                display: 'none',
+              }}
+              {...rest}
+            >
+              <div className="tooltip-arrow"></div>
+              <div className="tooltip-inner">{content}</div>
+            </div>
+          )}
         </CConditionalPortal>
       </>
     )

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

@@ -3,6 +3,7 @@
 exports[`CTooltip customize 1`] = `
 <div>
   <a
+    aria-describedby="tooltip97108"
     class="link"
   >
     Test

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`CWidgetStatsC customize 1`] = `
       class="card-body"
     >
       <div
-        class="text-end mb-4"
+        class="text-end mb-4 text-white text-opacity-75"
       >
         icon
       </div>

package/src/hooks/usePopper.ts

@@ -2,12 +2,11 @@ import { useRef } from 'react'
 import { createPopper } from '@popperjs/core'
 import type { Instance, Options } from '@popperjs/core'
 
-import { executeAfterTransition } from '../utils'
-
 interface UsePopperOutput {
   popper: Instance | undefined
   initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void
   destroyPopper: () => void
+  updatePopper: (options?: Partial<Options>) => void
 }
 
 export const usePopper = (): UsePopperOutput => {
@@ -23,17 +22,28 @@ export const usePopper = (): UsePopperOutput => {
     const popperInstance = _popper.current
 
     if (popperInstance && el.current) {
-      executeAfterTransition(() => {
-        popperInstance.destroy()
-      }, el.current)
+      popperInstance.destroy()
     }
 
     _popper.current = undefined
   }
 
+  const updatePopper = (options?: Partial<Options>) => {
+    const popperInstance = _popper.current
+
+    if (popperInstance && options) {
+      popperInstance.setOptions(options)
+    }
+
+    if (popperInstance) {
+      popperInstance.update()
+    }
+  }
+
   return {
     popper: _popper.current,
     initPopper,
     destroyPopper,
+    updatePopper,
   }
 }

package/src/utils/getNextActiveElement.ts

@@ -0,0 +1,23 @@
+const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+export default getNextActiveElement

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 import executeAfterTransition from './executeAfterTransition'
+import getNextActiveElement from './getNextActiveElement'
 import getRTLPlacement from './getRTLPlacement'
 import getTransitionDurationFromElement from './getTransitionDurationFromElement'
 import isInViewport from './isInViewport'
@@ -6,6 +7,7 @@ import isRTL from './isRTL'
 
 export {
   executeAfterTransition,
+  getNextActiveElement,
   getRTLPlacement,
   getTransitionDurationFromElement,
   isInViewport,