From b5b6854d2de2728b3f4859f0b418d2ec865e57ee Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Thu, 30 Dec 2021 18:37:33 -1000
Subject: [PATCH] Menu: fix typo `slot` => `slotProps`

This will have caused class as a function to not work correctly for Menu
---
 src/lib/components/menu/Menu.svelte  |  7 ++++---
 src/lib/components/menu/menu.test.ts | 13 ++++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
index ef32ee1..6e89044 100644
--- a/src/lib/components/menu/Menu.svelte
+++ b/src/lib/components/menu/Menu.svelte
@@ -58,6 +58,7 @@
   export let use: HTMLActionArray = [];
   export let as: SupportedAs = "div";
   const forwardEvents = forwardEventsBuilder(get_current_component());
+
   let menuState: StateDefinition["menuState"] = MenuStates.Closed;
   let buttonStore: StateDefinition["buttonStore"] = writable(null);
   let itemsStore: StateDefinition["itemsStore"] = writable(null);
@@ -163,7 +164,7 @@
     [MenuStates.Closed]: State.Closed,
   });
 
-  $: slot = { open: menuState === MenuStates.Open };
+  $: slotProps = { open: menuState === MenuStates.Open };
 </script>
 
 <svelte:window on:mousedown={handleWindowMousedown} />
@@ -171,8 +172,8 @@
   {...$$restProps}
   use={[...use, forwardEvents]}
   {as}
-  {slot}
+  {slotProps}
   name={"Menu"}
 >
-  <slot {...slot} />
+  <slot {...slotProps} />
 </Render>
diff --git a/src/lib/components/menu/menu.test.ts b/src/lib/components/menu/menu.test.ts
index f8cea3b..8d76604 100644
--- a/src/lib/components/menu/menu.test.ts
+++ b/src/lib/components/menu/menu.test.ts
@@ -337,9 +337,9 @@ describe('Rendering composition', () => {
       render(
         TestRenderer, {
         allProps: [
-          [Menu, {}, [
-            [MenuButton, {}, "Trigger"],
-            [MenuItems, {}, [
+          [Menu, { class: (bag: any) => JSON.stringify(bag), id: "menu" }, [
+            [MenuButton, { class: (bag: any) => JSON.stringify(bag) }, "Trigger"],
+            [MenuItems, { class: (bag: any) => JSON.stringify(bag) }, [
               [MenuItem, { as: "a", class: (bag: any) => JSON.stringify(bag) }, "Item A"],
               [MenuItem, { as: "a", disabled: true, class: (bag: any) => JSON.stringify(bag) }, "Item B"],
               [MenuItem, { as: "a", class: "no-special-treatment" }, "Item C"],
@@ -354,12 +354,19 @@ describe('Rendering composition', () => {
       })
       assertMenu({ state: MenuState.InvisibleUnmounted })
 
+      // Verify correct classNames
+      expect("" + document.querySelector('[id="menu"]')?.classList).toEqual(JSON.stringify({ open: false }))
+      expect("" + getMenuButton()?.classList).toEqual(JSON.stringify({ open: false }))
+
       // Open menu
       await click(getMenuButton())
 
       let items = getMenuItems()
 
       // Verify correct classNames
+      expect("" + document.querySelector('[id="menu"]')?.classList).toEqual(JSON.stringify({ open: true }))
+      expect("" + getMenu()?.classList).toEqual(JSON.stringify({ open: true }))
+      expect("" + getMenuButton()?.classList).toEqual(JSON.stringify({ open: true }))
       expect('' + items[0].classList).toEqual(JSON.stringify({ active: false, disabled: false }))
       expect('' + items[1].classList).toEqual(JSON.stringify({ active: false, disabled: true }))
       expect('' + items[2].classList).toEqual('no-special-treatment')