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

View file

@ -31,7 +31,9 @@
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 });
@ -68,8 +70,9 @@
bind:this={ref}
{...buttonProps}
on:click
on:click={() => {
update(id);
on:click={(e) => {
e.stopPropagation();
update(id, item);
}}
on:keydown
on:keydown={({ key }) => {
@ -91,8 +94,9 @@
bind:this={ref}
{...buttonProps}
on:click
on:click={() => {
update(id);
on:click={(e) => {
e.stopPropagation();
update(id, item);
}}
on:keydown
on:keydown={({ key }) => {