🐛 (editor) Fix popover zIndex

apps/builder/src/components/VariableSearchInput.tsx

@@ -20,6 +20,7 @@ import React, { useState, useRef, ChangeEvent, useEffect } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { byId, env, isDefined, isNotDefined } from 'utils'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
+import { useParentModal } from '@/features/graph'
 
 type Props = {
   initialVariableId?: string
@@ -62,6 +63,7 @@ export const VariableSearchInput = ({
   const inputRef = useRef<HTMLInputElement>(null)
   const createVariableItemRef = useRef<HTMLButtonElement | null>(null)
   const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
+  const { ref: parentModalRef } = useParentModal()
 
   useOutsideClick({
     ref: dropdownRef,
@@ -190,7 +192,7 @@ export const VariableSearchInput = ({
             {...inputProps}
           />
         </PopoverAnchor>
-        <Portal>
+        <Portal containerRef={parentModalRef}>
           <PopoverContent
             maxH="35vh"
             overflowY="scroll"

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx

@@ -37,6 +37,7 @@ import {
   useGraph,
   useBlockDnd,
   useDragDistance,
+  ParentModalProvider,
 } from '../../../providers'
 import { hasDefaultConnector } from '../../../utils'
 
@@ -239,12 +240,14 @@ export const BlockNode = ({
                 onExpandClick={handleExpandClick}
                 onBlockChange={handleBlockUpdate}
               />
-              <SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
-                <BlockSettings
-                  block={block}
-                  onBlockChange={handleBlockUpdate}
-                />
-              </SettingsModal>
+              <ParentModalProvider>
+                <SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
+                  <BlockSettings
+                    block={block}
+                    onBlockChange={handleBlockUpdate}
+                  />
+                </SettingsModal>
+              </ParentModalProvider>
             </>
           )}
           {typebot && isMediaBubbleBlock(block) && (

apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsModal.tsx

@@ -1,3 +1,4 @@
+import { useParentModal } from '@/features/graph'
 import {
   Modal,
   ModalOverlay,
@@ -20,13 +21,14 @@ export const SettingsModal = ({
   onClose,
   ...props
 }: Props & ModalBodyProps) => {
+  const { ref } = useParentModal()
   const handleMouseDown = (e: React.MouseEvent) => {
     e.stopPropagation()
   }
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
-      <ModalContent onMouseDown={handleMouseDown}>
+      <ModalContent onMouseDown={handleMouseDown} ref={ref}>
         <ModalHeader mb="2">
           <ModalCloseButton />
         </ModalHeader>

apps/builder/src/features/graph/index.ts

@@ -1,10 +1,12 @@
 export { Graph } from './components/Graph'
 export {
+  ParentModalProvider,
   GraphProvider,
   GroupsCoordinatesProvider,
   GraphDndProvider,
   type Coordinates,
   useGraph,
   useBlockDnd,
+  useParentModal,
 } from './providers'
 export { parseNewBlock } from './utils'

apps/builder/src/features/graph/providers/ParentModalProvider.tsx

@@ -0,0 +1,17 @@
+import { createContext, ReactNode, useContext, useRef } from 'react'
+
+const parentModalContext = createContext<{
+  ref?: React.MutableRefObject<HTMLDivElement | null>
+}>({})
+
+export const ParentModalProvider = ({ children }: { children: ReactNode }) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <parentModalContext.Provider value={{ ref }}>
+      {children}
+    </parentModalContext.Provider>
+  )
+}
+
+export const useParentModal = () => useContext(parentModalContext)

apps/builder/src/features/graph/providers/index.ts

@@ -1,3 +1,4 @@
 export * from './GraphDndProvider'
 export * from './GraphProvider'
 export * from './GroupsCoordinateProvider'
+export * from './ParentModalProvider'

apps/builder/src/lib/theme.ts

@@ -93,7 +93,6 @@ const Popover = createMultiStyleConfigHelpers(
     popper: {
       width: 'fit-content',
       maxWidth: 'fit-content',
-      zIndex: 'popover',
     },
     content: {
       bg: colorMode === 'dark' ? 'gray.800' : 'white',