Fix DropdownControl width, hit-testing, and portal dismissal; fix DatePicker hit-test

nickprotop · nickprotop · commit 229df37c867a · 2026-03-16T22:04:11.000+02:00
- Replace calculateOptimalWidth with calculateHeaderWidth (StripLength-based, no magic
  constants) and calculatePortalWidth (portal sized independently from header)
- Arrow rendered flush-right in header with padding between text and arrow
- Hit-test checks actual visual content bounds, not full layout allocation
- Enable DismissOnOutsideClick on dropdown portal for proper close on background click
- Apply same hit-test fix to DatePickerControl with _lastContentWidth caching
- Add NavigationView content toolbar support with theme switcher in launcher
- Add gradient background to DropdownWindow demo
diff --git a/Examples/DemoApp/DemoWindows/DropdownWindow.cs b/Examples/DemoApp/DemoWindows/DropdownWindow.cs
@@ -1,7 +1,9 @@
 using SharpConsoleUI;
 using SharpConsoleUI.Builders;
 using SharpConsoleUI.Controls;
+using SharpConsoleUI.Helpers;
 using SharpConsoleUI.Layout;
+using SharpConsoleUI.Rendering;
 
 namespace DemoApp.DemoWindows;
 
@@ -145,6 +147,9 @@ void UpdateSummary(object? s, object? e)
             .WithTitle("Meal Planner")
             .WithSize(WindowWidth, WindowHeight)
             .Centered()
+            .WithBackgroundGradient(
+                ColorGradient.FromColors(new Color(20, 15, 40), new Color(10, 30, 50)),
+                GradientDirection.Vertical)
             .AddControls(header, grid, statusBar)
             .OnKeyPressed((sender, e) =>
             {
diff --git a/Examples/DemoApp/DemoWindows/LauncherWindow.cs b/Examples/DemoApp/DemoWindows/LauncherWindow.cs
@@ -11,6 +11,14 @@ public static class LauncherWindow
 {
     public static Window Create(ConsoleWindowSystem ws)
     {
+        var darkGradient = new GradientBackground(
+            ColorGradient.FromColors(new Color(15, 25, 60), new Color(5, 5, 15)),
+            GradientDirection.Vertical);
+
+        var lightGradient = new GradientBackground(
+            ColorGradient.FromColors(new Color(180, 200, 230), new Color(220, 225, 240)),
+            GradientDirection.Vertical);
+
         var nav = Controls.NavigationView()
             .WithNavWidth(30)
             .WithPaneHeader("[bold white]  SharpConsoleUI[/]")
@@ -71,17 +79,28 @@ public static Window Create(ConsoleWindowSystem ws)
                 LaunchDemo(ws, args.NewItem.Text);
         };
 
-        var gradient = ColorGradient.FromColors(
-            new Color(15, 25, 60),
-            new Color(5, 5, 15));
+        // Theme switcher dropdown in content toolbar
+        var themeDropdown = new DropdownControl("Theme:", new[] { "Dark", "Light" });
+        themeDropdown.SelectedIndex = 0;
+        nav.AddContentToolbarItem(themeDropdown);
+
+        Window? win = null;
+        themeDropdown.SelectedIndexChanged += (_, idx) =>
+        {
+            if (win != null)
+                win.BackgroundGradient = idx == 0 ? darkGradient : lightGradient;
+        };
 
-        return new WindowBuilder(ws)
+        var window = new WindowBuilder(ws)
             .WithTitle("SharpConsoleUI Demo")
             .WithSize(90, 30)
             .AtPosition(0, 0)
-            .WithBackgroundGradient(gradient, GradientDirection.Vertical)
+            .WithBackgroundGradient(darkGradient.Gradient, darkGradient.Direction)
             .AddControl(nav)
             .BuildAndShow();
+
+        win = window;
+        return window;
     }
 
     private static Action<ScrollablePanelControl> MakeInfoPanel(string demoName)
diff --git a/SharpConsoleUI/Builders/NavigationViewBuilder.cs b/SharpConsoleUI/Builders/NavigationViewBuilder.cs
@@ -235,6 +235,8 @@ public NavigationViewBuilder WithAnimateTransitions(bool animate)
 
 	#endregion
 
+	private Action<ToolbarControl>? _contentToolbarConfigure;
+
 	#region Content Pane Config
 
 	/// <summary>
@@ -282,6 +284,15 @@ public NavigationViewBuilder WithContentHeader(bool show)
 		return this;
 	}
 
+	/// <summary>
+	/// Configures the content toolbar in the header area.
+	/// </summary>
+	public NavigationViewBuilder WithContentToolbar(Action<ToolbarControl> configure)
+	{
+		_contentToolbarConfigure = configure;
+		return this;
+	}
+
 	#endregion
 
 	#region Events
@@ -436,6 +447,13 @@ public NavigationView Build()
 			}
 		}
 
