@graphcommerce/framer-scroller 2.1.9 → 2.1.12

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Change Log
 
+## 2.1.12
+
+### Patch Changes
+
+- [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`55c2dcde7`](https://github.com/graphcommerce-org/graphcommerce/commit/55c2dcde7869ee51b84494af653b3edfd43904a4) Thanks [@paales](https://github.com/paales)! - ScrollerButton prev/next button wouldn't render at the right time
+
+* [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494) Thanks [@paales](https://github.com/paales)! - LayoutOverlay performance improvements
+
+* Updated dependencies [[`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/next-ui@4.8.1
+  - @graphcommerce/framer-utils@3.1.3
+  - @graphcommerce/image@3.1.6
+
+## 2.1.11
+
+### Patch Changes
+
+- Updated dependencies [[`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397), [`3ac90b57c`](https://github.com/graphcommerce-org/graphcommerce/commit/3ac90b57c68b96f9d81771d6664ed9435a28fc1d)]:
+  - @graphcommerce/next-ui@4.8.0
+
+## 2.1.10
+
+### Patch Changes
+
+- [#1451](https://github.com/graphcommerce-org/graphcommerce/pull/1451) [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061) Thanks [@paales](https://github.com/paales)! - Removed all occurences of @lingui/macro and moved to @lingui/macro / @lingui/core in preparation to move to swc.
+
+  Since we've removed @lingui/macro, all occurences need to be replaced with @lingui/core and @lingui/react.
+
+  All occurences of `<Trans>` and `t` need to be replaced:
+
+  ```tsx
+  import { Trans, t } from '@lingui/macro'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={t`Account ${foo}`}>
+        <Trans>My Translation {foo}</Trans>
+      </div>
+    )
+  }
+  ```
+
+  Needs to be replaced with:
+
+  ```tsx
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+      </div>
+    )
+  }
+  ```
+
+  [More examples for Trans](https://lingui.js.org/ref/macro.html#examples-of-jsx-macros) and [more examples for `t`](https://lingui.js.org/ref/macro.html#examples-of-js-macros)
+
+- Updated dependencies [[`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061)]:
+  - @graphcommerce/next-ui@4.7.2
+
 ## 2.1.9
 
 ### Patch Changes

package/components/ScrollerButton.tsx

@@ -18,14 +18,25 @@ export const ScrollerButton = m(
     const scrollTo = useScrollTo()
     const handleClick = () => scrollTo(getSnapPosition(direction))
 
-    const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef, 1)
+    const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef)
 
     const progress = useTransform<number, number>(
       [xProgress, yProgress, xMax, yMax],
       ([x, y, xM, yM]) => {
         if (xM === 0 && yM === 0) return 0
-        if (direction === 'right' || direction === 'down') return x * y === 1 ? 0 : 1
-        return x * y === 0 ? 0 : 1
+
+        switch (direction) {
+          case 'left':
+            return x < 0.1 ? 0 : 1
+          case 'right':
+            return x > 0.9 ? 0 : 1
+          case 'up':
+            return y < 0.1 ? 0 : 1
+          case 'down':
+            return y > 0.9 ? 0 : 1
+          default:
+            return 0
+        }
       },
     )
     const scale = useSpring(progress)

package/components/ScrollerDot.tsx

@@ -1,6 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
-import { t } from '@lingui/macro'
+import { i18n } from '@lingui/core'
 import { Fab, FabProps, styled } from '@mui/material'
 import { m } from 'framer-motion'
 import { useScrollTo } from '../hooks/useScrollTo'
@@ -37,7 +37,7 @@ export function ScrollerDot(props: ScrollerDotProps) {
         scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
       }}
       className={classes.dot}
-      aria-label={t`Navigate to item ${idx + 1}`}
+      aria-label={i18n._(/* i18n */ 'Navigate to item {0}', { 0: idx + 1 })}
       sx={{
         boxShadow: 'none',
         background: 'transparent',

package/hooks/useScrollTo.ts

@@ -13,7 +13,7 @@ export function useScrollTo() {
       const ref = scrollerRef.current
       if (!ref) return
 
-      // In the future we want to move to browser native scrolling behavior, but since it is too slow we're not moving to that yet.
+      // In the future we want to move to browser native scrolling behavior, but since the animation timing isn't configurable we can't use it.
       // if ('scrollBehavior' in document.documentElement.style) {
       //   scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
       //   await new Promise((onComplete) => {
@@ -22,6 +22,9 @@ export function useScrollTo() {
       //   return
       // }
 
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      scroll.scroll.start(() => () => {})
+
       const xDone = new Promise<void>((onComplete) => {
         if (ref.scrollLeft !== to.x) {
           disableSnap()
@@ -32,10 +35,11 @@ export function useScrollTo() {
               velocity: scroll.x.getVelocity(),
               onUpdate: (v) => {
                 ref.scrollLeft = v
+                scroll.scroll.set({ ...scroll.scroll.get(), x: v })
               },
               onComplete,
               onStop: onComplete,
-              duration: 500,
+              duration: 375,
             }),
           )
         } else onComplete()
@@ -49,22 +53,26 @@ export function useScrollTo() {
               from: ref.scrollTop,
               to: to.y,
               velocity: scroll.y.getVelocity(),
-              onUpdate: (v) => {
+              onUpdate: (v: number) => {
                 ref.scrollTop = v
+                scroll.scroll.set({ ...scroll.scroll.get(), y: v })
               },
               onComplete,
               onStop: onComplete,
-              duration: 500,
+              duration: 375,
             }),
           )
-        } else onComplete()
+        } else {
+          onComplete()
+        }
       })
 
       await xDone
       await yDone
+      scroll.scroll.stop()
       enableSnap()
     },
-    [disableSnap, enableSnap, register, scroll.x, scroll.y, scrollerRef],
+    [disableSnap, enableSnap, register, scroll, scrollerRef],
   )
 
   return scrollTo

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.1.9",
+  "version": "2.1.12",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,19 +15,20 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.1.2",
-    "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/next-ui": "4.7.1"
+    "@graphcommerce/framer-utils": "3.1.3",
+    "@graphcommerce/image": "3.1.6",
+    "@graphcommerce/next-ui": "4.8.1"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.6",
+    "@graphcommerce/eslint-config-pwa": "^4.1.7",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1"
   },
   "peerDependencies": {
     "@mui/material": "5.5.3",
-    "@lingui/macro": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
     "framer-motion": "^6.2.4",
     "next": "12.1.2",
     "popmotion": "11.0.3",