decePubClient/Components/Daisy/Actions/DModal.razor

@inherits DComponentBase

@* daisyUI Modal: https://daisyui.com/components/modal/ . Always rendered; the open state lives in C# (@bind-IsOpen)
   and shows as modal-open. On opening, the box takes the focus (Blazor's FocusAsync) so that Escape, handled on the
   root, closes it; the backdrop button stretches over the area outside the box and closes it on click, and a visible
   close button (ShowClose, named by CloseText) sits beside the heading, which stays in view while the box scrolls. *@
<div @attributes="AdditionalAttributes" role="dialog" aria-modal="true" aria-labelledby="@(Heading is null ? null : uid)"
	 class="@CssClass" @onkeydown="OnKeyDown">
	<div @ref="box" tabindex="-1" class="@Cx("modal-box focus:outline-none", BoxClass)">
		@if (Heading is not null || ShowClose)
		{
			<div class="sticky top-0 z-10 flex items-start gap-3 bg-base-100">
				@if (Heading is not null)
				{
					<h3 id="@uid" class="flex-1 min-w-0 text-lg font-bold">@Heading</h3>
				}
				else
				{
					<span class="flex-1"></span>
				}
				@if (ShowClose)
				{
					<button type="button" class="btn btn-sm btn-circle btn-ghost flex-none" aria-label="@CloseText" title="@CloseText"
							@onclick="Close" data-modal-close>
						<span aria-hidden="true">✕</span>
					</button>
				}
			</div>
		}
		@ChildContent
		@if (Actions is not null)
		{
			<div class="modal-action">
				@Actions
			</div>
		}
	</div>
	@if (CloseOnBackdrop)
	{
		<div class="modal-backdrop">
			<button type="button" @onclick="Close">@CloseText</button>
		</div>
	}
</div>

@code {
	[Parameter] public RenderFragment Heading { get; set; }
	[Parameter] public RenderFragment ChildContent { get; set; }
	[Parameter] public RenderFragment Actions { get; set; }
	[Parameter] public bool IsOpen { get; set; }
	[Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
	[Parameter] public DModalPlacement Placement { get; set; }
	/// <summary>Close on a click outside the box (renders the modal-backdrop).</summary>
	[Parameter] public bool CloseOnBackdrop { get; set; } = true;
	/// <summary>Name of the close button and of the invisible backdrop button, read by screen readers.</summary>
	[Parameter] public string CloseText { get; set; } = "close";
	/// <summary>A visible close button beside the heading.</summary>
	[Parameter] public bool ShowClose { get; set; } = true;
	[Parameter] public string BoxClass { get; set; }

	readonly string uid = "d" + Guid.NewGuid().ToString("N")[..8];
	ElementReference box;
	bool wasOpen;
	bool focusPending;

	string CssClass => Cx("modal", PlacementClass, IsOpen ? "modal-open" : null, Class);

	string PlacementClass => Placement switch
	{
		DModalPlacement.Top => "modal-top",
		DModalPlacement.Bottom => "modal-bottom",
		DModalPlacement.Start => "modal-start",
		DModalPlacement.End => "modal-end",
		DModalPlacement.ResponsiveBottom => "modal-bottom md:modal-middle",
		_ => null
	};

	protected override void OnParametersSet()
	{
		if (IsOpen && !wasOpen)
			focusPending = true;
		wasOpen = IsOpen;
	}

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (!focusPending)
			return;
		focusPending = false;
		await box.FocusAsync();
	}

	Task Close() => SetOpen(false);

	Task OnKeyDown(KeyboardEventArgs e) => e.Key == "Escape" && IsOpen ? SetOpen(false) : Task.CompletedTask;

	async Task SetOpen(bool isOpen)
	{
		IsOpen = isOpen;
		wasOpen = isOpen;
		await IsOpenChanged.InvokeAsync(isOpen);
	}
}