MudListExtended & MudSelectExtended: SearchBox

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor

@@ -11,9 +11,20 @@
             <MudListItemExtended T="T" IsFunctional="true" Icon="@SelectAllCheckBoxIcon" IconColor="@Color" Text="@SelectAllText" OverrideMultiSelectionComponent="MultiSelectionComponent.None" OnClick="@(() => SelectAllItems(_allSelected))" OnClickHandlerPreventDefault="true" Dense="@Dense" Class="mb-2" />
             <MudDivider />
         }
+
         @if (ItemCollection != null)
         {
-            <MudVirtualize IsEnabled="@Virtualize" Items="ItemCollection" Context="item" OverscanCount="@OverscanCount">
+            @if (SearchBox == true)
+            {
+                <MudListSubheaderExtended T="T" Style="position: sticky; top: -12px; background-color: var(--mud-palette-background); z-index: 10">
+                    <div @onkeydown:stopPropagation>
+                        <MudTextField @bind-Value="@_searchString" Class="@ClassSearchBox" OnKeyUp="@(() => UpdateSelectedStyles())" Immediate="true" Variant="Variant.Outlined" Margin="Margin.Dense"
+                              Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" IconColor="Color" />
+                    </div>
+
+                </MudListSubheaderExtended>
+            }
+            <MudVirtualize IsEnabled="@Virtualize" Items="GetSearchedItems()" Context="item" OverscanCount="@OverscanCount">
                 @if (MudSelectExtended != null)
                 {
                     <MudSelectItemExtended Value="@item" Text="@(MudSelectExtended.ToStringFunc == null ? item.ToString() : MudSelectExtended.ToStringFunc(item))" />
@@ -22,8 +33,6 @@
                 {
                     <MudListItemExtended Value="@item" Text="@item.ToString()" />
                 }
-                @*Upper commented block will replace after Experimental Select*@
-                @*<MudListItemExtended Value="@item" Text="@item.ToString()" />*@
             </MudVirtualize>
         }
         else

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Data;
 using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
@@ -9,6 +10,7 @@
 using MudBlazor.Utilities;
 using MudExtensions.Enums;
 using MudExtensions.Services;
+using static MudBlazor.CategoryTypes;
 
 namespace MudExtensions
 {
@@ -26,6 +28,7 @@ public partial class MudListExtended<T> : MudComponentBase, IDisposable
         private List<MudListExtended<T>> _childLists = new();
         internal MudListItemExtended<T> _lastActivatedItem;
         internal bool? _allSelected = false;
+        private string _searchString;
 
         protected string Classname =>
         new CssBuilder("mud-list-extended")
@@ -111,6 +114,20 @@ public IEqualityComparer<T> Comparer
         [Category(CategoryTypes.List.Behavior)]
         public ICollection<T> ItemCollection { get; set; } = null;
 
+        /// <summary>
+        /// If true, shows a searchbox for filtering items. Only works with ItemCollection approach.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBox { get; set; }
+
+        /// <summary>
+        /// SearchBox's CSS classes, seperated by space.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public string ClassSearchBox { get; set; }
+
         /// <summary>
         /// Allows virtualization. Only work if ItemCollection parameter is not null.
         /// </summary>
@@ -663,6 +680,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 }
                 _firstRendered = true;
             }
+
             _centralCommanderResultRendered = true;
         }
 
@@ -846,7 +864,7 @@ protected internal void SetSelectedValue(MudListItemExtended<T> item, bool force
             _lastActivatedItem = item;
         }
 
-        protected internal void UpdateSelectedStyles(bool deselectFirst = true)
+        protected internal void UpdateSelectedStyles(bool deselectFirst = true, bool update = true)
         {
             var items = CollectAllMudListItems(true);
             if (deselectFirst)
@@ -868,7 +886,10 @@ protected internal void UpdateSelectedStyles(bool deselectFirst = true)
                 items.Where(x => SelectedValues.Contains(x.Value, Comparer == null ? null : Comparer)).ToList().ForEach(x => x.SetSelected(true));
             }
 
-            StateHasChanged();
+            if (update == true)
+            {
+                StateHasChanged();
+            }
         }
 
         protected bool IsSelectable()
@@ -1214,7 +1235,7 @@ public async Task ActiveLastItem()
         #endregion
 
 
-        #region Others (Clear, Scroll)
+        #region Others (Clear, Scroll, Search)
 
         /// <summary>
         /// Clears value(s) and item(s) and deactive all items.
@@ -1239,6 +1260,16 @@ public void Clear()
         protected internal ValueTask ScrollToMiddleAsync(MudListItemExtended<T> item)
             => ScrollManagerExtended.ScrollToMiddleAsync(_elementId, item.ItemId);
 
