feat(components): Popover exit animation

src/LumexUI/Components/Popover/LumexPopover.razor.cs

@@ -4,7 +4,6 @@
 
 using LumexUI.Common;
 using LumexUI.Extensions;
-using LumexUI.Styles;
 using LumexUI.Utilities;
 
 using Microsoft.AspNetCore.Components;
@@ -99,6 +98,7 @@ public partial class LumexPopover : LumexComponentBase, ISlotComponent<PopoverSl
 	/// </summary>
 	[Parameter] public PopoverSlots? Classes { get; set; }
 
+	internal bool IsVisible { get; set; }
 	internal bool IsTooltip { get; private set; }
 	internal PopoverOptions Options { get; private set; }
 	internal Dictionary<string, ComponentSlot> Slots { get; private set; } = [];
@@ -126,9 +126,14 @@ protected override void OnParametersSet()
 			IsTooltip = value is "tooltip";
 		}
 
+		if( Open && !IsVisible )
+		{
+			IsVisible = true;
+		}
+
 		Options = new PopoverOptions( this );
 
-		var popover = Popover.Style( TwMerge );
+		var popover = Styles.Popover.Style( TwMerge );
 		Slots = popover( new()
 		{
 			[nameof( Size )] = Size.ToString(),
@@ -156,6 +161,8 @@ internal async Task TriggerAsync()
 
 	internal Task OpenAsync()
 	{
+		IsVisible = true;
+
 		Open = true;
 		return OpenChanged.InvokeAsync( true );
 	}

src/LumexUI/Components/Popover/LumexPopoverContent.razor

@@ -1,17 +1,20 @@
 @namespace LumexUI
 @inherits LumexComponentBase
 
-@if( Popover.Open )
+@if( Popover.IsVisible )
 {
-    <PopoverWrapper Class="@Popover.Slots["Wrapper"]()">
+    <PopoverWrapper Class="@Popover.Slots["Wrapper"]()"
+                    data-popover-open="@Popover.Open.ToAttributeValue()"
+                    data-popover-wrapper
+                    @onanimationend="HandleAnimationEnd">
         <div role="dialog"
              class="@Popover.Slots["Base"]( Popover.Classes?.Base, Popover.Class )"
              tabindex="-1"
              data-slot="base"
              data-open="@Popover.Open.ToAttributeValue()"
              @attributes="@Popover.AdditionalAttributes">
             <LumexComponent As="@As"
-                            Class="@Popover.Slots["Content"](Popover.Classes?.Content, Class)"
+                            Class="@Popover.Slots["Content"]( Popover.Classes?.Content, Class )"
                             Style="@RootStyle"
                             data-slot="content"
                             @attributes="@AdditionalAttributes">

src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs

@@ -3,6 +3,7 @@
 // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
 
 using LumexUI.Common;
+using LumexUI.Infrastructure;
 
 using Microsoft.AspNetCore.Components;
 
@@ -28,4 +29,13 @@ protected override void OnInitialized()
 	{
 		ContextNullException.ThrowIfNull( Context, nameof( LumexPopoverContent ) );
 	}
+
+	private async Task HandleAnimationEnd( AnimationEventArgs e )
+	{
+		if( !Popover.Open && e.AnimationName.Contains( "exit", StringComparison.OrdinalIgnoreCase ) )
+		{
+			Popover.IsVisible = false;
+			await InvokeAsync( StateHasChanged );
+		}
+	}
 }

src/LumexUI/Infrastructure/EventHandlers.cs

@@ -10,6 +10,26 @@ namespace LumexUI.Infrastructure;
 /// Configures event handlers for the components.
 /// </summary>
 [EventHandler( "onclickoutside", typeof( EventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
+[EventHandler( "onanimationend", typeof( AnimationEventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
 public static class EventHandlers
 {
 }
+
+/// <summary>
+/// Arguments for the animation events.
+/// </summary>
+public class AnimationEventArgs : EventArgs
+{
+	/// <summary>
+	/// Gets the name of the animation.
+	/// </summary>
+	public string AnimationName { get; set; } = string.Empty;
+	/// <summary>
+	/// Gets the elapsed time of the animation in seconds.
+	/// </summary>
+	public double ElapsedTime { get; set; }
+	/// <summary>
+	/// Gets the name of the pseudo-element the animation is applied to.
+	/// </summary>
+	public string PseudoElement { get; set; } = string.Empty;
+}

src/LumexUI/Styles/Popover.cs

@@ -31,7 +31,8 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.ToString(),
 
 				["Wrapper"] = new ElementClass()
-					.Add( "animate-enter" )
+					.Add( "data-[popover-open=true]:animate-enter" )
+					.Add( "data-[popover-open=false]:animate-exit" )
 					.ToString(),
 
 				[nameof( PopoverSlots.Content )] = new ElementClass()

src/LumexUI/Styles/_theme.css

@@ -172,6 +172,7 @@
 
     /* Animations */
     --animate-enter: enter 150ms ease-out normal both;
+    --animate-exit: exit 150ms ease-out normal both;
     --animate-shimmer: shimmer 2s infinite;
     --animate-sway: sway 0.75s infinite;
     --animate-blink: blink 1.5s infinite both;
@@ -189,6 +190,18 @@
         }
     }
 
+    @keyframes exit {
+        0% {
+            opacity: 1;
+            transform: translateZ(0) scale(1);
+        }
+
+        100% {
+            opacity: 0;
+            transform: translateZ(0)  scale(0.85);
+        }
+    }
+
     @keyframes shimmer {
         100% {
             translate: 100%;

src/LumexUI/wwwroot/js/LumexUI.js

@@ -8,4 +8,15 @@ export const Lumex = {
     elementReference
 };
 
-window['Lumex'] = Lumex
+window['Lumex'] = Lumex
+
+Blazor.registerCustomEventType('animationend', {
+    browserEventName: 'animationend',
+    createEventArgs: event => {
+        return {
+            AnimationName: event.animationName,
+            ElapsedTime: event.elapsedTime,
+            PseudoElement: event.pseudoElement
+        };
+    }
+})

tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor

@@ -1,4 +1,5 @@
 @namespace LumexUI.Tests.Components
+@using LumexUI.Infrastructure
 @inherits TestContext
 
 @code {
@@ -99,7 +100,7 @@
                     </LumexDropdownMenu>
                 </LumexDropdown>
             </text>
-        );
+    );
 
         var trigger = cut.Find( "[data-popovertarget]" );
         trigger.Click();
@@ -133,7 +134,13 @@
         var menuItems = cut.FindAll( "li" );
         menuItems[0].Click();
 
-        var menu = cut.FindByTestId( "menu-test" );
+        var popover = cut.Find("[data-popover-wrapper]");
+        popover.TriggerEvent("onanimationend", new AnimationEventArgs
+        {
+            AnimationName = "animate-exit"
+        });
+
+        var menu = cut.FindByTestId("menu-test");
         menu.Should().BeNull();
     }