detent: "content-height" dynamic content animation

[alexkates]

When using detent: "content-height" and dynamically adding/removing elements from the Sheet.Content, the Sheet grows or shrinks to the height of the content as expected.

However, it'd be great if the growing/shrinking was animated with a smoother transition.

This can be seen by using https://temzasse.github.io/react-modal-sheet/#/content-height. I've also attached a video.

https://github.com/user-attachments/assets/4f1ce369-eab6-4a0f-bd29-6e00ff9f84eb

[alexkates]

I think if the max-height was set to a value then I could add a max-height transition myself.

[Temzasse]

Hi @alexkates 👋🏻

This is already possible to without any changes to the react-modal-sheet library by adding layout prop to the Sheet.Container and layout="position" to the Sheet.Content component.

I've updated the content height example to smoothly animate the layout change. The updated version is live so you can test it here: https://temzasse.github.io/react-modal-sheet/#/content-height