Backport fix for #304

Make more custom event work (Accordion, tooltip, menu, dialog)
Ignore publish dir

.gitignore

@@ -45,3 +45,4 @@ UpgradeLog.htm
 *.svclog
 /src/CustomElementsParser/GeneratedClasses
 /examples/FluentUI.Demo.Client/Properties
+/publish

examples/FluentUI.Demo.Shared/Pages/Accordion/Examples/AccordionDefault.razor

@@ -1,5 +1,5 @@
 
-<FluentAccordion ActiveId="@activeId" > @*OnAccordionItemChange="HandleOnAccordionItemChange"*@
+<FluentAccordion ActiveId="@activeId" OnAccordionItemChange="HandleOnAccordionItemChange">
     <FluentAccordionItem Expanded="true" Heading="Panel one">
         <FluentIcon Slot="start" Name="@FluentIcons.Globe" Size="@IconSize.Size16" Filled=false UseAccentColor=false />
         Panel one content, using the 'start' slot for extra header content (in this case an icon)

examples/FluentUI.Demo.Shared/Pages/Dialog/Examples/DialogFromObject.razor

@@ -1,4 +1,4 @@
-<FluentDialog @ref="MyFluentDialog" id="foo" aria-label="Simple dialog" Modal="false" @ondismiss=OnDismiss>
+<FluentDialog @ref="MyFluentDialog" id="foo" aria-label="Simple dialog" Modal="false" @ondialogdismiss=OnDismiss>
     <h2>Dialog referenced from object</h2>
     <button @onclick="OnCloseModalRefButtonClick">Close dialog with component object function</button>
 </FluentDialog>

examples/FluentUI.Demo.Shared/Pages/Menu/Examples/MenuDefault.razor

