@graphcommerce/framer-scroller 2.0.6 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 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'
+import { t } from '@lingui/macro'
+import { Fab, FabProps, styled } from '@mui/material'
+import { m, useSpring, useTransform } 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,11 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
-import { m } from 'framer-motion'
+import { m, useSpring } 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 +21,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 +41,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/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.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,9 +15,9 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^3.0.4",
+    "@graphcommerce/framer-utils": "^3.0.5",
     "@graphcommerce/image": "^3.1.1",
-    "@graphcommerce/next-ui": "^4.2.4"
+    "@graphcommerce/next-ui": "^4.3.0"
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.0.5",