@graphcommerce/framer-scroller 2.0.6 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Change Log
 
+## 2.1.2
+
+### Patch Changes
+
+- [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c) Thanks [@paales](https://github.com/paales)! - Make sure the useScrollTo return value doesn't change on when rerendered.
+
+* [#1353](https://github.com/graphcommerce-org/graphcommerce/pull/1353) [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba) Thanks [@paales](https://github.com/paales)! - Eslint: enable rules that were previously disabled and make fixes
+
+* Updated dependencies [[`49a2d6617`](https://github.com/graphcommerce-org/graphcommerce/commit/49a2d661712e1787fba46c6195f7b559189e23d9), [`f67da3cfb`](https://github.com/graphcommerce-org/graphcommerce/commit/f67da3cfbe2dcf5ea23519d088c5aa0074029182), [`218766869`](https://github.com/graphcommerce-org/graphcommerce/commit/218766869f7468c067a590857c942f3819f8add4), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c), [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c)]:
+  - @graphcommerce/next-ui@4.4.0
+  - @graphcommerce/framer-utils@3.1.0
+
+## 2.1.1
+
+### Patch Changes
+
+- [#1330](https://github.com/graphcommerce-org/graphcommerce/pull/1330) [`b7ce24fbc`](https://github.com/graphcommerce-org/graphcommerce/commit/b7ce24fbc1fbebf913faf8f5ad0bf1a126cb56d2) Thanks [@paales](https://github.com/paales)! - cyclic dependency issue with next-ui
+
+## 2.1.0
+
+### Minor Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`1e2a07141`](https://github.com/graphcommerce-org/graphcommerce/commit/1e2a071414154600430e6dcf0513d86ab78e0b28) Thanks [@paales](https://github.com/paales)! - Add a state-class to ScrollerDot when the dot is active to customize the colors of the dots.
+
+  ```tsx
+  <ScrollerDots
+    layout
+    sx={{
+      '& .ScrollerDot-circle': {
+        bgcolor: 'green',
+      },
+      '& .ScrollerDot-circle.active': {
+        bgcolor: 'hotpink',
+        opacity: '1 !important',
+      },
+    }}
+  />
+  ```
+
+### Patch Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`d91359871`](https://github.com/graphcommerce-org/graphcommerce/commit/d91359871b023a9f0d305b37353c1ee2d0912248) Thanks [@paales](https://github.com/paales)! - useScroller set userSelect/userDrag for all types of scrollers instead of only when it is rendered as a grid
+
+- Updated dependencies [[`5266388ea`](https://github.com/graphcommerce-org/graphcommerce/commit/5266388eaffda41592623ef7a3ddbbe03c8e0dad), [`9b35403d9`](https://github.com/graphcommerce-org/graphcommerce/commit/9b35403d9dbb2606ac7cf3bb641a0f9cc3d8a2ba), [`0298a0de1`](https://github.com/graphcommerce-org/graphcommerce/commit/0298a0de1d13e543c4124a6a099297b4e27e2b05), [`815132ea4`](https://github.com/graphcommerce-org/graphcommerce/commit/815132ea43937b4b84b59ec9974ac593cb4eb456), [`3326742a0`](https://github.com/graphcommerce-org/graphcommerce/commit/3326742a0dceb45f0cac4741ca09dc4d4f09ad90), [`7a3799bfc`](https://github.com/graphcommerce-org/graphcommerce/commit/7a3799bfc107f26aa9991a91db5f228e3476f4aa), [`9a77f88ed`](https://github.com/graphcommerce-org/graphcommerce/commit/9a77f88ed26cbecdae9a135c3cb234a5b7ecf4df), [`0eeaad304`](https://github.com/graphcommerce-org/graphcommerce/commit/0eeaad30461b1d5b486438f0287fa76d49429044), [`bc5213547`](https://github.com/graphcommerce-org/graphcommerce/commit/bc52135471479c83d989449dad24798112e898f4), [`3f1912f55`](https://github.com/graphcommerce-org/graphcommerce/commit/3f1912f553318d5888f8af2b841918ef4ae96a84), [`b6c68cda8`](https://github.com/graphcommerce-org/graphcommerce/commit/b6c68cda8836a1d0c78ef351899cec9ec1037385), [`bec88d0d7`](https://github.com/graphcommerce-org/graphcommerce/commit/bec88d0d70b679e15150917df89986ecee5b39a6)]:
+  - @graphcommerce/next-ui@4.3.0
+  - @graphcommerce/framer-utils@3.0.5
+
 ## 2.0.6
 
 ### Patch Changes

package/components/ScrollerDot.tsx

@@ -0,0 +1,58 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { extendableComponent } from '@graphcommerce/next-ui/Styles'
+import { t } from '@lingui/macro'
+import { Fab, FabProps, styled } from '@mui/material'
+import { m } from 'framer-motion'
+import { useScrollTo } from '../hooks/useScrollTo'
+import { useScrollerContext } from '../hooks/useScrollerContext'
+import { ItemState } from '../types'
+
+const name = 'ScrollerDot'
+const parts = ['dot', 'circle'] as const
+type OwnerProps = { active: boolean }
+
+const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
+
+type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
+
+const MotionBox = styled(m.div)({})
+
+export function ScrollerDot(props: ScrollerDotProps) {
+  const { el, visibility, opacity, idx, ...fabProps } = props
+  const scrollTo = useScrollTo()
+  const { getScrollSnapPositions } = useScrollerContext()
+
+  const active = useMotionValueValue(visibility, (v) => v > 0.5)
+  const classes = withState({ active })
+
+  return (
+    <Fab
+      // eslint-disable-next-line react/no-array-index-key
+      color='inherit'
+      size='small'
+      {...fabProps}
+      onClick={() => {
+        const positions = getScrollSnapPositions()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
+      }}
+      className={classes.dot}
+      aria-label={t`Navigate to item ${idx + 1}`}
+      sx={{
+        boxShadow: 'none',
+        background: 'transparent',
+      }}
+    >
+      <MotionBox
+        className={classes.circle}
+        sx={(theme) => ({
+          borderRadius: '99em',
+          width: 10,
+          height: 10,
+          background: theme.palette.text.primary,
+        })}
+        style={{ opacity }}
+      />
+    </Fab>
+  )
+}

package/components/ScrollerDots.tsx

@@ -1,10 +1,10 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
-import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
+import { FabProps, styled, SxProps, Theme } from '@mui/material'
 import { m } from 'framer-motion'
 import React from 'react'
-import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
+import { ScrollerDot } from './ScrollerDot'
 
 const MotionBox = styled(m.div)({})
 
@@ -20,9 +20,8 @@ export const ScrollerDots = m(
   React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
     const { fabProps, sx = [], ...containerProps } = props
 
-    const { items, getScrollSnapPositions } = useScrollerContext()
+    const { items } = useScrollerContext()
     const itemsArr = useMotionValueValue(items, (v) => v)
-    const scrollTo = useScrollTo()
 
     return (
       <MotionBox
@@ -41,35 +40,8 @@ export const ScrollerDots = m(
         ]}
       >
         {itemsArr.map((item, idx) => (
-          <Fab
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            color='inherit'
-            size='small'
-            {...fabProps}
-            onClick={() => {
-              const positions = getScrollSnapPositions()
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
-            }}
-            className={classes.dot}
-            aria-label={`img-${idx}`}
-            sx={{
-              boxShadow: 'none',
-              background: 'transparent',
-            }}
-          >
-            <MotionBox
-              className={classes.circle}
-              sx={(theme) => ({
-                borderRadius: '99em',
-                width: 10,
-                height: 10,
-                background: theme.palette.text.primary,
-              })}
-              style={{ opacity: item.opacity }}
-            />
-          </Fab>
+          // eslint-disable-next-line react/no-array-index-key
+          <ScrollerDot key={idx} {...item} idx={idx} />
         ))}
       </MotionBox>
     )

package/hooks/useScrollTo.ts

@@ -1,65 +1,71 @@
 import { useElementScroll } from '@graphcommerce/framer-utils'
 import { Point } from 'framer-motion'
 import { animate } from 'popmotion'
+import { useCallback } from 'react'
 import { useScrollerContext } from './useScrollerContext'
 
 export function useScrollTo() {
   const { scrollerRef, register, disableSnap, enableSnap } = useScrollerContext()
   const scroll = useElementScroll(scrollerRef)
 
-  return async (to: Point) => {
-    const ref = scrollerRef.current
-    if (!ref) return
+  const scrollTo = useCallback(
+    async (to: Point) => {
+      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.
-    // if ('scrollBehavior' in document.documentElement.style) {
-    //   scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
-    //   await new Promise((onComplete) => {
-    //     setTimeout(onComplete, 2000)
-    //   })
-    //   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.
+      // if ('scrollBehavior' in document.documentElement.style) {
+      //   scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
+      //   await new Promise((onComplete) => {
+      //     setTimeout(onComplete, 2000)
+      //   })
+      //   return
+      // }
 
-    const xDone = new Promise<void>((onComplete) => {
-      if (ref.scrollLeft !== to.x) {
-        disableSnap()
-        register(
-          animate({
-            from: ref.scrollLeft,
-            to: to.x,
-            velocity: scroll.x.getVelocity(),
-            onUpdate: (v) => {
-              ref.scrollLeft = v
-            },
-            onComplete,
-            onStop: onComplete,
-            duration: 500,
-          }),
-        )
-      } else onComplete()
-    })
+      const xDone = new Promise<void>((onComplete) => {
+        if (ref.scrollLeft !== to.x) {
+          disableSnap()
+          register(
+            animate({
+              from: ref.scrollLeft,
+              to: to.x,
+              velocity: scroll.x.getVelocity(),
+              onUpdate: (v) => {
+                ref.scrollLeft = v
+              },
+              onComplete,
+              onStop: onComplete,
+              duration: 500,
+            }),
+          )
+        } else onComplete()
+      })
 
-    const yDone = new Promise<void>((onComplete) => {
-      if (ref.scrollTop !== to.y) {
-        disableSnap()
-        register(
-          animate({
-            from: ref.scrollTop,
-            to: to.y,
-            velocity: scroll.y.getVelocity(),
-            onUpdate: (v) => {
-              ref.scrollTop = v
-            },
-            onComplete,
-            onStop: onComplete,
-            duration: 500,
-          }),
-        )
-      } else onComplete()
-    })
+      const yDone = new Promise<void>((onComplete) => {
+        if (ref.scrollTop !== to.y) {
+          disableSnap()
+          register(
+            animate({
+              from: ref.scrollTop,
+              to: to.y,
+              velocity: scroll.y.getVelocity(),
+              onUpdate: (v) => {
+                ref.scrollTop = v
+              },
+              onComplete,
+              onStop: onComplete,
+              duration: 500,
+            }),
+          )
+        } else onComplete()
+      })
 
-    await xDone
-    await yDone
-    enableSnap()
-  }
+      await xDone
+      await yDone
+      enableSnap()
+    },
+    [disableSnap, enableSnap, register, scroll.x, scroll.y, scrollerRef],
+  )
+
+  return scrollTo
 }

package/hooks/useScroller.ts

@@ -30,6 +30,7 @@ type OwnerProps = {
   isPanning: boolean
   hideScrollbar: boolean
   canGrab: boolean
+  grid: boolean
 }
 const name = 'Scroller' as const
 const parts = ['root'] as const
@@ -117,6 +118,7 @@ export function useScroller<
   const mdSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
 
   const classes = withState({
+    grid,
     smSnapDir,
     smGridDir: grid && smSnapDir,
     mdSnapDir,
@@ -128,7 +130,7 @@ export function useScroller<
   })
 
   const sx: SxProps<Theme> = (theme) => ({
-    '& *': {
+    '&.grid *': {
       userSelect: 'none',
       userDrag: 'none',
       WebkitUserDrag: 'none',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.0.6",
+  "version": "2.1.2",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,12 +15,12 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^3.0.4",
+    "@graphcommerce/framer-utils": "^3.1.0",
     "@graphcommerce/image": "^3.1.1",
-    "@graphcommerce/next-ui": "^4.2.4"
+    "@graphcommerce/next-ui": "^4.4.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.2",
     "@graphcommerce/prettier-config-pwa": "^4.0.3",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.19.2"