feat: use popoer for select widget

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart

@@ -94,36 +94,12 @@ class FieldTypeOptionEditor extends StatelessWidget {
     required BuildContext context,
     required FieldTypeOptionEditState state,
   }) {
-    final overlayDelegate = TypeOptionOverlayDelegate(
-      showOverlay: _showOverlay,
-      hideOverlay: _hideOverlay,
-    );
-
     return makeTypeOptionWidget(
       context: context,
-      overlayDelegate: overlayDelegate,
       dataController: dataController,
       popoverMutex: popoverMutex,
     );
   }
-
-  void _showOverlay(BuildContext context, Widget child,
-      {VoidCallback? onRemoved}) {
-    // FlowyPopover.show(
-    //   context,
-    //   constraints: BoxConstraints.loose(const Size(460, 440)),
-    //   anchorContext: context,
-    //   anchorDirection: AnchorDirection.rightWithCenterAligned,
-    //   anchorOffset: const Offset(20, 0),
-    //   builder: (BuildContext context) {
-    //     return child;
-    //   },
-    // );
-  }
-
-  void _hideOverlay(BuildContext context) {
-    //
-  }
 }
 
 abstract class TypeOptionWidget extends StatelessWidget {

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart

@@ -46,19 +46,15 @@ abstract class TypeOptionWidgetBuilder {
 Widget? makeTypeOptionWidget({
   required BuildContext context,
   required TypeOptionDataController dataController,
-  required TypeOptionOverlayDelegate overlayDelegate,
   required PopoverMutex popoverMutex,
 }) {
   final builder = makeTypeOptionWidgetBuilder(
-      dataController: dataController,
-      overlayDelegate: overlayDelegate,
-      popoverMutex: popoverMutex);
+      dataController: dataController, popoverMutex: popoverMutex);
   return builder.build(context);
 }
 
 TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
     {required TypeOptionDataController dataController,
-    required TypeOptionOverlayDelegate overlayDelegate,
     required PopoverMutex popoverMutex}) {
   final gridId = dataController.gridId;
   final fieldType = dataController.field.fieldType;
@@ -87,7 +83,7 @@ TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
           fieldType: fieldType,
           dataController: dataController,
         ),
-        overlayDelegate,
+        popoverMutex,
       );
     case FieldType.MultiSelect:
       return MultiSelectTypeOptionWidgetBuilder(
@@ -96,7 +92,7 @@ TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
           fieldType: fieldType,
           dataController: dataController,
         ),
-        overlayDelegate,
+        popoverMutex,
       );
     case FieldType.Number:
       return NumberTypeOptionWidgetBuilder(
@@ -105,7 +101,6 @@ TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
           fieldType: fieldType,
           dataController: dataController,
         ),
-        overlayDelegate,
         popoverMutex,
       );
     case FieldType.RichText:

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/multi_select.dart

@@ -12,14 +12,14 @@ class MultiSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
 
   MultiSelectTypeOptionWidgetBuilder(
     MultiSelectTypeOptionContext typeOptionContext,
-    TypeOptionOverlayDelegate overlayDelegate,
+    PopoverMutex popoverMutex,
   ) : _widget = MultiSelectTypeOptionWidget(
           selectOptionAction: MultiSelectAction(
             fieldId: typeOptionContext.fieldId,
             gridId: typeOptionContext.gridId,
             typeOptionContext: typeOptionContext,
           ),
-          overlayDelegate: overlayDelegate,
+          popoverMutex: popoverMutex,
         );
 
   @override
