Merge branch 'dev'

Author: vnbaaij

Directory.Build.props

@@ -12,8 +12,8 @@
     <SolutionDir>$(MSBuildThisFileDirectory)</SolutionDir>
     <AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
 
-    <VersionFile>4.11.9</VersionFile>
-    <VersionPrefix>4.11.9</VersionPrefix>
+    <VersionFile>4.12.0</VersionFile>
+    <VersionPrefix>4.12.0</VersionPrefix>
     <VersionSuffix></VersionSuffix>
     <AssemblyVersion>$(VersionFile)</AssemblyVersion>
     <FileVersion>$(VersionFile)</FileVersion>

Directory.Packages.props

@@ -2,20 +2,20 @@
   <PropertyGroup>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
     <RuntimeVersion8>8.0.0</RuntimeVersion8>
-    <AspNetCoreVersion8>8.0.15</AspNetCoreVersion8>
-    <EfCoreVersion8>8.0.15</EfCoreVersion8>
-    <RuntimeVersion9>9.0.4</RuntimeVersion9>
-    <AspNetCoreVersion9>9.0.4</AspNetCoreVersion9>
-    <EfCoreVersion9>9.0.4</EfCoreVersion9>
-    <RuntimeVersion10>10.0.0-preview.3.25171.5</RuntimeVersion10>
-    <AspNetCoreVersion10>10.0.0-preview.3.25172.1</AspNetCoreVersion10>
-    <EfCoreVersion10>10.0.0-preview.3.25171.6</EfCoreVersion10>
+    <AspNetCoreVersion8>8.0.16</AspNetCoreVersion8>
+    <EfCoreVersion8>8.0.16</EfCoreVersion8>
+    <RuntimeVersion9>9.0.5</RuntimeVersion9>
+    <AspNetCoreVersion9>9.0.5</AspNetCoreVersion9>
+    <EfCoreVersion9>9.0.5</EfCoreVersion9>
+    <RuntimeVersion10>10.0.0-preview.4.25258.110</RuntimeVersion10>
+    <AspNetCoreVersion10>10.0.0-preview.4.25258.110</AspNetCoreVersion10>
+    <EfCoreVersion10>10.0.0-preview.4.25258.110</EfCoreVersion10>
   </PropertyGroup>
   <ItemGroup>
     <!-- For Sample Apps -->
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.11.8" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.11.8" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.11.8" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.11.9" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.11.9" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.11.9" />
     <!-- Test dependencies -->
     <PackageVersion Include="bunit" Version="1.38.5" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.13.0" />

WHATSNEW.md

