[dev-v5] Add a generic FluentOption<TOption> (#4456)

* Add a generic FluentOption<T>

* Fix Unit Tests

* Rename FluentOption TOption to TValue

* Distinct TOption and TValue

* Add a OptionValueFormatted parameter and update the examples

* Update sample

* Rename to OptionValue and OptionBindedValue

* Refactor select components for consistency and debugging

* Improve type safety and validation in FluentSelect/Option

* Update docs and parsing for generic component types

* Update doc

* Fix build errors

* Fix Unit Tests

* Update Unit Tests

* Rename OptionBindedValue to OptionValue (extracts value from option) and OptionValue to OptionValueToString (formats value for HTML)

* Update example

* Fix Unit Tests

* Add "pointer-events: none;"

* Fix doc and update test

Author: dvoituron

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Image/Examples/FluentImageFit.razor

@@ -1,4 +1,4 @@
-<FluentSelect TOption="ImageFit" Items="@(Enum.GetValues<ImageFit>())" @bind-Value="@_selectedFit" />
+<FluentSelect Items="@(Enum.GetValues<ImageFit>())" @bind-Value="@_selectedFit" />
 <div style="width: auto; height: 400px; margin-top: 10px">
     <FluentImage Fit="@_selectedFit" Source="/big-heart.jpg" AlternateText="Placeholder Image" />
 </div>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Image/Examples/FluentImageShape.razor

@@ -1,4 +1,4 @@
-<FluentSelect TOption="ImageShape" Items="@(Enum.GetValues<ImageShape>())" @bind-Value="@_selectedShape" />
+<FluentSelect Items="@(Enum.GetValues<ImageShape>())" @bind-Value="@_selectedShape" />
 <div style="width: auto; height: 300px; margin-top: 10px">
     <FluentImage Shape="@_selectedShape" Source="/big-heart.jpg" AlternateText="Placeholder Image" />
 </div>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/Examples/ComboboxDefault.razor

@@ -1,5 +1,4 @@
 <FluentCombobox Label="Countries"
-                TOption="@SampleData.Olympics2024.Country"
                 Placeholder="Select your countries"
                 Multiple="true"
                 OptionText="@(i => i?.Name)"

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Combobox/FluentCombobox.md

@@ -50,19 +50,20 @@ You can customize the items in the **FluentSelect** component by using Lambda ex
 The following example shows how to customize the items:
 - `OptionText`: This function is used to customize the text of the option. <br />
 - `OptionValue`: This function is used to customize the value of the option. <br />
+- `OptionValueToString`: This function is used to customize the HTML value of the option. <br />
 - `OptionDisabled`: This function is used to define the disabled options. <br />
 
 See a similar example on the [FluentSelect](/List/Select#customize-the-items) page.
 
 ## API FluentCombobox
 
-{{ API Type=FluentCombobox }}
+{{ API Type=FluentCombobox<string,string> }}
 
 > [!NOTE] The `Width` parameter is not yet implemented.
 
 ## API FluentOption
 
-{{ API Type=FluentOption }}
+{{ API Type=FluentOption<string> }}
 
 ## Migrating to v5
 

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Option/Examples/OptionStartContent.razor

@@ -1,15 +1,15 @@
-<FluentOption Selected>
+<FluentOption TValue="string" Selected>
     <FluentAvatar Size="AvatarSize.Size16" Color="AvatarColor.Blue" Slot="@FluentSlot.Start">16</FluentAvatar>
     Option with 16px avatar
 </FluentOption>
 <br />
 
-<FluentOption>
+<FluentOption TValue="string">
     <FluentIcon Value="@(new Icons.Regular.Size24.Globe())" Color="Color.Error" Slot="@FluentSlot.Start" />
     Option with 24px icon
 </FluentOption>
 <br />
-<FluentOption Selected Description="Additional information can be provided with the description parameter">
+<FluentOption TValue="string" Selected Description="Additional information can be provided with the description parameter">
     <FluentAvatar Size="AvatarSize.Size32" Color="AvatarColor.Blue" Slot="@FluentSlot.Start">32</FluentAvatar>
     Option with 32px avatar
 </FluentOption>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Select/Examples/SelectAppearance.razor

@@ -42,5 +42,5 @@
 
 @code {
     static string[] Colors = ["Red", "Green", "Blue"];
-    string Value = "Red";
+    string Value = "Green";
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Select/Examples/SelectCustomized.razor

@@ -5,7 +5,7 @@
               Items="@Coworkers"
               @bind-Value="@Value"
               OptionText="@(item => item?.FirstName)"
-              OptionValue="@(item => item?.Id)"
+              OptionValueToString="@(item => item?.Id)"
               OptionDisabled="@(item => item == Coworkers.ElementAt(3))" />
 
 <div>
@@ -14,8 +14,7 @@
 
 @code {
     static Samples.Person?[] OneNullPerson = new Samples.Person?[] { null };
-    static Samples.Person?[] Coworkers =>
-          OneNullPerson.Union(Samples.Persons.Take(5).ToArray()).ToArray();
+    static Samples.Person?[] Coworkers = OneNullPerson.Union(Samples.Persons.Take(5).ToArray()).ToArray();
 
     Samples.Person? Value = Coworkers.ElementAt(2);
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Select/Examples/SelectEnum.razor

@@ -4,7 +4,7 @@
               Items="@GetEnumValues()"
               @bind-Value="@Value">
     <OptionTemplate>
-        <FluentStack>
+        <FluentStack Style="pointer-events: none;">
             <div class="color-block" style="--item-color: @context.ToAttributeValue()"></div>
             <span>@context</span>
         </FluentStack>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Select/Examples/SelectLanguage.razor

@@ -0,0 +1,41 @@
+<!-- Using Items -->
+<FluentSelect Label="Language"
+              Items="@Languages"
+              @bind-Value="@SelectedId1"
+              OptionText="@(i => i.Name)"
+              OptionValue="@(i => i.Id)" />
+
+<!-- Using FluentOptions -->
+<FluentSelect Label="Language"
+              TOption="Language"
+              TValue="int?"
+              @bind-Value="@SelectedId2">
+    <FluentOption TValue="int?" Value="@(null)" Text="[Select]" />
+    @foreach (var language in Languages)
+    {
+        <FluentOption TValue="int?" Value="@language.Id">
+            @language.Name
+        </FluentOption>
+    }
+</FluentSelect>
+
+<div>
+    IDs: (@SelectedId1, @SelectedId2)
+</div>
+
+@code {
+
+    int SelectedId1 = 3;
+    int? SelectedId2 = 3;
+
+    static Language[] Languages = new Language[]
+    {
+        new(1, "C#"),
+        new(2, "Java"),
+        new(3, "Python"),
+        new(4, "JavaScript"),
+        new(5, "Go")
+    };
+
+    record Language(int Id, string Name);
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/List/Select/Examples/SelectManual.razor

@@ -1,9 +1,11 @@
-<FluentSelect Label="RGB Color"
+<FluentSelect TOption="string"
+              TValue="string"
+              Label="RGB Color"
               Placeholder="Select a color"
               @bind-Value="@Value">
-    <FluentOption Value="#ff0000">Red</FluentOption>
-    <FluentOption Value="#00ff00">Green</FluentOption>
-    <FluentOption Value="#0000ff">Blue</FluentOption>
+    <FluentOptionString Value="ff0000">Red</FluentOptionString>
+    <FluentOptionString Value="00ff00">Green</FluentOptionString>
+    <FluentOptionString Value="0000ff">Blue</FluentOptionString>
 </FluentSelect>
 
 <div>