[unstable_usePrompt] Trigger for unstable_usePrompt on Dialog Close

[aress31]

The unstable_usePrompt hook works well for preventing navigation and providing visual feedback when a form has unsaved changes, for example:

unstable_usePrompt({
  message:
    "You have unsaved changes. Are you sure you want to leave this page without saving them? This action cannot be undone.",
  when: isDirty && visible && !isSubmitting,
});

However, I would also like to trigger this prompt programmatically—for instance, when a user tries to close a Dialog with unsaved changes. Currently, I have to use a workaround like this:

<Dialog
  fullwidth
  onClose={() =>
    isDirty
      ? handleBlocker(dialogs, "hide this dialog", () => {
          hideModal();
          reset();
        })
      : hideModal()
  }
  open={visible}
>
  // SNIP
</Dialog>

const handleBlocker = async (
  dialogs,
  actionType,
  onConfirm,
  onCancel = () => {},
) => {
  const confirmed = await dialogs.confirm(
    `You have unsaved changes. Are you sure you want to ${actionType} without saving them? This action cannot be undone.`,
    { okText: "Confirm", severity: "warning" },
  );

  if (confirmed) onConfirm();
  else onCancel();
};

This approach relies on @toolpad/core for the confirmation dialog. I would prefer a solution that uses only React Router for consistent styling and to reduce third-party dependencies.

It would be very helpful if unstable_usePrompt could return a trigger method, allowing the prompt to be invoked programmatically (e.g., when closing a dialog with unsaved changes).

[brophdawg11]

Why can't you just invoke window.confirm() programmatically?