[dev-v5] FluentAnchorButton FluentLink - Overriding navigation behavior to utilize Blazor's features

src/Core.Scripts/src/FluentUIWebComponentsOverride.ts

@@ -0,0 +1,73 @@
+
+/// <reference path="./d-ts/Blazor.d.ts" />
+
+export namespace Microsoft.FluentUI.Override {
+    interface NavigationElement extends HTMLElement {
+        href: string;
+        internalProxyAnchor: { click(): void };
+        handleNavigation(newTab: boolean): void;
+    }
+
+    /**
+     * Override the default behavior of the Fluent UI Web Components to use Blazor's features.
+    */
+    export function overrideComponents() {
+        waitForCustomElements().then(async registry => {
+
+            /**
+             * fluent-anchor-button
+            */
+            const anchorButton = await registry.whenDefined('fluent-anchor-button');
+            anchorButton.prototype.handleNavigation = handleNavigation;
+
+            /**
+             * fluent-link
+             */
+            const link = await registry.whenDefined('fluent-link');
+            link.prototype.handleNavigation = handleNavigation;
+        });
+    }
+
+    /* 
+        Original code: https://github.com/microsoft/fluentui/blob/master/packages/web-components/src/anchor-button/anchor-button.base.ts
+
+        private handleNavigation(newTab: boolean): void {
+            newTab ? window.open(this.href, '_blank') : this.internalProxyAnchor.click();
+        }
+    */
+    function handleNavigation(this: NavigationElement, newTab: boolean): void {
+        if (newTab) {
+            window.open(this.href, '_blank');
+            return;
+        }
+
+        const url = new URL(this.href, document.baseURI);
+        if (url.origin === location.origin) {
+            const forceLoad = this.getAttribute('force-load') === 'true';
+            Blazor.navigateTo(url.pathname + url.search + url.hash, forceLoad);
+        }
+        else {
+            this.internalProxyAnchor.click();
+        }
+    }
+
+    /**
+     * Wait for the customElements registry to be available before overriding the components.
+     * This is necessary because the Fluent UI Web Components are defined asynchronously.
+     * @returns A promise that resolves with the customElements registry.
+     */
+    function waitForCustomElements(): Promise<CustomElementRegistry> {
+        return new Promise(resolve => {
+            const checkCustomElements = () => {
+                if (typeof customElements !== 'undefined') {
+                    resolve(customElements);
+                    return;
+                }
+
+                setTimeout(checkCustomElements, 10);
+            };
+
+            checkCustomElements();
+        });
+    }
+}

src/Core.Scripts/src/Startup.ts

@@ -1,6 +1,7 @@
 import { Microsoft as LoggerFile } from './Utilities/Logger';
 import { Microsoft as ThemeFile } from './Utilities/Theme';
 import { Microsoft as FluentUIComponentsFile } from './FluentUIWebComponents';
+import { Microsoft as FluentUIWebComponentsOverrideFile } from './FluentUIWebComponentsOverride';
 import { Microsoft as FluentPageScriptFile } from './Components/PageScript/FluentPageScript';
 import { Microsoft as FluentPopoverFile } from './Components/Popover/FluentPopover';
 import { Microsoft as FluentOverlayFile } from './Components/Overlay/FluentOverlay';
