From ecc8b7fe00dec5a53b785688d3e3f9b0c147805f Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:31:35 +0000
Subject: [PATCH 1/3] ensure hostelement is connected to DOM for confirmation
 dialogs

---
 src/ConfirmationDialog/ConfirmationDialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ConfirmationDialog/ConfirmationDialog.tsx b/src/ConfirmationDialog/ConfirmationDialog.tsx
index d659ab23e1c..ef806ec97f5 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -145,11 +145,14 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
   )
 }
 
+let hostElement: Element | null = null
 export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content: React.ReactNode}
 async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
   const {content, ...confirmationDialogProps} = options
   return new Promise(resolve => {
-    const root = createRoot(document.createElement('div'))
+    hostElement = document.createElement('div')
+    if (!hostElement.isConnected) document.body.append(hostElement)
+    const root = createRoot(hostElement)
     const onClose: ConfirmationDialogProps['onClose'] = gesture => {
       root.unmount()
       if (gesture === 'confirm') {

From 6cd060b18ab625b7217ef84b6b39124a6e13de74 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:32:52 +0000
Subject: [PATCH 2/3] remove duplicate enum

---
 src/ConfirmationDialog/ConfirmationDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ConfirmationDialog/ConfirmationDialog.tsx b/src/ConfirmationDialog/ConfirmationDialog.tsx
index ef806ec97f5..0fa9a28dd49 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -16,7 +16,7 @@ export interface ConfirmationDialogProps {
    * Required. This callback is invoked when a gesture to close the dialog
    * is performed. The first argument indicates the gesture.
    */
-  onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'cancel' | 'escape') => void
+  onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void
 
   /**
    * Required. The title of the ConfirmationDialog. This is usually a brief

From e49891f687d158c87fa895a2d056a7058272936a Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:33:02 +0000
Subject: [PATCH 3/3] changeset

---
 .changeset/thin-ladybugs-travel.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thin-ladybugs-travel.md

diff --git a/.changeset/thin-ladybugs-travel.md b/.changeset/thin-ladybugs-travel.md
new file mode 100644
index 00000000000..93489b128ce
--- /dev/null
+++ b/.changeset/thin-ladybugs-travel.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Ensure ConfirmationDialog adds host element to the DOM