[tabs] Add `Tabs.Panels` component with `value` state in `render` function?

[benface]

Feature request

Summary

I would like to have more control over how tab panels are rendered, and one way to achieve that would be a Tabs.Panels component that, like other components, would accept a render function that would get passed some state... however, unlike Tabs.Root and Tabs.List, that state would include the current value so that I can use something like Motion's AnimatePresence component to transition from the previous tab panel to the current one.

Examples in other libraries

Headless UI has a TabPanels component that has a selectedIndex render prop.

Motivation

Kind of answered in "Summary". Thank you!

[mj12albert]

however, unlike Tabs.Root and Tabs.List, that state would include the current value

@benface Would it help your use-case and avoid adding a new subcomponent if value was added to the state (the state arg of the render prop) of the existing Tabs subcomponents?

[benface]

Thank you for the quick response @mj12albert!

I'm not sure it would help, unless it was possible to add it to Tabs.Root itself, but even then, I'm not 100% sure. I'll try to better explain my problem.

I just made this CodeSandbox as a simple reproduction / test case. Notice that when you select a tab, there is an animation, but both the exiting and the entering contents are the same. I would expect the exiting contents to be the previously selected tab panel, and the entering one to be the newly selected one. It seems that by the time App re-renders with a new selectedTab, the Tabs.Panel components have already re-rendered, so Motion's AnimatePresence transitions from and to the same contents.

Now, I'm guessing that if you add value to Tabs.Root's render's state, it would execute that render function before the Tabs.Panel re-render and so it would animate properly in this case, but I am working on a styled TabSet component that exposes its own Tabs, Tab, Panels, and Panel parts. The Panels component renders the AnimatePresence and motion.div wrapping the children passed to it, so if value was simply passed to Tabs.Root's render function, I would need to pass it down to Panels via a context provider, and then I'm not sure it would re-render fast enough?

[mj12albert]

https://deploy-preview-1613--base-ui.netlify.app/experiments/tabs/motion

I've got some simple panel animations with motion working in #1613 so the motion AnimatePresence/slideshow demo should be achievable

Animating the indicator turns out to be tricker than the panel

[benface]

Wow @mj12albert, thank you so much... turns out all I had to add to my CodeSandbox example to make it work was keepMounted + a conditional hidden attribute: https://codesandbox.io/p/devbox/strange-chandrasekhar-forked-v3ds7m?workspaceId=ws_VCLs2BtBqfm4WA73jXMWhM. Completely disregard my misguided Tab.Panels proposal. :)

[benface]

Actually @mj12albert, it's a bit more complicated than that. If I want to make reusable styled MyTabs and MyTabPanel components, I don't want it to be the consumer's responsibility to pass the selected tab to MyTabPanel (or whether it's currently selected), just passing it to the root MyTabs should be enough. But I can't figure out a way to do that without creating my own context provider, as I've done here. I wonder if exposing Base UI's context somehow would prevent the need for that? Note that something strange is going on if I wrap AnimatePresence in a context provider (which you can test in my CodeSandbox by setting the renderContextProvider prop to "outsideAnimatePresence"; each MyTabPanel component is rendered twice and it breaks the transition, with the same visual result as my initial CodeSandbox.

[mj12albert]

Hey @benface I'm getting a 404 from the sandbox link: https://codesandbox.io/p/devbox/strange-chandrasekhar-fixed-forked-gnxqls?file=%2Fsrc%2FApp.tsx%3A58%2C40&workspaceId=ws_VCLs2BtBqfm4WA73jXMWhM
Maybe it's set to private?

[benface]

So sorry @mj12albert, I forgot that forked CodeSandbox'es don't inherit the original one's visibility. I just made all of them Public.

[mj12albert]

I don't want it to be the consumer's responsibility to pass the selected tab to MyTabPanel (or whether it's currently selected)

You mean having to always pass value and selectedValue around like this?

const MotionTab = React.forwardRef(function MotionTab(
  props: Tabs.Tab.Props & {
    selectedValue: Tabs.Tab.Props['value'];
  },
  forwardedRef: React.ForwardedRef<HTMLDivElement>,
) {
  const { value, selectedValue, children, ...otherProps } = props;
  return (
    <Tabs.Tab
      ref={forwardedRef}
      value={value}
      {...otherProps}
    >
      {children}
      {value === selectedValue ? (
        <Tabs.Indicator
          render={
            <motion.div
              layoutId="indicator"
              id="indicator"
              initial={false}
              transition={{
                layout: { duration: DURATION },
              }}
            />
          }
        />
      ) : null}
    </Tabs.Tab>
  );
});

selected isn't in the state of the render function of Panel, but it is in Tabs.Tab