From 32a4e385535a2d410fdf8d1761f6770ef156f141 Mon Sep 17 00:00:00 2001
From: Sophie Schneider <thesophieschneider@gmail.com>
Date: Fri, 21 Apr 2023 23:17:52 +0000
Subject: [PATCH 1/3] bug in playground

---
 polaris-react/playground/Playground.tsx | 51 ++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
index 355f6b984f2..9e2c9bdfe07 100644
--- a/polaris-react/playground/Playground.tsx
+++ b/polaris-react/playground/Playground.tsx
@@ -1,11 +1,52 @@
-import React from 'react';
+import type {ReactNode} from 'react';
+import React, {useState} from 'react';
 
-import {Page} from '../src';
+import {Popover, UnstyledButton} from '../src';
 
 export function Playground() {
+  return <DefinitionPopover definition="hello world" title="hello world" />;
+}
+
+export interface Props {
+  /** A title to be displayed in the popover */
+  title: string;
+  /** The content to be displayed in the popover */
+  definition: ReactNode;
+}
+
+export function DefinitionPopover({title, definition}: Props) {
+  const [hoverActive, setHoverActive] = useState(false);
+
+  function handleClose() {
+    setHoverActive(false);
+  }
+
+  function handleActivatorMouseEnter() {
+    console.log('handleActivatorMouseEnter');
+    setHoverActive(true);
+  }
+
+  function handleActivatorMouseLeave() {
+    console.log('handleActivatorMouseLeave');
+    setHoverActive(false);
+  }
+
   return (
-    <Page title="Playground">
-      {/* Add the code you want to test in here */}
-    </Page>
+    <Popover
+      active={hoverActive}
+      activator={
+        <UnstyledButton
+          aria-describedby="hi"
+          type="button"
+          onMouseEnter={handleActivatorMouseEnter}
+          onMouseLeave={handleActivatorMouseLeave}
+        >
+          {title}
+        </UnstyledButton>
+      }
+      onClose={handleClose}
+    >
+      {definition}
+    </Popover>
   );
 }

From a90d0fc1f11fb2b3f3f8b41a824f4e077804cd3e Mon Sep 17 00:00:00 2001
From: Sophie Schneider <thesophieschneider@gmail.com>
Date: Fri, 21 Apr 2023 23:39:17 +0000
Subject: [PATCH 2/3]  added back in clearTransitionTimeout

---
 polaris-react/playground/Playground.tsx                         | 2 --
 .../Popover/components/PopoverOverlay/PopoverOverlay.tsx        | 1 +
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
index 9e2c9bdfe07..634716a079a 100644
--- a/polaris-react/playground/Playground.tsx
+++ b/polaris-react/playground/Playground.tsx
@@ -22,12 +22,10 @@ export function DefinitionPopover({title, definition}: Props) {
   }
 
   function handleActivatorMouseEnter() {
-    console.log('handleActivatorMouseEnter');
     setHoverActive(true);
   }
 
   function handleActivatorMouseLeave() {
-    console.log('handleActivatorMouseLeave');
     setHoverActive(false);
   }
 
diff --git a/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
index e8c87e0c083..2f61522816e 100644
--- a/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
+++ b/polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
@@ -112,6 +112,7 @@ export class PopoverOverlay extends PureComponent<PopoverOverlayProps, State> {
     }
 
     if (!this.props.active && oldProps.active) {
+      this.clearTransitionTimeout();
       this.setState({transitionStatus: TransitionStatus.Exited});
     }
   }

From cee266a01d64fc750cbe581511265b6502bf4481 Mon Sep 17 00:00:00 2001
From: Sophie Schneider <thesophieschneider@gmail.com>
Date: Sat, 22 Apr 2023 00:07:00 +0000
Subject: [PATCH 3/3] revert playground and add changeset

---
 .changeset/grumpy-squids-dance.md       |  5 +++
 polaris-react/playground/Playground.tsx | 49 +++----------------------
 2 files changed, 10 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/grumpy-squids-dance.md

diff --git a/.changeset/grumpy-squids-dance.md b/.changeset/grumpy-squids-dance.md
new file mode 100644
index 00000000000..caf62757291
--- /dev/null
+++ b/.changeset/grumpy-squids-dance.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed PopoverOverlay not closing
diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
index 634716a079a..355f6b984f2 100644
--- a/polaris-react/playground/Playground.tsx
+++ b/polaris-react/playground/Playground.tsx
@@ -1,50 +1,11 @@
-import type {ReactNode} from 'react';
-import React, {useState} from 'react';
+import React from 'react';
 
-import {Popover, UnstyledButton} from '../src';
+import {Page} from '../src';
 
 export function Playground() {
-  return <DefinitionPopover definition="hello world" title="hello world" />;
-}
-
-export interface Props {
-  /** A title to be displayed in the popover */
-  title: string;
-  /** The content to be displayed in the popover */
-  definition: ReactNode;
-}
-
-export function DefinitionPopover({title, definition}: Props) {
-  const [hoverActive, setHoverActive] = useState(false);
-
-  function handleClose() {
-    setHoverActive(false);
-  }
-
-  function handleActivatorMouseEnter() {
-    setHoverActive(true);
-  }
-
-  function handleActivatorMouseLeave() {
-    setHoverActive(false);
-  }
-
   return (
-    <Popover
-      active={hoverActive}
-      activator={
-        <UnstyledButton
-          aria-describedby="hi"
-          type="button"
-          onMouseEnter={handleActivatorMouseEnter}
-          onMouseLeave={handleActivatorMouseLeave}
-        >
-          {title}
-        </UnstyledButton>
-      }
-      onClose={handleClose}
-    >
-      {definition}
-    </Popover>
+    <Page title="Playground">
+      {/* Add the code you want to test in here */}
+    </Page>
   );
 }