feat: add sibling prop support

README.md

@@ -24,7 +24,7 @@ MVP example, showing what you get by implementing `open`, `onDismiss` and a sing
 
 ## [Snap points & overflow](https://react-spring-bottom-sheet.cocody.dev/fixtures/scrollable)
 
-> [View demo code](/pages/fixtures/scrollable.tsx#L85-L95)
+> [View demo code](/pages/fixtures/scrollable.tsx#L86-L97)
 
 A more elaborate example that showcases how snap points work. It also shows how it behaves if you want it to be open by default, and not closable. Notice how it responds if you resize the window, or scroll to the bottom and starts adjusting the height of the sheet without scrolling back up first.
 

docs/fixtures/CloseExample.tsx

@@ -0,0 +1,29 @@
+import cx from 'classnames/dedupe'
+import { forwardRef } from 'react'
+import Link from 'next/link'
+
+type Props = {
+  className?: Parameters<typeof cx>[0]
+} & Omit<
+  React.PropsWithoutRef<JSX.IntrinsicElements['a']>,
+  'children' | 'className'
+>
+
+const CloseExample = forwardRef<HTMLAnchorElement, Props>(
+  ({ className, ...props }, ref) => (
+    <Link href="/">
+      <a
+        {...props}
+        className={cx(
+          'absolute left-0 top-0 only-window my-4 mx-8 py-2 px-4 transition-colors focus:duration-0 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-600 hover:text-gray-700 active:text-gray-800 text-xs rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-gray-400',
+          className
+        )}
+        ref={ref}
+      >
+        Close example
+      </a>
+    </Link>
+  )
+)
+
+export default CloseExample

docs/fixtures/Container.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames/dedupe'
 import { useEffect } from 'react'
 import { useDetectEnv } from './hooks'
-import Link from 'next/link'
+import CloseExample from './CloseExample'
 
 export default function Container({
   children,
@@ -29,11 +29,7 @@ export default function Container({
         className
       )}
     >
-      <Link href="/">
-        <a className="z-10 absolute left-0 top-0 only-window my-4 mx-8 py-2 px-4 transition-colors focus:duration-0 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-600 hover:text-gray-700 active:text-gray-800 text-xs rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-gray-400">
-          Close example
-        </a>
-      </Link>
+      <CloseExample />
       {children}
     </main>
   )

pages/fixtures/scrollable.tsx

@@ -3,6 +3,7 @@ import type { NextPage } from 'next'
 import { useRef } from 'react'
 import scrollIntoView from 'smooth-scroll-into-view-if-needed'
 import Button from '../../docs/fixtures/Button'
+import CloseExample from '../../docs/fixtures/CloseExample'
 import Code from '../../docs/fixtures/Code'
 import Container from '../../docs/fixtures/Container'
 import ScrollUp from '../../docs/fixtures/ScrollUp'
@@ -84,6 +85,7 @@ const ScrollableFixturePage: NextPage<GetStaticProps> = ({
         <SnapMarker style={{ top: '75vh', ['--size' as any]: '0.5vh' }} />
         <BottomSheet
           open
+          sibling={<CloseExample className="z-10" />}
           ref={sheetRef}
           initialFocusRef={focusRef}
           defaultSnap={({ maxHeight }) => maxHeight / 2}

src/BottomSheet.tsx

@@ -39,6 +39,7 @@ export const BottomSheet = React.forwardRef<
 >(function BottomSheetInternal(
   {
     children,
+    sibling,
     className,
     footer,
     header,
@@ -565,6 +566,7 @@ export const BottomSheet = React.forwardRef<
         pointerEvents: !ready || off ? 'none' : undefined,
       }}
     >
+      {sibling}
       {blocking ? (
         <div
           // This component needs to be placed outside bottom-sheet, as bottom-sheet uses transform and thus creates a new context

src/types.ts

@@ -29,10 +29,16 @@ export type SpringEvent = {
   // @TODO implemen SNAP events
 }
 
-// Rename to Props! Woohoo!
 export type Props = {
   children: React.ReactNode
 
+  /**
+   * Similar to children, but renders next to the overlay element rather than inside it.
+   * Useful for things that are position:fixed and need to overlay the backdrop and still be interactive
+   * in blocking mode.
+   */
+  sibling?: React.ReactNode
+
   /**
    * Start a transition from closed to open, open to closed, or snap to snap.
    * Return a promise or async to delay the start of the transition, just remember it can be cancelled.