Return value when closing a dialog [ui-kitchen-sink]

Photoshop UXP Plugin API
1

USE CASE
When using a dialog, i.e. the Programmatic Dialog of the [ui-kitchen-sink] example I need the function calling the dialog to know which button has been pressed to close the dialog

In the below [ui-kitchen-sink] example two buttons are called ‘Action Button’ and ‘Cancel Button’ , both have their onclick event that logs “ok” if the Action Button has been pressed or “Reason Canceled” if the Cancel Button has been pressed . I need these return value to be passed to the function calling the programmatic dialog - Thanks in advance for your support

// programmatic dialog
const openProgrammaticDialog = async () => {
  const theDialog = document.createElement("dialog");
  const theForm = document.createElement("form");
  const theHeading = document.createElement("sp-heading");
  const theDivider = document.createElement("sp-divider");
  const theBody = document.createElement("sp-body");
  const theFooter = document.createElement("footer");
  const theActionButton = document.createElement("sp-button");
  const theCancelButton = document.createElement("sp-button");

  theHeading.textContent = "Vectorize Images?";
  theDivider.setAttribute("size", "large");
  theBody.textContent = "Are you sure you want to vectorize the images? This might take some time.";
  theActionButton.textContent = "Vectorize";
  theActionButton.setAttribute("variant", "cta");
  theCancelButton.textContent = "Don't Vectorize";
  theCancelButton.setAttribute("quiet", "true");
  theCancelButton.setAttribute("variant", "secondary");

  theActionButton.onclick = () => { 
    theDialog.close("ok");
  }
  theCancelButton.onclick = () => {
    theDialog.close("reasonCanceled");
  }

  theFooter.appendChild(theCancelButton);
  theFooter.appendChild(theActionButton);

  theForm.appendChild(theHeading);
  theForm.appendChild(theDivider);
  theForm.appendChild(theBody);
  theForm.appendChild(theFooter);
  theDialog.appendChild(theForm);
  document.body.appendChild(theDialog);

  const r = await theDialog.uxpShowModal({
    title: "Programmatic Dialog",
    resize: "none", // "both", "horizontal", "vertical",
    size: {
      width: 480,
      height: 240
    }
  });
  console.log(r);
  theDialog.remove();
}
document.querySelector("#btnOpenPDialog").onclick = openProgrammaticDialog;
2 
const openProgrammaticDialog = async (callback) => {
  // All your dialog construction

  const r = await theDialog.uxpShowModal({
    title: "Programmatic Dialog",
    resize: "none", // "both", "horizontal", "vertical",
    size: {
      width: 480,
      height: 240
    }
  });
  
  theDialog.remove();

  if (typeof callback === 'function') {
    callback(r);
  }
}

const dialogCallback = (dialogResponse) => {
  console.log(dialogResponse);
  // do whatever with that response
}

document.querySelector("#btnOpenPDialog").onclick = () => openProgrammaticDialog(dialogCallback);
3

Great Karmalakas ! And really quick response !