From 6d805e73a8de38ed4641c25a6796a5ed5776b19e Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sun, 2 May 2021 15:23:34 -0700
Subject: [PATCH] feat(side-nav): dispatch open, close, click:overlay events

---
 COMPONENT_INDEX.md                 |  6 +++++-
 docs/src/COMPONENT_API.json        |  6 +++++-
 src/UIShell/SideNav/SideNav.svelte | 13 ++++++++++++-
 types/UIShell/SideNav/SideNav.d.ts |  6 +++++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a02e420f..fe6eb1c0 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3216,7 +3216,11 @@ None.
 
 ### Events
 
-None.
+| Event name    | Type       | Detail           |
+| :------------ | :--------- | :--------------- |
+| open          | dispatched | <code>any</code> |
+| close         | dispatched | <code>any</code> |
+| click:overlay | dispatched | <code>any</code> |
 
 ## `SideNavDivider`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index bd20b4fb..a8dbce39 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -8401,7 +8401,11 @@
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [],
+      "events": [
+        { "type": "dispatched", "name": "open", "detail": "any" },
+        { "type": "dispatched", "name": "close", "detail": "any" },
+        { "type": "dispatched", "name": "click:overlay", "detail": "any" }
+      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "nav" }
     },
diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte
index 728ffdb2..c6599986 100644
--- a/src/UIShell/SideNav/SideNav.svelte
+++ b/src/UIShell/SideNav/SideNav.svelte
@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @event {any} open
+   * @event {any} close
+   * @event {any} click:overlay
+   */
+
   /** Set to `true` to use the fixed variant */
   export let fixed = false;
 
@@ -11,9 +17,13 @@
   /** Set to `true` to toggle the expanded state */
   export let isOpen = false;
 
-  import { onMount } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
 
+  const dispatch = createEventDispatcher();
+
+  $: dispatch(isOpen ? "open" : "close");
+
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
     return () => shouldRenderHamburgerMenu.set(false);
@@ -23,6 +33,7 @@
 {#if !fixed}
   <div
     on:click="{() => {
+      dispatch('click:overlay');
       isOpen = false;
     }}"
     class:bx--side-nav__overlay="{true}"
diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts
index ecec9933..4663c9fb 100644
--- a/types/UIShell/SideNav/SideNav.d.ts
+++ b/types/UIShell/SideNav/SideNav.d.ts
@@ -23,6 +23,10 @@ export interface SideNavProps
 
 export default class SideNav extends SvelteComponentTyped<
   SideNavProps,
-  {},
+  {
+    open: CustomEvent<any>;
+    close: CustomEvent<any>;
+    ["click:overlay"]: CustomEvent<any>;
+  },
   { default: {} }
 > {}