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/input/input.tsx

@@ -45,13 +45,21 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     autoFocus,
     ...otherProps
   }: InputProps,
-  ref: ForwardedRef<HTMLInputElement>
+  upstreamRef: ForwardedRef<HTMLInputElement>
 ) {
-  const handleAutoFocus = useCallback((ref: HTMLInputElement | null) => {
-    if (ref) {
-      window.setTimeout(() => ref.focus(), 0);
-    }
-  }, []);
+  const handleAutoFocus = useCallback(
+    (ref: HTMLInputElement | null) => {
+      if (ref) {
+        window.setTimeout(() => ref.focus(), 0);
+        if (typeof upstreamRef === 'function') {
+          upstreamRef(ref);
+        } else if (upstreamRef) {
+          upstreamRef.current = ref;
+        }
+      }
+    },
+    [upstreamRef]
+  );
 
   return (
     <div
@@ -78,7 +86,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           large: size === 'large',
           'extra-large': size === 'extraLarge',
         })}
-        ref={autoFocus ? handleAutoFocus : ref}
+        ref={autoFocus ? handleAutoFocus : upstreamRef}
         disabled={disabled}
         style={inputStyle}
         onChange={useCallback(

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',
+});