Tabs: Expose easier way to access current tab id.

🚀 Feature request (I think)

Motivation

Using the new tabs components, I still found myself needing to know what the currently selected tab id was. I know under the hood these components are using the Reakit tabs, and that does offer access to that via the useTabState hook, but this isn’t available (I don’t think) when using the Reactist tabs.

Example

What I’ve ended up having to do is work around it like this

const [selectedTab, setSelectedTab] = useState<string>('book-now')
...

function setTabId(selectedId?: string | null) {
    if (selectedId) {
        setSelectedTab(selectedId)
    }
}
...
<Tabs>
    <TabList aria-hidden={true} space="medium">
        <Tab id="book-now">Now booking</Tab>
        <Tab id="coming-soon">Coming soon</Tab>
    </TabList>
    <TabAwareSlot>{({ selectedId }) => <>{setTabId(selectedId)}</>}</TabAwareSlot>
    <TabPanel id="book-now">
        <FilmViewer />
    </TabPanel>

    <TabPanel render="lazy" id="coming-soon">
        <ComingSoon />
    </TabPanel>
</Tabs>

Having the TabAwareSlot is fine for if you’re wanting to display something in the UI, but it’s not ideal if you just need the tab id.

Possible implementations

I think maybe exposing the useTabState() hook could help remedy this, or a Reactist variant of this hook.

[frankieyan]

@scottlovegrove FYI, you can now use the tabs as a controlled component using the selectedId and onSelectedIdChange props. This was introduced with https://github.com/Doist/reactist/pull/662

[scottlovegrove]

So yes, we could/should explore a way to make the Tabs component be controlled (). That is, to allow the consumer of that component to own the selected tab state management.

That works for me 👍🏻