[Collapsible] Add Collapsible components and hooks

[mj12albert]

Closes #84

Docs: https://deploy-preview-481--base-ui.netlify.app/base-ui/react-collapsible/

Extra demos:

• Animated with framer-motion: https://deploy-preview-481--base-ui.netlify.app/experiments/collapsible-framer/
• Crude accordion using 3 Collapsibles + CSS transitions: https://deploy-preview-481--base-ui.netlify.app/experiments/collapsible-accordion/
• hidden="until-found": https://deploy-preview-481--base-ui.netlify.app/experiments/collapsible-hidden-until-found/

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

[mui-bot]

Netlify deploy preview

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

Generated by 🚫 dangerJS against 58810db

[michaldudak]

👍

[michaldudak]

I'm wondering if we need to do all this on our side. Have you considered applying the data-instant attribute and instructing users to disable all motion when it's present? (perhaps this could also solve the issue with transitions)

[mj12albert]

@michaldudak data-instant applies conditions that last for the lifetime of the component, which is different for the cases that are handled internally here, which only disables motion for one specific instance/occurrence of the open state changing:

• When the component is initially open, on first mount/load, motion is disabled so it's just appears fully open, but animations run normally after that
• When the component uses hidden="until-found" and is opened by in-page-search, it will open instantly, but animations run normally afterwards

I don't think these behaviors should require users to opt-in to it (or be override-able) for animated Collapsibles as it obviously results in poorer UX

Also this keeps the component easier to style, without having to add another animation state in addition to the 4 standard ones!

(I've also added a comment in the code about this here)

[mj12albert]

@colmtuite It's ready for you to have one last look before we merge it ~