fix: downgrade framer motion

Signed-off-by: Innei <i@innei.in>

package.json

@@ -78,7 +78,7 @@
     "electron-updater": "^6.2.1",
     "font-list": "1.5.1",
     "foxact": "0.2.36",
-    "framer-motion": "11.3.6",
+    "framer-motion": "11.0.10",
     "franc-min": "6.2.0",
     "fuse.js": "7.0.0",
     "hast-util-to-jsx-runtime": "2.3.0",

pnpm-lock.yaml

@@ -167,8 +167,8 @@ importers:
         specifier: 0.2.36
         version: 0.2.36(react@18.3.1)
       framer-motion:
-        specifier: 11.3.6
-        version: 11.3.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 11.0.10
+        version: 11.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       franc-min:
         specifier: 6.2.0
         version: 6.2.0
@@ -930,6 +930,12 @@ packages:
     engines: {node: '>=14.14'}
     hasBin: true
 
+  '@emotion/is-prop-valid@0.8.8':
+    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
+
+  '@emotion/memoize@0.7.4':
+    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+
   '@es-joy/jsdoccomment@0.43.1':
     resolution: {integrity: sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==}
     engines: {node: '>=16'}
@@ -4080,15 +4086,12 @@ packages:
       react:
         optional: true
 
-  framer-motion@11.3.6:
-    resolution: {integrity: sha512-olpX48qfoSIDjhw0RbolhOGBQmdMAXHHpSI0PFdTj5LeXChcf5F4ApShs0mQ6FPEPOj7dnEvSyB07UgRK5G9Jw==}
+  framer-motion@11.0.10:
+    resolution: {integrity: sha512-aaImib9FQlfno2yiZAdkvN6zLXLr8a9uGsGFlQO64hSm8NoCeiUng2//5ok7RHCW2ufzT74uuPsmWzUsrHPYDQ==}
     peerDependencies:
-      '@emotion/is-prop-valid': '*'
       react: ^18.0.0
       react-dom: ^18.0.0
     peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
       react:
         optional: true
       react-dom:
@@ -7585,6 +7588,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@emotion/is-prop-valid@0.8.8':
+    dependencies:
+      '@emotion/memoize': 0.7.4
+    optional: true
+
+  '@emotion/memoize@0.7.4':
+    optional: true
+
   '@es-joy/jsdoccomment@0.43.1':
     dependencies:
       '@types/eslint': 8.56.10
@@ -11291,10 +11302,11 @@ snapshots:
     optionalDependencies:
       react: 18.3.1
 
-  framer-motion@11.3.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  framer-motion@11.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       tslib: 2.6.3
     optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 

src/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -3,11 +3,10 @@ import { useUISettingKey } from "@renderer/atoms/settings/ui"
 import { AppErrorBoundary } from "@renderer/components/common/AppErrorBoundary"
 import { m } from "@renderer/components/common/Motion"
 import { ErrorComponentType } from "@renderer/components/errors"
-import { stopPropagation } from "@renderer/lib/dom"
+import { nextFrame, stopPropagation } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import { useAnimationControls, useDragControls } from "framer-motion"
-import { useAtomValue, useSetAtom } from "jotai"
-import { selectAtom } from "jotai/utils"
+import { useSetAtom } from "jotai"
 import type { PointerEventHandler, SyntheticEvent } from "react"
 import {
   createElement,
@@ -18,6 +17,7 @@ import {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from "react"
 import { useEventCallback } from "usehooks-ts"
 
@@ -43,20 +43,17 @@ export const ModalInternal: Component<{
     ref: any,
   ) {
     const setStack = useSetAtom(modalStackAtom)
+
+    const [currentIsClosing, setCurrentIsClosing] = useState(false)
+
     const close = useEventCallback(() => {
-      setStack((p) => p.filter((modal) => modal.id !== item.id))
+      setCurrentIsClosing(true)
+      nextFrame(() => {
+        setStack((p) => p.filter((modal) => modal.id !== item.id))
+      })
       onPropsClose?.(false)
     })
 
-    const currentIsClosing = useAtomValue(
-      useMemo(
-        () =>
-          selectAtom(modalStackAtom, (atomValue) =>
-            atomValue.every((modal) => modal.id !== item.id)),
-        [item.id],
-      ),
-    )
-
     const onClose = useCallback(
       (open: boolean): void => {
         if (!open) {
@@ -159,13 +156,13 @@ export const ModalInternal: Component<{
       }),
       [ModalProps],
     )
-    const finalChildren = (
+    const finalChildren = useMemo(() => (
       <CurrentModalContext.Provider value={ModalContextProps}>
         <AppErrorBoundary errorType={ErrorComponentType.Modal}>
           {children ?? createElement(content, ModalProps)}
         </AppErrorBoundary>
       </CurrentModalContext.Provider>
-    )
+    ), [ModalContextProps, ModalProps, children, content])
 
     useEffect(() => {
       if (currentIsClosing) {
@@ -188,7 +185,7 @@ export const ModalInternal: Component<{
                 <div
                   className={cn(
                     "fixed inset-0 z-20 overflow-auto",
-                    currentIsClosing && "pointer-events-none",
+                    currentIsClosing && "!pointer-events-none",
                     modalContainerClassName,
                   )}
                   onClick={clickOutsideToDismiss ? dismiss : undefined}

src/renderer/src/components/ui/modal/stacked/provider.tsx

@@ -19,7 +19,6 @@ export const ModalStackProvider: FC<PropsWithChildren> = ({ children }) => (
 const ModalStack = () => {
   const stack = useAtomValue(modalStackAtom)
 
-  // Vite HMR issue
   useDismissAllWhenRouterChange()
   const modalSettingOverlay = useUISettingKey("modalOverlay")
 
@@ -35,7 +34,9 @@ const ModalStack = () => {
           isTop={index === stack.length - 1}
         />
       ))}
-      {stack.length > 0 && (modalSettingOverlay || forceOverlay) && <ModalOverlay zIndex={MODAL_STACK_Z_INDEX + stack.length - 1} />}
+      {stack.length > 0 && (modalSettingOverlay || forceOverlay) && (
+        <ModalOverlay zIndex={MODAL_STACK_Z_INDEX + stack.length - 1} />
+      )}
     </AnimatePresence>
   )
 }