Add FSelectMenuTile.fromMap(...) constructor & fix FPopover & FSidebar focus traversal edge behavior (#614)

* Add `FSelectMenuTile.fromMap`

* Fix focus traversal edge behavior for FSidebar & FPopover

* Prepare samples for review

* Prepare Forui for review

* Update windows-latest goldens

* Move toaster alignment to FToasterStyle

* whoops

* Prepare Forui for review

---------

Co-authored-by: Pante <[email protected]>

Author: Pante

docs/app/docs/tile/select-menu-tile/page.mdx

@@ -26,8 +26,14 @@ A tile that, when triggered, displays a list of options for the user to pick fro
 
     class _SelectMenuTile extends StatelessWidget {
       @override
-      Widget build(BuildContext context) => FSelectMenuTile(
+      Widget build(BuildContext context) => FSelectMenuTile.fromMap(
+        const {
+          'All': Notification.all,
+          'Direct Messages': Notification.direct,
+          'None': Notification.nothing,
+        },
         initialValue: Notification.all,
+        autoHide: autoHide,
         validator: (value) => value == null ? 'Select an item' : null,
         prefix: const Icon(FIcons.bell),
         title: const Text('Notifications'),
@@ -36,13 +42,7 @@ A tile that, when triggered, displays a list of options for the user to pick fro
           Notification.direct => 'Direct Messages',
           _ => 'None',
         }),
-        menu: const [
-          FSelectTile(title: Text('All'), value: Notification.all),
-          FSelectTile(title: Text('Direct Messages'), value: Notification.direct),
-          FSelectTile(title: Text('None'), value: Notification.nothing),
-        ],
       );
-    }
     ```
 
   </Tabs.Tab>

forui/CHANGELOG.md

@@ -12,12 +12,28 @@
 * Add `FHeaderAction.shortcuts`.
 
 
+### `FPopover`
+* **Breaking** Change `FPopoverController.shown` to `FPopoverController.status`.
+
+* Fix `FPopover` not respecting `FPopover.traversalEdgeBehavior`.
+
+
 ### `FSelect`
 * Fix `FSelect` flickering when selecting an item on desktop.
 * Fix `FSelect` not scrolling to selected item when opened if the item is really far down the list.
 * Fix `FSelect` layout shifting when scrolling through a long list of items.
 
 
+### `FSidebar`
+* Add `FSidebar.focusNode`.
+* Add `FSidebar.traversalEdgeBehavior`.
+
+* Change `FSidebarItemStyle.focusedOutlineStyle.spacing` from 3 to 0.
+* Convert `FSidebar` from a stateless to a stateful widget.
+
+* Fix `FSidebar`'s focus traversal behavior.
+
+
 ### `FTappable`
 * Add `FTappable.onSecondaryPress`.
 * Add `FTappable.onSecondaryLongPress`.
@@ -29,15 +45,17 @@
 
 
 ### Others
+* Add `FSelectMenuTile.fromMap(...)`.
+* Add `FToasterStyle.toastAlignment`.
+
 * **Breaking** Change `FPersistentSheetController.shown` to `FPersistentSheetController.status`.
-* **Breaking** Change `FPopoverController.shown` to `FPopoverController.status`.
 * **Breaking** Change `FTooltipController.shown` to `FTooltipController.status`.
 
 
 ## 0.13.1
 
 * Fix `FSelectTile` mixing in `FItemMixin` instead of `FTileMixin`.
-* Fix `SelectMenuTile` mixing in `FItemMixin` instead of `FTileMixin`.
+* Fix `FSelectMenuTile` mixing in `FItemMixin` instead of `FTileMixin`.
 
 
 ## 0.13.0

forui/bin/commands/style/style.dart

@@ -8,6 +8,8 @@ class Sandbox extends StatefulWidget {
   State<Sandbox> createState() => _SandboxState();
 }
 
+enum Notification { all, direct, nothing, limitedTime, timeSensitive, selectedApps }
+
 class _SandboxState extends State<Sandbox> with SingleTickerProviderStateMixin {
   late final FPopoverController controller;
 

forui/example/lib/sandbox.dart

@@ -246,7 +246,7 @@ class _CollapsedCrumb extends StatefulWidget implements FBreadcrumbItem {
   final ValueChanged<bool>? onFocusChange;
   final ValueChanged<bool>? onHoverChange;
   final ValueChanged<Set<WidgetState>>? onStateChange;
-  final TraversalEdgeBehavior traversalEdgeBehavior;
+  final TraversalEdgeBehavior? traversalEdgeBehavior;
   final String? semanticsLabel;
 
   const _CollapsedCrumb({
@@ -270,7 +270,7 @@ class _CollapsedCrumb extends StatefulWidget implements FBreadcrumbItem {
     this.onFocusChange,
     this.onHoverChange,
     this.onStateChange,
-    this.traversalEdgeBehavior = TraversalEdgeBehavior.closedLoop,
+    this.traversalEdgeBehavior,
     super.key,
   }) : itemMenu = menu,
        tileMenu = null;

forui/lib/src/widgets/breadcrumb.dart

@@ -197,9 +197,10 @@ class FPopover extends StatefulWidget {
   /// Controls the transfer of focus beyond the first and the last items in a popover. Defaults to
   /// [TraversalEdgeBehavior.closedLoop].
   ///
-  /// Changing this field value has no immediate effect on the UI.
+  /// ## Contract
+  /// Throws [AssertionError] if both [focusNode] and [traversalEdgeBehavior] are not null.
   /// {@endtemplate}
-  final TraversalEdgeBehavior traversalEdgeBehavior;
+  final TraversalEdgeBehavior? traversalEdgeBehavior;
 
   /// {@template forui.widgets.FPopover.barrierSemanticsLabel}
   /// The popover's barrier label used by accessibility frameworks.
@@ -257,7 +258,7 @@ class FPopover extends StatefulWidget {
     this.autofocus,
     this.focusNode,
     this.onFocusChange,
-    this.traversalEdgeBehavior = TraversalEdgeBehavior.closedLoop,
+    this.traversalEdgeBehavior,
     this.barrierSemanticsLabel,
     this.barrierSemanticsDismissible = true,
     this.semanticsLabel,
@@ -271,6 +272,10 @@ class FPopover extends StatefulWidget {
          groupId == null || hideOnTapOutside == FHidePopoverRegion.excludeTarget,
          'groupId can only be used with FHidePopoverRegion.excludeTarget',
        ),
+       assert(
+         focusNode == null || traversalEdgeBehavior == null,
+         'focusNode and traversalEdgeBehavior cannot both be set.',
+       ),
        assert(builder != _builder || child != null, 'Either builder or child must be provided.'),
        popoverAnchor = popoverAnchor ?? defaultPlatform.popover,
        childAnchor = childAnchor ?? defaultPlatform.child;
@@ -314,6 +319,15 @@ class FPopover extends StatefulWidget {
 class _State extends State<FPopover> with SingleTickerProviderStateMixin {
   late Object? _groupId = widget.groupId ?? UniqueKey();
   late FPopoverController _controller = widget.controller ?? FPopoverController(vsync: this);
+  FocusScopeNode? _focusNode;
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode =
+        widget.focusNode ??
+        FocusScopeNode(traversalEdgeBehavior: widget.traversalEdgeBehavior ?? TraversalEdgeBehavior.closedLoop);
+  }
 
   @override
   void didUpdateWidget(covariant FPopover old) {
@@ -322,6 +336,16 @@ class _State extends State<FPopover> with SingleTickerProviderStateMixin {
       _groupId = widget.groupId ?? UniqueKey();
     }
 
+    if (widget.focusNode != old.focusNode || widget.traversalEdgeBehavior != old.traversalEdgeBehavior) {
+      if (old.focusNode == null) {
+        _focusNode?.dispose();
+      }
+
+      _focusNode =
+          widget.focusNode ??
+          FocusScopeNode(traversalEdgeBehavior: widget.traversalEdgeBehavior ?? TraversalEdgeBehavior.closedLoop);
+    }
+
     if (widget.controller != old.controller) {
       if (old.controller == null) {
         _controller.dispose();
@@ -330,6 +354,18 @@ class _State extends State<FPopover> with SingleTickerProviderStateMixin {
     }
   }
 
+  @override
+  void dispose() {
+    if (widget.focusNode == null) {
+      _focusNode?.dispose();
+    }
+
+    if (widget.controller == null) {
+      _controller.dispose();
+    }
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final style = widget.style?.call(context.theme.popoverStyle) ?? context.theme.popoverStyle;
@@ -374,7 +410,7 @@ class _State extends State<FPopover> with SingleTickerProviderStateMixin {
                 container: true,
                 child: FocusScope(
                   autofocus: widget.autofocus ?? (style.barrierFilter != null),
-                  node: widget.focusNode,
+                  node: _focusNode,
                   onFocusChange: widget.onFocusChange,
                   child: TapRegion(
                     groupId: _groupId,
@@ -423,14 +459,6 @@ class _State extends State<FPopover> with SingleTickerProviderStateMixin {
       _controller.hide();
     }
   }
-
-  @override
-  void dispose() {
-    if (widget.controller == null) {
-      _controller.dispose();
-    }
-    super.dispose();
-  }
 }
 
 /// A [FPopover]'s style.

forui/lib/src/widgets/popover.dart

@@ -103,7 +103,7 @@ class FPopoverMenu extends StatelessWidget {
   final ValueChanged<bool>? onFocusChange;
 
   /// {@macro forui.widgets.FPopover.traversalEdgeBehavior}
-  final TraversalEdgeBehavior traversalEdgeBehavior;
+  final TraversalEdgeBehavior? traversalEdgeBehavior;
 
   /// {@macro forui.widgets.FPopover.barrierSemanticsLabel}
   final String? barrierSemanticsLabel;
@@ -160,7 +160,7 @@ class FPopoverMenu extends StatelessWidget {
     this.autofocus,
     this.focusNode,
     this.onFocusChange,
-    this.traversalEdgeBehavior = TraversalEdgeBehavior.closedLoop,
+    this.traversalEdgeBehavior,
     List<FItemGroupMixin> Function(BuildContext, FPopoverController, List<FItemGroupMixin>?) menuBuilder =
         _defaultItemBuilder,
     List<FItemGroupMixin>? menu,
@@ -216,7 +216,7 @@ class FPopoverMenu extends StatelessWidget {
     this.autofocus,
     this.focusNode,
     this.onFocusChange,
-    this.traversalEdgeBehavior = TraversalEdgeBehavior.closedLoop,
+    this.traversalEdgeBehavior,
     List<FTileGroupMixin> Function(BuildContext, FPopoverController, List<FTileGroupMixin>?) menuBuilder =
         _defaultTileBuilder,
     List<FTileGroupMixin>? menu,

forui/lib/src/widgets/popover_menu.dart

@@ -152,6 +152,7 @@ class _ContentState<T> extends State<Content<T>> {
           padding: EdgeInsets.zero,
           physics: widget.physics,
           child: Column(
+            mainAxisSize: MainAxisSize.min,
             children: [
               if (widget.children.firstOrNull case final first?)
                 SelectContentData<T>(