fix(overflow-menu): support Svelte 5

src/OverflowMenu/OverflowMenu.svelte

@@ -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

src/OverflowMenu/OverflowMenuItem.svelte

@@ -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 }) => {

tests/App.test.svelte

@@ -10,6 +10,7 @@
   import RecursiveList from "./RecursiveList/RecursiveList.test.svelte";
   import RecursiveListHierarchy from "./RecursiveList/RecursiveList.hierarchy.test.svelte";
   import Tag from "./Tag/Tag.test.svelte";
+  import OverflowMenu from "./OverflowMenu/OverflowMenu.test.svelte";
   import { onMount } from "svelte";
 
   const routes = [
@@ -63,6 +64,11 @@
       name: "Tag",
       component: Tag,
     },
+    {
+      path: "/overflow-menu",
+      name: "OverflowMenu",
+      component: OverflowMenu,
+    },
   ] as const;
 
   let currentPath = window.location.pathname;

tests/OverflowMenu/OverflowMenu.test.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+</script>
+
+<OverflowMenu
+  on:close={(e) => {
+    console.log("close", e.detail); // { index: number; text: string; }
+  }}
+>
+  <OverflowMenuItem
+    text="Manage credentials"
+    on:click={() => {
+      console.log("click", "Manage credentials");
+    }}
+  />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+    on:click={() => {
+      console.log("click", "API documentation");
+    }}
+  />
+  <OverflowMenuItem
+    danger
+    text="Delete service"
+    on:click={() => {
+      console.log("click", "Delete service");
+    }}
+  />
+</OverflowMenu>

tests/OverflowMenu/OverflowMenu.test.ts

@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import OverflowMenu from "./OverflowMenu.test.svelte";
+
+describe("OverflowMenu", () => {
+  it("renders and functions correctly", async () => {
+    render(OverflowMenu);
+
+    const menuButton = screen.getByRole("button");
+    expect(menuButton).toHaveAttribute("aria-haspopup", "true");
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(menuButton);
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
+
+    const menuItems = screen.getAllByRole("menuitem");
+    expect(menuItems).toHaveLength(3);
+    expect(menuItems[0]).toHaveFocus();
+
+    expect(menuItems[0]).toHaveTextContent("Manage credentials");
+    expect(menuItems[1]).toHaveTextContent("API documentation");
+    expect(menuItems[2]).toHaveTextContent("Delete service");
+
+    expect(menuItems[1]).toHaveAttribute(
+      "href",
+      "https://cloud.ibm.com/docs/api-gateway/",
+    );
+
+    expect(menuItems[2].parentElement).toHaveClass(
+      "bx--overflow-menu-options__option--danger",
+    );
+
+    const spy = vi.spyOn(console, "log");
+    await user.click(menuItems[0]);
+    expect(spy).toHaveBeenCalledWith("click", "Manage credentials");
+
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+    expect(spy).toHaveBeenCalledWith("close", {
+      index: 0,
+      text: "Manage credentials",
+    });
+  });
+
+  it("handles keyboard navigation", async () => {
+    render(OverflowMenu);
+
+    const spy = vi.spyOn(console, "log");
+
+    const menuButton = screen.getByRole("button");
+    await user.click(menuButton);
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
+
+    let menuItems = screen.getAllByRole("menuitem");
+    expect(menuItems[0]).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+    expect(menuItems[1]).toHaveFocus();
+
+    await user.keyboard("{Enter}");
+    expect(spy).toHaveBeenCalledWith("click", "API documentation");
+
+    await user.click(menuButton);
+    menuItems = screen.getAllByRole("menuitem");
+    expect(menuItems[0]).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}");
+    expect(menuItems[2]).toHaveFocus();
+
+    await user.keyboard("{Escape}");
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+    expect(spy).toHaveBeenCalledWith("close", null);
+  });
+
+  it("closes when clicking outside", async () => {
+    render(OverflowMenu);
+
+    const menuButton = screen.getByRole("button");
+    await user.click(menuButton);
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(document.body);
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+  });
+});