feat(data-table): add ToolbarMenu

Requires menuRef from OverflowMenu to be exported.

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 152 components exported from carbon-components-svelte 0.20.0
+> 154 components exported from carbon-components-svelte 0.20.0
 
 - Accordion
   - [Accordion](#accordion)
@@ -44,6 +44,8 @@
   - [Toolbar](#toolbar)
   - [ToolbarBatchActions](#toolbarbatchactions)
   - [ToolbarContent](#toolbarcontent)
+  - [ToolbarMenu](#toolbarmenu)
+  - [ToolbarMenuItem](#toolbarmenuitem)
   - [ToolbarSearch](#toolbarsearch)
 - [DataTableSkeleton](#datatableskeleton)
 - DatePicker
@@ -796,6 +798,7 @@ interface ComboBoxItem {
 | id               | <code>string</code>                                         | --            | Set an id for the list box component.                                     |
 | name             | <code>string</code>                                         | --            | Specify a name attribute for the input.                                   |
 | ref              | <code>null &#124; HTMLInputElement</code>                   | `null`        | Obtain a reference to the input HTML element.                             |
+| listRef          | <code>null &#124; HTMLDivElement</code>                     | `null`        | Obtain a reference to the list HTML element.                              |
 
 ### Slots
 
@@ -807,6 +810,7 @@ No slots.
 - `on:focus`
 - `on:blur`
 - `on:clear`
+- `on:scroll`
 
 ### Dispatched events
 
@@ -2363,7 +2367,7 @@ import { ListBoxMenu } from "carbon-components-svelte";
 
 ### Forwarded events
 
-No forwarded events.
+- `on:scroll`
 
 ### Dispatched events
 
@@ -3019,6 +3023,8 @@ import { OverflowMenu } from "carbon-components-svelte";
 | iconClass        | <code>string</code>                                                 | --                                 | Specify the icon class.                                            |
 | iconDescription  | <code>string</code>                                                 | `"Open and close list of options"` | Specify the ARIA label for the icon.                               |
 | id               | <code>string</code>                                                 | --                                 | Set an id for the button element.                                  |
+| buttonRef        | <code>null &#124; HTMLButtonElement</code>                          | `null`                             | Obtain a reference to the trigger button element.                  |
+| menuRef          | <code>null &#124; HTMLUListElement</code>                           | `null`                             | Obtain a reference to the overflow menu element.                   |
 
 ### Slots
 
@@ -5322,6 +5328,58 @@ No dispatched events.
 
 ---
 
+## ToolbarMenu
+
+### Import path
+
+```js
+import { ToolbarMenu } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToolbarMenuItem
+
+### Import path
+
+```js
+import { ToolbarMenuItem } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- **default**: `<div>...</div>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
 ## ToolbarSearch
 
 ### Import path

docs/src/PUBLIC_API.json

@@ -1950,6 +1950,15 @@
             "type": "null | HTMLInputElement",
             "description": "Obtain a reference to the input HTML element"
           }
+        ],
+        [
+          "listRef",
+          {
+            "kind": "let",
+            "value": "null",
+            "type": "null | HTMLDivElement",
+            "description": "Obtain a reference to the list HTML element"
+          }
         ]
       ],
       "slots": [],
@@ -1957,8 +1966,8 @@
         [
           "keydown",
           {
-            "start": 5481,
+            "start": 5616,
-            "end": 5491,
+            "end": 5626,
             "type": "EventHandler",
             "name": "keydown",
             "modifiers": [],
@@ -1968,8 +1977,8 @@
         [
           "focus",
           {
-            "start": 6068,
+            "start": 6203,
-            "end": 6076,
+            "end": 6211,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],
@@ -1979,8 +1988,8 @@
         [
           "blur",
           {
-            "start": 6085,
+            "start": 6220,
-            "end": 6092,
+            "end": 6227,
             "type": "EventHandler",
             "name": "blur",
             "modifiers": [],
@@ -1990,13 +1999,24 @@
         [
           "clear",
           {
-            "start": 6543,
+            "start": 6678,
-            "end": 6551,
+            "end": 6686,
             "type": "EventHandler",
             "name": "clear",
             "modifiers": [],
             "expression": null
           }
+        ],
+        [
+          "scroll",
+          {
+            "start": 7220,
+            "end": 7229,
+            "type": "EventHandler",
+            "name": "scroll",
+            "modifiers": [],
+            "expression": null
+          }
         ]
       ],
       "dispatched_events": [
@@ -6967,7 +6987,19 @@
           }
         ]
       ],
-      "forwarded_events": [],
+      "forwarded_events": [
+        [
+          "scroll",
+          {
+            "start": 403,
+            "end": 412,
+            "type": "EventHandler",
+            "name": "scroll",
+            "modifiers": [],
+            "expression": null
+          }
+        ]
+      ],
       "dispatched_events": []
     },
     "ListBoxMenuIcon": {
@@ -8800,6 +8832,24 @@
             "type": "string",
             "description": "Set an id for the button element"
           }
+        ],
+        [
+          "buttonRef",
+          {
+            "kind": "let",
+            "value": "null",
+            "type": "null | HTMLButtonElement",
+            "description": "Obtain a reference to the trigger button element"
+          }
+        ],
+        [
+          "menuRef",
+          {
+            "kind": "let",
+            "value": "null",
+            "type": "null | HTMLUListElement",
+            "description": "Obtain a reference to the overflow menu element"
+          }
         ]
       ],
       "slots": [
@@ -8808,14 +8858,14 @@
           {
             "attributes": [
               {
-                "start": 4567,
+                "start": 4805,
-                "end": 4578,
+                "end": 4816,
                 "type": "Attribute",
                 "name": "name",
                 "value": [
                   {
-                    "start": 4573,
+                    "start": 4811,
-                    "end": 4577,
+                    "end": 4815,
                     "type": "Text",
                     "raw": "menu",
                     "data": "menu"
@@ -8825,39 +8875,39 @@
             ],
             "children": [
               {
-                "start": 4579,
+                "start": 4817,
-                "end": 4584,
+                "end": 4822,
                 "type": "Text",
                 "raw": "\n    ",
                 "data": "\n    "
               },
               {
-                "start": 4584,
+                "start": 4822,
-                "end": 4747,
+                "end": 4985,
                 "type": "InlineComponent",
                 "name": "svelte:component",
                 "attributes": [
                   {
-                    "start": 4628,
+                    "start": 4866,
-                    "end": 4658,
+                    "end": 4896,
                     "type": "Attribute",
                     "name": "aria-label",
                     "value": [
                       {
-                        "start": 4640,
+                        "start": 4878,
-                        "end": 4657,
+                        "end": 4895,
                         "type": "MustacheTag",
                         "expression": {
                           "type": "Identifier",
-                          "start": 4641,
+                          "start": 4879,
-                          "end": 4656,
+                          "end": 4894,
                           "loc": {
                             "start": {
-                              "line": 196,
+                              "line": 206,
                               "column": 19
                             },
                             "end": {
-                              "line": 196,
+                              "line": 206,
                               "column": 34
                             }
                           },
@@ -8867,26 +8917,26 @@
                     ]
                   },
                   {
-                    "start": 4665,
+                    "start": 4903,
-                    "end": 4690,
+                    "end": 4928,
                     "type": "Attribute",
                     "name": "title",
                     "value": [
                       {
-                        "start": 4672,
+                        "start": 4910,
-                        "end": 4689,
+                        "end": 4927,
                         "type": "MustacheTag",
                         "expression": {
                           "type": "Identifier",
-                          "start": 4673,
+                          "start": 4911,
-                          "end": 4688,
+                          "end": 4926,
                           "loc": {
                             "start": {
-                              "line": 197,
+                              "line": 207,
                               "column": 14
                             },
                             "end": {
-                              "line": 197,
+                              "line": 207,
                               "column": 29
                             }
                           },
@@ -8896,33 +8946,33 @@
                     ]
                   },
                   {
-                    "start": 4697,
+                    "start": 4935,
-                    "end": 4740,
+                    "end": 4978,
                     "type": "Attribute",
                     "name": "class",
                     "value": [
                       {
-                        "start": 4704,
+                        "start": 4942,
-                        "end": 4729,
+                        "end": 4967,
                         "type": "Text",
                         "raw": "bx--overflow-menu__icon ",
                         "data": "bx--overflow-menu__icon "
                       },
                       {
-                        "start": 4728,
+                        "start": 4966,
-                        "end": 4739,
+                        "end": 4977,
                         "type": "MustacheTag",
                         "expression": {
                           "type": "Identifier",
-                          "start": 4729,
+                          "start": 4967,
-                          "end": 4738,
+                          "end": 4976,
                           "loc": {
                             "start": {
-                              "line": 198,
+                              "line": 208,
                               "column": 38
                             },
                             "end": {
-                              "line": 198,
+                              "line": 208,
                               "column": 47
                             }
                           },
@@ -8935,15 +8985,15 @@
                 "children": [],
                 "expression": {
                   "type": "Identifier",
-                  "start": 4615,
+                  "start": 4853,
-                  "end": 4619,
+                  "end": 4857,
                   "loc": {
                     "start": {
-                      "line": 195,
+                      "line": 205,
                       "column": 13
                     },
                     "end": {
-                      "line": 195,
+                      "line": 205,
                       "column": 17
                     }
                   },
@@ -8951,8 +9001,8 @@
                 }
               },
               {
-                "start": 4747,
+                "start": 4985,
-                "end": 4750,
+                "end": 4988,
                 "type": "Text",
                 "raw": "\n  ",
                 "data": "\n  "
@@ -8976,8 +9026,8 @@
         [
           "click",
           {
-            "start": 4089,
+            "start": 4327,
-            "end": 4097,
+            "end": 4335,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -8987,8 +9037,8 @@
         [
           "mouseover",
           {
-            "start": 4213,
+            "start": 4451,
-            "end": 4225,
+            "end": 4463,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -8998,8 +9048,8 @@
         [
           "mouseenter",
           {
-            "start": 4228,
+            "start": 4466,
-            "end": 4241,
+            "end": 4479,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -9009,8 +9059,8 @@
         [
           "mouseleave",
           {
-            "start": 4244,
+            "start": 4482,
-            "end": 4257,
+            "end": 4495,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -9020,8 +9070,8 @@
         [
           "keydown",
           {
-            "start": 4260,
+            "start": 4498,
-            "end": 4270,
+            "end": 4508,
             "type": "EventHandler",
             "name": "keydown",
             "modifiers": [],
@@ -15563,6 +15613,40 @@
       "forwarded_events": [],
       "dispatched_events": []
     },
+    "ToolbarMenu": {
+      "moduleName": "ToolbarMenu",
+      "props": [],
+      "slots": [
+        [
+          "default",
+          {
+            "attributes": [],
+            "children": [],
+            "default": true,
+            "default_value": ""
+          }
+        ]
+      ],
+      "forwarded_events": [],
+      "dispatched_events": []
+    },
+    "ToolbarMenuItem": {
+      "moduleName": "ToolbarMenuItem",
+      "props": [],
+      "slots": [
+        [
+          "default",
+          {
+            "attributes": [],
+            "children": [],
+            "default": true,
+            "default_value": ""
+          }
+        ]
+      ],
+      "forwarded_events": [],
+      "dispatched_events": []
+    },
     "ToolbarSearch": {
       "moduleName": "ToolbarSearch",
       "props": [

src/ComboBox/ComboBox.svelte

@@ -111,7 +111,7 @@
    * Obtain a reference to the list HTML element
    * @type {null | HTMLDivElement} [ref=null]
    */
-	export let listRef = 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;
+  let buttonWidth = undefined;
-  $: buttonWidth = undefined;
+  let didOpen = false;
-  $: menuRef = undefined;
-  $: 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";

types/index.d.ts

@@ -662,6 +662,12 @@ export class ComboBox extends CarbonSvelteComponent {
      * @default null
      */
     ref?: null | HTMLInputElement;
+
+    /**
+     * Obtain a reference to the list HTML element
+     * @default null
+     */
+    listRef?: null | HTMLDivElement;
   };
 }
 
@@ -2929,6 +2935,18 @@ export class OverflowMenu extends CarbonSvelteComponent {
      * Set an id for the button element
      */
     id?: string;
+
+    /**
+     * Obtain a reference to the trigger button element
+     * @default null
+     */
+    buttonRef?: null | HTMLButtonElement;
+
+    /**
+     * Obtain a reference to the overflow menu element
+     * @default null
+     */
+    menuRef?: null | HTMLUListElement;
   };
 
   $$slot_def: { menu: {}; default: {} };
@@ -5124,6 +5142,14 @@ export class ToolbarContent extends CarbonSvelteComponent {
   $$slot_def: { default: {} };
 }
 
+export class ToolbarMenu extends CarbonSvelteComponent {
+  $$slot_def: { default: {} };
+}
+
+export class ToolbarMenuItem extends CarbonSvelteComponent {
+  $$slot_def: { default: {} };
+}
+
 export class ToolbarSearch extends CarbonSvelteComponent {
   $$prop_def: {
     /**