diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index fbbe27d0..09468ccc 100644
--- a/COMPONENT_INDEX.md
+++ b/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 | string
| -- | Set an id for the list box component. |
| name | string
| -- | Specify a name attribute for the input. |
| ref | null | HTMLInputElement
| `null` | Obtain a reference to the input HTML element. |
+| listRef | null | HTMLDivElement
| `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 | string
| -- | Specify the icon class. |
| iconDescription | string
| `"Open and close list of options"` | Specify the ARIA label for the icon. |
| id | string
| -- | Set an id for the button element. |
+| buttonRef | null | HTMLButtonElement
| `null` | Obtain a reference to the trigger button element. |
+| menuRef | null | HTMLUListElement
| `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**: `
...
`
+
+### 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**: `...
`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
## ToolbarSearch
### Import path
diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json
index 626b47cc..4a9e4e57 100644
--- a/docs/src/PUBLIC_API.json
+++ b/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,
- "end": 5491,
+ "start": 5616,
+ "end": 5626,
"type": "EventHandler",
"name": "keydown",
"modifiers": [],
@@ -1968,8 +1977,8 @@
[
"focus",
{
- "start": 6068,
- "end": 6076,
+ "start": 6203,
+ "end": 6211,
"type": "EventHandler",
"name": "focus",
"modifiers": [],
@@ -1979,8 +1988,8 @@
[
"blur",
{
- "start": 6085,
- "end": 6092,
+ "start": 6220,
+ "end": 6227,
"type": "EventHandler",
"name": "blur",
"modifiers": [],
@@ -1990,13 +1999,24 @@
[
"clear",
{
- "start": 6543,
- "end": 6551,
+ "start": 6678,
+ "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,
- "end": 4578,
+ "start": 4805,
+ "end": 4816,
"type": "Attribute",
"name": "name",
"value": [
{
- "start": 4573,
- "end": 4577,
+ "start": 4811,
+ "end": 4815,
"type": "Text",
"raw": "menu",
"data": "menu"
@@ -8825,39 +8875,39 @@
],
"children": [
{
- "start": 4579,
- "end": 4584,
+ "start": 4817,
+ "end": 4822,
"type": "Text",
"raw": "\n ",
"data": "\n "
},
{
- "start": 4584,
- "end": 4747,
+ "start": 4822,
+ "end": 4985,
"type": "InlineComponent",
"name": "svelte:component",
"attributes": [
{
- "start": 4628,
- "end": 4658,
+ "start": 4866,
+ "end": 4896,
"type": "Attribute",
"name": "aria-label",
"value": [
{
- "start": 4640,
- "end": 4657,
+ "start": 4878,
+ "end": 4895,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
- "start": 4641,
- "end": 4656,
+ "start": 4879,
+ "end": 4894,
"loc": {
"start": {
- "line": 196,
+ "line": 206,
"column": 19
},
"end": {
- "line": 196,
+ "line": 206,
"column": 34
}
},
@@ -8867,26 +8917,26 @@
]
},
{
- "start": 4665,
- "end": 4690,
+ "start": 4903,
+ "end": 4928,
"type": "Attribute",
"name": "title",
"value": [
{
- "start": 4672,
- "end": 4689,
+ "start": 4910,
+ "end": 4927,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
- "start": 4673,
- "end": 4688,
+ "start": 4911,
+ "end": 4926,
"loc": {
"start": {
- "line": 197,
+ "line": 207,
"column": 14
},
"end": {
- "line": 197,
+ "line": 207,
"column": 29
}
},
@@ -8896,33 +8946,33 @@
]
},
{
- "start": 4697,
- "end": 4740,
+ "start": 4935,
+ "end": 4978,
"type": "Attribute",
"name": "class",
"value": [
{
- "start": 4704,
- "end": 4729,
+ "start": 4942,
+ "end": 4967,
"type": "Text",
"raw": "bx--overflow-menu__icon ",
"data": "bx--overflow-menu__icon "
},
{
- "start": 4728,
- "end": 4739,
+ "start": 4966,
+ "end": 4977,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
- "start": 4729,
- "end": 4738,
+ "start": 4967,
+ "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,
- "end": 4619,
+ "start": 4853,
+ "end": 4857,
"loc": {
"start": {
- "line": 195,
+ "line": 205,
"column": 13
},
"end": {
- "line": 195,
+ "line": 205,
"column": 17
}
},
@@ -8951,8 +9001,8 @@
}
},
{
- "start": 4747,
- "end": 4750,
+ "start": 4985,
+ "end": 4988,
"type": "Text",
"raw": "\n ",
"data": "\n "
@@ -8976,8 +9026,8 @@
[
"click",
{
- "start": 4089,
- "end": 4097,
+ "start": 4327,
+ "end": 4335,
"type": "EventHandler",
"name": "click",
"modifiers": [],
@@ -8987,8 +9037,8 @@
[
"mouseover",
{
- "start": 4213,
- "end": 4225,
+ "start": 4451,
+ "end": 4463,
"type": "EventHandler",
"name": "mouseover",
"modifiers": [],
@@ -8998,8 +9048,8 @@
[
"mouseenter",
{
- "start": 4228,
- "end": 4241,
+ "start": 4466,
+ "end": 4479,
"type": "EventHandler",
"name": "mouseenter",
"modifiers": [],
@@ -9009,8 +9059,8 @@
[
"mouseleave",
{
- "start": 4244,
- "end": 4257,
+ "start": 4482,
+ "end": 4495,
"type": "EventHandler",
"name": "mouseleave",
"modifiers": [],
@@ -9020,8 +9070,8 @@
[
"keydown",
{
- "start": 4260,
- "end": 4270,
+ "start": 4498,
+ "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": [
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 302d3c0b..7038b677 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/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 @@
/>
{#if open}
-
+
{#each filteredItems as item, i (item.id)}
{
+ if (ref) {
+ if (toggled) {
+ ref.style.overflow = "visible";
+ } else {
+ ref.removeAttribute("style");
+ }
+ }
+ },
+ });
+ 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%";
+
+
+
diff --git a/src/DataTable/ToolbarMenuItem.svelte b/src/DataTable/ToolbarMenuItem.svelte
new file mode 100644
index 00000000..591ea67a
--- /dev/null
+++ b/src/DataTable/ToolbarMenuItem.svelte
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/src/DataTable/index.js b/src/DataTable/index.js
index 83573a0d..7c1bd873 100644
--- a/src/DataTable/index.js
+++ b/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";
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 99cbeebc..edae7c7a 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/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,
diff --git a/src/index.js b/src/index.js
index eab208f6..7610fa9c 100644
--- a/src/index.js
+++ b/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";
diff --git a/types/index.d.ts b/types/index.d.ts
index 5759386c..541a72c2 100644
--- a/types/index.d.ts
+++ b/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: {
/**