+		// Configure content toolbar
+		if (_contentToolbarConfigure != null)
+		{
+			_contentToolbarConfigure(_control.ContentToolbar);
+			_control.ContentToolbar.Visible = _control.ContentToolbar.Items.Any();
+		}
+
 		// Set initial selection (count only selectable items)
 		int selectableCount = 0;
 		foreach (var entry in _pendingEntries)
diff --git a/SharpConsoleUI/Controls/DatePickerControl/DatePickerControl.Mouse.cs b/SharpConsoleUI/Controls/DatePickerControl/DatePickerControl.Mouse.cs
@@ -35,16 +35,27 @@ public bool ProcessMouseEvent(MouseEventArgs args)
 				return true;
 			}
 
-			// Validate within content area
+			// Validate within actual rendered content area, not full layout bounds
 			int contentHeight = _lastLayoutBounds.Height > 0 ? _lastLayoutBounds.Height : 1;
 			if (args.Position.Y < Margin.Top ||
-				args.Position.Y >= contentHeight - Margin.Bottom ||
-				args.Position.X < Margin.Left ||
-				args.Position.X >= _lastLayoutBounds.Width - Margin.Right)
+				args.Position.Y >= contentHeight - Margin.Bottom)
 			{
 				return false;
 			}
 
+			int contentX = args.Position.X - Margin.Left;
+			if (contentX < 0 || contentX >= _lastContentWidth)
+			{
+				// Click is outside the visual content — close calendar if open
+				if (_isCalendarOpen && args.HasFlag(MouseFlags.Button1Released))
+				{
+					CloseCalendar();
+					Container?.Invalidate(true);
+					return true;
+				}
+				return false;
+			}
+
 			if (args.HasAnyFlag(MouseFlags.ReportMousePosition))
 			{
 				MouseMove?.Invoke(this, args);
diff --git a/SharpConsoleUI/Controls/DatePickerControl/DatePickerControl.Rendering.cs b/SharpConsoleUI/Controls/DatePickerControl/DatePickerControl.Rendering.cs
@@ -141,6 +141,9 @@ public override void PaintDOM(CharacterBuffer buffer, LayoutRect bounds, LayoutR
 				buffer.SetNarrowCell(writeX, paintY, ' ', foregroundColor, backgroundColor);
 				writeX++;
 
+				// Cache actual content width for hit-testing
+				_lastContentWidth = writeX - startX;
+
 				// Fill remaining space on the line with window background
 				int rightFillWidth = bounds.Right - Margin.Right - writeX;
 				if (rightFillWidth > 0)
diff --git a/SharpConsoleUI/Controls/DatePickerControl/DatePickerControl.cs b/SharpConsoleUI/Controls/DatePickerControl/DatePickerControl.cs
@@ -59,6 +59,7 @@ private enum SegmentType { Month, Day, Year }
 		private bool _hasFocus;
 		private bool _isEnabled = true;
 		private LayoutRect _lastLayoutBounds;
+		private int _lastContentWidth;
 
 		private Color? _backgroundColorValue;
 		private Color? _foregroundColorValue;
diff --git a/SharpConsoleUI/Controls/DropdownControl/DropdownControl.Mouse.cs b/SharpConsoleUI/Controls/DropdownControl/DropdownControl.Mouse.cs
@@ -47,15 +47,25 @@ public bool ProcessMouseEvent(MouseEventArgs args)
 				return true;
 			}
 
-			// Validate click is within content area (not in margins)
-			// Margins are non-interactive spacing around the control
+			// Validate click is within the actual rendered header area, not the full layout bounds.
+			// The header may be narrower than the layout allocation (e.g. in a row/toolbar).
 			int contentHeight = (_lastLayoutBounds.Height > 0 ? _lastLayoutBounds.Height : 1);
 			if (args.Position.Y < Margin.Top ||
-			    args.Position.Y >= contentHeight - Margin.Bottom ||
-			    args.Position.X < Margin.Left ||
-			    args.Position.X >= (_lastLayoutBounds.Width - Margin.Right))
+			    args.Position.Y >= contentHeight - Margin.Bottom)
 			{
-				// Click is in margin area - not interactive
+				return false;
+			}
+
+			int contentX = args.Position.X - Margin.Left;
+			if (contentX < _lastAlignOffset || contentX >= _lastAlignOffset + _lastHeaderWidth)
+			{
+				// Click is outside the visual header content — close dropdown if open, but don't open
+				if (_isDropdownOpen && args.HasFlag(MouseFlags.Button1Released))
+				{
+					IsDropdownOpen = false;
+					Container?.Invalidate(true);
+					return true;
+				}
 				return false;
 			}
 
