fix(react-drag-drop): support dynamic root element IDs in DragDropContainer

Fixes #12217

- Replace hardcoded document.getElementById('root') with dynamic root element lookup
- Add getRootElement() helper that tries common root IDs: 'root', 'app', 'main', '__next'
- Fallback to document.body if no common root element is found
- Enables usage in applications with non-standard root element IDs (e.g., id="app")

This fix allows OCP 4.22 and other applications to use @patternfly/react-drag-drop
regardless of their React root element configuration.

Author: arpanroy41

packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx

@@ -288,6 +288,21 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   };
 
   const dragOverlay = <DragOverlay>{activeId && getDragOverlay()}</DragOverlay>;
+
+  // Find the React root element dynamically instead of hardcoding 'root'
+  const getRootElement = () => {
+    // Try common root element IDs
+    const commonRootIds = ['root', 'app', 'main', '__next'];
+    for (const id of commonRootIds) {
+      const element = document.getElementById(id);
+      if (element) {
+        return element;
+      }
+    }
+    // Fallback to document.body if no common root is found
+    return document.body;
+  };
+
   return (
     <DndContext
       sensors={sensors}
@@ -299,7 +314,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
       {...props}
     >
       {children}
-      {canUseDOM ? ReactDOM.createPortal(dragOverlay, document.getElementById('root')) : dragOverlay}
+      {canUseDOM ? ReactDOM.createPortal(dragOverlay, getRootElement()) : dragOverlay}
     </DndContext>
   );
 };