feat: aciton sheet

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

@@ -54,11 +54,12 @@ class GridFieldCell extends StatelessWidget {
 
   void _showActionSheet(BuildContext context) {
     final state = context.read<FieldCellBloc>().state;
-    GridFieldCellActionSheet(
+    GridFieldCellActionSheetPopover.show(
+      context,
       cellContext:
           GridFieldCellContext(gridId: state.gridId, field: state.field),
       onEdited: () => _showFieldEditor(context),
-    ).show(context);
+    );
   }
 
   void _showFieldEditor(BuildContext context) {

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

@@ -21,19 +21,6 @@ class GridFieldCellActionSheet extends StatelessWidget
       {required this.cellContext, required this.onEdited, Key? key})
       : super(key: key);
 
-  void show(BuildContext overlayContext) {
-    FlowyOverlay.of(overlayContext).insertWithAnchor(
-      widget: OverlayContainer(
-        child: this,
-        constraints: BoxConstraints.loose(const Size(240, 200)),
-      ),
-      identifier: GridFieldCellActionSheet.identifier(),
-      anchorContext: overlayContext,
-      anchorDirection: AnchorDirection.bottomWithLeftAligned,
-      delegate: this,
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
@@ -213,3 +200,20 @@ extension _FieldActionExtension on FieldAction {
     }
   }
 }
+
+class GridFieldCellActionSheetPopover {
+  static show(
+    BuildContext context, {
+    required GridFieldCellContext cellContext,
+    required VoidCallback onEdited,
+  }) {
+    FlowyPopover.show(context,
+        anchorContext: context,
+        anchorDirection: AnchorDirection.bottomWithLeftAligned,
+        constraints: BoxConstraints.loose(const Size(240, 200)),
+        builder: (BuildContext context) {
+      return GridFieldCellActionSheet(
+          cellContext: cellContext, onEdited: onEdited);
+    });
+  }
+}

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

@@ -99,27 +99,7 @@ class _FieldNameCell extends StatelessWidget {
   }
 }
 
-class FieldEditorPopOver extends StatelessWidget {
-  final String gridId;
-  final String fieldName;
-
-  final IFieldTypeOptionLoader typeOptionLoader;
-  const FieldEditorPopOver({
-    required this.gridId,
-    required this.fieldName,
-    required this.typeOptionLoader,
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return FieldEditor(
-        gridId: gridId,
-        fieldName: fieldName,
-        typeOptionLoader: typeOptionLoader,
-        key: key);
-  }
-
+class FieldEditorPopOver {
   static show(
     BuildContext context, {
     required BuildContext anchorContext,
@@ -132,7 +112,7 @@ class FieldEditorPopOver extends StatelessWidget {
       context,
       anchorContext: anchorContext,
       builder: (BuildContext context) {
-        return FieldEditorPopOver(
+        return FieldEditor(
             gridId: gridId,
             fieldName: fieldName,
             typeOptionLoader: typeOptionLoader,

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

@@ -102,22 +102,15 @@ class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
 
   void _showOverlay(BuildContext context, Widget child,
       {VoidCallback? onRemoved}) {
-    final identifier = child.toString();
-    if (currentOverlayIdentifier != null) {
-      FlowyOverlay.of(context).remove(currentOverlayIdentifier!);
-    }
-
-    currentOverlayIdentifier = identifier;
-    FlowyOverlay.of(context).insertWithAnchor(
-      widget: OverlayContainer(
-        child: child,
-        constraints: BoxConstraints.loose(const Size(460, 440)),
-      ),
-      identifier: identifier,
+    FlowyPopover.show(
+      context,
+      constraints: BoxConstraints.loose(const Size(460, 440)),
       anchorContext: context,
-      anchorDirection: AnchorDirection.leftWithCenterAligned,
-      style: FlowyOverlayStyle(blur: false),
-      anchorOffset: const Offset(-20, 0),
+      anchorDirection: AnchorDirection.rightWithCenterAligned,
+      anchorOffset: const Offset(20, 0),
+      builder: (BuildContext context) {
+        return child;
+      },
     );
   }
 

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_popover.dart

@@ -13,6 +13,7 @@ class FlowyPopover extends StatefulWidget {
   final Rect anchorRect;
   final AnchorDirection? anchorDirection;
   final EdgeInsets padding;
+  final BoxConstraints? constraints;
 
   FlowyPopover({
     Key? key,
@@ -21,6 +22,7 @@ class FlowyPopover extends StatefulWidget {
     this.shape,
     this.padding = _overlayContainerPadding,
     this.anchorDirection,
+    this.constraints,
   }) : super(key: key);
 
   static show(
@@ -31,6 +33,7 @@ class FlowyPopover extends StatefulWidget {
     AnchorDirection? anchorDirection,
     Size? anchorSize,
     Offset? anchorOffset,
+    BoxConstraints? constraints,
   }) {
     final offset = anchorOffset ?? Offset.zero;
     Offset targetAnchorPosition = anchorPosition ?? Offset.zero;
@@ -59,6 +62,7 @@ class FlowyPopover extends StatefulWidget {
           return FlowyPopover(
               anchorRect: anchorRect,
               anchorDirection: anchorDirection,
+              constraints: constraints,
               builder: (BuildContext context) {
                 return builder(context);
               });
@@ -88,7 +92,8 @@ class _FlowyPopoverState extends State<FlowyPopover> {
             ),
             child: Container(
               padding: widget.padding,
-              constraints: BoxConstraints.loose(const Size(280, 400)),
+              constraints: widget.constraints ??
+                  BoxConstraints.loose(const Size(280, 400)),
               decoration: FlowyDecoration.decoration(
                   theme.surface, theme.shadowColor.withOpacity(0.15)),
               key: preRenderKey,