diff --git a/SharpConsoleUI/Controls/DropdownControl/DropdownControl.Portal.cs b/SharpConsoleUI/Controls/DropdownControl/DropdownControl.Portal.cs
@@ -35,6 +35,8 @@ private void OpenDropdown()
 			if (window != null)
 			{
 				_portalContent = new DropdownPortalContent(this);
+				_portalContent.DismissOnOutsideClick = true;
+				_portalContent.DismissRequested += (s, e) => CloseDropdown();
 				_dropdownPortal = window.CreatePortal(this, _portalContent);
 			}
 
@@ -124,28 +126,14 @@ private void CalculatePortalBounds()
 		}
 
 		/// <summary>
-		/// Calculates the optimal dropdown width.
+		/// Calculates the optimal dropdown portal width based on all items.
 		/// </summary>
 		private int CalculateDropdownWidth()
 		{
 			int targetWidth = _lastLayoutBounds.Width - Margin.Left - Margin.Right;
 			if (targetWidth <= 0) targetWidth = 20;
 
-			int dropdownWidth = Width ?? (HorizontalAlignment == HorizontalAlignment.Stretch ? targetWidth : calculateOptimalWidth(targetWidth));
-
-			int maxItemWidth = 0;
-			foreach (var item in _items)
-			{
-				int itemLength = Parsing.MarkupParser.StripLength(item.Text) + 4;
-				if (itemLength > maxItemWidth) maxItemWidth = itemLength;
-			}
-
-			if (_autoAdjustWidth)
-				dropdownWidth = Math.Max(dropdownWidth, maxItemWidth + 4);
-
-			int promptLength = Parsing.MarkupParser.StripLength(_prompt);
-			int minWidth = Math.Max(promptLength + 5, maxItemWidth + 4);
-			dropdownWidth = Math.Min(Math.Max(dropdownWidth, minWidth), targetWidth);
+			int dropdownWidth = calculatePortalWidth(targetWidth);
 
 			return dropdownWidth;
 		}
