Summary
@@ -74,16 +75,16 @@
@if (index > 0)
{
- Go to first page
- Previous
+ Go to first page
+ Previous
}
@if (index != lastStepIndex)
{
- Next
- Go to last page
+ Next
+ Go to last page
}
}
@@ -92,5 +93,11 @@
@code
{
+ FluentWizard MyWizard = default!;
int Value = 0;
+
+ void OnStepChange(FluentWizardStepChangeEventArgs e)
+ {
+ DemoLogger.WriteLine($"Go to step {e.TargetLabel} (#{e.TargetIndex})");
+ }
}
diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor
index fa8da51d8f..20c7a3520e 100644
--- a/examples/Demo/Shared/Shared/DemoMainLayout.razor
+++ b/examples/Demo/Shared/Shared/DemoMainLayout.razor
@@ -36,7 +36,7 @@
+ title="Fluent UI Blazor library source on GitHub" aria-label="Fluent UI Blazor library source on GitHub">
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css
index 54e62183b6..633043e1f3 100644
--- a/examples/Demo/Shared/wwwroot/css/site.css
+++ b/examples/Demo/Shared/wwwroot/css/site.css
@@ -399,14 +399,19 @@ kbd {
}
}
-@media (min-width: 768px) and (max-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1279px) {
fluent-select::part(control) {
width: 150px;
}
+ .content {
+ flex-direction: column;
+ }
aside {
padding: 1.5em 0.75em 1em 0.75em;
- width: 12rem;
+ width: 100%;
+ height: 100%!important;
+ max-height: 100% !important;
}
article {
diff --git a/src/Core/Components/Anchor/FluentAnchor.razor.cs b/src/Core/Components/Anchor/FluentAnchor.razor.cs
index c706d1bda1..4d3d70ef00 100644
--- a/src/Core/Components/Anchor/FluentAnchor.razor.cs
+++ b/src/Core/Components/Anchor/FluentAnchor.razor.cs
@@ -1,17 +1,24 @@
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.JSInterop;
namespace Microsoft.FluentUI.AspNetCore.Components;
public partial class FluentAnchor : FluentComponentBase, IAsyncDisposable
{
+ private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Anchor/FluentAnchor.razor.js";
private IJSObjectReference _jsModule = default!;
private string? _targetId = null;
private bool _preventDefault = false;
+ ///
[Inject]
- protected IJSRuntime JSRuntime { get; set; } = default!;
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+ ///
+ [Inject]
+ private IJSRuntime JSRuntime { get; set; } = default!;
///
/// Prompts the user to save the linked URL. See a element for more information.
@@ -123,8 +130,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
- _jsModule = await JSRuntime.InvokeAsync("import",
- "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Anchor/FluentAnchor.razor.js");
+ _jsModule = await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
}
}
diff --git a/src/Core/Components/AnchoredRegion/FluentAnchoredRegion.razor.cs b/src/Core/Components/AnchoredRegion/FluentAnchoredRegion.razor.cs
index 7a60e950c2..cabea0cd47 100644
--- a/src/Core/Components/AnchoredRegion/FluentAnchoredRegion.razor.cs
+++ b/src/Core/Components/AnchoredRegion/FluentAnchoredRegion.razor.cs
@@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -7,6 +8,11 @@ public partial class FluentAnchoredRegion : FluentComponentBase
{
private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/AnchoredRegion/FluentAnchoredRegion.razor.js";
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+ ///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -161,7 +167,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
// Go to the first Focusable element (after a delay of 100ms, to allow the DOM to render the Web Components)
if (AutoFocus)
diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.cs b/src/Core/Components/AppBar/FluentAppBar.razor.cs
index 50570749db..fc77f4bc3a 100644
--- a/src/Core/Components/AppBar/FluentAppBar.razor.cs
+++ b/src/Core/Components/AppBar/FluentAppBar.razor.cs
@@ -3,6 +3,7 @@
// ------------------------------------------------------------------------
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
using System.Text.Json;
@@ -23,6 +24,10 @@ public partial class FluentAppBar : FluentComponentBase
// ToDo: Implement focus on popup
//private FluentSearch? _appSearch;
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -77,7 +82,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
_dotNetHelper = DotNetObjectReference.Create(this);
// Overflow
- _jsModuleOverflow = await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ _jsModuleOverflow = await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, false, OVERFLOW_SELECTOR);
}
diff --git a/src/Core/Components/Button/FluentButton.razor.cs b/src/Core/Components/Button/FluentButton.razor.cs
index ef4a476bbb..a52ecebef4 100644
--- a/src/Core/Components/Button/FluentButton.razor.cs
+++ b/src/Core/Components/Button/FluentButton.razor.cs
@@ -1,5 +1,6 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -11,6 +12,10 @@ public partial class FluentButton : FluentComponentBase, IAsyncDisposable
private readonly RenderFragment _renderButton;
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -180,7 +185,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && Id is not null && Type != ButtonType.Button)
{
- _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await _jsModule.InvokeVoidAsync("updateProxy", Id);
}
}
diff --git a/src/Core/Components/Checkbox/FluentCheckbox.razor.cs b/src/Core/Components/Checkbox/FluentCheckbox.razor.cs
index b53f032063..0911e08b4b 100644
--- a/src/Core/Components/Checkbox/FluentCheckbox.razor.cs
+++ b/src/Core/Components/Checkbox/FluentCheckbox.razor.cs
@@ -1,5 +1,6 @@
using System.Diagnostics.CodeAnalysis;
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -17,6 +18,10 @@ public FluentCheckbox()
Id = Identifier.NewId();
}
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -122,7 +127,7 @@ private async Task SetIntermediateAsync(bool intermediate)
{
// Force the Indeterminate state to be set.
// Each time the user clicks the checkbox, the Indeterminate state is reset to false.
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await Module.InvokeVoidAsync("setFluentCheckBoxIndeterminate", Id, intermediate, Value);
_intermediate = intermediate;
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
index 83b5c2d984..90178a26dd 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -5,6 +5,7 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Infrastructure;
using Microsoft.JSInterop;
using System.Diagnostics.CodeAnalysis;
@@ -19,6 +20,20 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
public partial class FluentDataGrid : FluentComponentBase, IHandleEvent, IAsyncDisposable
{
private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/DataGrid/FluentDataGrid.razor.js";
+
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+ [Inject]
+ private IServiceProvider Services { get; set; } = default!;
+
+ [Inject]
+ private IJSRuntime JSRuntime { get; set; } = default!;
+
+ [Inject]
+ private IKeyCodeService KeyCodeService { get; set; } = default!;
+
///
/// Gets or sets a queryable source of data for the grid.
///
@@ -28,20 +43,23 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve
///
/// You should supply either or , but not both.
///
- [Parameter] public IQueryable? Items { get; set; }
+ [Parameter]
+ public IQueryable? Items { get; set; }
///
/// Gets or sets a callback that supplies data for the rid.
///
/// You should supply either or , but not both.
///
- [Parameter] public GridItemsProvider? ItemsProvider { get; set; }
+ [Parameter]
+ public GridItemsProvider? ItemsProvider { get; set; }
///
/// Gets or sets the child components of this instance. For example, you may define columns by adding
/// components derived from the base class.
///
- [Parameter] public RenderFragment? ChildContent { get; set; }
+ [Parameter]
+ public RenderFragment? ChildContent { get; set; }
///
/// If true, the grid will be rendered with virtualization. This is normally used in conjunction with
@@ -54,20 +72,23 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve
/// Generally it's preferable not to use if the amount of data being rendered
/// is small or if you are using pagination.
///
- [Parameter] public bool Virtualize { get; set; }
+ [Parameter]
+ public bool Virtualize { get; set; }
///
/// This is applicable only when using . It defines an expected height in pixels for
/// each row, allowing the virtualization mechanism to fetch the correct number of items to match the display
/// size and to ensure accurate scrolling.
///
- [Parameter] public float ItemSize { get; set; } = 32;
+ [Parameter]
+ public float ItemSize { get; set; } = 32;
///
/// If true, renders draggable handles around the column headers, allowing the user to resize the columns
/// manually. Size changes are not persisted.
///
- [Parameter] public bool ResizableColumns { get; set; }
+ [Parameter]
+ public bool ResizableColumns { get; set; }
///
/// To comply with WCAG 2.2, a one-click option should be offered to change column widths. We provide such an option through the
@@ -91,7 +112,8 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve
///
/// If not set, the @key will be the instance itself.
///
- [Parameter] public Func ItemKey { get; set; } = x => x!;
+ [Parameter]
+ public Func ItemKey { get; set; } = x => x!;
///
/// Optionally links this instance with a model,
@@ -100,7 +122,8 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve
/// This is normally used in conjunction with a component or some other UI logic
/// that displays and updates the supplied instance.
///
- [Parameter] public PaginationState? Pagination { get; set; }
+ [Parameter]
+ public PaginationState? Pagination { get; set; }
///
/// Gets or sets a value indicating whether the component will not add itself to the tab queue.
@@ -157,38 +180,40 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve
///
/// Optionally defines a class to be applied to a rendered row.
///
- [Parameter] public Func? RowClass { get; set; }
+ [Parameter]
+ public Func? RowClass { get; set; }
///
/// Optionally defines a style to be applied to a rendered row.
/// Do not use to dynamically update a row style after rendering as this will interfere with the script that use this attribute. Use instead.
///
- [Parameter] public Func? RowStyle { get; set; }
+ [Parameter]
+ public Func? RowStyle { get; set; }
///
/// Gets or sets a value indicating whether the grid should show a hover effect on rows.
///
- [Parameter] public bool ShowHover { get; set; }
+ [Parameter]
+ public bool ShowHover { get; set; }
///
/// If specified, grids render this fragment when there is no content.
///
- [Parameter] public RenderFragment? EmptyContent { get; set; }
+ [Parameter]
+ public RenderFragment? EmptyContent { get; set; }
///
/// Gets or sets a value indicating whether the grid is in a loading data state.
///
- [Parameter] public bool Loading { get; set; }
+ [Parameter]
+ public bool Loading { get; set; }
///
/// Gets or sets the content to render when is true.
/// A default fragment is used if loading content is not specified.
///
- [Parameter] public RenderFragment? LoadingContent { get; set; }
-
- [Inject] private IServiceProvider Services { get; set; } = default!;
- [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
- [Inject] private IKeyCodeService KeyCodeService { get; set; } = default!;
+ [Parameter]
+ public RenderFragment? LoadingContent { get; set; }
private ElementReference? _gridReference;
private Virtualize<(int, TGridItem)>? _virtualizeComponent;
@@ -299,7 +324,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && _gridReference is not null)
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
try
{
_jsEventDisposable = await Module.InvokeAsync("init", _gridReference);
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
index 32e47c79b3..d43e3c046b 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
@@ -1,4 +1,6 @@
-let initialColumnsWidths = '';
+var initialColumnsWidths = '';
+var latestGridElement = null;
+
export function init(gridElement) {
if (gridElement === undefined || gridElement === null) {
return;
@@ -89,9 +91,13 @@ export function checkColumnOptionsPosition(gridElement) {
}
}
+
export function enableColumnResizing(gridElement) {
+ if (gridElement === latestGridElement)
+ return;
+ latestGridElement = gridElement;
const columns = [];
- let min = 50;
+ let min = 75;
let headerBeingResized;
let resizeHandle;
@@ -109,7 +115,7 @@ export function enableColumnResizing(gridElement) {
const width = pointerLocalLeft - headerLocalLeft;
const column = columns.find(({ header }) => header === headerBeingResized);
- min = header.querySelector('.col-options-button') ? 75 : 50;
+ min = header.querySelector('.col-options-button') ? 100 : 75;
column.size = Math.max(min, width) + 'px';
diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor b/src/Core/Components/DateTime/FluentDatePicker.razor
index 5a4991d6b6..6c660da8b9 100644
--- a/src/Core/Components/DateTime/FluentDatePicker.razor
+++ b/src/Core/Components/DateTime/FluentDatePicker.razor
@@ -24,7 +24,7 @@
{
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+ ///
[Inject]
private GlobalState GlobalDesign { get; set; } = default!;
@@ -174,7 +179,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
_dotNetHelper = DotNetObjectReference.Create(this);
var dir = await Module.InvokeAsync("GetDirection");
@@ -210,7 +215,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
///
public async Task ClearLocalStorageAsync()
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await Module.InvokeVoidAsync("ClearLocalStorage", Id);
}
diff --git a/src/Core/Components/Dialog/Services/DialogService-SplashScreen.cs b/src/Core/Components/Dialog/Services/DialogService-SplashScreen.cs
index 34ba085f46..0d7797b1e7 100644
--- a/src/Core/Components/Dialog/Services/DialogService-SplashScreen.cs
+++ b/src/Core/Components/Dialog/Services/DialogService-SplashScreen.cs
@@ -36,7 +36,7 @@ public void ShowSplashScreen(Type component, object receiver, Func ShowSplashScreenAsync(Type component, object
{
DialogType = DialogType.SplashScreen,
Alignment = HorizontalAlignment.Center,
- Modal = false,
+ Modal = parameters.Modal,
PreventDismissOnOverlayClick = parameters.PreventDismissOnOverlayClick,
ShowDismiss = false,
ShowTitle = false,
diff --git a/src/Core/Components/Divider/FluentDivider.razor.cs b/src/Core/Components/Divider/FluentDivider.razor.cs
index e10660db04..3ca9f962d1 100644
--- a/src/Core/Components/Divider/FluentDivider.razor.cs
+++ b/src/Core/Components/Divider/FluentDivider.razor.cs
@@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.JSInterop;
namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -9,6 +10,11 @@ public partial class FluentDivider : FluentComponentBase, IAsyncDisposable
private IJSObjectReference _jsModule = default!;
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+ ///
[Inject]
protected IJSRuntime JSRuntime { get; set; } = default!;
@@ -34,7 +40,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
- _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await _jsModule.InvokeVoidAsync("setDividerAriaOrientation");
}
}
diff --git a/src/Core/Components/Grid/FluentGrid.razor.cs b/src/Core/Components/Grid/FluentGrid.razor.cs
index cff5be38f6..cfc18e0156 100644
--- a/src/Core/Components/Grid/FluentGrid.razor.cs
+++ b/src/Core/Components/Grid/FluentGrid.razor.cs
@@ -2,6 +2,7 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// --------------------------------------------------------------
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -21,6 +22,10 @@ public FluentGrid()
Id = Identifier.NewId();
}
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -75,7 +80,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && OnBreakpointEnter.HasDelegate)
{
- _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
DotNetObjectReference dotNetHelper = DotNetObjectReference.Create(this);
await _jsModule.InvokeVoidAsync("FluentGridInitialize", Id, dotNetHelper);
}
diff --git a/src/Core/Components/HorizontalScroll/FluentHorizontalScroll.razor.cs b/src/Core/Components/HorizontalScroll/FluentHorizontalScroll.razor.cs
index 87e91a9e9a..277d092313 100644
--- a/src/Core/Components/HorizontalScroll/FluentHorizontalScroll.razor.cs
+++ b/src/Core/Components/HorizontalScroll/FluentHorizontalScroll.razor.cs
@@ -1,11 +1,24 @@
using System.Diagnostics.CodeAnalysis;
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.JSInterop;
namespace Microsoft.FluentUI.AspNetCore.Components;
public partial class FluentHorizontalScroll : FluentComponentBase, IAsyncDisposable
{
+ private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/HorizontalScroll/FluentHorizontalScroll.razor.js";
+
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+ ///
+ [Inject]
+ private IJSRuntime JSRuntime { get; set; } = default!;
+
+ private IJSObjectReference? _jsModule;
+
///
/// Gets or sets the scroll speed in pixels per second.
///
@@ -42,10 +55,6 @@ public partial class FluentHorizontalScroll : FluentComponentBase, IAsyncDisposa
[Parameter]
public RenderFragment? ChildContent { get; set; }
- [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
-
- private IJSObjectReference? _jsModule;
-
[DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(HorizontalScrollEventArgs))]
public FluentHorizontalScroll()
@@ -56,7 +65,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
- _jsModule = await JSRuntime.InvokeAsync("import", "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/HorizontalScroll/FluentHorizontalScroll.razor.js");
+ _jsModule = await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
}
}
diff --git a/src/Core/Components/InputFile/FluentInputFile.razor.cs b/src/Core/Components/InputFile/FluentInputFile.razor.cs
index 5510f39371..7a02ecb001 100644
--- a/src/Core/Components/InputFile/FluentInputFile.razor.cs
+++ b/src/Core/Components/InputFile/FluentInputFile.razor.cs
@@ -1,5 +1,6 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -21,6 +22,10 @@ public FluentInputFile()
Id = Identifier.NewId();
}
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -180,7 +185,7 @@ public FluentInputFile()
///
public async Task ShowFilesDialogAsync()
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await Module.InvokeVoidAsync("raiseFluentInputFile", Id);
}
@@ -190,7 +195,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && !string.IsNullOrEmpty(AnchorId))
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await Module.InvokeVoidAsync("attachClickHandler", AnchorId, Id);
}
diff --git a/src/Core/Components/KeyCode/FluentKeyCode.razor.cs b/src/Core/Components/KeyCode/FluentKeyCode.razor.cs
index eea3d11981..a8b20a3313 100644
--- a/src/Core/Components/KeyCode/FluentKeyCode.razor.cs
+++ b/src/Core/Components/KeyCode/FluentKeyCode.razor.cs
@@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.JSInterop;
namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -19,6 +20,10 @@ public partial class FluentKeyCode : IAsyncDisposable
///
public static bool PreventMultipleKeyDown = false;
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -114,7 +119,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
throw new ArgumentNullException(Anchor, $"The {nameof(Anchor)} parameter must be set to the ID of an element. Or the {nameof(ChildContent)} must be set to apply the KeyCode engine to this content.");
}
- _jsModule ??= await JSRuntime.InvokeAsync
("import", JAVASCRIPT_FILE);
+ _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
_dotNetHelper = DotNetObjectReference.Create(this);
var eventNames = string.Join(";", new[]
diff --git a/src/Core/Components/Label/FluentInputLabel.razor b/src/Core/Components/Label/FluentInputLabel.razor
index f5d076dbea..3453463105 100644
--- a/src/Core/Components/Label/FluentInputLabel.razor
+++ b/src/Core/Components/Label/FluentInputLabel.razor
@@ -1,6 +1,4 @@
@namespace Microsoft.FluentUI.AspNetCore.Components
-@inject LibraryConfiguration LibraryConfiguration
-
@if (!string.IsNullOrEmpty(Label) || ChildContent is not null)
{
diff --git a/src/Core/Components/Label/FluentInputLabel.razor.cs b/src/Core/Components/Label/FluentInputLabel.razor.cs
index af5980f01d..403eebd146 100644
--- a/src/Core/Components/Label/FluentInputLabel.razor.cs
+++ b/src/Core/Components/Label/FluentInputLabel.razor.cs
@@ -3,6 +3,7 @@
// ------------------------------------------------------------------------
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.JSInterop;
namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -11,6 +12,10 @@ public partial class FluentInputLabel
{
public const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Label/FluentInputLabel.razor.js";
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -72,7 +77,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
if (firstRender && ShouldRenderAriaLabel)
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await Module.InvokeVoidAsync("setInputAriaLabel", ForId, string.IsNullOrWhiteSpace(AriaLabel) ? Label : AriaLabel);
}
}
diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
index 9d7f08728d..e5155e0788 100644
--- a/src/Core/Components/List/FluentAutocomplete.razor.cs
+++ b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -1,5 +1,6 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web.Virtualization;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -29,6 +30,10 @@ public FluentAutocomplete()
Id = Identifier.NewId();
}
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JS { get; set; } = default!;
@@ -487,7 +492,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
- Module = await JS.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module = await JS.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
}
}
diff --git a/src/Core/Components/List/FluentCombobox.razor.cs b/src/Core/Components/List/FluentCombobox.razor.cs
index 360ccc259e..6caeb553e4 100644
--- a/src/Core/Components/List/FluentCombobox.razor.cs
+++ b/src/Core/Components/List/FluentCombobox.razor.cs
@@ -3,6 +3,7 @@
// ------------------------------------------------------------------------
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -13,6 +14,10 @@ public partial class FluentCombobox : ListComponentBase where
{
private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/List/FluentCombobox.razor.js";
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -57,7 +62,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!string.IsNullOrEmpty(Id))
{
- Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
await Module.InvokeVoidAsync("setControlAttribute", Id, "autocomplete", "off");
}
}
diff --git a/src/Core/Components/List/ListComponentBase.razor.cs b/src/Core/Components/List/ListComponentBase.razor.cs
index dd998eb04d..a1bf82e3df 100644
--- a/src/Core/Components/List/ListComponentBase.razor.cs
+++ b/src/Core/Components/List/ListComponentBase.razor.cs
@@ -26,6 +26,10 @@ public abstract partial class ListComponentBase : FluentInputBase
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
private IJSObjectReference? _jsModule { get; set; }
[Inject] private IJSRuntime JSRuntime { get; set; } = default!;
@@ -38,7 +42,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
- _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
+ _jsModule ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
}
}
@@ -217,6 +221,8 @@ public override async Task SetParametersAsync(ParameterView parameters)
if (Items.Contains(newSelectedOption))
{
_currentSelectedOption = newSelectedOption;
+ // Make value follow new selected option
+ Value = GetOptionValue(_currentSelectedOption);
}
else
{
diff --git a/src/Core/Components/Menu/FluentMenu.razor.cs b/src/Core/Components/Menu/FluentMenu.razor.cs
index f570966de3..ff5ea9822e 100644
--- a/src/Core/Components/Menu/FluentMenu.razor.cs
+++ b/src/Core/Components/Menu/FluentMenu.razor.cs
@@ -1,6 +1,7 @@
using System.Diagnostics.CodeAnalysis;
using System.Drawing;
using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
@@ -8,6 +9,8 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
public partial class FluentMenu : FluentComponentBase, IDisposable
{
+ private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Menu/FluentMenu.razor.js";
+
private DotNetObjectReference? _dotNetHelper = null;
private Point _clickedPoint = default;
private bool _contextMenu = false;
@@ -33,6 +36,10 @@ public partial class FluentMenu : FluentComponentBase, IDisposable
.AddStyle("top", $"{_clickedPoint.Y}px", () => !Anchored && _clickedPoint.Y != 0)
.Build();
+ ///
+ [Inject]
+ private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
///
[Inject]
private IJSRuntime JSRuntime { get; set; } = default!;
@@ -134,8 +141,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (Trigger != MouseButton.None)
{
- _jsModule = await JSRuntime.InvokeAsync("import",
- "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Menu/FluentMenu.razor.js");
+ _jsModule = await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
_dotNetHelper = DotNetObjectReference.Create(this);
diff --git a/src/Core/Components/MenuButton/FluentMenuButton.razor b/src/Core/Components/MenuButton/FluentMenuButton.razor
index 9bd9d809fc..41fb61ebf6 100644
--- a/src/Core/Components/MenuButton/FluentMenuButton.razor
+++ b/src/Core/Components/MenuButton/FluentMenuButton.razor
@@ -5,7 +5,7 @@