cancelable event

COMPONENT_INDEX.md

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

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

src/DataTable/ToolbarBatchActions.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {null} cancel
+   */
+
   /**
    * Override the total items selected text
    * @type {(totalSelected: number) => string}
@@ -6,28 +10,24 @@
   export let formatTotalSelected = (totalSelected) =>
     `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
 
-   /** 
+  import { onMount, getContext, createEventDispatcher } from "svelte";
-   * Override the default behavior of the cancel button 
-   * @type {function}
-   */
-  export let cancel ;
-  
-  import { onMount, getContext } from "svelte";
   import Button from "../Button/Button.svelte";
 
   let batchSelectedIds = [];
 
+  const dispatch = createEventDispatcher();
+
   $: showActions = batchSelectedIds.length > 0;
 
   const ctx = getContext("DataTable");
 
-  $: cancelClick =  () => {
+  function cancel() {
-    if (typeof cancel === "function") {
+    const shouldContinue = dispatch("cancel", null, { cancelable: true });
-      cancel();
+
-    } else {
+    if (shouldContinue) {
-      ctx.resetSelectedRowIds()
+      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>

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