feat: sheet component

[pdanpdan]

ref #4377

[saadeghi]

Do you think we can use scroll-snap to make it possible to close the sheet with swiping?
Because swiping seems to be a core functionality of sheets in mobile UI. It would be nice when a sheet is open, we can close it with a swipe.

[pdanpdan]

I'll check.
But I think in that case it should be swipe to open/close

[pdanpdan]

:) you mean something like this?
v1: https://play.tailwindcss.com/36XBGchK22?layout=preview
v2: https://play.tailwindcss.com/xmeTtgs0MS?layout=preview (toggle on click and drag/scroll to open/close)
v3: https://play.tailwindcss.com/mUWpLGqnks?layout=preview (make it somehow work on ios)
v4: https://play.tailwindcss.com/m9sZOe9Ntc?layout=preview (ios needs a double tab to be able to drag)
v5: https://play.tailwindcss.com/5UekMaeVHF?layout=preview (another version for ios)
v6: https://play.tailwindcss.com/R43UaWtcS8?layout=preview (refactor to add suggestions in #4434 (comment))
v7: https://play.tailwindcss.com/SSyTiWX4jW?layout=preview (small refinement for v6 - fix half-open on top and remove sheet-3 for horizontal variants) - codepen link to test because play.tailwind does not work with links
v8: https://play.tailwindcss.com/Xv1qmEyQhi?layout=preview (refactor - drag on mobile, click on desktop, no anchors)
v9: https://play.tailwindcss.com/NoQ2lnq4uV?layout=preview (small improvement - allow specifying the half size and max full size) (and a test with multiple sheets on the same size: https://play.tailwindcss.com/boB2Nejm1o?layout=preview)

It would not work with popover because I don't think we can trigger it on scroll (and it cannot be popover on click and non-popover on drag).

And I have to adjust a little the position of the checkbox with scroll trigger (now it changes based on checked status).
Dropped the checkbox approach and moved to links.

But overall it looks fun.

[saadeghi]

Such great process. Thank you @pdanpdan for the experiments 🫡

I think "bottom sheet" must be different from what we currently have with daisyUI modal and what makes it different is mainly the swipe behavior. That's why I suggested scroll-snap.

I think https://silkhq.com has a great behavior. It's JS of course, I hope we can do a similar UI with CSS scroll-snap.
Differences:

1. Sheet can be closed by scrolling anywhere, not just the handle.
   -- For scrollable content maybe we can use overscroll-behavior
2. It has a backdrop when sheet is open. Might be possible with CSS animation-timeline (Firefox support coming soon)
3. Good-to-have feature: Sheet can be expanded (example: https://silkhq.com/##example-sheet-with-detent). This behavior can be seen in Google Maps mobile app as well. Might be possible with scroll-snap for 3 divs, instead of 2 divs.

I would like to experiment on this soon.

[pdanpdan]

I think I got it working: https://play.tailwindcss.com/sKuEIwutgv?layout=preview https://play.tailwindcss.com/Xv1qmEyQhi?layout=preview I'll keep the history in the post above.
On ios it needs a short tap before dragging - but it works.

[saadeghi]

Amazing! Well done @pdanpdan 🫡

On ios it needs a short tap

Yeah that's a little bit unpredictable…

[pdanpdan]

It's ios, unpredictable would be to work as in specification.

[saadeghi]

Why does it need a tap? Is there something not supported in iOS Safari or is it a bug?

[pdanpdan]

It uses scroll-snap - so there is a scrollable container over the screen.
But it must allow interaction with what is below - so it has pointer-events: none
And apple decided that it should not allow scrolling an element with pointer-events: none
So you have to change it before scrolling
But apple decided that it does not matter, it has to be changed before interaction :)