mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(overflow-menu): dispatch "close" event when clicking outside (#1546)

Browse source 
Fixes #1541
This commit is contained in:
metonym 2022-12-07 20:25:36 -08:00 • committed by Eric Liu
commit 837716ff8b
4 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

16
COMPONENT_INDEX.md
View file

@ -2615,14 +2615,14 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------- |
| close | dispatched | <code>{ index: number; text: string; }</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------------------- |
| close | dispatched | <code>null &#124; { index: number; text: string; }</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
## `OverflowMenuItem`

2
docs/src/COMPONENT_API.json
View file

@ -8063,7 +8063,7 @@
{
"type": "dispatched",
"name": "close",
"detail": "{ index: number; text: string; }"
"detail": "null | { index: number; text: string; }"
},
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },

5
src/OverflowMenu/OverflowMenu.svelte
View file

@ -1,6 +1,6 @@
<script>
/**
* @event {{ index: number; text: string; }} close
* @event {null | { index: number; text: string; }} close
*/
/**
@ -205,6 +205,7 @@
on:click="{({ target }) => {
if (!(menuRef && menuRef.contains(target))) {
open = !open;
if (!open) dispatch('close');
}
}}"
on:mouseover
@ -217,6 +218,7 @@
e.preventDefault();
} else if (e.key === 'Escape') {
e.stopPropagation();
dispatch('close');
open = false;
buttonRef.focus();
}
@ -225,6 +227,7 @@
on:focusout="{(e) => {
if (open) {
if (!buttonRef.contains(e.relatedTarget)) {
dispatch('close');
open = false;
}
}

2
types/OverflowMenu/OverflowMenu.svelte.d.ts vendored
View file

@ -80,7 +80,7 @@ export interface OverflowMenuProps
export default class OverflowMenu extends SvelteComponentTyped<
OverflowMenuProps,
{
close: CustomEvent<{ index: number; text: string }>;
close: CustomEvent<null | { index: number; text: string }>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];