feat(data-table): add toolbar, toolbar search

src/DataTable/DataTable.svelte

@@ -149,6 +149,7 @@
 </script>
 
 <TableContainer title="{title}" description="{description}" {...$$restProps}>
+  <slot />
   <Table
     zebra="{zebra}"
     size="{size}"

src/DataTable/Toolbar.svelte

@@ -0,0 +1,19 @@
+<script>
+  /**
+   * Specify the toolbar size
+   * @type {"sm" | "default"} [size="default"]
+   */
+  export let size = "default";
+</script>
+
+<section
+  aria-label="data table toolbar"
+  class:bx--table-toolbar="{true}"
+  class:bx--table-toolbar--small="{size === 'sm'}"
+  class:bx--table-toolbar--normal="{size === 'default'}"
+  {...$$restProps}
+>
+  <div class:bx--toolbar-content="{true}">
+    <slot />
+  </div>
+</section>

src/DataTable/ToolbarSearch.svelte

@@ -0,0 +1,67 @@
+<script>
+  /**
+   * Specify the value of the search input
+   * @type {string} [value=""]
+   */
+  export let value = "";
+
+  /**
+   * Set to `true` to expand the search bar
+   * @type {boolean} [expanded=false]
+   */
+  export let expanded = false;
+
+  /**
+   * Set to `true` to keep the search bar expanded
+   * @type {boolean} [persistent=false]
+   */
+  export let persistent = false;
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
+  export let tabindex = "0";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
+  export let ref = null;
+
+  import { tick } from "svelte";
+  import { Search } from "../Search";
+
+  async function expandSearch() {
+    if (persistent || expanded) return;
+    expanded = true;
+    await tick();
+    ref.focus();
+  }
+</script>
+
+<div
+  tabindex="{expanded ? '-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}"
+  on:click="{expandSearch}"
+  on:focus="{expandSearch}"
+>
+  <Search
+    size="sm"
+    tabindex="{expanded ? tabindex : '-1'}"
+    aria-hidden="{!expanded}"
+    {...$$restProps}
+    bind:ref
+    bind:value
+    on:change
+    on:input
+    on:focus
+    on:blur
+    on:blur="{() => {
+      expanded = !persistent && !!value.length;
+    }}"
+  />
+</div>

src/DataTable/index.js

@@ -6,3 +6,5 @@ export { default as TableContainer } from "./TableContainer.svelte";
 export { default as TableHead } from "./TableHead.svelte";
 export { default as TableHeader } from "./TableHeader.svelte";
 export { default as TableRow } from "./TableRow.svelte";
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarSearch } from "./ToolbarSearch.svelte";