@oslokommune/punkt-react 13.7.0 → 13.8.1

package/src/components/tabs/Tabs.tsx

@@ -1,11 +1,38 @@
 'use client'
 
-import React, { forwardRef, Ref, useRef, useEffect, KeyboardEvent, Fragment } from 'react'
-import { PktIcon } from '../icon/Icon'
-import { PktTag } from '../tag/Tag'
+import {
+  forwardRef,
+  Ref,
+  useRef,
+  useEffect,
+  KeyboardEvent,
+  ReactNode,
+  Children,
+  createContext,
+  useContext,
+} from 'react'
+import { PktTabItem } from './TabItem'
 
 export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
 
+// Context for passing tab navigation logic to children
+interface ITabsContext {
+  arrowNav: boolean
+  registerTabRef: (index: number, el: HTMLAnchorElement | HTMLButtonElement | null) => void
+  handleKeyPress: (index: number, event: KeyboardEvent) => void
+  selectTab: (index: number) => void
+}
+
+const TabsContext = createContext<ITabsContext | null>(null)
+
+export const useTabsContext = () => {
+  const context = useContext(TabsContext)
+  if (!context) {
+    throw new Error('TabItem must be used within a Tabs component')
+  }
+  return context
+}
+
 export interface IPktTab {
   text: string
   href?: string
@@ -21,88 +48,82 @@ export interface IPktTab {
 
 export interface IPktTabs {
   arrowNav?: boolean
-  tabs: IPktTab[]
+  disableArrowNav?: boolean
+  tabs?: IPktTab[]
   onTabSelected?: (index: number) => void
+  children?: ReactNode
 }
 
 export const PktTabs = forwardRef(
-  ({ arrowNav = true, tabs, onTabSelected }: IPktTabs, ref: Ref<HTMLDivElement>): JSX.Element => {
+  (
+    { arrowNav = true, disableArrowNav = false, tabs, onTabSelected, children }: IPktTabs,
+    ref: Ref<HTMLDivElement>,
+  ): JSX.Element => {
     const tabRefs = useRef<Array<HTMLAnchorElement | HTMLButtonElement | null>>([])
+
+    const useArrowNav = arrowNav && !disableArrowNav
+
+    // Determine if we're using children or tabs array
+    const hasChildren = children && Children.count(children) > 0
+    const tabCount = hasChildren ? Children.count(children) : tabs?.length || 0
+
     useEffect(() => {
-      tabRefs.current = tabRefs.current.slice(0, tabs.length)
-    }, [tabs])
-    const selectTab = (index: number, tab: IPktTab): void => {
-      if (tab.action) tab.action(index)
+      tabRefs.current = tabRefs.current.slice(0, tabCount)
+    }, [tabCount])
+
+    const selectTab = (index: number): void => {
+      const tab = tabs?.[index]
+      if (tab?.action) {
+        tab.action(index)
+      }
       if (onTabSelected) onTabSelected(index)
     }
+
     const handleKeyPress = (index: number, event: KeyboardEvent) => {
-      if (arrowNav) {
+      if (useArrowNav) {
         if (event.code === 'ArrowLeft' && index !== 0) {
           tabRefs.current[index - 1]?.focus()
         }
-        if (event.code === 'ArrowRight' && index < tabs.length - 1) {
+        if (event.code === 'ArrowRight' && index < tabCount - 1) {
           tabRefs.current[index + 1]?.focus()
         }
         if (event.code === 'ArrowDown' || event.code === 'Space') {
-          selectTab(index, tabs[index])
+          selectTab(index)
         }
       }
     }
+
+    const registerTabRef = (index: number, el: HTMLAnchorElement | HTMLButtonElement | null) => {
+      tabRefs.current[index] = el
+    }
+
+    // If tabs as prop instead of children
+    const tabItems = tabs?.map((tab, index) => (
+      <PktTabItem
+        key={index}
+        active={tab.active}
+        href={tab.href}
+        onClick={() => selectTab(index)}
+        icon={tab.icon}
+        controls={tab.controls}
+        tag={tab.tag?.text}
+        tagSkin={tab.tag?.skin}
+        index={index}
+      >
+        {tab.text}
+      </PktTabItem>
+    ))
+
     return (
-      <div className="pkt-tabs" ref={ref}>
-        <div className="pkt-tabs__list" role={arrowNav ? 'tablist' : 'navigation'}>
-          {tabs.map((tab, index) => (
-            <Fragment key={index}>
-              {tab.href ? (
-                <a
-                  aria-selected={!!tab.active}
-                  role={arrowNav ? 'tab' : undefined}
-                  href={tab.href}
-                  aria-controls={tab.controls}
-                  className={`pkt-tabs__link ${tab.active ? 'active' : ''}`}
-                  onKeyUp={(event) => handleKeyPress(index, event)}
-                  onClick={() => selectTab(index, tab)}
-                  tabIndex={tab.active || !arrowNav ? undefined : -1}
-                  ref={(el) => {
-                    tabRefs.current[index] = el
-                  }}
-                >
-                  {tab.icon && <PktIcon name={tab.icon} className="pkt-icon--small" />}
-                  {tab.text}
-                  {tab.tag && (
-                    <PktTag skin={tab.tag.skin} size="small">
-                      {tab.tag.text}
-                    </PktTag>
-                  )}
-                </a>
-              ) : (
-                <button
-                  aria-selected={!!tab.active}
-                  role={arrowNav ? 'tab' : undefined}
-                  type="button"
-                  aria-controls={tab.controls}
-                  className={`pkt-tabs__button pkt-link-button ${tab.active ? 'active' : ''}`}
-                  key={'b-' + index}
-                  onKeyUp={(event) => handleKeyPress(index, event)}
-                  onClick={() => selectTab(index, tab)}
-                  tabIndex={tab.active || !arrowNav ? undefined : -1}
-                  ref={(el) => {
-                    tabRefs.current[index] = el
-                  }}
-                >
-                  {tab.icon && <PktIcon name={tab.icon} className="pkt-icon--small" />}
-                  {tab.text}
-                  {tab.tag && (
-                    <PktTag skin={tab.tag.skin} size="small">
-                      {tab.tag.text}
-                    </PktTag>
-                  )}
-                </button>
-              )}
-            </Fragment>
-          ))}
+      <TabsContext.Provider value={{ arrowNav: useArrowNav, registerTabRef, handleKeyPress, selectTab }}>
+        <div className="pkt-tabs" ref={ref}>
+          <div className="pkt-tabs__list" role={useArrowNav ? 'tablist' : 'navigation'}>
+            {children || tabItems}
+          </div>
         </div>
-      </div>
+      </TabsContext.Provider>
     )
   },
 )
+
+export { PktTabItem } from './TabItem'