From 08da0bc8477029f1473ddbc4c5b3fa780c93c53f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Grabowski?= <michal.grabowski@ibexa.co>
Date: Thu, 28 Nov 2024 14:51:00 +0100
Subject: [PATCH] added some root handling

---
 .../public/js/scripts/helpers/react.helper.js   |  8 +++++++-
 .../src/modules/common/popup-menu/popup.menu.js | 17 +++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/bundle/Resources/public/js/scripts/helpers/react.helper.js b/src/bundle/Resources/public/js/scripts/helpers/react.helper.js
index 7b32f1f85b..df9511f5e2 100644
--- a/src/bundle/Resources/public/js/scripts/helpers/react.helper.js
+++ b/src/bundle/Resources/public/js/scripts/helpers/react.helper.js
@@ -1,4 +1,10 @@
-const createDynamicRoot = (contextDOMElement = window.document.body, id) => {
+import { getRootDOMElement } from './context.helper';
+
+const createDynamicRoot = ({ contextDOMElement = getRootDOMElement(), id } = {}) => {
+    if (id && contextDOMElement.querySelector(`#${id}`) !== null) {
+        console.warn(`You're creating second root element with ID "${id}". IDs should be unique inside a document.`);
+    }
+
     const rootDOMElement = document.createElement('div');
 
     rootDOMElement.classList.add('ibexa-react-root');
diff --git a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js
index 7625ba3120..51ddae3e47 100644
--- a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js
+++ b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js
@@ -43,23 +43,15 @@ const PopupMenu = ({ extraClasses, footer, items, onItemClick, positionOffset, r
             return null;
         }
 
-        const groupClassName = createCssClassNames({
-            'c-popup-menu__group': true,
-        });
-
-        return <div className={groupClassName}>{group.items.map(renderItem)}</div>;
+        return <div className="c-popup-menu__group">{group.items.map(renderItem)}</div>;
     };
     const renderItem = (item) => {
         if (!showItem(item)) {
             return null;
         }
 
-        const itemClassName = createCssClassNames({
-            'c-popup-menu__item': true,
-        });
-
         return (
-            <div className={itemClassName} key={item.value}>
+            <div className="c-popup-menu__item" key={item.value}>
                 <button type="button" className="c-popup-menu__item-content" onClick={() => onItemClick(item)}>
                     <span className="c-popup-menu__item-label">{item.label}</span>
                 </button>
@@ -137,6 +129,7 @@ const PopupMenu = ({ extraClasses, footer, items, onItemClick, positionOffset, r
         calculateAndSetItemsListStyles();
         setIsRendered(true);
 
+        const rootDOMElement = getRootDOMElement();
         const onInteractionOutside = (event) => {
             if (containerRef.current.contains(event.target) || referenceElement.contains(event.target)) {
                 return;
@@ -145,11 +138,11 @@ const PopupMenu = ({ extraClasses, footer, items, onItemClick, positionOffset, r
             onClose();
         };
 
-        window.document.body.addEventListener('click', onInteractionOutside, false);
+        rootDOMElement.addEventListener('click', onInteractionOutside, false);
         scrollContainer.addEventListener('scroll', calculateAndSetItemsListStyles, false);
 
         return () => {
-            window.document.body.removeEventListener('click', onInteractionOutside);
+            rootDOMElement.removeEventListener('click', onInteractionOutside);
             scrollContainer.removeEventListener('scroll', calculateAndSetItemsListStyles);
 
             setItemsListStyles({});