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

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
             }
           ]
         }

docs/src/pages/components/DataTable.svx

@@ -502,6 +502,70 @@ Use `size="short"` to create a more compact table with a small toolbar.
   </Toolbar>
 </DataTable>
 
+## With toolbar and selectable rows
+
+Set `selectable` to `true` to enable selectable rows. Here, the toolbar is used standalone. For batch actions for selected rows, see the [batch selection with toolbar](#batch-selection-with-batch-actions-toolbar) example.
+
+<DataTable selectable size="short" title="Load balancers" description="Your organization's active load balancers."
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+>
+  <Toolbar size="sm">
+    <ToolbarContent>
+      <ToolbarSearch persistent />
+      <Button>Action</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
 ## Filterable
 
 Set `shouldFilterRows` to `true` to enable client-side filtering. The default filter performs string comparisons on cell values.

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,32 @@
+<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>
+
+<DataTable selectable {headers} {rows} bind:selectedRowIds>
+  <Toolbar>
+    <ToolbarContent>
+      <ToolbarSearch persistent />
+      <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.getByText("Action");
+    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"];