Feat: snap points with <Drawer.SnapPoint />

[mehdibha]

First of all, thank you Emil for your amazing work.

I tried the snap points feature and it wasn't a good solution for me as the expected snap points weren't the same when i tried Firefox, also there's no way to handle the responsive part as the snap points would not be the same (or it will be a small headache with useMediaQuery)

Ideally, a perfect solution for me would be like this

<Drawer.Root>
  <Drawer.Trigger>Open</Drawer.Trigger>
    <Drawer.Portal>
      <Drawer.Content>
        {/** some content **/}
        <Drawer.SnapPoint />
        {/** some content **/}
        <Drawer.SnapPoint />
        {/** some content **/}
        <Drawer.SnapPoint />
      </Drawer.Content>
      <Drawer.Overlay />
    </Drawer.Portal>
</Drawer.Root>

If you are okey, i would like to work on this 😊
Any thoughts?

[artemis-prime]

Please be clearer and more specific in terms of what your proposal is. As it is, i for one have no idea.

[mehdibha]

The idea was to make a discussion on how to implement it 😊.
i was thinking about something like this

const SnapPoint = () => {
  const { parentRef, setSnapPoints } = useContext(drawerContext)
  const ref = useRef(null)
  useEffect(()=>{
    // calculate the offset and set it
  },[])
  
  return <div ref={ref} />
}

[rortan134]

I like this. Snap points based on content height instead of hard-coded values