From afa59229defaf5f266cd9dda236cea61e813063f Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 5 Feb 2024 18:34:23 +0300
Subject: [PATCH] resolve #7770 Library message box is not themed.

---
 src/question_file.ts          | 4 ++--
 src/question_matrixdynamic.ts | 2 +-
 src/question_paneldynamic.ts  | 2 +-
 src/settings.ts               | 4 ++--
 src/utils/utils.ts            | 8 ++++----
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/question_file.ts b/src/question_file.ts
index 2581322a8b..8b6e6e6cb9 100644
--- a/src/question_file.ts
+++ b/src/question_file.ts
@@ -1021,7 +1021,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   }
   doClean = () => {
     if (this.needConfirmRemoveFile) {
-      confirmActionAsync(this.confirmRemoveAllMessage, () => { this.clearFilesCore(); }, undefined, this.getLocale());
+      confirmActionAsync(this.confirmRemoveAllMessage, () => { this.clearFilesCore(); }, undefined, this.getLocale(), this.survey.rootElement);
       return;
     }
     this.clearFilesCore();
@@ -1037,7 +1037,7 @@ export class QuestionFileModel extends QuestionFileModelBase {
   }
   doRemoveFile(data: any) {
     if (this.needConfirmRemoveFile) {
-      confirmActionAsync(this.getConfirmRemoveMessage(data.name), () => { this.removeFileCore(data); }, undefined, this.getLocale());
+      confirmActionAsync(this.getConfirmRemoveMessage(data.name), () => { this.removeFileCore(data); }, undefined, this.getLocale(), this.survey.rootElement);
       return;
     }
     this.removeFileCore(data);
diff --git a/src/question_matrixdynamic.ts b/src/question_matrixdynamic.ts
index f4495ae6f7..c5e24fd799 100644
--- a/src/question_matrixdynamic.ts
+++ b/src/question_matrixdynamic.ts
@@ -577,7 +577,7 @@ export class QuestionMatrixDynamicModel extends QuestionMatrixDropdownModelBase
       confirmDelete = this.isRequireConfirmOnRowDelete(index);
     }
     if (confirmDelete) {
-      confirmActionAsync(this.confirmDeleteText, () => { this.removeRowAsync(index, row); }, undefined, this.getLocale());
+      confirmActionAsync(this.confirmDeleteText, () => { this.removeRowAsync(index, row); }, undefined, this.getLocale(), this.survey.rootElement);
       return;
     }
     this.removeRowAsync(index, row);
diff --git a/src/question_paneldynamic.ts b/src/question_paneldynamic.ts
index 310d94ba0f..676734b298 100644
--- a/src/question_paneldynamic.ts
+++ b/src/question_paneldynamic.ts
@@ -1317,7 +1317,7 @@ export class QuestionPanelDynamicModel extends Question
   public removePanelUI(value: any): void {
     if (!this.canRemovePanel) return;
     if(this.isRequireConfirmOnDelete(value)) {
-      confirmActionAsync(this.confirmDeleteText, () => { this.removePanel(value); }, undefined, this.getLocale());
+      confirmActionAsync(this.confirmDeleteText, () => { this.removePanel(value); }, undefined, this.getLocale(), this.survey.rootElement);
     } else {
       this.removePanel(value);
     }
diff --git a/src/settings.ts b/src/settings.ts
index 372e41bc0a..ac7f57ca7f 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -458,8 +458,8 @@ export var settings = {
    * @param message A message to be displayed in the confirm dialog window.
    * @param callback A callback function that should be called with `true` if a user confirms an action or `false` otherwise.
    */
-  confirmActionAsync: function (message: string, callback: (res: boolean) => void, applyTitle?: string, locale?: string): boolean {
-    return showConfirmDialog(message, callback, applyTitle, locale);
+  confirmActionAsync: function (message: string, callback: (res: boolean) => void, applyTitle?: string, locale?: string, rootElement?: HTMLElement): boolean {
+    return showConfirmDialog(message, callback, applyTitle, locale, rootElement);
   },
   /**
    * A minimum width value for all survey elements.
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index d603393be8..c0467eee89 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -25,14 +25,14 @@ function confirmAction(message: string): boolean {
   return confirm(message);
 }
 
-function confirmActionAsync(message: string, funcOnYes: () => void, funcOnNo?: () => void, locale?: string): void {
+function confirmActionAsync(message: string, funcOnYes: () => void, funcOnNo?: () => void, locale?: string, rootElement?: HTMLElement): void {
   const callbackFunc = (res: boolean): void => {
     if (res) funcOnYes();
     else if (!!funcOnNo) funcOnNo();
   };
 
   if (!!settings && !!settings.confirmActionAsync) {
-    if (settings.confirmActionAsync(message, callbackFunc, undefined, locale)) return;
+    if (settings.confirmActionAsync(message, callbackFunc, undefined, locale, rootElement)) return;
   }
 
   callbackFunc(confirmAction(message));
@@ -412,7 +412,7 @@ export class Logger {
   }
 }
 
-export function showConfirmDialog(message: string, callback: (res: boolean) => void, applyTitle?: string, locale?: string): boolean {
+export function showConfirmDialog(message: string, callback: (res: boolean) => void, applyTitle?: string, locale?: string, rootElement?: HTMLElement): boolean {
   const locStr = new LocalizableString(undefined);
   const popupViewModel: PopupBaseViewModel = settings.showDialog(<IDialogOptions>{
     componentName: "sv-string-viewer",
@@ -429,7 +429,7 @@ export function showConfirmDialog(message: string, callback: (res: boolean) => v
     displayMode: "popup",
     isFocusedContent: false,
     cssClass: "sv-popup--confirm-delete"
-  }, /*settings.rootElement*/document.body); //TODO survey root
+  }, rootElement);
   const toolbar = popupViewModel.footerToolbar;
   const applyBtn = toolbar.getActionById("apply");
   const cancelBtn = toolbar.getActionById("cancel");