From 0e34a0631f8c94874d097f911e662ee5b36560bf Mon Sep 17 00:00:00 2001
From: Naegelin <>
Date: Fri, 12 Aug 2022 10:45:45 +0200
Subject: [PATCH] cancelable event

---
 COMPONENT_INDEX.md                            |  4 ++-
 docs/src/COMPONENT_API.json                   |  2 +-
 src/DataTable/ToolbarBatchActions.svelte      | 32 +++++++++----------
 .../DataTable/ToolbarBatchActions.svelte.d.ts |  2 +-
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index bcc834a6..c0bb3fc0 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4435,7 +4435,9 @@ None.
 
 ### Events
 
-None.
+| Event name | Type       | Detail            |
+| :--------- | :--------- | :---------------- |
+| cancel     | dispatched | <code>null</code> |
 
 ## `ToolbarContent`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 3e2e91ce..de37420f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -13684,7 +13684,7 @@
           "slot_props": "{}"
         }
       ],
-      "events": [],
+      "events": [{ "type": "dispatched", "name": "cancel", "detail": "null" }],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
diff --git a/src/DataTable/ToolbarBatchActions.svelte b/src/DataTable/ToolbarBatchActions.svelte
index 4cbcc79a..9f539412 100644
--- a/src/DataTable/ToolbarBatchActions.svelte
+++ b/src/DataTable/ToolbarBatchActions.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {null} cancel
+   */
+
   /**
    * Override the total items selected text
    * @type {(totalSelected: number) => string}
@@ -6,29 +10,25 @@
   export let formatTotalSelected = (totalSelected) =>
     `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
 
-   /** 
-   * Override the default behavior of the cancel button 
-   * @type {function}
-   */
-  export let cancel ;
-  
-  import { onMount, getContext } from "svelte";
+  import { onMount, getContext, createEventDispatcher } from "svelte";
   import Button from "../Button/Button.svelte";
 
   let batchSelectedIds = [];
 
+  const dispatch = createEventDispatcher();
+
   $: showActions = batchSelectedIds.length > 0;
 
   const ctx = getContext("DataTable");
-  
-  $: cancelClick =  () => {
-    if (typeof cancel === "function") {
-      cancel();
-    } else {
-      ctx.resetSelectedRowIds()
+
+  function cancel() {
+    const shouldContinue = dispatch("cancel", null, { cancelable: true });
+
+    if (shouldContinue) {
+      ctx.resetSelectedRowIds();
     }
-  };
-  
+  }
+
   const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
     batchSelectedIds = value;
   });
@@ -64,7 +64,7 @@
       <Button
         class="bx--batch-summary__cancel"
         tabindex="{showActions ? '0' : '-1'}"
-        on:click="{cancelClick}"
+        on:click="{cancel}"
       >
         <slot name="cancel">Cancel</slot>
       </Button>
diff --git a/types/DataTable/ToolbarBatchActions.svelte.d.ts b/types/DataTable/ToolbarBatchActions.svelte.d.ts
index 9cf7306b..f9dfa900 100644
--- a/types/DataTable/ToolbarBatchActions.svelte.d.ts
+++ b/types/DataTable/ToolbarBatchActions.svelte.d.ts
@@ -12,6 +12,6 @@ export interface ToolbarBatchActionsProps
 
 export default class ToolbarBatchActions extends SvelteComponentTyped<
   ToolbarBatchActionsProps,
-  {},
+  { cancel: CustomEvent<null> },
   { default: {}; cancel: {} }
 > {}