@@ -16,6 +17,7 @@ export namespace Microsoft.FluentUI.Blazor.Startup {
   // Alias
   import Logger = LoggerFile.FluentUI.Blazor.Utilities.Logger;
   import FluentUIComponents = FluentUIComponentsFile.FluentUI.Blazor.FluentUIWebComponents;
+  import FluentUIOverride = FluentUIWebComponentsOverrideFile.FluentUI.Override;
   import FluentPageScript = FluentPageScriptFile.FluentUI.Blazor.Components.PageScript;
   import FluentPopover = FluentPopoverFile.FluentUI.Blazor.Components.Popover;
   import FluentOverlay = FluentOverlayFile.FluentUI.Blazor.Components.Overlay;
@@ -42,6 +44,9 @@ export namespace Microsoft.FluentUI.Blazor.Startup {
     // Define Fluent UI components
     FluentUIComponents.defineComponents();
 
+    // Override Fluent UI components to use Blazor's features
+    FluentUIOverride.overrideComponents();
+
     // Finishing
     beforeStartCalled = true;
   }

src/Core.Scripts/src/d-ts/Blazor.d.ts

@@ -12,6 +12,8 @@ interface ThemeSettings {
 interface Blazor {
   addEventListener?: (name: string, callback: (event: any) => void) => void;
 
+  navigateTo: (uri: string, options: NavigationOptions | boolean) => void;
+
   registerCustomEventType(eventName: string, options: EventTypeOptions): void;
 
   theme: {
@@ -41,3 +43,5 @@ interface Blazor {
     switchDirection(): void,
   }
 }
+
+declare const Blazor: Blazor;

src/Core/Components/Button/FluentAnchorButton.razor

@@ -19,6 +19,7 @@
                       name="@Name"
                       role="@(string.IsNullOrEmpty(Title) ? null : "link")"
                       aria-label="@Title"
+                      force-load="@(ForceLoad ? "true" : null)"
                       @attributes="@AdditionalAttributes">
     @if (IconStart != null)
     {

src/Core/Components/Button/FluentAnchorButton.razor.cs

@@ -148,6 +148,13 @@ public FluentAnchorButton(LibraryConfiguration configuration) : base(configurati
     [Parameter]
     public string? Tooltip { get; set; }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the navigation should force a full page load instead of using Blazor's built-in navigation.
+    /// Default is <see langword="false" />, which uses Blazor's navigation.
+    /// </summary>
+    [Parameter]
+    public bool ForceLoad { get; set; }
+
     /// <summary />
     protected override async Task OnInitializedAsync()
     {

src/Core/Components/Link/FluentLink.razor

@@ -14,6 +14,7 @@
 			 class="@ClassValue"
 			 style="@StyleValue"
              clickable="@OnClick.HasDelegate"
+			 force-load="@(ForceLoad ? "true" : null)"
 			 @onclick="@OnClickHandlerAsync"
 			 @attributes="AdditionalAttributes">
 	@if (IconStart is not null)

src/Core/Components/Link/FluentLink.razor.cs

@@ -102,6 +102,13 @@ public FluentLink(LibraryConfiguration configuration) : base(configuration) { }
     [Parameter]
     public string? Tooltip { get; set; }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the navigation should force a full page load instead of using Blazor's built-in navigation.
+    /// Default is <see langword="false" />, which uses Blazor's navigation.
+    /// </summary>
+    [Parameter]
+    public bool ForceLoad { get; set; }
+
     /// <summary />
     protected override async Task OnInitializedAsync()
     {

tests/Core/Components/Button/FluentAnchorButtonTests.razor

@@ -33,6 +33,19 @@
         cut.Verify();
     }
 
+    [Theory]
+    [InlineData(false, null)]
+    [InlineData(true, "true")]
+    public void FluentAnchorButton_ForceLoadAttribute(bool forceLoad, string? expectedValue)
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentAnchorButton ForceLoad="@forceLoad">fluent-anchor-button</FluentAnchorButton>);
+
+        // Assert
+        var attribute = cut.Find("fluent-anchor-button").GetAttribute("force-load");
+        Assert.Equal(expectedValue, attribute);
+    }
+
     [Theory]
     [InlineData(LinkTarget.Blank, "_blank")]
     [InlineData(LinkTarget.Parent, "_parent")]

tests/Core/Components/Link/FluentLinkTests.razor

@@ -45,6 +45,19 @@
 		cut.Verify();
 	}
 
+	[Theory]
+	[InlineData(false, null)]
+	[InlineData(true, "true")]
+	public void FluentLink_ForceLoadAttribute(bool forceLoad, string? expectedValue)
+	{
+		// Arrange && Act
+		var cut = Render(@<FluentLink ForceLoad="@forceLoad">fluent-link</FluentLink>);
+
+		// Assert
+		var attribute = cut.Find("fluent-link").GetAttribute("force-load");
+		Assert.Equal(expectedValue, attribute);
+	}
+
 	[Fact]
 	public void FluentLink_hreflang()
 	{