Toggle Headless UI components on button click (#8)

* toggle menu, listbox and popover when clicking the button instead of just opening it

* add tests for #7

packages/Tailwind/Ignis.Components.HeadlessUI/ListboxButton.cs

@@ -118,6 +118,7 @@ private void Click()
 
         if (@event.CancellationToken.IsCancellationRequested) return;
 
-        Listbox.Open();
+        if (Listbox.IsOpen) Listbox.Close();
+        else Listbox.Open();
     }
 }

packages/Tailwind/Ignis.Components.HeadlessUI/MenuButton.cs

@@ -115,7 +115,8 @@ private void Click()
         OnClick.InvokeAsync(@event);
 
         if (@event.CancellationToken.IsCancellationRequested) return;
-
-        Menu.Open();
+
+        if (Menu.IsOpen) Menu.Close();
+        else Menu.Open();
     }
 }

packages/Tailwind/Ignis.Components.HeadlessUI/PopoverButton.cs

@@ -109,6 +109,7 @@ private void Click()
 
         if (@event.CancellationToken.IsCancellationRequested) return;
 
-        Popover.Open();
+        if (Popover.IsOpen) Popover.Close();
+        else Popover.Open();
     }
 }

tests/Ignis.Tests.Components.HeadlessUI/ListboxTests.razor

@@ -0,0 +1,46 @@
+@inherits TestContext
+
+@code
+{
+    [Fact]
+    public void Button_OnClick()
+    {
+        Services.AddIgnis();
+        Services.AddSingleton<IHostContext, TestHostContext>();
+
+        JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var cut = Render(@<Listbox TValue="object">
+                             <ListboxButton>
+                             </ListboxButton>
+                         </Listbox>);
+
+        cut.Find("button").Click();
+
+        var listbox = cut.FindComponent<Listbox<object>>();
+        Assert.True(listbox.Instance.IsOpen);
+
+        cut.Find("button").Click();
+
+        Assert.False(listbox.Instance.IsOpen);
+    }
+
+    [Fact]
+    public void Button_OnClick_PreventDefault()
+    {
+        Services.AddIgnis();
+        Services.AddSingleton<IHostContext, TestHostContext>();
+
+        JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var cut = Render(@<Listbox TValue="object">
+                             <ListboxButton OnClick="e => e.PreventDefault()">
+                             </ListboxButton>
+                         </Listbox>);
+
+        cut.Find("button").Click();
+
+        var listbox = cut.FindComponent<Listbox<object>>();
+        Assert.False(listbox.Instance.IsOpen);
+    }
+}

tests/Ignis.Tests.Components.HeadlessUI/MenuTests.razor

@@ -0,0 +1,46 @@
+@inherits TestContext
+
+@code
+{
+    [Fact]
+    public void Button_OnClick()
+    {
+        Services.AddIgnis();
+        Services.AddSingleton<IHostContext, TestHostContext>();
+
+        JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var cut = Render(@<Menu>
+                             <MenuButton>
+                             </MenuButton>
+                         </Menu>);
+
+        cut.Find("button").Click();
+
+        var menu = cut.FindComponent<Menu>();
+        Assert.True(menu.Instance.IsOpen);
+
+        cut.Find("button").Click();
+
+        Assert.False(menu.Instance.IsOpen);
+    }
+
+    [Fact]
+    public void Button_OnClick_PreventDefault()
+    {
+        Services.AddIgnis();
+        Services.AddSingleton<IHostContext, TestHostContext>();
+
+        JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var cut = Render(@<Menu>
+                             <MenuButton OnClick="e => e.PreventDefault()">
+                             </MenuButton>
+                         </Menu>);
+
+        cut.Find("button").Click();
+
+        var menu = cut.FindComponent<Menu>();
+        Assert.False(menu.Instance.IsOpen);
+    }
+}

tests/Ignis.Tests.Components.HeadlessUI/PopoverTests.razor

@@ -19,6 +19,10 @@
 
         var popover = cut.FindComponent<Popover>();
         Assert.True(popover.Instance.IsOpen);
+
+        cut.Find("button").Click();
+
+        Assert.False(popover.Instance.IsOpen);
     }
 
     [Fact]