@@ -1,3 +1,39 @@
+## V4.12.0
+
+### General
+- \[General\] Use latest .NET SDKs (including .NET 10 preview 4)([#3789](https://github.com/microsoft/fluentui-blazor/pull/3789))
+
+### Components
+- \[AutoComplete\] Do not show previous/next when no option is selected ([#3780](https://github.com/microsoft/fluentui-blazor/pull/3780))
+- \[Autocomplete\] Fix active highlight size for single-select mode ([#3819](https://github.com/microsoft/fluentui-blazor/pull/3819))
+- \[AutoComplete\] Fix using different height for MaxAutoHeight (#3793) ([#3796](https://github.com/microsoft/fluentui-blazor/pull/3796))
+- \[DataGrid\] Add UseMenuService parameter to override menu behavior ([#3862](https://github.com/microsoft/fluentui-blazor/pull/3862))
+- \[DataGrid\] Make Select/Deselect all more robust ([#3866](https://github.com/microsoft/fluentui-blazor/pull/3866))
+- \[DataGrid\] Refine logic that determines if the DataGrid data needs to be reloaded ([#3864](https://github.com/microsoft/fluentui-blazor/pull/3864))
+- \[DataGrid\] Resize enhancements ([#3767](https://github.com/microsoft/fluentui-blazor/pull/3767))
+- \[DataGrid\] Tweak new resize behavior ([#3787](https://github.com/microsoft/fluentui-blazor/pull/3787))
+- \[DataGrid\] Use ColumnOptionsLabels.Icon in more places ([#3865](https://github.com/microsoft/fluentui-blazor/pull/3865))
+- \[DataGrid\] Add `HeaderCellTitleTemplate` to `ColumnBase` ([#3860](https://github.com/microsoft/fluentui-blazor/pull/3860))
+- \[DesignTheme\] Store selected color in GlobalState ([#3833](https://github.com/microsoft/fluentui-blazor/pull/3833))
+- \[Lists\] Do not set internal value when using multiple ([#3835](https://github.com/microsoft/fluentui-blazor/pull/3835))
+- \[MainLayout\] Remove double header reduction ([#3841](https://github.com/microsoft/fluentui-blazor/pull/3841))
+- \[MenuButton\] Pass through AdditionalAttributes ([#3798](https://github.com/microsoft/fluentui-blazor/pull/3798))
+- \[MenuProvider\] Pass through class and style from menu's. ([#3809](https://github.com/microsoft/fluentui-blazor/pull/3809))
+- \[MultiSplitter\] Remove position from panel CSS ([#3870](https://github.com/microsoft/fluentui-blazor/pull/3870))
+- \[SortableList\] Extend the CSS class with more predefined variables([#3877](https://github.com/microsoft/fluentui-blazor/pull/3877))
+- \[Tabs\] Make initialization logic more robust ([#3878](https://github.com/microsoft/fluentui-blazor/pull/3878))
+
+### Demo site and documentation
+- \[Docs\] Add docs about `FluentEditForm` ([#3832](https://github.com/microsoft/fluentui-blazor/pull/3832))
+- \[Docs\] Fix typo in InputFile documentation ([#3769](https://github.com/microsoft/fluentui-blazor/pull/3769))
+- \[Docs\] Fix typo in Card documentation ([#3839](https://github.com/microsoft/fluentui-blazor/pull/3839))
+- \[Docs\] Remove Autofocus to prevent scrolling in the docs (#3826) ([#3828](https://github.com/microsoft/fluentui-blazor/pull/3828))
+- \[Docs\] Update reboot section for IIS hosting workaround ([#3788](https://github.com/microsoft/fluentui-blazor/pull/3788))
+
+### Icons and Emoji
+  - Update to Fluent UI System Icons 1.1.302.
+    See the commit history in the Fluent UI System Icons repository [commit history](https://github.com/microsoft/fluentui-system-icons/commits/main/) for the full list of changes.
+
 ## V4.11.9  
 
 ### General  

docs/contributing.md

@@ -38,11 +38,17 @@ dotnet build
 
 ### Submitting a pull request
 
-If you'd like to contribute by fixing a bug, implementing a feature, or even correcting typos in our documentation, you'll want to submit a pull request. Before submitting a pull request, be sure to [rebase](https://www.atlassian.com/git/tutorials/merging-vs-rebasing) your branch from master. Do not use ``git merge`` or the *merge* button provided by GitHub.
+If you'd like to contribute by fixing a bug, implementing a feature, or even correcting typos in our documentation, you'll need to submit a pull request.
+Before submitting a pull request, be sure to [rebase](https://www.atlassian.com/git/tutorials/merging-vs-rebasing) your branch from master. Do not use ``git merge`` or the *merge* button provided by GitHub.
 
-### Merging a pull request
+For PR naming use the following convention: `[component name] Description` (note no period at the end)
 
-If you are merging a pull request, be sure to use the pull request title as the commit title. The title should follow the [conventional commit guidelines](https://www.conventionalcommits.org/). It is recommended that if you are merging in pull requests regularly that you add a browser extension that will auto-correct the title for you. A few that should do this are [Refined GitHub](https://github.com/sindresorhus/refined-github) and [Squashed Merge Message](https://github.com/zachwhaley/squashed-merge-message).
+- For the component name, leave out the Fluent part.
+- For the description, do not reference an issue number in there. Just a clear, short summary of what change entails is enough. There is enough room to elaborate in the description  .
+
+When a PR is related to an issue, use the 'fix #issuenumber' syntax to automatically link the issue to the PR. That way the issue gets closed when the PR is merged.
+
+For PR description use before and after images /screenshot when possible to make more clear what has changed. We link to the PRs from the what's new page so it helps to provide better context.
 
 ## Contribution policy
 

eng/pipelines/version.yml

@@ -2,5 +2,5 @@ variables:
   # File and Package version
   # dev  branch: 1.2.4-Preview-23282-1'    (PackageSuffix is always ignored in Dev branch)
   # main branch: 1.2.4-RC.1'               (PackageSuffix is ignored, if empty, in Main branch)
-  FileVersion: '4.11.9'   # Set the next final version here.
+  FileVersion: '4.12.0'   # Set the next final version here.
   PackageSuffix: ''

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1241,6 +1241,12 @@
             If not specified, the default header template includes the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.Title" /> along with any applicable sort indicators and options buttons.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.HeaderCellTitleTemplate">
+            <summary>
+            Gets or sets a template for the title content of this column's header cell.
+            If not specified, the default header template includes the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.Title" />.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.ColumnOptions">
              <summary>
              If specified, indicates that this column has this associated options UI. A button to display this
@@ -1350,6 +1356,14 @@
             respecting that option.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.HeaderTitleContent">
+            <summary>
+            Gets or sets a <see cref="T:Microsoft.AspNetCore.Components.RenderFragment" /> that will be rendered for this column's header title.
+            This allows derived components to change the header title output. However, derived components are then
+            responsible for using <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.HeaderCellTitleTemplate" /> within that new output if they want to continue
+            respecting that option.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.IsSortableByDefault">
              <summary>
              Gets a value indicating whether this column should act as sortable if no value was set for the
@@ -1966,6 +1980,13 @@
              If true, enables the new style of header cell that includes a button to display all column options through a menu.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.UseMenuService">
+            <summary>
+            Use IMenuService to create the menu, if this service was injected.
+            This value must be defined before the component is rendered (you can't change it during the component lifecycle).
+            Default, true.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ItemKey">
              <summary>
              Optionally defines a value for @key on each rendered row. Typically this should be used to specify a
@@ -2255,6 +2276,12 @@
             </summary>
             <returns></returns>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ComputeItemsHash(System.Collections.Generic.IEnumerable{`0},System.Int32)">
+            <summary>
+            Computes a hash code for the given items.
+            To limit the effect on performance, only the given maximum number (default 250) of items will be considered.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.Item">
             <summary>
             Gets or sets the reference to the item that holds this cell's values.
@@ -6378,6 +6405,12 @@
             Gets or sets the function used to determine if an option is initially selected.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.OptionComparer">
+            <summary>
+            Gets or sets the <see cref="T:System.Collections.Generic.IEqualityComparer`1"/> used to determine if an option is already added to the internal list.
+            ⚠️ Only available when Multiple = true.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Items">
             <summary>
             Gets or sets the content source of all items to display in this list.

examples/Demo/Shared/Pages/Card/CardPage.razor

@@ -16,7 +16,7 @@
 <DemoSection Title="Area restricted examples" Component="@typeof(CardAreaRestricted)">
     <Description>
         <p>
-            By default a card restricts its content to the card area. This means, for exmple, that if you have a select list with a lot of items, the list will be cut off at the bottom of the card.
+            By default a card restricts its content to the card area. This means, for example, that if you have a select list with a lot of items, the list will be cut off at the bottom of the card.
             You can override this behavior by setting the <code>AreaRestricted</code> property to <code>false</code>.
         </p>
     </Description>

examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor

@@ -58,7 +58,7 @@
 <h2 id="sorting">Sorting</h2>
 <p>
     The DataGrid supports sorting by clicking on the column headers. The default sort direction is ascending. Clicking on the same column header again will toggle the sort direction.
-    A sort can be removed by right clicking on the header column (with exception of the default sort).
+    A sort can be removed by right clicking (or by pressing Shift+R) on the header column (with exception of the default sort).
 </p>
 
 <h2 id="styling">Row size</h2>

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor

@@ -18,12 +18,14 @@
     </FluentRadioGroup>
     <FluentSpacer Width="25" />
     <FluentCheckbox @bind-Value="@_showActionsMenu" Label="Use menu for column actions" />
+    <FluentCheckbox @bind-Value="@_useMenuService" Label="Use service for rendering menu" Disabled="!_showActionsMenu" />
 </FluentToolbar>
 <div style="height: 400px; overflow-x:auto; display:flex;">
     <FluentDataGrid Items="@FilteredItems"
                     ResizableColumns=true
                     ResizeType="@_resizeType"
                     HeaderCellAsButtonWithMenu="_showActionsMenu"
+                    UseMenuService="_useMenuService"
                     Pagination="@pagination"
                     TGridItem="Country"
                     OnRowFocus="HandleRowFocus"
@@ -75,6 +77,7 @@
     string nameFilter = string.Empty;
     DataGridResizeType? _resizeType = null;
     bool _showActionsMenu;
+    bool _useMenuService = true;
 
     GridSort<Country> rankSort = GridSort<Country>
         .ByDescending(x => x.Medals.Gold)

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomHeader.razor

@@ -0,0 +1,52 @@
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+@using Microsoft.FluentUI.AspNetCore.Components
+
+<FluentDataGrid Items="@people">
+    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" Title="Identity">
+        <HeaderCellTitleTemplate>
+            <FluentStack Orientation="Orientation.Horizontal"
+                         VerticalAlignment="VerticalAlignment.Center">
+                <FluentIcon Icon="Icons.Regular.Size20.Person" />
+                @context.Title
+            </FluentStack>
+        </HeaderCellTitleTemplate>
+    </PropertyColumn>
+    <PropertyColumn Property="@(p => p.Name)" Sortable="true" Title="Full _name" />
+    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true">
+        <HeaderCellTitleTemplate>
+            <FluentStack Orientation="Orientation.Horizontal"
+                         VerticalAlignment="VerticalAlignment.Center">
+                <FluentIcon Icon="Icons.Regular.Size20.Calendar" />
+                Birth date
+            </FluentStack>
+        </HeaderCellTitleTemplate>
+    </PropertyColumn>
+</FluentDataGrid>
+
+@code {
+    public class Person
+    {
+        public Person(int personId, string name, DateOnly birthDate)
+        {
+            PersonId = personId;
+            Name = name;
+            BirthDate = birthDate;
+        }
+
+        public int PersonId { get; set; }
+
+        public string Name { get; set; }
+
+        public DateOnly BirthDate { get; set; }
+    }
+
+    IQueryable<Person> people = new[]
+    {
+        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
+        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
+        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
+        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
+        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
+        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
+    }.AsQueryable();
+}