Add autocomplete (#640)

* Tweak tabs & multiselect

* WIP autocomplete

* Working prototype

* Add typeahead support

* Tab to complete

* Overhaul typeahead controller

* Further simplify implementation

* Add amazing stuff

* Add typeahead controller tests

* Example

* Update localization

* Add autocomplete tests

* Add autocomplete controller hook

* Add autocomplete docs

* Fix failing tests

* Fix link checking

* Commit from GitHub Actions (Forui Hooks Presubmit)

* Prepare Forui for review

* Update windows-latest goldens

* Fix failing build

* Update localizations

---------

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

Author: Pante

docs/app/docs/form/autocomplete/page.mdx

@@ -77,6 +77,7 @@ FPopoverMenu(
   offset: Offset.zero,
   groupId: 'popover-menu-group',
   hideOnTapOutside: FHidePopoverRegion.excludeTarget,
+  onTapHide: () {},
   traversalEdgeBehavior: TraversalEdgeBehavior.closedLoop,
   menuBuilder: (context, controller, menu) => [FItemGroup(children: [])],
   menu: [

docs/app/docs/overlay/popover-menu/page.mdx

@@ -93,6 +93,7 @@ FPopover(
   offset: Offset.zero,
   groupId: 'popover-group',
   hideOnTapOutside: FHidePopoverRegion.excludeTarget,
+  onTapHide: () {},
   popoverBuilder: (context, controller) => const Placeholder(),
   builder: (context, controller, child) => const Placeholder(),
   child: const Placeholder(),

docs/app/docs/overlay/popover/page.mdx

@@ -1,4 +1,4 @@
-## 0.15.0
+## 0.15.0 (Next)
 
 ### Consistent Controllers
 We've done a pass over the controllers in Forui to make them more consistent and easier to use.
@@ -16,6 +16,14 @@ We've done a pass over the controllers in Forui to make them more consistent and
 * **Breaking** Remove `FAccordionController.validate(...)`.
 
 
+## `FAutocomplete` (new)
+* Add `FAutocomplete`.
+* Add `FAutocompleteController`.
+* Add `FAutocompleteStyle`.
+* Add `FAutocompleteSection`.
+* Add `FAutocompleteItem`.
+
+
 ### `FMultiSelect` (new)
 * Add `FMultiSelect`.
 * Add `FMultiSelectController`.
@@ -24,15 +32,19 @@ We've done a pass over the controllers in Forui to make them more consistent and
 
 
 ### Others
+* Add `FTypeaheadController`.
+* Add `FPopover.onTapHide`.
+* Add `FPopoverMenu.onTapHide`.
+
 * Rename `FSelect.divider` to `FSelect.contentDivider`.
 * Change `FMultiValueNotifier` to be non-abstract.
-* Change `FTappableStyle.mouseCursor` to `MouseCursor.defer`. See https://ux.stackexchange.com/questions/105024/why-dont-button-html-elements-have-a-css-cursor-pointer-by-default
+* **Breaking** Change `FTappableStyle.mouseCursor` to `MouseCursor.defer`. See https://ux.stackexchange.com/questions/105024/why-dont-button-html-elements-have-a-css-cursor-pointer-by-default
   for our rationale behind this change.
 
 * Fix `FTabs` throwing an assertion error if `FTabController` is provided with a `initialIndex` > 0.
 
 
-### 0.14.1
+## 0.14.1
 * Fix `FToaster`sometimes crashing due to an incorrect update of a late final variable.
 
 

forui/CHANGELOG.md

@@ -68,12 +68,14 @@ Forui provides the following widgets:
   - Resizable
   - Scaffold
 - Form
+  - Autocomplete 
   - Button
   - Checkbox
   - Date Field
   - Label
   - Picker
   - Radio
+  - Multi-select
   - Select
   - Select Group
   - Slider

forui/README.md

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:forui/forui.dart';
 
+const features = ['Keyboard navigation', 'Typeahead suggestions', 'Tab to complete'];
+
 class Sandbox extends StatefulWidget {
   const Sandbox({super.key});
 
@@ -28,28 +30,7 @@ class _SandboxState extends State<Sandbox> with SingleTickerProviderStateMixin {
   @override
   Widget build(BuildContext context) {
     return Center(
-      child: FTabs(
-        controller: c,
-        initialIndex: 0,
-        children: [
-          FTabEntry(
-            label: const Text('Account'),
-            child: FCard(
-              title: const Text('Account'),
-              subtitle: const Text('Make changes to your account here. Click save when you are done.'),
-              child: Container(color: Colors.blue, height: 100),
-            ),
-          ),
-          FTabEntry(
-            label: const Text('Password'),
-            child: FCard(
-              title: const Text('Password'),
-              subtitle: const Text('Change your password here. After saving, you will be logged out.'),
-              child: Container(color: Colors.red, height: 100),
-            ),
-          ),
-        ],
-      ),
+      child: FAutocomplete(label: Text('Autocomplete'), hint: 'What can it do?', items: features),
     );
   }
 }

forui/bin/commands/style/style.dart

@@ -7,6 +7,7 @@ export 'localizations.dart';
 export 'theme.dart';
 
 export 'widgets/accordion.dart';
+export 'widgets/autocomplete.dart';
 export 'widgets/alert.dart';
 export 'widgets/avatar.dart';
 export 'widgets/badge.dart';

forui/example/lib/sandbox.dart

@@ -11,6 +11,7 @@ export 'src/foundation/notifiers.dart';
 export 'src/foundation/rendering.dart' hide Alignments, DefaultData, RenderBoxes;
 export 'src/foundation/tappable.dart' hide AnimatedTappable, AnimatedTappableState;
 export 'src/foundation/time.dart';
+export 'src/foundation/typeahead_controller.dart';
 export 'src/foundation/portal/portal.dart';
 export 'src/foundation/portal/portal_constraints.dart' hide FixedConstraints;
 export 'src/foundation/portal/portal_shift.dart';

forui/lib/forui.dart

@@ -22,5 +22,6 @@
   "paginationPreviousSemanticsLabel": "Vorige",
   "paginationNextSemanticsLabel": "Volgende",
   "popoverSemanticsLabel": "Opspringer",
-  "multiSelectHint": "Kies items"
+  "multiSelectHint": "Kies items",
+  "autocompleteNoResults": "Geen resultate gevind nie."
 }