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 | let
| No | (totalSelected: number) => string
| (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`
| Override the total items selected text |
-| active | No | let
| No | boolean
| false
| Set to `true` to show the toolbar regardless of row selection |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| active | No | let
| Yes | undefined | boolean
| undefined
| Use a boolean to show or hide the toolbar |
+| formatTotalSelected | No | let
| No | (totalSelected: number) => string
| (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`
| 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;
+ }
+ });
{#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<