From c597b3fe1514f10e227c287dc8ad875134e9b4cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Wed, 18 Sep 2024 09:37:18 -0400
Subject: [PATCH] Introduce `rootElement` option on Feedback plugin

---
 .changeset/feedback-root.md                   |  5 ++++
 .../dom/src/core/plugins/feedback/Feedback.ts | 23 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/feedback-root.md

diff --git a/.changeset/feedback-root.md b/.changeset/feedback-root.md
new file mode 100644
index 00000000..126024b0
--- /dev/null
+++ b/.changeset/feedback-root.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/dom': patch
+---
+
+Introduce `rootElement` option on `Feedback` plugin.
diff --git a/packages/dom/src/core/plugins/feedback/Feedback.ts b/packages/dom/src/core/plugins/feedback/Feedback.ts
index 3bc8b1c7..6336a4c7 100644
--- a/packages/dom/src/core/plugins/feedback/Feedback.ts
+++ b/packages/dom/src/core/plugins/feedback/Feedback.ts
@@ -28,8 +28,12 @@ const IDENTIFIER_ATTRIBUTE = `${ATTR_PREFIX}id`;
 const IGNORED_ATTRIBUTES = [ATTRIBUTE, PLACEHOLDER_ATTRIBUTE, 'popover'];
 const IGNORED_STYLES = ['view-transition-name'];
 
-export class Feedback extends Plugin<DragDropManager> {
-  constructor(manager: DragDropManager) {
+export interface FeedbackOptions {
+  rootElement?: Element | ((source: Draggable) => Element);
+}
+
+export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
+  constructor(manager: DragDropManager, options?: FeedbackOptions) {
     super(manager);
 
     let style: HTMLStyleElement | undefined;
@@ -141,6 +145,15 @@ export class Feedback extends Plugin<DragDropManager> {
 
       if (placeholder) {
         element.insertAdjacentElement('afterend', placeholder);
+
+        if (options?.rootElement) {
+          const root =
+            typeof options.rootElement === 'function'
+              ? options.rootElement(source)
+              : options.rootElement;
+
+          root.appendChild(element);
+        }
       }
 
       if (supportsPopover(element)) {
@@ -470,11 +483,11 @@ export class Feedback extends Plugin<DragDropManager> {
 }
 
 function createPlaceholder(source: Draggable) {
-  const {element, manager} = source;
+  return untracked(() => {
+    const {element, manager} = source;
 
-  if (!element || !manager) return;
+    if (!element || !manager) return;
 
-  return untracked(() => {
     const {droppables} = manager.registry;
     const containedDroppables = [];