@@ -9,8 +9,8 @@
 @code{
     private string status = "";
 
-    private void OnMenuChange()
-    {
-        status = "Menu item selected";
+    private void OnMenuChange(MenuChangeEventArgs args) {
+        if (args is not null && args.Value is not null)
+            status = $"{args.Value} selected";
     }
 }

examples/FluentUI.Demo.Shared/Pages/Tooltip/Examples/TooltipDefault.razor

@@ -1,6 +1,6 @@
 <div style="height:100px;">
     <FluentButton id="anchor1" Appearance=Appearance.Accent>Tooltip at the bottom</FluentButton>
-    <FluentTooltip Anchor="anchor1" Position=TooltipPosition.Bottom @ondismiss=OnDismiss>I'm helping!</FluentTooltip>
+    <FluentTooltip Anchor="anchor1" Position=TooltipPosition.Bottom @ontooltipdismiss=OnDismiss>I'm helping!</FluentTooltip>
 </div>
 <div style="height:100px;">
     <FluentButton id="anchor2" Appearance=Appearance.Accent>Tooltip at the top</FluentButton>

src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor

@@ -1,11 +1,9 @@
 @inherits FluentComponentBase
-
 <CascadingValue Value="this" IsFixed="true">
     <fluent-accordion @ref=Element
                       expand-mode="@ExpandMode.ToAttributeValue()"
+                      @onaccordionchange="HandleOnAccordionChanged"
                       @attributes="AdditionalAttributes">
         @ChildContent
     </fluent-accordion>
 </CascadingValue>
-@*Below needs to be added to the <fluent-accordion> above once the necessary changes are in the Web Components script*@
-@*@onaccordionchange="HandleOnAccordionChanged"*@

src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs

@@ -1,3 +1,4 @@
+using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components;
 
 namespace Microsoft.Fast.Components.FluentUI;
@@ -19,30 +20,37 @@ public partial class FluentAccordion : FluentComponentBase
     [Parameter]
     public string? ActiveId { get; set; }
 
-    //Commented code below is waiting for changes in the Web Components script
-
-
-    ///// <summary>
-    ///// Gets or sets a callback that updates the bound value.
-    ///// </summary>
-    //[Parameter]
-    //public EventCallback<string?> ActiveIdChanged { get; set; }
-
-    ///// <summary>
-    ///// Gets or sets a callback when a accordion item is changed .
-    ///// </summary>
-    //[Parameter]
-    //public EventCallback<FluentAccordionItem> OnAccordionItemChange { get; set; }
-
-    //private async Task HandleOnAccordionChanged(AccordionChangeEventArgs args)
-    //{
-    //    string? Id = args.AffectedId;
-    //    if (items.TryGetValue(Id!, out FluentAccordionItem? item))
-    //    {
-    //        await OnAccordionItemChange.InvokeAsync(item);
-    //        await ActiveIdChanged.InvokeAsync(args.ActiveId);
-    //    }
-    //}
+    /// <summary>
+    /// Gets or sets a callback that updates the bound value.
+    /// </summary>
+    [Parameter]
+    public EventCallback<string?> ActiveIdChanged { get; set; }
+
+    /// <summary>
+    /// Gets or sets a callback when a accordion item is changed .
+    /// </summary>
+    [Parameter]
+    public EventCallback<FluentAccordionItem> OnAccordionItemChange { get; set; }
+
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(AccordionChangeEventArgs))]
+
+    public FluentAccordion()
+    {
+
+    }
+
+    private async Task HandleOnAccordionChanged(AccordionChangeEventArgs args)
+    {
+        if (args is not null)
+        {
+            string? Id = args.ActiveId;
+            if (Id is not null && items.TryGetValue(Id!, out FluentAccordionItem? item))
+            {
+                await OnAccordionItemChange.InvokeAsync(item);
+                await ActiveIdChanged.InvokeAsync(Id);
+            }
+        }
+    }
 
     internal void Register(FluentAccordionItem item)
     {

src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor

@@ -7,8 +7,8 @@
                  disabled=@Disabled
                  name=@Name
                  required="@Required"
-                 current-checked="@BindConverter.FormatValue(CurrentValue)"
-                 @oncheckedchange="(__value) => CurrentValue = __value.Checked"
+                 current-checked="@CurrentValue"
+                 @oncheckedchange="@((e) => CurrentValue = e.Checked)"
                  @attributes="AdditionalAttributes">
     @ChildContent
 </fluent-checkbox>

src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor

@@ -21,7 +21,7 @@
                      name=@Name
                      required="@Required"
                      appearance="@Appearance.ToAttributeValue()"
-                     @onchange="@(EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString))"
+                     @oncustomclick="@((e) => CurrentValueAsString = e.Value?.ToString())"
                      @attributes="AdditionalAttributes">
     @ChildContent
 </fluent-number-field>

src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor

@@ -7,7 +7,7 @@
                     orientation="@Orientation.ToAttributeValue()"
                     required="@Required"
                     current-value="@CurrentValue"
-                    @onchange="@(EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValue = __value, CurrentValue))"
+                    @oncustomclick="@((e) => CurrentValueAsString = e.Value?.ToString())"
                     @attributes="AdditionalAttributes">
     @ChildContent
 </fluent-radio-group>

src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor

@@ -12,7 +12,7 @@
 			   disabled="@Disabled"
 			   name=@Name
 			   required=@Required
-			   @onchange="@(EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString))"
+			   @oncustomclick="@((e) => CurrentValueAsString = e.Value?.ToString())"
 			   @attributes="AdditionalAttributes">
 	@ChildContent
 </fluent-slider>

src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor

@@ -8,7 +8,7 @@
                name=@Name
                required=@Required
                current-checked="@CurrentValue"
-               @oncheckedchange="(__value) => CurrentValue = __value.Checked"
+               @oncheckedchange="@((e) => CurrentValue = e.Checked)"
                @attributes="AdditionalAttributes">
     @ChildContent
 </fluent-switch>

src/Microsoft.Fast.Components.FluentUI/Events/AccordionChangeEventArgs.cs

@@ -3,5 +3,4 @@
 public class AccordionChangeEventArgs : EventArgs
 {
     public string? ActiveId { get; set; }
-    public string? AffectedId { get; set; }
 }

src/Microsoft.Fast.Components.FluentUI/Events/DialogEventArgs.cs

@@ -0,0 +1,6 @@
+namespace Microsoft.Fast.Components.FluentUI;
+
+public class DialogEventArgs : EventArgs
+{
+    public string? Reason { get; set; }
+}

src/Microsoft.Fast.Components.FluentUI/Events/EventHandlers.cs

@@ -4,18 +4,20 @@ namespace Microsoft.Fast.Components.FluentUI;
 
 
 [EventHandler("oncheckedchange", typeof(CheckboxChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("oncustomclick", typeof(ChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("ontabchange", typeof(TabChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onselectedchange", typeof(TreeChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onexpandedchange", typeof(TreeChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("ondateselected", typeof(CalendarSelectEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
-// This accordion event needs to wait until necessary changes are merged in the web components script
-//[EventHandler("onaccordionchange", typeof(AccordionChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
-[EventHandler("ondismiss", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
-[EventHandler("onmenuchange", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("onaccordionchange", typeof(AccordionChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("ondialogdismiss", typeof(DialogEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("onmenuchange", typeof(MenuChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onscrollstart", typeof(HorizontalScrollEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onscrollend", typeof(HorizontalScrollEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("oncellfocus", typeof(DataGridCellFocusEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onrowfocus", typeof(DataGridRowFocusEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("ontooltipdismiss", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+
 
 public static class EventHandlers
 {

src/Microsoft.Fast.Components.FluentUI/Events/MenuChangeEventArgs.cs

@@ -0,0 +1,7 @@
+namespace Microsoft.Fast.Components.FluentUI;
+
+public class MenuChangeEventArgs : EventArgs
+{
+    public string? Id { get; set; }
+    public string? Value { get; set; }
+}

src/Microsoft.Fast.Components.FluentUI/Events/TreeChangeEventArgs.cs

@@ -3,4 +3,8 @@
 public class TreeChangeEventArgs : EventArgs
 {
     public string? AffectedId { get; set; }
+
+    public bool? Selected { get; set; }
+
+    public bool? Expanded { get; set; }
 }

src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj

@@ -13,7 +13,7 @@
 		<Title>Microsoft Fluent UI Web Components for Blazor</Title>
 		<Description>A set of Blazor components wrapping Microsoft’s official Fluent UI Web Components. They implement the latest state of the Fluent design language, are built on FAST and work in every major browser.</Description>
 		<SignAssembly>true</SignAssembly>
-		<VersionPrefix>1.6.0</VersionPrefix>
+		<VersionPrefix>1.6.1</VersionPrefix>
 		<VersionSuffix></VersionSuffix>
 		<SynchReleaseVersion>false</SynchReleaseVersion>
 		<Nullable>enable</Nullable>

src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js

@@ -1,26 +1,50 @@
 export function afterStarted(Blazor) {
+    Blazor.registerCustomEventType('customclick', {
+        browserEventName: 'click',
+        createEventArgs: event => {
+            return {
+                value: event.target.value
+            };
+        }
+    });
     Blazor.registerCustomEventType('checkedchange', {
-        browserEventName: 'change',
+        browserEventName: 'click',
         createEventArgs: event => {
             return {
                 checked: event.target.currentChecked
             };
         }
     });
+    Blazor.registerCustomEventType('accordionchange', {
+        browserEventName: 'change',
+        createEventArgs: event => {
+            if (event.target.localName == 'fluent-accordion-item') {
+                return {
+                    activeId: event.target.id,
+                }
+            };
+            return null;
+        }
+    });
     Blazor.registerCustomEventType('tabchange', {
         browserEventName: 'change',
         createEventArgs: event => {
-            return {
-                activeId: event.detail.id,
-                affectedId: event.detail.attributes['tab-id'].value
+            if (event.target.localName == 'fluent-tabs') {
+                return {
+                    activeId: event.detail.id,
+                    affectedId: event.detail.attributes['tab-id']?.value
+                }
             };
+            return null;
         }
     });
     Blazor.registerCustomEventType('selectedchange', {
         browserEventName: 'selected-change',
         createEventArgs: event => {
             return {
-                affectedId: event.detail.attributes['tree-item-id'].value
+                affectedId: event.detail.attributes['tree-item-id'].value,
+                selected: event.detail._selected,
+                expanded: event.detail._expanded
             };
         }
     });
@@ -40,28 +64,35 @@
             };
         }
     });
-    //Blazor.registerCustomEventType('accordionchange', {
-    //    browserEventName: 'change',
-    //    createEventArgs: event => {
-    //        return {
-    //            activeId: event.detail.id,
-    //            affectedId: event.detail.attributes['accordion-item-id'].value
-    //        };
-    //    }
-    //});
-    Blazor.registerCustomEventType('dismiss', {
+    Blazor.registerCustomEventType('tooltipdismiss', {
         browserEventName: 'dismiss',
         createEventArgs: event => {
-            return {
-                event: event
+            if (event.target.localName == 'fluent-tooltip') {
+                return {
+                    reason: event.type
+                };
+            };
+            return null;
+        }
+    });
+    Blazor.registerCustomEventType('dialogdismiss', {
+        browserEventName: 'dismiss',
+        createEventArgs: event => {
+            if (event.target.localName == 'fluent-dialog') {
+                return {
+                    reason: event.type
+                };
             };
+            return null;
         }
     });
+
     Blazor.registerCustomEventType('menuchange', {
         browserEventName: 'change',
         createEventArgs: event => {
             return {
-                event: event
+                id: event.target.id,
+                value: event.target.innerHTML
             };
         }
     });