From f61bb7967e52a56f7c0c6348e87c85b022bd5190 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 28 Feb 2023 01:47:04 +0900
Subject: [PATCH 1/3] fix(overlay): pass missing props

---
 .../src/components/Overlay/Overlay.tsx          | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/bezier-react/src/components/Overlay/Overlay.tsx b/packages/bezier-react/src/components/Overlay/Overlay.tsx
index 10453128df..a970348e58 100644
--- a/packages/bezier-react/src/components/Overlay/Overlay.tsx
+++ b/packages/bezier-react/src/components/Overlay/Overlay.tsx
@@ -46,8 +46,10 @@ function Overlay(
     enableClickOutside = false,
     children,
     onHide = noop,
+    onTransitionEnd = noop,
+    ...rest
   }: OverlayProps,
-  forwardedRef: Ref<any>,
+  forwardedRef: Ref<HTMLDivElement>,
 ) {
   // NOTE: DOM render 가 필요한지 여부를 결정하는 state
   const [shouldRender, setShouldRender] = useState(false)
@@ -67,7 +69,7 @@ function Overlay(
   }, [])
 
   const handleContainerRect = useCallback(() => {
-    const containerElement = container || getRootElement() as HTMLElement
+    const containerElement = container || getRootElement()
 
     const {
       width: containerWidth,
@@ -126,11 +128,15 @@ function Overlay(
     handleTargetRect,
   ])
 
-  const handleTransitionEnd = useCallback(() => {
+  const handleTransitionEnd = useCallback<React.TransitionEventHandler<HTMLDivElement>>((event) => {
+    onTransitionEnd(event)
     if (!show) {
       setShouldRender(false)
     }
-  }, [show])
+  }, [
+    show,
+    onTransitionEnd,
+  ])
 
   const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {
     event.stopPropagation()
@@ -176,6 +182,7 @@ function Overlay(
       marginY={marginY}
       keepInContainer={keepInContainer}
       onTransitionEnd={handleTransitionEnd}
+      {...rest}
     >
       { children }
     </Styled.Overlay>
@@ -276,7 +283,7 @@ function Overlay(
 
   return ReactDOM.createPortal(
     overlay,
-    container || getRootElement() as HTMLElement,
+    container || getRootElement(),
   )
 }
 

From 3485665c6dbc2805631dfdc7abfaf875e4349883 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 28 Feb 2023 01:50:56 +0900
Subject: [PATCH 2/3] fix(overlay): pass missing interpolation prop

---
 packages/bezier-react/src/components/Overlay/Overlay.styled.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/bezier-react/src/components/Overlay/Overlay.styled.ts b/packages/bezier-react/src/components/Overlay/Overlay.styled.ts
index 0af92a39cf..37d1404b07 100644
--- a/packages/bezier-react/src/components/Overlay/Overlay.styled.ts
+++ b/packages/bezier-react/src/components/Overlay/Overlay.styled.ts
@@ -53,4 +53,6 @@ export const Overlay = styled.div<StyledOverlayProps>`
       foundation?.transition?.TransitionDuration.S,
     )
   )};
+  
+  ${({ interpolation }) => interpolation}
 `

From 2a7e5a1dc85f2de7752480ea13e134f7c520c18f Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Tue, 28 Feb 2023 01:55:09 +0900
Subject: [PATCH 3/3] chore(changeset): add changeset

---
 .changeset/dirty-shrimps-talk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dirty-shrimps-talk.md

diff --git a/.changeset/dirty-shrimps-talk.md b/.changeset/dirty-shrimps-talk.md
new file mode 100644
index 0000000000..22da6e5f63
--- /dev/null
+++ b/.changeset/dirty-shrimps-talk.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Fix to pass missing property of `Overlay` component.