[dialog][alert dialog] Pass `payload` to `onOpenChange` callback

[roccomaniscalco]

Feature request

Summary

Pass payload to the onOpenChange callback of Dialog.Root and AlertDialog.Root:

<Dialog.Root
  handle={dialogHandle}
  onOpenChange={(open, eventDetails, payload) => {
    if (!open && eventDetails.reason === 'escape-key') {
      payload?.onCancel()
    }
  }}
>

Workaround

Access payload via the internal store property of Dialog.Handle:

<Dialog.Root
  handle={dialogHandle}
  onOpenChange={(open, eventDetails) => {
    if (!open && eventDetails.reason === 'escape-key') {
      const { payload } = dialogHandle.store.getSnapshot()
      payload?.onCancel()
    }
  }}
>

Motivation

I want the ability to trigger payload-specific side effects on open change. For example, triggering an onCancel effect on ESC. This would be helpful for integrating with useBlocker from Tanstack Router:

import { useBlocker } from '@tanstack/react-router'
import { useState } from 'react'
import { exitConfirmationDialogHandle } from './exit-confirmation-dialog'

function MyComponent() {
  const [formIsDirty, setFormIsDirty] = useState(false)

  useBlocker({
    shouldBlockFn: () => {
      if (!formIsDirty) {
        return false
      }

      const shouldBlock = new Promise<boolean>((resolve) => {
        exitConfirmationDialogHandle.openWithPayload({
          title: 'Discard unsaved changes?',
          onConfirm: () => {
            exitConfirmationDialogHandle.close()
            resolve(false)
          },
          onCancel: () => {
            exitConfirmationDialogHandle.close()
            resolve(true)
          },
        })
      })

      return shouldBlock
    },
  })

  // ...
}