@graphcommerce/framer-scroller 5.1.0-canary.2 → 5.1.0-canary.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 5.1.0-canary.4
+
+### Patch Changes
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`f44a05a6c`](https://github.com/graphcommerce-org/graphcommerce/commit/f44a05a6cedadc17e44c87f53cad5f462bc52aba) - Use a singlular useElementScroll and provide ther scroll from the useScrollerContext ([@paales](https://github.com/paales))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`3b341f694`](https://github.com/graphcommerce-org/graphcommerce/commit/3b341f69409c2c6404b619684d1a28aec32a0211) - When selecting text inside an input or textarea it shouldn't be possible to drag the scroller ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.3
+
+### Patch Changes
+
+- [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
+
+  - Updated the @mui/material package
+  - Removed dependencies on react-hook-form-mui and @playwright/test
+  - Upgraded dependencies including type-fest and graphql-mesh
+  - Solved peer dependency issues ([@paales](https://github.com/paales))
+
 ## 5.1.0-canary.2
 
 ## 5.1.0-canary.1

package/components/ScrollerBar.tsx

@@ -0,0 +1,106 @@
+import { extendableComponent } from '@graphcommerce/next-ui/Styles'
+import { styled, SxProps, Theme, useTheme } from '@mui/material'
+import { m, transform, useTransform } from 'framer-motion'
+import { useRef } from 'react'
+import { useScrollerContext } from '../hooks/useScrollerContext'
+import { useScrollerControl } from '../hooks/useScrollerControl'
+
+type OwnerProps = {
+  direction: 'x' | 'y'
+}
+
+type ScrollerBarProps = OwnerProps & {
+  sx?: SxProps<Theme>
+}
+
+const name = 'ScrollerBar'
+const parts = ['track', 'thumb'] as const
+const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
+
+const Track = styled(m.div)({
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  left: 0,
+  padding: '2px',
+})
+
+const Scroll = styled(m.button)({
+  appearance: 'none',
+  border: 'none',
+  background: 'none',
+  padding: 0,
+  margin: 0,
+  display: 'block',
+  height: 7,
+})
+
+export function ScrollerBar(props: ScrollerBarProps) {
+  const { direction, sx } = props
+  const control = useScrollerControl()
+  const { scroll, scrollerRef } = useScrollerContext()
+  const track = useRef<HTMLDivElement>(null)
+
+  const classes = withState({ direction })
+  const theme = useTheme()
+
+  const offsetSize = direction === 'x' ? 'offsetWidth' : 'offsetHeight'
+  const scrollSize = direction === 'x' ? 'scrollWidth' : 'scrollHeight'
+  const size = direction === 'x' ? 'width' : 'height'
+  const offAxis = direction === 'x' ? 'height' : 'width'
+
+  const scrollProgress = scroll[`${direction}Progress`]
+
+  const thumbSize = useTransform(scrollProgress, (directionProgress) => {
+    if (!scrollerRef.current) return 0
+    const trackWidth = scrollerRef.current[offsetSize]
+    return trackWidth * (trackWidth / scrollerRef.current[scrollSize])
+  })
+
+  const thumbX = useTransform([scrollProgress, thumbSize], ([p, thumbS]: number[]) => {
+    if (!scrollerRef.current) return undefined
+    const baseX = (scrollerRef.current[offsetSize] - thumbS) * p
+    return control.controlling ? undefined : baseX
+  })
+
+  return (
+    <Track
+      ref={track}
+      className={classes.track}
+      sx={sx}
+      whileHover={{
+        backgroundColor: theme.palette.action.selected,
+        // borderTop: `1px solid ${theme.palette.action.active}`,
+      }}
+    >
+      <Scroll
+        className={classes.thumb}
+        aria-label='Scroll'
+        sx={{
+          backgroundColor: theme.palette.action.active,
+          borderRadius: '50px',
+        }}
+        style={{ [direction]: thumbX, [size]: thumbSize }}
+        whileHover={{ [offAxis]: 13 }}
+        // whileDrag={{ height: 20 }}
+        onDragStart={() => control.take()}
+        onDragEnd={() => control.release()}
+        onDrag={(event, info) => {
+          if (!scrollerRef.current || !track.current) return
+
+          const maxSize = scrollerRef.current[offsetSize] - thumbSize.get()
+
+          const progress = (control.x / scrollerRef.current[scrollSize]) * track.current[offsetSize]
+          const position = progress + info.offset[direction]
+          control.updateProgress({
+            [direction]: transform(position, [0, maxSize], [0, 1]),
+          })
+        }}
+        drag='x'
+        dragConstraints={track}
+        dragElastic={0}
+        dragMomentum={false}
+      />
+    </Track>
+  )
+}

package/components/ScrollerButton.tsx

@@ -1,4 +1,4 @@
-import { useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
@@ -18,11 +18,11 @@ export const ScrollerButton = m(
   React.forwardRef<HTMLDivElement, ScrollerButtonProps>((props, ref) => {
     const { direction, sx = [], layout, className, sxContainer, ...buttonProps } = props
 
-    const { getSnapPosition, scrollerRef } = useScrollerContext()
+    const { getSnapPosition, scroll } = useScrollerContext()
     const scrollTo = useScrollTo()
     const handleClick = () => scrollTo(getSnapPosition(direction))
 
-    const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef)
+    const { xProgress, yProgress, xMax, yMax } = scroll
 
     const visibility = useMotionValueValue(
       useTransform<number, number>([xProgress, yProgress, xMax, yMax], ([x, y, xM, yM]) => {

package/components/ScrollerProvider.tsx

@@ -1,4 +1,4 @@
-import { useConstant } from '@graphcommerce/framer-utils'
+import { useConstant, useElementScroll } from '@graphcommerce/framer-utils'
 import { MotionValue, motionValue, Point, useMotionValue } from 'framer-motion'
 import { PlaybackControls } from 'popmotion'
 import React, { useEffect, useRef, useMemo, useCallback } from 'react'
@@ -333,6 +333,8 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
     return { x: 0, y: 0, [axis]: position }
   }
 
+  const scroll = useElementScroll(scrollerRef)
+
   const value = useConstant<ScrollerContext>(() => ({
     scrollerRef,
     scrollSnap,
@@ -345,6 +347,7 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
     getSnapPosition,
     getScrollSnapPositions,
     registerChildren,
+    scroll,
   }))
 
   return <scrollerContext.Provider value={value} {...providerProps} />

package/hooks/useScrollTo.ts

@@ -1,4 +1,3 @@
-import { useElementScroll } from '@graphcommerce/framer-utils'
 import { MotionConfigContext, Point, Tween } from 'framer-motion'
 import { animate } from 'popmotion'
 import { useCallback, useContext } from 'react'
@@ -6,8 +5,7 @@ import { distanceAnimationDuration } from '../utils/distanceAnimationDuration'
 import { useScrollerContext } from './useScrollerContext'
 
 export function useScrollTo() {
-  const { scrollerRef, register, disableSnap, enableSnap } = useScrollerContext()
-  const scroll = useElementScroll(scrollerRef)
+  const { scrollerRef, register, disableSnap, enableSnap, scroll } = useScrollerContext()
 
   const duration = (useContext(MotionConfigContext).transition as Tween | undefined)?.duration ?? 0
 

package/hooks/useScroller.ts

@@ -1,4 +1,4 @@
-import { useConstant, useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
+import { useConstant, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import { SxProps, Theme } from '@mui/material'
 import {
@@ -43,15 +43,13 @@ export function useScroller<
 >(props: ScrollableProps<TagName>, forwardedRef: React.ForwardedRef<E>) {
   const { hideScrollbar = false, children, grid = false, ...divProps } = props
 
-  const { scrollSnap, scrollerRef, enableSnap, disableSnap, snap, registerChildren } =
+  const { scrollSnap, scrollerRef, enableSnap, disableSnap, snap, registerChildren, scroll } =
     useScrollerContext()
 
   useEffect(() => {
     registerChildren(children)
   }, [children, registerChildren])
 
-  const scroll = useElementScroll(scrollerRef)
-
   const canGrab = useMotionValueValue(
     useTransform(
       [scroll.xMax, scroll.yMax] as MotionValue<string | number>[],
@@ -83,6 +81,8 @@ export function useScroller<
   const onPanStart: PanHandlers['onPanStart'] = (event) => {
     // If we're not dealing with the mouse we don't need to do anything
     if (!isHTMLMousePointerEvent(event)) return
+
+    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') return
     if (event.target.closest('.Scroller-root') !== scrollerRef.current) return
 
     scrollStart.x.set(scroll.x.get())

package/hooks/useScrollerControl.ts

@@ -0,0 +1,70 @@
+import { useConstant } from '@graphcommerce/framer-utils'
+import { PanInfo, Point } from 'framer-motion'
+import { useScrollerContext } from './useScrollerContext'
+import { useVelocitySnapTo } from './useVelocitySnapTo'
+
+export type ScrollerControl = {
+  controlling: boolean
+  x: number
+  y: number
+  take: () => void
+  update(point: Partial<Point>): void
+  updateProgress(point: Partial<Point>): void
+  release: (info?: PanInfo) => Promise<void>
+}
+
+export function useScrollerControl(): ScrollerControl {
+  const { scrollerRef, disableSnap, scroll } = useScrollerContext()
+  const snapToVelocity = useVelocitySnapTo(scrollerRef)
+
+  const control = useConstant<ScrollerControl>(() => ({
+    controlling: false,
+    x: 0,
+    y: 0,
+    take: () => {
+      control.controlling = true
+      control.x = scroll.x.get()
+      control.y = scroll.y.get()
+
+      // @ts-expect-error private api, but we're updating the animation value here manually instead of relying on the event listener.
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      scroll.scroll.start(() => () => {})
+      disableSnap()
+    },
+    update: ({ x, y }: Point) => {
+      if (!control.controlling) throw Error('not controlling')
+      if (!scrollerRef.current) return
+
+      const current = scroll.scroll.get()
+      scroll.scroll.set({
+        ...current,
+        x: x ?? current.x,
+        y: y ?? current.y,
+      })
+      scrollerRef.current.scrollLeft = x
+      scrollerRef.current.scrollTop = y
+    },
+    /** X, y are values from 0, to 1 */
+    updateProgress: ({ x, y }: Point) => {
+      const scrollRef = scrollerRef.current
+      if (!scrollRef) return
+
+      const current = scroll.scroll.get()
+      const xValue = (x ?? current.x) * (scrollRef.scrollWidth - scrollRef.clientWidth)
+      const yValue = (y ?? current.y) * (scrollRef.scrollHeight - scrollRef.clientHeight)
+
+      control.update({ x: xValue, y: yValue })
+    },
+    release: async (info?: PanInfo) => {
+      if (!control.controlling) throw Error('not controlling')
+
+      scroll.scroll.stop()
+      await snapToVelocity(info ?? { velocity: { x: 0, y: 0 }, offset: { x: 0, y: 0 } })
+      control.x = 0
+      control.y = 0
+      control.controlling = false
+    },
+  }))
+
+  return control
+}

package/hooks/useVelocitySnapTo.ts

@@ -1,11 +1,13 @@
 import { useMatchMedia } from '@graphcommerce/next-ui'
-import { useTheme } from '@mui/material'
 import { PanInfo } from 'framer-motion'
 import { inertia, InertiaOptions } from 'popmotion'
+import { ScrollerContext } from '../types'
 import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 
-const clamp = ({ velocity, offset }: PanInfo, axis: 'x' | 'y') =>
+type LimitedPanInfo = Pick<PanInfo, 'velocity' | 'offset'>
+
+const clamp = ({ velocity, offset }: LimitedPanInfo, axis: 'x' | 'y') =>
   velocity[axis] < 0
     ? Math.max(velocity[axis], -Math.abs(offset[axis] * 3))
     : Math.min(velocity[axis], Math.abs(offset[axis] * 3))
@@ -20,7 +22,7 @@ const closest = (counts: number[], target: number) =>
 export const useVelocitySnapTo = (
   ref: React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement | undefined>,
 ) => {
-  const { disableSnap, enableSnap, register, getScrollSnapPositions, scrollSnap } =
+  const { disableSnap, enableSnap, register, getScrollSnapPositions, scrollSnap, scroll } =
     useScrollerContext()
 
   const matchMedia = useMatchMedia()
@@ -39,7 +41,7 @@ export const useVelocitySnapTo = (
     // restSpeed: 1,
   }
 
-  const animatePan = async (info: PanInfo) => {
+  const animatePan = async (info: LimitedPanInfo) => {
     const el = ref.current
     if (!el) throw Error(`Can't find html element`)
 
@@ -59,7 +61,9 @@ export const useVelocitySnapTo = (
             min: typeof closestX !== 'undefined' ? closestX - scrollLeft : undefined,
             ...inertiaOptions,
             onUpdate: (v: number) => {
-              el.scrollLeft = Math.round(v + scrollLeft)
+              const x = Math.round(v + scrollLeft)
+              el.scrollLeft = x
+              scroll.scroll.set({ ...scroll.scroll.get(), x })
             },
             onComplete,
           }),
@@ -83,7 +87,9 @@ export const useVelocitySnapTo = (
             min: typeof closestY !== 'undefined' ? closestY - scrollTop : undefined,
             ...inertiaOptions,
             onUpdate: (v: number) => {
-              el.scrollTop = Math.round(v + scrollTop)
+              const y = Math.round(v + scrollTop)
+              el.scrollTop = y
+              scroll.scroll.set({ ...scroll.scroll.get(), y })
             },
             onComplete,
           }),

package/index.ts

@@ -2,6 +2,7 @@ export * from './types'
 
 export * from './components/MotionImageAspect'
 export * from './components/Scroller'
+export * from './components/ScrollerBar'
 export * from './components/ScrollerButton'
 export * from './components/ScrollerDots'
 export * from './components/ScrollerPageCounter'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.2",
+  "version": "5.1.0-canary.4",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,23 +15,22 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "5.1.0-canary.2",
-    "@graphcommerce/image": "5.1.0-canary.2"
+    "popmotion": "11.0.5",
+    "@graphcommerce/framer-utils": "5.1.0-canary.4",
+    "@graphcommerce/image": "5.1.0-canary.4"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^5.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^5.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^5.1.0-canary.2",
-    "@playwright/test": "^1.21.1"
+    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.4",
+    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.4",
+    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.4"
   },
   "peerDependencies": {
-    "@mui/material": "5.5.3",
+    "@mui/material": "^5.10.16",
     "@lingui/react": "^3.13.2",
     "@lingui/core": "^3.13.2",
-    "framer-motion": "^6.2.4",
+    "framer-motion": "^7.0.0",
     "next": "^12.1.2",
-    "popmotion": "11.0.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

package/types.ts

@@ -1,3 +1,4 @@
+import { ScrollMotionValues } from '@graphcommerce/framer-utils'
 import { MotionValue, Point } from 'framer-motion'
 import { PlaybackControls } from 'popmotion'
 import React from 'react'
@@ -26,6 +27,7 @@ export type ScrollerContext = {
   scrollerRef: ReactHtmlRefObject
   items: MotionValue<ItemState[]>
   snap: MotionValue<boolean>
+  scroll: ScrollMotionValues
 
   /** @private */
   enableSnap: () => void