diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14d32a772..54201aa0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
+# v25.0.0-beta.2
+
+- [Fix] Pass `onClick` to the `Tab` component.
+
# v25.0.0-beta.1
- [BREAKING] Use an explicit `render` prop for composition, instead of the `as` prop (in the menu, modal, tabs, toasts and tooltip components).
diff --git a/package-lock.json b/package-lock.json
index 8a68baea3..430b2f30f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@doist/reactist",
- "version": "25.0.0-beta.1",
+ "version": "25.0.0-beta.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@doist/reactist",
- "version": "25.0.0-beta.1",
+ "version": "25.0.0-beta.2",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
diff --git a/package.json b/package.json
index d69f6c1b1..2ed0a2f78 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"email": "henning@doist.com",
"url": "http://doist.com"
},
- "version": "25.0.0-beta.1",
+ "version": "25.0.0-beta.2",
"license": "MIT",
"homepage": "https://github.com/Doist/reactist#readme",
"repository": {
diff --git a/src/tabs/tabs.test.tsx b/src/tabs/tabs.test.tsx
index d2865e63c..d043ead19 100644
--- a/src/tabs/tabs.test.tsx
+++ b/src/tabs/tabs.test.tsx
@@ -251,6 +251,25 @@ describe('Tabs', () => {
expect(screen.getByText('Content of tab 2')).toBeVisible()
})
+ it('allows to subscribe to the tab click event', () => {
+ const onClick = jest.fn()
+ render(
+
+
+
+ Tab 1
+
+ Tab 2
+
+ Content of tab 1
+ Content of tab 2
+ ,
+ )
+ expect(onClick).not.toHaveBeenCalled()
+ userEvent.click(screen.getByRole('tab', { name: 'Tab 1' }))
+ expect(onClick).toHaveBeenCalledTimes(1)
+ })
+
describe('a11y', () => {
it('renders with no a11y violations', async () => {
const { container } = render(
diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
index 8ab2dc8e2..617977fb5 100644
--- a/src/tabs/tabs.tsx
+++ b/src/tabs/tabs.tsx
@@ -92,7 +92,7 @@ interface TabProps extends ObfuscatedClassName, Pick {
* Represents the individual tab elements within the group. Each `` must have a corresponding `` component.
*/
const Tab = React.forwardRef(function Tab(
- { children, id, exceptionallySetClassName, render },
+ { children, id, exceptionallySetClassName, render, onClick },
ref,
): React.ReactElement | null {
const tabContextValue = React.useContext(TabsContext)
@@ -102,7 +102,14 @@ const Tab = React.forwardRef(function Tab(
const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])
return (
-
+
{children}
)