From 2980c6bcdfb021e346fe706f5639f01fa25b9270 Mon Sep 17 00:00:00 2001
From: Hanna Jeong <jhn3981@gmail.com>
Date: Mon, 27 May 2024 13:50:47 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4?=
 =?UTF-8?q?=EC=9D=B4=20=EC=A0=95=EC=83=81=EC=A0=81=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=8F=99=EC=9E=91=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/lib/Dropdown/Dropdown.tsx             | 48 +++++++------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx b/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx
index 5cb1a5f9b..b954a287c 100644
--- a/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx
+++ b/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx
@@ -3,8 +3,7 @@ import type { Align, Side } from 'packages/vibrant-utils/src/types';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Box,
-  PortalBox,
-  PressableBox,
+  OverlayBox,
   ScrollBox,
   ThemeProvider,
   getWindowDimensions,
@@ -192,7 +191,7 @@ export const Dropdown = withDropdownVariation(
             spacing
           );
 
-          setOffset({ x: openerRect.x + offsetX, y: openerRect.y + offsetY });
+          setOffset({ x: offsetX, y: offsetY });
         }
 
         setContentHeight(height);
@@ -235,32 +234,19 @@ export const Dropdown = withDropdownVariation(
         <Box ref={openerRef}>{opener}</Box>
         {!isMobile && isOpen && (
           <ThemeProvider theme={rootThemeMode}>
-            <PortalBox zIndex={zIndex.dropdown} top={0} right={0} bottom={0} left={0}>
-              <PressableBox
-                as="div"
-                position="absolute"
-                cursor="default"
-                top={0}
-                right={0}
-                bottom={0}
-                left={0}
-                onClick={closeDropdown}
-              />
-              <Transition
-                animation={{
-                  opacity: visible ? 1 : 0,
-                  ...(visible
-                    ? {
-                        x: offset.x,
-                        y: offset.y,
-                      }
-                    : {}),
-                }}
-                style={{
-                  x: offset.x,
-                  y: offset.y,
-                }}
-                duration={200}
+            <Transition
+              animation={{
+                opacity: visible ? 1 : 0,
+              }}
+              duration={200}
+            >
+              <OverlayBox
+                open={isOpen}
+                onDismiss={closeDropdown}
+                targetRef={customOpenerRef.current ? customOpenerRef : openerRef}
+                zIndex={zIndex.dropdown}
+                top={offset.y}
+                left={offset.x}
               >
                 <Box alignSelf="flex-start">
                   <Box
@@ -291,8 +277,8 @@ export const Dropdown = withDropdownVariation(
                     </Transition>
                   </Box>
                 </Box>
-              </Transition>
-            </PortalBox>
+              </OverlayBox>
+            </Transition>
           </ThemeProvider>
         )}
         {isMobile && (