From 87ed2b47823a9f94ef1d100ae94e7bea5cd95df5 Mon Sep 17 00:00:00 2001
From: naegelin <naegelin@gmail.com>
Date: Thu, 11 Aug 2022 14:07:28 -0400
Subject: [PATCH 1/2] feat(ToolbarBatchActions): Override cancel button

Fixes #1438.

Give the user the ability to override the functionality of the cancel button by passing in their own function. If no override is provided, the existing functionality of reseting selected row ids is preserved.

Example implementation:

```
<ToolbarBatchActions cancel={()=>{console.log("User clicked cancel!")}}>
 ...
</ToolbarBatchActions>
```
---
 src/DataTable/ToolbarBatchActions.svelte | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/DataTable/ToolbarBatchActions.svelte b/src/DataTable/ToolbarBatchActions.svelte
index eaee6f82..4cbcc79a 100644
--- a/src/DataTable/ToolbarBatchActions.svelte
+++ b/src/DataTable/ToolbarBatchActions.svelte
@@ -6,6 +6,12 @@
   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 Button from "../Button/Button.svelte";
 
@@ -14,6 +20,15 @@
   $: showActions = batchSelectedIds.length > 0;
 
   const ctx = getContext("DataTable");
+  
+  $: cancelClick =  () => {
+    if (typeof cancel === "function") {
+      cancel();
+    } else {
+      ctx.resetSelectedRowIds()
+    }
+  };
+  
   const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
     batchSelectedIds = value;
   });
@@ -49,7 +64,7 @@
       <Button
         class="bx--batch-summary__cancel"
         tabindex="{showActions ? '0' : '-1'}"
-        on:click="{ctx.resetSelectedRowIds}"
+        on:click="{cancelClick}"
       >
         <slot name="cancel">Cancel</slot>
       </Button>

From e5ec362b267897c96f63e436445f13ae94fb8d91 Mon Sep 17 00:00:00 2001
From: Naegelin <>
Date: Fri, 12 Aug 2022 10:45:45 +0200
Subject: [PATCH 2/2] 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 45ccd2cf..7935de33 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 6ffbcfef..cb9bd3d7 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -13680,7 +13680,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: {} }
 > {}