feat(data-table): add ToolbarMenu

Requires menuRef from OverflowMenu to be exported.

src/ComboBox/ComboBox.svelte

@@ -106,12 +106,12 @@
    * @type {null | HTMLInputElement} [ref=null]
    */
   export let ref = null;
-  
-	/**
-	 * Obtain a reference to the list HTML element
-	 * @type {null | HTMLDivElement} [ref=null]
-	 */
-	export let listRef = null  
+
+  /**
+   * Obtain a reference to the list HTML element
+   * @type {null | HTMLDivElement} [ref=null]
+   */
+  export let listRef = null;
 
   /**
    * @typedef {{ id: string; text: string; }} ComboBoxItem
@@ -290,7 +290,12 @@
       />
     </ListBoxField>
     {#if open}
-      <ListBoxMenu aria-label="{ariaLabel}" id="{id}" on:scroll bind:ref={listRef}>
+      <ListBoxMenu
+        aria-label="{ariaLabel}"
+        id="{id}"
+        on:scroll
+        bind:ref="{listRef}"
+      >
         {#each filteredItems as item, i (item.id)}
           <ListBoxMenuItem
             id="{item.id}"

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";

src/OverflowMenu/OverflowMenu.svelte

@@ -53,6 +53,18 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
 
+  /**
+   * Obtain a reference to the trigger button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let buttonRef = null;
+
+  /**
+   * Obtain a reference to the overflow menu element
+   * @type {null | HTMLUListElement} [ref=null]
+   */
+  export let menuRef = null;
+
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
   import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
@@ -64,10 +76,8 @@
   const focusedId = writable(undefined);
   const currentIndex = writable(-1);
 
-  $: buttonRef = undefined;
-  $: buttonWidth = undefined;
-  $: menuRef = undefined;
-  $: didOpen = false;
+  let buttonWidth = undefined;
+  let didOpen = false;
 
   setContext("OverflowMenu", {
     focusedId,

src/index.js

@@ -27,6 +27,8 @@ export {
   ToolbarContent,
   ToolbarSearch,
   ToolbarBatchActions,
+  ToolbarMenu,
+  ToolbarMenuItem,
 } from "./DataTable";
 export { DataTableSkeleton } from "./DataTableSkeleton";
 export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";