[tabs] Modernize implementation

[mj12albert]

Summary

• A custom metadata object can be passed into Composite components and hooks

• Replace useCompound with Composite

• Rename direction prop to dir not yet, need to discuss the overall approach further [core] Rename direction prop to dir #831

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-751--base-ui.netlify.app/

Generated by 🚫 dangerJS against ab269fd

[mj12albert]

@atomiks Why is stopPropagation() needed here, and is it ever ok to force propagate it? This breaks a test

Given this structure:

<Tabs.Root onKeyDown={handleKeyDown}>
  <Tabs.List>
    <Tabs.Tab value={0} />
    <Tabs.Tab value={1} />
  </Tabs.List>
  {/* tab panels */}
</Tabs.Root>

Tabs.List is a CompositeRoot, so on arrow keys, the event doesn't propagate and handleKeyDown doesn't get called

[atomiks]

I'm not certain on that. It may not be necessary in most cases

[mj12albert]

OK ~ let's let it propagate by default, but I've put a param around it just in case:

if (stopEventPropagation) {
  event.stopPropagation();
}

[michaldudak]

There's now a mismatch in naming: "highlighted" and "activeIndex". It should be either "active" / "activeIndex" or "hightlighted" / "highlightedIndex". I like "active" as it's shorter, even though it doesn't match the HTML/CSS meaning of active (an in :active). Alternatively, we could call it "focused"

[mj12albert]

This originally came up here to match the Menu components ~ I'll change the names to match highlighted

[michaldudak]

AFAIR the idea was to have a custom attribute on the first and last tabs to be able to style them differently, but this isn't really needed now. We can add this in the future if there's a community interest.

[michaldudak]

You can remove the useList and useCompound hooks, as they are no longer used anywhere.