+        protected ICollection<T> GetSearchedItems()
+        {
+            if (SearchBox == false || ItemCollection == null || _searchString == null)
+            {
+                return ItemCollection;
+            }
+
+            return ItemCollection.Where(x => Converter.Set(x).Contains(_searchString, StringComparison.CurrentCultureIgnoreCase)).ToList();
+        }
+
         #endregion
     }
 }

CodeBeam.MudExtensions/Components/ListExtended/MudListItemExtended.razor.cs

@@ -24,11 +24,12 @@ public partial class MudListItemExtended<T> : MudComponentBase, IDisposable
           .AddClass("mud-list-item-dense-extended", Dense == true || MudListExtended?.Dense == true)
           .AddClass("mud-list-item-gutters-extended", !DisableGutters && !(MudListExtended?.DisableGutters == true))
           .AddClass("mud-list-item-clickable-extended", MudListExtended?.Clickable)
-          .AddClass("mud-ripple", MudListExtended?.Clickable == true && !DisableRipple && !Disabled)
+          .AddClass("mud-ripple", MudListExtended?.Clickable == true && !DisableRipple && !Disabled && !IsFunctional)
           .AddClass($"mud-selected-item mud-{MudListExtended?.Color.ToDescriptionString()}-text mud-{MudListExtended?.Color.ToDescriptionString()}-hover", _selected && !Disabled && NestedList == null && !MudListExtended.DisableSelectedItemStyle)
           .AddClass("mud-list-item-hilight-extended", _active && !Disabled && NestedList == null && IsFunctional == false)
           .AddClass("mud-list-item-disabled-extended", Disabled)
           .AddClass("mud-list-item-nested-background-extended", MudListExtended != null && MudListExtended.SecondaryBackgroundForNestedItemHeader && NestedList != null)
+          .AddClass("mud-list-item-functional", IsFunctional)
           .AddClass(Class)
         .Build();
 

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor

@@ -100,7 +100,7 @@
                                  Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
                                  MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllText="@SelectAllText"
                                  CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
-                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate">
+                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox">
                             @ChildContent
 						</MudListExtended>
 					</CascadingValue>

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor.cs

@@ -296,6 +296,13 @@ public bool Dense
         [Category(CategoryTypes.FormComponent.Behavior)]
         public bool Clearable { get; set; } = false;
 
+        /// <summary>
+        /// If true, shows a searchbox for filtering items. Only works with ItemCollection approach.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool SearchBox { get; set; }
+
         /// <summary>
         /// If true, prevent scrolling while dropdown is open.
         /// </summary>

CodeBeam.MudExtensions/Styles/Components/_listextended.scss

@@ -56,7 +56,7 @@ $mud-palette-colors: primary, secondary, tertiary, info, success, warning, error
     -webkit-tap-highlight-color: transparent;
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
-    &:hover {
+    &:hover:not(.mud-list-item-functional) {
         background-color: var(--mud-palette-action-default-hover);
     }
 }

CodeBeam.MudExtensions/Styles/MudExtensions.css

@@ -537,7 +537,7 @@
   -webkit-appearance: none;
   -webkit-tap-highlight-color: transparent;
   transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }
