feat(eds-core-react): onChange now receives the tab’s value (if set) instead of always its index, with index used as a fallback (#3893)

Author: FredrikMWold

packages/eds-core-react/src/components/Tabs/TabList.tsx

@@ -120,7 +120,10 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabsList(
         'aria-controls': `${tabsId}-panel-${$index + 1}`,
         active: isActive,
         $index,
-        onClick: () => handleChange($index),
+        onClick: () =>
+          handleChange(
+            controlledActive !== undefined ? controlledActive : $index,
+          ),
         ref: tabRef,
       })
     }) ?? []

packages/eds-core-react/src/components/Tabs/Tabs.context.ts

@@ -4,7 +4,7 @@ import { Variants } from './Tabs.types'
 type State = {
   variant: Variants
   scrollable: boolean
-  handleChange: (index: number) => void
+  handleChange: (value: number | string) => void
   activeTab: number | string
   tabsId: string
   tabsFocused: boolean

packages/eds-core-react/src/components/Tabs/Tabs.test.tsx

@@ -205,4 +205,24 @@ describe('Tabs', () => {
     expect(screen.getByTestId(tablist)).toBeDefined()
     expect(screen.getByTestId(tabpanels)).toBeDefined()
   })
+  it('Calls onChange with value when provided, otherwise index', () => {
+    const handleChange = jest.fn()
+    render(
+      <Tabs activeTab="overview" onChange={handleChange}>
+        <Tabs.List>
+          <Tabs.Tab value="overview">Overview</Tabs.Tab>
+          <Tabs.Tab value="details">Details</Tabs.Tab>
+          <Tabs.Tab>Plain</Tabs.Tab>
+        </Tabs.List>
+      </Tabs>,
+    )
+
+    fireEvent.click(screen.getByText('Details'))
+    expect(handleChange).toHaveBeenLastCalledWith('details')
+
+    fireEvent.click(screen.getByText('Plain'))
+    expect(handleChange).toHaveBeenLastCalledWith(2)
+
+    expect(handleChange).toHaveBeenCalledTimes(2)
+  })
 })

packages/eds-core-react/src/components/Tabs/Tabs.tsx

@@ -17,7 +17,7 @@ export type TabsProps = {
   /** The index of the active tab OR a string matching the value prop on the active tab */
   activeTab?: number | string
   /** The callback function for selecting a tab */
-  onChange?: (index: number) => void
+  onChange?: (value: number | string) => void
   /** Sets the width of the tabs. Tabs can have a maximum width of 360px */
   variant?: Variants
   /** adds scrollbar if tabs overflow on non-touch devices */