@coreui/react-pro 5.1.0 → 5.3.0

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'

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

@@ -84,6 +84,12 @@ export interface CTimePickerProps
    * @since 5.0.0
    */
   hours?: number[] | ((hour: number) => number[])
+  /**
+   * Set the id attribute for the input element.
+   *
+   * @since 5.3.0
+   */
+  id?: string
   /**
    * Toggle visibility or set the content of the input indicator.
    */
@@ -108,6 +114,12 @@ export interface CTimePickerProps
    * @since 5.0.0
    */
   minutes?: boolean | number[] | ((minute: number) => number[])
+  /**
+   * Set the name attribute for the input element.
+   *
+   * @since 5.3.0
+   */
+  name?: string
   /**
    * Callback fired when the time changed.
    */
@@ -171,6 +183,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       label,
       locale = 'default',
       minutes = true,
+      name,
       onTimeChange,
       onHide,
       onShow,
@@ -306,6 +319,8 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           autoComplete="off"
           className="time-picker-input"
           disabled={disabled}
+          id={id}
+          name={name}
           onChange={(event) => handleOnChange(event.target.value)}
           placeholder={placeholder}
           readOnly={inputReadOnly}
@@ -460,7 +475,6 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               )}
             </div>
           }
-          id={id}
           onHide={() => {
             setVisible(false)
             onHide && onHide()
@@ -536,6 +550,7 @@ CTimePicker.propTypes = {
   confirmButtonSize: CButton.propTypes?.size,
   confirmButtonVariant: CButton.propTypes?.variant,
   hours: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.func]),
+  id: PropTypes.string,
   inputOnChangeDelay: PropTypes.number,
   locale: PropTypes.string,
   minutes: PropTypes.oneOfType([
@@ -543,6 +558,7 @@ CTimePicker.propTypes = {
     PropTypes.arrayOf(PropTypes.number.isRequired),
     PropTypes.func,
   ]),
+  name: PropTypes.string,
   onTimeChange: PropTypes.func,
   required: PropTypes.bool,
   seconds: PropTypes.oneOfType([

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

@@ -144,6 +144,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             }
 
             initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+            tooltipRef.current.style.removeProperty('display')
             tooltipRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -155,6 +156,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
           tooltipRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (tooltipRef.current) {
+              tooltipRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, tooltipRef.current)
@@ -192,6 +197,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="tooltip-arrow"></div>

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/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'
@@ -7,6 +8,7 @@ import isRTL from './isRTL'
 
 export {
   executeAfterTransition,
+  getNextActiveElement,
   getRTLPlacement,
   getTransitionDurationFromElement,
   isInViewport,