fix: fix tab click

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).

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "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": {

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(
+            <Tabs>
+                <TabList aria-label="Multiple tablist example tabs">
+                    <Tab id="tab1" onClick={onClick}>
+                        Tab 1
+                    </Tab>
+                    <Tab id="tab2">Tab 2</Tab>
+                </TabList>
+                <TabPanel id="tab1">Content of tab 1</TabPanel>
+                <TabPanel id="tab2">Content of tab 2</TabPanel>
+            </Tabs>,
+        )
+        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(

src/tabs/tabs.tsx

@@ -92,7 +92,7 @@ interface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
 const Tab = React.forwardRef<HTMLButtonElement, TabProps>(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<HTMLButtonElement, TabProps>(function Tab(
     const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])
 
     return (
-        <BaseTab render={render} className={className} id={id} store={tabStore} ref={ref}>
+        <BaseTab
+            id={id}
+            ref={ref}
+            store={tabStore}
+            render={render}
+            className={className}
+            onClick={onClick}
+        >
             {children}
         </BaseTab>
     )