@coreui/react-pro 5.1.0 → 5.2.0

package/dist/esm/components/tabs/CTabs.d.ts

@@ -0,0 +1,22 @@
+import React, { HTMLAttributes } from 'react';
+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 declare const TabsContext: React.Context<TabsContextProps>;
+export declare const CTabs: React.ForwardRefExoticComponent<CTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/tabs/CTabs.js

@@ -0,0 +1,25 @@
+import React, { createContext, forwardRef, useId, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+
+var TabsContext = createContext({});
+var CTabs = forwardRef(function (_a, ref) {
+    var children = _a.children, activeItemKey = _a.activeItemKey, className = _a.className, onChange = _a.onChange;
+    var id = useId();
+    var _b = useState(activeItemKey), _activeItemKey = _b[0], setActiveItemKey = _b[1];
+    useEffect(function () {
+        _activeItemKey && onChange && onChange(_activeItemKey);
+    }, [_activeItemKey]);
+    return (React.createElement(TabsContext.Provider, { value: { _activeItemKey: _activeItemKey, setActiveItemKey: setActiveItemKey, id: id } },
+        React.createElement("div", { className: classNames('tabs', className), ref: ref }, children)));
+});
+CTabs.propTypes = {
+    activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+};
+CTabs.displayName = 'CTabs';
+
+export { CTabs, TabsContext };
+//# sourceMappingURL=CTabs.js.map

package/dist/esm/components/tabs/CTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTabs.js","sources":["../../../../src/components/tabs/CTabs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;IAyBa,WAAW,GAAG,aAAa,CAAC,EAAsB,EAAC;IAEnD,KAAK,GAAG,UAAU,CAC7B,UAAC,EAAgD,EAAE,GAAG,EAAA;QAAnD,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;AAC7C,IAAA,IAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IACZ,IAAA,EAAA,GAAqC,QAAQ,CAAC,aAAa,CAAC,EAA3D,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAA2B,CAAA;AAElE,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,cAAc,IAAI,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAA;AACxD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAA;AAEpB,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,gBAAA,EAAE,gBAAgB,kBAAA,EAAE,EAAE,IAAA,EAAE,EAAA;AACnE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,EAAA,EACpD,QAAQ,CACL,CACe,EACxB;AACH,CAAC,EACF;AAED,KAAK,CAAC,SAAS,GAAG;AAChB,IAAA,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;IACnF,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,QAAQ,EAAE,SAAS,CAAC,IAAI;CACzB,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/components/tabs/index.d.ts

@@ -1,3 +1,7 @@
+import { CTab } from './CTab';
 import { CTabContent } from './CTabContent';
 import { CTabPane } from './CTabPane';
-export { CTabContent, CTabPane };
+import { CTabPanel } from './CTabPanel';
+import { CTabList } from './CTabList';
+import { CTabs } from './CTabs';
+export { CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs };

package/dist/esm/index.js

@@ -120,8 +120,12 @@ export { CTableFoot } from './components/table/CTableFoot.js';
 export { CTableHead } from './components/table/CTableHead.js';
 export { CTableHeaderCell } from './components/table/CTableHeaderCell.js';
 export { CTableRow } from './components/table/CTableRow.js';
+export { CTab } from './components/tabs/CTab.js';
 export { CTabContent } from './components/tabs/CTabContent.js';
 export { CTabPane } from './components/tabs/CTabPane.js';
+export { CTabPanel } from './components/tabs/CTabPanel.js';
+export { CTabList } from './components/tabs/CTabList.js';
+export { CTabs } from './components/tabs/CTabs.js';
 export { CTimePicker } from './components/time-picker/CTimePicker.js';
 export { CToast } from './components/toast/CToast.js';
 export { CToastBody } from './components/toast/CToastBody.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/utils/getNextActiveElement.d.ts

@@ -0,0 +1,2 @@
+declare const getNextActiveElement: (list: HTMLElement[], activeElement: HTMLElement, shouldGetNext: boolean, isCycleAllowed: boolean) => HTMLElement;
+export default getNextActiveElement;

package/dist/esm/utils/getNextActiveElement.js

@@ -0,0 +1,15 @@
+var getNextActiveElement = function (list, activeElement, shouldGetNext, isCycleAllowed) {
+    var listLength = list.length;
+    var index = list.indexOf(activeElement);
+    if (index === -1) {
+        return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0];
+    }
+    index += shouldGetNext ? 1 : -1;
+    {
+        index = (index + listLength) % listLength;
+    }
+    return list[Math.max(0, Math.min(index, listLength - 1))];
+};
+
+export { getNextActiveElement as default };
+//# sourceMappingURL=getNextActiveElement.js.map

package/dist/esm/utils/getNextActiveElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNextActiveElement.js","sources":["../../../src/utils/getNextActiveElement.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAM,IAAA,oBAAoB,GAAG,UAC3B,IAAmB,EACnB,aAA0B,EAC1B,aAAsB,EACtB,cAAuB,EAAA;AAEvB,IAAA,IAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAA;IAC9B,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;AAEvC,IAAA,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;QAChB,OAAO,CAAC,aAAa,IAAI,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;KACzE;IAED,KAAK,IAAI,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IAEX;QAClB,KAAK,GAAG,CAAC,KAAK,GAAG,UAAU,IAAI,UAAU,CAAA;KAC1C;IAED,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;AAC3D;;;;"}

