✨ Display tokens contextual menu in body through portal

frontend/src/app/main/ui/components/portal.cljs

@@ -6,10 +6,11 @@
 
 (ns app.main.ui.components.portal
   (:require
+   [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
 (mf/defc portal-on-document*
   [{:keys [children]}]
   (mf/portal
    (mf/html [:* children])
-   (.-body js/document)))
+   (dom/get-body)))

frontend/src/app/main/ui/modal.cljs

@@ -86,4 +86,4 @@
   (when-let [modal (mf/deref ref:modal)]
     (mf/portal
      (mf/html [:> modal-wrapper* {:data modal :key (dm/str (:id modal))}])
-     (.-body js/document))))
+     (dom/get-body))))

frontend/src/app/main/ui/workspace/tokens/context_menu.cljs

@@ -446,17 +446,22 @@
             (mf/set-ref-val! dropdown-direction-change* (inc (mf/ref-val dropdown-direction-change*)))))))
 
     ;; FIXME: perf optimization
-    [:& dropdown {:show is-open?
+
-                  :on-close #(st/emit! (dt/assign-token-context-menu nil))}
+    (when is-open?
-     [:div {:class (stl/css :token-context-menu)
+      (mf/portal
-            :data-testid "tokens-context-menu-for-token"
+       (mf/html
-            :ref dropdown-ref
+        [:& dropdown {:show is-open?
-            :data-direction dropdown-direction
+                      :on-close #(st/emit! (dt/assign-token-context-menu nil))}
-            :style {:--bottom (if (= dropdown-direction "up")
+         [:div {:class (stl/css :token-context-menu)
-                                "40px"
+                :data-testid "tokens-context-menu-for-token"
-                                "unset")
+                :ref dropdown-ref
-                    :--top (dm/str top "px")
+                :data-direction dropdown-direction
-                    :left (dm/str left "px")}
+                :style {:--bottom (if (= dropdown-direction "up")
-            :on-context-menu prevent-default}
+                                    "40px"
-      (when mdata
+                                    "unset")
-        [:& token-context-menu-tree (assoc mdata :width @width :direction dropdown-direction)])]]))
+                        :--top (dm/str top "px")
+                        :left (dm/str left "px")}
+                :on-context-menu prevent-default}
+          (when mdata
+            [:& token-context-menu-tree (assoc mdata :width @width :direction dropdown-direction)])]])
+       (dom/get-body)))))

frontend/src/app/main/ui/workspace/tokens/theme_select.cljs

@@ -139,4 +139,4 @@
            [:& theme-options {:active-theme-paths active-theme-paths
                               :themes themes
                               :on-close on-close-dropdown}]]])
-        (.-body js/document)))]))
+        (dom/get-body)))]))