@coreui/react 5.0.0-alpha.0 → 5.0.0-alpha.1

package/dist/utils/executeAfterTransition.d.ts

@@ -0,0 +1,2 @@
+declare const executeAfterTransition: (callback: () => void, transitionElement: HTMLElement, waitForTransition?: boolean) => void;
+export default executeAfterTransition;

package/dist/utils/getTransitionDurationFromElement.d.ts

@@ -0,0 +1,2 @@
+declare const getTransitionDurationFromElement: (element: HTMLElement) => number;
+export default getTransitionDurationFromElement;

package/dist/utils/index.d.ts

@@ -1,4 +1,6 @@
+import executeAfterTransition from './executeAfterTransition';
 import getRTLPlacement from './getRTLPlacement';
+import getTransitionDurationFromElement from './getTransitionDurationFromElement';
 import isInViewport from './isInViewport';
 import isRTL from './isRTL';
-export { getRTLPlacement, isInViewport, isRTL };
+export { executeAfterTransition, getRTLPlacement, getTransitionDurationFromElement, isInViewport, isRTL, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0-alpha.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^5.0.0-alpha.0",
+    "@coreui/coreui": "^5.0.0-alpha.2",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/carousel/CCarousel.tsx

@@ -226,11 +226,11 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         className={classNames(
           'carousel slide',
           {
-            'carousel-dark': dark,
             'carousel-fade': transition === 'crossfade',
           },
           className,
         )}
+        {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
         onMouseLeave={cycle}
         {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}
@@ -244,20 +244,24 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           }}
         >
           {indicators && (
-            <ol className="carousel-indicators">
+            <div className="carousel-indicators">
               {Array.from({ length: itemsNumber }, (_, i) => i).map((index) => {
                 return (
-                  <li
+                  <button
                     key={`indicator${index}`}
                     onClick={() => {
                       !animating && handleIndicatorClick(index)
                     }}
-                    className={active === index ? 'active' : ''}
+                    className={classNames({
+                      active: active === index
+                    })}
                     data-coreui-target=""
+                    {...(active === index && { 'aria-current': true })}
+                    aria-label={`Slide ${index + 1}`}
                   />
                 )
               })}
-            </ol>
+            </div>
           )}
           <div className="carousel-inner">
             {Children.map(children, (child, index) => {

package/src/components/close-button/CCloseButton.tsx

@@ -7,18 +7,24 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Invert the default color.
+   */
+  dark?: boolean
   /**
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
   /**
    * Change the default color to white.
+   * 
+   * @deprecated 5.0.0
    */
   white?: boolean
 }
 
 export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
-  ({ className, disabled, white, ...rest }, ref) => {
+  ({ className, dark, disabled, white, ...rest }, ref) => {
     return (
       <button
         type="button"
@@ -33,6 +39,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
         )}
         aria-label="Close"
         disabled={disabled}
+        {...(dark && { 'data-coreui-theme': 'dark' })}
         {...rest}
         ref={ref}
       />
@@ -42,6 +49,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
 
 CCloseButton.propTypes = {
   className: PropTypes.string,
+  dark: PropTypes.bool,
   disabled: PropTypes.bool,
   white: PropTypes.bool,
 }

package/src/components/dropdown/CDropdownMenu.tsx

@@ -46,7 +46,6 @@ export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDrop
           className={classNames(
             'dropdown-menu',
             {
-              'dropdown-menu-dark': dark,
               show: visible,
             },
             alignment && alignmentClassNames(alignment),
@@ -56,6 +55,7 @@ export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDrop
           role="menu"
           aria-hidden={!visible}
           {...(!popper && { 'data-coreui-popper': 'static' })}
+          {...(dark && { 'data-coreui-theme': 'dark' })}
           {...rest}
         >
           {Component === 'ul'

package/src/components/modal/CModal.tsx

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
@@ -35,6 +35,12 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * @ignore
    */
   duration?: number
+  /**
+   * Puts the focus on the modal when shown.
+   *
+   * @since v4.10.0
+   */
+  focus?: boolean
   /**
    * Set modal to covers the entire user viewport.
    */
@@ -96,6 +102,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       backdrop = true,
       className,
       duration = 150,
+      focus = true,
       fullscreen,
       keyboard = true,
       onClose,
@@ -111,6 +118,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     },
     ref,
   ) => {
+    const activeElementRef = useRef<HTMLElement | null>(null)
     const modalRef = useRef<HTMLDivElement>(null)
     const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
@@ -128,11 +136,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }, [visible])
 
     useEffect(() => {
-      document.addEventListener('click', handleClickOutside)
-      document.addEventListener('keydown', handleKeyDown)
+      if (_visible) {
+        activeElementRef.current = document.activeElement as HTMLElement | null
+        document.addEventListener('mouseup', handleClickOutside)
+        document.addEventListener('keydown', handleKeyDown)
+      } else {
+        activeElementRef.current?.focus()
+      }
 
       return () => {
-        document.removeEventListener('click', handleClickOutside)
+        document.removeEventListener('mouseup', handleClickOutside)
         document.removeEventListener('keydown', handleKeyDown)
       }
     }, [_visible])
@@ -143,6 +156,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
 
       setVisible(false)
+
       return onClose && onClose()
     }
 
@@ -163,7 +177,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
         setTimeout(
           () => {
-            modalRef.current?.focus()
+            focus && modalRef.current?.focus()
           },
           transition ? duration : 0,
         )
@@ -225,10 +239,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                     className,
                   )}
                   tabIndex={-1}