package/dist/esm/utils/index.d.ts

@@ -1,7 +1,8 @@
 import executeAfterTransition from './executeAfterTransition';
+import getNextActiveElement from './getNextActiveElement';
 import getRTLPlacement from './getRTLPlacement';
 import getTransitionDurationFromElement from './getTransitionDurationFromElement';
 import isInViewport from './isInViewport';
 import isObjectInArray from './isObjectInArray';
 import isRTL from './isRTL';
-export { executeAfterTransition, getRTLPlacement, getTransitionDurationFromElement, isInViewport, isObjectInArray, isRTL, };
+export { executeAfterTransition, getNextActiveElement, getRTLPlacement, getTransitionDurationFromElement, isInViewport, isObjectInArray, isRTL, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,18 +41,18 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.1.0",
+    "@coreui/coreui-pro": "^5.2.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.5.12",
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.10",
     "classnames": "^2.5.1",
@@ -63,8 +63,8 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.17.2",
-    "ts-jest": "^29.1.2",
+    "rollup": "^4.18.0",
+    "ts-jest": "^29.1.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5"
   },

package/src/components/calendar/CCalendar.tsx

@@ -366,7 +366,7 @@ const Calendar = (props: {
               <tr key={index}>
                 {row.map((month, idx) => {
                   const monthNumber = index * 3 + idx
-                  const date = new Date(Date.UTC(calendarDate.getFullYear(), monthNumber, 1))
+                  const date = new Date(calendarDate.getFullYear(), monthNumber, 1)
                   const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
                   return (
                     <td
@@ -403,7 +403,7 @@ const Calendar = (props: {
             return (
               <tr key={index}>
                 {row.map((year, idx) => {
-                  const date = new Date(Date.UTC(year, 0, 1))
+                  const date = new Date(year, 0, 1)
                   const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
                   return (
                     <td

package/src/components/calendar/utils.ts

@@ -19,7 +19,10 @@ export const convertToDateObject = (
     return convertIsoWeekToDate(date as string)
   }
 
-  return new Date(Date.parse(date))
+  const _date = new Date(Date.parse(date))
+  const userTimezoneOffset = _date.getTimezoneOffset() * 60_000
+
+  return new Date(_date.getTime() + userTimezoneOffset)
 }
 
 export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
@@ -35,17 +38,21 @@ export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][]
     .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
 }
 
-export const getCalendarDate = (calendarDate: Date, order: number, view: 'days' | 'months' | 'years') => {
+export const getCalendarDate = (
+  calendarDate: Date,
+  order: number,
+  view: 'days' | 'months' | 'years',
+) => {
   if (order !== 0 && view === 'days') {
-    return new Date(Date.UTC(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1))
+    return new Date(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1)
   }
 
   if (order !== 0 && view === 'months') {
-    return new Date(Date.UTC(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1))
+    return new Date(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1)
   }
 
   if (order !== 0 && view === 'years') {
-    return new Date(Date.UTC(calendarDate.getFullYear() + (12 * order), calendarDate.getMonth(), 1))
+    return new Date(calendarDate.getFullYear() + 12 * order, calendarDate.getMonth(), 1)
   }
 
   return calendarDate
@@ -167,7 +174,9 @@ export const getWeekNumber = (date: Date) => {
   const week1 = new Date(date.getFullYear(), 0, 4)
   return (
     1 +
-    Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7)
+    Math.round(
+      ((date.getTime() - week1.getTime()) / 86_400_000 - 3 + ((week1.getDay() + 6) % 7)) / 7,
+    )
   )
 }
 
@@ -249,7 +258,11 @@ export const isDateDisabled = (
 }
 
 export const isDateInRange = (date: Date, start: Date | null, end: Date | null) => {
-  return start && end && start <= date && date <= end
+  const _date = removeTimeFromDate(date)
+  const _start = start ? removeTimeFromDate(start) : null
+  const _end = end ? removeTimeFromDate(end) : null
+
+  return _start && _end && _start <= _date && _date <= _end
 }
 
 export const isDateSelected = (date: Date, start: Date | null, end: Date | null) => {
@@ -301,3 +314,6 @@ export const isValidDate = (date: string) => {
   const d = new Date(date)
   return d instanceof Date && d.getTime()
 }
+
+export const removeTimeFromDate = (date: Date) =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate())

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -612,7 +612,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             />
             {timepicker && (
               <div className="date-picker-timepickers">
-                {isMobile || (range && calendars === 1) ? (
+                {(isMobile && range) || (range && calendars === 1) ? (
                   <>
                     <CTimePicker
                       container="inline"

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/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/multi-select/CMultiSelect.tsx

@@ -311,6 +311,11 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       return () => {
         onHide && onHide()
 
+        setSearchValue('')
+        if (searchRef.current) {
+          searchRef.current.value = ''
+        }
+
         window.removeEventListener('mouseup', handleMouseUp)
         window.removeEventListener('keyup', handleKeyUp)
 

package/src/components/multi-select/CMultiSelectSelection.tsx

@@ -52,6 +52,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
                   {!option.disabled && (
                     <button
                       className="form-multi-select-tag-delete"
+                      type="button"
                       aria-label="Close"
                       onClick={() => onRemove && onRemove(option)}
                     />

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'

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'