Allow wrapping `TabPanel` components

🚀 Feature request

🧱 Problem Statement / Justification

I’m using the Tabs components. If I want to wrap the TabPanel components in another component, the Tabs components break.

// Does not work
<Tabs>
  <TabList>
      <Tab>FIrst Tab</Tab>
      <Tab>Second Tab</Tab>
      <Tab>Third Tab</Tab>
  </TabList>
  <TabPanels>
      <div>
          <TabPanel>Tab panel 1</TabPanel>
      </div>
      <div>
          <TabPanel>Tab panel 2</TabPanel>
      </div>
      <div>
          <TabPanel>Tab panel 3</TabPanel>
      </div>
  </TabPanels>
</Tabs>

Interestingly, wrapping Tab components in custom components works just fine:

// Works just fine
<Tabs>
  <TabList>
    <div>
      <Tab>FIrst Tab</Tab>
    </div>
    <div>
      <Tab>Second Tab</Tab>
    </div>
    <div>
      <Tab>Third Tab</Tab>
    </div>
  </TabList>
  <TabPanels>
    <TabPanel>Tab panel 1</TabPanel>
    <TabPanel>Tab panel 2</TabPanel>
    <TabPanel>Tab panel 3</TabPanel>
  </TabPanels>
</Tabs>

✅ Proposed solution or API

The proposed solution is to remove the coupling between TabPanels and TabPanel components and don’t require the TabPanel component to be a direct child of the TabPanels components.

I’ve looked at the source code and figured out that while the TabList and Tab components use the “descendant context” to get the index in the Tab component, the TabPanels and TabPanel components use React.Children.map and React.cloneElement to pass the index onto the TabPanel component.

I believe that the issue could be solved by using the “descendant context” for the TabPanels and TabPanel components as well…

↩️ Alternatives

An alternative is to leave the necessity of TabPanel being a direct child of TabPanels as it is now.

📝 Additional Information

I could send a PR with the proposed changes if you’re interested in implementing this feature request.

[tomdohnal]

I still believe this could be both useful and quite straightforward to implement (happy to help with it myself) 🙂

[tomdohnal]

Generally creating custom TabPanel components does not work with this approach:

function FancyTabPanel({ children }) {
  return (
    <TabPanel>
      <Heading>This is a fancy tab panel</Heading>
      {children}
    </TabPanel>
  );
}

function App() {
  return (
    <Tabs>
      <TabList>
        <Tab>FIrst Tab</Tab>
        <Tab>Second Tab</Tab>
        <Tab>Third Tab</Tab>
      </TabList>
      <TabPanels>
        <FancyTabPanel>Tab panel 1</FancyTabPanel>
        <FancyTabPanel>Tab panel 2</FancyTabPanel>
        <FancyTabPanel>Tab panel 3</FancyTabPanel>
      </TabPanels>
    </Tabs>
  );
}

(full code on https://codesandbox.io/s/bold-resonance-7s2bx?file=/src/index.tsx)

You could actually solve this by passing on the props in the FancyTabPanel onto the TabPanel component like this:

function FancyTabPanel({ children, ...props }) {
  return (
    <TabPanel {...props}>
      <Heading>This is a fancy tab panel</Heading>
      {children}
    </TabPanel>
  );
}

But IMHO that’s too much coupling to how the things are wired up in Chakra UI under the hood…