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: { /**