fix(overflow-menu): support Svelte 5

Fixes #2092
This commit is contained in:
Eric Liu 2025-01-29 09:45:48 -08:00
commit 88f4304d5a
2 changed files with 15 additions and 20 deletions

View file

@ -81,6 +81,7 @@
setContext("OverflowMenu", { setContext("OverflowMenu", {
focusedId, focusedId,
items,
add: ({ id, text, primaryFocus, disabled }) => { add: ({ id, text, primaryFocus, disabled }) => {
items.update((_) => { items.update((_) => {
if (primaryFocus) { if (primaryFocus) {
@ -90,8 +91,11 @@
return [..._, { id, text, primaryFocus, disabled, index: _.length }]; return [..._, { id, text, primaryFocus, disabled, index: _.length }];
}); });
}, },
update: (id) => { update: (id, item) => {
currentId.set(id); currentId.set(id);
dispatch("close", { index: item.index, text: item.text });
open = false;
}, },
change: (direction) => { change: (direction) => {
let index = $currentIndex + direction; let index = $currentIndex + direction;
@ -121,12 +125,6 @@
}); });
afterUpdate(() => { afterUpdate(() => {
if ($currentId) {
const { index, text } = $items.filter((_) => _.id === $currentId)[0];
dispatch("close", { index, text });
open = false;
}
if (open) { if (open) {
const width = buttonRef.offsetWidth; const width = buttonRef.offsetWidth;
const height = buttonRef.offsetHeight; const height = buttonRef.offsetHeight;
@ -183,6 +181,7 @@
on:click={({ target }) => { on:click={({ target }) => {
if (buttonRef && buttonRef.contains(target)) return; if (buttonRef && buttonRef.contains(target)) return;
if (menuRef && !menuRef.contains(target)) { if (menuRef && !menuRef.contains(target)) {
dispatch("close");
open = false; open = false;
} }
}} }}
@ -225,14 +224,6 @@
} }
} }
}} }}
on:focusout={(e) => {
if (open) {
if (!buttonRef.contains(e.relatedTarget)) {
dispatch("close");
open = false;
}
}
}}
> >
<slot name="menu"> <slot name="menu">
<svelte:component <svelte:component

View file

@ -31,7 +31,9 @@
import { getContext, afterUpdate } from "svelte"; import { getContext, afterUpdate } from "svelte";
const { focusedId, add, update, change } = getContext("OverflowMenu"); const { focusedId, add, update, change, items } = getContext("OverflowMenu");
$: item = $items.find((_) => _.id === id);
add({ id, text, primaryFocus, disabled }); add({ id, text, primaryFocus, disabled });
@ -68,8 +70,9 @@
bind:this={ref} bind:this={ref}
{...buttonProps} {...buttonProps}
on:click on:click
on:click={() => { on:click={(e) => {
update(id); e.stopPropagation();
update(id, item);
}} }}
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown={({ key }) => {
@ -91,8 +94,9 @@
bind:this={ref} bind:this={ref}
{...buttonProps} {...buttonProps}
on:click on:click
on:click={() => { on:click={(e) => {
update(id); e.stopPropagation();
update(id, item);
}} }}
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown={({ key }) => {