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

4
COMPONENT_INDEX.md
View file

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

2
docs/src/COMPONENT_API.json
View file

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

5
src/OverflowMenu/OverflowMenu.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
/** /**
* @event {{ index: number; text: string; }} close * @event {null | { index: number; text: string; }} close
*/ */
/** /**
@ -205,6 +205,7 @@
on:click="{({ target }) => { on:click="{({ target }) => {
if (!(menuRef && menuRef.contains(target))) { if (!(menuRef && menuRef.contains(target))) {
open = !open; open = !open;
if (!open) dispatch('close');
} }
}}" }}"
on:mouseover on:mouseover
@ -217,6 +218,7 @@
e.preventDefault(); e.preventDefault();
} else if (e.key === 'Escape') { } else if (e.key === 'Escape') {
e.stopPropagation(); e.stopPropagation();
dispatch('close');
open = false; open = false;
buttonRef.focus(); buttonRef.focus();
} }
@ -225,6 +227,7 @@
on:focusout="{(e) => { on:focusout="{(e) => {
if (open) { if (open) {
if (!buttonRef.contains(e.relatedTarget)) { if (!buttonRef.contains(e.relatedTarget)) {
dispatch('close');
open = false; 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< export default class OverflowMenu extends SvelteComponentTyped<
OverflowMenuProps, OverflowMenuProps,
{ {
close: CustomEvent<{ index: number; text: string }>; close: CustomEvent<null | { index: number; text: string }>;
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"]; mouseenter: WindowEventMap["mouseenter"];