decePubClient/Components/Daisy/Actions/DDropdown.razor

@inherits DComponentBase

@* daisyUI Dropdown: https://daisyui.com/components/dropdown/ . The open state lives in C# (@bind-IsOpen):
   dropdown-open shows the content and dropdown-close keeps the focus-within rule from showing it while closed.
   While open, a transparent full-screen layer under the content closes it on an outside click; Escape closes it
   too. With Hover the CSS hover rule opens it instead. Opening moves the focus into the content (Blazor's FocusAsync),
   which also scrolls a menu cut off by its scroller into view; Escape or an outside click gives it back to the trigger.
   SheetOnNarrow makes the content a sheet rising from the bottom of a phone's screen (below md), over a dimmed page. *@
<div @attributes="AdditionalAttributes" class="@CssClass" @onkeydown="OnKeyDown">
	<div @ref="trigger" role="button" tabindex="0" class="@TriggerClass" aria-haspopup="true" aria-expanded="@(IsOpen ? "true" : "false")"
		 @onclick="Toggle">
		@Trigger
	</div>
	@if (IsOpen)
	{
		<div class="@(SheetOnNarrow ? "fixed inset-0 z-[998] cursor-default max-md:bg-black/40" : "fixed inset-0 z-[998] cursor-default")"
			 aria-hidden="true" @onclick="Close"></div>
	}
	<div @ref="content" tabindex="-1" class="@Cx("dropdown-content z-[999]", SheetOnNarrow ? Sheet : null, ContentClass)"
		 data-sheet="@(SheetOnNarrow ? "" : null)" @onclick="OnContentClick">
		@ChildContent
	</div>
</div>

@code {
	[Parameter] public RenderFragment Trigger { get; set; }
	[Parameter] public RenderFragment ChildContent { get; set; }
	[Parameter] public bool IsOpen { get; set; }
	[Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
	[Parameter] public DDropdownPlacement Placement { get; set; }
	[Parameter] public DDropdownAlign Align { get; set; }
	/// <summary>Open on hover (dropdown-hover) as well as on click.</summary>
	[Parameter] public bool Hover { get; set; }
	/// <summary>Close after any click inside the content, e.g. on a menu item.</summary>
	[Parameter] public bool CloseOnContentClick { get; set; }
	[Parameter] public string TriggerClass { get; set; }
	[Parameter] public string ContentClass { get; set; }
	/// <summary>Below md, the content is a sheet at the bottom of the screen instead of hanging from the trigger.</summary>
	[Parameter] public bool SheetOnNarrow { get; set; }

	const string Sheet = "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:m-0 max-md:w-full max-md:max-h-[80dvh] "
		+ "max-md:overflow-y-auto max-md:overscroll-contain max-md:rounded-b-none max-md:translate-none max-md:scale-100 "
		+ "max-md:p-3 max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))]";

	ElementReference trigger;
	ElementReference content;
	bool focusContent;
	bool focusTrigger;

	string CssClass => Cx("dropdown", PlacementClass, AlignClass,
		IsOpen ? "dropdown-open" : Hover ? "dropdown-hover" : "dropdown-close", Class);

	string PlacementClass => Placement switch
	{
		DDropdownPlacement.Top => "dropdown-top",
		DDropdownPlacement.Left => "dropdown-left",
		DDropdownPlacement.Right => "dropdown-right",
		_ => null
	};

	string AlignClass => Align switch
	{
		DDropdownAlign.Center => "dropdown-center",
		DDropdownAlign.End => "dropdown-end",
		_ => null
	};

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (focusContent)
		{
			focusContent = false;
			await content.FocusAsync();
		}
		if (focusTrigger)
		{
			focusTrigger = false;
			await trigger.FocusAsync();
		}
	}

	Task Toggle() => SetOpen(!IsOpen, IsOpen);

	Task Close() => SetOpen(false, true);

	// (a menu item may open a dialog, which takes the focus itself: the trigger doesn't take it back)
	Task OnContentClick() => CloseOnContentClick ? SetOpen(false, false) : Task.CompletedTask;

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

	async Task SetOpen(bool isOpen, bool giveFocusBack)
	{
		focusContent = isOpen && !IsOpen;
		focusTrigger = !isOpen && IsOpen && giveFocusBack;
		IsOpen = isOpen;
		await IsOpenChanged.InvokeAsync(isOpen);
	}
}