diff --git a/SharpConsoleUI/Controls/DropdownControl/DropdownControl.Rendering.cs b/SharpConsoleUI/Controls/DropdownControl/DropdownControl.Rendering.cs
@@ -19,25 +19,11 @@ public partial class DropdownControl
 		/// <inheritdoc/>
 		public override LayoutSize MeasureDOM(LayoutConstraints constraints)
 		{
-			int dropdownWidth = Width ?? (HorizontalAlignment == HorizontalAlignment.Stretch
-				? constraints.MaxWidth - Margin.Left - Margin.Right
-				: calculateOptimalWidth(constraints.MaxWidth));
-
-			// Ensure width can accommodate content
-			int maxItemWidth = 0;
-			List<DropdownItem> measureSnapshot;
-			lock (_dropdownLock) { measureSnapshot = _items.ToList(); }
-			foreach (var item in measureSnapshot)
-			{
-				int itemLength = Parsing.MarkupParser.StripLength(item.Text) + 4;
-				if (itemLength > maxItemWidth) maxItemWidth = itemLength;
-			}
-
-			if (_autoAdjustWidth)
-				dropdownWidth = Math.Max(dropdownWidth, maxItemWidth + 4);
+			int dropdownWidth = calculateHeaderWidth(constraints.MaxWidth - Margin.Left - Margin.Right);
 
-			int promptLength = Parsing.MarkupParser.StripLength(_prompt);
-			int minWidth = Math.Max(promptLength + 5, maxItemWidth + 4);
+			// Sane minimum: prompt + arrow + space for at least a few chars
+			string arrow = "▼";
+			int minWidth = Parsing.MarkupParser.StripLength($"{_prompt} {arrow}") + 3;
 			dropdownWidth = Math.Max(dropdownWidth, minWidth);
 
 			// Calculate height - constant (header only), dropdown items render via portal
@@ -90,22 +76,18 @@ public override void PaintDOM(CharacterBuffer buffer, LayoutRect bounds, LayoutR
 			// Fill top margin
 			ControlRenderingHelpers.FillTopMargin(buffer, bounds, clipRect, startY, foregroundColor, windowBackground, preserveBg);
 
-			// Calculate dropdown width
-			int dropdownWidth = Width ?? (HorizontalAlignment == HorizontalAlignment.Stretch ? targetWidth : calculateOptimalWidth(targetWidth));
-			int maxItemWidth = 0;
+			// Calculate dropdown width using header measurement
+			int dropdownWidth = calculateHeaderWidth(targetWidth);
+
+			// Sane minimum: prompt + arrow + space for at least a few chars
+			string arrowMin = "▼";
+			int minWidth = Parsing.MarkupParser.StripLength($"{_prompt} {arrowMin}") + 3;
+			dropdownWidth = Math.Min(Math.Max(dropdownWidth, minWidth), targetWidth);
+
 			List<DropdownItem> paintSnapshot;
 			lock (_dropdownLock) { paintSnapshot = _items.ToList(); }
-			foreach (var item in paintSnapshot)
-			{
-				int itemLength = Parsing.MarkupParser.StripLength(item.Text) + 4;
-				if (itemLength > maxItemWidth) maxItemWidth = itemLength;
-			}
-			if (_autoAdjustWidth)
-				dropdownWidth = Math.Max(dropdownWidth, maxItemWidth + 4);
 
 			int promptLength = Parsing.MarkupParser.StripLength(_prompt);
-			int minWidth = Math.Max(promptLength + 5, maxItemWidth + 4);
-			dropdownWidth = Math.Min(Math.Max(dropdownWidth, minWidth), targetWidth);
 
 			// Calculate alignment offset
 			int alignOffset = 0;
@@ -122,22 +104,27 @@ public override void PaintDOM(CharacterBuffer buffer, LayoutRect bounds, LayoutR
 				}
 			}
 
+			// Cache for hit-testing in ProcessMouseEvent
+			_lastHeaderWidth = dropdownWidth;
+			_lastAlignOffset = alignOffset;
+
 			int selectedIdx = CurrentSelectedIndex;
 			int highlightedIdx = CurrentHighlightedIndex;
 			int dropdownScroll = CurrentDropdownScrollOffset;
 
-			// Render header
+			// Render header: arrow flush-right, padding between text and arrow
 			string selectedText = selectedIdx >= 0 && selectedIdx < paintSnapshot.Count ? paintSnapshot[selectedIdx].Text : "(None)";
-			// Arrow shows direction: ▲ when open upward, ▼ when closed or open downward
 			string arrow = _isDropdownOpen && _opensUpward ? "▲" : "▼";
-			int maxSelectedTextLength = dropdownWidth - promptLength - 5;
+			string suffix = $" {arrow}";
+			int suffixLen = Parsing.MarkupParser.StripLength(suffix);
+			int maxSelectedTextLength = dropdownWidth - promptLength - 1 - suffixLen; // 1 = space after prompt
 			if (maxSelectedTextLength > 0 && Parsing.MarkupParser.StripLength(selectedText) > maxSelectedTextLength)
 				selectedText = TextTruncationHelper.Truncate(selectedText, maxSelectedTextLength);
 
-			string headerContent = $"{_prompt} {selectedText} {arrow}";
-			int headerVisibleLength = Parsing.MarkupParser.StripLength(headerContent);
-			if (headerVisibleLength < dropdownWidth)
-				headerContent += new string(' ', dropdownWidth - headerVisibleLength);
+			string prefix = $"{_prompt} {selectedText}";
+			int prefixLen = Parsing.MarkupParser.StripLength(prefix);
+			int paddingNeeded = Math.Max(0, dropdownWidth - prefixLen - suffixLen);
+			string headerContent = prefix + new string(' ', paddingNeeded) + suffix;
 
 			int paintY = startY;
 
diff --git a/SharpConsoleUI/Controls/DropdownControl/DropdownControl.cs b/SharpConsoleUI/Controls/DropdownControl/DropdownControl.cs
diff --git a/SharpConsoleUI/Controls/NavigationView/NavigationView.cs b/SharpConsoleUI/Controls/NavigationView/NavigationView.cs
