fix(toolbar): omit inert when batch actions are not present

Fixes #2404

Track batch actions visibility state instead of selection state to
prevent toolbar content from being inert when rows are selected
without the batch actions component present.

Author: metonym

docs/src/COMPONENT_API.json

@@ -18479,6 +18479,12 @@
               "type": "(visible: boolean) => void",
               "description": "",
               "optional": false
+            },
+            {
+              "name": "batchActionsActive",
+              "type": "import(\"svelte/store\").Writable<boolean>",
+              "description": "",
+              "optional": false
             }
           ]
         }

src/DataTable/Toolbar.svelte

@@ -15,6 +15,11 @@
    */
   const overflowVisible = writable(false);
 
+  /**
+   * @type {import("svelte/store").Writable<boolean>}
+   */
+  const batchActionsActive = writable(false);
+
   /**
    * @type {(visible: boolean) => void}
    */
@@ -26,6 +31,7 @@
   setContext("Toolbar", {
     overflowVisible,
     setOverflowVisible,
+    batchActionsActive,
   });
 </script>
 

src/DataTable/ToolbarBatchActions.svelte

@@ -82,6 +82,10 @@
     });
   }
 
+  $: if (ctxToolbar?.batchActionsActive) {
+    ctxToolbar.batchActionsActive.set(showActions);
+  }
+
   onMount(() => {
     return () => {
       unsubscribe?.();

src/DataTable/ToolbarContent.svelte

@@ -1,18 +1,17 @@
 <script>
   import { getContext } from "svelte";
 
-  const ctx = getContext("DataTable") ?? {};
+  const ctx = getContext("Toolbar") ?? {};
 
-  let batchSelectedIds = [];
+  let batchActionsActive = false;
 
-  if (ctx?.batchSelectedIds) {
-    ctx.batchSelectedIds.subscribe((value) => {
-      batchSelectedIds = value;
+  if (ctx?.batchActionsActive) {
+    ctx.batchActionsActive.subscribe((value) => {
+      batchActionsActive = value;
     });
   }
 
-  $: hasBatchSelection = batchSelectedIds.length > 0;
-  $: inertProps = hasBatchSelection ? { inert: true } : {};
+  $: inertProps = batchActionsActive ? { inert: true } : {};
 </script>
 
 <div class:bx--toolbar-content={true} {...inertProps}>

tests/DataTable/DataTableToolbarNoBatch.test.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import {
+    Button,
+    DataTable,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+  } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ] as const;
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+  ];
+
+  export let selectedRowIds: string[] = [];
+</script>
+
+<div data-testid="selected-ids">{JSON.stringify(selectedRowIds)}</div>
+
+<DataTable {headers} {rows} bind:selectedRowIds>
+  <Toolbar size="sm">
+    <ToolbarContent>
+      <ToolbarSearch persistent />
+      <Button data-testid="toolbar-button">Action</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>

tests/DataTable/DataTableToolbarNoBatch.test.ts

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import DataTableToolbarNoBatch from "./DataTableToolbarNoBatch.test.svelte";
+
+// Regression test for https://github.com/carbon-design-system/carbon-components-svelte/issues/2404
+describe("DataTable toolbar without batch actions", () => {
+  it("toolbar content should not be inert when rows are selected without batch actions", () => {
+    const { container } = render(DataTableToolbarNoBatch, {
+      props: {
+        selectedRowIds: ["a"],
+      },
+    });
+
+    const toolbarContent = container.querySelector(".bx--toolbar-content");
+    expect(toolbarContent).not.toHaveAttribute("inert");
+  });
+
+  it("toolbar button should be clickable when rows are selected without batch actions", async () => {
+    const clickHandler = vi.fn();
+    render(DataTableToolbarNoBatch, {
+      props: {
+        selectedRowIds: ["a"],
+      },
+    });
+
+    const button = screen.getByTestId("toolbar-button");
+    button.addEventListener("click", clickHandler);
+    await user.click(button);
+
+    expect(clickHandler).toHaveBeenCalled();
+  });
+
+  it("toolbar search should be focusable when rows are selected without batch actions", async () => {
+    render(DataTableToolbarNoBatch, {
+      props: {
+        selectedRowIds: ["a"],
+      },
+    });
+
+    const searchInput = screen.getByRole("searchbox");
+    await user.click(searchInput);
+
+    expect(searchInput).toHaveFocus();
+  });
+});

types/DataTable/Toolbar.svelte.d.ts

@@ -4,6 +4,7 @@ import type { SvelteHTMLElements } from "svelte/elements";
 export type ToolbarContext = {
   overflowVisible: import("svelte/store").Writable<boolean>;
   setOverflowVisible: (visible: boolean) => void;
+  batchActionsActive: import("svelte/store").Writable<boolean>;
 };
 
 type $RestProps = SvelteHTMLElements["section"];