feat(CTabs): the initial release of the new react tabs component

Author: mrholek

packages/coreui-react/src/components/tabs/CTab.tsx

@@ -12,12 +12,12 @@ export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * Item key.
    */
-  itemKey?: number | string
+  itemKey: number | string
 }
 
 export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
   ({ children, className, itemKey, ...rest }, ref) => {
-    const { _activeItemKey, setActiveKey, id } = useContext(TabsContext)
+    const { _activeItemKey, setActiveItemKey, id } = useContext(TabsContext)
 
     const isActive = () => itemKey === _activeItemKey
 
@@ -31,8 +31,8 @@ export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
           className,
         )}
         id={`${id}${itemKey}-tab`}
-        onClick={() => setActiveKey(itemKey)}
-        onFocus={() => setActiveKey(itemKey)}
+        onClick={() => setActiveItemKey(itemKey)}
+        onFocus={() => setActiveItemKey(itemKey)}
         role="tab"
         tabIndex={isActive() ? 0 : -1}
         type="button"
@@ -50,7 +50,7 @@ export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
 CTab.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
 CTab.displayName = 'CTab'

packages/coreui-react/src/components/tabs/CTabList.tsx

@@ -22,12 +22,12 @@ export interface CTabListProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
   ({ children, className, layout, variant, ...rest }, ref) => {
-    const tabsRef = useRef<HTMLDivElement | HTMLUListElement | HTMLOListElement>(null)
-    const forkedRef = useForkedRef(ref, tabsRef)
+    const tabListRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, tabListRef)
 
     const handleKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
       if (
-        tabsRef.current !== null &&
+        tabListRef.current !== null &&
         (event.key === 'ArrowDown' ||
           event.key === 'ArrowUp' ||
           event.key === 'ArrowLeft' ||
@@ -39,7 +39,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
         const target = event.target as HTMLElement
         // eslint-disable-next-line unicorn/prefer-spread
         const items: HTMLElement[] = Array.from(
-          tabsRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+          tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
         )
 
         let nextActiveElement

packages/coreui-react/src/components/tabs/CTabPanel.tsx

@@ -15,7 +15,7 @@ export interface CTabPanelProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Item key.
    */
-  itemKey?: number | string
+  itemKey: number | string
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -88,7 +88,7 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
 CTabPanel.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   transition: PropTypes.bool,

packages/coreui-react/src/components/tabs/CTabs.tsx

@@ -6,7 +6,7 @@ export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChan
   /**
    * The active item key.
    */
-  activeItemKey?: number | string
+  activeItemKey: number | string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -19,7 +19,7 @@ export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChan
 
 export interface TabsContextProps {
   _activeItemKey?: number | string
-  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
   id?: string
 }
 
@@ -28,14 +28,14 @@ export const TabsContext = createContext({} as TabsContextProps)
 export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
   ({ children, activeItemKey, className, onChange }, ref) => {
     const id = useId()
-    const [_activeItemKey, setActiveKey] = useState(activeItemKey)
+    const [_activeItemKey, setActiveItemKey] = useState(activeItemKey)
 
     useEffect(() => {
       _activeItemKey && onChange && onChange(_activeItemKey)
     }, [_activeItemKey])
 
     return (
-      <TabsContext.Provider value={{ _activeItemKey, setActiveKey, id }}>
+      <TabsContext.Provider value={{ _activeItemKey, setActiveItemKey, id }}>
         <div className={classNames('tabs', className)} ref={ref}>
           {children}
         </div>
@@ -45,7 +45,7 @@ export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
 )
 
 CTabs.propTypes = {
-  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   children: PropTypes.node,
   className: PropTypes.string,
   onChange: PropTypes.func,