refactor: find in page (#7086)

- refactor rxjs data flow
- use canvas text to mitigate searchable search box input text issue

packages/frontend/component/src/ui/modal/modal.tsx

@@ -46,6 +46,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       title,
       description,
       withoutCloseButton = false,
+      modal,
 
       portalOptions,
       contentOptions: {
@@ -63,13 +64,13 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
     },
     ref
   ) => (
-    <Dialog.Root {...props}>
+    <Dialog.Root modal={modal} {...props}>
       <Dialog.Portal {...portalOptions}>
         <Dialog.Overlay
           className={clsx(styles.modalOverlay, overlayClassName)}
           {...otherOverlayOptions}
         />
-        <div className={styles.modalContentWrapper}>
+        <div data-modal={modal} className={clsx(styles.modalContentWrapper)}>
           <Dialog.Content
             className={clsx(styles.modalContent, contentClassName)}
             style={{

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { createVar, style } from '@vanilla-extract/css';
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
 export const widthVar = createVar('widthVar');
 export const heightVar = createVar('heightVar');
 export const minHeightVar = createVar('minHeightVar');
@@ -17,6 +17,7 @@ export const modalContentWrapper = style({
   justifyContent: 'center',
   zIndex: cssVar('zIndexModal'),
 });
+
 export const modalContent = style({
   vars: {
     [widthVar]: '',
@@ -82,3 +83,11 @@ export const confirmModalContainer = style({
   display: 'flex',
   flexDirection: 'column',
 });
+
+globalStyle(`[data-modal="false"]${modalContentWrapper}`, {
+  pointerEvents: 'none',
+});
+
+globalStyle(`[data-modal="false"] ${modalContent}`, {
+  pointerEvents: 'auto',
+});