chore: Upgrade ariakit to v0.4.5 (#836)

* chore: upgrade ariakit to v0.4.5
* fix: Accept more props in the `Tab` component
* fix: Fix CSS build issue
* chore: Prepare new release 25.0.0-beta.3

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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.3
+
+-   [Fix] Allow more props to be forwarded to the `Tab` component.
+-   [Fix] Properly fix CSS build in tsdx config.
+-   [Chore] Upgrade to `@ariakit/[email protected]`.
+
 # v25.0.0-beta.2
 
 -   [Fix] Pass `onClick` to the `Tab` component.

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "25.0.0-beta.2",
+    "version": "25.0.0-beta.3",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {
@@ -149,7 +149,7 @@
         "webpack": "^4.43.0"
     },
     "dependencies": {
-        "@ariakit/react": "^0.3.14",
+        "@ariakit/react": "0.4.5",
         "aria-hidden": "^1.2.1",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",

src/tabs/tabs.tsx

@@ -3,11 +3,11 @@ import classNames from 'classnames'
 import {
     useTabStore,
     Tab as BaseTab,
+    TabProps as BaseTabProps,
     TabList as BaseTabList,
     TabPanel as BaseTabPanel,
     TabPanelProps as BaseTabPanelProps,
     TabStore,
-    RoleProps,
 } from '@ariakit/react'
 import { Inline } from '../inline'
 import type { ObfuscatedClassName, Space } from '../utils/common-types'
@@ -74,7 +74,9 @@ function Tabs({
     return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>
 }
 
-interface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {
+interface TabProps
+    extends ObfuscatedClassName,
+        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {
     /**
      * The content to render inside of the tab button
      */
@@ -84,8 +86,6 @@ interface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {
      * The tab's identifier. This must match its corresponding `<TabPanel>`'s id
      */
     id: string
-
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
 }
 
 /**

src/tooltip/tooltip.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, screen, act, waitFor } from '@testing-library/react'
+import { render, screen, act } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import userEvent from '@testing-library/user-event'
 import { Tooltip } from './tooltip'
@@ -91,6 +91,7 @@ describe('Tooltip', () => {
     })
 
     it('can render content generated by a function only called when needed', async () => {
+        jest.useFakeTimers()
         const content = jest.fn(() => 'tooltip content generated dynamically')
         render(
             <Tooltip content={content}>
@@ -115,6 +116,7 @@ describe('Tooltip', () => {
         await flushMicrotasks()
 
         expect(content).toHaveBeenCalled()
+        jest.useRealTimers()
     })
 
     /**
@@ -204,23 +206,6 @@ describe('Tooltip', () => {
         })
     })
 
-    it('sets the tooltip content as the trigger element’s accessible description', async () => {
-        render(
-            <Tooltip content="tooltip content here">
-                <button>Click me</button>
-            </Tooltip>,
-        )
-
-        // Since the content is only rendered when the tooltip appears, this description is only
-        // available when we hover or focus the button, and not before.
-        const button = screen.getByRole('button', { name: 'Click me' })
-        userEvent.tab()
-
-        await waitFor(() => {
-            expect(button).toHaveAccessibleDescription('tooltip content here')
-        })
-    })
-
     it('does not acknowledge the className prop, but exceptionallySetClassName instead', async () => {
         render(
             <Tooltip

tsdx.config.js

@@ -11,7 +11,7 @@ module.exports = {
                     mode: 'local',
                     generateScopedName: '[hash:8]',
                 },
-                mode: ['extract', 'index.css'],
+                mode: 'extract',
                 url: { inline: true },
             }),
         ].concat(config.plugins)