Feature request: Improvements to Sheet component

[multiwebinc]

Using inspiration from https://mui.com/material-ui/react-drawer/, I suggest altering the Sheet component:

• Add a disableBackdrop: boolean attribute to disable the blurred backdrop overlay as it may not always be desirable in some cases.
• Add a variant: 'persistent' | 'temporary' attribute. Persistent sheets would force the other content to change size and adapt to the smaller viewport. Temporary would be like the current sheet, where it appears above the other content. MUI also has a "permanent" drawer, which, as far as I can tell, is basically the same as a "persistent" one, but without a close icon.
• Add a swipeable: boolean whether it can be swiped open/closed on touch devices (I'm assuming this would require an external library, so it would probably be better to use a separate component for this).
• Add a transition animation when hiding, not just when showing.
• Allow sheet to scroll if the content is greater than the container height.
• I'm also not convinced that using percentages for the default sizes is particularly useful since they will either be too wide at large resolutions or too small at lower resolutions. Wouldn't it make more sense to use static values? For example, assuming it is docked to the left or right side: xs: 'w-10', sm: 'w-16', md: 'w-32', lg: 'w-64', xl: 'w-96'. And if you want to include percentages as well, '1/4': 'w-1/4', '1/3': 'w-1/3', '1/2': 'w-1/2', '5/6': 'w-5/6'. Of course, sizes full and content are definitely useful.

Let me know if you are interested in any of these and I might be able to work on a PR.

[shadcn]

@multiwebinc Way ahead of ya! This is exactly what I'm working on right now :)

[multiwebinc]

@shadcn Awesome! Great minds think alike.

[cabello]

I considered posting on #16 but I think it fits better here. The sheet component has unexpected behaviour on mobile browsers when side is set to bottom due to Safari iOS implementing position: fixed in a way that is not device-fixed.

This sheet has an input inside the content that gets auto focused, and it's unexpectedly hidden by the keyboard:

If you click "Done" the keyboard goes away and you can see the sheet content including the footer, when you focus on the input, you can now edit it but you miss a good chunk of the footer:

The missing footer chunk changes height depending on where you click it so it cannot be easily fixed with some conservative padding bottom.

After finding this issue I ventured into looking at https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport

I noticed the issue was less likely to happen when using other sides.

For now for me because I am building a prototype I opted to disable the auto-focus, so the app is a bit more usable:

<SheetPrimitive.Content
      onOpenAutoFocus={event => {
        event.preventDefault()
      }}

Ideally though I would like my bottom sheet to:

• Always be visible (keyboard on/off)
• To shrink based on the height available
• To be scrollable if larger than the height available for the sheet
• To never miss footer or header sections due to small screen area

[studiodamiro]

variable blur intensity would be nice.

[edgarasben]

Would be great if more content was scrollable. What's the workaround for now?

[zohaibakber]

@edgarasben you can add overflow-y-scroll to SheetContent if you are using tailwind

[nstokoe]

Any updates on the original request?

[SaadBazaz]

Would love to see: disableBackdrop backgroundInteractable (false by default) or disableScroll (true by default)

Really need this in something I'm building.

[morganfeeney]

Here's one of those cases where the backdrop being blurred is not desirable:

Users need to see the changes in real-time, without closing the drawer.

In this particular case, I also potentially wouldn't want a background colour either, not your typical use-case, but worth considering.

[MilanObrenovic]

@multiwebinc Way ahead of ya! This is exactly what I'm working on right now :)

what happened to this feature? i'd also like to have the option to swipe off the navigation menu

[MilanObrenovic]

@edgarasben you can add overflow-y-scroll to SheetContent if you are using tailwind

but then the drawer swiping doesnt work anymore on mobile. it also makes it glitchy (im talking about doing this in a Drawer component not Sheet)

[MilanObrenovic]

@edgarasben you can add overflow-y-scroll to SheetContent if you are using tailwind

but then the swiping of the sheet doesnt work if you scroll...

[jjrh92]

As mentioned in https://github.com/shadcn-ui/ui/pull/1814

I've removed the blur on the background by adding modal={false} on the Sheet componente -> <Sheet modal={false}>

[blueriver212]

I managed to work around this by wrapping my div inputs in the sheet into a ScrollArea (also from ShadCN), maxed it to the parent div and it worked pretty well:

<ScrollArea className="w-full h-full rounded-md border p-4">

[hsavit1]

Any updates on the persistent sheet?

[hsavit1]

@multiwebinc Way ahead of ya! This is exactly what I'm working on right now :)

How's this coming along?

[facosta0787]

Same question here, do you have any updates on the persistent sheet? is it going to be implemented or was it already? Thanks!