Fix bug where overlay would close when clicking inside it

.changeset/sixty-cows-fetch.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Fixes a bug where onHide is called when clicking inside the overlay, causing the overlay to close.

packages/bezier-react/src/components/Overlay/Overlay.test.tsx

@@ -5,6 +5,8 @@ import { getWindow } from 'ssr-window'
 
 import { render } from '~/src/utils/test'
 
+import { Button } from '~/src/components/Button'
+
 import {
   CONTAINER_TEST_ID,
   ESCAPE_KEY,
@@ -276,12 +278,12 @@ describe('Overlay', () => {
     })
 
     describe('Event', () => {
-      describe('keydown', () => {
-        document.onkeydown = jest.fn()
-        const onHide = jest.fn()
+      document.onkeydown = jest.fn()
+      const onHide = jest.fn()
 
-        afterEach(jest.clearAllMocks)
+      afterEach(jest.clearAllMocks)
 
+      describe('keydown', () => {
         it('is Triggered By Escape', () => {
           const { getByTestId } = renderRootOverlay({ withTransition: true, onHide })
           const overlay = getByTestId(OVERLAY_TEST_ID)
@@ -307,6 +309,21 @@ describe('Overlay', () => {
           expect(onHide).toHaveBeenCalledTimes(0)
         })
       })
+
+      describe('click', () => {
+        it('calls onHide when element outside the overlay is clicked', async () => {
+          renderRootOverlay({ onHide })
+          fireEvent.click(document.body)
+          expect(onHide).toHaveBeenCalled()
+        })
+
+        it('does not call onHide when element inside the overlay is clicked', () => {
+          const { getByRole } = renderRootOverlay({ children: (<Button text="button" />), onHide })
+          const button = getByRole('button')
+          fireEvent.click(button)
+          expect(onHide).not.toHaveBeenCalled()
+        })
+      })
     })
   })
 })

packages/bezier-react/src/components/Overlay/Overlay.tsx

@@ -155,8 +155,8 @@ export const Overlay = forwardRef<HTMLDivElement, OverlayProps>(function Overlay
     event.stopPropagation()
   }, [])
 
-  const handleHideOverlay = useCallback((event: any) => {
-    if (!event.target?.closest(styles.Overlay)) {
+  const handleHideOverlay = useCallback((event: MouseEvent) => {
+    if (!event.target || (event.target instanceof HTMLElement && !event.target.closest(`.${styles.Overlay}`))) {
       onHide?.()
 
       if (!enableClickOutside) {

packages/bezier-react/src/features/SmoothCornersFeature/smoothCornersScript.ts

@@ -95,7 +95,6 @@ class SmoothCorners {
       .get('--smooth-corners')
       .toString()
 
-    console.log("padding: ", padding)
     const targetWidth = geom.width - (2 * this.trimPX(padding))
     const targetHeight = geom.height - (2 * this.trimPX(padding))