feat(toolbar-batch-actions): dispatch cancelable on:cancel event (#1441)

Closes #1438

COMPONENT_INDEX.md

@@ -4436,7 +4436,9 @@ None.
 
 ### Events
 
-None.
+| Event name | Type       | Detail            |
+| :--------- | :--------- | :---------------- |
+| cancel     | dispatched | <code>null</code> |
 
 ## `ToolbarContent`
 

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" }
     },

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>

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: {} }
 > {}