Restricting draggable to viewport?

[viveleroi]

I've made a dialog draggable but I want to ensure it can't go off-screen aka outside the viewport. Based on the bounds description it sounded like I could say body (we force body it viewport height/width) but that makes the dialog stop moving entirely.

Is there a way to achieve this?

  <Draggable bounds='body' handle='.drag-handle'>
    <dialog className={clsx(styles.window, className)} ref={ref}>
      {children}
    </dialog>
  </Draggable>

Edit: Pending an answer as to why the selector/parent bounds value does nothing, I've had to use the object value to control distances to the edge of the viewport.

useEffect(() => {
  const dialog = ref.current as HTMLDialogElement
  dialog.showModal()

  setTimeout(() => {
    setBounds({
      bottom: window.innerHeight - dialog.clientHeight - dialog.offsetTop,
      left: -1 * dialog.offsetLeft,
      right: window.innerWidth - dialog.clientWidth - dialog.offsetLeft,
      top: -1 * dialog.offsetTop
    })
  })

  return () => {
    dialog.close()
  }
}, [ref])