Allow nested sheets without boilerplate (#5660)

Co-authored-by: Hailey <me@haileyok.com>

1 files changed, 40 insertions, 0 deletions

diff --git a/modules/bottom-sheet/src/BottomSheetPortal.tsx b/modules/bottom-sheet/src/BottomSheetPortal.tsx
new file mode 100644
index 000000000..da14cfa77
--- /dev/null
+++ b/modules/bottom-sheet/src/BottomSheetPortal.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+import {createPortalGroup_INTERNAL} from './lib/Portal'
+
+type PortalContext = React.ElementType<{children: React.ReactNode}>
+
+const Context = React.createContext({} as PortalContext)
+
+export const useBottomSheetPortal_INTERNAL = () => React.useContext(Context)
+
+export function BottomSheetPortalProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const portal = React.useMemo(() => {
+    return createPortalGroup_INTERNAL()
+  }, [])
+
+  return (
+    <Context.Provider value={portal.Portal}>
+      <portal.Provider>
+        {children}
+        <portal.Outlet />
+      </portal.Provider>
+    </Context.Provider>
+  )
+}
+
+const defaultPortal = createPortalGroup_INTERNAL()
+
+export const BottomSheetOutlet = defaultPortal.Outlet
+
+export function BottomSheetProvider({children}: {children: React.ReactNode}) {
+  return (
+    <Context.Provider value={defaultPortal.Portal}>
+      <defaultPortal.Provider>{children}</defaultPortal.Provider>
+    </Context.Provider>
+  )
+}