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

Follow-up to #1440

COMPONENT_INDEX.md

@@ -4423,9 +4423,9 @@ None.
 ### Props
 
 | Prop name           | Required | Kind             | Reactive | Type                                           | Default value                                                                                       | Description                               |
-| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| active              | No       | <code>let</code> | Yes      | <code>undefined &#124; boolean</code>          | <code>undefined</code>                                                                              | Use a boolean to show or hide the toolbar |
 | formatTotalSelected | No       | <code>let</code> | No       | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text    |
-| active              | No       | <code>let</code> | No       | <code>boolean</code>                           | <code>false</code>                                                                                  | Set to `true` to show the toolbar regardless of row selection |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -13676,14 +13676,13 @@
         {
           "name": "active",
           "kind": "let",
-          "description": "Set to `true` to show the toolbar regardless of row selection",
+          "description": "Use a boolean to show or hide the toolbar",
-          "type": "boolean",
+          "type": "undefined | boolean",
-          "value": "false",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         }
       ],
       "moduleExports": [],

src/DataTable/ToolbarBatchActions.svelte

@@ -11,20 +11,25 @@
     `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
 
   /**
-   * Set to `true` to show the toolbar regardless of row selection
+   * Use a boolean to show or hide the toolbar
-   * @type {boolean}
+   * @type {undefined | boolean}
    */
-  export let active = false;
+  export let active = undefined;
 
-  import { onMount, getContext, createEventDispatcher } from "svelte";
+  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}

types/DataTable/ToolbarBatchActions.svelte.d.ts

@@ -10,10 +10,10 @@ export interface ToolbarBatchActionsProps
   formatTotalSelected?: (totalSelected: number) => string;
 
   /**
-   * Set to `true` to show the toolbar regardless of row selection
+   * Use a boolean to show or hide the toolbar
-   * @default false
+   * @default undefined
    */
-  active?: boolean;
+  active?: undefined | boolean;
 }
 
 export default class ToolbarBatchActions extends SvelteComponentTyped<