feat(core): support draft filter (#12400)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added support for draft mode and completion callbacks across filter components, enabling stepwise filter creation and editing.
  - Enhanced filter menus and editors with external control via refs and new callback props for open/close state management.
  - Introduced new filter option group component for multi-step filter interactions.
  - Expanded tag filter methods for more granular filtering options.
  - Enabled controlled open state and close event handling for desktop and mobile menus.
  - Added programmatic control and completion callbacks to member selector and tags inline editors.

- **Improvements**
  - Updated filter and tag editors with improved UI layouts and added "Done" buttons for easier completion.
  - Improved menu and editor accessibility by allowing programmatic open/close and completion event handling.
  - Refactored date filter components for modularity and consistent draft handling.
  - Separated draft filter state management in filter UI for clearer user interactions.

- **Bug Fixes**
  - Refined date filter logic for more accurate "after" and "before" comparisons.

- **Style**
  - Adjusted styles for draft filters and editor layouts to enhance visual clarity and user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -2,7 +2,13 @@ import { useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
 
 import { observeResize } from '../../../utils';
 import { Button } from '../../button';
@@ -34,6 +40,7 @@ export const MobileMenu = ({
   } = {},
   contentWrapperStyle,
   rootOptions,
+  ref,
 }: MenuProps) => {
   const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
   const [open, setOpen] = useState(false);
@@ -82,10 +89,23 @@ export const MobileMenu = ({
       }
       setOpen(open);
       rootOptions?.onOpenChange?.(open);
+      if (!open) {
+        rootOptions?.onClose?.();
+      }
     },
     [onInteractOutside, onPointerDownOutside, removeAllSubMenus, rootOptions]
   );
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      changeOpen: (open: boolean) => {
+        onOpenChange(open);
+      },
+    }),
+    [onOpenChange]
+  );
+
   const onItemClick = useCallback(
     (e: any) => {
       e.preventDefault();