feat(data-table): add ToolbarMenu

Requires menuRef from OverflowMenu to be exported.

src/DataTable/Toolbar.svelte

@@ -4,9 +4,26 @@
    * @type {"sm" | "default"} [size="default"]
    */
   export let size = "default";
+
+  import { setContext } from "svelte";
+
+  let ref = null;
+
+  setContext("Toolbar", {
+    setOverflow: (toggled) => {
+      if (ref) {
+        if (toggled) {
+          ref.style.overflow = "visible";
+        } else {
+          ref.removeAttribute("style");
+        }
+      }
+    },
+  });
 </script>
 
 <section
+  bind:this="{ref}"
   aria-label="data table toolbar"
   class:bx--table-toolbar="{true}"
   class:bx--table-toolbar--small="{size === 'sm'}"

src/DataTable/ToolbarMenu.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { getContext } from "svelte";
+  import Settings16 from "carbon-icons-svelte/lib/Settings16";
+  import { OverflowMenu } from "../OverflowMenu";
+
+  const ctx = getContext("Toolbar");
+
+  let menuRef = null;
+
+  $: ctx.setOverflow(menuRef != null);
+  $: if (menuRef) menuRef.style.top = "100%";
+</script>
+
+<OverflowMenu
+  bind:menuRef
+  icon="{Settings16}"
+  {...$$restProps}
+  class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
+  flipped
+>
+  <slot />
+</OverflowMenu>

src/DataTable/ToolbarMenuItem.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { OverflowMenuItem } from "../OverflowMenu";
+</script>
+
+<OverflowMenuItem {...$$restProps}>
+  <slot />
+</OverflowMenuItem>

src/DataTable/index.js

@@ -10,3 +10,5 @@ export { default as Toolbar } from "./Toolbar.svelte";
 export { default as ToolbarContent } from "./ToolbarContent.svelte";
 export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
 export { default as ToolbarBatchActions } from "./ToolbarBatchActions.svelte";
+export { default as ToolbarMenu } from "./ToolbarMenu.svelte";
+export { default as ToolbarMenuItem } from "./ToolbarMenuItem.svelte";