Add Blur event to interactive elements in NimbleBlazor

change/@ni-nimble-blazor-3ce256ca-8291-4971-8718-818b348b7788.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add Blur event to interactive elements",
+  "packageName": "@ni/nimble-blazor",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md

@@ -57,6 +57,7 @@ public partial class NimbleButton : ComponentBase
 [Parameter(CaptureUnmatchedValues = true)]
 public IDictionary<string, object>? AdditionalAttributes { get; set; }
 ```
+- Interactive components should expose a `Blur` `EventCallback` so that clients can optionally listen to the event
 - Code style conventions are enforced by the [NI C# Style Guide](https://github.com/ni/csharp-styleguide)
 
 ### 2-way Binding Support, Handling DOM Events

packages/blazor-workspace/NimbleBlazor/Source/Anchor/NimbleAnchor.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
 @inherits NimbleAnchorBase
 <nimble-anchor
+    @onblur="HandleBlur"
     href="@Href"
     hreflang="@HrefLang"
     ping="@Ping"

packages/blazor-workspace/NimbleBlazor/Source/Anchor/NimbleAnchor.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -33,4 +34,12 @@ public partial class NimbleAnchor : NimbleAnchorBase
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/AnchorButton/NimbleAnchorButton.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
 @inherits NimbleAnchorBase
 <nimble-anchor-button
+    @onblur="HandleBlur"
     href="@Href"
     hreflang="@HrefLang"
     ping="@Ping"

packages/blazor-workspace/NimbleBlazor/Source/AnchorButton/NimbleAnchorButton.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -39,4 +40,12 @@ public partial class NimbleAnchorButton : NimbleAnchorBase
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/AnchorMenuItem/NimbleAnchorMenuItem.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
 @inherits NimbleAnchorBase
 <nimble-anchor-menu-item
+    @onblur="HandleBlur"
     href="@Href"
     hreflang="@HrefLang"
     ping="@Ping"

packages/blazor-workspace/NimbleBlazor/Source/AnchorMenuItem/NimbleAnchorMenuItem.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -21,4 +22,12 @@ public partial class NimbleAnchorMenuItem : NimbleAnchorBase
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/AnchorStep/NimbleAnchorStep.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
 @inherits NimbleAnchorBase
 <nimble-anchor-step
+    @onblur="HandleBlur"
     href="@Href"
     hreflang="@HrefLang"
     ping="@Ping"

packages/blazor-workspace/NimbleBlazor/Source/AnchorStep/NimbleAnchorStep.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -39,4 +40,12 @@ public partial class NimbleAnchorStep : NimbleAnchorBase
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/AnchorTab/NimbleAnchorTab.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
 @inherits NimbleAnchorBase
 <nimble-anchor-tab
+    @onblur="HandleBlur"
     href="@Href"
     hreflang="@HrefLang"
     ping="@Ping"

packages/blazor-workspace/NimbleBlazor/Source/AnchorTab/NimbleAnchorTab.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -24,4 +25,12 @@ public partial class NimbleAnchorTab : NimbleAnchorBase
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/AnchorTabs/NimbleAnchorTabs.razor

@@ -1,5 +1,6 @@
 @namespace NimbleBlazor
 <nimble-anchor-tabs
+    @onblur="HandleBlur"
     activeid="@BindConverter.FormatValue(ActiveId)"
     @attributes="AdditionalAttributes">
     @ChildContent

packages/blazor-workspace/NimbleBlazor/Source/AnchorTabs/NimbleAnchorTabs.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -24,4 +25,12 @@ public partial class NimbleAnchorTabs : ComponentBase
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/AnchorTreeItem/NimbleAnchorTreeItem.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
 @inherits NimbleAnchorBase
 <nimble-anchor-tree-item
+    @onblur="HandleBlur"
     href="@Href"
     hreflang="@HrefLang"
     ping="@Ping"

packages/blazor-workspace/NimbleBlazor/Source/AnchorTreeItem/NimbleAnchorTreeItem.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -27,4 +28,12 @@ public partial class NimbleAnchorTreeItem : NimbleAnchorBase
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/Banner/NimbleBanner.razor

@@ -1,5 +1,6 @@
 @namespace NimbleBlazor
 <nimble-banner
+    @onblur="HandleBlur"
     open="@BindConverter.FormatValue(Open)"
     @onnimblebannertoggle="(__value) => UpdateOpen(__value.NewState)"
     severity="@Severity.ToAttributeValue()"

packages/blazor-workspace/NimbleBlazor/Source/Banner/NimbleBanner.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -58,4 +59,12 @@ protected async void UpdateOpen(bool value)
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/Breadcrumb/NimbleBreadcrumb.razor

@@ -1,5 +1,6 @@
 @namespace NimbleBlazor
 <nimble-breadcrumb
+    @onblur="HandleBlur"
     appearance="@Appearance.ToAttributeValue()"
     @attributes="AdditionalAttributes">
     @ChildContent

packages/blazor-workspace/NimbleBlazor/Source/Breadcrumb/NimbleBreadcrumb.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -12,4 +13,12 @@ public partial class NimbleBreadcrumb : ComponentBase
 
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/BreadcrumbItem/NimbleBreadcrumbItem.razor

@@ -1,5 +1,6 @@
 @namespace NimbleBlazor
 <nimble-breadcrumb-item
+    @onblur="HandleBlur"
     href="@Href"
     hreflang="@HrefLang"
     ping="@Ping"

packages/blazor-workspace/NimbleBlazor/Source/BreadcrumbItem/NimbleBreadcrumbItem.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -7,6 +8,9 @@ public partial class NimbleBreadcrumbItem : ComponentBase
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
 
@@ -30,4 +34,9 @@ public partial class NimbleBreadcrumbItem : ComponentBase
 
     [Parameter]
     public string? Type { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/Button/NimbleButton.razor

@@ -1,5 +1,6 @@
 @namespace NimbleBlazor
 <nimble-button
+    @onblur="HandleBlur"
     appearance="@Appearance.ToAttributeValue()"
     appearance-variant="@AppearanceVariant.ToAttributeValue()"
     content-hidden="@ContentHidden"

packages/blazor-workspace/NimbleBlazor/Source/Button/NimbleButton.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -24,4 +25,12 @@ public partial class NimbleButton : ComponentBase
 
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/Card/NimbleCard.razor

@@ -1,5 +1,6 @@
 @namespace NimbleBlazor
 <nimble-card
+    @onblur="HandleBlur"
     @attributes="AdditionalAttributes">
     @ChildContent
 </nimble-card>

packages/blazor-workspace/NimbleBlazor/Source/Card/NimbleCard.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -9,4 +10,12 @@ public partial class NimbleCard : ComponentBase
 
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/CardButton/NimbleCardButton.razor

@@ -1,5 +1,6 @@
 @namespace NimbleBlazor
 <nimble-card-button
+    @onblur="HandleBlur"
     disabled="@Disabled"
     selected="@Selected"
     @attributes="AdditionalAttributes">

packages/blazor-workspace/NimbleBlazor/Source/CardButton/NimbleCardButton.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -15,4 +16,12 @@ public partial class NimbleCardButton : ComponentBase
 
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }

packages/blazor-workspace/NimbleBlazor/Source/Checkbox/NimbleCheckbox.razor

@@ -1,6 +1,7 @@
 @namespace NimbleBlazor
 @inherits NimbleInputBase<bool>
 <nimble-checkbox disabled="@Disabled"
+    @onblur="HandleBlur"
     current-checked="@BindConverter.FormatValue(CurrentValue)"
     @onnimblecheckedchange="(__value) => CurrentValue = __value.Checked"
     appearance-indeterminate="@AppearanceIndeterminate"

packages/blazor-workspace/NimbleBlazor/Source/Checkbox/NimbleCheckbox.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace NimbleBlazor;
 
@@ -25,5 +26,13 @@ public partial class NimbleCheckbox : NimbleInputBase<bool>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    [Parameter]
+    public EventCallback<FocusEventArgs> Blur { get; set; }
+
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out bool result, [NotNullWhen(false)] out string? validationErrorMessage) => throw new NotSupportedException($"This component does not parse string inputs. Bind to the '{nameof(CurrentValue)}' property, not '{nameof(CurrentValueAsString)}'.");
+
+    protected async void HandleBlur(FocusEventArgs e)
+    {
+        await Blur.InvokeAsync(e);
+    }
 }