feat(toolbar-search): add disabled state

COMPONENT_INDEX.md

@@ -4151,6 +4151,7 @@ None.
 | expanded   | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to expand the search bar        |
 | value      | <code>let</code> | Yes      | <code>number &#124; string</code>         | <code>""</code>    | Specify the value of the search input         |
 | persistent | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | Set to `true` to keep the search bar expanded |
+| disabled   | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | Set to `true` to disable the search bar       |
 | tabindex   | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>   | Specify the tabindex                          |
 
 ### Slots

docs/src/COMPONENT_API.json

@@ -3069,6 +3069,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the search bar",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "tabindex",
           "kind": "let",

src/DataTable/ToolbarSearch.svelte

@@ -11,6 +11,9 @@
   /** Set to `true` to keep the search bar expanded */
   export let persistent = false;
 
+  /** Set to `true` to disable the search bar */
+  export let disabled = false;
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -21,10 +24,10 @@
   export let ref = null;
 
   import { tick } from "svelte";
-  import { Search } from "../Search";
+  import Search from "../Search/Search.svelte";
 
   async function expandSearch() {
-    if (persistent || expanded) return;
+    if (disabled || persistent || expanded) return;
     expanded = true;
     await tick();
     ref.focus();
@@ -32,17 +35,19 @@
 </script>
 
 <div
-  tabindex="{expanded ? '-1' : tabindex}"
+  tabindex="{expanded || disabled ? '-1' : tabindex}"
   class:bx--toolbar-action="{true}"
   class:bx--toolbar-search-container-active="{expanded}"
   class:bx--toolbar-search-container-expandable="{!persistent}"
   class:bx--toolbar-search-container-persistent="{persistent}"
+  class:bx--toolbar-search-container-disabled="{disabled}"
   on:click="{expandSearch}"
   on:focus="{expandSearch}"
 >
   <Search
     size="sm"
     tabindex="{expanded ? tabindex : '-1'}"
+    disabled="{disabled}"
     {...$$restProps}
     bind:ref
     bind:value

types/DataTable/ToolbarSearch.d.ts

@@ -19,6 +19,12 @@ export interface ToolbarSearchProps {
    */
   persistent?: boolean;
 
+  /**
+   * Set to `true` to disable the search bar
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the tabindex
    * @default "0"