-                  role="dialog"
+                  {...(_visible
+                    ? { 'aria-modal': true, role: 'dialog' }
+                    : { 'aria-hidden': 'true' })}
                   style={{
                     ...(state !== 'exited' && { display: 'block' }),
                   }}
+                  {...rest}
                   ref={forkedRef}
                 >
                   <CModalDialog
@@ -237,9 +254,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                     scrollable={scrollable}
                     size={size}
                   >
-                    <CModalContent {...rest} ref={modalContentRef}>
-                      {children}
-                    </CModalContent>
+                    <CModalContent ref={modalContentRef}>{children}</CModalContent>
                   </CModalDialog>
                 </div>
               </CModalContext.Provider>
@@ -262,6 +277,7 @@ CModal.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   duration: PropTypes.number,
+  focus: PropTypes.bool,
   fullscreen: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),

package/src/components/nav/CNav.tsx

@@ -19,7 +19,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'tabs' | 'pills'
+  variant?: 'pills' | 'tabs' | 'underline'
 }
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
@@ -49,7 +49,7 @@ CNav.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['tabs', 'pills']),
+  variant: PropTypes.oneOf(['pills', 'tabs', 'underline']),
 }
 
 CNav.displayName = 'CNav'

package/src/components/nav/CNavGroup.tsx

@@ -36,6 +36,13 @@ export interface CNavGroupProps {
   idx?: string
 }
 
