[accordion] New Accordion components and hooks

[mj12albert]

Closes #25
Closes #627
Closes #702

Builds on top of:

• [Collapsible] Add Collapsible components and hooks #481
• [RadioGroup] Create new RadioGroup component #487

Preview

👉 https://deploy-preview-577--base-ui.netlify.app/components/react-accordion

Summary

Accordion is built using Collapsible, some changes were made to Collapsible while working on this:

• useCollapsibleTrigger (and Collapsible/AccordionTrigger) now uses useButton
• Collapsible.Content is now renamed to Collapsible.Panel
• perf improvements: reduced the use of window.getComputedStyle to an absolute minimum, merged the internal states into one
• style hooks follows the latest convention: [data-open] on the panel, and [data-panel-open] on the trigger

Accordion features

• orientation: 'vertical' | 'horizontal': sets a data attr and navigates focus between triggers with ArrowRight/Left instead of ArrowDown/Up
• Collapsible.Content now exposes the --collapsible-content-width var to support horizontal orientation
• direction: 'ltr' | 'rtl': sets the dir attr like other components and reverses ArrowRight & ArrowLeft when orientation === 'horizontal'
• openMultiple: boolean: default true, controls whether multiple sections can be open at the same time, not expected to change during the lifetime of the component
• disabled can be set on the Root, Section, or Trigger
• hidden="until-found" can be set on the Root or a Panel

Extra demos

• Animations + hidden="until-found" https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-animations
• Horizontal LTR + RTL https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-horizontal

[mui-bot]

Netlify deploy preview

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

Generated by 🚫 dangerJS against e1134df

[atomiks]

Should be placed outside the component. I don't think data-disabled needs a custom style hook as this should work by default?

[mj12albert]

@atomiks Moved - by default disabled becomes data-disabled="true" instead of just data-disabled which seems a bit better, maybe the getStyleHookProps util could be updated to handle this universally?

[michaldudak]

I'm ok with just data-disabled and whatever we choose, we should apply to all components. So getStyleHookProps should handle it.

[mj12albert]

2c8327e
Since we already don't render any data attr when the value is false, I think we could change all data-attr='true' to just data-attr (e.g. data-readonly, data-required...)

[michaldudak]

I wonder if openPanels wouldn't make more sense than value (and now that I think of it, I'd rename Tabs's value as well).

[mj12albert]

I agree the API for Tabs and Accordion should be as similar as possible, wonder what @vladmoroz and @colmtuite think?
The API would be openPanels/defaultOpenPanels? and onOpenPanelChange?

[vladmoroz]

@michaldudak what would value become on the item itself? E.g. here <Accordion.Item value="1">

[michaldudak]

value on items still makes sense to me.