-  .mud-list-item-clickable-extended:hover {
+  .mud-list-item-clickable-extended:hover:not(.mud-list-item-functional) {
     background-color: var(--mud-palette-action-default-hover); }
 
 .mud-list-item-gutters-extended {

ComponentViewer.Docs/Pages/Components/ListExtendedPage.razor

@@ -10,7 +10,7 @@
         <ListExtendedExample1 />
     </ExampleCard>
 
-    <ExampleCard ExampleName="ListExtendedExample2" Title="ItemCollection" Description="Extended list can also populate with ItemCollection parameter.">
+    <ExampleCard ExampleName="ListExtendedExample2" Title="ItemCollection and SearchBox" Description="Extended list can also populate with ItemCollection parameter.">
         <ListExtendedExample2 />
     </ExampleCard>
 

ComponentViewer.Docs/Pages/Components/SelectExtendedPage.razor

@@ -10,6 +10,10 @@
         <SelectExtendedExample1 />
     </ExampleCard>
 
+    <ExampleCard ExampleName="SelectExtendedExample6" Title="SearchBox" Description="SearchBox can be added if items populated with ItemCollection parameter.">
+        <SelectExtendedExample6 />
+    </ExampleCard>
+
     <ExampleCard ExampleName="SelectExtendedExample2" Title="Color" Description="Extended select accepts Mud colors.">
         <SelectExtendedExample2 />
     </ExampleCard>

ComponentViewer.Docs/Pages/Examples/ListExtendedExample2.razor

@@ -5,23 +5,29 @@
     <MudItem xs="12" sm="8" Class="d-flex gap-8 align-top justify-center" Style="height: 500px">
         <MudPaper Width="300px" Elevation="0">
             <MudText Class="ma-4">Array List</MudText>
-            <MudListExtended ItemCollection="_states" Clickable="true" MaxItems="_maxItems" />
+            <MudListExtended ItemCollection="_states" Clickable="true" MaxItems="_maxItems" SearchBox="_searchBox" @bind-SelectedValue="_selectedState" />
         </MudPaper>
 
         <MudPaper Width="300px" Elevation="0">
             <MudText Class="ma-4">Enum List</MudText>
-            <MudListExtended T="Continent" ItemCollection="(ICollection<Continent>)Enum.GetValues<Continent>()" Clickable="true" MaxItems="_maxItems" />
+            <MudListExtended T="Continent" ItemCollection="(ICollection<Continent>)Enum.GetValues<Continent>()" Clickable="true" MaxItems="_maxItems" SearchBox="_searchBox" />
         </MudPaper>
     </MudItem>
 
     <MudItem xs="12" sm="4">
-        <MudNumericField @bind-Value="_maxItems" Label="Max Items" Min="0" Max="16" HelperText="Between 0 - 16" HelperTextOnFocus="true" />
+        <MudStack>
+            <MudText>Selected State: @_selectedState</MudText>
+            <MudNumericField @bind-Value="_maxItems" Label="Max Items" Min="0" Max="16" HelperText="Between 0 - 16" HelperTextOnFocus="true" />
+            <MudSwitchM3 @bind-Checked="_searchBox" Color="Color.Primary" Label="SearchBox" />
+        </MudStack>
     </MudItem>
 </MudGrid>
 
 @code
 {
     int _maxItems = 8;
+    bool _searchBox = false;
+    string _selectedState;
 
     private string[] _states =
     {

ComponentViewer.Docs/Pages/Examples/ListExtendedExampleIntro.razor

@@ -82,4 +82,13 @@
             <MudText Align="Align.Center">Keyboard Navigation</MudText>
         </MudPaper>
     </MudItem>
+
+    <MudItem xs="12" md="6" Class="d-flex align-center">
+        <MudPaper Class="d-flex align-center justify-center mud-theme-secondary" MinWidth="100px" Height="100px">
+            <MudAvatar Variant="Variant.Filled" Color="Color.Secondary">10</MudAvatar>
+        </MudPaper>
+        <MudPaper Class="d-flex align-center justify-center pa-2" MinWidth="200px" Height="100px">
+            <MudText Align="Align.Center">SearchBox</MudText>
+        </MudPaper>
+    </MudItem>
 </MudGrid>

ComponentViewer.Docs/Pages/Examples/SelectExtendedExample6.razor

@@ -0,0 +1,35 @@
+
+<MudGrid>
+    <MudItem xs="12" sm="8">
+        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" T="string" Label="US States" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" />
+    </MudItem>
+
+    <MudItem xs="12" sm="4">
+        <MudStack>
+            <MudSwitchM3 @bind-Checked="_multiselection" Color="Color.Primary" Label="MultiSelection" />
+        </MudStack>
+    </MudItem>
+</MudGrid>
+
+@code {
+    bool _multiselection;
+
+    private string[] _states =
+    {
+        "Alabama", "Alaska", "American Samoa", "Arizona",
+        "Arkansas", "California", "Colorado", "Connecticut",
+        "Delaware", "District of Columbia", "Federated States of Micronesia",
+        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
+        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
+        "Louisiana", "Maine", "Marshall Islands", "Maryland",
+        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
+        "Missouri", "Montana", "Nebraska", "Nevada",
+        "New Hampshire", "New Jersey", "New Mexico", "New York",
+        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
+        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
+        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
+        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
+        "Washington", "West Virginia", "Wisconsin", "Wyoming",
+    };
+
+}

ComponentViewer.Docs/Pages/Examples/SelectExtendedExampleIntro.razor

@@ -82,4 +82,13 @@
             <MudText Align="Align.Center">Several Bug Fixes</MudText>
         </MudPaper>
     </MudItem>
+
+    <MudItem xs="12" md="6" Class="d-flex align-center">
+        <MudPaper Class="d-flex align-center justify-center mud-theme-secondary" MinWidth="100px" Height="100px">
+            <MudAvatar Variant="Variant.Filled" Color="Color.Secondary">10</MudAvatar>
+        </MudPaper>
+        <MudPaper Class="d-flex align-center justify-center pa-2" MinWidth="200px" Height="100px">
+            <MudText Align="Align.Center">SearchBox</MudText>
+        </MudPaper>
+    </MudItem>
 </MudGrid>