@coreui/react 5.0.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,31 +41,31 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.1.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
-    "@types/react": "18.2.73",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.10",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.13.1",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.3"
+    "rollup": "^4.18.0",
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/button/CButton.tsx

@@ -74,8 +74,11 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
         {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
-          variant ? `btn-${variant}-${color}` : `btn-${color}`,
-          { [`btn-${size}`]: size },
+          {
+            [`btn-${color}`]: color && !variant,
+            [`btn-${variant}-${color}`]: color && variant,
+            [`btn-${size}`]: size,
+          },
           shape,
           className,
         )}

package/src/components/button/__tests__/CButton.spec.tsx

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 import { CButton } from '../../../index'
 
 test('loads and displays CButton component', async () => {
-  const { container } = render(<CButton>Test</CButton>)
+  const { container } = render(<CButton color="primary">Test</CButton>)
   expect(container).toMatchSnapshot()
 })
 

package/src/components/button-group/__tests__/CButtonGroup.spec.tsx

@@ -11,9 +11,9 @@ test('loads and displays CButtonGroup component', async () => {
 test('CButtonGroup customize', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={false}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()
@@ -25,9 +25,9 @@ test('CButtonGroup customize', async () => {
 test('CButtonGroup customize vertical', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={true}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()

package/src/components/button-group/__tests__/CButtonToolbar.spec.tsx

@@ -12,14 +12,14 @@ test('CButtonToolbar customize', async () => {
   const { container } = render(
     <CButtonToolbar className="bazinga" role="group" aria-label="Bazinga">
       <CButtonGroup role="group">
-        <CButton>1</CButton>
-        <CButton>2</CButton>
-        <CButton>3</CButton>
+        <CButton color="primary">1</CButton>
+        <CButton color="primary">2</CButton>
+        <CButton color="primary">3</CButton>
       </CButtonGroup>
       <CButtonGroup role="group">
-        <CButton>A</CButton>
-        <CButton>B</CButton>
-        <CButton>C</CButton>
+        <CButton color="primary">A</CButton>
+        <CButton color="primary">B</CButton>
+        <CButton color="primary">C</CButton>
       </CButtonGroup>
     </CButtonToolbar>,
   )

package/src/components/dropdown/CDropdown.tsx

@@ -15,10 +15,10 @@ import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef, usePopper } from '../../hooks'
 import { placementPropType } from '../../props'
 import type { Placements } from '../../types'
-import { isRTL } from '../../utils'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments, Directions } from './types'
-import { getNextActiveElement, getPlacement } from './utils'
+import { getPlacement } from './utils'
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**

package/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CDropdownToggle component', async () => {
 
 test('CDropdownToggle customize', async () => {
   const { container } = render(
-    <CDropdownToggle caret={true} split={true} trigger="focus">
+    <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
       Test
     </CDropdownToggle>,
   )

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -17,7 +17,7 @@ exports[`CDropdown example 1`] = `
   >
     <button
       aria-expanded="false"
-      class="btn btn-primary dropdown-toggle"
+      class="btn dropdown-toggle"
       tabindex="0"
       type="button"
     >

package/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`CDropdownToggle customize 1`] = `
 exports[`loads and displays CDropdownToggle component 1`] = `
 <div>
   <button
-    class="btn btn-primary dropdown-toggle"
+    class="btn dropdown-toggle"
     tabindex="0"
     type="button"
   >

package/src/components/dropdown/utils.ts

@@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   return classNames
 }
 
-export 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 const getPlacement = (
   placement: Placement,
   direction: string | undefined,

package/src/components/modal/__tests__/CModal.spec.tsx

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

package/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap

@@ -2,35 +2,39 @@
 
 exports[`CNavItem customize 1`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 
 exports[`CNavItem customize 2`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 

package/src/components/popover/CPopover.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 CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
@@ -101,6 +100,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`)
 
     const { initPopper, destroyPopper } = usePopper()
+    const [mounted, setMounted] = useState(false)
     const [_visible, setVisible] = useState(visible)
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
@@ -133,14 +133,44 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       setVisible(visible)
     }, [visible])
 
-    const toggleVisible = (visible: boolean) => {
-      if (visible) {
-        setTimeout(() => setVisible(true), _delay.show)
-        return
+    useEffect(() => {
+      if (_visible) {
+        setMounted(true)
+
+        if (popoverRef.current) {
+          popoverRef.current.classList.remove('fade', 'show')
+          destroyPopper()
+        }
+
+        setTimeout(() => {
+          if (togglerRef.current && popoverRef.current) {
+            if (animation) {
+              popoverRef.current.classList.add('fade')
+            }
+
+            initPopper(togglerRef.current, popoverRef.current, popperConfig)
+            popoverRef.current.style.removeProperty('display')
+            popoverRef.current.classList.add('show')
+            onShow && onShow()
+          }
+        }, _delay.show)
       }
 
-      setTimeout(() => setVisible(false), _delay.hide)
-    }
+      return () => {
+        if (popoverRef.current) {
+          popoverRef.current.classList.remove('show')
+          onHide && onHide()
+          executeAfterTransition(() => {
+            if (popoverRef.current) {
+              popoverRef.current.style.display = 'none'
+            }
+
+            destroyPopper()
+            setMounted(false)
+          }, popoverRef.current)
+        }
+      }
+    }, [_visible])
 
     return (
       <>
@@ -150,71 +180,34 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
           }),
           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={popoverRef}
-            onEnter={() => {
-              if (togglerRef.current && popoverRef.current) {
-                initPopper(togglerRef.current, popoverRef.current, popperConfig)
-              }
-
-              onShow
-            }}
-            onEntering={() => {
-              if (togglerRef.current && popoverRef.current) {
-                popoverRef.current.style.display = 'initial'
-              }
-            }}
-            onExit={onHide}
-            onExited={() => {
-              destroyPopper()
-            }}
-            timeout={{
-              enter: 0,
-              exit: popoverRef.current
-                ? getTransitionDurationFromElement(popoverRef.current) + 50
-                : 200,
-            }}
-            unmountOnExit
-          >
-            {(state) => (
-              <div
-                className={classNames(
-                  'popover',
-                  'bs-popover-auto',
-                  {
-                    fade: animation,
-                    show: state === 'entered',
-                  },
-                  className,
-                )}
-                id={uID.current}
-                ref={forkedRef}
-                role="tooltip"
-                style={{
-                  display: 'none',
-                }}
-                {...rest}
-              >
-                <div className="popover-arrow"></div>
-                <div className="popover-header">{title}</div>
-                <div className="popover-body">{content}</div>
-              </div>
-            )}
-          </Transition>
+          {mounted && (
+            <div
+              className={classNames('popover', 'bs-popover-auto', className)}
+              id={uID.current}
+              ref={forkedRef}
+              role="tooltip"
+              style={{
+                display: 'none',
+              }}
+              {...rest}
+            >
+              <div className="popover-arrow"></div>
+              <div className="popover-header">{title}</div>
+              <div className="popover-body">{content}</div>
+            </div>
+          )}
         </CConditionalPortal>
       </>
     )

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -6,7 +6,7 @@ import { CPopover, CButton } from '../../../index'
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
   )
   expect(container).toMatchSnapshot()
@@ -17,7 +17,7 @@ test('CPopover customize', async () => {
   let arr, element
   const { container } = render(
     <CPopover content="content" title="title" trigger="click" placement="right">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
     { container: document.body },
   )

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -3,11 +3,33 @@
 exports[`CPopover customize 1`] = `
 <body>
   <button
+    aria-describedby="popover744956"
     class="btn btn-primary"
     type="button"
   >
     Test
   </button>
+  <div
+    class="popover bs-popover-auto fade show"
+    id="popover744956"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
+  >
+    <div
+      class="popover-arrow"
+      style="position: absolute;"
+    />
+    <div
+      class="popover-header"
+    >
+      title
+    </div>
+    <div
+      class="popover-body"
+    >
+      content
+    </div>
+  </div>
 </body>
 `;
 

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

@@ -2,21 +2,21 @@
 
 exports[`CSidebarBrand customize 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand bazinga"
   >
     Test
-  </div>
+  </a>
 </div>
 `;
 
 exports[`loads and displays CSidebarBrand component 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand"
     color="primary"
   >
     Test
-  </div>
+  </a>
 </div>
 `;

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

@@ -4,7 +4,9 @@ exports[`CSidebarNav customize 1`] = `
 <div>
   <ul
     class="sidebar-nav bazinga"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;
 
@@ -12,6 +14,8 @@ exports[`loads and displays CSidebarNav component 1`] = `
 <div>
   <ul
     class="sidebar-nav"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;

package/src/components/tabs/CTab.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { TabsContext } from './CTabs'
+
+export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Item key.
+   */
+  itemKey: number | string
+}
+
+export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
+  ({ children, className, itemKey, ...rest }, ref) => {
+    const { _activeItemKey, setActiveItemKey, id } = useContext(TabsContext)
+
+    const isActive = () => itemKey === _activeItemKey
+
+    return (
+      <button
+        className={classNames(
+          'nav-link',
+          {
+            active: isActive(),
+          },
+          className,
+        )}
+        id={`${id}${itemKey}-tab`}
+        onClick={() => setActiveItemKey(itemKey)}
+        onFocus={() => setActiveItemKey(itemKey)}
+        role="tab"
+        tabIndex={isActive() ? 0 : -1}
+        type="button"
+        aria-controls={`${id}${itemKey}-tab-pane`}
+        aria-selected={isActive()}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+CTab.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+}
+
+CTab.displayName = 'CTab'

package/src/components/tabs/CTabList.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, HTMLAttributes, KeyboardEvent, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../hooks'
+import { getNextActiveElement } from '../../utils'
+
+export interface CTabListProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Specify a layout type for component.
+   */
+  layout?: 'fill' | 'justified'
+  /**
+   * Set the nav variant to tabs or pills.
+   */
+  variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
+}
+
+export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
+  ({ children, className, layout, variant, ...rest }, ref) => {
+    const tabListRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, tabListRef)
+
+    const handleKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
+      if (
+        tabListRef.current !== null &&
+        (event.key === 'ArrowDown' ||
+          event.key === 'ArrowUp' ||
+          event.key === 'ArrowLeft' ||
+          event.key === 'ArrowRight' ||
+          event.key === 'Home' ||
+          event.key === 'End')
+      ) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        // eslint-disable-next-line unicorn/prefer-spread
+        const items: HTMLElement[] = Array.from(
+          tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+        )
+
+        let nextActiveElement
+
+        if (event.key === 'Home' || event.key === 'End') {
+          nextActiveElement = event.key === 'End' ? items.at(-1) : items[0]
+        } else {
+          nextActiveElement = getNextActiveElement(
+            items,
+            target,
+            event.key === 'ArrowDown' || event.key === 'ArrowRight',
+            true,
+          )
+        }
+
+        if (nextActiveElement) {
+          nextActiveElement.focus({ preventScroll: true })
+        }
+      }
+    }
+
+    return (
+      <div
+        className={classNames(
+          'nav',
+          {
+            [`nav-${layout}`]: layout,
+            [`nav-${variant}`]: variant,
+          },
+          className,
+        )}
+        role="tablist"
+        onKeyDown={handleKeydown}
+        ref={forkedRef}
+        {...rest}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+
+CTabList.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  layout: PropTypes.oneOf(['fill', 'justified']),
+  variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
+}
+
+CTabList.displayName = 'CTabList'