From 837716ff8b3194631429cf3054160a8dae06ebf7 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 7 Dec 2022 20:25:36 -0800
Subject: [PATCH] fix(overflow-menu): dispatch "close" event when clicking
 outside (#1546)

Fixes #1541
---
 COMPONENT_INDEX.md                          | 16 ++++++++--------
 docs/src/COMPONENT_API.json                 |  2 +-
 src/OverflowMenu/OverflowMenu.svelte        |  5 ++++-
 types/OverflowMenu/OverflowMenu.svelte.d.ts |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c92b69aa..8ff0eea0 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2615,14 +2615,14 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail                                        |
-| :--------- | :--------- | :-------------------------------------------- |
-| close      | dispatched | <code>{ index: number; text: string; }</code> |
-| click      | forwarded  | --                                            |
-| mouseover  | forwarded  | --                                            |
-| mouseenter | forwarded  | --                                            |
-| mouseleave | forwarded  | --                                            |
-| keydown    | forwarded  | --                                            |
+| Event name | Type       | Detail                                                    |
+| :--------- | :--------- | :-------------------------------------------------------- |
+| close      | dispatched | <code>null &#124; { index: number; text: string; }</code> |
+| click      | forwarded  | --                                                        |
+| mouseover  | forwarded  | --                                                        |
+| mouseenter | forwarded  | --                                                        |
+| mouseleave | forwarded  | --                                                        |
+| keydown    | forwarded  | --                                                        |
 
 ## `OverflowMenuItem`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 6d18c68f..b870e435 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -8063,7 +8063,7 @@
         {
           "type": "dispatched",
           "name": "close",
-          "detail": "{ index: number; text: string; }"
+          "detail": "null | { index: number; text: string; }"
         },
         { "type": "forwarded", "name": "click", "element": "button" },
         { "type": "forwarded", "name": "mouseover", "element": "button" },
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 522fd70e..f3c5fd1c 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * @event {{ index: number; text: string; }} close
+   * @event {null | { index: number; text: string; }} close
    */
 
   /**
@@ -205,6 +205,7 @@
   on:click="{({ target }) => {
     if (!(menuRef && menuRef.contains(target))) {
       open = !open;
+      if (!open) dispatch('close');
     }
   }}"
   on:mouseover
@@ -217,6 +218,7 @@
         e.preventDefault();
       } else if (e.key === 'Escape') {
         e.stopPropagation();
+        dispatch('close');
         open = false;
         buttonRef.focus();
       }
@@ -225,6 +227,7 @@
   on:focusout="{(e) => {
     if (open) {
       if (!buttonRef.contains(e.relatedTarget)) {
+        dispatch('close');
         open = false;
       }
     }
diff --git a/types/OverflowMenu/OverflowMenu.svelte.d.ts b/types/OverflowMenu/OverflowMenu.svelte.d.ts
index a9807a10..8fc62c7c 100644
--- a/types/OverflowMenu/OverflowMenu.svelte.d.ts
+++ b/types/OverflowMenu/OverflowMenu.svelte.d.ts
@@ -80,7 +80,7 @@ export interface OverflowMenuProps
 export default class OverflowMenu extends SvelteComponentTyped<
   OverflowMenuProps,
   {
-    close: CustomEvent<{ index: number; text: string }>;
+    close: CustomEvent<null | { index: number; text: string }>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];