From b04a281939d1b550fdf27233a165d0a1a4b4cbbc Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sun, 14 Aug 2022 14:55:38 -0700
Subject: [PATCH] fix(toolbar-batch-actions): `active` prop should be reactive
 (#1445)

Follow-up to #1440
---
 COMPONENT_INDEX.md                            |  8 ++---
 docs/src/COMPONENT_API.json                   |  7 ++--
 src/DataTable/ToolbarBatchActions.svelte      | 35 ++++++++++++++-----
 .../DataTable/ToolbarBatchActions.svelte.d.ts |  6 ++--
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index d43e129c..48664be3 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4422,10 +4422,10 @@ None.
 
 ### Props
 
-| Prop name           | Required | Kind             | Reactive | Type                                           | Default value                                                                                       | Description                                                   |
-| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| 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 |
+| 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    |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e149ae27..80b8c0f5 100644
--- a/docs/src/COMPONENT_API.json
+++ b/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",
-          "type": "boolean",
-          "value": "false",
+          "description": "Use a boolean to show or hide the toolbar",
+          "type": "undefined | boolean",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         }
       ],
       "moduleExports": [],
diff --git a/src/DataTable/ToolbarBatchActions.svelte b/src/DataTable/ToolbarBatchActions.svelte
index 6645b63e..81a24c9e 100644
--- a/src/DataTable/ToolbarBatchActions.svelte
+++ b/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}
diff --git a/types/DataTable/ToolbarBatchActions.svelte.d.ts b/types/DataTable/ToolbarBatchActions.svelte.d.ts
index 2778e7f6..17855dad 100644
--- a/types/DataTable/ToolbarBatchActions.svelte.d.ts
+++ b/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
-   * @default false
+   * Use a boolean to show or hide the toolbar
+   * @default undefined
    */
-  active?: boolean;
+  active?: undefined | boolean;
 }
 
 export default class ToolbarBatchActions extends SvelteComponentTyped<