Stacked but synced bottom sheets

[Max-Leopold]

Hey there 👋

First of all, great work on this library. It's really nice to use!

The issue I'm describing is similar to #140 but I'm proposing to add stacked bottom sheets as a first class citizen because the library currently doesn't expose enough information to properly stack bottom sheets (not dismiss one and slide in another one!). A similar feature can for example be found in this bottom sheets library for AppKit.

I've played around with it a bit in the last days and one of the features I dearly miss is the ability to have stacked but synced bottom sheets. What do I mean by this? Have n stacked bottom sheets but have the position and translation synced to the top bottom sheet instead of seperated.

I think it's best explained as a video:
The three interesting scenarios demonstrated by Apple Maps

1. The top bottom sheet gets dismissed with a greater height than the bottom sheet underneath it

RPReplay_Final1693619361.mov

3. The top bottom sheet gets dismissed with a smaller height than the bottom sheet underneath it

RPReplay_Final1693619420.mov

4. The top bottom sheet gets dismissed at the same height as the bottom sheet underneat it

RPReplay_Final1693619373.mov

As you can see there are two bottom sheets that are stacked:

1. The "search bottom sheet"
2. The "pin bottom sheet"

The search bottom sheet is visible and has it's own position. The pin bottom sheet then overlays the search bottom sheet and now the search bottom sheet sticks to the movement of the pin bottom sheet. As soon as the pin bottom sheet is removed, the search bottom sheet return to it's original position from the position where the overlaying bottom sheet was dismissed. This only happens if the

I hacked a bit on the library code and build a workaround that (kind of) works for two stacked and connected bottomsheets. The approach I chose was to not only pass the bottomSheetPosition as a Binding into .bottomSheet, but also make the translation field in BottomSheetView a @Binding. This way you can programatically control both the position and the translation for a certain bottom sheet and therefore sync it to another sheet.

My hacky workaround for anyone interested

struct StackedBottomSheetView: View {
    @State var secondBottomSheetPosition: BottomSheetPosition = .relative(0.4)
    
    @State var firstBottomSheetPosition: BottomSheetPosition = .relative(0.4)
    
    @State var firstBottomSheetTranslation: CGFloat = 0
    @State var secondBottomSheetTranslation: CGFloat = 0

    var body: some View {
        let _firstBottomSheetPosition = Binding(get: {
            self.secondBottomSheetPosition == .hidden ? self.firstBottomSheetPosition : self.secondBottomSheetPosition
        }, set: {
            self.firstBottomSheetPosition = $0
        })
        
        let _firstBottomSheetTranslation = Binding(get: {
            self.secondBottomSheetPosition == .hidden ? self.firstBottomSheetTranslation :
                self.secondBottomSheetTranslation
        }, set: {
            self.firstBottomSheetTranslation = $0
        })
        
        return EmptyView()
            // First Bottom Sheet
            .bottomSheet(
                bottomSheetPosition: _firstBottomSheetPosition,
                switchablePositions: [
                    .relativeBottom(0.125),
                    .relative(0.4),
                    .relativeTop(0.9)
                ], translation: _firstBottomSheetTranslation,
                headerContent: {
                    Text("Header 1")
                },
                mainContent: {
                    Text("Content 1")
                }
            )
            // Second Bottom Sheet
            .bottomSheet(
                bottomSheetPosition: self.$secondBottomSheetPosition,
                switchablePositions: [
                     .relativeBottom(0.125),
                     .relative(0.4),
                     .relativeTop(0.9)
                 ],
                translation: self.$secondBottomSheetTranslation,
                headerContent: {
                    Text("Header 2")
                },
                mainContent: {
                    Text("Content 2")
                }
            )
            .showCloseButton()
    }
}

The obvious shortcoming is that this doesn't really scale. Adding 3 or more stacked bottom sheets does make the custom bindings more and more complex. Also it just generally isn't very flexible.
Therefore, I think it would be great to have native support for stackable but synced bottom sheets. I'm happt to help implementing this but I've only started working with Swift and SwiftUI checks calendar 4 days ago so I'm far away from an expert on the subject.
Let me know what you think!