[Collapse] Support anchoring content to the bottom/right

[Janpot]

Summary

Would like to be able to anchor the collapsed content to the bottom of to container. The effect can be achieved by adding following styles to the Collapse but it would be nice to have a prop that can handle this:

sx={{
  display: "flex",
  flexDirection: "column-reverse",
}}

Perhaps the direction prop can even be expanded to account for this use-case. If not accepted, perhaps this use-case could be added to the docs?

Examples

Here's a codesandbox that displays the desired behavior: https://codesandbox.io/p/sandbox/lucid-heyrovsky-wrjrnp?file=%2Fsrc%2FDemo.tsx%3A47%2C45

Screen.Recording.2024-08-21.at.17.08.29.mov

Motivation

I struggled a bit with this when building Toolpad component catalog, which feels better when it looks like the drawer is pulled from under the left edge, rather than it being already in place and revealed gradually. Now I'm running into it again with another component.

Screen.Recording.2024-08-21.at.16.59.35.mov

vs.

Screen.Recording.2024-08-21.at.17.02.54.mov

Search keywords: collapse reverse

[siriwatknp]

Perhaps the direction prop can even be expanded to account for this use-case. If not accepted, perhaps this use-case could be added to the docs?

That's a good start. I'll do it after the stable release.