+const isInVisibleGroup = (el1: string, el2: string) => {
+  const array1 = el1.toString().split('.')
+  const array2 = el2.toString().split('.')
+
+  return array2.every((item, index) => item === array1[index])
+}
+
 export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
   ({ children, className, compact, idx, toggler, visible, ...rest }, ref) => {
     const [height, setHeight] = useState<number | string>()
@@ -45,12 +52,12 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
 
     const [_visible, setVisible] = useState(
       Boolean(
-        visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())),
+        visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)),
       ),
     )
 
     useEffect(() => {
-      setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())))
+      setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
     }, [visibleGroup])
 
     const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {

package/src/components/navbar/CNavbar.tsx

@@ -17,7 +17,7 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
    */
   color?: Colors
   /**
-   * Sets if the color of text should be colored for a light or dark dark background.
+   * Sets if the color of text should be colored for a light or dark background.
    */
   colorScheme?: 'dark' | 'light'
   /**
@@ -59,12 +59,12 @@ export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
           'navbar',
           {
             [`bg-${color}`]: color,
-            [`navbar-${colorScheme}`]: colorScheme,
             [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
           },
           placement,
           className,
         )}
+        {...(colorScheme && { 'data-coreui-theme': colorScheme })}
         {...rest}
         ref={ref}
       >

package/src/components/offcanvas/COffcanvas.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 
 import { useForkedRef } from '../../hooks'
@@ -17,6 +17,10 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Sets a darker color scheme.
+   */
+  dark?: boolean
   /**
    * Closes the offcanvas when escape key is pressed.
    */
@@ -59,6 +63,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       children,
       backdrop = true,
       className,
+      dark,
       keyboard = true,
       onHide,
       onShow,
@@ -135,6 +140,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
                 role="dialog"
                 tabIndex={-1}
                 onKeyDown={handleKeyDown}
+                {...(dark && { 'data-coreui-theme': 'dark' })}
                 {...rest}
                 ref={forkedRef}
               >
@@ -161,6 +167,7 @@ COffcanvas.propTypes = {
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
+  dark: PropTypes.bool,
   keyboard: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/components/popover/CPopover.tsx

@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group'
 import { usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
@@ -164,7 +164,7 @@ export const CPopover: FC<CPopoverProps> = ({
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: 200,
+              exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
             }}
             unmountOnExit
           >

package/src/components/sidebar/CSidebar.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CBackdrop } from '../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'

package/src/components/tooltip/CTooltip.tsx

@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group'
 import { usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
@@ -158,7 +158,7 @@ export const CTooltip: FC<CTooltipProps> = ({
             onExit={onHide}
             timeout={{
               enter: 0,
-              exit: 200,
+              exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
             }}
             unmountOnExit
           >

package/src/hooks/usePopper.ts

@@ -2,6 +2,8 @@ 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
@@ -10,14 +12,20 @@ interface UsePopperOutput {
 
 export const usePopper = (): UsePopperOutput => {
   const _popper = useRef<Instance>()
+  const el = useRef<HTMLElement>()
 
   const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
     _popper.current = createPopper(reference, popper, options)
+    el.current = popper
   }
 
   const destroyPopper = () => {
-    if (_popper.current) {
-      _popper.current.destroy()
+    const popperInstance = _popper.current
+
+    if (popperInstance && el.current) {
+      executeAfterTransition(() => {
+        popperInstance.destroy()
+      }, el.current)
     }
 
     _popper.current = undefined

package/src/utils/executeAfterTransition.ts

@@ -0,0 +1,46 @@
+import getTransitionDurationFromElement from './getTransitionDurationFromElement'
+
+const execute = (callback: () => void) => {
+  if (typeof callback === 'function') {
+    callback()
+  }
+}
+
+const triggerTransitionEnd = (element: HTMLElement) => {
+  element.dispatchEvent(new Event('transitionend'))
+}
+
+const executeAfterTransition = (
+  callback: () => void,
+  transitionElement: HTMLElement,
+  waitForTransition = true,
+) => {
+  if (!waitForTransition) {
+    execute(callback)
+    return
+  }
+
+  const durationPadding = 5
+  const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding
+
+  let called = false
+
+  const handler = ({ target }: { target: any }) => {
+    if (target !== transitionElement) {
+      return
+    }
+
+    called = true
+    transitionElement.removeEventListener('transitionend', handler)
+    execute(callback)
+  }
+
+  transitionElement.addEventListener('transitionend', handler)
+  setTimeout(() => {
+    if (!called) {
+      triggerTransitionEnd(transitionElement)
+    }
+  }, emulatedDuration)
+}
+
+export default executeAfterTransition

package/src/utils/getTransitionDurationFromElement.ts

@@ -0,0 +1,24 @@
+const getTransitionDurationFromElement = (element: HTMLElement) => {
+  if (!element) {
+    return 0
+  }
+
+  // Get transition-duration of the element
+  let { transitionDuration, transitionDelay } = window.getComputedStyle(element)
+
+  const floatTransitionDuration = Number.parseFloat(transitionDuration)
+  const floatTransitionDelay = Number.parseFloat(transitionDelay)
+
+  // Return 0 if element or transition duration is not found
+  if (!floatTransitionDuration && !floatTransitionDelay) {
+    return 0
+  }
+
+  // If multiple durations are defined, take the first
+  transitionDuration = transitionDuration.split(',')[0]
+  transitionDelay = transitionDelay.split(',')[0]
+
+  return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
+}
+
+export default getTransitionDurationFromElement

package/src/utils/index.ts

@@ -1,5 +1,13 @@
+import executeAfterTransition from './executeAfterTransition'
 import getRTLPlacement from './getRTLPlacement'
+import getTransitionDurationFromElement from './getTransitionDurationFromElement'
 import isInViewport from './isInViewport'
 import isRTL from './isRTL'
 
-export { getRTLPlacement, isInViewport, isRTL }
+export {
+  executeAfterTransition,
+  getRTLPlacement,
+  getTransitionDurationFromElement,
+  isInViewport,
+  isRTL,
+}