feat(eds-core-react): call onChange with provided value if present

[FredrikMWold]

Before:
The onChange function in the Tabs component always received the selected tab’s index.

After:
onChange now receives the tab’s value prop if one is provided. If no value is set, it will fall back to the tab’s index.

Why

Previously, managing tab state often meant:

• Using “magic numbers” tied to tab order
• Creating a lookup table to map indexes to meaningful values

[Copilot]

Pull Request Overview

This PR enhances the Tabs component's onChange callback to receive the tab's value prop when available, instead of always receiving the tab's index. This change makes tab management more semantic by allowing developers to work with meaningful values rather than relying on index-based lookups.

Key Changes

• Modified onChange callback signature to accept number | string instead of just number
• Updated tab click handler to pass the tab's value when available, falling back to index
• Added comprehensive test coverage for the new behavior

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/eds-core-react/src/components/Tabs/Tabs.tsx	Updated onChange prop type signature to accept number | string
packages/eds-core-react/src/components/Tabs/Tabs.context.ts	Updated context handleChange type to match new signature
packages/eds-core-react/src/components/Tabs/TabList.tsx	Modified click handler to pass tab value when available, otherwise index
packages/eds-core-react/src/components/Tabs/Tabs.test.tsx	Added test to verify onChange receives value or index appropriately

[Copilot]

The logic uses controlledActive which represents the currently active tab, not the clicked tab's value. This will always pass the current active tab instead of the clicked tab's value. Should use the individual tab's value prop or $index for the clicked tab.

Suggested change

	controlledActive !== undefined ? controlledActive : $index,
	childProps.value !== undefined ? childProps.value : $index,

[torleifhalseth]

The naming of controlledActive could be confusing. I believe controlledActive represent the individual tab's value and not the current active tab. Do you agree @FredrikMWold ?

[FredrikMWold]

Yes, i agree that controlledActive sounds like the currently active tab and not the value of the clicked tab.
The most straight forward name would be value or tabValue

Or to rename childProps to tabProps and just use tabProps.value

[torleifhalseth]

I was wondering if it’s a common practice to have a value on a Tab? In my experience, it’s more common when it comes to inputs.

[FredrikMWold]

@torleifhalseth

https://www.radix-ui.com/primitives/docs/components/tabs
https://chakra-ui.com/docs/components/tabs
https://mui.com/material-ui/react-tabs/

Its not uncommen that tabs have a value
Add a few examples. There are some where they have an id, but most use value. Changing it to id would be a breaking change to the functionality of the component. Where as this is just a breaking change to the types.

[torleifhalseth]

Great. Thank you for the examples, @FredrikMWold. I think this is a great enhancement to the component.

I would prefer one solution to control the active tab, but it is also nice to not break existing solutions ⚖️ Maybe we can simplify another day ✨

[torleifhalseth]

LGTM 👍 Thanks for the contribution @FredrikMWold!

[AndreasPresthammer]

This was a breaking API change. Would be great if this was marked as such in the release note.