feat: add persist mode to the modal

src/components/modal/modal.tsx

@@ -14,6 +14,7 @@ interface ModalProps {
   children: React.ReactNode;
   lockBody?: boolean;
   onClose: () => void;
+  persist?: boolean;
   show: boolean;
   wide?: boolean;
 }
@@ -22,6 +23,7 @@ export function Modal({
   children,
   lockBody = true,
   onClose,
+  persist = false,
   show,
   wide,
 }: ModalProps) {
@@ -50,40 +52,49 @@ export function Modal({
     return () => document.removeEventListener('keydown', keyListener);
   }, [onClose, show]);
 
-  return (
+  const animationProps = persist
-    <Portal>
+    ? {
-      <AnimatePresence>
+        animate: show ? 'show' : 'hidden',
-        {show && (
+      }
-          <FocusTrap>
+    : {
+        animate: 'show',
+        exit: 'hidden',
+        initial: 'hidden',
+      };
+
+  const content = (
+    <FocusTrap active={show}>
       <div>
         <motion.div
-                animate="show"
+          {...animationProps}
           className={styles.overlay}
-                exit="hidden"
-                initial="hidden"
           variants={variants.overlay}
           onClick={onClose}
           onKeyDown={onClose}
         />
         <div className={styles.modal}>
           <motion.div
-                  animate="show"
+            {...animationProps}
             className={cn(styles.content, wide && styles.wide)}
-                  exit="hidden"
-                  initial="hidden"
             variants={variants.modal}
           >
             <button className={styles.close} onClick={onClose}>
               <IoClose />
             </button>
-
             {children}
           </motion.div>
         </div>
       </div>
     </FocusTrap>
+  );
+
+  return (
+    <Portal>
+      {persist ? (
+        <div style={{ display: show ? 'block' : 'none' }}>{content}</div>
+      ) : (
+        <AnimatePresence>{show && content}</AnimatePresence>
       )}
-      </AnimatePresence>
     </Portal>
   );
 }

src/components/toolbox/countdown-timer/countdown-timer.tsx

@@ -12,7 +12,7 @@ interface TimerProps {
 
 export function CountdownTimer({ onClose, show }: TimerProps) {
   return (
-    <Modal show={show} onClose={onClose}>
+    <Modal persist show={show} onClose={onClose}>
       <h2 className={styles.title}>Countdown Timer</h2>
       <Form />
       <Timers />