@@ -28,12 +28,12 @@ class MultiSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
 
 class MultiSelectTypeOptionWidget extends TypeOptionWidget {
   final MultiSelectAction selectOptionAction;
-  final TypeOptionOverlayDelegate overlayDelegate;
+  final PopoverMutex? popoverMutex;
 
   const MultiSelectTypeOptionWidget({
-    required this.selectOptionAction,
-    required this.overlayDelegate,
     Key? key,
+    required this.selectOptionAction,
+    this.popoverMutex,
   }) : super(key: key);
 
   @override
@@ -41,10 +41,9 @@ class MultiSelectTypeOptionWidget extends TypeOptionWidget {
     return SelectOptionTypeOptionWidget(
       options: selectOptionAction.typeOption.options,
       beginEdit: () {
-        overlayDelegate.hideOverlay(context);
         PopoverContainerState.of(context).closeAll();
       },
-      overlayDelegate: overlayDelegate,
+      popoverMutex: popoverMutex,
       typeOptionAction: selectOptionAction,
       // key: ValueKey(state.typeOption.hashCode),
     );

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart

@@ -24,11 +24,9 @@ class NumberTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
 
   NumberTypeOptionWidgetBuilder(
     NumberTypeOptionContext typeOptionContext,
-    TypeOptionOverlayDelegate overlayDelegate,
     PopoverMutex popoverMutex,
   ) : _widget = NumberTypeOptionWidget(
           typeOptionContext: typeOptionContext,
-          overlayDelegate: overlayDelegate,
           popoverMutex: popoverMutex,
         );
 
@@ -37,12 +35,10 @@ class NumberTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
 }
 
 class NumberTypeOptionWidget extends TypeOptionWidget {
-  final TypeOptionOverlayDelegate overlayDelegate;
   final NumberTypeOptionContext typeOptionContext;
   final PopoverMutex popoverMutex;
   const NumberTypeOptionWidget({
     required this.typeOptionContext,
-    required this.overlayDelegate,
     required this.popoverMutex,
     Key? key,
   }) : super(key: key);

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart

@@ -15,20 +15,19 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import '../../../layout/sizes.dart';
 import '../../cell/select_option_cell/extension.dart';
 import '../../common/text_field.dart';
-import 'builder.dart';
 import 'select_option_editor.dart';
 
 class SelectOptionTypeOptionWidget extends StatelessWidget {
   final List<SelectOptionPB> options;
   final VoidCallback beginEdit;
-  final TypeOptionOverlayDelegate overlayDelegate;
   final ISelectOptionAction typeOptionAction;
+  final PopoverMutex? popoverMutex;
 
   const SelectOptionTypeOptionWidget({
     required this.options,
     required this.beginEdit,
-    required this.overlayDelegate,
     required this.typeOptionAction,
+    this.popoverMutex,
     Key? key,
   }) : super(key: key);
 
@@ -52,7 +51,7 @@ class SelectOptionTypeOptionWidget extends StatelessWidget {
               ),
             if (state.options.isEmpty && !state.isEditingOption)
               const _AddOptionButton(),
-            _OptionList(overlayDelegate)
+            _OptionList(popoverMutex: popoverMutex)
           ];
 
           return Column(children: children);
@@ -113,8 +112,8 @@ class _OptionTitleButton extends StatelessWidget {
 }
 
 class _OptionList extends StatelessWidget {
-  final TypeOptionOverlayDelegate delegate;
-  const _OptionList(this.delegate, {Key? key}) : super(key: key);
+  final PopoverMutex? popoverMutex;
+  const _OptionList({Key? key, this.popoverMutex}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -124,7 +123,11 @@ class _OptionList extends StatelessWidget {
       },
       builder: (context, state) {
         final cells = state.options.map((option) {
-          return _makeOptionCell(context, option);
+          return _makeOptionCell(
+            context: context,
+            option: option,
+            popoverMutex: popoverMutex,
+          );
         }).toList();
 
         return ListView.separated(
@@ -142,16 +145,23 @@ class _OptionList extends StatelessWidget {
     );
   }
 
-  _OptionCell _makeOptionCell(BuildContext context, SelectOptionPB option) {
+  _OptionCell _makeOptionCell({
+    required BuildContext context,
+    required SelectOptionPB option,
+    PopoverMutex? popoverMutex,
+  }) {
     return _OptionCell(
       option: option,
+      popoverMutex: popoverMutex,
     );
   }
 }
 
 class _OptionCell extends StatefulWidget {
   final SelectOptionPB option;
-  const _OptionCell({required this.option, Key? key}) : super(key: key);
+  final PopoverMutex? popoverMutex;
+  const _OptionCell({required this.option, Key? key, this.popoverMutex})
+      : super(key: key);
 
   @override
   State<_OptionCell> createState() => _OptionCellState();
@@ -172,6 +182,7 @@ class _OptionCellState extends State<_OptionCell> {
 
     return Popover(
       controller: _popoverController,
+      mutex: widget.popoverMutex,
       offset: const Offset(20, 0),
       child: SizedBox(
         height: GridSize.typeOptionItemHeight,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/single_select.dart

@@ -11,14 +11,14 @@ class SingleSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
 
   SingleSelectTypeOptionWidgetBuilder(
     SingleSelectTypeOptionContext singleSelectTypeOption,
-    TypeOptionOverlayDelegate overlayDelegate,
+    PopoverMutex popoverMutex,
   ) : _widget = SingleSelectTypeOptionWidget(
           selectOptionAction: SingleSelectAction(
             fieldId: singleSelectTypeOption.fieldId,
             gridId: singleSelectTypeOption.gridId,
             typeOptionContext: singleSelectTypeOption,
           ),
-          overlayDelegate: overlayDelegate,
+          popoverMutex: popoverMutex,
         );
 
   @override
@@ -27,12 +27,12 @@ class SingleSelectTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
 
 class SingleSelectTypeOptionWidget extends TypeOptionWidget {
   final SingleSelectAction selectOptionAction;
-  final TypeOptionOverlayDelegate overlayDelegate;
+  final PopoverMutex? popoverMutex;
 
   const SingleSelectTypeOptionWidget({
-    required this.selectOptionAction,
-    required this.overlayDelegate,
     Key? key,
+    required this.selectOptionAction,
+    this.popoverMutex,
   }) : super(key: key);
 
   @override
@@ -40,10 +40,9 @@ class SingleSelectTypeOptionWidget extends TypeOptionWidget {
     return SelectOptionTypeOptionWidget(
       options: selectOptionAction.typeOption.options,
       beginEdit: () {
-        overlayDelegate.hideOverlay(context);
         PopoverContainerState.of(context).closeAll();
       },
-      overlayDelegate: overlayDelegate,
+      popoverMutex: popoverMutex,
       typeOptionAction: selectOptionAction,
       // key: ValueKey(state.typeOption.hashCode),
     );

frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart

@@ -59,6 +59,7 @@ class _GridPropertyListState extends State<GridPropertyList> {
           }).toList();
 
           return ListView.separated(
+            controller: ScrollController(),
             shrinkWrap: true,
             itemCount: cells.length,
             itemBuilder: (BuildContext context, int index) {