fix(toolbar-batch-actions): active prop should be reactive (#1445)

Follow-up to #1440

src/DataTable/ToolbarBatchActions.svelte

@@ -9,22 +9,27 @@
    */
   export let formatTotalSelected = (totalSelected) =>
     `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
-  
-  /** 
-   * Set to `true` to show the toolbar regardless of row selection
-   * @type {boolean}
+
+  /**
+   * Use a boolean to show or hide the toolbar
+   * @type {undefined | boolean}
    */
-  export let active = false;
-  
-  import { onMount, getContext, createEventDispatcher } from "svelte";
+  export let active = undefined;
+
+  import {
+    onMount,
+    getContext,
+    createEventDispatcher,
+    afterUpdate,
+  } from "svelte";
 
   import Button from "../Button/Button.svelte";
 
   let batchSelectedIds = [];
+  let prevActive;
 
   const dispatch = createEventDispatcher();
 
-
   const ctx = getContext("DataTable");
 
   function cancel() {
@@ -36,6 +41,14 @@
   }
 
   $: showActions = batchSelectedIds.length > 0 || active;
+  $: {
+    if (prevActive !== active && active === false) {
+      showActions = false;
+    }
+
+    prevActive = active;
+  }
+
   const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
     batchSelectedIds = value;
   });
@@ -53,6 +66,12 @@
       unsubscribeOverflow();
     };
   });
+
+  afterUpdate(() => {
+    if (active === false && showActions) {
+      active = true;
+    }
+  });
 </script>
 
 {#if !overflowVisible}