diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json index 8404f29490..d863a1a1b2 100644 --- a/packages/desktop-client/package.json +++ b/packages/desktop-client/package.json @@ -86,7 +86,7 @@ "react-redux": "^9.2.0", "react-router": "7.13.0", "react-simple-pull-to-refresh": "^1.3.4", - "react-spring": "10.0.0", + "react-spring": "^10.0.3", "react-swipeable": "^7.0.2", "react-virtualized-auto-sizer": "^2.0.2", "recharts": "^3.7.0", diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx index 01c240ec01..ffadf504ac 100644 --- a/packages/desktop-client/src/components/Notifications.tsx +++ b/packages/desktop-client/src/components/Notifications.tsx @@ -153,22 +153,27 @@ function Notification({ const yOffset = index * Y_OFFSET_PER_LEVEL; const [isSwiped, setIsSwiped] = useState(false); - const [spring, api] = useSpring(() => ({ - x: 0, - y: yOffset, - opacity: stackOpacity, - scale, - })); + const [spring, api] = useSpring( + () => ({ + from: { + x: 0, + y: yOffset, + opacity: stackOpacity, + scale, + }, + }), + [], + ); // Update scale, opacity, and y-position when index changes useEffect(() => { - void api.start({ scale, opacity: stackOpacity, y: yOffset }); + void api.start({ to: { scale, opacity: stackOpacity, y: yOffset } }); }, [index, scale, stackOpacity, yOffset, api]); const swipeHandlers = useSwipeable({ onSwiping: ({ deltaX }) => { if (!isSwiped) { - void api.start({ x: deltaX }); + void api.start({ to: { x: deltaX } }); } }, onSwiped: ({ velocity, deltaX }) => { @@ -179,14 +184,13 @@ function Notification({ if (Math.abs(deltaX) > threshold || velocity > 0.5) { // Animate out & remove item after animation void api.start({ - x: direction * 1000, - opacity: 0, + to: { x: direction * 1000, opacity: 0 }, onRest: onRemove, }); setIsSwiped(true); } else { // Reset position if not swiped far enough - void api.start({ x: 0 }); + void api.start({ to: { x: 0 } }); } }, trackMouse: true, diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx index c9778f6088..6b8eaea800 100644 --- a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx +++ b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx @@ -24,10 +24,13 @@ export function BudgetSummaries() { const [firstMonth] = months; const [widthState, setWidthState] = useState(0); - const [styles, spring] = useSpring(() => ({ - x: 0, - config: { mass: 3, tension: 600, friction: 80 }, - })); + const [styles, spring] = useSpring( + () => ({ + from: { x: 0 }, + config: { mass: 3, tension: 600, friction: 80 }, + }), + [], + ); const containerRef = useResizeObserver( useCallback(rect => { @@ -55,7 +58,9 @@ export function BudgetSummaries() { } const to = -offsetX; - void spring.start({ from: { x: from }, x: to }); + if (from !== to) { + void spring.start({ from: { x: from }, to: { x: to } }); + } }, [spring, firstMonth, monthWidth, allMonths]); useLayoutEffect(() => { @@ -63,7 +68,7 @@ export function BudgetSummaries() { }, [firstMonth]); useLayoutEffect(() => { - void spring.start({ from: { x: -monthWidth }, to: { x: -monthWidth } }); + void spring.start({ to: { x: -monthWidth }, immediate: true }); }, [spring, monthWidth]); const { SummaryComponent } = useBudgetComponents(); diff --git a/packages/desktop-client/src/components/mobile/ActionableGridListItem.tsx b/packages/desktop-client/src/components/mobile/ActionableGridListItem.tsx index 13a68054be..ed22cfff17 100644 --- a/packages/desktop-client/src/components/mobile/ActionableGridListItem.tsx +++ b/packages/desktop-client/src/components/mobile/ActionableGridListItem.tsx @@ -34,10 +34,13 @@ export function ActionableGridListItem({ const hasActions = !!actions; // Spring animation for the swipe - const [{ x }, api] = useSpring(() => ({ - x: 0, - config: config.stiff, - })); + const [{ x }, api] = useSpring( + () => ({ + from: { x: 0 }, + config: config.stiff, + }), + [], + ); // Handle drag gestures const bind = useDrag( @@ -48,7 +51,7 @@ export function ActionableGridListItem({ if (active) { dragStartedRef.current = true; void api.start({ - x: Math.max(-actionsWidth, Math.min(0, currentX)), + to: { x: Math.max(-actionsWidth, Math.min(0, currentX)) }, onRest: () => { dragStartedRef.current = false; }, @@ -62,7 +65,7 @@ export function ActionableGridListItem({ (vx < -0.5 && currentX < -actionsWidth / 5); void api.start({ - x: shouldReveal ? -actionsWidth : 0, + to: { x: shouldReveal ? -actionsWidth : 0 }, onRest: () => { dragStartedRef.current = false; setIsRevealed(shouldReveal); @@ -141,7 +144,7 @@ export function ActionableGridListItem({ ? actions({ close: () => { void api.start({ - x: 0, + to: { x: 0 }, onRest: () => { setIsRevealed(false); }, diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx index 9af026bf15..068cdeb842 100644 --- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx +++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx @@ -52,7 +52,7 @@ export function MobileNavTabs() { maxWidth: `${100 / COLUMN_COUNT}%`, }; - const [{ y }, api] = useSpring(() => ({ y: OPEN_DEFAULT_Y })); + const [{ y }, api] = useSpring(() => ({ from: { y: OPEN_DEFAULT_Y } }), []); const openFull = useCallback( ({ canceled }: { canceled?: boolean }) => { @@ -60,7 +60,7 @@ export function MobileNavTabs() { // so we change the spring config to create a nice wobbly effect setNavbarState('open'); void api.start({ - y: OPEN_FULL_Y, + to: { y: OPEN_FULL_Y }, immediate: isTestEnv, config: canceled ? config.wobbly : config.stiff, }); @@ -72,7 +72,7 @@ export function MobileNavTabs() { (velocity = 0) => { setNavbarState('default'); void api.start({ - y: OPEN_DEFAULT_Y, + to: { y: OPEN_DEFAULT_Y }, immediate: isTestEnv, config: { ...config.stiff, velocity }, }); @@ -84,7 +84,7 @@ export function MobileNavTabs() { (velocity = 0) => { setNavbarState('hidden'); void api.start({ - y: HIDDEN_Y, + to: { y: HIDDEN_Y }, immediate: isTestEnv, config: { ...config.stiff, velocity }, }); @@ -199,7 +199,7 @@ export function MobileNavTabs() { } else { // when the user keeps dragging, we just move the sheet according to // the cursor position - void api.start({ y: oy, immediate: true }); + void api.start({ to: { y: oy }, immediate: true }); } }, { diff --git a/packages/desktop-client/src/components/reports/reports/Calendar.tsx b/packages/desktop-client/src/components/reports/reports/Calendar.tsx index 54f6a624a3..dc37e2f9f4 100644 --- a/packages/desktop-client/src/components/reports/reports/Calendar.tsx +++ b/packages/desktop-client/src/components/reports/reports/Calendar.tsx @@ -447,15 +447,18 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) { const openY = 0; const [mobileTransactionsOpen, setMobileTransactionsOpen] = useState(false); - const [{ y }, api] = useSpring(() => ({ - y: closeY.current, - immediate: false, - })); + const [{ y }, api] = useSpring( + () => ({ + from: { y: closeY.current }, + immediate: false, + }), + [], + ); useEffect(() => { closeY.current = totalHeight; void api.start({ - y: mobileTransactionsOpen ? openY : closeY.current, + to: { y: mobileTransactionsOpen ? openY : closeY.current }, immediate: false, }); }, [totalHeight, mobileTransactionsOpen, api]); @@ -463,7 +466,7 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) { const open = useCallback( ({ canceled }: { canceled: boolean }) => { void api.start({ - y: openY, + to: { y: openY }, immediate: false, config: canceled ? config.wobbly : config.stiff, }); @@ -475,7 +478,7 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) { const close = useCallback( (velocity = 0) => { void api.start({ - y: closeY.current, + to: { y: closeY.current }, config: { ...config.stiff, velocity }, }); setMobileTransactionsOpen(false); @@ -487,7 +490,7 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) { ({ offset: [, oy], cancel }) => { if (oy < 0) { cancel(); - void api.start({ y: 0, immediate: true }); + void api.start({ to: { y: 0 }, immediate: true }); return; } @@ -501,7 +504,7 @@ function CalendarInner({ widget, parameters }: CalendarInnerProps) { open({ canceled: true }); setMobileTransactionsOpen(true); } else { - void api.start({ y: oy, immediate: true }); + void api.start({ to: { y: oy }, immediate: true }); } } }, diff --git a/upcoming-release-notes/7224.md b/upcoming-release-notes/7224.md new file mode 100644 index 0000000000..b08b675676 --- /dev/null +++ b/upcoming-release-notes/7224.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [matt-fidd] +--- + +Bump react-spring diff --git a/yarn.lock b/yarn.lock index 66feebcf7e..f645a7f1d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -279,7 +279,7 @@ __metadata: react-redux: "npm:^9.2.0" react-router: "npm:7.13.0" react-simple-pull-to-refresh: "npm:^1.3.4" - react-spring: "npm:10.0.0" + react-spring: "npm:^10.0.3" react-swipeable: "npm:^7.0.2" react-virtualized-auto-sizer: "npm:^2.0.2" recharts: "npm:^3.7.0" @@ -7157,133 +7157,133 @@ __metadata: languageName: node linkType: hard -"@react-spring/animated@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/animated@npm:10.0.0" +"@react-spring/animated@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/animated@npm:10.0.3" dependencies: - "@react-spring/shared": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/shared": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10/1f1cf60d768b6d125d3c4da13a32bfc2314683dbbf5c985688c133ea6f1010718c9c77c04af79d3fe3652c9e4480471d1d7109c2ae4dd30f3c045dab3352fb4d + checksum: 10/473b4d2a6e9c4477e3806623d8581352db73cabd200f6fc4899dc98525ff155645ac5a758f21f0ccae443cfd4e96a1f2512fd7bb8bb0dd7b614915a500e7889a languageName: node linkType: hard -"@react-spring/core@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/core@npm:10.0.0" +"@react-spring/core@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/core@npm:10.0.3" dependencies: - "@react-spring/animated": "npm:~10.0.0" - "@react-spring/shared": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/animated": "npm:~10.0.3" + "@react-spring/shared": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10/317ddb8345fc4722f70527872053c87a88c9093f1e97c9691673324fc6ebfe005f62c17afe4198c0f1c949ff2a18cd4fbc5f2c08400e41dc740db0c0cfc00a43 + checksum: 10/43493d9f96fa1e7ca55be41bffbaca970df46fb1164ff8da4c99b8a4962893bbac685d50926b7d22ba5d32b985f1880ccd1dd825d7a55311ed787c0fe24cfea8 languageName: node linkType: hard -"@react-spring/konva@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/konva@npm:10.0.0" +"@react-spring/konva@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/konva@npm:10.0.3" dependencies: - "@react-spring/animated": "npm:~10.0.0" - "@react-spring/core": "npm:~10.0.0" - "@react-spring/shared": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/animated": "npm:~10.0.3" + "@react-spring/core": "npm:~10.0.3" + "@react-spring/shared": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: konva: ">=2.6" react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-konva: ^19 - checksum: 10/bc97ece79583694effde8a9749537b306c3ae3b0f1f924d3aa8751dddac41d43553d05cc1af5cb6b1f8cbddfed7df096f78fc84a4fb33d5fc438bf044c512903 + checksum: 10/538f6c5aa491658bc753f473fd3afc5b409618156f4342e88a05b74d481acbdb6bce89d04216ee84cec402ced4da0d8dc80d9ccd40eca866c27d9e34c7fccbdb languageName: node linkType: hard -"@react-spring/native@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/native@npm:10.0.0" +"@react-spring/native@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/native@npm:10.0.3" dependencies: - "@react-spring/animated": "npm:~10.0.0" - "@react-spring/core": "npm:~10.0.0" - "@react-spring/shared": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/animated": "npm:~10.0.3" + "@react-spring/core": "npm:~10.0.3" + "@react-spring/shared": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-native: ">=0.78" - checksum: 10/130faf30cc00fcea33cbc0ffc1d8ee962dd674643f8c64319089e74d450f966940e51851c1a8c3a673168dfe30e551ffa6618af779072caa80ff48b799b8f1e8 + checksum: 10/6c176ab19cfd898564d7b2dd2330fa56433238c70f8be7ef6daaf5b07f6b22c860619e846bd3a3d784ad75e2b361ee9ad79e8664ae015279998825502b3a1d61 languageName: node linkType: hard -"@react-spring/rafz@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/rafz@npm:10.0.0" - checksum: 10/d8961c853aef489fce4956084d368d994a3dcb5f9f8b848d5ccd32e7f7fb86247fae502e369e0134f97dd9dc515853b30df8ec76c8c2a39b2009db2ddc936376 +"@react-spring/rafz@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/rafz@npm:10.0.3" + checksum: 10/b3884747db544e2e630383e01f423b93f503799c318a01bd438eefac38c9beaa58ec10d701e042e0902164b1aefa42a4a50c0ff09d01b87135bb8242e560b786 languageName: node linkType: hard -"@react-spring/shared@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/shared@npm:10.0.0" +"@react-spring/shared@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/shared@npm:10.0.3" dependencies: - "@react-spring/rafz": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/rafz": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10/64a86386a9e8fbaa834be64b43bb29f378b44d63ce8c26577126f9cb5ffdd6d840f4ae8ca4d3032d89ee8fad75eea768a13ed79bc9002796e4b203dadb0c3a4c + checksum: 10/6193944a30139b830ad188ac9322bb492d59405f2909346c23b2c08a4b15ed81977d2e919bdc33815bfff55e64d88d1e74072800fa99b4a6b762aef72a2ebfb2 languageName: node linkType: hard -"@react-spring/three@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/three@npm:10.0.0" +"@react-spring/three@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/three@npm:10.0.3" dependencies: - "@react-spring/animated": "npm:~10.0.0" - "@react-spring/core": "npm:~10.0.0" - "@react-spring/shared": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/animated": "npm:~10.0.3" + "@react-spring/core": "npm:~10.0.3" + "@react-spring/shared": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: "@react-three/fiber": ">=6.0" react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 three: ">=0.126" - checksum: 10/cf871c2aa6bbc4404af0eb5d915ad5d8e022c55ad91e82c0d67373d9cfd53bea1b058725fd88e806933c228fe6415e9d0e2af1e31d7aaa5a4205ac1f0362089e + checksum: 10/c1732cb01ab5b4f9bad2e1e3c4352ffe89069415a5c3209fb63f7201980913457e1fae61705abd2604533aba4e12f63d79b6cd9e9590e3d03440506f444910b8 languageName: node linkType: hard -"@react-spring/types@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/types@npm:10.0.0" - checksum: 10/b0cd524db137a75f12909959c5d97d7f8d4f9697a56ce779e3a1b7aa54bbf31dd44535f640a60ac3150960cde512c8b893e9c54866afe361f8637f17c3dd76f9 +"@react-spring/types@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/types@npm:10.0.3" + checksum: 10/162a21857c1af3388f40ea86b3560e2a360937d47a187d3275e2e5105f5f4d4696fc890e6761af67aef9017c872847ba2f328cb8e76357c88d82525842d7ab17 languageName: node linkType: hard -"@react-spring/web@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/web@npm:10.0.0" +"@react-spring/web@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/web@npm:10.0.3" dependencies: - "@react-spring/animated": "npm:~10.0.0" - "@react-spring/core": "npm:~10.0.0" - "@react-spring/shared": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/animated": "npm:~10.0.3" + "@react-spring/core": "npm:~10.0.3" + "@react-spring/shared": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10/61cea16b4c295cf64390e3e03ecd7d37e59eb534159f0b53e9b0a0a31d96546923dd87bcb5c6ed1bd055573ee3f448ff695bc3743d9f3e01c57f544f0b5ba322 + checksum: 10/1d8af3f23b45ee7ab5efa5907530cb2b8ee3dab9b8ae2e3b80778d2df36455cd4815a285cf8b8a9572116ad13e7c9d561e356ec35db1eb0bc5d288a756845150 languageName: node linkType: hard -"@react-spring/zdog@npm:~10.0.0": - version: 10.0.0 - resolution: "@react-spring/zdog@npm:10.0.0" +"@react-spring/zdog@npm:~10.0.3": + version: 10.0.3 + resolution: "@react-spring/zdog@npm:10.0.3" dependencies: - "@react-spring/animated": "npm:~10.0.0" - "@react-spring/core": "npm:~10.0.0" - "@react-spring/shared": "npm:~10.0.0" - "@react-spring/types": "npm:~10.0.0" + "@react-spring/animated": "npm:~10.0.3" + "@react-spring/core": "npm:~10.0.3" + "@react-spring/shared": "npm:~10.0.3" + "@react-spring/types": "npm:~10.0.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 react-zdog: ">=1.0" zdog: ">=1.0" - checksum: 10/2aa4fd69aa0df36ba010c125e77cd525ebe2e33b5528cec16f72f391e34c4f09d47cd99fbc33197751fabe4b3e48b10ec22487ede351e5f6b2ad8672285151a5 + checksum: 10/1765e31fa5dba06b7d9a115749950030406f8ee895b4518327c97502c774a688b9ffc9d188d744fe3dda4800cd73fbca07ab7d8989e000a726930d44f13a9ee3 languageName: node linkType: hard @@ -25139,20 +25139,20 @@ __metadata: languageName: node linkType: hard -"react-spring@npm:10.0.0": - version: 10.0.0 - resolution: "react-spring@npm:10.0.0" +"react-spring@npm:^10.0.3": + version: 10.0.3 + resolution: "react-spring@npm:10.0.3" dependencies: - "@react-spring/core": "npm:~10.0.0" - "@react-spring/konva": "npm:~10.0.0" - "@react-spring/native": "npm:~10.0.0" - "@react-spring/three": "npm:~10.0.0" - "@react-spring/web": "npm:~10.0.0" - "@react-spring/zdog": "npm:~10.0.0" + "@react-spring/core": "npm:~10.0.3" + "@react-spring/konva": "npm:~10.0.3" + "@react-spring/native": "npm:~10.0.3" + "@react-spring/three": "npm:~10.0.3" + "@react-spring/web": "npm:~10.0.3" + "@react-spring/zdog": "npm:~10.0.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10/e4612f3f9d57d08d2b66fab182a793458701d0eca8627636df7cbdbe0c8461f79bed49a03a71fbfca88e3948034e087b8b14d6a3636a61d658be818909987ec5 + checksum: 10/db2f0811006dee8a1589081cee47046f5253b65cb3a4b35314e1c293b02ac4c2a585e9441a71266a709effedfb8e72d885bfcb560a4c85d43fa51ac0be955904 languageName: node linkType: hard