Rework ComboBox

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [next]
 
+- refactor: Rework `ComboBox`. Rebuilt the popup using Flutter overlay infrastructure with viewport-aware positioning, configurable popup constraints, variable-height items, text scaling support, keyboard navigation, type-ahead search, and open/close callbacks. ([#1360](https://github.com/bdlukaa/fluent_ui/pull/1360), [#485](https://github.com/bdlukaa/fluent_ui/issues/485), [#1007](https://github.com/bdlukaa/fluent_ui/issues/1007), [#1230](https://github.com/bdlukaa/fluent_ui/issues/1230), and [#1256](https://github.com/bdlukaa/fluent_ui/issues/1256))
 - refactor: Flutter 3.47.1 support ([#1353](https://github.com/bdlukaa/fluent_ui/pull/1353))
   - migrate Material UI imports to the standalone `material_ui` package. [learn more](https://flutter.dev/blog/decoupling-material-cupertino)
 - fix: skip hidden `TitleBar` children when collecting semantics ([#1354](https://github.com/bdlukaa/fluent_ui/pull/1354))

example/lib/screens/forms/combo_box.dart

@@ -12,7 +12,7 @@ class ComboBoxPage extends StatefulWidget {
 }
 
 class _ComboBoxPageState extends State<ComboBoxPage> with PageMixin {
-  String? selectedColor = 'Green';
+  String? selectedColor;
   String? selectedCat;
   double fontSize = 20;
   bool disabled = false;
@@ -67,6 +67,7 @@ ComboBox<String>(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               ComboBox<String>(
+                placeholder: const Text('Select a color'),
                 popupColor: colors[selectedColor],
                 value: selectedColor,
                 items: colors.entries.map((final e) {
@@ -131,6 +132,58 @@ ComboBox<String>(
             ],
           ),
         ),
+        subtitle(content: const Text('Constrained and complex popup content')),
+        CodeSnippetCard(
+          codeSnippet: '''
+ComboBox<String>(
+  popupConstraints: const BoxConstraints(maxHeight: 220),
+  items: options,
+  onChanged: onChanged,
+),''',
+          child: Wrap(
+            spacing: 12,
+            runSpacing: 12,
+            children: [
+              ComboBox<String>(
+                value: 'Item 8',
+                popupConstraints: const BoxConstraints(
+                  minWidth: 180,
+                  maxHeight: 220,
+                ),
+                items: [
+                  for (var index = 0; index < 30; index++)
+                    ComboBoxItem(
+                      value: 'Item $index',
+                      enabled: index != 4,
+                      child: Text('Item $index'),
+                    ),
+                ],
+                onChanged: (_) {},
+              ),
+              MediaQuery(
+                data: MediaQuery.of(
+                  context,
+                ).copyWith(textScaler: const TextScaler.linear(1.5)),
+                child: ComboBox<String>(
+                  placeholder: const Text('Complex item'),
+                  items: const [
+                    ComboBoxItem(
+                      value: 'Complex item',
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text('Complex item'),
+                          Text('A caption that can wrap'),
+                        ],
+                      ),
+                    ),
+                  ],
+                  onChanged: (_) {},
+                ),
+              ),
+            ],
+          ),
+        ),
         subtitle(content: const Text('An editable ComboBox')),
         description(
           content: const Text(