From f298ddb45ff7a592c4b2b387699d3418ab37faf6 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      | 22 ++++++++++++++++---
 .../DataTable/ToolbarBatchActions.svelte.d.ts |  2 +-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 979e8d35..d43e129c 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4436,7 +4436,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 8487cc64..e149ae27 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -13696,7 +13696,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 c58307cf..6645b63e 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}
@@ -12,14 +16,26 @@
    */
   export let active = false;
   
-  import { onMount, getContext } from "svelte";
+  import { onMount, getContext, createEventDispatcher } from "svelte";
+
   import Button from "../Button/Button.svelte";
 
   let batchSelectedIds = [];
 
-  $: showActions = batchSelectedIds.length > 0 || active;
+  const dispatch = createEventDispatcher();
+
 
   const ctx = getContext("DataTable");
+
+  function cancel() {
+    const shouldContinue = dispatch("cancel", null, { cancelable: true });
+
+    if (shouldContinue) {
+      ctx.resetSelectedRowIds();
+    }
+  }
+
+  $: showActions = batchSelectedIds.length > 0 || active;
   const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
     batchSelectedIds = value;
   });
@@ -55,7 +71,7 @@
       <Button
         class="bx--batch-summary__cancel"
         tabindex="{showActions ? '0' : '-1'}"
-        on:click="{ctx.resetSelectedRowIds}"
+        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 8e6aa3b2..2778e7f6 100644
--- a/types/DataTable/ToolbarBatchActions.svelte.d.ts
+++ b/types/DataTable/ToolbarBatchActions.svelte.d.ts
@@ -18,6 +18,6 @@ export interface ToolbarBatchActionsProps
 
 export default class ToolbarBatchActions extends SvelteComponentTyped<
   ToolbarBatchActionsProps,
-  {},
+  { cancel: CustomEvent<null> },
   { default: {}; cancel: {} }
 > {}