From cbea1df97a33ea7c1efa76689a9c63b07279e995 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 3 Feb 2021 10:25:29 -0800
Subject: [PATCH] feat(modal): dispatch transitionend event

---
 COMPONENT_INDEX.md                     | 43 +++++++++++++-------------
 docs/src/COMPONENT_API.json            | 11 ++++++-
 src/ComposedModal/ComposedModal.svelte | 11 +++++--
 src/Modal/Modal.svelte                 |  9 ++++++
 types/ComposedModal/ComposedModal.d.ts |  2 +-
 types/Modal/Modal.d.ts                 |  1 +
 6 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 4a95d08d..9e45c596 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -659,16 +659,16 @@ None.
 
 ### Events
 
-| Event name    | Type       | Detail |
-| :------------ | :--------- | :----- |
-| click         | forwarded  | --     |
-| mouseover     | forwarded  | --     |
-| mouseenter    | forwarded  | --     |
-| mouseleave    | forwarded  | --     |
-| transitionend | forwarded  | --     |
-| submit        | dispatched | --     |
-| close         | dispatched | --     |
-| open          | dispatched | --     |
+| Event name    | Type       | Detail                          |
+| :------------ | :--------- | :------------------------------ |
+| transitionend | dispatched | <code>{ open: boolean; }</code> |
+| click         | forwarded  | --                              |
+| mouseover     | forwarded  | --                              |
+| mouseenter    | forwarded  | --                              |
+| mouseleave    | forwarded  | --                              |
+| submit        | dispatched | --                              |
+| close         | dispatched | --                              |
+| open          | dispatched | --                              |
 
 ## `Content`
 
@@ -2041,17 +2041,18 @@ None.
 
 ### Events
 
-| Event name              | Type       | Detail |
-| :---------------------- | :--------- | :----- |
-| keydown                 | forwarded  | --     |
-| click                   | forwarded  | --     |
-| mouseover               | forwarded  | --     |
-| mouseenter              | forwarded  | --     |
-| mouseleave              | forwarded  | --     |
-| submit                  | dispatched | --     |
-| click:button--secondary | dispatched | --     |
-| close                   | dispatched | --     |
-| open                    | dispatched | --     |
+| Event name              | Type       | Detail                          |
+| :---------------------- | :--------- | :------------------------------ |
+| transitionend           | dispatched | <code>{ open: boolean; }</code> |
+| keydown                 | forwarded  | --                              |
+| click                   | forwarded  | --                              |
+| mouseover               | forwarded  | --                              |
+| mouseenter              | forwarded  | --                              |
+| mouseleave              | forwarded  | --                              |
+| submit                  | dispatched | --                              |
+| click:button--secondary | dispatched | --                              |
+| close                   | dispatched | --                              |
+| open                    | dispatched | --                              |
 
 ## `ModalBody`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index a6a03871..c3bb4f16 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1713,11 +1713,15 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "transitionend",
+          "detail": "{ open: boolean; }"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "forwarded", "name": "transitionend", "element": "div" },
         { "type": "dispatched", "name": "submit" },
         { "type": "dispatched", "name": "close" },
         { "type": "dispatched", "name": "open" }
@@ -5618,6 +5622,11 @@
         }
       ],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "transitionend",
+          "detail": "{ open: boolean; }"
+        },
         { "type": "forwarded", "name": "keydown", "element": "div" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index 29b2dbce..e11949e0 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the composed modal
    * @type {"xs" | "sm" | "lg"}
@@ -102,8 +106,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend
-  on:transitionend="{({ currentTarget }) => {
+  on:transitionend="{({ propertyName, currentTarget }) => {
+    if (propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+
     if (didOpen) {
       focus(currentTarget);
       didOpen = false;
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index d31c22fd..c167dec4 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the modal
    * @type {"xs" | "sm" | "lg"}
@@ -151,6 +155,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
+  on:transitionend="{(e) => {
+    if (e.propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+  }}"
 >
   <div
     bind:this="{innerModal}"
diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts
index 4e78ba91..c79b4ae6 100644
--- a/types/ComposedModal/ComposedModal.d.ts
+++ b/types/ComposedModal/ComposedModal.d.ts
@@ -49,11 +49,11 @@ export default class ComposedModal {
     default: {};
   };
 
+  $on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void;
   $on(eventname: "submit", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: "open", cb: (event: CustomEvent<any>) => void): () => void;
diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts
index 8f6e8dbb..dc429975 100644
--- a/types/Modal/Modal.d.ts
+++ b/types/Modal/Modal.d.ts
@@ -120,6 +120,7 @@ export default class Modal {
     label: {};
   };
 
+  $on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
   $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;