fix(react-drag-drop): support dynamic root element IDs in DragDropCon… (#12240)

* 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.

* perf: memoize root element lookup to avoid repeated DOM queries

* fix(DragDropContainer): handle case when DOM is not available by returning null for root element

* feat(DragDropContainer): add appendTo prop for customizable drag overlay target

Author: arpanroy41

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

@@ -66,6 +66,8 @@ export interface DragDropContainerProps extends DndContextProps {
   variant?: 'default' | 'DataList' | 'DualListSelectorList';
   /** Additional classes to apply to the drag overlay */
   overlayProps?: any;
+  /** The parent container to append the drag overlay to. Defaults to document.body. */
+  appendTo?: HTMLElement | (() => HTMLElement);
 }
 
 export const DragDropContainer: React.FunctionComponent<DragDropContainerProps> = ({
@@ -77,6 +79,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   onCancel = () => {},
   variant = 'default',
   overlayProps,
+  appendTo = () => document.body,
   ...props
 }: DragDropContainerProps) => {
   const itemsCopy = useRef<Record<string, DraggableObject[]> | null>(null);
@@ -288,6 +291,9 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   };
 
   const dragOverlay = <DragOverlay>{activeId && getDragOverlay()}</DragOverlay>;
+
+  const portalTarget = typeof appendTo === 'function' ? appendTo() : appendTo || document.body;
+
   return (
     <DndContext
       sensors={sensors}
@@ -299,7 +305,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
       {...props}
     >
       {children}
-      {canUseDOM ? ReactDOM.createPortal(dragOverlay, document.getElementById('root')) : dragOverlay}
+      {canUseDOM && portalTarget ? ReactDOM.createPortal(dragOverlay, portalTarget) : dragOverlay}
     </DndContext>
   );
 };