diff --git a/package.json b/package.json index 82f3d5078..e8dc67f99 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc7ffde05..12dda5a80 100644 --- a/pnpm-lock.yaml +++ b/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) diff --git a/src/renderer/src/components/ui/modal/stacked/modal.tsx b/src/renderer/src/components/ui/modal/stacked/modal.tsx index cf05454a5..fdd01ab39 100644 --- a/src/renderer/src/components/ui/modal/stacked/modal.tsx +++ b/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(() => ( {children ?? createElement(content, ModalProps)} - ) + ), [ModalContextProps, ModalProps, children, content]) useEffect(() => { if (currentIsClosing) { @@ -188,7 +185,7 @@ export const ModalInternal: Component<{
= ({ 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) && } + {stack.length > 0 && (modalSettingOverlay || forceOverlay) && ( + + )} ) }